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

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>(queryEditor);
   const [emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false);
+  const [userSelectedDb, setUserSelected] = useState<DatabaseObject | null>(
+    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({
       <TableSelectorMultiple
         onEmptyResults={onEmptyResults}
         emptyState={emptyStateComponent}
-        database={database}
+        database={userSelectedDb}
         getDbList={actions.setDatabases}
         handleError={actions.addDangerToast}
         onDbChange={onDbChange}

superset-frontend/src/components/DatabaseSelector/index.tsx

@@ -87,7 +87,7 @@ export type DatabaseObject = {
 type SchemaValue = { label: string; value: string };
 
 export interface DatabaseSelectorProps {
-  db?: DatabaseObject;
+  db?: DatabaseObject | null;
   emptyState?: ReactNode;
   formMode?: boolean;
   getDbList?: (arg0: any) => {};

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<TableSelectorProps> = ({
   onTableSelectChange,
 }) => {
   const [currentDatabase, setCurrentDatabase] = useState<
-    DatabaseObject | undefined
+    DatabaseObject | null | undefined
   >(database);
   const [currentSchema, setCurrentSchema] = useState<string | undefined>(
     schema,
   );
-
   const [tableOptions, setTableOptions] = useState<TableOption[]>([]);
   const [tableSelectValue, setTableSelectValue] = useState<
     SelectValue | undefined
@@ -190,6 +189,10 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
     }
   }, [database, tableSelectMode]);
 
+  useEffect(() => {
+    setCurrentDatabase(database);
+  }, [database]);
+
   useEffect(() => {
     if (tableSelectMode === 'single') {
       setTableSelectValue(

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<number, number>;
+  db: object | null;
   chart_split_sizes: [number, number];
   controls_width: number;
   datasource_width: number;

superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx

@@ -109,8 +109,8 @@ const ModalHeader = ({
       <StyledFormHeader>
         <p className="helper-top"> STEP 3 OF 3 </p>
         <h4 className="step-3-text">
-          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.
         </h4>
         <p className="helper-bottom">
           Need help? Learn more about{' '}

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<DatabaseObject> | null,
   action: DBReducerActionType,
@@ -1109,6 +1115,39 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     return <></>;
   };
 
+  const fetchAndSetDB = () => {
+    setLoading(true);
+    fetchResource(dbFetched?.id as number).then(r => {
+      setItem(LocalStorageKeys.db, r);
+    });
+  };
+
+  const renderCTABtns = () => (
+    <StyledBtns>
+      <Button
+        // eslint-disable-next-line no-return-assign
+        buttonStyle="default"
+        onClick={() => {
+          fetchAndSetDB();
+          window.location.href = '/tablemodelview/list';
+        }}
+      >
+        {' '}
+        {t('CREATE A DATASET')}{' '}
+      </Button>
+      <Button
+        buttonStyle="default"
+        // eslint-disable-next-line no-return-assign
+        onClick={() => {
+          fetchAndSetDB();
+          window.location.href = `/superset/sqllab/?db=true`;
+        }}
+      >
+        {t('QUERY DATA IN SQL LAB')}{' '}
+      </Button>
+    </StyledBtns>
+  );
+
   const renderFinishState = () => {
     if (!editNewDb) {
       return (
@@ -1440,6 +1479,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             dbModel={dbModel}
             editNewDb={editNewDb}
           />
+          {renderCTABtns()}
           {renderFinishState()}
         </>
       ) : (

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;

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<DatasetModalProps> = ({
     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<DatasetModalProps> = ({
   };
 
   const hide = () => {
+    setItem(LocalStorageKeys.db, null);
     clearModal();
     onHide();
   };

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<DatasetListProps> = ({
     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) => {