From 369b5f2cfeaa9589dbc246ed823c11e122b39a41 Mon Sep 17 00:00:00 2001 From: Arash Date: Thu, 3 Jun 2021 18:43:53 -0400 Subject: [PATCH 1/4] first draft of SSL Toggle --- .../DatabaseModal/DatabaseConnectionForm.tsx | 48 ++++++++++++++++--- .../data/database/DatabaseModal/index.tsx | 1 - .../data/database/DatabaseModal/styles.ts | 11 +++++ 3 files changed, 52 insertions(+), 8 deletions(-) diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx index 659a9bca30dab..4637dcd96c247 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx @@ -17,15 +17,27 @@ * under the License. */ import React, { FormEvent } from 'react'; -import { SupersetTheme, JsonObject } from '@superset-ui/core'; +import { + SupersetTheme, + JsonObject, + isFeatureEnabled, + FeatureFlag, + t, +} from '@superset-ui/core'; import { InputProps } from 'antd/lib/input'; +import { Switch } from 'src/common/components'; +import { Tooltip } from 'src/components/Tooltip'; +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'; +import { useTheme } from '@emotion/react'; export const FormFieldOrder = [ 'host', @@ -34,6 +46,7 @@ export const FormFieldOrder = [ 'username', 'password', 'database_name', + 'encryption', ]; interface FieldPropTypes { @@ -44,6 +57,7 @@ interface FieldPropTypes { validationErrors: JsonObject | null; getValidation: () => void; db?: DatabaseObject; + isEditMode?: boolean; } const hostField = ({ @@ -165,6 +179,22 @@ const displayField = ({ helpText="Pick a nickname for this database to display as in Superset." /> ); +const forceSSLField = ({ changeMethods, isEditMode }: FieldPropTypes) => + !isEditMode && ( +
infoTooltip(theme)}> + + + SSL + + +
+ ); const FORM_FIELD_MAP = { host: hostField, @@ -173,6 +203,7 @@ const FORM_FIELD_MAP = { username: usernameField, password: passwordField, database_name: displayField, + encryption: forceSSLField, }; const DatabaseConnectionForm = ({ @@ -197,12 +228,14 @@ const DatabaseConnectionForm = ({ getValidation: () => void; }) => ( <> - -

Enter the required {name} credentials

-

- Need help? Learn more about connecting to {name}. -

- + {!isEditMode && ( + +

Enter the required {name} credentials

+

+ Need help? Learn more about connecting to {name}. +

+ + )}
[ @@ -223,6 +256,7 @@ const DatabaseConnectionForm = ({ getValidation, db, key: field, + isEditMode, }), )}
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx index ee8367b87cb94..735d042e18b2f 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -44,7 +44,6 @@ import { import Label from 'src/components/Label'; import ExtraOptions from './ExtraOptions'; import SqlAlchemyForm from './SqlAlchemyForm'; - import DatabaseConnectionForm from './DatabaseConnectionForm'; import { antDAlertStyles, diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts index abecfb6daec3d..ab170b27f2521 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts @@ -84,6 +84,17 @@ export const antDModalNoPaddingStyles = css` } `; +export const infoTooltip = (theme: SupersetTheme) => css` + svg { + vertical-align: bottom; + margin-bottom: ${theme.gridUnit * 0.5}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; From 5fd7884c9788a45e40a7d556daaa6c4c145a2009 Mon Sep 17 00:00:00 2001 From: Arash Date: Fri, 4 Jun 2021 13:18:13 -0400 Subject: [PATCH 2/4] added payload data --- .../DatabaseModal/DatabaseConnectionForm.tsx | 57 +++++++++++-------- .../data/database/DatabaseModal/index.tsx | 13 ++++- .../src/views/CRUD/data/database/types.ts | 1 + 3 files changed, 46 insertions(+), 25 deletions(-) diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx index 4637dcd96c247..aae8563e441df 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx @@ -17,13 +17,7 @@ * under the License. */ import React, { FormEvent } from 'react'; -import { - SupersetTheme, - JsonObject, - isFeatureEnabled, - FeatureFlag, - t, -} 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 { Tooltip } from 'src/components/Tooltip'; @@ -37,7 +31,6 @@ import { infoTooltip, } from './styles'; import { DatabaseForm, DatabaseObject } from '../types'; -import { useTheme } from '@emotion/react'; export const FormFieldOrder = [ 'host', @@ -58,6 +51,7 @@ interface FieldPropTypes { getValidation: () => void; db?: DatabaseObject; isEditMode?: boolean; + sslForced?: boolean; } const hostField = ({ @@ -179,22 +173,36 @@ const displayField = ({ helpText="Pick a nickname for this database to display as in Superset." /> ); -const forceSSLField = ({ changeMethods, isEditMode }: FieldPropTypes) => - !isEditMode && ( -
infoTooltip(theme)}> - - - SSL - - ( +
infoTooltip(theme)}> + + { + changeMethods.onParametersChange({ + target: { + type: 'toggle', + name: 'encryption', + checked: true, + value: changed, + }, + }); + }} /> -
- ); + SSL + + +
+); const FORM_FIELD_MAP = { host: hostField, @@ -214,8 +222,10 @@ const DatabaseConnectionForm = ({ getValidation, db, isEditMode = false, + sslForced, }: { isEditMode?: boolean; + sslForced: boolean; dbModel: DatabaseForm; db: Partial | null; onParametersChange: ( @@ -257,6 +267,7 @@ const DatabaseConnectionForm = ({ db, key: field, isEditMode, + sslForced, }), )} diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx index 735d042e18b2f..ff1696d34ec00 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/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, @@ -195,8 +200,10 @@ const DatabaseModal: FunctionComponent = ({ const [dbName, setDbName] = useState(''); const [isLoading, setLoading] = useState(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; @@ -406,6 +413,7 @@ const DatabaseModal: FunctionComponent = ({ ) : ( @@ -517,6 +525,7 @@ const DatabaseModal: FunctionComponent = ({ <> onChange(ActionType.parametersChange, { diff --git a/superset-frontend/src/views/CRUD/data/database/types.ts b/superset-frontend/src/views/CRUD/data/database/types.ts index fd6307ca5e387..f611dd76cea97 100644 --- a/superset-frontend/src/views/CRUD/data/database/types.ts +++ b/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; From e5253af137a3ba8658b6816166cd2efec9e269bf Mon Sep 17 00:00:00 2001 From: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Date: Fri, 4 Jun 2021 14:28:38 -0400 Subject: [PATCH 3/4] Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx Co-authored-by: Beto Dealmeida --- .../CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx index a1824aa21e695..d6cb62939deb1 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx @@ -198,7 +198,7 @@ const forceSSLField = ({ SSL From d92f2f84a4da37a051dd4d26fce5f4dc4e0c4983 Mon Sep 17 00:00:00 2001 From: Arash Date: Fri, 4 Jun 2021 16:23:00 -0400 Subject: [PATCH 4/4] changed tooltips based on stephen advice --- .../DatabaseModal/DatabaseConnectionForm.tsx | 33 +++++++++---------- .../data/database/DatabaseModal/styles.ts | 2 +- 2 files changed, 16 insertions(+), 19 deletions(-) diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx index d6cb62939deb1..615db4fdf92c1 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx @@ -20,7 +20,6 @@ import React, { FormEvent } from 'react'; import { SupersetTheme, JsonObject, t } from '@superset-ui/core'; import { InputProps } from 'antd/lib/input'; import { Switch } from 'src/common/components'; -import { Tooltip } from 'src/components/Tooltip'; import InfoTooltip from 'src/components/InfoTooltip'; import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput'; import { @@ -180,23 +179,21 @@ const forceSSLField = ({ sslForced, }: FieldPropTypes) => (
infoTooltip(theme)}> - - { - changeMethods.onParametersChange({ - target: { - type: 'toggle', - name: 'encryption', - checked: true, - value: changed, - }, - }); - }} - /> - SSL - + { + changeMethods.onParametersChange({ + target: { + type: 'toggle', + name: 'encryption', + checked: true, + value: changed, + }, + }); + }} + /> + SSL css` svg { vertical-align: bottom; - margin-bottom: ${theme.gridUnit * 0.5}px; + margin-bottom: ${theme.gridUnit * 0.25}px; } `;