This is an automated email from the ASF dual-hosted git repository. hugh pushed a commit to branch pexdax/db-connection-ui-show-available in repository https://gitbox.apache.org/repos/asf/superset.git
commit 0ac308fb7508be53c0cb3d6c796245fe7bae71eb Author: hughhhh <[email protected]> AuthorDate: Thu May 27 15:46:34 2021 -0400 poc picker for db selection --- .../CRUD/data/database/DatabaseModal/index.tsx | 42 ++++++++++++++++++---- 1 file changed, 35 insertions(+), 7 deletions(-) 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 265a856..82e3754 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -25,7 +25,7 @@ import React, { Reducer, } from 'react'; import Tabs from 'src/components/Tabs'; -import { Alert } from 'src/common/components'; +import { Alert, Select } from 'src/common/components'; import Modal from 'src/components/Modal'; import Button from 'src/components/Button'; import withToasts from 'src/messageToasts/enhancers/withToasts'; @@ -82,6 +82,7 @@ enum ActionType { parametersChange, reset, textChange, + allowSelectDB, } interface DBReducerPayloadType { @@ -119,6 +120,10 @@ type DBReducerActionType = | { type: ActionType.configMethodChange; payload: { configuration_method: CONFIGURATION_METHOD }; + } + | { + type: ActionType.allowSelectDB; + payload: { available: [] }; }; function dbReducer( @@ -129,6 +134,8 @@ function dbReducer( ...(state || {}), }; + console.log(action); + switch (action.type) { case ActionType.inputChange: if (action.payload.type === 'checkbox') { @@ -195,8 +202,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({ const [validationErrors, getValidation] = useDatabaseValidation(); const [hasConnectedDb, setHasConnectedDb] = useState<boolean>(false); const [dbName, setDbName] = useState(''); + const [isLoading, setLoading] = useState<boolean>(false); const conf = useCommonConf(); + const isSelectMode = true; const isEditMode = !!databaseId; const useSqlAlchemyForm = db?.configuration_method === CONFIGURATION_METHOD.SQLALCHEMY_URI; @@ -298,12 +307,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({ if (show) { setTabKey(DEFAULT_TAB_KEY); getAvailableDbs(); - setDB({ - type: ActionType.dbSelected, - payload: { - configuration_method: CONFIGURATION_METHOD.SQLALCHEMY_URI, - }, // todo hook this up to step 1 - }); + setLoading(true); } if (databaseId && show) { fetchDB(); @@ -322,6 +326,14 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({ } }, [dbFetched]); + useEffect(() => { + if (isLoading) { + setLoading(false); + console.log('done loading'); + console.log(availableDbs); + } + }, [availableDbs]); + const tabChange = (key: string) => { setTabKey(key); }; @@ -518,6 +530,22 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({ getValidation={() => getValidation(db)} validationErrors={validationErrors} /> + {isSelectMode && !isLoading && ( + <> + <label className="label-select"> + What database would you like to connect? + </label> + <Select + defaultValue={'bigquery'} + style={{ width: '100%' }} + onChange={option => console.log('hi')} + > + {availableDbs?.databases?.map((engine) => ( + <Select.Option key={engine.engine} >{engine.name}</Select.Option> + ))} + </Select> + </> + )} <Button buttonStyle="link" onClick={() =>
