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 2537d2fcc654..c361c198aa1e 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx @@ -64,8 +64,7 @@ const ModalHeader = ({ dbModel, editNewDb, file, -}: // importingModel, -{ +}: { isLoading: boolean; isEditMode: boolean; useSqlAlchemyForm: boolean; @@ -77,8 +76,9 @@ const ModalHeader = ({ file?: UploadFile[]; passwordFields?: string[]; needsOverwriteConfirm?: boolean; - // importingModel?: boolean; }) => { + const fileCheck = file && file?.length > 0; + const isEditHeader = ( {db?.backend} @@ -154,8 +154,6 @@ const ModalHeader = ({ ); - const fileCheck = file && file?.length > 0; - const importDbHeader = ( 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 c9b2dc467059..c26c33352b48 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -410,9 +410,6 @@ function dbReducer( ...action.payload, }; - // case ActionType.importDatabase: - // return {}; - case ActionType.reset: default: return null; @@ -445,6 +442,24 @@ const DatabaseModal: FunctionComponent = ({ const [db, setDB] = useReducer< Reducer | null, DBReducerActionType> >(dbReducer, null); + // Database fetch logic + const { + state: { loading: dbLoading, resource: dbFetched, error: dbErrors }, + fetchResource, + createResource, + updateResource, + clearError, + } = useSingleViewResource( + 'database', + t('database'), + addDangerToast, + ); + // Database import logic + const { + state: { alreadyExists, passwordsNeeded }, + importResource, + } = useImportResource('database', t('database'), msg => addDangerToast(msg)); + const [tabKey, setTabKey] = useState(DEFAULT_TAB_KEY); const [availableDbs, getAvailableDbs] = useAvailableDatabases(); const [validationErrors, getValidation, setValidationErrors] = @@ -454,6 +469,11 @@ const DatabaseModal: FunctionComponent = ({ const [editNewDb, setEditNewDb] = useState(false); const [isLoading, setLoading] = useState(false); const [testInProgress, setTestInProgress] = useState(false); + const [passwords, setPasswords] = useState>({}); + const [confirmedOverwrite, setConfirmedOverwrite] = useState(false); + const [file, setFile] = useState([]); + const [importingModel, setImportingModel] = useState(false); + const conf = useCommonConf(); const dbImages = getDatabaseImages(); const connectionAlert = getConnectionAlert(); @@ -466,18 +486,6 @@ const DatabaseModal: FunctionComponent = ({ const useSqlAlchemyForm = db?.configuration_method === CONFIGURATION_METHOD.SQLALCHEMY_URI; const useTabLayout = isEditMode || useSqlAlchemyForm; - // Database fetch logic - const { - state: { loading: dbLoading, resource: dbFetched, error: dbErrors }, - fetchResource, - createResource, - updateResource, - clearError, - } = useSingleViewResource( - 'database', - t('database'), - addDangerToast, - ); const isDynamic = (engine: string | undefined) => availableDbs?.databases?.find( (DB: DatabaseObject) => DB.backend === engine || DB.engine === engine, @@ -522,22 +530,6 @@ const DatabaseModal: FunctionComponent = ({ ); }; - const [passwordFields, setPasswordFields] = useState([]); // set in useEffect - const [needsOverwriteConfirm, setNeedsOverwriteConfirm] = - useState(false); // set in useEffect - const [passwords, setPasswords] = useState>({}); // set by user input - const [confirmedOverwrite, setConfirmedOverwrite] = useState(false); // set by user input - const [file, setFile] = useState([]); - const [importingModel, setImportingModel] = useState(false); - console.log('findme importing', importingModel); - - const { - state: { alreadyExists, passwordsNeeded }, - importResource, - } = useImportResource('database', t('database'), msg => addDangerToast(msg)); - - console.log('findme STATE', alreadyExists, passwordsNeeded); - const removeFile = (removedFile: UploadFile) => { setFile(file.filter(file => file.uid !== removedFile.uid)); return false; @@ -550,21 +542,15 @@ const DatabaseModal: FunctionComponent = ({ clearError(); setEditNewDb(false); setFile([]); - setPasswordFields([]); - setNeedsOverwriteConfirm(false); setImportingModel(false); if (onDatabaseAdd) onDatabaseAdd(); onHide(); }; - console.log('findme file', file); - const onChange = (type: any, payload: any) => { setDB({ type, payload } as DBReducerActionType); }; - console.log('findme DB', db); - const onSave = async () => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const { id, ...update } = db || {}; @@ -669,10 +655,6 @@ const DatabaseModal: FunctionComponent = ({ if (!db) { setLoading(true); setImportingModel(true); - // onChange(ActionType.textChange, { - // name: 'database_name', - // value: 'TEST database name', - // }); if (!(file[0].originFileObj instanceof File)) return; const dbId = await importResource( @@ -682,9 +664,6 @@ const DatabaseModal: FunctionComponent = ({ ); if (dbId) { - console.log('findme onsave !db && dbId'); - setHasConnectedDb(true); - onClose(); addSuccessToast(t('Database connected')); } @@ -844,7 +823,7 @@ const DatabaseModal: FunctionComponent = ({ const renderModalFooter = () => { if (db) { // if db show back + connenct - if (!hasConnectedDb || editNewDb || !importingModel) { + if (!hasConnectedDb || editNewDb || importingModel) { return ( <> @@ -878,6 +857,24 @@ const DatabaseModal: FunctionComponent = ({ ); } + // Import doesn't use db, so footer will not render in the if statement above + if (importingModel) { + return ( + <> + + {t('Back')} + + + {t('Connect')} + + + ); + } + return []; }; @@ -926,17 +923,6 @@ const DatabaseModal: FunctionComponent = ({ } }, [availableDbs]); - // ------------------------------ FINDME START 🚧 - - useEffect(() => { - setPasswordFields(passwordsNeeded); - }, [passwordsNeeded, setPasswordFields]); - - useEffect(() => { - console.log('findme UE', needsOverwriteConfirm, alreadyExists); - setNeedsOverwriteConfirm(alreadyExists.length > 0); - }, [alreadyExists, setNeedsOverwriteConfirm]); - const onDbImport = (info: UploadChangeParam) => { setImportingModel(true); setFile([ @@ -950,13 +936,10 @@ const DatabaseModal: FunctionComponent = ({ importResource(info.file.originFileObj, passwords, confirmedOverwrite); }; - console.log('findme PASSWORDS', passwords); - console.log('findme PASSWORDFIELDS', passwordFields); - const passwordNeededField = () => { - // if (passwordFields.length === 0) return null; + if (passwordsNeeded.length === 0) return null; - passwordFields.map(database => ( + return passwordsNeeded.map(database => ( <> = ({ }; const confirmOverwriteField = () => { - console.log('findme AE', alreadyExists); if (alreadyExists.length === 0) return null; return ( @@ -1023,7 +1005,6 @@ const DatabaseModal: FunctionComponent = ({ ); }; - // ------------------------------ FINDME END 🚧 const tabChange = (key: string) => setTabKey(key); @@ -1173,8 +1154,6 @@ const DatabaseModal: FunctionComponent = ({ ); }; - console.log('findme importing', importingModel); - if (file.length > 0 && importingModel) { return ( = ({ centered show={show} title={

{t('Connect a database')}

} - footer={ - <> - - {t('Back')} - - - {t('Connect')} - - - // renderModalFooter() - } + footer={renderModalFooter()} > = ({ dbName={dbName} dbModel={dbModel} file={file} - // importingModal={importingModel} /> {passwordNeededField()} {confirmOverwriteField()} @@ -1464,7 +1428,6 @@ const DatabaseModal: FunctionComponent = ({ /> {renderPreferredSelector()} {renderAvailableSelector()} - {/* // ------------------------------ FINDME START 🚧 */} = ({ ) : ( - // ------------------------------ FINDME END 🚧 <>