Dashboard: Empty State Redesign #6616

BrittanyIRL · 2021-03-04T16:51:51Z

Context

Updates the view when there are no stories to see based on: https://www.figma.com/file/NHHMwIfxMnz39NxqkrFb7R/Stories-Post-Stable?node-id=6464%3A521842
(from figma Mar 4, 2021 9:20 am MST)

Summary

Updates dashboard empty state.

Relevant Technical Choices

Adds color and bw "desert" svgs. bw will be needed for empty libraries on the editor (I can't find a ticket for this and I know it's really low priority).
Subs out old empty content message for new structure. Keeping children structure so that we can have buttons when we ant without giving more opinions to the container.

To-do

Took some liberties matching the styles for search results of 0, questions out to design via slack and am still waiting on feedback. For now I think consistency here is better and less jarring.

User-facing changes

Old (Staging/Main)

New (this branch)

Testing Instructions

You can see the empty states all updated in storybook under Dashboard/views/{page}/content
Log in as an author level user with no stories in an existing account that has stories (our local environments have this built in, user: author, password is same as admin unless you changed it) to see the no stories/blank canvas state without wiping your local environment. Discussion with Pascal here Dashboard: author does not see drafts #6613 makes me think this is a bug but for now it's really helpful for testing this!)
To check out search empty messages just search for something in 'my stories' that has no results.
To see empty templates, be really fast on the first load of the view, this is mostly just a future proof for when templates come from an API.
Empty stories should have a button that says "explore templates", clicking this should take users to the "explore templates" view in dashboard.

QA

See above.

UAT

UAT should use the same steps as above.

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

No

Does this PR change what data or activity we track or use?

No

Does this PR have a legal-related impact?

No

Checklist

This PR addresses an existing issue and I have linked this PR to it in ZenHub
I have tested this code to the best of my abilities
I have verified accessibility to the best of my abilities (docs)
I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
This PR contains automated tests (unit, integration, and/or e2e) to verify the code works as intended (docs)
I have added documentation where necessary
I have added a matching Type: XYZ label to the PR

Fixes #6437

github-actions · 2021-03-04T16:57:42Z

Size Change: +1.57 kB (0%)

Total Size: 1.21 MB

Filename	Size	Change
`assets/js/edit-story.js`	333 kB	+707 B (0%)
`assets/js/stories-dashboard.js`	264 kB	+870 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`assets/css/edit-story.css`	267 B	0 B
`assets/css/stories-dashboard.css`	288 B	0 B
`assets/css/vendors~edit-story.css`	702 B	0 B
`assets/css/web-stories-embed-block.css`	615 B	0 B
`assets/js/chunk-fonts-********************.js`	45 kB	0 B
`assets/js/chunk-web-stories-template-0-********************.js`	11 kB	0 B
`assets/js/chunk-web-stories-template-1-********************.js`	11.3 kB	0 B
`assets/js/chunk-web-stories-template-2-********************.js`	10.9 kB	0 B
`assets/js/chunk-web-stories-template-3-********************.js`	10.6 kB	0 B
`assets/js/chunk-web-stories-template-4-********************.js`	12.7 kB	0 B
`assets/js/chunk-web-stories-template-5-********************.js`	7.14 kB	0 B
`assets/js/chunk-web-stories-template-6-********************.js`	10.2 kB	0 B
`assets/js/chunk-web-stories-template-7-********************.js`	10.1 kB	0 B
`assets/js/chunk-web-stories-textset-0-********************.js`	5.23 kB	0 B
`assets/js/chunk-web-stories-textset-1-********************.js`	6.79 kB	0 B
`assets/js/chunk-web-stories-textset-2-********************.js`	7.81 kB	0 B
`assets/js/chunk-web-stories-textset-3-********************.js`	15.3 kB	0 B
`assets/js/chunk-web-stories-textset-4-********************.js`	4.38 kB	0 B
`assets/js/chunk-web-stories-textset-5-********************.js`	5.64 kB	0 B
`assets/js/chunk-web-stories-textset-6-********************.js`	5.43 kB	0 B
`assets/js/chunk-web-stories-textset-7-********************.js`	10.3 kB	0 B
`assets/js/vendors~chunk-ffmpeg-********************.js`	5.61 kB	0 B
`assets/js/vendors~edit-story-********************.js`	61.3 kB	0 B
`assets/js/vendors~edit-story~stories-dashboard-********************.js`	267 kB	-4 B (0%)
`assets/js/web-stories-activation-notice.js`	68.2 kB	0 B
`assets/js/web-stories-embed-block.js`	19.8 kB	0 B

_{compressed-size-action}

codecov · 2021-03-04T17:41:21Z

Codecov Report

Merging #6616 (cbba9b4) into main (e24cfe9) will increase coverage by 14.45%.
The diff coverage is 100.00%.

@@             Coverage Diff             @@
##             main    #6616       +/-   ##
===========================================
+ Coverage   68.42%   82.88%   +14.45%     
===========================================
  Files        1120     1124        +4     
  Lines       19894    19934       +40     
===========================================
+ Hits        13613    16522     +2909     
+ Misses       6281     3412     -2869

Flag	Coverage Δ
karmatests	`73.76% <75.00%> (+32.80%)`	⬆️
unittests	`65.55% <100.00%> (-0.07%)`	⬇️

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

Impacted Files	Coverage Δ
...src/dashboard/app/views/myStories/content/index.js	`100.00% <ø> (ø)`
...ashboard/app/views/savedTemplates/content/index.js	`52.63% <ø> (ø)`
...hboard/app/views/exploreTemplates/content/index.js	`100.00% <100.00%> (ø)`
.../dashboard/app/views/shared/emptyContentMessage.js	`100.00% <100.00%> (ø)`
.../src/dashboard/components/inlineInputForm/index.js	`90.90% <0.00%> (-4.33%)`	⬇️
assets/src/design-system/components/input/index.js	`97.61% <0.00%> (-2.39%)`	⬇️
includes/Traits/Assets.php	`0.00% <0.00%> (ø)`
assets/src/dashboard/components/table/index.js	`100.00% <0.00%> (ø)`
packages/text-sets/src/loadTextSets.js	`100.00% <0.00%> (ø)`
assets/src/dashboard/components/input/index.js	`100.00% <0.00%> (ø)`
... and 294 more

embarks

NICE

samwhale

✨

samwhale · 2021-03-04T18:35:03Z

assets/src/dashboard/app/views/exploreTemplates/content/index.js

-                  {search?.keyword
-                    ? sprintf(
-                        /* translators: %s: search term. */
-                        __(
-                          'Sorry, we couldn\'t find any results matching "%s"',
-                          'web-stories'
-                        ),
-                        search.keyword
-                      )
-                    : __('No templates currently available', 'web-stories')}
+                  <Headline
+                    size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}
+                    as="h3"
+                  >
+                    {search?.keyword
+                      ? sprintf(
+                          /* translators: %s: search term. */
+                          __(
+                            'Sorry, we couldn\'t find any results matching "%s"',
+                            'web-stories'
+                          ),
+                          search.keyword
+                        )
+                      : __('No templates currently available.', 'web-stories')}
+                  </Headline>
+                  {!search?.keyword && (
+                    <Button
+                      type={BUTTON_TYPES.PRIMARY}
+                      size={BUTTON_SIZES.MEDIUM}
+                      as="a"
+                      href={newStoryURL}
+                    >
+                      {__('Create a new Story', 'web-stories')}
+                    </Button>
+                  )}


💭 Loading state:

I think we should show a loading state or something indicating that templates are loading to the user so that in the event of a slow connection we show them that things are happening in the background.

Maybe we should add a ticket for this?

yes! I thought there was a ticket for this. It's been brought up a few times now. couldn't find a ticket so i made one. #6622

samwhale · 2021-03-04T18:36:44Z

assets/src/dashboard/app/views/exploreTemplates/content/index.js

+                    <Button
+                      type={BUTTON_TYPES.PRIMARY}
+                      size={BUTTON_SIZES.MEDIUM}
+                      as="a"
+                      href={newStoryURL}
+                    >
+                      {__('Create a new Story', 'web-stories')}
+                    </Button>


I think the button text when hovered should be white but I don't know if I'm correct 😓. Should it be white?

yes! this fix will come in with the dashboard grid PR #6588

littlemilkstudio

Looks and works great!

littlemilkstudio · 2021-03-04T20:51:00Z

assets/src/design-system/images/desert_color.svg

+<svg width="274" height="118" viewBox="0 0 274 118" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M59.6794 117.706L8.55191 106.934C2.50496 105.66 -0.950525 99.2608 1.30073 93.5057L2.4815 90.4872C3.80608 87.1011 6.86419 84.7008 10.468 84.2185L89.2625 73.675C90.1304 73.5588 90.9792 73.3292 91.7873 72.992L173.848 38.7482C176.51 37.6373 179.523 37.73 182.111 39.0027L238.407 66.6783C238.843 66.8925 239.293 67.0747 239.756 67.2234L266.596 75.86C275.728 78.7987 275.883 91.664 266.824 94.822L240.295 104.07C239.476 104.355 238.624 104.533 237.759 104.599L62.4973 117.892C61.5539 117.964 60.6052 117.901 59.6794 117.706Z" fill="#F4F2EF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M224 26C224 23.7909 225.791 22 228 22H230C232.209 22 234 23.7909 234 26V57H238V44C238 42.8954 238.895 42 240 42H241C242.105 42 243 42.8954 243 44V59V60C243 61.1046 242.105 62 241 62H240H234V79H224V49H218H217C215.895 49 215 48.1046 215 47V46V31C215 29.8954 215.895 29 217 29H218C219.105 29 220 29.8954 220 31V44H224V26Z" fill="#FBBC04"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M120.857 53.1785C120.857 51.995 121.817 51.0356 123 51.0356C124.184 51.0356 125.143 51.995 125.143 53.1785V67.4287H126.857V62.0714C126.857 61.4797 127.337 61 127.929 61C128.52 61 129 61.4797 129 62.0714V68.5C129 68.553 128.996 68.6052 128.989 68.6561C128.981 68.7118 128.968 68.7661 128.952 68.8186C128.816 69.2548 128.409 69.5716 127.929 69.5716H125.143V75.4642H120.857V67.5716H118.071C117.613 67.5716 117.221 67.2831 117.068 66.8777C117.024 66.7602 117 66.6329 117 66.5V60.0714C117 59.4797 117.48 59 118.071 59C118.663 59 119.143 59.4797 119.143 60.0714V65.4287H120.857V53.1785Z" fill="#FBBC04"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.7857 8C64.7857 3.58172 68.3674 0 72.7857 0H73.2143C77.6326 0 81.2143 3.58172 81.2143 8V42.6428H87.7858V22C87.7858 19.7909 89.5766 18 91.7858 18H92C94.2092 18 96.0001 19.7909 96.0001 22V46.8571C96.0001 49.0663 94.2092 50.8571 92.0001 50.8571H91.7858L91.769 50.8571H81.2143V93.6429H64.7857V78.8571H54.2319C54.2261 78.8571 54.2202 78.8571 54.2143 78.8571H54C52.8954 78.8571 51.8954 78.4094 51.1716 77.6856C50.4477 76.9617 50 75.9617 50 74.8571V50C50 47.7909 51.7909 46 54 46H54.2143C56.4234 46 58.2143 47.7909 58.2143 50V70.6428H64.7857V8Z" fill="#FBBC04"/>
+<circle cx="213" cy="72" r="13" fill="#4285F4"/>
+</svg>


If we ever wanted to make these svgs react components instead of using the svg loader, we could just make these one svg that changes intertnal path fills based off of props. Not something you need to change here, but definitely a benefit in the future if we ever want to head that direction

littlemilkstudio · 2021-03-04T20:54:39Z

assets/src/dashboard/app/views/myStories/content/test/content.js

@@ -124,7 +124,7 @@ describe('My Stories <Content />', function () {
      { features: { enableInProgressStoryActions: false } }
    );

-    expect(getByText('Create a story to get started!')).toBeInTheDocument();
+    expect(getByText('Start telling Stories.')).toBeInTheDocument();


I've been running across tests breaking for simple text updates and feel like it shouldn't happen so often. Maybe it's better practice to add testids vs getting elements by their text? Thoughts?

Don't need to change it here, but curious about ppls thoughts as like a future best practice to start implementing or not

good idea, either testids or sourcing text from 1 place, it'd be great to feed strings to pages from json or something. make it easier for text to be updated by non engineering.

Ooo yea that'd also be dope

BrittanyIRL added Type: Enhancement New feature or improvement of an existing feature Group: Dashboard Pod: Pea labels Mar 4, 2021

BrittanyIRL added this to the Sprint 48 milestone Mar 4, 2021

BrittanyIRL requested review from samwhale, littlemilkstudio and embarks March 4, 2021 16:51

BrittanyIRL self-assigned this Mar 4, 2021

google-cla bot added the cla: yes label Mar 4, 2021

embarks approved these changes Mar 4, 2021

View reviewed changes

samwhale approved these changes Mar 4, 2021

View reviewed changes

BrittanyIRL added 5 commits March 4, 2021 13:03

asset updates for desert

21130e3

update zero state to new designs.

23c1f8a

centering

e908129

tests

7ab187f

decrease max width on empty content message

6615b3b

BrittanyIRL force-pushed the feature/6437-dashboard-empty-state branch from e688592 to 6615b3b Compare March 4, 2021 20:04

littlemilkstudio approved these changes Mar 4, 2021

View reviewed changes

BrittanyIRL merged commit 6029ddc into main Mar 5, 2021

BrittanyIRL deleted the feature/6437-dashboard-empty-state branch March 5, 2021 15:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboard: Empty State Redesign #6616

Dashboard: Empty State Redesign #6616

BrittanyIRL commented Mar 4, 2021 •

edited

github-actions bot commented Mar 4, 2021 •

edited

codecov bot commented Mar 4, 2021 •

edited

embarks left a comment

samwhale left a comment

samwhale Mar 4, 2021 •

edited

BrittanyIRL Mar 4, 2021

samwhale Mar 4, 2021

BrittanyIRL Mar 4, 2021

littlemilkstudio left a comment

littlemilkstudio Mar 4, 2021

littlemilkstudio Mar 4, 2021

BrittanyIRL Mar 4, 2021

littlemilkstudio Mar 4, 2021

Dashboard: Empty State Redesign #6616

Dashboard: Empty State Redesign #6616

Conversation

BrittanyIRL commented Mar 4, 2021 • edited

Context

Summary

Relevant Technical Choices

To-do

User-facing changes

Testing Instructions

QA

UAT

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

github-actions bot commented Mar 4, 2021 • edited

codecov bot commented Mar 4, 2021 • edited

Codecov Report

embarks left a comment

Choose a reason for hiding this comment

samwhale left a comment

Choose a reason for hiding this comment

samwhale Mar 4, 2021 • edited

Choose a reason for hiding this comment

BrittanyIRL Mar 4, 2021

Choose a reason for hiding this comment

samwhale Mar 4, 2021

Choose a reason for hiding this comment

BrittanyIRL Mar 4, 2021

Choose a reason for hiding this comment

littlemilkstudio left a comment

Choose a reason for hiding this comment

littlemilkstudio Mar 4, 2021

Choose a reason for hiding this comment

littlemilkstudio Mar 4, 2021

Choose a reason for hiding this comment

BrittanyIRL Mar 4, 2021

Choose a reason for hiding this comment

littlemilkstudio Mar 4, 2021

Choose a reason for hiding this comment

BrittanyIRL commented Mar 4, 2021 •

edited

github-actions bot commented Mar 4, 2021 •

edited

codecov bot commented Mar 4, 2021 •

edited

samwhale Mar 4, 2021 •

edited