diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx index ac8e2ad04d98a..18f13c4b246ff 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx @@ -50,6 +50,7 @@ const ModalHeader = ({ db, dbName, dbModel, + editNewDb, }: { isLoading: boolean; isEditMode: boolean; @@ -58,6 +59,7 @@ const ModalHeader = ({ db: Partial | null; dbName: string; dbModel: DatabaseForm; + editNewDb?: boolean; }) => { const isEditHeader = ( <> @@ -102,7 +104,14 @@ const ModalHeader = ({

Step 2 of 3

Enter the required {dbModel.name} credentials

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

); @@ -122,10 +131,10 @@ const ModalHeader = ({ if (useSqlAlchemyForm) { return useSqlAlchemyFormHeader; } - if (hasConnectedDb) { + if (hasConnectedDb && !editNewDb) { return hasConnectedDbHeader; } - if (db) { + if (db || editNewDb) { return hasDbHeader; } return noDbHeader; 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 aa4bb080a3b41..e2f4e07ac2402 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -296,6 +296,7 @@ const DatabaseModal: FunctionComponent = ({ ] = useDatabaseValidation(); const [hasConnectedDb, setHasConnectedDb] = useState(false); const [dbName, setDbName] = useState(''); + const [editNewDb, setEditNewDb] = useState(false); const [isLoading, setLoading] = useState(false); const conf = useCommonConf(); const dbImages = getDatabaseImages(); @@ -350,6 +351,7 @@ const DatabaseModal: FunctionComponent = ({ setDB({ type: ActionType.reset }); setHasConnectedDb(false); setValidationErrors(null); // reset validation errors on close + setEditNewDb(false); onHide(); }; @@ -406,7 +408,9 @@ const DatabaseModal: FunctionComponent = ({ if (onDatabaseAdd) { onDatabaseAdd(); } - onClose(); + if (!editNewDb) { + onClose(); + } } } else if (db) { // Create @@ -439,6 +443,7 @@ const DatabaseModal: FunctionComponent = ({ } } } + setEditNewDb(false); setLoading(false); }; @@ -538,10 +543,19 @@ const DatabaseModal: FunctionComponent = ({ ); - const renderModalFooter = () => - db // if db show back + connect - ? [ - !hasConnectedDb && ( + const handleBackButtonOnFinish = () => { + if (dbFetched) { + fetchResource(dbFetched.id as number); + } + setEditNewDb(true); + }; + + const renderModalFooter = () => { + if (db) { + // if db show back + connenct + if (!hasConnectedDb || editNewDb) { + return ( + <> { @@ -550,8 +564,6 @@ const DatabaseModal: FunctionComponent = ({ > Back - ), - !hasConnectedDb ? ( // if hasConnectedDb show back + finish = ({ > Connect - ) : ( - - Finish - - ), - ] - : []; + + ); + } + + return ( + <> + + Back + + + Finish + + + ); + } + return []; + }; const renderEditModalFooter = () => ( <> @@ -614,6 +636,68 @@ const DatabaseModal: FunctionComponent = ({ setTabKey(key); }; + const renderFinishState = () => { + if (!editNewDb) { + return ( + + onChange(ActionType.inputChange, { + type: target.type, + name: target.name, + checked: target.checked, + value: target.value, + }) + } + onTextChange={({ target }: { target: HTMLTextAreaElement }) => + onChange(ActionType.textChange, { + name: target.name, + value: target.value, + }) + } + onEditorChange={(payload: { name: string; json: any }) => + onChange(ActionType.editorChange, payload) + } + onExtraInputChange={({ target }: { target: HTMLInputElement }) => { + onChange(ActionType.extraInputChange, { + type: target.type, + name: target.name, + checked: target.checked, + value: target.value, + }); + }} + onExtraEditorChange={(payload: { name: string; json: any }) => + onChange(ActionType.extraEditorChange, payload) + } + /> + ); + } + return ( + + onChange(ActionType.parametersChange, { + type: target.type, + name: target.name, + checked: target.checked, + value: target.value, + }) + } + onChange={({ target }: { target: HTMLInputElement }) => + onChange(ActionType.textChange, { + name: target.name, + value: target.value, + }) + } + getValidation={() => getValidation(db)} + validationErrors={validationErrors} + /> + ); + }; + const isDynamic = (engine: string | undefined) => availableDbs?.databases.filter( (DB: DatabaseObject) => DB.backend === engine || DB.engine === engine, @@ -808,39 +892,9 @@ const DatabaseModal: FunctionComponent = ({ db={db} dbName={dbName} dbModel={dbModel} + editNewDb={editNewDb} /> - - - onChange(ActionType.inputChange, { - type: target.type, - name: target.name, - checked: target.checked, - value: target.value, - }) - } - onTextChange={({ target }: { target: HTMLTextAreaElement }) => - onChange(ActionType.textChange, { - name: target.name, - value: target.value, - }) - } - onEditorChange={(payload: { name: string; json: any }) => - onChange(ActionType.editorChange, payload) - } - onExtraInputChange={({ target }: { target: HTMLInputElement }) => { - onChange(ActionType.extraInputChange, { - type: target.type, - name: target.name, - checked: target.checked, - value: target.value, - }); - }} - onExtraEditorChange={(payload: { name: string; json: any }) => - onChange(ActionType.extraEditorChange, payload) - } - /> + {renderFinishState()} ) : ( <> @@ -876,8 +930,8 @@ const DatabaseModal: FunctionComponent = ({ css={(theme: SupersetTheme) => antDAlertStyles(theme)} type="info" showIcon - message={t('Whitelisting IPs')} - description={connectionAlert.WHITELISTED_IPS} + message={t('IP Allowlist')} + description={connectionAlert.ALLOWED_IPS} /> )}