feat: add empty states to sqlab editor and select #19598

pkdotson · 2022-04-07T19:02:32Z

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 · 2022-04-07T19:22:56Z

@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.

superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

pkdotson · 2022-04-11T18:14:25Z

@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 · 2022-04-11T18:17:06Z

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.

…eat-blackstate-sql1

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

codecov · 2022-04-12T03:16:32Z

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 · 2022-04-12T16:28:57Z

/testenv up

github-actions · 2022-04-12T17:13:00Z

@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.

…eat-blackstate-sql1

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();
 });

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

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

yousoph · 2022-04-15T17:00:36Z

/testenv up

github-actions · 2022-04-15T17:04:55Z

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

….tsx Co-authored-by: Michael S. Molina <[email protected]>

yousoph · 2022-04-15T19:04:09Z

/testenv up

github-actions · 2022-04-15T19:08:16Z

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

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

…uperset into feat-blackstate-sql1

github-actions · 2022-04-15T22:09:28Z

Ephemeral environment shutdown and build artifacts deleted.

* feat: add empty states to sqlab editor and select * add suggestions and test * update type * lint fix and add suggestions * fix typo * run lint * remove unused code * fix test * remove redux for propagation and other suggestions * add t * lint * fix text and remove code * ts and fix t in p * fix spelling * remove unused prop * add fn to prop change state * remove unused code * remove unused types * update code and test * fix lint * fix ts * update ts * add type export and fix test * Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Co-authored-by: Michael S. Molina <[email protected]> * Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Co-authored-by: Michael S. Molina <[email protected]> * Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Co-authored-by: Michael S. Molina <[email protected]> * Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Co-authored-by: Michael S. Molina <[email protected]> * remove handlerror and unused code Co-authored-by: Michael S. Molina <[email protected]>

sadpandajoe · 2022-04-18T22:41:12Z

🏷️ preset:2022.15

* feat: add empty states to sqlab editor and select * add suggestions and test * update type * lint fix and add suggestions * fix typo * run lint * remove unused code * fix test * remove redux for propagation and other suggestions * add t * lint * fix text and remove code * ts and fix t in p * fix spelling * remove unused prop * add fn to prop change state * remove unused code * remove unused types * update code and test * fix lint * fix ts * update ts * add type export and fix test * Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Co-authored-by: Michael S. Molina <[email protected]> * Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Co-authored-by: Michael S. Molina <[email protected]> * Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Co-authored-by: Michael S. Molina <[email protected]> * Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Co-authored-by: Michael S. Molina <[email protected]> * remove handlerror and unused code Co-authored-by: Michael S. Molina <[email protected]>

feat: add empty states to sqlab editor and select

7dadc58

pkdotson requested review from michael-s-molina and geido as code owners April 7, 2022 19:02

superset-github-bot bot added the preset-io label Apr 7, 2022

pull-request-size bot added the size/M label Apr 7, 2022

michael-s-molina requested changes Apr 7, 2022

View reviewed changes

add suggestions and test

d9984ea

pkdotson requested a review from michael-s-molina April 11, 2022 17:43

update type

aa5e8bc

pull-request-size bot added size/L and removed size/M labels Apr 11, 2022

michael-s-molina requested changes Apr 11, 2022

View reviewed changes

superset-frontend/src/SqlLab/components/SqlEditor/index.jsx Outdated Show resolved Hide resolved

pkdotson added 2 commits April 11, 2022 11:21

Merge branch 'master' of https://github.com/preset-io/superset into f…

5d04b36

…eat-blackstate-sql1

lint fix and add suggestions

cd4abf9

pkdotson requested a review from michael-s-molina April 11, 2022 22:32

pkdotson added 3 commits April 11, 2022 15:37

fix typo

e417d79

run lint

d088f14

remove unused code

68d5827

hughhhh reviewed Apr 11, 2022

View reviewed changes

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Outdated Show resolved Hide resolved

betodealmeida reviewed Apr 12, 2022

View reviewed changes

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Outdated Show resolved Hide resolved

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx Outdated Show resolved Hide resolved

fix test

bae0137

pkdotson added 3 commits April 13, 2022 10:10

remove redux for propagation and other suggestions

bdcda07

add t

efcdf4b

Merge branch 'master' of https://github.com/preset-io/superset into f…

7f15b18

…eat-blackstate-sql1

pkdotson added 4 commits April 14, 2022 10:19

remove unused types

a5c5bf2

update code and test

c705ce6

fix lint

94d3485

fix ts

d222fea

pkdotson requested review from michael-s-molina, hughhhh and betodealmeida April 15, 2022 04:51

michael-s-molina approved these changes Apr 15, 2022

View reviewed changes

update ts

66e9c46

add type export and fix test

8bd7cf6

pkdotson requested a review from ktmud as a code owner April 15, 2022 18:01

pkdotson and others added 4 commits April 15, 2022 11:03

Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index…

9adc5ea

….tsx Co-authored-by: Michael S. Molina <[email protected]>

Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index…

2a4995c

….tsx Co-authored-by: Michael S. Molina <[email protected]>

Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index…

8217c2c

….tsx Co-authored-by: Michael S. Molina <[email protected]>

Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index…

925e107

….tsx Co-authored-by: Michael S. Molina <[email protected]>

michael-s-molina reviewed Apr 15, 2022

View reviewed changes

superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx Outdated Show resolved Hide resolved

pkdotson added 2 commits April 15, 2022 13:20

remove handlerror and unused code

bf36826

Merge branch 'feat-blackstate-sql1' of https://github.com/preset-io/s…

b628c7c

…uperset into feat-blackstate-sql1

pkdotson merged commit 06ec88e into apache:master Apr 15, 2022

superset-github-bot bot added the preset:2022.15 label Apr 18, 2022

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add empty states to sqlab editor and select #19598

feat: add empty states to sqlab editor and select #19598

pkdotson commented Apr 7, 2022 •

edited by michael-s-molina

Loading

michael-s-molina left a comment

michael-s-molina commented Apr 7, 2022

michael-s-molina left a comment

pkdotson commented Apr 11, 2022

michael-s-molina commented Apr 11, 2022

codecov bot commented Apr 12, 2022 •

edited

Loading

jinghua-qa commented Apr 12, 2022

github-actions bot commented Apr 12, 2022

michael-s-molina left a comment •

edited

Loading

yousoph commented Apr 15, 2022

github-actions bot commented Apr 15, 2022

yousoph commented Apr 15, 2022

github-actions bot commented Apr 15, 2022

github-actions bot commented Apr 15, 2022

sadpandajoe commented Apr 18, 2022

feat: add empty states to sqlab editor and select #19598

feat: add empty states to sqlab editor and select #19598

Conversation

pkdotson commented Apr 7, 2022 • edited by michael-s-molina Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

michael-s-molina left a comment

Choose a reason for hiding this comment

michael-s-molina commented Apr 7, 2022

michael-s-molina left a comment

Choose a reason for hiding this comment

pkdotson commented Apr 11, 2022

michael-s-molina commented Apr 11, 2022

codecov bot commented Apr 12, 2022 • edited Loading

Codecov Report

jinghua-qa commented Apr 12, 2022

github-actions bot commented Apr 12, 2022

michael-s-molina left a comment • edited Loading

Choose a reason for hiding this comment

yousoph commented Apr 15, 2022

github-actions bot commented Apr 15, 2022

yousoph commented Apr 15, 2022

github-actions bot commented Apr 15, 2022

github-actions bot commented Apr 15, 2022

sadpandajoe commented Apr 18, 2022

pkdotson commented Apr 7, 2022 •

edited by michael-s-molina

Loading

codecov bot commented Apr 12, 2022 •

edited

Loading

michael-s-molina left a comment •

edited

Loading