feat: Create dataset blank state #21058

lyndsiWilliams · 2022-08-11T13:08:33Z

SUMMARY

This PR implements:

A blank state for datasets in the center DatasetPanel that links to SQL Lab
A blank state for database tables in the LeftPanel
A dataset layout component that accepts smaller components as parameters and aligns the components properly on the page
- This will come in handy when we need to design the "edit dataset" page

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE:

AFTER:

TESTING INSTRUCTIONS

Go to http://localhost:9000/dataset/add/?testing
Observe the blank states in the correct page layout

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

codecov · 2022-08-11T13:27:24Z

Codecov Report

Merging #21058 (a0a31b5) into master (4f1996d) will increase coverage by 0.09%.
The diff coverage is 73.01%.

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

@@            Coverage Diff             @@
##           master   #21058      +/-   ##
==========================================
+ Coverage   66.27%   66.36%   +0.09%     
==========================================
  Files        1769     1775       +6     
  Lines       67475    67726     +251     
  Branches     7171     7223      +52     
==========================================
+ Hits        44716    44948     +232     
- Misses      20928    20934       +6     
- Partials     1831     1844      +13

Flag	Coverage Δ
javascript	`52.19% <72.80%> (+0.18%)`	⬆️

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

Impacted Files	Coverage Δ
...-chart-controls/src/sections/advancedAnalytics.tsx	`14.28% <ø> (ø)`
...packages/superset-ui-core/src/query/types/Query.ts	`100.00% <ø> (ø)`
...set-ui-core/src/ui-overrides/ExtensionsRegistry.ts	`100.00% <ø> (ø)`
...ns/plugin-chart-echarts/src/Gauge/EchartsGauge.tsx	`0.00% <0.00%> (ø)`
...ns/plugin-chart-echarts/src/Gauge/controlPanel.tsx	`66.66% <ø> (ø)`
...nd/plugins/plugin-chart-echarts/src/Gauge/types.ts	`100.00% <ø> (ø)`
...rts/src/MixedTimeseries/EchartsMixedTimeseries.tsx	`0.00% <0.00%> (ø)`
...hart-echarts/src/MixedTimeseries/transformProps.ts	`0.00% <0.00%> (ø)`
...chart-echarts/src/Timeseries/EchartsTimeseries.tsx	`0.00% <0.00%> (ø)`
...ns/plugin-chart-echarts/src/utils/eventHandlers.ts	`0.00% <0.00%> (ø)`
... and 84 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

pkdotson · 2022-08-12T05:12:06Z

/testenv up

github-actions · 2022-08-12T05:14:29Z

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

pkdotson · 2022-08-12T05:25:45Z

The place holders don't seem to be showing up.

AAfghahi

This looks great, I just have some questions regarding overall strucutre and a small nit in regards to DatasetLayout naming.

AAfghahi · 2022-08-12T14:55:04Z

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

+  footer?: ReactElement<any, string | JSXElementConstructor<any>> | null;
+}
+
+export default function DatasetLayout({


is this page replacing the index.tsx for DatasetPage? If so, would it make sense that this be a) named index.tsx to follow the pattern of the other pages. b) Should we move the reducer into this file?

The DatasetLayout structures the DatasetPage, see here: https://github.com/apache/superset/pull/21058/files#diff-20b7cfe4750d43aa2c1756a68fb109b40b812464206ac3565b2c8865a5ba39e5R71-R76

This is the component we'll use to structure the edit dataset page as well, so it'll all be in the same page layout. You just need to pass in the components.

AAfghahi · 2022-08-12T14:57:46Z

superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPage.test.tsx

+import { render, screen } from 'spec/helpers/testing-library';
+import DatasetPage from 'src/views/CRUD/data/dataset/DatasetPage';
+
+describe('DatasetPage', () => {


what is the difference between DatasetPage, DatasetPanel, and DatasetLayout in this current setup?

In the original setup, I believe that DatasetPage was the overarching structure, DatasetPanel was the middle component w/table info and DatasetLayout didn't exist. It seems like DatasetLayout is replacing DatasetPage's function. Is that true? If so, does it make sense to have these three similarly named pages/what is each one doing?

DatasetPage is the whole "add dataset" page

DatasetLayout structures all of the components on the page.

DatasetPanel is the center component currently holding the "Select Dataset Source" blank state

I think if we were to rename them I'd suggest something like:

DatasetPage -> AddDatasetPage

Since there will also be an EditDatasetPage

DatasetLayout -> Either DatasetPageLayout or keep it as is, I think it describes it properly

DatasetPanel -> Could probably leave this name as is as well, but I'm open to suggestions 😁

Ok, that makes sense. Maybe we should make DatasetPage into just AddDataset. I also think that we should put DatasetLayout into its own folder, with an index.tsx and a testing file.

Good call, changed in this commit.

AAfghahi · 2022-08-12T14:58:31Z

superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx

+    <span
+      role="button"
+      onClick={() => {
+        window.location.href = `/superset/sqllab`;


worth checking w/ @yousoph if we want this to open into a new tab or in the same page. For context, currently it opens in the same tab, which I prefer.

The figma says same tab here.

lyndsiWilliams · 2022-08-12T15:24:43Z

/testenv up

github-actions · 2022-08-12T15:28:51Z

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

lyndsiWilliams · 2022-08-12T15:41:37Z

Closing and reopening to reset ephemeral environment.

github-actions · 2022-08-12T15:41:58Z

Ephemeral environment shutdown and build artifacts deleted.

lyndsiWilliams · 2022-08-12T15:45:34Z

/testenv up

github-actions · 2022-08-12T15:46:11Z

@lyndsiWilliams Container image not yet published for this PR. Please try again when build is complete.

github-actions · 2022-08-12T15:46:12Z

@lyndsiWilliams Ephemeral environment creation failed. Please check the Actions logs for details.

lyndsiWilliams · 2022-08-12T16:34:02Z

/testenv up

lyndsiWilliams · 2022-08-17T03:45:13Z

Closing to reset ephemeral environment.

github-actions · 2022-08-17T03:46:35Z

Ephemeral environment shutdown and build artifacts deleted.

lyndsiWilliams · 2022-08-17T03:46:58Z

/testenv up

github-actions · 2022-08-17T03:57:37Z

@lyndsiWilliams Container image not yet published for this PR. Please try again when build is complete.

github-actions · 2022-08-17T03:57:37Z

@lyndsiWilliams Ephemeral environment creation failed. Please check the Actions logs for details.

lyndsiWilliams · 2022-08-17T12:33:08Z

/testenv up

github-actions · 2022-08-17T12:38:56Z

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

lyndsiWilliams · 2022-08-17T15:24:11Z

/testenv up

github-actions · 2022-08-17T17:19:08Z

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

lyndsiWilliams · 2022-08-18T03:34:19Z

/testenv up

github-actions · 2022-08-18T03:38:42Z

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

pkdotson

lgtm. can we merge?

eschutho · 2022-08-18T21:15:10Z

superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx

+  <>
+    {t('Datasets can be created from database tables or SQL queries. Select ')}
+    <br />
+    {t('a database table to the left or ')}


any reason why this isn't in a p tag and wrapping on its own?

It causes the tests to break with this error:

It did the same when I tried wrapping it in a div as well, so I broke it up since the EmptyStateBig component didn't like anything other than the fragments.

Fixed in this commit.

eschutho · 2022-08-18T21:15:34Z

superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx

+    </span>
+    {t(' to open ')}
+    <br />
+    {t('SQL Lab. From there you can save the query as a dataset.')}


Same here on these.

Fixed in this commit.

github-actions · 2022-08-22T23:45:21Z

Ephemeral environment shutdown and build artifacts deleted.

AAfghahi and others added 4 commits August 11, 2022 07:59

beginning of routing

1298c6a

elizabeth review

d1ac6b0

changed folder layout

1ccdc90

Dataset layout setup

92ebcee

pull-request-size bot added the size/L label Aug 11, 2022

lyndsiWilliams added 3 commits August 11, 2022 08:29

Fix DatasetLayout test

a879d84

Fixed height issue

d2f2337

Fix link to sqllab

78ce3d6

lyndsiWilliams changed the title ~~[WIP] feat: Create dataset blank state~~ feat: Create dataset blank state Aug 12, 2022

Fix DatasetPanel test

263601f

lyndsiWilliams marked this pull request as ready for review August 12, 2022 03:40

Remove arbitrary right panel

f697bea

AAfghahi reviewed Aug 12, 2022

View reviewed changes

Add empty state SVGs

c5c7f9e

pull-request-size bot added size/XL and removed size/L labels Aug 12, 2022

lyndsiWilliams closed this Aug 12, 2022

lyndsiWilliams reopened this Aug 12, 2022

lyndsiWilliams closed this Aug 17, 2022

lyndsiWilliams reopened this Aug 17, 2022

Fix header border

c654c4f

lyndsiWilliams added 3 commits August 17, 2022 15:48

Fix empty DatasetPanel styles

4623fce

Adjust description rendering in DatasetPanel to fix tests

0e3016d

Add spaces back to blank dataset description to fix tests

30d733a

pkdotson approved these changes Aug 18, 2022

View reviewed changes

eschutho reviewed Aug 18, 2022

View reviewed changes

Fix blank dataset description styles

ecf3314

eschutho approved these changes Aug 22, 2022

View reviewed changes

lyndsiWilliams merged commit 6094274 into master Aug 22, 2022

lyndsiWilliams deleted the lyndsi/create-dataset-blank-state branch August 23, 2022 00:59

mistercrunch added the 🚢 2.1.3 label Feb 18, 2024

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

feat: Create dataset blank state #21058

feat: Create dataset blank state #21058

Conversation

lyndsiWilliams commented Aug 11, 2022 • edited

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE:

AFTER:

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Aug 11, 2022 • edited

Codecov Report

pkdotson commented Aug 12, 2022

github-actions bot commented Aug 12, 2022

pkdotson commented Aug 12, 2022

AAfghahi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AAfghahi Aug 12, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AAfghahi Aug 12, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lyndsiWilliams commented Aug 12, 2022

github-actions bot commented Aug 12, 2022

lyndsiWilliams commented Aug 12, 2022

github-actions bot commented Aug 12, 2022

lyndsiWilliams commented Aug 12, 2022

github-actions bot commented Aug 12, 2022

github-actions bot commented Aug 12, 2022

lyndsiWilliams commented Aug 12, 2022

lyndsiWilliams commented Aug 17, 2022

github-actions bot commented Aug 17, 2022

lyndsiWilliams commented Aug 17, 2022

github-actions bot commented Aug 17, 2022

github-actions bot commented Aug 17, 2022

lyndsiWilliams commented Aug 17, 2022

github-actions bot commented Aug 17, 2022

lyndsiWilliams commented Aug 17, 2022

github-actions bot commented Aug 17, 2022

lyndsiWilliams commented Aug 18, 2022

github-actions bot commented Aug 18, 2022

pkdotson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lyndsiWilliams Aug 19, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Aug 22, 2022

lyndsiWilliams commented Aug 11, 2022 •

edited

codecov bot commented Aug 11, 2022 •

edited

AAfghahi Aug 12, 2022 •

edited

AAfghahi Aug 12, 2022 •

edited

lyndsiWilliams Aug 19, 2022 •

edited