feat: adding SSL Toggle to Create Database Modal

superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx

@@ -17,13 +17,17 @@
  * under the License.
  */
 import React, { FormEvent } from 'react';
-import { SupersetTheme, JsonObject } from '@superset-ui/core';
+import { SupersetTheme, JsonObject, t } from '@superset-ui/core';
 import { InputProps } from 'antd/lib/input';
+import { Switch } from 'src/common/components';
+import InfoTooltip from 'src/components/InfoTooltip';
 import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
 import {
   formScrollableStyles,
   validatedFormStyles,
   StyledFormHeader,
+  toggleStyle,
+  infoTooltip,
 } from './styles';
 import { DatabaseForm, DatabaseObject } from '../types';
 
@@ -34,6 +38,7 @@ export const FormFieldOrder = [
   'username',
   'password',
   'database_name',
+  'encryption',
 ];
 
 interface FieldPropTypes {
@@ -44,6 +49,8 @@ interface FieldPropTypes {
   validationErrors: JsonObject | null;
   getValidation: () => void;
   db?: DatabaseObject;
+  isEditMode?: boolean;
+  sslForced?: boolean;
 }
 
 const hostField = ({
@@ -165,6 +172,34 @@ const displayField = ({
     helpText="Pick a nickname for this database to display as in Superset."
   />
 );
+const forceSSLField = ({
+  isEditMode,
+  changeMethods,
+  db,
+  sslForced,
+}: FieldPropTypes) => (
+  <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+    <Switch
+      disabled={sslForced && !isEditMode}
+      checked={db?.parameters?.encryption || sslForced}
+      onChange={changed => {
+        changeMethods.onParametersChange({
+          target: {
+            type: 'toggle',
+            name: 'encryption',
+            checked: true,
+            value: changed,
+          },
+        });
+      }}
+    />
+    <span css={toggleStyle}>SSL</span>
+    <InfoTooltip
+      tooltip={t('SSL will be enabled in the database connection')}
+      placement="bottomRight"
+    />
+  </div>
+);
 
 const FORM_FIELD_MAP = {
   host: hostField,
@@ -173,6 +208,7 @@ const FORM_FIELD_MAP = {
   username: usernameField,
   password: passwordField,
   database_name: displayField,
+  encryption: forceSSLField,
 };
 
 const DatabaseConnectionForm = ({
@@ -183,8 +219,10 @@ const DatabaseConnectionForm = ({
   getValidation,
   db,
   isEditMode = false,
+  sslForced,
 }: {
   isEditMode?: boolean;
+  sslForced: boolean;
   dbModel: DatabaseForm;
   db: Partial<DatabaseObject> | null;
   onParametersChange: (
@@ -197,13 +235,14 @@ const DatabaseConnectionForm = ({
   getValidation: () => void;
 }) => (
   <>
-    <StyledFormHeader>
-      <p className="helper"> Step 2 of 3 </p>
-      <h4>Enter the required {name} credentials</h4>
-      <p className="helper">
-        Need help? Learn more about connecting to {name}.
-      </p>
-    </StyledFormHeader>
+    {!isEditMode && (
+      <StyledFormHeader>
+        <h4>Enter the required {name} credentials</h4>
+        <p className="helper">
+          Need help? Learn more about connecting to {name}.
+        </p>
+      </StyledFormHeader>
+    )}
     <div
       // @ts-ignore
       css={(theme: SupersetTheme) => [
@@ -224,6 +263,8 @@ const DatabaseConnectionForm = ({
             getValidation,
             db,
             key: field,
+            isEditMode,
+            sslForced,
           }),
         )}
     </div>

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx

@@ -16,7 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, SupersetTheme } from '@superset-ui/core';
+import {
+  t,
+  SupersetTheme,
+  FeatureFlag,
+  isFeatureEnabled,
+} from '@superset-ui/core';
 import React, {
   FunctionComponent,
   useEffect,
@@ -45,7 +50,6 @@ import {
 import Label from 'src/components/Label';
 import ExtraOptions from './ExtraOptions';
 import SqlAlchemyForm from './SqlAlchemyForm';
-
 import DatabaseConnectionForm from './DatabaseConnectionForm';
 import {
   antDAlertStyles,
@@ -203,8 +207,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [dbName, setDbName] = useState('');
   const [isLoading, setLoading] = useState<boolean>(false);
   const conf = useCommonConf();
-
   const isEditMode = !!databaseId;
+  const sslForced = isFeatureEnabled(
+    FeatureFlag.FORCE_DATABASE_CONNECTIONS_SSL,
+  );
   const useSqlAlchemyForm =
     db?.configuration_method === CONFIGURATION_METHOD.SQLALCHEMY_URI;
   const useTabLayout = isEditMode || useSqlAlchemyForm;
@@ -297,10 +303,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     }
   };
 
-  const setDatabaseModel = engine => {
+  const setDatabaseModel = (engine: string) => {
     const isDynamic =
-      availableDbs?.databases.filter(db => db.engine === engine)[0]
-        .parameters !== undefined;
+      availableDbs?.databases.filter(
+        (db: DatabaseObject) => db.engine === engine,
+      )[0].parameters !== undefined;
     setDB({
       type: ActionType.dbSelected,
       payload: {
@@ -317,13 +324,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       <span className="available-label">
         Or choose from a list of other databases we support{' '}
       </span>
-      <label className="label-available-select">supported databases</label>
+      <Label className="label-available-select">supported databases</Label>
       <Select
         style={{ width: '100%' }}
         onChange={setDatabaseModel}
         placeholder="Choose a database..."
       >
-        {availableDbs?.databases?.map(database => (
+        {availableDbs?.databases?.map((database: DatabaseForm) => (
           <Select.Option value={database.engine} key={database.engine}>
             {database.name}
           </Select.Option>
@@ -335,10 +342,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const renderPreferredSelector = () => (
     <div className="preferred">
       {availableDbs?.databases
-        ?.filter(db => db.preferred)
-        .map(database => (
+        ?.filter((db: DatabaseForm) => db.preferred)
+        .map((database: DatabaseForm) => (
           <IconButton
-            className="preferred-item"
+            icon="preferred-item"
             onClick={() => setDatabaseModel(database.engine)}
             buttonText={database.name}
           />
@@ -358,7 +365,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             Back
           </Button>,
           !hasConnectedDb ? ( // if hasConnectedDb show back + finish
-            <Button key="submit" type="primary" onClick={onSave}>
+            <Button key="submit" buttonStyle="primary" onClick={onSave}>
               Connect
             </Button>
           ) : (
@@ -488,6 +495,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           ) : (
             <DatabaseConnectionForm
               isEditMode
+              sslForced={sslForced}
               dbModel={dbModel}
               db={db as DatabaseObject}
               onParametersChange={({ target }: { target: HTMLInputElement }) =>
@@ -617,6 +625,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           {!isLoading && db && (
             <>
               <DatabaseConnectionForm
+                db={db}
+                sslForced={sslForced}
                 dbModel={dbModel}
                 onParametersChange={({
                   target,

superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts

@@ -93,6 +93,17 @@ export const antDModalNoPaddingStyles = css`
   }
 `;
 
+export const infoTooltip = (theme: SupersetTheme) => css`
+  svg {
+    vertical-align: bottom;
+    margin-bottom: ${theme.gridUnit * 0.25}px;
+  }
+`;
+
+export const toggleStyle = (theme: SupersetTheme) => css`
+  padding-left: ${theme.gridUnit * 2}px;
+`;
+
 export const formScrollableStyles = (theme: SupersetTheme) => css`
   padding-left: ${theme.gridUnit * 4}px;
   padding-right: ${theme.gridUnit * 4}px;

superset-frontend/src/views/CRUD/data/database/types.ts

@@ -37,6 +37,7 @@ export type DatabaseObject = {
     database?: string;
     username?: string;
     password?: string;
+    encryption?: boolean;
   };
   configuration_method: CONFIGURATION_METHOD;
   engine?: string;