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 57105ebe89faa..786aeaccd8f33 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx @@ -28,11 +28,13 @@ const SqlAlchemyTab = ({ onInputChange, testConnection, conf, + isEditMode = false, }: { db: DatabaseObject | null; onInputChange: EventHandler>; testConnection: EventHandler>; conf: { SQLALCHEMY_DOCS_URL: string; SQLALCHEMY_DISPLAY_TEXT: string }; + isEditMode?: boolean; }) => ( <> @@ -45,7 +47,7 @@ const SqlAlchemyTab = ({ type="text" name="database_name" data-test="database-name-input" - value={db?.database_name || ''} + value={isEditMode ? db?.database_name : ''} placeholder={t('Name your database')} onChange={onInputChange} /> 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 f1b8662dd59d2..a2f3145a78886 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -58,6 +58,7 @@ import { antDModalStyles, antDTabsStyles, buttonLinkStyles, + alchemyButtonLinkStyles, TabHeader, formHelperStyles, formStyles, @@ -126,7 +127,11 @@ type DBReducerActionType = } | { type: ActionType.configMethodChange; - payload: { configuration_method: CONFIGURATION_METHOD }; + payload: { + database_name?: string; + engine?: string; + configuration_method: CONFIGURATION_METHOD; + }; }; function dbReducer( @@ -594,6 +599,11 @@ const DatabaseModal: FunctionComponent = ({ setTabKey(key); }; + const isDynamic = (engine: string | undefined) => + availableDbs?.databases.filter( + (DB: DatabaseObject) => DB.engine === engine, + )[0].parameters !== undefined; + return useTabLayout ? ( [ @@ -635,19 +645,40 @@ const DatabaseModal: FunctionComponent = ({ > {t('Basic')}} key="1"> {useSqlAlchemyForm ? ( - - onChange(ActionType.inputChange, { - type: target.type, - name: target.name, - checked: target.checked, - value: target.value, - }) - } - conf={conf} - testConnection={testConnection} - /> + <> + + onChange(ActionType.inputChange, { + type: target.type, + name: target.name, + checked: target.checked, + value: target.value, + }) + } + conf={conf} + testConnection={testConnection} + isEditMode={isEditMode} + /> + {isDynamic(db?.engine) && ( + + )} + ) : ( = ({ setDB({ type: ActionType.configMethodChange, payload: { + engine: db.engine, configuration_method: CONFIGURATION_METHOD.SQLALCHEMY_URI, + database_name: db.database_name, }, }) } 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 d293b74846893..082cd820e8284 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts @@ -339,6 +339,13 @@ export const buttonLinkStyles = css` text-transform: initial; `; +export const alchemyButtonLinkStyles = (theme: SupersetTheme) => css` + font-weight: 400; + text-transform: initial; + padding: ${theme.gridUnit * 8}px 0 0; + margin-left: 0px; +`; + export const TabHeader = styled.div` display: flex; flex-direction: column;