diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx index a608f1468a6d..d426cf4cdfe7 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx @@ -71,6 +71,29 @@ export const portField = ({ /> ); +export const httpPath = ({ + required, + changeMethods, + getValidation, + validationErrors, + db, +}: FieldPropTypes) => { + const extraJson = JSON.parse(db?.extra || '{}'); + return ( + + ); +}; export const databaseField = ({ required, changeMethods, @@ -132,6 +155,27 @@ export const passwordField = ({ onChange={changeMethods.onParametersChange} /> ); +export const accessTokenField = ({ + required, + changeMethods, + getValidation, + validationErrors, + db, + isEditMode, +}: FieldPropTypes) => ( + +); export const displayField = ({ changeMethods, getValidation, @@ -150,7 +194,7 @@ export const displayField = ({ label={t('Display Name')} onChange={changeMethods.onChange} helpText={t( - 'Pick a nickname for this database to display as in Superset.', + 'Pick a nickname for how the database will display in Superset.', )} /> diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/index.tsx index e9b562a91991..1fa0cbbecb38 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/index.tsx @@ -16,19 +16,21 @@ * specific language governing permissions and limitations * under the License. */ -import React, { FormEvent } from 'react'; +import React, { FormEvent, useEffect } from 'react'; import { SupersetTheme, JsonObject } from '@superset-ui/core'; import { InputProps } from 'antd/lib/input'; import { Form } from 'src/components/Form'; import { - hostField, - portField, + accessTokenField, databaseField, - usernameField, - passwordField, displayField, - queryField, forceSSLField, + hostField, + httpPath, + passwordField, + portField, + queryField, + usernameField, } from './CommonParameters'; import { validatedInputField } from './ValidatedInputField'; import { EncryptedField } from './EncryptedField'; @@ -42,6 +44,8 @@ export const FormFieldOrder = [ 'database', 'username', 'password', + 'access_token', + 'http_path', 'database_name', 'credentials_info', 'service_account_info', @@ -67,6 +71,8 @@ export interface FieldPropTypes { } & { onParametersUploadFileChange: (value: any) => string } & { onAddTableCatalog: () => void; onRemoveTableCatalog: (idx: number) => void; + } & { + onExtraInputChange: (value: any) => void; }; validationErrors: JsonObject | null; getValidation: () => void; @@ -80,10 +86,12 @@ export interface FieldPropTypes { const FORM_FIELD_MAP = { host: hostField, + http_path: httpPath, port: portField, database: databaseField, username: usernameField, password: passwordField, + access_token: accessTokenField, database_name: displayField, query: queryField, encryption: forceSSLField, @@ -96,20 +104,22 @@ const FORM_FIELD_MAP = { }; const DatabaseConnectionForm = ({ - dbModel: { parameters }, - onParametersChange, + dbModel: { parameters, default_driver }, + db, + editNewDb, + getPlaceholder, + getValidation, + isEditMode = false, + onAddTableCatalog, onChange, - onQueryChange, + onExtraInputChange, + onParametersChange, onParametersUploadFileChange, - onAddTableCatalog, + onQueryChange, onRemoveTableCatalog, - validationErrors, - getValidation, - db, - isEditMode = false, + setDatabaseDriver, sslForced, - editNewDb, - getPlaceholder, + validationErrors, }: { isEditMode?: boolean; sslForced: boolean; @@ -128,50 +138,60 @@ const DatabaseConnectionForm = ({ onParametersUploadFileChange?: ( event: FormEvent | { target: HTMLInputElement }, ) => void; + onExtraInputChange: ( + event: FormEvent | { target: HTMLInputElement }, + ) => void; onAddTableCatalog: () => void; onRemoveTableCatalog: (idx: number) => void; validationErrors: JsonObject | null; getValidation: () => void; getPlaceholder?: (field: string) => string | undefined; -}) => ( -
-
[ - formScrollableStyles, - validatedFormStyles(theme), - ]} - > - {parameters && - FormFieldOrder.filter( - (key: string) => - Object.keys(parameters.properties).includes(key) || - key === 'database_name', - ).map(field => - FORM_FIELD_MAP[field]({ - required: parameters.required?.includes(field), - changeMethods: { - onParametersChange, - onChange, - onQueryChange, - onParametersUploadFileChange, - onAddTableCatalog, - onRemoveTableCatalog, - }, - validationErrors, - getValidation, - db, - key: field, - field, - isEditMode, - sslForced, - editNewDb, - placeholder: getPlaceholder ? getPlaceholder(field) : undefined, - }), - )} -
-
-); + setDatabaseDriver: (driver: string) => void; +}) => { + useEffect(() => { + setDatabaseDriver(default_driver); + }, [default_driver]); + return ( +
+
[ + formScrollableStyles, + validatedFormStyles(theme), + ]} + > + {parameters && + FormFieldOrder.filter( + (key: string) => + Object.keys(parameters.properties).includes(key) || + key === 'database_name', + ).map(field => + FORM_FIELD_MAP[field]({ + required: parameters.required?.includes(field), + changeMethods: { + onParametersChange, + onChange, + onQueryChange, + onParametersUploadFileChange, + onAddTableCatalog, + onRemoveTableCatalog, + onExtraInputChange, + }, + validationErrors, + getValidation, + db, + key: field, + field, + isEditMode, + sslForced, + editNewDb, + placeholder: getPlaceholder ? getPlaceholder(field) : undefined, + }), + )} +
+
+ ); +}; export const FormFieldMap = FORM_FIELD_MAP; export default DatabaseConnectionForm; diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx index 454070b52a91..1fac50d34338 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx @@ -101,7 +101,7 @@ const SqlAlchemyTab = ({