feat: add empty states to sqlab editor and select

[pkdotson]

SUMMARY

This pr creates an empty state for the dropdown for the table selector and query editor when there is no database selected.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

after

Screen.Recording.2022-04-07.at.11.41.56.AM.mov

TESTING INSTRUCTIONS

Go to sql editor. If there is no db selected to query there should be an empty state for the query editor. If there is no db connected to db select dropdown should show empty state with link to foward user to db listview.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[michael-s-molina]

@pkdotson The Select has a property called notFoundContent that can be used to implement this behavior. Keep in mind that if a user searches for a database and none is found, the same screen will appear. So I recommend a more generic message like "No databases found" instead of "There are no database available"

[michael-s-molina]

@pkdotson Tip: If you leave a blank line before the video URL in the PR description, Github will show the video instead of the URL.

after
<blank_line> <--- insert a blank line
https://user-images.githubusercontent.com/17326228/162277445-cefc2bdf-6ee5-4ce4-912d-dafb85dda4fc.mov

[michael-s-molina]

@pkdotson The DatabaseSelector is a generic component meant to be used by multiple modules. That's why it's inside src/components. You shouldn't add SQL Lab specific logic inside this component like you're doing when interacting with Redux. All this logic should be encapsulated in a SQL Lab component that uses the DatabaseSelector and pass a notFoundContent property when applicable.

[pkdotson]

@pkdotson The DatabaseSelector is a generic component meant to be used by multiple modules. That's why it's inside src/components. You shouldn't add SQL Lab specific logic inside this component like you're doing when interacting with Redux. All this logic should be encapsulated in a SQL Lab component that uses the DatabaseSelector and pass a notFoundContent property when applicable.

But this component is only being used in Sqllab and used in changing the database. It makes sense for the action to happen here as this where that action is happening.

[michael-s-molina]

But this component is only being used in Sqllab and used in changing the database. It makes sense for the action to happen here as this where that action is happening.

This component is also used by Explore and the dataset listing.

[codecov]

Codecov Report

Merging #19598 (783a4f7) into master (94e06c2) will increase coverage by 0.00%.
The diff coverage is 66.94%.

❗ Current head 783a4f7 differs from pull request most recent head b628c7c. Consider uploading reports for the commit b628c7c to get more accurate results

@@           Coverage Diff           @@
##           master   #19598   +/-   ##
=======================================
  Coverage   66.51%   66.51%           
=======================================
  Files        1684     1687    +3     
  Lines       64560    64622   +62     
  Branches     6625     6646   +21     
=======================================
+ Hits        42939    42982   +43     
- Misses      19926    19940   +14     
- Partials     1695     1700    +5     

Flag	Coverage Δ
javascript	51.19% <65.13%> (+0.04%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...d/packages/superset-ui-core/src/models/Registry.ts	100.00% <ø> (ø)
...superset-ui-core/src/query/types/PostProcessing.ts	100.00% <ø> (ø)
...d/src/SqlLab/components/TabbedSqlEditors/index.jsx	56.11% <0.00%> (-1.42%)	⬇️
...rset-frontend/src/components/ReportModal/index.tsx	78.46% <ø> (ø)
superset-frontend/src/components/Select/Select.tsx	87.28% <ø> (ø)
...et-frontend/src/components/TableSelector/index.tsx	75.55% <ø> (ø)
superset-frontend/src/dashboard/constants.ts	100.00% <ø> (ø)
superset-frontend/src/views/components/SubMenu.tsx	85.96% <ø> (ø)
superset/common/query_context_processor.py	90.65% <ø> (ø)
superset/connectors/sqla/models.py	89.45% <ø> (ø)
... and 27 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 94e06c2...b628c7c. Read the comment docs.

[jinghua-qa]

/testenv up

[github-actions]

@jinghua-qa Ephemeral environment spinning up at http://34.222.138.157:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[michael-s-molina]

LGTM. Thanks for addressing the comments @pkdotson! I added more non-blocking suggestions regarding the names of the variables.

Here's the Git diff to fix the DatabaseSelector.test.tsx

diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
index de152cacb..272249b54 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,7 @@ 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();
 });

[yousoph]

/testenv up

[github-actions]

@yousoph Ephemeral environment spinning up at http://34.222.112.28:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[yousoph]

/testenv up

[github-actions]

@yousoph Ephemeral environment spinning up at http://34.219.6.87:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[sadpandajoe]

🏷️ preset:2022.15