Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Create dataset blank state #21058

Merged
merged 18 commits into from
Aug 22, 2022
Merged

Conversation

lyndsiWilliams
Copy link
Member

@lyndsiWilliams lyndsiWilliams commented Aug 11, 2022

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:

blankDatasetPageBefore

AFTER:

blankDatasetPageAfter

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
Copy link

codecov bot commented Aug 11, 2022

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

@lyndsiWilliams lyndsiWilliams changed the title [WIP] feat: Create dataset blank state feat: Create dataset blank state Aug 12, 2022
@lyndsiWilliams lyndsiWilliams marked this pull request as ready for review August 12, 2022 03:40
@pkdotson
Copy link
Member

/testenv up

@github-actions
Copy link
Contributor

@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
Copy link
Member

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

Screen Shot 2022-08-11 at 10 24 52 PM

Copy link
Member

@AAfghahi AAfghahi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

footer?: ReactElement<any, string | JSXElementConstructor<any>> | null;
}

export default function DatasetLayout({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

import { render, screen } from 'spec/helpers/testing-library';
import DatasetPage from 'src/views/CRUD/data/dataset/DatasetPage';

describe('DatasetPage', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 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 😁

Copy link
Member

@AAfghahi AAfghahi Aug 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call, changed in this commit.

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

@AAfghahi AAfghahi Aug 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The figma says same tab here.

@lyndsiWilliams
Copy link
Member Author

/testenv up

@github-actions
Copy link
Contributor

@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
Copy link
Member Author

Closing and reopening to reset ephemeral environment.

@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

@lyndsiWilliams
Copy link
Member Author

/testenv up

@github-actions
Copy link
Contributor

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

@github-actions
Copy link
Contributor

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

@lyndsiWilliams
Copy link
Member Author

/testenv up

@lyndsiWilliams
Copy link
Member Author

Closing to reset ephemeral environment.

@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

@lyndsiWilliams
Copy link
Member Author

/testenv up

@github-actions
Copy link
Contributor

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

@github-actions
Copy link
Contributor

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

@lyndsiWilliams
Copy link
Member Author

/testenv up

@github-actions
Copy link
Contributor

@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
Copy link
Member Author

/testenv up

@github-actions
Copy link
Contributor

@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
Copy link
Member Author

/testenv up

@github-actions
Copy link
Contributor

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

Copy link
Member

@pkdotson pkdotson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm. can we merge?

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

@lyndsiWilliams lyndsiWilliams Aug 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It causes the tests to break with this error:
Screen Shot 2022-08-18 at 9 13 37 PM

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in this commit.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here on these.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in this commit.

@lyndsiWilliams lyndsiWilliams merged commit 6094274 into master Aug 22, 2022
@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

@lyndsiWilliams lyndsiWilliams deleted the lyndsi/create-dataset-blank-state branch August 23, 2022 00:59
@mistercrunch 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/XL 🚢 2.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants