Revert "chore: Changes the DatabaseSelector to use the new Select component (#16334)" (#16478)

This reverts commit c768941f2f.

superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx

@@ -81,13 +81,9 @@ describe('Left Panel Expansion', () => {
         </Provider>
       </ThemeProvider>,
     );
-    const dbSelect = screen.getByRole('combobox', {
+    const dbSelect = screen.getByText(/select a database/i);
-      name: 'Select a database',
+    const schemaSelect = screen.getByText(/select a schema \(0\)/i);
-    });
+    const dropdown = screen.getByText(/Select table/i);
-    const schemaSelect = screen.getByRole('combobox', {
-      name: 'Select a schema',
-    });
-    const dropdown = screen.getByText(/Select a table/i);
     const abUser = screen.getByText(/ab_user/i);
     expect(dbSelect).toBeInTheDocument();
     expect(schemaSelect).toBeInTheDocument();

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

@@ -18,19 +18,19 @@
  */
 import React from 'react';
 import { t, supersetTheme } from '@superset-ui/core';
-import Icons, { IconType } from 'src/components/Icons';
+import Icons from 'src/components/Icons';
 import { Tooltip } from 'src/components/Tooltip';
 
 export interface CertifiedIconProps {
   certifiedBy?: string;
   details?: string;
-  size?: IconType['iconSize'];
+  size?: number;
 }
 
 function CertifiedIcon({
   certifiedBy,
   details,
-  size = 'l',
+  size = 24,
 }: CertifiedIconProps) {
   return (
     <Tooltip
@@ -48,7 +48,8 @@ function CertifiedIcon({
     >
       <Icons.Certified
         iconColor={supersetTheme.colors.primary.base}
-        iconSize={size}
+        height={size}
+        width={size}
       />
     </Tooltip>
   );

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

@@ -26,11 +26,11 @@ import DatabaseSelector from '.';
 const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
 
 const createProps = () => ({
-  db: { id: 1, database_name: 'test', backend: 'postgresql' },
+  dbId: 1,
   formMode: false,
   isDatabaseSelectEnabled: true,
   readOnly: false,
-  schema: undefined,
+  schema: 'public',
   sqlLabMode: true,
   getDbList: jest.fn(),
   getTableList: jest.fn(),
@@ -129,7 +129,7 @@ beforeEach(() => {
               changed_on: '2021-03-09T19:02:07.141095',
               changed_on_delta_humanized: 'a day ago',
               created_by: null,
-              database_name: 'test',
+              database_name: 'examples',
               explore_database_id: 1,
               expose_in_sqllab: true,
               force_ctas_schema: null,
@@ -153,62 +153,50 @@ test('Refresh should work', async () => {
 
   render(<DatabaseSelector {...props} />);
 
-  const select = screen.getByRole('combobox', {
-    name: 'Select a schema',
-  });
-
-  userEvent.click(select);
-
-  await waitFor(() => {
-    expect(SupersetClientGet).toBeCalledTimes(1);
-    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' }));
-
   await waitFor(() => {
     expect(SupersetClientGet).toBeCalledTimes(2);
-    expect(props.getDbList).toBeCalledTimes(0);
+    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.onSchemasLoad).toBeCalledTimes(1);
     expect(props.onUpdate).toBeCalledTimes(0);
   });
+
+  userEvent.click(screen.getByRole('button'));
+
+  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(1);
+    expect(props.onSchemaChange).toBeCalledTimes(1);
+    expect(props.onSchemasLoad).toBeCalledTimes(2);
+    expect(props.onUpdate).toBeCalledTimes(1);
+  });
 });
 
 test('Should database select display options', async () => {
   const props = createProps();
   render(<DatabaseSelector {...props} />);
-  const select = screen.getByRole('combobox', {
+  const selector = await screen.findByText('Database:');
-    name: 'Select a database',
+  expect(selector).toBeInTheDocument();
-  });
+  expect(selector.parentElement).toHaveTextContent(
-  expect(select).toBeInTheDocument();
+    'Database:postgresql examples',
-  userEvent.click(select);
+  );
-  expect(
-    await screen.findByRole('option', { name: 'postgresql: test' }),
-  ).toBeInTheDocument();
 });
 
 test('Should schema select display options', async () => {
   const props = createProps();
   render(<DatabaseSelector {...props} />);
-  const select = screen.getByRole('combobox', {
+
-    name: 'Select a schema',
+  const selector = await screen.findByText('Schema:');
-  });
+  expect(selector).toBeInTheDocument();
-  expect(select).toBeInTheDocument();
+  expect(selector.parentElement).toHaveTextContent('Schema: public');
-  userEvent.click(select);
+
-  expect(
+  userEvent.click(screen.getByRole('button'));
-    await screen.findByRole('option', { name: 'public' }),
+
-  ).toBeInTheDocument();
+  expect(await screen.findByText('Select a schema (2)')).toBeInTheDocument();
-  expect(
-    await screen.findByRole('option', { name: 'information_schema' }),
-  ).toBeInTheDocument();
 });

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

@@ -16,51 +16,58 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ReactNode, useState, useMemo } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { styled, SupersetClient, t } from '@superset-ui/core';
 import rison from 'rison';
-import { Select } from 'src/components';
+import { Select } from 'src/components/Select';
-import { FormLabel } from 'src/components/Form';
+import Label from 'src/components/Label';
 import RefreshLabel from 'src/components/RefreshLabel';
+import SupersetAsyncSelect from 'src/components/AsyncSelect';
 
-const DatabaseSelectorWrapper = styled.div`
+const FieldTitle = styled.p`
-  ${({ theme }) => `
+  color: ${({ theme }) => theme.colors.secondary.light2};
-    .refresh {
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
-      display: flex;
+  margin: 20px 0 10px 0;
-      align-items: center;
+  text-transform: uppercase;
-      width: 30px;
-      margin-left: ${theme.gridUnit}px;
-      margin-top: ${theme.gridUnit * 5}px;
-    }
-
-    .section {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .select {
-      flex: 1;
-    }
-
-    & > div {
-      margin-bottom: ${theme.gridUnit * 4}px;
-    }
-  `}
 `;
 
-type DatabaseValue = { label: string; value: number };
+const DatabaseSelectorWrapper = styled.div`
+  .fa-refresh {
+    padding-left: 9px;
+  }
 
-type SchemaValue = { label: string; value: string };
+  .refresh-col {
+    display: flex;
+    align-items: center;
+    width: 30px;
+    margin-left: ${({ theme }) => theme.gridUnit}px;
+  }
+
+  .section {
+    padding-bottom: 5px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .select {
+    flex-grow: 1;
+  }
+`;
+
+const DatabaseOption = styled.span`
+  display: inline-flex;
+  align-items: center;
+`;
 
 interface DatabaseSelectorProps {
-  db?: { id: number; database_name: string; backend: string };
+  dbId: number;
   formMode?: boolean;
   getDbList?: (arg0: any) => {};
+  getTableList?: (dbId: number, schema: string, force: boolean) => {};
   handleError: (msg: string) => void;
   isDatabaseSelectEnabled?: boolean;
   onDbChange?: (db: any) => void;
-  onSchemaChange?: (schema?: string) => void;
+  onSchemaChange?: (arg0?: any) => {};
   onSchemasLoad?: (schemas: Array<object>) => void;
   readOnly?: boolean;
   schema?: string;
@@ -76,9 +83,10 @@ interface DatabaseSelectorProps {
 }
 
 export default function DatabaseSelector({
-  db,
+  dbId,
   formMode = false,
   getDbList,
+  getTableList,
   handleError,
   isDatabaseSelectEnabled = true,
   onUpdate,
@@ -89,189 +97,193 @@ export default function DatabaseSelector({
   schema,
   sqlLabMode = false,
 }: DatabaseSelectorProps) {
-  const [currentDb, setCurrentDb] = useState(
+  const [currentDbId, setCurrentDbId] = useState(dbId);
-    db
+  const [currentSchema, setCurrentSchema] = useState<string | undefined>(
-      ? { label: `${db.backend}: ${db.database_name}`, value: db.id }
+    schema,
-      : undefined,
   );
-  const [currentSchema, setCurrentSchema] = useState<SchemaValue | undefined>(
+  const [schemaLoading, setSchemaLoading] = useState(false);
-    schema ? { label: schema, value: schema } : undefined,
+  const [schemaOptions, setSchemaOptions] = useState([]);
-  );
-  const [refresh, setRefresh] = useState(0);
 
-  const loadSchemas = useMemo(
+  function fetchSchemas(databaseId: number, forceRefresh = false) {
-    () => async (): Promise<{
+    const actualDbId = databaseId || dbId;
-      data: SchemaValue[];
+    if (actualDbId) {
-      totalCount: number;
+      setSchemaLoading(true);
-    }> => {
+      const queryParams = rison.encode({
-      if (currentDb) {
+        force: Boolean(forceRefresh),
-        const queryParams = rison.encode({ force: refresh > 0 });
+      });
-        const endpoint = `/api/v1/database/${currentDb.value}/schemas/?q=${queryParams}`;
+      const endpoint = `/api/v1/database/${actualDbId}/schemas/?q=${queryParams}`;
-
+      return SupersetClient.get({ endpoint })
-        // TODO: Would be nice to add pagination in a follow-up. Needs endpoint changes.
+        .then(({ json }) => {
-        return SupersetClient.get({ endpoint }).then(({ json }) => {
           const options = json.result.map((s: string) => ({
             value: s,
             label: s,
             title: s,
           }));
+          setSchemaOptions(options);
+          setSchemaLoading(false);
           if (onSchemasLoad) {
             onSchemasLoad(options);
           }
-          return {
+        })
-            data: options,
+        .catch(() => {
-            totalCount: options.length,
+          setSchemaOptions([]);
-          };
+          setSchemaLoading(false);
+          handleError(t('Error while fetching schema list'));
         });
-      }
+    }
-      return {
+    return Promise.resolve();
-        data: [],
+  }
-        totalCount: 0,
-      };
-    },
-    [currentDb, refresh, onSchemasLoad],
-  );
 
-  function onSelectChange({
+  useEffect(() => {
-    db,
+    if (currentDbId) {
-    schema,
+      fetchSchemas(currentDbId);
-  }: {
+    }
-    db: DatabaseValue;
+  }, [currentDbId]);
-    schema?: SchemaValue;
+
-  }) {
+  function onSelectChange({ dbId, schema }: { dbId: number; schema?: string }) {
-    setCurrentDb(db);
+    setCurrentDbId(dbId);
     setCurrentSchema(schema);
     if (onUpdate) {
-      onUpdate({
+      onUpdate({ dbId, schema, tableName: undefined });
-        dbId: db.value,
-        schema: schema?.value,
-        tableName: undefined,
-      });
     }
   }
 
-  function changeDataBase(selectedValue: DatabaseValue) {
+  function dbMutator(data: any) {
-    const actualDb = selectedValue || db;
+    if (getDbList) {
+      getDbList(data.result);
+    }
+    if (data.result.length === 0) {
+      handleError(t("It seems you don't have access to any database"));
+    }
+    return data.result.map((row: any) => ({
+      ...row,
+      // label is used for the typeahead
+      label: `${row.backend} ${row.database_name}`,
+    }));
+  }
+
+  function changeDataBase(db: any, force = false) {
+    const dbId = db ? db.id : null;
+    setSchemaOptions([]);
     if (onSchemaChange) {
-      onSchemaChange(undefined);
+      onSchemaChange(null);
     }
     if (onDbChange) {
       onDbChange(db);
     }
-    onSelectChange({ db: actualDb, schema: undefined });
+    fetchSchemas(dbId, force);
+    onSelectChange({ dbId, schema: undefined });
   }
 
-  function changeSchema(schema: SchemaValue) {
+  function changeSchema(schemaOpt: any, force = false) {
+    const schema = schemaOpt ? schemaOpt.value : null;
     if (onSchemaChange) {
-      onSchemaChange(schema.value);
+      onSchemaChange(schema);
     }
-    if (currentDb) {
+    setCurrentSchema(schema);
-      onSelectChange({ db: currentDb, schema });
+    onSelectChange({ dbId: currentDbId, schema });
+    if (getTableList) {
+      getTableList(currentDbId, schema, force);
     }
   }
 
+  function renderDatabaseOption(db: any) {
+    return (
+      <DatabaseOption title={db.database_name}>
+        <Label type="default">{db.backend}</Label> {db.database_name}
+      </DatabaseOption>
+    );
+  }
+
   function renderSelectRow(select: ReactNode, refreshBtn: ReactNode) {
     return (
       <div className="section">
         <span className="select">{select}</span>
-        <span className="refresh">{refreshBtn}</span>
+        <span className="refresh-col">{refreshBtn}</span>
       </div>
     );
   }
 
-  const loadDatabases = useMemo(
-    () => async (
-      search: string,
-      page: number,
-      pageSize: number,
-    ): Promise<{
-      data: DatabaseValue[];
-      totalCount: number;
-    }> => {
-      const queryParams = rison.encode({
-        order_columns: 'database_name',
-        order_direction: 'asc',
-        page,
-        page_size: pageSize,
-        ...(formMode || !sqlLabMode
-          ? { filters: [{ col: 'database_name', opr: 'ct', value: search }] }
-          : {
-              filters: [
-                { col: 'database_name', opr: 'ct', value: search },
-                {
-                  col: 'expose_in_sqllab',
-                  opr: 'eq',
-                  value: true,
-                },
-              ],
-            }),
-      });
-      const endpoint = `/api/v1/database/?q=${queryParams}`;
-      return SupersetClient.get({ endpoint }).then(({ json }) => {
-        const { result } = json;
-        if (getDbList) {
-          getDbList(result);
-        }
-        if (result.length === 0) {
-          handleError(t("It seems you don't have access to any database"));
-        }
-        const options = result.map(
-          (row: { backend: string; database_name: string; id: number }) => ({
-            label: `${row.backend}: ${row.database_name}`,
-            value: row.id,
-          }),
-        );
-        return {
-          data: options,
-          totalCount: options.length,
-        };
-      });
-    },
-    [formMode, getDbList, handleError, sqlLabMode],
-  );
-
   function renderDatabaseSelect() {
+    const queryParams = rison.encode({
+      order_columns: 'database_name',
+      order_direction: 'asc',
+      page: 0,
+      page_size: -1,
+      ...(formMode || !sqlLabMode
+        ? {}
+        : {
+            filters: [
+              {
+                col: 'expose_in_sqllab',
+                opr: 'eq',
+                value: true,
+              },
+            ],
+          }),
+    });
+
     return renderSelectRow(
-      <Select
+      <SupersetAsyncSelect
-        ariaLabel={t('Select a database')}
         data-test="select-database"
-        header={<FormLabel>{t('Database')}</FormLabel>}
+        dataEndpoint={`/api/v1/database/?q=${queryParams}`}
-        onChange={changeDataBase}
+        onChange={(db: any) => changeDataBase(db)}
-        value={currentDb}
+        onAsyncError={() =>
+          handleError(t('Error while fetching database list'))
+        }
+        clearable={false}
+        value={currentDbId}
+        valueKey="id"
+        valueRenderer={(db: any) => (
+          <div>
+            <span className="text-muted m-r-5">{t('Database:')}</span>
+            {renderDatabaseOption(db)}
+          </div>
+        )}
+        optionRenderer={renderDatabaseOption}
+        mutator={dbMutator}
         placeholder={t('Select a database')}
-        disabled={!isDatabaseSelectEnabled || readOnly}
+        autoSelect
-        options={loadDatabases}
+        isDisabled={!isDatabaseSelectEnabled || readOnly}
       />,
       null,
     );
   }
 
   function renderSchemaSelect() {
-    const refreshIcon = !formMode && !readOnly && (
+    const value = schemaOptions.filter(({ value }) => currentSchema === value);
+    const refresh = !formMode && !readOnly && (
       <RefreshLabel
-        onClick={() => setRefresh(refresh + 1)}
+        onClick={() => changeDataBase({ id: dbId }, true)}
         tooltipContent={t('Force refresh schema list')}
       />
     );
 
     return renderSelectRow(
       <Select
-        ariaLabel={t('Select a schema')}
-        disabled={readOnly}
-        header={<FormLabel>{t('Schema')}</FormLabel>}
         name="select-schema"
-        placeholder={t('Select a schema')}
+        placeholder={t('Select a schema (%s)', schemaOptions.length)}
-        onChange={item => changeSchema(item as SchemaValue)}
+        options={schemaOptions}
-        options={loadSchemas}
+        value={value}
-        value={currentSchema}
+        valueRenderer={o => (
+          <div>
+            <span className="text-muted">{t('Schema:')}</span> {o.label}
+          </div>
+        )}
+        isLoading={schemaLoading}
+        autosize={false}
+        onChange={item => changeSchema(item)}
+        isDisabled={readOnly}
       />,
-      refreshIcon,
+      refresh,
     );
   }
 
   return (
     <DatabaseSelectorWrapper data-test="DatabaseSelector">
+      {formMode && <FieldTitle>{t('datasource')}</FieldTitle>}
       {renderDatabaseSelect()}
+      {formMode && <FieldTitle>{t('schema')}</FieldTitle>}
       {renderSchemaSelect()}
     </DatabaseSelectorWrapper>
   );

superset-frontend/src/components/Icons/Icon.tsx

@@ -53,21 +53,15 @@ export const Icon = (props: IconProps) => {
   const name = fileName.replace('_', '-');
 
   useEffect(() => {
-    let cancelled = false;
     async function importIcon(): Promise<void> {
       ImportedSVG.current = (
         await import(
           `!!@svgr/webpack?-svgo,+titleProp,+ref!images/icons/${fileName}.svg`
         )
       ).default;
-      if (!cancelled) {
+      setLoaded(true);
-        setLoaded(true);
-      }
     }
     importIcon();
-    return () => {
-      cancelled = true;
-    };
   }, [fileName, ImportedSVG]);
 
   return (

superset-frontend/src/components/Select/Select.tsx

@@ -86,9 +86,12 @@ const StyledContainer = styled.div`
   flex-direction: column;
 `;
 
-const StyledSelect = styled(AntdSelect)`
+const StyledSelect = styled(AntdSelect, {
-  ${({ theme }) => `
+  shouldForwardProp: prop => prop !== 'hasHeader',
+})<{ hasHeader: boolean }>`
+  ${({ theme, hasHeader }) => `
     width: 100%;
+    margin-top: ${hasHeader ? theme.gridUnit : 0}px;
 
     && .ant-select-selector {
       border-radius: ${theme.gridUnit}px;
@@ -186,7 +189,6 @@ const Select = ({
     : 'multiple';
 
   useEffect(() => {
-    fetchedQueries.current.clear();
     setSelectOptions(
       options && Array.isArray(options) ? options : EMPTY_OPTIONS,
     );
@@ -364,45 +366,34 @@ const Select = ({
     [options],
   );
 
-  const handleOnSearch = useMemo(
+  const handleOnSearch = debounce((search: string) => {
-    () =>
+    const searchValue = search.trim();
-      debounce((search: string) => {
+    // enables option creation
-        const searchValue = search.trim();
+    if (allowNewOptions && isSingleMode) {
-        // enables option creation
+      const firstOption = selectOptions.length > 0 && selectOptions[0].value;
-        if (allowNewOptions && isSingleMode) {
+      // replaces the last search value entered with the new one
-          const firstOption =
+      // only when the value wasn't part of the original options
-            selectOptions.length > 0 && selectOptions[0].value;
+      if (
-          // replaces the last search value entered with the new one
+        searchValue &&
-          // only when the value wasn't part of the original options
+        firstOption === searchedValue &&
-          if (
+        !initialOptions.find(o => o.value === searchedValue)
-            searchValue &&
+      ) {
-            firstOption === searchedValue &&
+        selectOptions.shift();
-            !initialOptions.find(o => o.value === searchedValue)
+        setSelectOptions(selectOptions);
-          ) {
+      }
-            selectOptions.shift();
+      if (searchValue && !hasOption(searchValue, selectOptions)) {
-            setSelectOptions(selectOptions);
+        const newOption = {
-          }
+          label: searchValue,
-          if (searchValue && !hasOption(searchValue, selectOptions)) {
+          value: searchValue,
-            const newOption = {
+        };
-              label: searchValue,
+        // adds a custom option
-              value: searchValue,
+        const newOptions = [...selectOptions, newOption];
-            };
+        setSelectOptions(newOptions);
-            // adds a custom option
+        setSelectValue(searchValue);
-            const newOptions = [...selectOptions, newOption];
+      }
-            setSelectOptions(newOptions);
+    }
-            setSelectValue(searchValue);
+    setSearchedValue(searchValue);
-          }
+  }, DEBOUNCE_TIMEOUT);
-        }
-        setSearchedValue(searchValue);
-      }, DEBOUNCE_TIMEOUT),
-    [
-      allowNewOptions,
-      initialOptions,
-      isSingleMode,
-      searchedValue,
-      selectOptions,
-    ],
-  );
 
   const handlePagination = (e: UIEvent<HTMLElement>) => {
     const vScroll = e.currentTarget;
@@ -495,6 +486,7 @@ const Select = ({
     <StyledContainer>
       {header}
       <StyledSelect
+        hasHeader={!!header}
         aria-label={ariaLabel || name}
         dropdownRender={dropdownRender}
         filterOption={handleFilterOption}

superset-frontend/src/components/TableSelector/TableSelector.test.jsx

@@ -0,0 +1,291 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import sinon from 'sinon';
+import fetchMock from 'fetch-mock';
+import thunk from 'redux-thunk';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+
+import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
+
+import DatabaseSelector from 'src/components/DatabaseSelector';
+import TableSelector from 'src/components/TableSelector';
+import { initialState, tables } from 'spec/javascripts/sqllab/fixtures';
+
+const mockStore = configureStore([thunk]);
+const store = mockStore(initialState);
+
+const FETCH_SCHEMAS_ENDPOINT = 'glob:*/api/v1/database/*/schemas/*';
+const GET_TABLE_ENDPOINT = 'glob:*/superset/tables/1/*/*';
+const GET_TABLE_NAMES_ENDPOINT = 'glob:*/superset/tables/1/main/*';
+
+const mockedProps = {
+  clearable: false,
+  database: { id: 1, database_name: 'main' },
+  dbId: 1,
+  formMode: false,
+  getDbList: sinon.stub(),
+  handleError: sinon.stub(),
+  horizontal: false,
+  onChange: sinon.stub(),
+  onDbChange: sinon.stub(),
+  onSchemaChange: sinon.stub(),
+  onTableChange: sinon.stub(),
+  sqlLabMode: true,
+  tableName: '',
+  tableNameSticky: true,
+};
+
+const schemaOptions = {
+  result: ['main', 'erf', 'superset'],
+};
+const selectedSchema = { label: 'main', title: 'main', value: 'main' };
+const selectedTable = {
+  extra: null,
+  label: 'birth_names',
+  schema: 'main',
+  title: 'birth_names',
+  type: undefined,
+  value: 'birth_names',
+};
+
+async function mountAndWait(props = mockedProps) {
+  const mounted = mount(<TableSelector {...props} />, {
+    context: { store },
+    wrappingComponent: ThemeProvider,
+    wrappingComponentProps: { theme: supersetTheme },
+  });
+  await waitForComponentToPaint(mounted);
+
+  return mounted;
+}
+
+describe('TableSelector', () => {
+  let wrapper;
+
+  beforeEach(async () => {
+    fetchMock.reset();
+    wrapper = await mountAndWait();
+  });
+
+  it('renders', () => {
+    expect(wrapper.find(TableSelector)).toExist();
+    expect(wrapper.find(DatabaseSelector)).toExist();
+  });
+
+  describe('change database', () => {
+    afterEach(fetchMock.resetHistory);
+    afterAll(fetchMock.reset);
+
+    it('should fetch schemas', async () => {
+      fetchMock.get(FETCH_SCHEMAS_ENDPOINT, { overwriteRoutes: true });
+      act(() => {
+        wrapper.find('[data-test="select-database"]').first().props().onChange({
+          id: 1,
+          database_name: 'main',
+        });
+      });
+      await waitForComponentToPaint(wrapper);
+      expect(fetchMock.calls(FETCH_SCHEMAS_ENDPOINT)).toHaveLength(1);
+    });
+
+    it('should fetch schema options', async () => {
+      fetchMock.get(FETCH_SCHEMAS_ENDPOINT, schemaOptions, {
+        overwriteRoutes: true,
+      });
+      act(() => {
+        wrapper.find('[data-test="select-database"]').first().props().onChange({
+          id: 1,
+          database_name: 'main',
+        });
+      });
+      await waitForComponentToPaint(wrapper);
+      wrapper.update();
+      expect(fetchMock.calls(FETCH_SCHEMAS_ENDPOINT)).toHaveLength(1);
+
+      expect(
+        wrapper.find('[name="select-schema"]').first().props().options,
+      ).toEqual([
+        { value: 'main', label: 'main', title: 'main' },
+        { value: 'erf', label: 'erf', title: 'erf' },
+        { value: 'superset', label: 'superset', title: 'superset' },
+      ]);
+    });
+
+    it('should clear table options', async () => {
+      act(() => {
+        wrapper.find('[data-test="select-database"]').first().props().onChange({
+          id: 1,
+          database_name: 'main',
+        });
+      });
+      await waitForComponentToPaint(wrapper);
+      const props = wrapper.find('[name="async-select-table"]').first().props();
+      expect(props.isDisabled).toBe(true);
+      expect(props.value).toEqual(undefined);
+    });
+  });
+
+  describe('change schema', () => {
+    beforeEach(async () => {
+      fetchMock.get(FETCH_SCHEMAS_ENDPOINT, schemaOptions, {
+        overwriteRoutes: true,
+      });
+    });
+
+    afterEach(fetchMock.resetHistory);
+    afterAll(fetchMock.reset);
+
+    it('should fetch table', async () => {
+      fetchMock.get(GET_TABLE_NAMES_ENDPOINT, { overwriteRoutes: true });
+      act(() => {
+        wrapper.find('[data-test="select-database"]').first().props().onChange({
+          id: 1,
+          database_name: 'main',
+        });
+      });
+      await waitForComponentToPaint(wrapper);
+      act(() => {
+        wrapper
+          .find('[name="select-schema"]')
+          .first()
+          .props()
+          .onChange(selectedSchema);
+      });
+      await waitForComponentToPaint(wrapper);
+      expect(fetchMock.calls(GET_TABLE_NAMES_ENDPOINT)).toHaveLength(1);
+    });
+
+    it('should fetch table options', async () => {
+      fetchMock.get(GET_TABLE_NAMES_ENDPOINT, tables, {
+        overwriteRoutes: true,
+      });
+      act(() => {
+        wrapper.find('[data-test="select-database"]').first().props().onChange({
+          id: 1,
+          database_name: 'main',
+        });
+      });
+      await waitForComponentToPaint(wrapper);
+      act(() => {
+        wrapper
+          .find('[name="select-schema"]')
+          .first()
+          .props()
+          .onChange(selectedSchema);
+      });
+      await waitForComponentToPaint(wrapper);
+      expect(
+        wrapper.find('[name="select-schema"]').first().props().value[0],
+      ).toEqual(selectedSchema);
+      expect(fetchMock.calls(GET_TABLE_NAMES_ENDPOINT)).toHaveLength(1);
+      const { options } = wrapper.find('[name="select-table"]').first().props();
+      expect({ options }).toEqual(tables);
+    });
+  });
+
+  describe('change table', () => {
+    beforeEach(async () => {
+      fetchMock.get(GET_TABLE_NAMES_ENDPOINT, tables, {
+        overwriteRoutes: true,
+      });
+    });
+
+    it('should change table value', async () => {
+      act(() => {
+        wrapper
+          .find('[name="select-schema"]')
+          .first()
+          .props()
+          .onChange(selectedSchema);
+      });
+      await waitForComponentToPaint(wrapper);
+      act(() => {
+        wrapper
+          .find('[name="select-table"]')
+          .first()
+          .props()
+          .onChange(selectedTable);
+      });
+      await waitForComponentToPaint(wrapper);
+      expect(
+        wrapper.find('[name="select-table"]').first().props().value,
+      ).toEqual('birth_names');
+    });
+
+    it('should call onTableChange with schema from table object', async () => {
+      act(() => {
+        wrapper
+          .find('[name="select-schema"]')
+          .first()
+          .props()
+          .onChange(selectedSchema);
+      });
+      await waitForComponentToPaint(wrapper);
+      act(() => {
+        wrapper
+          .find('[name="select-table"]')
+          .first()
+          .props()
+          .onChange(selectedTable);
+      });
+      await waitForComponentToPaint(wrapper);
+      expect(mockedProps.onTableChange.getCall(0).args[0]).toBe('birth_names');
+      expect(mockedProps.onTableChange.getCall(0).args[1]).toBe('main');
+    });
+  });
+
+  describe('getTableNamesBySubStr', () => {
+    afterEach(fetchMock.resetHistory);
+    afterAll(fetchMock.reset);
+
+    it('should handle empty', async () => {
+      act(() => {
+        wrapper
+          .find('[name="async-select-table"]')
+          .first()
+          .props()
+          .loadOptions();
+      });
+      await waitForComponentToPaint(wrapper);
+      const props = wrapper.find('[name="async-select-table"]').first().props();
+      expect(props.isDisabled).toBe(true);
+      expect(props.value).toEqual('');
+    });
+
+    it('should handle table name', async () => {
+      wrapper.setProps({ schema: 'main' });
+      fetchMock.get(GET_TABLE_ENDPOINT, tables, {
+        overwriteRoutes: true,
+      });
+      act(() => {
+        wrapper
+          .find('[name="async-select-table"]')
+          .first()
+          .props()
+          .loadOptions();
+      });
+      await waitForComponentToPaint(wrapper);
+      expect(fetchMock.calls(GET_TABLE_ENDPOINT)).toHaveLength(1);
+    });
+  });
+});

superset-frontend/src/components/TableSelector/TableSelector.test.tsx

@@ -1,91 +0,0 @@
-/**
- * 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.
- */
-
-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 TableSelector from '.';
-
-const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
-
-const createProps = () => ({
-  dbId: 1,
-  schema: 'test_schema',
-  handleError: jest.fn(),
-});
-
-beforeAll(() => {
-  SupersetClientGet.mockImplementation(
-    async () =>
-      ({
-        json: {
-          options: [
-            { label: 'table_a', value: 'table_a' },
-            { label: 'table_b', value: 'table_b' },
-          ],
-        },
-      } as any),
-  );
-});
-
-test('renders with default props', async () => {
-  const props = createProps();
-  render(<TableSelector {...props} />);
-  const databaseSelect = screen.getByRole('combobox', {
-    name: 'Select a database',
-  });
-  const schemaSelect = screen.getByRole('combobox', {
-    name: 'Select a database',
-  });
-  const tableSelect = screen.getByRole('combobox', {
-    name: 'Select a table',
-  });
-  await waitFor(() => {
-    expect(databaseSelect).toBeInTheDocument();
-    expect(schemaSelect).toBeInTheDocument();
-    expect(tableSelect).toBeInTheDocument();
-  });
-});
-
-test('renders table options', async () => {
-  const props = createProps();
-  render(<TableSelector {...props} />);
-  const tableSelect = screen.getByRole('combobox', {
-    name: 'Select a table',
-  });
-  userEvent.click(tableSelect);
-  expect(
-    await screen.findByRole('option', { name: 'table_a' }),
-  ).toBeInTheDocument();
-  expect(
-    await screen.findByRole('option', { name: 'table_b' }),
-  ).toBeInTheDocument();
-});
-
-test('renders disabled without schema', async () => {
-  const props = createProps();
-  render(<TableSelector {...props} schema={undefined} />);
-  const tableSelect = screen.getByRole('combobox', {
-    name: 'Select a table',
-  });
-  await waitFor(() => {
-    expect(tableSelect).toBeDisabled();
-  });
-});

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

@@ -18,49 +18,57 @@
  */
 import React, {
   FunctionComponent,
+  useEffect,
   useState,
   ReactNode,
-  useMemo,
-  useEffect,
 } from 'react';
 import { styled, SupersetClient, t } from '@superset-ui/core';
-import { Select } from 'src/components';
+import { AsyncSelect, CreatableSelect, Select } from 'src/components/Select';
+
 import { FormLabel } from 'src/components/Form';
-import Icons from 'src/components/Icons';
+
 import DatabaseSelector from 'src/components/DatabaseSelector';
 import RefreshLabel from 'src/components/RefreshLabel';
 import CertifiedIcon from 'src/components/CertifiedIcon';
 import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
 
+const FieldTitle = styled.p`
+  color: ${({ theme }) => theme.colors.secondary.light2};
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  margin: 20px 0 10px 0;
+  text-transform: uppercase;
+`;
+
 const TableSelectorWrapper = styled.div`
-  ${({ theme }) => `
+  .fa-refresh {
-    .refresh {
+    padding-left: 9px;
-      display: flex;
+  }
-      align-items: center;
-      width: 30px;
-      margin-left: ${theme.gridUnit}px;
-      margin-top: ${theme.gridUnit * 5}px;
-    }
 
-    .section {
+  .refresh-col {
-      display: flex;
+    display: flex;
-      flex-direction: row;
+    align-items: center;
-      align-items: center;
+    width: 30px;
-    }
+    margin-left: ${({ theme }) => theme.gridUnit}px;
+  }
 
-    .divider {
+  .section {
-      border-bottom: 1px solid ${theme.colors.secondary.light5};
+    padding-bottom: 5px;
-      margin: 15px 0;
+    display: flex;
-    }
+    flex-direction: row;
+  }
 
-    .table-length {
+  .select {
-      color: ${theme.colors.grayscale.light1};
+    flex-grow: 1;
-    }
+  }
 
-    .select {
+  .divider {
-      flex: 1;
+    border-bottom: 1px solid ${({ theme }) => theme.colors.secondary.light5};
-    }
+    margin: 15px 0;
-  `}
+  }
+
+  .table-length {
+    color: ${({ theme }) => theme.colors.grayscale.light1};
+  }
 `;
 
 const TableLabel = styled.span`
@@ -90,15 +98,7 @@ interface TableSelectorProps {
     schema?: string;
     tableName?: string;
   }) => void;
-  onDbChange?: (
+  onDbChange?: (db: any) => void;
-    db:
-      | {
-          id: number;
-          database_name: string;
-          backend: string;
-        }
-      | undefined,
-  ) => void;
   onSchemaChange?: (arg0?: any) => {};
   onSchemasLoad?: () => void;
   onTableChange?: (tableName: string, schema: string) => void;
@@ -110,52 +110,6 @@ interface TableSelectorProps {
   tableNameSticky?: boolean;
 }
 
-interface Table {
-  label: string;
-  value: string;
-  type: string;
-  extra?: {
-    certification?: {
-      certified_by: string;
-      details: string;
-    };
-    warning_markdown?: string;
-  };
-}
-
-interface TableOption {
-  label: JSX.Element;
-  text: string;
-  value: string;
-}
-
-const TableOption = ({ table }: { table: Table }) => {
-  const { label, type, extra } = table;
-  return (
-    <TableLabel title={label}>
-      {type === 'view' ? (
-        <Icons.Eye iconSize="m" />
-      ) : (
-        <Icons.Table iconSize="m" />
-      )}
-      {extra?.certification && (
-        <CertifiedIcon
-          certifiedBy={extra.certification.certified_by}
-          details={extra.certification.details}
-          size="l"
-        />
-      )}
-      {extra?.warning_markdown && (
-        <WarningIconWithTooltip
-          warningMarkdown={extra.warning_markdown}
-          size="l"
-        />
-      )}
-      {label}
-    </TableLabel>
-  );
-};
-
 const TableSelector: FunctionComponent<TableSelectorProps> = ({
   database,
   dbId,
@@ -175,187 +129,179 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   tableName,
   tableNameSticky = true,
 }) => {
-  const [currentDbId, setCurrentDbId] = useState<number | undefined>(dbId);
   const [currentSchema, setCurrentSchema] = useState<string | undefined>(
     schema,
   );
-  const [currentTable, setCurrentTable] = useState<TableOption | undefined>();
+  const [currentTableName, setCurrentTableName] = useState<string | undefined>(
-  const [refresh, setRefresh] = useState(0);
+    tableName,
-  const [previousRefresh, setPreviousRefresh] = useState(0);
-
-  const loadTable = useMemo(
-    () => async (dbId: number, schema: string, tableName: string) => {
-      const endpoint = encodeURI(
-        `/superset/tables/${dbId}/${schema}/${encodeURIComponent(
-          tableName,
-        )}/false/true`,
-      );
-
-      if (previousRefresh !== refresh) {
-        setPreviousRefresh(refresh);
-      }
-
-      return SupersetClient.get({ endpoint }).then(({ json }) => {
-        const options = json.options as Table[];
-        if (options && options.length > 0) {
-          return options[0];
-        }
-        return null;
-      });
-    },
-    [], // eslint-disable-line react-hooks/exhaustive-deps
   );
+  const [tableLoading, setTableLoading] = useState(false);
+  const [tableOptions, setTableOptions] = useState([]);
 
-  const loadTables = useMemo(
+  function fetchTables(
-    () => async (search: string) => {
+    databaseId?: number,
-      const dbSchema = schema || currentSchema;
+    schema?: string,
-      if (currentDbId && dbSchema) {
+    forceRefresh = false,
-        const encodedSchema = encodeURIComponent(dbSchema);
+    substr = 'undefined',
-        const encodedSubstr = encodeURIComponent(search || 'undefined');
+  ) {
-        const forceRefresh = refresh !== previousRefresh;
+    const dbSchema = schema || currentSchema;
-        const endpoint = encodeURI(
+    const actualDbId = databaseId || dbId;
-          `/superset/tables/${currentDbId}/${encodedSchema}/${encodedSubstr}/${forceRefresh}/`,
+    if (actualDbId && dbSchema) {
-        );
+      const encodedSchema = encodeURIComponent(dbSchema);
-
+      const encodedSubstr = encodeURIComponent(substr);
-        if (previousRefresh !== refresh) {
+      setTableLoading(true);
-          setPreviousRefresh(refresh);
+      setTableOptions([]);
-        }
+      const endpoint = encodeURI(
-
+        `/superset/tables/${actualDbId}/${encodedSchema}/${encodedSubstr}/${!!forceRefresh}/`,
-        return SupersetClient.get({ endpoint }).then(({ json }) => {
+      );
-          const options = json.options
+      return SupersetClient.get({ endpoint })
-            .map((table: Table) => ({
+        .then(({ json }) => {
-              value: table.value,
+          const options = json.options.map((o: any) => ({
-              label: <TableOption table={table} />,
+            value: o.value,
-              text: table.label,
+            schema: o.schema,
-            }))
+            label: o.label,
-            .sort((a: { text: string }, b: { text: string }) =>
+            title: o.title,
-              a.text.localeCompare(b.text),
+            type: o.type,
-            );
+            extra: o?.extra,
-
+          }));
+          setTableLoading(false);
+          setTableOptions(options);
           if (onTablesLoad) {
             onTablesLoad(json.options);
           }
-
+        })
-          return {
+        .catch(() => {
-            data: options,
+          setTableLoading(false);
-            totalCount: options.length,
+          setTableOptions([]);
-          };
+          handleError(t('Error while fetching table list'));
         });
-      }
+    }
-      return { data: [], totalCount: 0 };
+    setTableLoading(false);
-    },
+    setTableOptions([]);
-    // We are using the refresh state to re-trigger the query
+    return Promise.resolve();
-    // previousRefresh should be out of dependencies array
+  }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [currentDbId, currentSchema, onTablesLoad, schema, refresh],
-  );
 
   useEffect(() => {
-    async function fetchTable() {
+    if (dbId && schema) {
-      if (schema && tableName) {
+      fetchTables();
-        const table = await loadTable(dbId, schema, tableName);
-        if (table) {
-          setCurrentTable({
-            label: <TableOption table={table} />,
-            text: table.label,
-            value: table.value,
-          });
-        }
-      }
     }
-    fetchTable();
+  }, [dbId, schema]);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   function onSelectionChange({
     dbId,
     schema,
-    table,
+    tableName,
   }: {
     dbId: number;
     schema?: string;
-    table?: TableOption;
+    tableName?: string;
   }) {
-    setCurrentTable(table);
+    setCurrentTableName(tableName);
-    setCurrentDbId(dbId);
     setCurrentSchema(schema);
     if (onUpdate) {
-      onUpdate({ dbId, schema, tableName: table?.value });
+      onUpdate({ dbId, schema, tableName });
     }
   }
 
-  function changeTable(table: TableOption) {
+  function getTableNamesBySubStr(substr = 'undefined') {
-    if (!table) {
+    if (!dbId || !substr) {
-      setCurrentTable(undefined);
+      const options: any[] = [];
+      return Promise.resolve({ options });
+    }
+    const encodedSchema = encodeURIComponent(schema || '');
+    const encodedSubstr = encodeURIComponent(substr);
+    return SupersetClient.get({
+      endpoint: encodeURI(
+        `/superset/tables/${dbId}/${encodedSchema}/${encodedSubstr}`,
+      ),
+    }).then(({ json }) => {
+      const options = json.options.map((o: any) => ({
+        value: o.value,
+        schema: o.schema,
+        label: o.label,
+        title: o.title,
+        type: o.type,
+      }));
+      return { options };
+    });
+  }
+
+  function changeTable(tableOpt: any) {
+    if (!tableOpt) {
+      setCurrentTableName('');
       return;
     }
-    const tableOptTableName = table.value;
+    const schemaName = tableOpt.schema;
-    if (currentDbId && tableNameSticky) {
+    const tableOptTableName = tableOpt.value;
+    if (tableNameSticky) {
       onSelectionChange({
-        dbId: currentDbId,
+        dbId,
-        schema: currentSchema,
+        schema: schemaName,
-        table,
+        tableName: tableOptTableName,
       });
     }
-    if (onTableChange && currentSchema) {
+    if (onTableChange) {
-      onTableChange(tableOptTableName, currentSchema);
+      onTableChange(tableOptTableName, schemaName);
     }
   }
 
-  function onRefresh() {
+  function changeSchema(schemaOpt: any, force = false) {
+    const value = schemaOpt ? schemaOpt.value : null;
     if (onSchemaChange) {
-      onSchemaChange(currentSchema);
+      onSchemaChange(value);
     }
-    if (currentDbId && currentSchema) {
+    onSelectionChange({
-      onSelectionChange({
+      dbId,
-        dbId: currentDbId,
+      schema: value,
-        schema: currentSchema,
+      tableName: undefined,
-        table: currentTable,
+    });
-      });
+    fetchTables(dbId, currentSchema, force);
-    }
+  }
-    setRefresh(refresh + 1);
+
+  function renderTableOption(option: any) {
+    return (
+      <TableLabel title={option.label}>
+        <small className="text-muted">
+          <i className={`fa fa-${option.type === 'view' ? 'eye' : 'table'}`} />
+        </small>
+        {option.extra?.certification && (
+          <CertifiedIcon
+            certifiedBy={option.extra.certification.certified_by}
+            details={option.extra.certification.details}
+            size={20}
+          />
+        )}
+        {option.extra?.warning_markdown && (
+          <WarningIconWithTooltip
+            warningMarkdown={option.extra.warning_markdown}
+            size={20}
+          />
+        )}
+        {option.label}
+      </TableLabel>
+    );
   }
 
   function renderSelectRow(select: ReactNode, refreshBtn: ReactNode) {
     return (
       <div className="section">
         <span className="select">{select}</span>
-        <span className="refresh">{refreshBtn}</span>
+        <span className="refresh-col">{refreshBtn}</span>
       </div>
     );
   }
 
-  const internalDbChange = (
-    db:
-      | {
-          id: number;
-          database_name: string;
-          backend: string;
-        }
-      | undefined,
-  ) => {
-    setCurrentDbId(db?.id);
-    if (onDbChange) {
-      onDbChange(db);
-    }
-  };
-
-  const internalSchemaChange = (schema?: string) => {
-    setCurrentSchema(schema);
-    if (onSchemaChange) {
-      onSchemaChange(schema);
-    }
-  };
-
   function renderDatabaseSelector() {
     return (
       <DatabaseSelector
-        db={database}
+        dbId={dbId}
         formMode={formMode}
         getDbList={getDbList}
+        getTableList={fetchTables}
         handleError={handleError}
         onUpdate={onSelectionChange}
-        onDbChange={readOnly ? undefined : internalDbChange}
+        onDbChange={readOnly ? undefined : onDbChange}
-        onSchemaChange={readOnly ? undefined : internalSchemaChange}
+        onSchemaChange={readOnly ? undefined : onSchemaChange}
         onSchemasLoad={onSchemasLoad}
         schema={currentSchema}
         sqlLabMode={sqlLabMode}
@@ -365,54 +311,96 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
     );
   }
 
-  const handleFilterOption = useMemo(
-    () => (search: string, option: TableOption) => {
-      const searchValue = search.trim().toLowerCase();
-      const { text } = option;
-      return text.toLowerCase().includes(searchValue);
-    },
-    [],
-  );
-
   function renderTableSelect() {
-    const disabled =
+    const options = tableOptions;
-      (currentSchema && !formMode && readOnly) ||
+    let select = null;
-      (!currentSchema && !database?.allow_multi_schema_metadata_fetch);
+    if (currentSchema && !formMode) {
-
+      // dataset editor
-    const header = sqlLabMode ? (
+      select = (
-      <FormLabel>{t('See table schema')}</FormLabel>
+        <Select
-    ) : (
+          name="select-table"
-      <FormLabel>{t('Table')}</FormLabel>
+          isLoading={tableLoading}
-    );
+          ignoreAccents={false}
-
+          placeholder={t('Select table or type table name')}
-    const select = (
+          autosize={false}
-      <Select
+          onChange={changeTable}
-        ariaLabel={t('Select a table')}
+          options={options}
-        disabled={disabled}
+          // @ts-ignore
-        filterOption={handleFilterOption}
+          value={currentTableName}
-        header={header}
+          optionRenderer={renderTableOption}
-        name="select-table"
+          valueRenderer={renderTableOption}
-        onChange={changeTable}
+          isDisabled={readOnly}
-        options={loadTables}
+        />
-        placeholder={t('Select a table')}
+      );
-        value={currentTable}
+    } else if (formMode) {
-      />
+      select = (
-    );
+        <CreatableSelect
-
+          name="select-table"
+          isLoading={tableLoading}
+          ignoreAccents={false}
+          placeholder={t('Select table or type table name')}
+          autosize={false}
+          onChange={changeTable}
+          options={options}
+          // @ts-ignore
+          value={currentTableName}
+          optionRenderer={renderTableOption}
+        />
+      );
+    } else {
+      // sql lab
+      let tableSelectPlaceholder;
+      let tableSelectDisabled = false;
+      if (database && database.allow_multi_schema_metadata_fetch) {
+        tableSelectPlaceholder = t('Type to search ...');
+      } else {
+        tableSelectPlaceholder = t('Select table ');
+        tableSelectDisabled = true;
+      }
+      select = (
+        <AsyncSelect
+          name="async-select-table"
+          placeholder={tableSelectPlaceholder}
+          isDisabled={tableSelectDisabled}
+          autosize={false}
+          onChange={changeTable}
+          // @ts-ignore
+          value={currentTableName}
+          loadOptions={getTableNamesBySubStr}
+          optionRenderer={renderTableOption}
+        />
+      );
+    }
     const refresh = !formMode && !readOnly && (
       <RefreshLabel
-        onClick={onRefresh}
+        onClick={() => changeSchema({ value: schema }, true)}
         tooltipContent={t('Force refresh table list')}
       />
     );
-
     return renderSelectRow(select, refresh);
   }
 
+  function renderSeeTableLabel() {
+    return (
+      <div className="section">
+        <FormLabel>
+          {t('See table schema')}{' '}
+          {schema && (
+            <small className="table-length">
+              {tableOptions.length} in {schema}
+            </small>
+          )}
+        </FormLabel>
+      </div>
+    );
+  }
+
   return (
     <TableSelectorWrapper>
       {renderDatabaseSelector()}
-      {sqlLabMode && !formMode && <div className="divider" />}
+      {!formMode && <div className="divider" />}
+      {sqlLabMode && renderSeeTableLabel()}
+      {formMode && <FieldTitle>{t('Table')}</FieldTitle>}
       {renderTableSelect()}
     </TableSelectorWrapper>
   );

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

@@ -18,17 +18,16 @@
  */
 import React from 'react';
 import { useTheme, SafeMarkdown } from '@superset-ui/core';
-import Icons, { IconType } from 'src/components/Icons';
+import Icons from 'src/components/Icons';
 import { Tooltip } from 'src/components/Tooltip';
 
 export interface WarningIconWithTooltipProps {
   warningMarkdown: string;
-  size?: IconType['iconSize'];
+  size?: number;
 }
 
 function WarningIconWithTooltip({
   warningMarkdown,
-  size,
 }: WarningIconWithTooltipProps) {
   const theme = useTheme();
   return (
@@ -38,7 +37,6 @@ function WarningIconWithTooltip({
     >
       <Icons.AlertSolid
         iconColor={theme.colors.alert.base}
-        iconSize={size}
         css={{ marginRight: theme.gridUnit * 2 }}
       />
     </Tooltip>

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -775,47 +775,41 @@ class DatasourceEditor extends React.PureComponent {
             <div>
               {this.state.isSqla && (
                 <>
-                  <Col xs={24} md={12}>
+                  <Field
-                    <Field
+                    fieldKey="databaseSelector"
-                      fieldKey="databaseSelector"
+                    label={t('virtual')}
-                      label={t('virtual')}
+                    control={
-                      control={
+                      <DatabaseSelector
-                        <div css={{ marginTop: 8 }}>
+                        dbId={datasource.database.id}
-                          <DatabaseSelector
+                        schema={datasource.schema}
-                            db={datasource?.database}
+                        onSchemaChange={schema =>
-                            schema={datasource.schema}
+                          this.state.isEditMode &&
-                            onSchemaChange={schema =>
+                          this.onDatasourcePropChange('schema', schema)
-                              this.state.isEditMode &&
-                              this.onDatasourcePropChange('schema', schema)
-                            }
-                            onDbChange={database =>
-                              this.state.isEditMode &&
-                              this.onDatasourcePropChange('database', database)
-                            }
-                            formMode={false}
-                            handleError={this.props.addDangerToast}
-                            readOnly={!this.state.isEditMode}
-                          />
-                        </div>
-                      }
-                    />
-                    <div css={{ width: 'calc(100% - 34px)', marginTop: -16 }}>
-                      <Field
-                        fieldKey="table_name"
-                        label={t('Dataset name')}
-                        control={
-                          <TextControl
-                            controlId="table_name"
-                            onChange={table => {
-                              this.onDatasourcePropChange('table_name', table);
-                            }}
-                            placeholder={t('Dataset name')}
-                            disabled={!this.state.isEditMode}
-                          />
                         }
+                        onDbChange={database =>
+                          this.state.isEditMode &&
+                          this.onDatasourcePropChange('database', database)
+                        }
+                        formMode={false}
+                        handleError={this.props.addDangerToast}
+                        readOnly={!this.state.isEditMode}
                       />
-                    </div>
+                    }
-                  </Col>
+                  />
+                  <Field
+                    fieldKey="table_name"
+                    label={t('Dataset name')}
+                    control={
+                      <TextControl
+                        controlId="table_name"
+                        onChange={table => {
+                          this.onDatasourcePropChange('table_name', table);
+                        }}
+                        placeholder={t('Dataset name')}
+                        disabled={!this.state.isEditMode}
+                      />
+                    }
+                  />
                   <Field
                     fieldKey="sql"
                     label={t('SQL')}
@@ -859,39 +853,33 @@ class DatasourceEditor extends React.PureComponent {
                   fieldKey="tableSelector"
                   label={t('Physical')}
                   control={
-                    <div css={{ marginTop: 8 }}>
+                    <TableSelector
-                      <TableSelector
+                      clearable={false}
-                        clearable={false}
+                      dbId={datasource.database.id}
-                        database={datasource.database}
+                      handleError={this.props.addDangerToast}
-                        dbId={datasource.database.id}
+                      schema={datasource.schema}
-                        handleError={this.props.addDangerToast}
+                      sqlLabMode={false}
-                        schema={datasource.schema}
+                      tableName={datasource.table_name}
-                        sqlLabMode={false}
+                      onSchemaChange={
-                        tableName={datasource.table_name}
+                        this.state.isEditMode
-                        onSchemaChange={
+                          ? schema =>
-                          this.state.isEditMode
+                              this.onDatasourcePropChange('schema', schema)
-                            ? schema =>
+                          : undefined
-                                this.onDatasourcePropChange('schema', schema)
+                      }
-                            : undefined
+                      onDbChange={
-                        }
+                        this.state.isEditMode
-                        onDbChange={
+                          ? database =>
-                          this.state.isEditMode
+                              this.onDatasourcePropChange('database', database)
-                            ? database =>
+                          : undefined
-                                this.onDatasourcePropChange(
+                      }
-                                  'database',
+                      onTableChange={
-                                  database,
+                        this.state.isEditMode
-                                )
+                          ? table =>
-                            : undefined
+                              this.onDatasourcePropChange('table_name', table)
-                        }
+                          : undefined
-                        onTableChange={
+                      }
-                          this.state.isEditMode
+                      readOnly={!this.state.isEditMode}
-                            ? table =>
+                    />
-                                this.onDatasourcePropChange('table_name', table)
-                            : undefined
-                        }
-                        readOnly={!this.state.isEditMode}
-                      />
-                    </div>
                   }
                   description={t(
                     'The pointer to a physical table (or view). Keep in mind that the chart is ' +

superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx

@@ -227,7 +227,10 @@ class DatasourceControl extends React.PureComponent {
             </Tooltip>
           )}
           {extra?.warning_markdown && (
-            <WarningIconWithTooltip warningMarkdown={extra.warning_markdown} />
+            <WarningIconWithTooltip
+              warningMarkdown={extra.warning_markdown}
+              size={30}
+            />
           )}
           <Dropdown
             overlay={datasourceMenu}

superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx

@@ -243,13 +243,11 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
                   <CertifiedIcon
                     certifiedBy={parsedExtra.certification.certified_by}
                     details={parsedExtra.certification.details}
-                    size="l"
                   />
                 )}
                 {parsedExtra?.warning_markdown && (
                   <WarningIconWithTooltip
                     warningMarkdown={parsedExtra.warning_markdown}
-                    size="l"
                   />
                 )}
                 {titleLink}

superset/datasets/api.py

@@ -160,7 +160,7 @@ class DatasetRestApi(BaseSupersetModelRestApi):
         "url",
         "extra",
     ]
-    show_columns = show_select_columns + ["columns.type_generic", "database.backend"]
+    show_columns = show_select_columns + ["columns.type_generic"]
     add_model_schema = DatasetPostSchema()
     edit_model_schema = DatasetPutSchema()
     add_columns = ["database", "schema", "table_name", "owners"]

superset/views/core.py

@@ -1058,14 +1058,8 @@ class Superset(BaseSupersetView):  # pylint: disable=too-many-public-methods
     @event_logger.log_this
     @expose("/tables/<int:db_id>/<schema>/<substr>/")
     @expose("/tables/<int:db_id>/<schema>/<substr>/<force_refresh>/")
-    @expose("/tables/<int:db_id>/<schema>/<substr>/<force_refresh>/<exact_match>")
+    def tables(  # pylint: disable=too-many-locals,no-self-use
-    def tables(  # pylint: disable=too-many-locals,no-self-use,too-many-arguments
+        self, db_id: int, schema: str, substr: str, force_refresh: str = "false"
-        self,
-        db_id: int,
-        schema: str,
-        substr: str,
-        force_refresh: str = "false",
-        exact_match: str = "false",
     ) -> FlaskResponse:
         """Endpoint to fetch the list of tables for given database"""
         # Guarantees database filtering by security access
@@ -1078,7 +1072,6 @@ class Superset(BaseSupersetView):  # pylint: disable=too-many-public-methods
             return json_error_response("Not found", 404)
 
         force_refresh_parsed = force_refresh.lower() == "true"
-        exact_match_parsed = exact_match.lower() == "true"
         schema_parsed = utils.parse_js_uri_path_item(schema, eval_undefined=True)
         substr_parsed = utils.parse_js_uri_path_item(substr, eval_undefined=True)
 
@@ -1120,15 +1113,9 @@ class Superset(BaseSupersetView):  # pylint: disable=too-many-public-methods
                 ds_name.table if schema_parsed else f"{ds_name.schema}.{ds_name.table}"
             )
 
-        def is_match(src: str, target: utils.DatasourceName) -> bool:
-            target_label = get_datasource_label(target)
-            if exact_match_parsed:
-                return src == target_label
-            return src in target_label
-
         if substr_parsed:
-            tables = [tn for tn in tables if is_match(substr_parsed, tn)]
+            tables = [tn for tn in tables if substr_parsed in get_datasource_label(tn)]
-            views = [vn for vn in views if is_match(substr_parsed, vn)]
+            views = [vn for vn in views if substr_parsed in get_datasource_label(vn)]
 
         if not schema_parsed and database.default_schemas:
             user_schemas = (

tests/integration_tests/datasets/api_tests.py

@@ -222,7 +222,6 @@ class TestDatasetApi(SupersetTestCase):
         Dataset API: Test get dataset item
         """
         table = self.get_energy_usage_dataset()
-        main_db = get_main_database()
         self.login(username="admin")
         uri = f"api/v1/dataset/{table.id}"
         rv = self.get_assert_metric(uri, "get")
@@ -230,11 +229,7 @@ class TestDatasetApi(SupersetTestCase):
         response = json.loads(rv.data.decode("utf-8"))
         expected_result = {
             "cache_timeout": None,
-            "database": {
+            "database": {"database_name": "examples", "id": 1},
-                "backend": main_db.backend,
-                "database_name": "examples",
-                "id": 1,
-            },
             "default_endpoint": None,
             "description": "Energy consumption",
             "extra": None,
@@ -249,10 +244,9 @@ class TestDatasetApi(SupersetTestCase):
             "table_name": "energy_usage",
             "template_params": None,
         }
-        if response["result"]["database"]["backend"] not in ("presto", "hive"):
+        assert {
-            assert {
+            k: v for k, v in response["result"].items() if k in expected_result
-                k: v for k, v in response["result"].items() if k in expected_result
+        } == expected_result
-            } == expected_result
         assert len(response["result"]["columns"]) == 3
         assert len(response["result"]["metrics"]) == 2