Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adding SSL Toggle to Create Database Modal #14976

Merged
merged 6 commits into from
Jun 5, 2021
Merged

feat: adding SSL Toggle to Create Database Modal #14976

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
369b5f2
first draft of SSL Toggle
AAfghahi Jun 3, 2021
5fd7884
added payload data
AAfghahi Jun 4, 2021
18d5ed5
Merge branch 'pexdax/db-connection-ui' into ch15953_sslToggleSwitch
AAfghahi Jun 4, 2021
e5253af
Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/D…
AAfghahi Jun 4, 2021
d92f2f8
changed tooltips based on stephen advice
AAfghahi Jun 4, 2021
1ba68c8
Merge branch 'pexdax/db-connection-ui' into ch15953_sslToggleSwitch
hughhhh Jun 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 52 additions & 8 deletions superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,18 @@
* 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 { 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';

Expand All @@ -34,6 +39,7 @@ export const FormFieldOrder = [
'username',
'password',
'database_name',
'encryption',
];

interface FieldPropTypes {
Expand All @@ -44,6 +50,8 @@ interface FieldPropTypes {
validationErrors: JsonObject | null;
getValidation: () => void;
db?: DatabaseObject;
isEditMode?: boolean;
sslForced?: boolean;
}

const hostField = ({
Expand Down Expand Up @@ -165,6 +173,36 @@ 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)}>
<Tooltip title={t('SSL is required for Preset')}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the plan to replace this before merging the branch into master?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wait, I am confused, replace what portion?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't say "SSL is required for Preset" in OSS Superset.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we go with SSL is required here

<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>
</Tooltip>
<InfoTooltip
tooltip={t('SSL will be enabled in the database connection')}
placement="bottomRight"
/>
</div>
);

const FORM_FIELD_MAP = {
host: hostField,
Expand All @@ -173,6 +211,7 @@ const FORM_FIELD_MAP = {
username: usernameField,
password: passwordField,
database_name: displayField,
encryption: forceSSLField,
};

const DatabaseConnectionForm = ({
Expand All @@ -183,8 +222,10 @@ const DatabaseConnectionForm = ({
getValidation,
db,
isEditMode = false,
sslForced,
}: {
isEditMode?: boolean;
sslForced: boolean;
dbModel: DatabaseForm;
db: Partial<DatabaseObject> | null;
onParametersChange: (
Expand All @@ -197,13 +238,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) => [
Expand All @@ -224,6 +266,8 @@ const DatabaseConnectionForm = ({
getValidation,
db,
key: field,
isEditMode,
sslForced,
}),
)}
</div>
Expand Down
34 changes: 22 additions & 12 deletions superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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: {
Expand All @@ -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>
Expand All @@ -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}
/>
Expand All @@ -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>
) : (
Expand Down Expand Up @@ -488,6 +495,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
) : (
<DatabaseConnectionForm
isEditMode
sslForced={sslForced}
dbModel={dbModel}
db={db as DatabaseObject}
onParametersChange={({ target }: { target: HTMLInputElement }) =>
Expand Down Expand Up @@ -617,6 +625,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
{!isLoading && db && (
<>
<DatabaseConnectionForm
db={db}
sslForced={sslForced}
dbModel={dbModel}
onParametersChange={({
target,
Expand Down
11 changes: 11 additions & 0 deletions superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,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;
Expand Down
1 change: 1 addition & 0 deletions superset-frontend/src/views/CRUD/data/database/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export type DatabaseObject = {
database?: string;
username?: string;
password?: string;
encryption?: boolean;
};
configuration_method: CONFIGURATION_METHOD;
engine?: string;
Expand Down