From 7dadc5848dc4519efa4c96d94b741ca8bfb5eeda Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 7 Apr 2022 11:46:37 -0700
Subject: [PATCH 01/28] feat: add empty states to sqlab editor and select

---
 .../src/SqlLab/actions/sqlLab.js              |  5 +++++
 .../src/SqlLab/components/SqlEditor/index.jsx | 14 +++++++++++-
 .../src/SqlLab/reducers/sqlLab.js             |  3 +++
 .../src/assets/images/vector.svg              | 21 ++++++++++++++++++
 .../src/components/DatabaseSelector/index.tsx | 22 +++++++++++++++++--
 .../src/components/Select/Select.tsx          |  9 +++++++-
 6 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 superset-frontend/src/assets/images/vector.svg

diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js
index 02e07d5831e9b..c6996b3801825 100644
--- a/superset-frontend/src/SqlLab/actions/sqlLab.js
+++ b/superset-frontend/src/SqlLab/actions/sqlLab.js
@@ -76,6 +76,7 @@ export const SET_USER_OFFLINE = 'SET_USER_OFFLINE';
 export const RUN_QUERY = 'RUN_QUERY';
 export const START_QUERY = 'START_QUERY';
 export const STOP_QUERY = 'STOP_QUERY';
+export const NO_DB_CONNECTED = 'NO_DB_CONNECTED';
 export const REQUEST_QUERY_RESULTS = 'REQUEST_QUERY_RESULTS';
 export const QUERY_SUCCESS = 'QUERY_SUCCESS';
 export const QUERY_FAILED = 'QUERY_FAILED';
@@ -127,6 +128,10 @@ export function resetState() {
   return { type: RESET_STATE };
 }
 
+export function setNoDatabaseConnected(bool) {
+  return {type: NO_DB_CONNECTED, isConnected: bool }
+}
+
 export function startQueryValidation(query) {
   Object.assign(query, {
     id: query.id ? query.id : shortid.generate(),
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 7899cbf71908a..b35ca6e0b993b 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -25,6 +25,7 @@ import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import Split from 'react-split';
 import { t, styled, withTheme } from '@superset-ui/core';
+import { isEmpty } from 'lodash';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import StyledModal from 'src/components/Modal';
@@ -75,6 +76,7 @@ import ShareSqlLabQuery from '../ShareSqlLabQuery';
 import SqlEditorLeftBar from '../SqlEditorLeftBar';
 import AceEditorWrapper from '../AceEditorWrapper';
 import RunQueryActionButton from '../RunQueryActionButton';
+import { EmptyStateBig } from 'src/components/EmptyState';
 
 const LIMIT_DROPDOWN = [10, 100, 1000, 10000, 100000];
 const SQL_EDITOR_PADDING = 10;
@@ -740,6 +742,7 @@ class SqlEditor extends React.PureComponent {
     const leftBarStateClass = this.props.hideLeftBar
       ? 'schemaPane-exit-done'
       : 'schemaPane-enter-done';
+    console.log('this.props', this.props.sqlLab.dbConnect)
     return (
       <div ref={this.sqlEditorRef} className="SqlEditor">
         <CSSTransition
@@ -756,7 +759,16 @@ class SqlEditor extends React.PureComponent {
             />
           </div>
         </CSSTransition>
-        {this.queryPane()}
+        {this.props.sqlLab.dbConnect
+          ? 
+          this.queryPane() 
+          : 
+          <EmptyStateBig 
+            image="vector.svg" 
+            title="Select a database to write a query" 
+            description="Choose one of the avaialable database on the left" 
+          />
+        }
         <StyledModal
           visible={this.state.showCreateAsModal}
           title={t(createViewModalTitle)}
diff --git a/superset-frontend/src/SqlLab/reducers/sqlLab.js b/superset-frontend/src/SqlLab/reducers/sqlLab.js
index 923caaf96152d..b587b794f9f63 100644
--- a/superset-frontend/src/SqlLab/reducers/sqlLab.js
+++ b/superset-frontend/src/SqlLab/reducers/sqlLab.js
@@ -33,6 +33,9 @@ import {
 
 export default function sqlLabReducer(state = {}, action) {
   const actionHandlers = {
+    [actions.NO_DB_CONNECTED]() {
+      return {...state, dbConnect: action.isConnected}
+    },
     [actions.ADD_QUERY_EDITOR]() {
       const tabHistory = state.tabHistory.slice();
       tabHistory.push(action.queryEditor.id);
diff --git a/superset-frontend/src/assets/images/vector.svg b/superset-frontend/src/assets/images/vector.svg
new file mode 100644
index 0000000000000..0bf9c39c6ccb0
--- /dev/null
+++ b/superset-frontend/src/assets/images/vector.svg
@@ -0,0 +1,21 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<svg width="118" height="150" viewBox="0 0 118 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1212 11.5536H11.6212V12.0536V46.875V47.375H12.1212H105.871H106.371V46.875V12.0536V11.5536H105.871H12.1212ZM105.871 92.9107H106.371V92.4107V57.5893V57.0893H105.871H12.1212H11.6212V57.5893V92.4107V92.9107H12.1212H105.871ZM105.871 138.446H106.371V137.946V103.125V102.625H105.871H12.1212H11.6212V103.125V137.946V138.446H12.1212H105.871ZM5.42477 0.5H112.568C115.255 0.5 117.425 2.67012 117.425 5.35714V144.643C117.425 147.33 115.255 149.5 112.568 149.5H5.42477C2.73774 149.5 0.567627 147.33 0.567627 144.643V5.35714C0.567627 2.67012 2.73774 0.5 5.42477 0.5ZM26.4897 33.8458C25.3276 32.6838 24.6748 31.1077 24.6748 29.4643C24.6748 27.8209 25.3276 26.2448 26.4897 25.0828C27.6517 23.9207 29.2278 23.2679 30.8712 23.2679C32.5146 23.2679 34.0907 23.9207 35.2527 25.0828C36.4148 26.2448 37.0676 27.8209 37.0676 29.4643C37.0676 31.1077 36.4148 32.6838 35.2527 33.8458C34.0907 35.0079 32.5146 35.6607 30.8712 35.6607C29.2278 35.6607 27.6517 35.0079 26.4897 33.8458ZM26.4897 79.3815C25.3276 78.2195 24.6748 76.6434 24.6748 75C24.6748 73.3566 25.3276 71.7805 26.4897 70.6185C27.6517 69.4564 29.2278 68.8036 30.8712 68.8036C32.5146 68.8036 34.0907 69.4564 35.2527 70.6185C36.4148 71.7805 37.0676 73.3566 37.0676 75C37.0676 76.6434 36.4148 78.2195 35.2527 79.3815C34.0907 80.5436 32.5146 81.1964 30.8712 81.1964C29.2278 81.1964 27.6517 80.5436 26.4897 79.3815ZM26.4897 124.917C25.3276 123.755 24.6748 122.179 24.6748 120.536C24.6748 118.892 25.3276 117.316 26.4897 116.154C27.6517 114.992 29.2278 114.339 30.8712 114.339C32.5146 114.339 34.0907 114.992 35.2527 116.154C36.4148 117.316 37.0676 118.892 37.0676 120.536C37.0676 122.179 36.4148 123.755 35.2527 124.917C34.0907 126.079 32.5146 126.732 30.8712 126.732C29.2278 126.732 27.6517 126.079 26.4897 124.917Z" fill="#F7F7F7" stroke="#D9D9D9"/>
+</svg>
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 531a7a9e7194c..dc646e3eef014 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -24,6 +24,9 @@ import Label from 'src/components/Label';
 import { FormLabel } from 'src/components/Form';
 import RefreshLabel from 'src/components/RefreshLabel';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
+import { useDispatch, useSelector } from 'react-redux';
+import { EmptyStateSmall } from '../EmptyState';
+import { setNoDatabaseConnected } from 'src/SqlLab/actions/sqlLab';
 
 const DatabaseSelectorWrapper = styled.div`
   ${({ theme }) => `
@@ -141,6 +144,8 @@ export default function DatabaseSelector({
         }
       : undefined,
   );
+  const dispatch = useDispatch();
+  const dbConnect = useSelector<any, any>(state => state.sqlLab.dbConnect);
   const [currentSchema, setCurrentSchema] = useState<SchemaValue | undefined>(
     schema ? { label: schema, value: schema } : undefined,
   );
@@ -240,6 +245,7 @@ export default function DatabaseSelector({
   ) {
     setCurrentDb(database);
     setCurrentSchema(undefined);
+    dispatch(setNoDatabaseConnected(true));
     if (onDbChange) {
       onDbChange(database);
     }
@@ -263,11 +269,23 @@ export default function DatabaseSelector({
       </div>
     );
   }
+  const p = new Promise(() => null);
 
   function renderDatabaseSelect() {
     return renderSelectRow(
       <Select
         ariaLabel={t('Select database or type database name')}
+        emptyState={
+          <EmptyStateSmall
+            image="empty.svg"
+            title="There are no database available"
+            description={
+              <p>
+                Manage your databse <a href="/databaseview/list">here</a>
+              </p>
+            }
+          />
+        }
         optionFilterProps={['database_name', 'value']}
         data-test="select-database"
         header={<FormLabel>{t('Database')}</FormLabel>}
@@ -283,17 +301,17 @@ export default function DatabaseSelector({
   }
 
   function renderSchemaSelect() {
+    const disabled = dbConnect;
     const refreshIcon = !formMode && !readOnly && (
       <RefreshLabel
         onClick={() => setRefresh(refresh + 1)}
         tooltipContent={t('Force refresh schema list')}
       />
     );
-
     return renderSelectRow(
       <Select
         ariaLabel={t('Select schema or type schema name')}
-        disabled={readOnly}
+        disabled={!disabled || readOnly}
         header={<FormLabel>{t('Schema')}</FormLabel>}
         labelInValue
         lazyLoading={false}
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index 9c7b92c38cf88..3913571f5c887 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -35,9 +35,9 @@ import AntdSelect, {
   LabeledValue as AntdLabeledValue,
 } from 'antd/lib/select';
 import { DownOutlined, SearchOutlined } from '@ant-design/icons';
+import { Spin } from 'antd';
 import debounce from 'lodash/debounce';
 import { isEqual } from 'lodash';
-import { Spin } from 'antd';
 import Icons from 'src/components/Icons';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import { SLOW_DEBOUNCE } from 'src/constants';
@@ -94,6 +94,10 @@ export interface SelectProps extends PickedSelectProps {
    * Must be plain English and localized.
    */
   ariaLabel: string;
+  /**
+   * Override for empty state.
+   */
+  emptyState?: ReactElement;
   /**
    * It adds a header on top of the Select.
    * Can be any ReactNode.
@@ -614,6 +618,9 @@ const Select = (
     if (isLoading && fullSelectOptions.length === 0) {
       return <StyledLoadingText>{t('Loading...')}</StyledLoadingText>;
     }
+    if (!isLoading && fullSelectOptions.length === 0) {
+      return props.emptyState;
+    }
     return error ? <Error error={error} /> : originNode;
   };
 

From d9984ea74640dfaaeaab88567343832912f23d54 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 11 Apr 2022 10:41:54 -0700
Subject: [PATCH 02/28] add suggestions and test

---
 .../components/SqlEditor/SqlEditor.test.jsx   | 12 +++++--
 .../src/SqlLab/components/SqlEditor/index.jsx |  1 -
 .../DatabaseSelector.test.tsx                 | 12 +++++++
 .../src/components/DatabaseSelector/index.tsx | 36 +++++++++++--------
 .../src/components/Select/Select.tsx          |  7 ----
 5 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
index f3549b547f8b1..16cfacdd6441d 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
@@ -38,6 +38,7 @@ import {
   queryEditorSetSelectedText,
   queryEditorSetSchemaOptions,
 } from 'src/SqlLab/actions/sqlLab';
+import { EmptyStateBig } from 'src/components/EmptyState';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import { initialState, queries, table } from 'src/SqlLab/fixtures';
 
@@ -80,18 +81,23 @@ describe('SqlEditor', () => {
       },
     );
 
+  const dbConnected = { sqlLab: { dbConnect: true}};
+  it('does not render SqlEditor if no db selected', () => {
+    const wrapper = buildWrapper();
+    expect(wrapper.find(EmptyStateBig)).toExist();
+  });
   it('render a SqlEditorLeftBar', async () => {
     const wrapper = buildWrapper();
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(SqlEditorLeftBar)).toExist();
   });
   it('render an AceEditorWrapper', async () => {
-    const wrapper = buildWrapper();
+    const wrapper = buildWrapper(dbConnected);
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(AceEditorWrapper)).toExist();
   });
   it('render a SouthPane', async () => {
-    const wrapper = buildWrapper();
+    const wrapper = buildWrapper(dbConnected);
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(ConnectedSouthPane)).toExist();
   });
@@ -123,7 +129,7 @@ describe('SqlEditor', () => {
   });
   it('render a Limit Dropdown', async () => {
     const defaultQueryLimit = 101;
-    const updatedProps = { ...mockedProps, defaultQueryLimit };
+    const updatedProps = { ...mockedProps, defaultQueryLimit, ...dbConnected };
     const wrapper = buildWrapper(updatedProps);
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(AntdDropdown)).toExist();
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index b35ca6e0b993b..7700f695ac74a 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -742,7 +742,6 @@ class SqlEditor extends React.PureComponent {
     const leftBarStateClass = this.props.hideLeftBar
       ? 'schemaPane-exit-done'
       : 'schemaPane-enter-done';
-    console.log('this.props', this.props.sqlLab.dbConnect)
     return (
       <div ref={this.sqlEditorRef} className="SqlEditor">
         <CSSTransition
diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
index 2387c2e2517fe..855affd420834 100644
--- a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
@@ -224,6 +224,18 @@ test('Should database select display options', async () => {
   expect(await screen.findByText('test-mysql')).toBeInTheDocument();
 });
 
+test('should show empty state if there are no options', async () => {
+  const props = createProps();
+  // @ts-ignore
+  props.db = null;
+  render(<DatabaseSelector {...props} />, { useRedux: true });
+  const select = screen.getByRole('combobox', {
+    name: 'Select database or type database name',
+  });
+  userEvent.click(select);
+  expect(screen.queryByText('test-mysql')).not.toBeInTheDocument();
+});
+
 test('Should schema select display options', async () => {
   const props = createProps();
   render(<DatabaseSelector {...props} />, { useRedux: true });
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index dc646e3eef014..1df3385a416ef 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -25,8 +25,8 @@ import { FormLabel } from 'src/components/Form';
 import RefreshLabel from 'src/components/RefreshLabel';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
 import { useDispatch, useSelector } from 'react-redux';
-import { EmptyStateSmall } from '../EmptyState';
 import { setNoDatabaseConnected } from 'src/SqlLab/actions/sqlLab';
+import { EmptyStateSmall } from '../EmptyState';
 
 const DatabaseSelectorWrapper = styled.div`
   ${({ theme }) => `
@@ -132,6 +132,7 @@ export default function DatabaseSelector({
   sqlLabMode = false,
 }: DatabaseSelectorProps) {
   const [loadingSchemas, setLoadingSchemas] = useState(false);
+  const [noDbFoundTitle, setTitleForNoDBFound] = useState(false);
   const [schemaOptions, setSchemaOptions] = useState<SchemaValue[]>([]);
   const [currentDb, setCurrentDb] = useState<DatabaseValue | undefined>(
     db
@@ -151,6 +152,22 @@ export default function DatabaseSelector({
   );
   const [refresh, setRefresh] = useState(0);
   const { addSuccessToast } = useToasts();
+
+  const emptyStateComponent = (
+    <EmptyStateSmall
+      image="empty.svg"
+      title={
+        noDbFoundTitle
+          ? 'No databases match your search'
+          : 'There are no databases available'
+      }
+      description={
+        <p>
+          Manage your database <a href="/databaseview/list">here</a>
+        </p>
+      }
+    />
+  );
   const loadDatabases = useMemo(
     () =>
       async (
@@ -186,6 +203,7 @@ export default function DatabaseSelector({
             getDbList(result);
           }
           if (result.length === 0) {
+            setTitleForNoDBFound(true);
             handleError(t("It seems you don't have access to any database"));
           }
           const options = result.map((row: DatabaseObject) => ({
@@ -214,6 +232,7 @@ export default function DatabaseSelector({
   useEffect(() => {
     if (currentDb) {
       setLoadingSchemas(true);
+      dispatch(setNoDatabaseConnected(true));
       const queryParams = rison.encode({ force: refresh > 0 });
       const endpoint = `/api/v1/database/${currentDb.value}/schemas/?q=${queryParams}`;
 
@@ -269,27 +288,16 @@ export default function DatabaseSelector({
       </div>
     );
   }
-  const p = new Promise(() => null);
 
   function renderDatabaseSelect() {
     return renderSelectRow(
       <Select
         ariaLabel={t('Select database or type database name')}
-        emptyState={
-          <EmptyStateSmall
-            image="empty.svg"
-            title="There are no database available"
-            description={
-              <p>
-                Manage your databse <a href="/databaseview/list">here</a>
-              </p>
-            }
-          />
-        }
         optionFilterProps={['database_name', 'value']}
         data-test="select-database"
         header={<FormLabel>{t('Database')}</FormLabel>}
         lazyLoading={false}
+        notFoundContent={emptyStateComponent}
         onChange={changeDataBase}
         value={currentDb}
         placeholder={t('Select database or type database name')}
@@ -301,7 +309,7 @@ export default function DatabaseSelector({
   }
 
   function renderSchemaSelect() {
-    const disabled = dbConnect;
+    const disabled = dbConnect || currentDb;
     const refreshIcon = !formMode && !readOnly && (
       <RefreshLabel
         onClick={() => setRefresh(refresh + 1)}
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index 3913571f5c887..c850899e8ed45 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -94,10 +94,6 @@ export interface SelectProps extends PickedSelectProps {
    * Must be plain English and localized.
    */
   ariaLabel: string;
-  /**
-   * Override for empty state.
-   */
-  emptyState?: ReactElement;
   /**
    * It adds a header on top of the Select.
    * Can be any ReactNode.
@@ -618,9 +614,6 @@ const Select = (
     if (isLoading && fullSelectOptions.length === 0) {
       return <StyledLoadingText>{t('Loading...')}</StyledLoadingText>;
     }
-    if (!isLoading && fullSelectOptions.length === 0) {
-      return props.emptyState;
-    }
     return error ? <Error error={error} /> : originNode;
   };
 

From aa5e8bc7f5d6c637cc1b39734a1248ca7c5d2af0 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 11 Apr 2022 11:01:39 -0700
Subject: [PATCH 03/28] update type

---
 superset-frontend/src/SqlLab/types.ts                    | 1 +
 .../src/components/DatabaseSelector/index.tsx            | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/SqlLab/types.ts b/superset-frontend/src/SqlLab/types.ts
index d5dfddbe2bbd5..a99c69a3aceae 100644
--- a/superset-frontend/src/SqlLab/types.ts
+++ b/superset-frontend/src/SqlLab/types.ts
@@ -114,6 +114,7 @@ export type RootState = {
     activeSouthPaneTab: string | number; // default is string; action.newQuery.id is number
     alerts: any[];
     databases: Record<string, any>;
+    dbConnect: boolean;
     offline: boolean;
     queries: Query[];
     queryEditors: QueryEditor[];
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 1df3385a416ef..2045a87e61c4d 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -27,6 +27,7 @@ import { useToasts } from 'src/components/MessageToasts/withToasts';
 import { useDispatch, useSelector } from 'react-redux';
 import { setNoDatabaseConnected } from 'src/SqlLab/actions/sqlLab';
 import { EmptyStateSmall } from '../EmptyState';
+import { RootState } from 'src/SqlLab/types';
 
 const DatabaseSelectorWrapper = styled.div`
   ${({ theme }) => `
@@ -146,14 +147,16 @@ export default function DatabaseSelector({
       : undefined,
   );
   const dispatch = useDispatch();
-  const dbConnect = useSelector<any, any>(state => state.sqlLab.dbConnect);
+  const dbConnect = useSelector<RootState, any>(
+    state => state.sqlLab.dbConnect,
+  );
   const [currentSchema, setCurrentSchema] = useState<SchemaValue | undefined>(
     schema ? { label: schema, value: schema } : undefined,
   );
   const [refresh, setRefresh] = useState(0);
   const { addSuccessToast } = useToasts();
 
-  const emptyStateComponent = (
+  const EmptyStateComponent = (
     <EmptyStateSmall
       image="empty.svg"
       title={
@@ -297,7 +300,7 @@ export default function DatabaseSelector({
         data-test="select-database"
         header={<FormLabel>{t('Database')}</FormLabel>}
         lazyLoading={false}
-        notFoundContent={emptyStateComponent}
+        notFoundContent={EmptyStateComponent}
         onChange={changeDataBase}
         value={currentDb}
         placeholder={t('Select database or type database name')}

From cd4abf9b939aa3e4505797a4f27820fcb222724e Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 11 Apr 2022 15:31:28 -0700
Subject: [PATCH 04/28] lint fix and add suggestions

---
 .../src/SqlLab/actions/sqlLab.js              |  2 +-
 .../components/SqlEditor/SqlEditor.test.jsx   |  2 +-
 .../src/SqlLab/components/SqlEditor/index.jsx | 19 ++++++------
 .../components/SqlEditorLeftBar/index.tsx     | 22 +++++++++++++-
 .../src/SqlLab/reducers/sqlLab.js             |  2 +-
 .../src/components/DatabaseSelector/index.tsx | 29 +++++--------------
 .../src/components/TableSelector/index.tsx    |  8 +++++
 7 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js
index f444551da7ece..d0687c387950a 100644
--- a/superset-frontend/src/SqlLab/actions/sqlLab.js
+++ b/superset-frontend/src/SqlLab/actions/sqlLab.js
@@ -129,7 +129,7 @@ export function resetState() {
 }
 
 export function setNoDatabaseConnected(bool) {
-  return {type: NO_DB_CONNECTED, isConnected: bool }
+  return { type: NO_DB_CONNECTED, isConnected: bool };
 }
 
 export function startQueryValidation(query) {
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
index 16cfacdd6441d..aebe93a50c628 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
@@ -81,7 +81,7 @@ describe('SqlEditor', () => {
       },
     );
 
-  const dbConnected = { sqlLab: { dbConnect: true}};
+  const dbConnected = { sqlLab: { dbConnect: true } };
   it('does not render SqlEditor if no db selected', () => {
     const wrapper = buildWrapper();
     expect(wrapper.find(EmptyStateBig)).toExist();
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 7700f695ac74a..e04b08e18131a 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -67,6 +67,7 @@ import {
   setItem,
 } from 'src/utils/localStorageHelpers';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
+import { EmptyStateBig } from 'src/components/EmptyState';
 import TemplateParamsEditor from '../TemplateParamsEditor';
 import ConnectedSouthPane from '../SouthPane/state';
 import SaveQuery from '../SaveQuery';
@@ -76,7 +77,6 @@ import ShareSqlLabQuery from '../ShareSqlLabQuery';
 import SqlEditorLeftBar from '../SqlEditorLeftBar';
 import AceEditorWrapper from '../AceEditorWrapper';
 import RunQueryActionButton from '../RunQueryActionButton';
-import { EmptyStateBig } from 'src/components/EmptyState';
 
 const LIMIT_DROPDOWN = [10, 100, 1000, 10000, 100000];
 const SQL_EDITOR_PADDING = 10;
@@ -758,16 +758,15 @@ class SqlEditor extends React.PureComponent {
             />
           </div>
         </CSSTransition>
-        {this.props.sqlLab.dbConnect
-          ? 
-          this.queryPane() 
-          : 
-          <EmptyStateBig 
-            image="vector.svg" 
-            title="Select a database to write a query" 
-            description="Choose one of the avaialable database on the left" 
+        {this.props.sqlLab.dbConnect ? (
+          this.queryPane()
+        ) : (
+          <EmptyStateBig
+            image="vector.svg"
+            title="Select a database to write a query"
+            description="Choose one of the avaialable database on the left"
           />
-        }
+        )}
         <StyledModal
           visible={this.state.showCreateAsModal}
           title={t(createViewModalTitle)}
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index f9e8c2da9f98f..d48c36c7a525d 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
 import Button from 'src/components/Button';
 import { t, styled, css, SupersetTheme } from '@superset-ui/core';
 import Collapse from 'src/components/Collapse';
@@ -25,6 +25,7 @@ import TableSelector from 'src/components/TableSelector';
 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 TableElement, { Table, TableElementProps } from '../TableElement';
 
 interface ExtendedTable extends Table {
@@ -92,6 +93,7 @@ export default function SqlEditorLeftBar({
   // Ref needed to avoid infinite rerenders on handlers
   // that require and modify the queryEditor
   const queryEditorRef = useRef<QueryEditor>(queryEditor);
+  const [noDbFoundTitle, setTitleForNoDBFound] = useState(false);
   useEffect(() => {
     queryEditorRef.current = queryEditor;
   }, [queryEditor]);
@@ -142,6 +144,22 @@ export default function SqlEditorLeftBar({
   const shouldShowReset = window.location.search === '?reset=1';
   const tableMetaDataHeight = height - 130; // 130 is the height of the selects above
 
+  const emptyStateComponent = (
+    <EmptyStateSmall
+      image="empty.svg"
+      title={
+        noDbFoundTitle
+          ? 'No databases match your search'
+          : 'There are no databases available'
+      }
+      description={
+        <p>
+          Manage your database <a href="/databaseview/list">here</a>
+        </p>
+      }
+    />
+  );
+
   const handleSchemaChange = useCallback(
     (schema: string) => {
       if (queryEditorRef.current) {
@@ -163,6 +181,8 @@ export default function SqlEditorLeftBar({
   return (
     <div className="SqlEditorLeftBar">
       <TableSelector
+        setTitleforDbSql={setTitleForNoDBFound}
+        emptyState={emptyStateComponent}
         database={database}
         getDbList={actions.setDatabases}
         handleError={actions.addDangerToast}
diff --git a/superset-frontend/src/SqlLab/reducers/sqlLab.js b/superset-frontend/src/SqlLab/reducers/sqlLab.js
index b587b794f9f63..2e00ab478b46c 100644
--- a/superset-frontend/src/SqlLab/reducers/sqlLab.js
+++ b/superset-frontend/src/SqlLab/reducers/sqlLab.js
@@ -34,7 +34,7 @@ import {
 export default function sqlLabReducer(state = {}, action) {
   const actionHandlers = {
     [actions.NO_DB_CONNECTED]() {
-      return {...state, dbConnect: action.isConnected}
+      return { ...state, dbConnect: action.isConnected };
     },
     [actions.ADD_QUERY_EDITOR]() {
       const tabHistory = state.tabHistory.slice();
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 2045a87e61c4d..fa24c6851bf0a 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ReactNode, useState, useMemo, useEffect } from 'react';
+import React, { ReactNode, useState, useMemo, useEffect, Dispatch, SetStateAction } from 'react';
 import { styled, SupersetClient, t } from '@superset-ui/core';
 import rison from 'rison';
 import { Select } from 'src/components';
@@ -26,7 +26,6 @@ import RefreshLabel from 'src/components/RefreshLabel';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
 import { useDispatch, useSelector } from 'react-redux';
 import { setNoDatabaseConnected } from 'src/SqlLab/actions/sqlLab';
-import { EmptyStateSmall } from '../EmptyState';
 import { RootState } from 'src/SqlLab/types';
 
 const DatabaseSelectorWrapper = styled.div`
@@ -92,6 +91,7 @@ type SchemaValue = { label: string; value: string };
 
 interface DatabaseSelectorProps {
   db?: DatabaseObject;
+  emptyState?: ReactNode;
   formMode?: boolean;
   getDbList?: (arg0: any) => {};
   handleError: (msg: string) => void;
@@ -100,6 +100,7 @@ interface DatabaseSelectorProps {
   onSchemaChange?: (schema?: string) => void;
   onSchemasLoad?: (schemas: Array<object>) => void;
   readOnly?: boolean;
+  setTitleforDbSql?: Dispatch<SetStateAction<boolean>>;
   schema?: string;
   sqlLabMode?: boolean;
 }
@@ -122,6 +123,7 @@ const SelectLabel = ({
 export default function DatabaseSelector({
   db,
   formMode = false,
+  emptyState,
   getDbList,
   handleError,
   isDatabaseSelectEnabled = true,
@@ -130,10 +132,10 @@ export default function DatabaseSelector({
   onSchemasLoad,
   readOnly = false,
   schema,
+  setTitleforDbSql,
   sqlLabMode = false,
 }: DatabaseSelectorProps) {
   const [loadingSchemas, setLoadingSchemas] = useState(false);
-  const [noDbFoundTitle, setTitleForNoDBFound] = useState(false);
   const [schemaOptions, setSchemaOptions] = useState<SchemaValue[]>([]);
   const [currentDb, setCurrentDb] = useState<DatabaseValue | undefined>(
     db
@@ -156,21 +158,6 @@ export default function DatabaseSelector({
   const [refresh, setRefresh] = useState(0);
   const { addSuccessToast } = useToasts();
 
-  const EmptyStateComponent = (
-    <EmptyStateSmall
-      image="empty.svg"
-      title={
-        noDbFoundTitle
-          ? 'No databases match your search'
-          : 'There are no databases available'
-      }
-      description={
-        <p>
-          Manage your database <a href="/databaseview/list">here</a>
-        </p>
-      }
-    />
-  );
   const loadDatabases = useMemo(
     () =>
       async (
@@ -206,7 +193,7 @@ export default function DatabaseSelector({
             getDbList(result);
           }
           if (result.length === 0) {
-            setTitleForNoDBFound(true);
+            if (setTitleforDbSql) setTitleforDbSql(true);
             handleError(t("It seems you don't have access to any database"));
           }
           const options = result.map((row: DatabaseObject) => ({
@@ -235,7 +222,7 @@ export default function DatabaseSelector({
   useEffect(() => {
     if (currentDb) {
       setLoadingSchemas(true);
-      dispatch(setNoDatabaseConnected(true));
+      if (setTitleforDbSql) dispatch(setNoDatabaseConnected(true));
       const queryParams = rison.encode({ force: refresh > 0 });
       const endpoint = `/api/v1/database/${currentDb.value}/schemas/?q=${queryParams}`;
 
@@ -300,7 +287,7 @@ export default function DatabaseSelector({
         data-test="select-database"
         header={<FormLabel>{t('Database')}</FormLabel>}
         lazyLoading={false}
-        notFoundContent={EmptyStateComponent}
+        notFoundContent={emptyState}
         onChange={changeDataBase}
         value={currentDb}
         placeholder={t('Select database or type database name')}
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index 50804f7d920ce..f4c313c5cb416 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -22,6 +22,8 @@ import React, {
   ReactNode,
   useMemo,
   useEffect,
+  Dispatch,
+  SetStateAction,
 } from 'react';
 import { styled, SupersetClient, t } from '@superset-ui/core';
 import { Select } from 'src/components';
@@ -80,6 +82,7 @@ const TableLabel = styled.span`
 interface TableSelectorProps {
   clearable?: boolean;
   database?: DatabaseObject;
+  emptyState?: ReactNode;
   formMode?: boolean;
   getDbList?: (arg0: any) => {};
   handleError: (msg: string) => void;
@@ -91,6 +94,7 @@ interface TableSelectorProps {
   onTablesLoad?: (options: Array<any>) => void;
   readOnly?: boolean;
   schema?: string;
+  setTitleforDbSql?: Dispatch<SetStateAction<boolean>>;
   sqlLabMode?: boolean;
   tableName?: string;
 }
@@ -143,6 +147,7 @@ const TableOption = ({ table }: { table: Table }) => {
 
 const TableSelector: FunctionComponent<TableSelectorProps> = ({
   database,
+  emptyState,
   formMode = false,
   getDbList,
   handleError,
@@ -153,6 +158,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   onTableChange,
   onTablesLoad,
   readOnly = false,
+  setTitleforDbSql,
   schema,
   sqlLabMode = true,
   tableName,
@@ -261,6 +267,8 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
       <DatabaseSelector
         key={currentDatabase?.id}
         db={currentDatabase}
+        setTitleforDbSql={setTitleforDbSql}
+        emptyState={emptyState}
         formMode={formMode}
         getDbList={getDbList}
         handleError={handleError}

From e417d79adcebe2f9aedbde8d3a2470f7321fa20b Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 11 Apr 2022 15:37:42 -0700
Subject: [PATCH 05/28] fix typo

---
 superset-frontend/src/SqlLab/components/SqlEditor/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index e04b08e18131a..36b8bb5e2e0c3 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -764,7 +764,7 @@ class SqlEditor extends React.PureComponent {
           <EmptyStateBig
             image="vector.svg"
             title="Select a database to write a query"
-            description="Choose one of the avaialable database on the left"
+            description="Choose one of the available database on the left"
           />
         )}
         <StyledModal

From d088f14956d790f33780f2146ac0ef5c43eaa5f3 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 11 Apr 2022 15:50:46 -0700
Subject: [PATCH 06/28] run lint

---
 .../src/components/DatabaseSelector/index.tsx            | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index fa24c6851bf0a..f0aad7afb35a2 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -16,7 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ReactNode, useState, useMemo, useEffect, Dispatch, SetStateAction } from 'react';
+import React, {
+  ReactNode,
+  useState,
+  useMemo,
+  useEffect,
+  Dispatch,
+  SetStateAction,
+} from 'react';
 import { styled, SupersetClient, t } from '@superset-ui/core';
 import rison from 'rison';
 import { Select } from 'src/components';

From 68d582721eff5e10eeefe51c273fa8444c9d9d29 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 11 Apr 2022 16:01:14 -0700
Subject: [PATCH 07/28] remove unused code

---
 superset-frontend/src/SqlLab/components/SqlEditor/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 36b8bb5e2e0c3..3696ac5d823e2 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -25,7 +25,6 @@ import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import Split from 'react-split';
 import { t, styled, withTheme } from '@superset-ui/core';
-import { isEmpty } from 'lodash';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import StyledModal from 'src/components/Modal';

From bae01372c64b97c22f5ce2fb691a1983ae59fda0 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 11 Apr 2022 19:36:22 -0700
Subject: [PATCH 08/28] fix test

---
 superset-frontend/src/components/DatabaseSelector/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index f0aad7afb35a2..bb19abd699cfb 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -157,7 +157,7 @@ export default function DatabaseSelector({
   );
   const dispatch = useDispatch();
   const dbConnect = useSelector<RootState, any>(
-    state => state.sqlLab.dbConnect,
+    state => state.sqlLab?.dbConnect,
   );
   const [currentSchema, setCurrentSchema] = useState<SchemaValue | undefined>(
     schema ? { label: schema, value: schema } : undefined,

From bdcda07a65a71ebe066ce29d97018523297d89af Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 13 Apr 2022 10:10:11 -0700
Subject: [PATCH 09/28] remove redux for propagation and other suggestions

---
 .../src/SqlLab/actions/sqlLab.js              |  4 ---
 .../components/SqlEditor/SqlEditor.test.jsx   | 25 ++++++++++++-----
 .../src/SqlLab/components/SqlEditor/index.jsx | 19 ++++++++++---
 .../components/SqlEditorLeftBar/index.tsx     | 27 ++++++++++++++++---
 .../src/SqlLab/reducers/sqlLab.js             |  3 ---
 .../src/components/DatabaseSelector/index.tsx | 23 +++++++---------
 .../src/components/TableSelector/index.tsx    | 12 ++++++---
 7 files changed, 76 insertions(+), 37 deletions(-)

diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js
index d0687c387950a..995b8f706554e 100644
--- a/superset-frontend/src/SqlLab/actions/sqlLab.js
+++ b/superset-frontend/src/SqlLab/actions/sqlLab.js
@@ -76,7 +76,6 @@ export const SET_USER_OFFLINE = 'SET_USER_OFFLINE';
 export const RUN_QUERY = 'RUN_QUERY';
 export const START_QUERY = 'START_QUERY';
 export const STOP_QUERY = 'STOP_QUERY';
-export const NO_DB_CONNECTED = 'NO_DB_CONNECTED';
 export const REQUEST_QUERY_RESULTS = 'REQUEST_QUERY_RESULTS';
 export const QUERY_SUCCESS = 'QUERY_SUCCESS';
 export const QUERY_FAILED = 'QUERY_FAILED';
@@ -128,9 +127,6 @@ export function resetState() {
   return { type: RESET_STATE };
 }
 
-export function setNoDatabaseConnected(bool) {
-  return { type: NO_DB_CONNECTED, isConnected: bool };
-}
 
 export function startQueryValidation(query) {
   Object.assign(query, {
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
index aebe93a50c628..906db2c721e56 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
@@ -58,7 +58,19 @@ describe('SqlEditor', () => {
       queryEditorSetSchemaOptions,
       addDangerToast: jest.fn(),
     },
-    database: {},
+    database: {
+      allow_ctas: false,
+      allow_cvas: false,
+      allow_dml: false,
+      allow_file_upload: false,
+      allow_multi_schema_metadata_fetch: false,
+      allow_run_async: false,
+      backend: "postgresql",
+      database_name: "examples",
+      expose_in_sqllab: true,
+      force_ctas_schema: null,
+      id: 1,
+    },
     queryEditorId: initialState.sqlLab.queryEditors[0].id,
     latestQuery: queries[0],
     tables: [table],
@@ -81,9 +93,10 @@ describe('SqlEditor', () => {
       },
     );
 
-  const dbConnected = { sqlLab: { dbConnect: true } };
   it('does not render SqlEditor if no db selected', () => {
-    const wrapper = buildWrapper();
+    const database = {};
+    const updatedProps = {...mockedProps, database};
+    const wrapper = buildWrapper(updatedProps);
     expect(wrapper.find(EmptyStateBig)).toExist();
   });
   it('render a SqlEditorLeftBar', async () => {
@@ -92,12 +105,12 @@ describe('SqlEditor', () => {
     expect(wrapper.find(SqlEditorLeftBar)).toExist();
   });
   it('render an AceEditorWrapper', async () => {
-    const wrapper = buildWrapper(dbConnected);
+    const wrapper = buildWrapper();
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(AceEditorWrapper)).toExist();
   });
   it('render a SouthPane', async () => {
-    const wrapper = buildWrapper(dbConnected);
+    const wrapper = buildWrapper();
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(ConnectedSouthPane)).toExist();
   });
@@ -129,7 +142,7 @@ describe('SqlEditor', () => {
   });
   it('render a Limit Dropdown', async () => {
     const defaultQueryLimit = 101;
-    const updatedProps = { ...mockedProps, defaultQueryLimit, ...dbConnected };
+    const updatedProps = { ...mockedProps, defaultQueryLimit };
     const wrapper = buildWrapper(updatedProps);
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(AntdDropdown)).toExist();
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 3696ac5d823e2..edd60c2f036c1 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -76,6 +76,7 @@ import ShareSqlLabQuery from '../ShareSqlLabQuery';
 import SqlEditorLeftBar from '../SqlEditorLeftBar';
 import AceEditorWrapper from '../AceEditorWrapper';
 import RunQueryActionButton from '../RunQueryActionButton';
+import { isEmpty } from 'lodash';
 
 const LIMIT_DROPDOWN = [10, 100, 1000, 10000, 100000];
 const SQL_EDITOR_PADDING = 10;
@@ -180,6 +181,7 @@ class SqlEditor extends React.PureComponent {
       ),
       showCreateAsModal: false,
       createAs: '',
+      showEmptyState: false,
     };
     this.sqlEditorRef = React.createRef();
     this.northPaneRef = React.createRef();
@@ -189,6 +191,7 @@ class SqlEditor extends React.PureComponent {
     this.onResizeEnd = this.onResizeEnd.bind(this);
     this.canValidateQuery = this.canValidateQuery.bind(this);
     this.runQuery = this.runQuery.bind(this);
+    this.setEmptyState = this.setEmptyState.bind(this);
     this.stopQuery = this.stopQuery.bind(this);
     this.saveQuery = this.saveQuery.bind(this);
     this.onSqlChanged = this.onSqlChanged.bind(this);
@@ -228,7 +231,11 @@ class SqlEditor extends React.PureComponent {
     // We need to measure the height of the sql editor post render to figure the height of
     // the south pane so it gets rendered properly
     // eslint-disable-next-line react/no-did-mount-set-state
+    const db = this.props.database; 
     this.setState({ height: this.getSqlEditorHeight() });
+    if (!db || isEmpty(db) ) { 
+      this.setState({ showEmptyState: true})
+    } 
 
     window.addEventListener('resize', this.handleWindowResize);
     window.addEventListener('beforeunload', this.onBeforeUnload);
@@ -363,6 +370,10 @@ class SqlEditor extends React.PureComponent {
     return base;
   }
 
+  setEmptyState(bool) {
+    this.setState({ setEmptyState: bool })
+  }
+
   setQueryEditorSql(sql) {
     this.props.queryEditorSetSql(this.props.queryEditor, sql);
   }
@@ -754,17 +765,19 @@ class SqlEditor extends React.PureComponent {
               queryEditor={this.props.queryEditor}
               tables={this.props.tables}
               actions={this.props.actions}
+              setEmptyState={this.setEmptyState}
+              showDisabled={this.state.showEmptyState} 
             />
           </div>
         </CSSTransition>
-        {this.props.sqlLab.dbConnect ? (
-          this.queryPane()
-        ) : (
+        {this.state.showEmptyState ? (
           <EmptyStateBig
             image="vector.svg"
             title="Select a database to write a query"
             description="Choose one of the available database on the left"
           />
+        ) : (
+          this.queryPane()
         )}
         <StyledModal
           visible={this.state.showCreateAsModal}
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index d48c36c7a525d..9c5148eb0f66a 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -16,7 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useRef, useCallback, useState } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useCallback,
+  useState,
+  Dispatch,
+  SetStateAction,
+} from 'react';
 import Button from 'src/components/Button';
 import { t, styled, css, SupersetTheme } from '@superset-ui/core';
 import Collapse from 'src/components/Collapse';
@@ -55,6 +62,8 @@ interface SqlEditorLeftBarProps {
   tables?: ExtendedTable[];
   actions: actionsTypes & TableElementProps['actions'];
   database: DatabaseObject;
+  setEmptyState: Dispatch<SetStateAction<boolean>>;
+  showDisabled: boolean;
 }
 
 const StyledScrollbarContainer = styled.div`
@@ -89,16 +98,24 @@ export default function SqlEditorLeftBar({
   queryEditor,
   tables = [],
   height = 500,
+  setEmptyState,
 }: SqlEditorLeftBarProps) {
   // Ref needed to avoid infinite rerenders on handlers
   // that require and modify the queryEditor
   const queryEditorRef = useRef<QueryEditor>(queryEditor);
-  const [noDbFoundTitle, setTitleForNoDBFound] = useState(false);
+  const [isDbSearch, setDbSearch] = useState(false);
+  const [isSelectIsClosed, setSelectIsClosed] = useState(true);
+
   useEffect(() => {
     queryEditorRef.current = queryEditor;
   }, [queryEditor]);
 
+  useEffect(() => {
+    if (isSelectIsClosed) setDbSearch(false);
+  }, [isSelectIsClosed]);
+
   const onDbChange = ({ id: dbId }: { id: number }) => {
+    setEmptyState(false);
     actions.queryEditorSetDb(queryEditor, dbId);
     actions.queryEditorSetFunctionNames(queryEditor, dbId);
   };
@@ -148,7 +165,7 @@ export default function SqlEditorLeftBar({
     <EmptyStateSmall
       image="empty.svg"
       title={
-        noDbFoundTitle
+        isDbSearch
           ? 'No databases match your search'
           : 'There are no databases available'
       }
@@ -181,8 +198,10 @@ export default function SqlEditorLeftBar({
   return (
     <div className="SqlEditorLeftBar">
       <TableSelector
-        setTitleforDbSql={setTitleForNoDBFound}
+        setDbSearch={setDbSearch}
         emptyState={emptyStateComponent}
+        setEmptyState={setEmptyState}
+        dbSelectClosedState={setSelectIsClosed}
         database={database}
         getDbList={actions.setDatabases}
         handleError={actions.addDangerToast}
diff --git a/superset-frontend/src/SqlLab/reducers/sqlLab.js b/superset-frontend/src/SqlLab/reducers/sqlLab.js
index 2e00ab478b46c..923caaf96152d 100644
--- a/superset-frontend/src/SqlLab/reducers/sqlLab.js
+++ b/superset-frontend/src/SqlLab/reducers/sqlLab.js
@@ -33,9 +33,6 @@ import {
 
 export default function sqlLabReducer(state = {}, action) {
   const actionHandlers = {
-    [actions.NO_DB_CONNECTED]() {
-      return { ...state, dbConnect: action.isConnected };
-    },
     [actions.ADD_QUERY_EDITOR]() {
       const tabHistory = state.tabHistory.slice();
       tabHistory.push(action.queryEditor.id);
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index bb19abd699cfb..d79997071efda 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -31,9 +31,6 @@ import Label from 'src/components/Label';
 import { FormLabel } from 'src/components/Form';
 import RefreshLabel from 'src/components/RefreshLabel';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
-import { useDispatch, useSelector } from 'react-redux';
-import { setNoDatabaseConnected } from 'src/SqlLab/actions/sqlLab';
-import { RootState } from 'src/SqlLab/types';
 
 const DatabaseSelectorWrapper = styled.div`
   ${({ theme }) => `
@@ -98,6 +95,7 @@ type SchemaValue = { label: string; value: string };
 
 interface DatabaseSelectorProps {
   db?: DatabaseObject;
+  dbSelectClosedState?: Dispatch<SetStateAction<boolean>>;
   emptyState?: ReactNode;
   formMode?: boolean;
   getDbList?: (arg0: any) => {};
@@ -107,7 +105,7 @@ interface DatabaseSelectorProps {
   onSchemaChange?: (schema?: string) => void;
   onSchemasLoad?: (schemas: Array<object>) => void;
   readOnly?: boolean;
-  setTitleforDbSql?: Dispatch<SetStateAction<boolean>>;
+  setDbSearch?: Dispatch<SetStateAction<boolean>>;
   schema?: string;
   sqlLabMode?: boolean;
 }
@@ -129,6 +127,7 @@ const SelectLabel = ({
 
 export default function DatabaseSelector({
   db,
+  dbSelectClosedState,
   formMode = false,
   emptyState,
   getDbList,
@@ -139,7 +138,7 @@ export default function DatabaseSelector({
   onSchemasLoad,
   readOnly = false,
   schema,
-  setTitleforDbSql,
+  setDbSearch,
   sqlLabMode = false,
 }: DatabaseSelectorProps) {
   const [loadingSchemas, setLoadingSchemas] = useState(false);
@@ -155,10 +154,6 @@ export default function DatabaseSelector({
         }
       : undefined,
   );
-  const dispatch = useDispatch();
-  const dbConnect = useSelector<RootState, any>(
-    state => state.sqlLab?.dbConnect,
-  );
   const [currentSchema, setCurrentSchema] = useState<SchemaValue | undefined>(
     schema ? { label: schema, value: schema } : undefined,
   );
@@ -200,7 +195,7 @@ export default function DatabaseSelector({
             getDbList(result);
           }
           if (result.length === 0) {
-            if (setTitleforDbSql) setTitleforDbSql(true);
+            if (setDbSearch && search) setDbSearch(true);
             handleError(t("It seems you don't have access to any database"));
           }
           const options = result.map((row: DatabaseObject) => ({
@@ -217,6 +212,7 @@ export default function DatabaseSelector({
             allow_multi_schema_metadata_fetch:
               row.allow_multi_schema_metadata_fetch,
           }));
+
           return {
             data: options,
             totalCount: options.length,
@@ -229,7 +225,6 @@ export default function DatabaseSelector({
   useEffect(() => {
     if (currentDb) {
       setLoadingSchemas(true);
-      if (setTitleforDbSql) dispatch(setNoDatabaseConnected(true));
       const queryParams = rison.encode({ force: refresh > 0 });
       const endpoint = `/api/v1/database/${currentDb.value}/schemas/?q=${queryParams}`;
 
@@ -261,7 +256,7 @@ export default function DatabaseSelector({
   ) {
     setCurrentDb(database);
     setCurrentSchema(undefined);
-    dispatch(setNoDatabaseConnected(true));
+    // dispatch(setNoDatabaseConnected(true));
     if (onDbChange) {
       onDbChange(database);
     }
@@ -296,6 +291,7 @@ export default function DatabaseSelector({
         lazyLoading={false}
         notFoundContent={emptyState}
         onChange={changeDataBase}
+        onDropdownVisibleChange={dbSelectClosedState}
         value={currentDb}
         placeholder={t('Select database or type database name')}
         disabled={!isDatabaseSelectEnabled || readOnly}
@@ -306,7 +302,6 @@ export default function DatabaseSelector({
   }
 
   function renderSchemaSelect() {
-    const disabled = dbConnect || currentDb;
     const refreshIcon = !formMode && !readOnly && (
       <RefreshLabel
         onClick={() => setRefresh(refresh + 1)}
@@ -316,7 +311,7 @@ export default function DatabaseSelector({
     return renderSelectRow(
       <Select
         ariaLabel={t('Select schema or type schema name')}
-        disabled={!disabled || readOnly}
+        disabled={!currentDb || readOnly}
         header={<FormLabel>{t('Schema')}</FormLabel>}
         labelInValue
         lazyLoading={false}
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index f4c313c5cb416..33db4a485022f 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -81,6 +81,7 @@ const TableLabel = styled.span`
 
 interface TableSelectorProps {
   clearable?: boolean;
+  dbSelectClosedState?: React.Dispatch<React.SetStateAction<boolean>>;
   database?: DatabaseObject;
   emptyState?: ReactNode;
   formMode?: boolean;
@@ -94,7 +95,8 @@ interface TableSelectorProps {
   onTablesLoad?: (options: Array<any>) => void;
   readOnly?: boolean;
   schema?: string;
-  setTitleforDbSql?: Dispatch<SetStateAction<boolean>>;
+  setEmptyState?: Dispatch<SetStateAction<boolean>>;
+  setDbSearch?: Dispatch<SetStateAction<boolean>>;
   sqlLabMode?: boolean;
   tableName?: string;
 }
@@ -147,6 +149,7 @@ const TableOption = ({ table }: { table: Table }) => {
 
 const TableSelector: FunctionComponent<TableSelectorProps> = ({
   database,
+  dbSelectClosedState,
   emptyState,
   formMode = false,
   getDbList,
@@ -158,8 +161,9 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   onTableChange,
   onTablesLoad,
   readOnly = false,
-  setTitleforDbSql,
+  setDbSearch,
   schema,
+  setEmptyState,
   sqlLabMode = true,
   tableName,
 }) => {
@@ -267,8 +271,10 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
       <DatabaseSelector
         key={currentDatabase?.id}
         db={currentDatabase}
-        setTitleforDbSql={setTitleforDbSql}
+        dbSelectClosedState={dbSelectClosedState}
+        setDbSearch={setDbSearch}
         emptyState={emptyState}
+        setEmptyState={setEmptyState}
         formMode={formMode}
         getDbList={getDbList}
         handleError={handleError}

From efcdf4b04fcc5e683bc5c83443fbb67a73f47018 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 13 Apr 2022 10:17:13 -0700
Subject: [PATCH 10/28] add t

---
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 9c5148eb0f66a..7dab5b1995ea0 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -166,8 +166,8 @@ export default function SqlEditorLeftBar({
       image="empty.svg"
       title={
         isDbSearch
-          ? 'No databases match your search'
-          : 'There are no databases available'
+          ? t('No databases match your search')
+          : t('There are no databases available')
       }
       description={
         <p>

From 61ee6c6f8aa1877d71719379b7aa336c29664614 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 13 Apr 2022 11:07:37 -0700
Subject: [PATCH 11/28] lint

---
 superset-frontend/src/SqlLab/actions/sqlLab.js     |  1 -
 .../SqlLab/components/SqlEditor/SqlEditor.test.jsx |  6 +++---
 .../src/SqlLab/components/SqlEditor/index.jsx      | 14 +++++++-------
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js
index f1a1bb43b3b3e..3d1298e6c3b73 100644
--- a/superset-frontend/src/SqlLab/actions/sqlLab.js
+++ b/superset-frontend/src/SqlLab/actions/sqlLab.js
@@ -127,7 +127,6 @@ export function resetState() {
   return { type: RESET_STATE };
 }
 
-
 export function startQueryValidation(query) {
   Object.assign(query, {
     id: query.id ? query.id : shortid.generate(),
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
index 906db2c721e56..d946c675cc8c4 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
@@ -65,8 +65,8 @@ describe('SqlEditor', () => {
       allow_file_upload: false,
       allow_multi_schema_metadata_fetch: false,
       allow_run_async: false,
-      backend: "postgresql",
-      database_name: "examples",
+      backend: 'postgresql',
+      database_name: 'examples',
       expose_in_sqllab: true,
       force_ctas_schema: null,
       id: 1,
@@ -95,7 +95,7 @@ describe('SqlEditor', () => {
 
   it('does not render SqlEditor if no db selected', () => {
     const database = {};
-    const updatedProps = {...mockedProps, database};
+    const updatedProps = { ...mockedProps, database };
     const wrapper = buildWrapper(updatedProps);
     expect(wrapper.find(EmptyStateBig)).toExist();
   });
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index edd60c2f036c1..90fe7511e2fcf 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -67,6 +67,7 @@ import {
 } from 'src/utils/localStorageHelpers';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import { EmptyStateBig } from 'src/components/EmptyState';
+import { isEmpty } from 'lodash';
 import TemplateParamsEditor from '../TemplateParamsEditor';
 import ConnectedSouthPane from '../SouthPane/state';
 import SaveQuery from '../SaveQuery';
@@ -76,7 +77,6 @@ import ShareSqlLabQuery from '../ShareSqlLabQuery';
 import SqlEditorLeftBar from '../SqlEditorLeftBar';
 import AceEditorWrapper from '../AceEditorWrapper';
 import RunQueryActionButton from '../RunQueryActionButton';
-import { isEmpty } from 'lodash';
 
 const LIMIT_DROPDOWN = [10, 100, 1000, 10000, 100000];
 const SQL_EDITOR_PADDING = 10;
@@ -231,11 +231,11 @@ class SqlEditor extends React.PureComponent {
     // We need to measure the height of the sql editor post render to figure the height of
     // the south pane so it gets rendered properly
     // eslint-disable-next-line react/no-did-mount-set-state
-    const db = this.props.database; 
+    const db = this.props.database;
     this.setState({ height: this.getSqlEditorHeight() });
-    if (!db || isEmpty(db) ) { 
-      this.setState({ showEmptyState: true})
-    } 
+    if (!db || isEmpty(db)) {
+      this.setState({ showEmptyState: true });
+    }
 
     window.addEventListener('resize', this.handleWindowResize);
     window.addEventListener('beforeunload', this.onBeforeUnload);
@@ -371,7 +371,7 @@ class SqlEditor extends React.PureComponent {
   }
 
   setEmptyState(bool) {
-    this.setState({ setEmptyState: bool })
+    this.setState({ setEmptyState: bool });
   }
 
   setQueryEditorSql(sql) {
@@ -766,7 +766,7 @@ class SqlEditor extends React.PureComponent {
               tables={this.props.tables}
               actions={this.props.actions}
               setEmptyState={this.setEmptyState}
-              showDisabled={this.state.showEmptyState} 
+              showDisabled={this.state.showEmptyState}
             />
           </div>
         </CSSTransition>

From 7255d359b44bc040bc4c78287bce6c2428aa6d27 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 13 Apr 2022 11:27:56 -0700
Subject: [PATCH 12/28] fix text and remove code

---
 superset-frontend/src/SqlLab/components/SqlEditor/index.jsx     | 2 +-
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx            | 2 +-
 superset-frontend/src/components/DatabaseSelector/index.tsx     | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 90fe7511e2fcf..16e8ba685d58b 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -774,7 +774,7 @@ class SqlEditor extends React.PureComponent {
           <EmptyStateBig
             image="vector.svg"
             title="Select a database to write a query"
-            description="Choose one of the available database on the left"
+            description="Choose one of the available databases from the panel on the left."
           />
         ) : (
           this.queryPane()
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 45a75a644bdd3..f1c5ed27f31ce 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -194,7 +194,7 @@ export default function SqlEditorLeftBar({
       }
       description={
         <p>
-          Manage your database <a href="/databaseview/list">here</a>
+          Manage your databases <a href="/databaseview/list">here</a>
         </p>
       }
     />
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index d79997071efda..461923d180199 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -256,7 +256,6 @@ export default function DatabaseSelector({
   ) {
     setCurrentDb(database);
     setCurrentSchema(undefined);
-    // dispatch(setNoDatabaseConnected(true));
     if (onDbChange) {
       onDbChange(database);
     }

From 19283db2f371082c80e1ec56ff8839e1c4d494a7 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 13 Apr 2022 15:01:58 -0700
Subject: [PATCH 13/28] ts and fix t in p

---
 superset-frontend/src/SqlLab/components/SqlEditor/index.jsx    | 1 +
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx           | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 16e8ba685d58b..dd4a5a22b6719 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -370,6 +370,7 @@ class SqlEditor extends React.PureComponent {
     return base;
   }
 
+  // @ts-ignore
   setEmptyState(bool) {
     this.setState({ setEmptyState: bool });
   }
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index f1c5ed27f31ce..6ceed0b8777b3 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -194,7 +194,8 @@ export default function SqlEditorLeftBar({
       }
       description={
         <p>
-          Manage your databases <a href="/databaseview/list">here</a>
+          {t('Manage your databases')}{' '}
+          <a href="/databaseview/list">{t('here')}</a>
         </p>
       }
     />

From dbed5fe7e53f8121e620009a0c71f0bcdfc7bf07 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 13 Apr 2022 15:33:36 -0700
Subject: [PATCH 14/28] fix spelling

---
 superset-frontend/src/SqlLab/components/SqlEditor/index.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index dd4a5a22b6719..a7229a2113a1b 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -370,9 +370,8 @@ class SqlEditor extends React.PureComponent {
     return base;
   }
 
-  // @ts-ignore
   setEmptyState(bool) {
-    this.setState({ setEmptyState: bool });
+    this.setState({ showEmptyState: bool });
   }
 
   setQueryEditorSql(sql) {
@@ -767,7 +766,6 @@ class SqlEditor extends React.PureComponent {
               tables={this.props.tables}
               actions={this.props.actions}
               setEmptyState={this.setEmptyState}
-              showDisabled={this.state.showEmptyState}
             />
           </div>
         </CSSTransition>

From f1eba1926d10e74ebd3e4ec28d623e1d9609dfd7 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 13 Apr 2022 15:45:58 -0700
Subject: [PATCH 15/28] remove unused prop

---
 superset-frontend/src/components/TableSelector/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index 0ac35b687eeac..872fc34725c3e 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -299,7 +299,6 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
         dbSelectClosedState={dbSelectClosedState}
         setDbSearch={setDbSearch}
         emptyState={emptyState}
-        setEmptyState={setEmptyState}
         formMode={formMode}
         getDbList={getDbList}
         handleError={handleError}

From 7bca734579b82ba37b3acf61155d61a018bbcd37 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 14 Apr 2022 09:29:14 -0700
Subject: [PATCH 16/28] add fn to prop change state

---
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx   |  7 ++++++-
 .../src/components/DatabaseSelector/index.tsx          |  8 +++-----
 .../src/components/TableSelector/index.tsx             | 10 +++-------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 6ceed0b8777b3..556e8ea78be3f 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -115,6 +115,11 @@ export default function SqlEditorLeftBar({
     if (isSelectIsClosed) setDbSearch(false);
   }, [isSelectIsClosed]);
 
+  const onDbSearch = (searchText?: string) => {
+    if (searchText) setDbSearch(true);
+    else setDbSearch(false);
+  };
+
   const onDbChange = ({ id: dbId }: { id: number }) => {
     setEmptyState(false);
     actions.queryEditorSetDb(queryEditor, dbId);
@@ -222,7 +227,7 @@ export default function SqlEditorLeftBar({
   return (
     <div className="SqlEditorLeftBar">
       <TableSelectorMultiple
-        setDbSearch={setDbSearch}
+        onEmptyResults={onDbSearch}
         emptyState={emptyStateComponent}
         setEmptyState={setEmptyState}
         dbSelectClosedState={setSelectIsClosed}
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 461923d180199..31b858787bc57 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -95,13 +95,13 @@ type SchemaValue = { label: string; value: string };
 
 interface DatabaseSelectorProps {
   db?: DatabaseObject;
-  dbSelectClosedState?: Dispatch<SetStateAction<boolean>>;
   emptyState?: ReactNode;
   formMode?: boolean;
   getDbList?: (arg0: any) => {};
   handleError: (msg: string) => void;
   isDatabaseSelectEnabled?: boolean;
   onDbChange?: (db: DatabaseObject) => void;
+  onEmptyResults?: (searchText?: string) => null;
   onSchemaChange?: (schema?: string) => void;
   onSchemasLoad?: (schemas: Array<object>) => void;
   readOnly?: boolean;
@@ -127,18 +127,17 @@ const SelectLabel = ({
 
 export default function DatabaseSelector({
   db,
-  dbSelectClosedState,
   formMode = false,
   emptyState,
   getDbList,
   handleError,
   isDatabaseSelectEnabled = true,
   onDbChange,
+  onEmptyResults,
   onSchemaChange,
   onSchemasLoad,
   readOnly = false,
   schema,
-  setDbSearch,
   sqlLabMode = false,
 }: DatabaseSelectorProps) {
   const [loadingSchemas, setLoadingSchemas] = useState(false);
@@ -195,7 +194,7 @@ export default function DatabaseSelector({
             getDbList(result);
           }
           if (result.length === 0) {
-            if (setDbSearch && search) setDbSearch(true);
+            if (onEmptyResults) onEmptyResults(search);
             handleError(t("It seems you don't have access to any database"));
           }
           const options = result.map((row: DatabaseObject) => ({
@@ -290,7 +289,6 @@ export default function DatabaseSelector({
         lazyLoading={false}
         notFoundContent={emptyState}
         onChange={changeDataBase}
-        onDropdownVisibleChange={dbSelectClosedState}
         value={currentDb}
         placeholder={t('Select database or type database name')}
         disabled={!isDatabaseSelectEnabled || readOnly}
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index 872fc34725c3e..c6717f69ce728 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -83,7 +83,6 @@ const TableLabel = styled.span`
 
 interface TableSelectorProps {
   clearable?: boolean;
-  dbSelectClosedState?: React.Dispatch<React.SetStateAction<boolean>>;
   database?: DatabaseObject;
   emptyState?: ReactNode;
   formMode?: boolean;
@@ -97,7 +96,7 @@ interface TableSelectorProps {
   readOnly?: boolean;
   schema?: string;
   setEmptyState?: Dispatch<SetStateAction<boolean>>;
-  setDbSearch?: Dispatch<SetStateAction<boolean>>;
+  onEmptyResults?: (searchText?: string) => null;
   sqlLabMode?: boolean;
   tableValue?: string | string[];
   onTableSelectChange?: (value?: string | string[], schema?: string) => void;
@@ -152,7 +151,6 @@ const TableOption = ({ table }: { table: Table }) => {
 
 const TableSelector: FunctionComponent<TableSelectorProps> = ({
   database,
-  dbSelectClosedState,
   emptyState,
   formMode = false,
   getDbList,
@@ -163,9 +161,8 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   onSchemasLoad,
   onTablesLoad,
   readOnly = false,
-  setDbSearch,
+  onEmptyResults,
   schema,
-  setEmptyState,
   sqlLabMode = true,
   tableSelectMode = 'single',
   tableValue = undefined,
@@ -296,13 +293,12 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
       <DatabaseSelector
         key={currentDatabase?.id}
         db={currentDatabase}
-        dbSelectClosedState={dbSelectClosedState}
-        setDbSearch={setDbSearch}
         emptyState={emptyState}
         formMode={formMode}
         getDbList={getDbList}
         handleError={handleError}
         onDbChange={readOnly ? undefined : internalDbChange}
+        onEmptyResults={onEmptyResults}
         onSchemaChange={readOnly ? undefined : internalSchemaChange}
         onSchemasLoad={onSchemasLoad}
         schema={currentSchema}

From a586d386b0e88b389e5547b69fb400a2d7cfa8d5 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 14 Apr 2022 10:17:42 -0700
Subject: [PATCH 17/28] remove unused code

---
 .../src/SqlLab/components/SqlEditor/index.jsx              | 6 +++---
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx       | 7 -------
 superset-frontend/src/components/TableSelector/index.tsx   | 1 -
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index a7229a2113a1b..f4e6182209951 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -234,7 +234,7 @@ class SqlEditor extends React.PureComponent {
     const db = this.props.database;
     this.setState({ height: this.getSqlEditorHeight() });
     if (!db || isEmpty(db)) {
-      this.setState({ showEmptyState: true });
+      this.setEmptyState(true);
     }
 
     window.addEventListener('resize', this.handleWindowResize);
@@ -772,8 +772,8 @@ class SqlEditor extends React.PureComponent {
         {this.state.showEmptyState ? (
           <EmptyStateBig
             image="vector.svg"
-            title="Select a database to write a query"
-            description="Choose one of the available databases from the panel on the left."
+            title={t("Select a database to write a query")}
+            description={t("Choose one of the available databases from the panel on the left.")}
           />
         ) : (
           this.queryPane()
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 556e8ea78be3f..c6a3e3482375a 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -105,16 +105,11 @@ export default function SqlEditorLeftBar({
   // that require and modify the queryEditor
   const queryEditorRef = useRef<QueryEditor>(queryEditor);
   const [isDbSearch, setDbSearch] = useState(false);
-  const [isSelectIsClosed, setSelectIsClosed] = useState(true);
 
   useEffect(() => {
     queryEditorRef.current = queryEditor;
   }, [queryEditor]);
 
-  useEffect(() => {
-    if (isSelectIsClosed) setDbSearch(false);
-  }, [isSelectIsClosed]);
-
   const onDbSearch = (searchText?: string) => {
     if (searchText) setDbSearch(true);
     else setDbSearch(false);
@@ -229,8 +224,6 @@ export default function SqlEditorLeftBar({
       <TableSelectorMultiple
         onEmptyResults={onDbSearch}
         emptyState={emptyStateComponent}
-        setEmptyState={setEmptyState}
-        dbSelectClosedState={setSelectIsClosed}
         database={database}
         getDbList={actions.setDatabases}
         handleError={actions.addDangerToast}
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index c6717f69ce728..464f6d6f16aca 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -95,7 +95,6 @@ interface TableSelectorProps {
   onTablesLoad?: (options: Array<any>) => void;
   readOnly?: boolean;
   schema?: string;
-  setEmptyState?: Dispatch<SetStateAction<boolean>>;
   onEmptyResults?: (searchText?: string) => null;
   sqlLabMode?: boolean;
   tableValue?: string | string[];

From a5c5bf232b341302b2bf8dd396647077444c4573 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 14 Apr 2022 10:19:44 -0700
Subject: [PATCH 18/28] remove unused types

---
 superset-frontend/src/components/TableSelector/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index 464f6d6f16aca..b7a4cfea989da 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -22,8 +22,6 @@ import React, {
   ReactNode,
   useMemo,
   useEffect,
-  Dispatch,
-  SetStateAction,
 } from 'react';
 import { SelectValue } from 'antd/lib/select';
 

From c705ce62e84ebf662bc5e3e9380d6e55347d262a Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 14 Apr 2022 21:33:01 -0700
Subject: [PATCH 19/28] update code and test

---
 .../SqlLab/components/SqlEditorLeftBar/index.tsx  |  1 -
 .../DatabaseSelector/DatabaseSelector.test.tsx    | 15 ++++++++++++++-
 .../src/components/DatabaseSelector/index.tsx     | 10 +---------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index c6a3e3482375a..77309c68445cd 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -200,7 +200,6 @@ export default function SqlEditorLeftBar({
       }
     />
   );
-
   const handleSchemaChange = useCallback(
     (schema: string) => {
       if (queryEditorRef.current) {
diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
index 855affd420834..de152cacb91dd 100644
--- a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
@@ -22,6 +22,7 @@ import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import { SupersetClient } from '@superset-ui/core';
 import userEvent from '@testing-library/user-event';
 import DatabaseSelector from '.';
+import { EmptyStateSmall } from '../EmptyState';
 
 const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
 
@@ -228,11 +229,23 @@ test('should show empty state if there are no options', async () => {
   const props = createProps();
   // @ts-ignore
   props.db = null;
-  render(<DatabaseSelector {...props} />, { useRedux: true });
+  // @ts-ignore
+  props.results = [];
+  const { getByAltText } = await render(
+    <DatabaseSelector
+      {...props}
+      emptyState={
+        <EmptyStateSmall title="testing" description="testing" image="" />
+      }
+    />,
+    { useRedux: true },
+  );
   const select = screen.getByRole('combobox', {
     name: 'Select database or type database name',
   });
   userEvent.click(select);
+  const emptystate = getByAltText('empty');
+  expect(emptystate).toBeInTheDocument();
   expect(screen.queryByText('test-mysql')).not.toBeInTheDocument();
 });
 
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 31b858787bc57..2a766b7bbe517 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -16,14 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, {
-  ReactNode,
-  useState,
-  useMemo,
-  useEffect,
-  Dispatch,
-  SetStateAction,
-} from 'react';
+import React, { ReactNode, useState, useMemo, useEffect } from 'react';
 import { styled, SupersetClient, t } from '@superset-ui/core';
 import rison from 'rison';
 import { Select } from 'src/components';
@@ -105,7 +98,6 @@ interface DatabaseSelectorProps {
   onSchemaChange?: (schema?: string) => void;
   onSchemasLoad?: (schemas: Array<object>) => void;
   readOnly?: boolean;
-  setDbSearch?: Dispatch<SetStateAction<boolean>>;
   schema?: string;
   sqlLabMode?: boolean;
 }

From 94d3485e3c938a0507165b54028c896d7e7024f7 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 14 Apr 2022 21:37:03 -0700
Subject: [PATCH 20/28] fix lint

---
 superset-frontend/src/SqlLab/components/SqlEditor/index.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index f4e6182209951..baef09848a2e2 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -772,8 +772,10 @@ class SqlEditor extends React.PureComponent {
         {this.state.showEmptyState ? (
           <EmptyStateBig
             image="vector.svg"
-            title={t("Select a database to write a query")}
-            description={t("Choose one of the available databases from the panel on the left.")}
+            title={t('Select a database to write a query')}
+            description={t(
+              'Choose one of the available databases from the panel on the left.',
+            )}
           />
         ) : (
           this.queryPane()

From d222fead726b731a842a02fb3fbe7704b44ea21f Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 14 Apr 2022 21:51:03 -0700
Subject: [PATCH 21/28] fix ts

---
 superset-frontend/src/components/TableSelector/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index b7a4cfea989da..fcc5dbe10d214 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -93,7 +93,7 @@ interface TableSelectorProps {
   onTablesLoad?: (options: Array<any>) => void;
   readOnly?: boolean;
   schema?: string;
-  onEmptyResults?: (searchText?: string) => null;
+  onEmptyResults?: (searchText?: string) => void;
   sqlLabMode?: boolean;
   tableValue?: string | string[];
   onTableSelectChange?: (value?: string | string[], schema?: string) => void;

From 66e9c461b01a263287391753d10ef4d0a5aef8eb Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 15 Apr 2022 09:57:39 -0700
Subject: [PATCH 22/28] update ts

---
 superset-frontend/src/components/DatabaseSelector/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 2a766b7bbe517..04416484d1949 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -94,7 +94,7 @@ interface DatabaseSelectorProps {
   handleError: (msg: string) => void;
   isDatabaseSelectEnabled?: boolean;
   onDbChange?: (db: DatabaseObject) => void;
-  onEmptyResults?: (searchText?: string) => null;
+  onEmptyResults?: (searchText?: string) => void;
   onSchemaChange?: (schema?: string) => void;
   onSchemasLoad?: (schemas: Array<object>) => void;
   readOnly?: boolean;

From 8bd7cf6ccee75c02da4e30961002f50a861711e4 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 15 Apr 2022 11:00:50 -0700
Subject: [PATCH 23/28] add type export and fix test

---
 .../DatabaseSelector.test.tsx                 | 27 +++++++------------
 .../src/components/DatabaseSelector/index.tsx |  2 +-
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
index de152cacb91dd..e396d5d8593c0 100644
--- a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
@@ -21,12 +21,12 @@ import React from 'react';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import { SupersetClient } from '@superset-ui/core';
 import userEvent from '@testing-library/user-event';
-import DatabaseSelector from '.';
+import DatabaseSelector, { DatabaseSelectorProps } from '.';
 import { EmptyStateSmall } from '../EmptyState';
 
 const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
 
-const createProps = () => ({
+const createProps = (): DatabaseSelectorProps => ({
   db: {
     id: 1,
     database_name: 'test',
@@ -39,12 +39,10 @@ const createProps = () => ({
   schema: undefined,
   sqlLabMode: true,
   getDbList: jest.fn(),
-  getTableList: jest.fn(),
   handleError: jest.fn(),
   onDbChange: jest.fn(),
   onSchemaChange: jest.fn(),
   onSchemasLoad: jest.fn(),
-  onUpdate: jest.fn(),
 });
 
 beforeEach(() => {
@@ -192,12 +190,10 @@ test('Refresh should work', async () => {
   await waitFor(() => {
     expect(SupersetClientGet).toBeCalledTimes(2);
     expect(props.getDbList).toBeCalledTimes(0);
-    expect(props.getTableList).toBeCalledTimes(0);
     expect(props.handleError).toBeCalledTimes(0);
     expect(props.onDbChange).toBeCalledTimes(0);
     expect(props.onSchemaChange).toBeCalledTimes(0);
     expect(props.onSchemasLoad).toBeCalledTimes(0);
-    expect(props.onUpdate).toBeCalledTimes(0);
   });
 
   userEvent.click(screen.getByRole('button', { name: 'refresh' }));
@@ -205,12 +201,10 @@ test('Refresh should work', async () => {
   await waitFor(() => {
     expect(SupersetClientGet).toBeCalledTimes(3);
     expect(props.getDbList).toBeCalledTimes(1);
-    expect(props.getTableList).toBeCalledTimes(0);
     expect(props.handleError).toBeCalledTimes(0);
     expect(props.onDbChange).toBeCalledTimes(0);
     expect(props.onSchemaChange).toBeCalledTimes(0);
     expect(props.onSchemasLoad).toBeCalledTimes(2);
-    expect(props.onUpdate).toBeCalledTimes(0);
   });
 });
 
@@ -226,17 +220,15 @@ test('Should database select display options', async () => {
 });
 
 test('should show empty state if there are no options', async () => {
+  SupersetClientGet.mockImplementation(
+    async () => ({ json: { result: [] } } as any),
+  );
   const props = createProps();
-  // @ts-ignore
-  props.db = null;
-  // @ts-ignore
-  props.results = [];
-  const { getByAltText } = await render(
+  render(
     <DatabaseSelector
       {...props}
-      emptyState={
-        <EmptyStateSmall title="testing" description="testing" image="" />
-      }
+      db={undefined}
+      emptyState={<EmptyStateSmall title="empty" image="" />}
     />,
     { useRedux: true },
   );
@@ -244,7 +236,8 @@ test('should show empty state if there are no options', async () => {
     name: 'Select database or type database name',
   });
   userEvent.click(select);
-  const emptystate = getByAltText('empty');
+  // const emptystate = getByAltText('empty');
+  const emptystate = await screen.findByText('empty');
   expect(emptystate).toBeInTheDocument();
   expect(screen.queryByText('test-mysql')).not.toBeInTheDocument();
 });
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 04416484d1949..2ef21a549ec81 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -86,7 +86,7 @@ export type DatabaseObject = {
 
 type SchemaValue = { label: string; value: string };
 
-interface DatabaseSelectorProps {
+export interface DatabaseSelectorProps {
   db?: DatabaseObject;
   emptyState?: ReactNode;
   formMode?: boolean;

From 9adc5eab95296104b20c0744559d27e4043428ab Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 15 Apr 2022 11:03:59 -0700
Subject: [PATCH 24/28] Update
 superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 77309c68445cd..49d71ed416799 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -104,7 +104,7 @@ export default function SqlEditorLeftBar({
   // Ref needed to avoid infinite rerenders on handlers
   // that require and modify the queryEditor
   const queryEditorRef = useRef<QueryEditor>(queryEditor);
-  const [isDbSearch, setDbSearch] = useState(false);
+  const [emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false);
 
   useEffect(() => {
     queryEditorRef.current = queryEditor;

From 2a4995c81265b27307f883e3983690ef3634907b Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 15 Apr 2022 11:04:05 -0700
Subject: [PATCH 25/28] Update
 superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 49d71ed416799..b458b0fdd0f09 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -188,7 +188,7 @@ export default function SqlEditorLeftBar({
     <EmptyStateSmall
       image="empty.svg"
       title={
-        isDbSearch
+        emptyResultsWithSearch
           ? t('No databases match your search')
           : t('There are no databases available')
       }

From 8217c2c84c31aada28cd011562b96e1449293e05 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 15 Apr 2022 11:04:14 -0700
Subject: [PATCH 26/28] Update
 superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx         | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index b458b0fdd0f09..7a30e449472a7 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -110,9 +110,8 @@ export default function SqlEditorLeftBar({
     queryEditorRef.current = queryEditor;
   }, [queryEditor]);
 
-  const onDbSearch = (searchText?: string) => {
-    if (searchText) setDbSearch(true);
-    else setDbSearch(false);
+  const onEmptyResults = (searchText?: string) => {
+    setEmptyResultsWithSearch(!!searchText);
   };
 
   const onDbChange = ({ id: dbId }: { id: number }) => {

From 925e10753fdb514adc86b4db9de884861a9e5717 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 15 Apr 2022 11:04:22 -0700
Subject: [PATCH 27/28] Update
 superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 7a30e449472a7..f74249465456a 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -220,7 +220,7 @@ export default function SqlEditorLeftBar({
   return (
     <div className="SqlEditorLeftBar">
       <TableSelectorMultiple
-        onEmptyResults={onDbSearch}
+        onEmptyResults={onEmptyResults}
         emptyState={emptyStateComponent}
         database={database}
         getDbList={actions.setDatabases}

From bf36826014be04af58d17f4bd672e30e114e86d6 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 15 Apr 2022 13:20:05 -0700
Subject: [PATCH 28/28] remove handlerror and unused code

---
 .../src/components/DatabaseSelector/DatabaseSelector.test.tsx  | 1 -
 superset-frontend/src/components/DatabaseSelector/index.tsx    | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
index e396d5d8593c0..272249b549600 100644
--- a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
@@ -236,7 +236,6 @@ test('should show empty state if there are no options', async () => {
     name: 'Select database or type database name',
   });
   userEvent.click(select);
-  // const emptystate = getByAltText('empty');
   const emptystate = await screen.findByText('empty');
   expect(emptystate).toBeInTheDocument();
   expect(screen.queryByText('test-mysql')).not.toBeInTheDocument();
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 2ef21a549ec81..718177a13956f 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -187,7 +187,6 @@ export default function DatabaseSelector({
           }
           if (result.length === 0) {
             if (onEmptyResults) onEmptyResults(search);
-            handleError(t("It seems you don't have access to any database"));
           }
           const options = result.map((row: DatabaseObject) => ({
             label: (
@@ -210,7 +209,7 @@ export default function DatabaseSelector({
           };
         });
       },
-    [formMode, getDbList, handleError, sqlLabMode],
+    [formMode, getDbList, sqlLabMode],
   );
 
   useEffect(() => {