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

Editor: Update behavior of consecutive snackbars #13190

Merged
merged 7 commits into from Apr 26, 2023
Merged

Conversation

ayushnirwal
Copy link
Contributor

@ayushnirwal ayushnirwal commented Apr 7, 2023

Context

Updates consecutive snack bar behavior to be more inline with Material design guidelines

Summary

  • SnackbarProvider's remove function was removing notifications on the basis of key which was not a valid key. This was causing all snack bars to be removed when the notifications list hit its max limit.
  • Fix ref handling in SnackbarContainer which was causing enter animation not to apply.
  • Update SnackbarContainer to show only one snack bar at a time.

Relevant Technical Choices

To-do

User-facing changes

Before -

Screen.Recording.2023-04-10.at.2.10.48.PM.mov

After -

Screen.Recording.2023-04-10.at.2.08.01.PM.mov

Testing Instructions

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

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

  • 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 code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #12845

@ayushnirwal ayushnirwal changed the title Fix snack-bar remove action Update consecutive snack-bar behavior Apr 10, 2023
@ayushnirwal ayushnirwal self-assigned this Apr 10, 2023
@ayushnirwal ayushnirwal marked this pull request as ready for review April 17, 2023 10:33
@ayushnirwal ayushnirwal added Group: Workspace A group encompassing all of workspace – everything inside the canvas and sidebar Package: Story Editor /packages/story-editor Type: Enhancement New feature or improvement of an existing feature labels Apr 17, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Apr 17, 2023

Size Change: -32 B (0%)

Total Size: 2.73 MB

ℹ️ View Unchanged
Filename Size Change
assets/css/web-stories-block-rtl.css 4.6 kB 0 B
assets/css/web-stories-block.css 4.64 kB 0 B
assets/css/web-stories-carousel-rtl.css 702 B 0 B
assets/css/web-stories-carousel.css 701 B 0 B
assets/css/web-stories-dashboard-rtl.css 657 B 0 B
assets/css/web-stories-dashboard.css 659 B 0 B
assets/css/web-stories-editor-rtl.css 769 B 0 B
assets/css/web-stories-editor.css 771 B 0 B
assets/css/web-stories-embed-rtl.css 655 B 0 B
assets/css/web-stories-embed.css 656 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.39 kB 0 B
assets/css/web-stories-list-styles.css 2.42 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B 0 B
assets/css/web-stories-theme-style-twentyten.css 143 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B 0 B
assets/css/web-stories-widget-rtl.css 482 B 0 B
assets/css/web-stories-widget.css 482 B 0 B
assets/js/3248.js 38.3 kB -31 B (0%)
assets/js/3780.js 12.9 kB 0 B
assets/js/4422.js 49.3 kB 0 B
assets/js/4652.js 92.7 kB 0 B
assets/js/7102.js 190 kB -13 B (0%)
assets/js/7357.js 92 B 0 B
assets/js/7418.js 7.97 kB 0 B
assets/js/83.js 4.59 kB 0 B
assets/js/9750.js 12.8 kB 0 B
assets/js/chunk-colorthief.js 2.62 kB 0 B
assets/js/chunk-ffmpeg.js 5.98 kB 0 B
assets/js/chunk-html-to-image.js 4.51 kB 0 B
assets/js/chunk-media-gallery.js 6.18 kB 0 B
assets/js/chunk-mediainfo.js 96 B 0 B
assets/js/chunk-opentype.js 96 B 0 B
assets/js/chunk-react-calendar.js 13.4 kB 0 B
assets/js/chunk-react-color.js 26 kB 0 B
assets/js/chunk-selfie-segmentation.js 16.3 kB 0 B
assets/js/chunk-web-stories-template-0-metaData.js 546 B 0 B
assets/js/chunk-web-stories-template-0.js 11.3 kB 0 B
assets/js/chunk-web-stories-template-1-metaData.js 540 B 0 B
assets/js/chunk-web-stories-template-1.js 9.56 kB 0 B
assets/js/chunk-web-stories-template-10-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-10.js 7.33 kB 0 B
assets/js/chunk-web-stories-template-11-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-11.js 9.01 kB 0 B
assets/js/chunk-web-stories-template-12-metaData.js 496 B 0 B
assets/js/chunk-web-stories-template-12.js 9.65 kB 0 B
assets/js/chunk-web-stories-template-13-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-13.js 7.34 kB 0 B
assets/js/chunk-web-stories-template-14-metaData.js 582 B 0 B
assets/js/chunk-web-stories-template-14.js 7.34 kB 0 B
assets/js/chunk-web-stories-template-15-metaData.js 544 B 0 B
assets/js/chunk-web-stories-template-15.js 8.99 kB 0 B
assets/js/chunk-web-stories-template-16-metaData.js 588 B 0 B
assets/js/chunk-web-stories-template-16.js 10.8 kB 0 B
assets/js/chunk-web-stories-template-17-metaData.js 540 B 0 B
assets/js/chunk-web-stories-template-17.js 9.17 kB 0 B
assets/js/chunk-web-stories-template-18-metaData.js 587 B 0 B
assets/js/chunk-web-stories-template-18.js 9.85 kB 0 B
assets/js/chunk-web-stories-template-19-metaData.js 501 B 0 B
assets/js/chunk-web-stories-template-19.js 9.41 kB 0 B
assets/js/chunk-web-stories-template-2-metaData.js 586 B 0 B
assets/js/chunk-web-stories-template-2.js 9.23 kB 0 B
assets/js/chunk-web-stories-template-20-metaData.js 548 B 0 B
assets/js/chunk-web-stories-template-20.js 8.96 kB 0 B
assets/js/chunk-web-stories-template-21-metaData.js 536 B 0 B
assets/js/chunk-web-stories-template-21.js 9.83 kB 0 B
assets/js/chunk-web-stories-template-22-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-22.js 7.77 kB 0 B
assets/js/chunk-web-stories-template-23-metaData.js 604 B 0 B
assets/js/chunk-web-stories-template-23.js 7.42 kB 0 B
assets/js/chunk-web-stories-template-24-metaData.js 517 B 0 B
assets/js/chunk-web-stories-template-24.js 11.6 kB 0 B
assets/js/chunk-web-stories-template-25-metaData.js 543 B 0 B
assets/js/chunk-web-stories-template-25.js 7.03 kB 0 B
assets/js/chunk-web-stories-template-26-metaData.js 600 B 0 B
assets/js/chunk-web-stories-template-26.js 7.24 kB 0 B
assets/js/chunk-web-stories-template-27-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-27.js 7.77 kB 0 B
assets/js/chunk-web-stories-template-28-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-28.js 8.99 kB 0 B
assets/js/chunk-web-stories-template-29-metaData.js 561 B 0 B
assets/js/chunk-web-stories-template-29.js 9.23 kB 0 B
assets/js/chunk-web-stories-template-3-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-3.js 8.35 kB 0 B
assets/js/chunk-web-stories-template-30-metaData.js 576 B 0 B
assets/js/chunk-web-stories-template-30.js 7.84 kB 0 B
assets/js/chunk-web-stories-template-31-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-31.js 10.2 kB 0 B
assets/js/chunk-web-stories-template-32-metaData.js 552 B 0 B
assets/js/chunk-web-stories-template-32.js 13 kB 0 B
assets/js/chunk-web-stories-template-33-metaData.js 491 B 0 B
assets/js/chunk-web-stories-template-33.js 9.03 kB 0 B
assets/js/chunk-web-stories-template-34-metaData.js 570 B 0 B
assets/js/chunk-web-stories-template-34.js 7.54 kB 0 B
assets/js/chunk-web-stories-template-35-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-35.js 8.86 kB 0 B
assets/js/chunk-web-stories-template-36-metaData.js 575 B 0 B
assets/js/chunk-web-stories-template-36.js 12.6 kB 0 B
assets/js/chunk-web-stories-template-37-metaData.js 529 B 0 B
assets/js/chunk-web-stories-template-37.js 6.26 kB 0 B
assets/js/chunk-web-stories-template-38-metaData.js 572 B 0 B
assets/js/chunk-web-stories-template-38.js 7.89 kB 0 B
assets/js/chunk-web-stories-template-39-metaData.js 589 B 0 B
assets/js/chunk-web-stories-template-39.js 8.03 kB 0 B
assets/js/chunk-web-stories-template-4-metaData.js 564 B 0 B
assets/js/chunk-web-stories-template-4.js 12.6 kB 0 B
assets/js/chunk-web-stories-template-40-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-40.js 10.1 kB 0 B
assets/js/chunk-web-stories-template-41-metaData.js 573 B 0 B
assets/js/chunk-web-stories-template-41.js 7.7 kB 0 B
assets/js/chunk-web-stories-template-42-metaData.js 521 B 0 B
assets/js/chunk-web-stories-template-42.js 6.96 kB 0 B
assets/js/chunk-web-stories-template-43-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-43.js 8.68 kB 0 B
assets/js/chunk-web-stories-template-44-metaData.js 583 B 0 B
assets/js/chunk-web-stories-template-44.js 11 kB 0 B
assets/js/chunk-web-stories-template-45-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-45.js 7.48 kB 0 B
assets/js/chunk-web-stories-template-46-metaData.js 531 B 0 B
assets/js/chunk-web-stories-template-46.js 5.19 kB 0 B
assets/js/chunk-web-stories-template-47-metaData.js 591 B 0 B
assets/js/chunk-web-stories-template-47.js 9.37 kB 0 B
assets/js/chunk-web-stories-template-48-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-48.js 9.02 kB 0 B
assets/js/chunk-web-stories-template-49-metaData.js 518 B 0 B
assets/js/chunk-web-stories-template-49.js 9.62 kB 0 B
assets/js/chunk-web-stories-template-5-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-5.js 9.85 kB 0 B
assets/js/chunk-web-stories-template-50-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-50.js 9.06 kB 0 B
assets/js/chunk-web-stories-template-51-metaData.js 526 B 0 B
assets/js/chunk-web-stories-template-51.js 10.3 kB 0 B
assets/js/chunk-web-stories-template-52-metaData.js 601 B 0 B
assets/js/chunk-web-stories-template-52.js 10.3 kB 0 B
assets/js/chunk-web-stories-template-53-metaData.js 551 B 0 B
assets/js/chunk-web-stories-template-53.js 5.76 kB 0 B
assets/js/chunk-web-stories-template-54-metaData.js 547 B 0 B
assets/js/chunk-web-stories-template-54.js 7.61 kB 0 B
assets/js/chunk-web-stories-template-55-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-55.js 7.08 kB 0 B
assets/js/chunk-web-stories-template-56-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-56.js 9.8 kB 0 B
assets/js/chunk-web-stories-template-57-metaData.js 528 B 0 B
assets/js/chunk-web-stories-template-57.js 14.8 kB 0 B
assets/js/chunk-web-stories-template-58-metaData.js 554 B 0 B
assets/js/chunk-web-stories-template-58.js 5.71 kB 0 B
assets/js/chunk-web-stories-template-59-metaData.js 590 B 0 B
assets/js/chunk-web-stories-template-59.js 8.89 kB 0 B
assets/js/chunk-web-stories-template-6-metaData.js 568 B 0 B
assets/js/chunk-web-stories-template-6.js 7.03 kB 0 B
assets/js/chunk-web-stories-template-60-metaData.js 509 B 0 B
assets/js/chunk-web-stories-template-60.js 9.39 kB 0 B
assets/js/chunk-web-stories-template-7-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-7.js 7.43 kB 0 B
assets/js/chunk-web-stories-template-8-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-8.js 8.85 kB 0 B
assets/js/chunk-web-stories-template-9-metaData.js 580 B 0 B
assets/js/chunk-web-stories-template-9.js 8.38 kB 0 B
assets/js/chunk-web-stories-templates.js 1.16 kB 0 B
assets/js/chunk-web-stories-textset-0.js 5 kB 0 B
assets/js/chunk-web-stories-textset-1.js 6.56 kB 0 B
assets/js/chunk-web-stories-textset-2.js 7.56 kB 0 B
assets/js/chunk-web-stories-textset-3.js 14.6 kB 0 B
assets/js/chunk-web-stories-textset-4.js 4.1 kB 0 B
assets/js/chunk-web-stories-textset-5.js 5.41 kB 0 B
assets/js/chunk-web-stories-textset-6.js 5.21 kB 0 B
assets/js/chunk-web-stories-textset-7.js 10 kB 0 B
assets/js/generateBlurhash.worker.worker.js 1.1 kB 0 B
assets/js/imgareaselect.js 3.77 kB 0 B
assets/js/web-stories-activation-notice.js 26.9 kB -1 B (0%)
assets/js/web-stories-block.js 23.8 kB 0 B
assets/js/web-stories-carousel.js 3.5 kB 0 B
assets/js/web-stories-dashboard.js 61.8 kB +7 B (0%)
assets/js/web-stories-editor.js 1.46 MB +6 B (0%)
assets/js/web-stories-embed.js 20 B 0 B
assets/js/web-stories-lightbox.js 751 B 0 B
assets/js/web-stories-tinymce-button.js 2.85 kB 0 B
assets/js/web-stories-widget.js 587 B 0 B

compressed-size-action

@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Apr 17, 2023

Plugin builds for 3c34bea are ready 🛎️!

Copy link
Collaborator

@swissspidy swissspidy left a comment

Choose a reason for hiding this comment

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

The new behavior looks good to me 👍

Just one question about the key attribute

Comment on lines +45 to +53
| Pick<SnackbarNotification, 'id'>
| Pick<SnackbarNotification, 'id'>[]
) => {
setNotifications((currentNotifications) =>
currentNotifications.filter((item) => {
if (Array.isArray(toRemove)) {
return !toRemove.find(({ key }) => key === item.key);
return !toRemove.find(({ id }) => id === item.id);
}
return item.key !== toRemove.key;
return item.id !== toRemove.id;
Copy link
Collaborator

Choose a reason for hiding this comment

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

key is actually used in at least one place:

if (isTranscoding) {
showSnackbar({
message: __('Optimizing file…', 'web-stories'),
dismissible: true,
key: 'video-optimization',
});
} else {
removeSnack({
key: 'video-optimization',
});
}

Should we just remove key there because we only show 1 notification now anyway?

If so, we should probably remove key entirely from the SnackbarNotification type.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

instead of using key here we can pass id in showSnackbar. This will overwrite the default id given using uuid.
In case we want to show more than one snack bar in the future, notifications can be still deleted using removeSnakbar and a known id.

@swissspidy swissspidy changed the title Update consecutive snack-bar behavior Editor: Update behavior of consecutive snackbars Apr 26, 2023
@swissspidy swissspidy merged commit b0ed419 into main Apr 26, 2023
43 of 54 checks passed
@swissspidy swissspidy deleted the fix/snackbars branch April 26, 2023 09:55
@swissspidy swissspidy added this to the 1.32.0 milestone Apr 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Workspace A group encompassing all of workspace – everything inside the canvas and sidebar Package: Story Editor /packages/story-editor Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Snackbar: Nice to have one notification instead of multiple
3 participants