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.

Sign up for GitHub

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

Jump to bottom

feat(CRUD): add new empty state #19310

Merged
merged 3 commits into from
Apr 11, 2022
Merged

feat(CRUD): add new empty state #19310

merged 3 commits into from
Apr 11, 2022

Conversation

stephenLYZ
Copy link
Member

@stephenLYZ stephenLYZ commented Mar 22, 2022 •
edited
Loading

SUMMARY

This PR adds new empty state component for the CRUD pages (Dashboards, Explore, Datasets, Databases, Saved Queries, Query History, CSS Templates, Report, ExecutionLog).

  • add action button clicking on the button clears all of the applied filters
  • add custom empty state button if there is no filter, like AnnotationLayersList, user can create new annotationLayer with a + button.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

CRUD

image

AnnotationLayer with no filters

image

AnnotationLayer with filters

image

TESTING INSTRUCTIONS

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

cc @rusackas @kgabryje

@codecov
Copy link

codecov bot commented Mar 23, 2022

Codecov Report

Merging #19310 (ad7b585) into master (d3ce398) will decrease coverage by 0.01%.
The diff coverage is 46.87%.

@@            Coverage Diff             @@
##           master   #19310      +/-   ##
==========================================
- Coverage   66.62%   66.61%   -0.02%     
==========================================
  Files        1671     1671              
  Lines       64558    64577      +19     
  Branches     6505     6506       +1     
==========================================
+ Hits        43012    43017       +5     
- Misses      19863    19876      +13     
- Partials     1683     1684       +1
Flag Coverage Δ
javascript 51.32% <46.87%> (-0.02%) ⬇️

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

Impacted Files Coverage Δ
superset-frontend/src/components/Button/index.tsx 100.00% <ø> (ø)
...t-frontend/src/components/ListView/Filters/Base.ts 100.00% <ø> (ø)
superset-frontend/src/components/ListView/utils.ts 77.41% <ø> (ø)
...erset-frontend/src/components/EmptyState/index.tsx 66.66% <33.33%> (-2.57%) ⬇️
...tend/src/components/ListView/Filters/DateRange.tsx 27.77% <33.33%> (+1.11%) ⬆️
...rontend/src/components/ListView/Filters/Search.tsx 70.58% <33.33%> (-7.99%) ⬇️
...frontend/src/components/ListView/Filters/index.tsx 66.66% <50.00%> (-2.57%) ⬇️
...rset-frontend/src/components/ListView/ListView.tsx 91.76% <50.00%> (-4.49%) ⬇️
...perset-frontend/src/views/CRUD/alert/AlertList.tsx 66.66% <50.00%> (-1.05%) ⬇️
...ntend/src/views/CRUD/annotation/AnnotationList.tsx 69.35% <50.00%> (-0.49%) ⬇️
... and 3 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 d3ce398...ad7b585. Read the comment docs.

@rusackas rusackas requested a review from kgabryje March 25, 2022 22:14
rusackas
rusackas reviewed Mar 25, 2022
View reviewed changes
superset-frontend/src/assets/images/filter-results.svg
under the License.
-->
<svg width="120" height="150" viewBox="0 0 120 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100.133 19.8391L100.134 19.8402L119.5 40.6963V149.5H0.5V0.5H82.2811L100.133 19.8391Z" fill="#F7F7F7" stroke="#D9D9D9"/>
Copy link
Member

Choose a reason for hiding this comment

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

@michael-s-molina @geido these SVG icons provide an interesting little wrinkle in the discussion around Theming. We might want to use currentColor here instead of the #D9D9D9 references. That only solves one of the two colors, however :/

Copy link
Member

@michael-s-molina michael-s-molina Mar 28, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Interesting. I'll add a section about icon colors to the spike.

rusackas
rusackas reviewed Mar 25, 2022
View reviewed changes
superset-frontend/src/assets/images/filter-results.svg
@@ -0,0 +1,34 @@
<!--
Copy link
Member

Choose a reason for hiding this comment

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

I'm guessing that there are a handful of these empty state SVG images by now. Perhaps they should get their own directory just for content organization?

kgabryje
kgabryje reviewed Apr 11, 2022
View reviewed changes
superset-frontend/src/components/EmptyState/index.tsx
@@ -131,6 +131,11 @@ const ImageContainer = ({ image, size }: ImageContainerProps) => (
/>
);

const handleMouseDown = (e: SyntheticEvent) => {
Copy link
Member

Choose a reason for hiding this comment

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

Why do we need that?

Copy link
Member Author

Choose a reason for hiding this comment

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

Actually it is to solve the conflict between blur and click. Currently some of our search filters will trigger the query when blur, since blur will be triggered before click, resulting in click is not work (may also have this problem before). Calling preventDefault after the mousedown trigger will disable the blur so that the click can work properly.

Copy link
Member

Choose a reason for hiding this comment

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

Ok, thanks for explanation!

kgabryje
kgabryje approved these changes Apr 11, 2022
View reviewed changes
Copy link
Member

@kgabryje kgabryje left a comment

Choose a reason for hiding this comment

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

LGTM

@kgabryje kgabryje merged commit d49fd01 into apache:master Apr 11, 2022
philipher29 pushed a commit to ValtechMobility/superset that referenced this pull request Jun 9, 2022
@stephenLYZ @philipher29
feat(CRUD): add new empty state (apache#19310)
27e3aa0 
* feat(CRUD): add new empty state

* fix ci

* add svg license
@mistercrunch 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@michael-s-molina michael-s-molina michael-s-molina left review comments

@rusackas rusackas rusackas left review comments

@kgabryje kgabryje kgabryje approved these changes

Assignees
No one assigned
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/L 🚢 2.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@stephenLYZ @rusackas @kgabryje @michael-s-molina @mistercrunch