From 9da7c1f7b83abea20e3620d5461a47dc4a2ab019 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 5 Jul 2022 08:56:12 -0700 Subject: [PATCH] feat: hack db connection modal ctabtns (#20017) * add flow for dbconnmodal to datasetmodal * fix bug * second part * fix dataset to sql lab * fix lint * more lint * add key value * fix type * add new styling * remove undefined from types --- .../components/SqlEditorLeftBar/index.tsx | 26 +++++++++++- .../src/components/DatabaseSelector/index.tsx | 2 +- .../src/components/TableSelector/index.tsx | 9 +++-- .../src/utils/localStorageHelpers.ts | 2 + .../database/DatabaseModal/ModalHeader.tsx | 4 +- .../data/database/DatabaseModal/index.tsx | 40 +++++++++++++++++++ .../data/database/DatabaseModal/styles.ts | 2 - .../CRUD/data/dataset/AddDatasetModal.tsx | 14 +++++++ .../views/CRUD/data/dataset/DatasetList.tsx | 7 ++++ 9 files changed, 96 insertions(+), 10 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx index f742494654..ed0d99cfa1 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx +++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx @@ -25,6 +25,7 @@ import React, { Dispatch, SetStateAction, } from 'react'; +import querystring from 'query-string'; import Button from 'src/components/Button'; import { t, styled, css, SupersetTheme } from '@superset-ui/core'; import Collapse from 'src/components/Collapse'; @@ -34,6 +35,11 @@ import { IconTooltip } from 'src/components/IconTooltip'; import { QueryEditor } from 'src/SqlLab/types'; import { DatabaseObject } from 'src/components/DatabaseSelector'; import { EmptyStateSmall } from 'src/components/EmptyState'; +import { + getItem, + LocalStorageKeys, + setItem, +} from 'src/utils/localStorageHelpers'; import TableElement, { Table, TableElementProps } from '../TableElement'; interface ExtendedTable extends Table { @@ -105,10 +111,26 @@ export default function SqlEditorLeftBar({ // that require and modify the queryEditor const queryEditorRef = useRef(queryEditor); const [emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false); + const [userSelectedDb, setUserSelected] = useState( + null, + ); + + useEffect(() => { + const bool = querystring.parse(window.location.search).db; + const userSelected = getItem( + LocalStorageKeys.db, + null, + ) as DatabaseObject | null; + + if (bool && userSelected) { + setUserSelected(userSelected); + setItem(LocalStorageKeys.db, null); + } else setUserSelected(database); + }, []); useEffect(() => { queryEditorRef.current = queryEditor; - }, [queryEditor]); + }, [queryEditor, database]); const onEmptyResults = (searchText?: string) => { setEmptyResultsWithSearch(!!searchText); @@ -222,7 +244,7 @@ export default function SqlEditorLeftBar({ {}; diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx index fcc5dbe10d..d7b867347a 100644 --- a/superset-frontend/src/components/TableSelector/index.tsx +++ b/superset-frontend/src/components/TableSelector/index.tsx @@ -81,7 +81,7 @@ const TableLabel = styled.span` interface TableSelectorProps { clearable?: boolean; - database?: DatabaseObject; + database?: DatabaseObject | null; emptyState?: ReactNode; formMode?: boolean; getDbList?: (arg0: any) => {}; @@ -166,12 +166,11 @@ const TableSelector: FunctionComponent = ({ onTableSelectChange, }) => { const [currentDatabase, setCurrentDatabase] = useState< - DatabaseObject | undefined + DatabaseObject | null | undefined >(database); const [currentSchema, setCurrentSchema] = useState( schema, ); - const [tableOptions, setTableOptions] = useState([]); const [tableSelectValue, setTableSelectValue] = useState< SelectValue | undefined @@ -190,6 +189,10 @@ const TableSelector: FunctionComponent = ({ } }, [database, tableSelectMode]); + useEffect(() => { + setCurrentDatabase(database); + }, [database]); + useEffect(() => { if (tableSelectMode === 'single') { setTableSelectValue( diff --git a/superset-frontend/src/utils/localStorageHelpers.ts b/superset-frontend/src/utils/localStorageHelpers.ts index 482f413372..28de043200 100644 --- a/superset-frontend/src/utils/localStorageHelpers.ts +++ b/superset-frontend/src/utils/localStorageHelpers.ts @@ -31,6 +31,7 @@ export enum LocalStorageKeys { * and therefore should be done in a major release. */ filter_box_transition_snoozed_at = 'filter_box_transition_snoozed_at', + db = 'db', chart_split_sizes = 'chart_split_sizes', controls_width = 'controls_width', datasource_width = 'datasource_width', @@ -54,6 +55,7 @@ export enum LocalStorageKeys { export type LocalStorageValues = { filter_box_transition_snoozed_at: Record; + db: object | null; chart_split_sizes: [number, number]; controls_width: number; datasource_width: number; 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 7cdcbaba28..2ec124c341 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx @@ -109,8 +109,8 @@ const ModalHeader = ({

STEP 3 OF 3

- Your database was successfully connected! Here are some optional - settings for your database + Your database was successfully connected! Create a dataset to begin + visualizing your data as a chart or go to SQL Lab to query your data.

Need help? Learn more about{' '} 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 fbe05ad318..3e681243a0 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -31,6 +31,7 @@ import React, { useReducer, Reducer, } from 'react'; +import { setItem, LocalStorageKeys } from 'src/utils/localStorageHelpers'; import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface'; import Tabs from 'src/components/Tabs'; import { AntdSelect, Upload } from 'src/components'; @@ -191,6 +192,11 @@ type DBReducerActionType = }; }; +const StyledBtns = styled.div` + margin-bottom: ${({ theme }) => theme.gridUnit * 3}px; + margin-left: ${({ theme }) => theme.gridUnit * 3}px; +`; + function dbReducer( state: Partial | null, action: DBReducerActionType, @@ -1109,6 +1115,39 @@ const DatabaseModal: FunctionComponent = ({ return <>; }; + const fetchAndSetDB = () => { + setLoading(true); + fetchResource(dbFetched?.id as number).then(r => { + setItem(LocalStorageKeys.db, r); + }); + }; + + const renderCTABtns = () => ( + + + + + ); + const renderFinishState = () => { if (!editNewDb) { return ( @@ -1440,6 +1479,7 @@ const DatabaseModal: FunctionComponent = ({ dbModel={dbModel} editNewDb={editNewDb} /> + {renderCTABtns()} {renderFinishState()} ) : ( 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 d3d0b11dd7..de482a7eef 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts @@ -40,8 +40,6 @@ export const marginBottom = (theme: SupersetTheme) => css` `; export const StyledFormHeader = styled.header` - border-bottom: ${({ theme }) => `${theme.gridUnit * 0.25}px solid - ${theme.colors.grayscale.light2};`} padding: ${({ theme }) => theme.gridUnit * 2}px ${({ theme }) => theme.gridUnit * 4}px; line-height: ${({ theme }) => theme.gridUnit * 6}px; diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx index 10a3b7bb77..dd05e25a9e 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx @@ -23,6 +23,11 @@ import Modal from 'src/components/Modal'; import TableSelector from 'src/components/TableSelector'; import withToasts from 'src/components/MessageToasts/withToasts'; import { DatabaseObject } from 'src/components/DatabaseSelector'; +import { + getItem, + LocalStorageKeys, + setItem, +} from 'src/utils/localStorageHelpers'; type DatasetAddObject = { id: number; @@ -69,6 +74,14 @@ const DatasetModal: FunctionComponent = ({ setDisableSave(currentDatabase === undefined || currentTableName === ''); }, [currentTableName, currentDatabase]); + useEffect(() => { + const currentUserSelectedDb = getItem( + LocalStorageKeys.db, + null, + ) as DatabaseObject; + if (currentUserSelectedDb) setCurrentDatabase(currentUserSelectedDb); + }, []); + const onDbChange = (db: DatabaseObject) => { setCurrentDatabase(db); }; @@ -89,6 +102,7 @@ const DatasetModal: FunctionComponent = ({ }; const hide = () => { + setItem(LocalStorageKeys.db, null); clearModal(); onHide(); }; diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx index 7dd59271e2..c5b182871f 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx @@ -31,6 +31,7 @@ import { createFetchDistinct, createErrorHandler, } from 'src/views/CRUD/utils'; +import { getItem, LocalStorageKeys } from 'src/utils/localStorageHelpers'; import { ColumnObject } from 'src/views/CRUD/data/dataset/types'; import { useListViewResource } from 'src/views/CRUD/hooks'; import ConfirmStatusChange from 'src/components/ConfirmStatusChange'; @@ -180,6 +181,12 @@ const DatasetList: FunctionComponent = ({ hasPerm('can_export') && isFeatureEnabled(FeatureFlag.VERSIONED_EXPORT); const initialSort = SORT_BY; + useEffect(() => { + const db = getItem(LocalStorageKeys.db, null); + if (!loading && db) { + setDatasetAddModalOpen(true); + } + }, [loading]); const openDatasetEditModal = useCallback( ({ id }: Dataset) => {