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) O3-2546: Add the ability to use actions in the existing toast #822

Merged
merged 12 commits into from
Jan 8, 2024

Conversation

hadijahkyampeire
Copy link
Contributor

@hadijahkyampeire hadijahkyampeire commented Nov 22, 2023

Requirements

  • This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.

For changes to apps

If applicable

  • My work includes tests or is validated by existing tests.
  • I have updated the esm-framework mock to reflect any API changes I have made.

Summary

  • This PR modifies the existing toast to all actions.

Screenshots

Recording

toast-actions.mov

Related Issue

Copy link
Contributor

github-actions bot commented Nov 22, 2023

Size Change: -716 kB (-21%) 🎉

Total Size: 2.75 MB

Filename Size Change
packages/framework/esm-framework/dist/openmrs-esm-framework.js 376 kB -381 kB (-50%) 🏆
packages/shell/esm-app-shell/dist/openmrs.3cda992f0b33b867.js 0 B -334 kB (removed) 🏆
ℹ️ View Unchanged
Filename Size Change
packages/apps/esm-devtools-app/dist/630.js 2.69 kB 0 B
packages/apps/esm-devtools-app/dist/729.js 6.79 kB 0 B
packages/apps/esm-devtools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-devtools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-devtools-app/dist/875.js 9.76 kB 0 B
packages/apps/esm-devtools-app/dist/889.js 109 kB 0 B
packages/apps/esm-devtools-app/dist/961.js 25.3 kB 0 B
packages/apps/esm-devtools-app/dist/988.js 328 B 0 B
packages/apps/esm-devtools-app/dist/main.js 3.14 kB 0 B
packages/apps/esm-devtools-app/dist/openmrs-esm-devtools-app.js 3.18 kB 0 B
packages/apps/esm-implementer-tools-app/dist/319.js 633 B 0 B
packages/apps/esm-implementer-tools-app/dist/426.js 1.66 kB 0 B
packages/apps/esm-implementer-tools-app/dist/460.js 735 B 0 B
packages/apps/esm-implementer-tools-app/dist/56.js 3.07 kB 0 B
packages/apps/esm-implementer-tools-app/dist/560.js 9.6 kB -5 B (0%)
packages/apps/esm-implementer-tools-app/dist/574.js 560 B 0 B
packages/apps/esm-implementer-tools-app/dist/587.js 2.92 kB 0 B
packages/apps/esm-implementer-tools-app/dist/620.js 126 kB 0 B
packages/apps/esm-implementer-tools-app/dist/625.js 562 B 0 B
packages/apps/esm-implementer-tools-app/dist/651.js 6.86 kB 0 B
packages/apps/esm-implementer-tools-app/dist/727.js 33 kB 0 B
packages/apps/esm-implementer-tools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-implementer-tools-app/dist/738.js 6.79 kB 0 B
packages/apps/esm-implementer-tools-app/dist/757.js 560 B 0 B
packages/apps/esm-implementer-tools-app/dist/767.js 10.4 kB 0 B
packages/apps/esm-implementer-tools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-implementer-tools-app/dist/807.js 559 B 0 B
packages/apps/esm-implementer-tools-app/dist/833.js 681 B 0 B
packages/apps/esm-implementer-tools-app/dist/889.js 109 kB 0 B
packages/apps/esm-implementer-tools-app/dist/913.js 61.2 kB 0 B
packages/apps/esm-implementer-tools-app/dist/main.js 73.3 kB -4 B (0%)
packages/apps/esm-implementer-tools-app/dist/openmrs-esm-implementer-tools-app.js 3.3 kB 0 B
packages/apps/esm-login-app/dist/111.js 1.22 kB 0 B
packages/apps/esm-login-app/dist/126.js 2.5 kB 0 B
packages/apps/esm-login-app/dist/173.js 1.22 kB 0 B
packages/apps/esm-login-app/dist/224.js 256 B 0 B
packages/apps/esm-login-app/dist/236.js 272 B 0 B
packages/apps/esm-login-app/dist/240.js 364 B 0 B
packages/apps/esm-login-app/dist/272.js 264 B 0 B
packages/apps/esm-login-app/dist/319.js 692 B 0 B
packages/apps/esm-login-app/dist/336.js 234 B 0 B
packages/apps/esm-login-app/dist/363.js 30.1 kB 0 B
packages/apps/esm-login-app/dist/460.js 782 B 0 B
packages/apps/esm-login-app/dist/539.js 298 B 0 B
packages/apps/esm-login-app/dist/56.js 3.06 kB 0 B
packages/apps/esm-login-app/dist/574.js 609 B 0 B
packages/apps/esm-login-app/dist/625.js 600 B 0 B
packages/apps/esm-login-app/dist/627.js 257 B 0 B
packages/apps/esm-login-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-login-app/dist/644.js 305 B 0 B
packages/apps/esm-login-app/dist/673.js 284 B 0 B
packages/apps/esm-login-app/dist/729.js 6.78 kB 0 B
packages/apps/esm-login-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-login-app/dist/757.js 698 B 0 B
packages/apps/esm-login-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-login-app/dist/807.js 961 B 0 B
packages/apps/esm-login-app/dist/833.js 727 B 0 B
packages/apps/esm-login-app/dist/836.js 22.5 kB 0 B
packages/apps/esm-login-app/dist/889.js 109 kB 0 B
packages/apps/esm-login-app/dist/main.js 56.5 kB 0 B
packages/apps/esm-login-app/dist/openmrs-esm-login-app.js 3.32 kB 0 B
packages/apps/esm-offline-tools-app/dist/319.js 1.14 kB 0 B
packages/apps/esm-offline-tools-app/dist/430.js 55.4 kB 0 B
packages/apps/esm-offline-tools-app/dist/460.js 1.32 kB 0 B
packages/apps/esm-offline-tools-app/dist/56.js 3.07 kB 0 B
packages/apps/esm-offline-tools-app/dist/574.js 1.04 kB 0 B
packages/apps/esm-offline-tools-app/dist/625.js 1.04 kB 0 B
packages/apps/esm-offline-tools-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-offline-tools-app/dist/729.js 6.79 kB 0 B
packages/apps/esm-offline-tools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-offline-tools-app/dist/757.js 1.2 kB 0 B
packages/apps/esm-offline-tools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-offline-tools-app/dist/807.js 1.1 kB 0 B
packages/apps/esm-offline-tools-app/dist/833.js 1.22 kB 0 B
packages/apps/esm-offline-tools-app/dist/889.js 109 kB 0 B
packages/apps/esm-offline-tools-app/dist/922.js 81.2 kB 0 B
packages/apps/esm-offline-tools-app/dist/main.js 136 kB 0 B
packages/apps/esm-offline-tools-app/dist/openmrs-esm-offline-tools-app.js 3.29 kB 0 B
packages/apps/esm-primary-navigation-app/dist/319.js 218 B 0 B
packages/apps/esm-primary-navigation-app/dist/34.js 21.1 kB 0 B
packages/apps/esm-primary-navigation-app/dist/460.js 240 B 0 B
packages/apps/esm-primary-navigation-app/dist/574.js 205 B 0 B
packages/apps/esm-primary-navigation-app/dist/625.js 207 B 0 B
packages/apps/esm-primary-navigation-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-primary-navigation-app/dist/729.js 6.79 kB 0 B
packages/apps/esm-primary-navigation-app/dist/735.js 2.64 kB 0 B
packages/apps/esm-primary-navigation-app/dist/757.js 217 B 0 B
packages/apps/esm-primary-navigation-app/dist/762.js 7.29 kB 0 B
packages/apps/esm-primary-navigation-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-primary-navigation-app/dist/807.js 274 B 0 B
packages/apps/esm-primary-navigation-app/dist/833.js 237 B 0 B
packages/apps/esm-primary-navigation-app/dist/889.js 109 kB 0 B
packages/apps/esm-primary-navigation-app/dist/958.js 22.1 kB 0 B
packages/apps/esm-primary-navigation-app/dist/main.js 44.7 kB 0 B
packages/apps/esm-primary-navigation-app/dist/openmrs-esm-primary-navigation-app.js 3.23 kB 0 B
packages/framework/esm-api/dist/openmrs-esm-api.js 10 kB 0 B
packages/framework/esm-breadcrumbs/dist/openmrs-esm-breadcrumbs.js 2.66 kB 0 B
packages/framework/esm-config/dist/openmrs-esm-module-config.js 7.87 kB 0 B
packages/framework/esm-dynamic-loading/dist/openmrs-esm-dynamic-loading.js 2.12 kB 0 B
packages/framework/esm-error-handling/dist/openmrs-esm-error-handling.js 894 B 0 B
packages/framework/esm-extensions/dist/openmrs-esm-extensions.js 8.05 kB 0 B
packages/framework/esm-feature-flags/dist/openmrs-esm-feature-flags.js 1.67 kB 0 B
packages/framework/esm-framework/dist/455.openmrs-esm-framework.js 4.57 kB 0 B
packages/framework/esm-framework/dist/530.openmrs-esm-framework.js 2.92 kB 0 B
packages/framework/esm-framework/dist/645.openmrs-esm-framework.js 9.31 kB 0 B
packages/framework/esm-framework/dist/655.openmrs-esm-framework.js 6.83 kB 0 B
packages/framework/esm-framework/dist/710.openmrs-esm-framework.js 6.48 kB 0 B
packages/framework/esm-framework/dist/735.openmrs-esm-framework.js 2.66 kB 0 B
packages/framework/esm-framework/dist/788.openmrs-esm-framework.js 42.9 kB 0 B
packages/framework/esm-globals/dist/openmrs-esm-globals.js 756 B 0 B
packages/framework/esm-offline/dist/openmrs-esm-offline.js 34.4 kB 0 B
packages/framework/esm-react-utils/dist/openmrs-esm-react-utils.js 15.5 kB 0 B
packages/framework/esm-routes/dist/openmrs-esm-utils.js 1.46 kB 0 B
packages/framework/esm-state/dist/openmrs-esm-state.js 888 B 0 B
packages/framework/esm-styleguide/dist/openmrs-esm-styleguide.js 19.3 kB 0 B
packages/framework/esm-utils/dist/openmrs-esm-utils.js 11.2 kB 0 B
packages/shell/esm-app-shell/dist/08a99d285a4ddb28.js 6.45 kB 0 B
packages/shell/esm-app-shell/dist/1348b3a910102b7f.js 1.58 kB 0 B
packages/shell/esm-app-shell/dist/695f23c4e6b3f009.js 0 B -1.58 kB (removed) 🏆
packages/shell/esm-app-shell/dist/b66a463116735f62.js 3.81 kB 0 B
packages/shell/esm-app-shell/dist/openmrs.7a3d9bedbae3986b.js 334 kB 0 B
packages/shell/esm-app-shell/dist/service-worker.js 60.5 kB +7 B (0%)
packages/tooling/openmrs/dist/cli.js 2.85 kB 0 B
packages/tooling/openmrs/dist/commands/assemble.js 2.4 kB 0 B
packages/tooling/openmrs/dist/commands/build.js 1.34 kB 0 B
packages/tooling/openmrs/dist/commands/debug.js 545 B 0 B
packages/tooling/openmrs/dist/commands/develop.js 2.59 kB 0 B
packages/tooling/openmrs/dist/commands/index.js 438 B 0 B
packages/tooling/openmrs/dist/commands/start.js 851 B 0 B
packages/tooling/openmrs/dist/index.js 517 B 0 B
packages/tooling/openmrs/dist/runner.js 637 B 0 B
packages/tooling/openmrs/dist/utils/config.js 728 B 0 B
packages/tooling/openmrs/dist/utils/debugger.js 576 B 0 B
packages/tooling/openmrs/dist/utils/dependencies.js 648 B 0 B
packages/tooling/openmrs/dist/utils/helpers.js 395 B 0 B
packages/tooling/openmrs/dist/utils/importmap.js 3.07 kB 0 B
packages/tooling/openmrs/dist/utils/index.js 444 B 0 B
packages/tooling/openmrs/dist/utils/logger.js 368 B 0 B
packages/tooling/openmrs/dist/utils/npmConfig.js 830 B 0 B
packages/tooling/openmrs/dist/utils/untar.js 722 B 0 B
packages/tooling/openmrs/dist/utils/variables.js 192 B 0 B
packages/tooling/openmrs/dist/utils/webpack.js 278 B 0 B
packages/tooling/webpack-config/dist/index.js 3.58 kB 0 B

compressed-size-action

@hadijahkyampeire
Copy link
Contributor Author

@ibacher @denniskigen this PR is ready for review, please take a look.

Copy link
Member

@ibacher ibacher left a comment

Choose a reason for hiding this comment

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

Thanks @hadijahkyampeire! A few comments and questions here.

@@ -44,6 +44,7 @@
<body>
<%= htmlWebpackPlugin.tags.bodyTags %>
<div class="omrs-toasts-container"></div>
<div class="omrs-actionable-toasts-container"></div>
Copy link
Member

Choose a reason for hiding this comment

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

Have we looked into how things look when there are both toasts and actionable toasts?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually not yet but I am going to test and see.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Screenshot 2023-12-07 at 02 24 44 This shows they stuck on top of each other but since we are going to replace the toasts with the snackbar and then get rid of the Toast component, maybe we do not need to worry about that. cc @denniskigen @ibacher

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@ibacher would you propose we just modify the existing toast to accept actions or let new actionable toast use the same container for toast.

Copy link
Member

Choose a reason for hiding this comment

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

Missed this since it got marked as resolved. I'd favour having all toasts in a single container.

@hadijahkyampeire hadijahkyampeire changed the title (feat) O3-2546: Add an actionable Toast to core (feat) O3-2546: Add the ability to use actions in the existing toast Dec 14, 2023
@hadijahkyampeire
Copy link
Contributor Author

@ibacher @denniskigen I have updated this PR to add the implementation to allow the use of an action, so it won't break anything as far as the existing toast works and for the parts where we want to add an action it can also allow. Please see the attached recording and review the changes.

Copy link
Member

@ibacher ibacher left a comment

Choose a reason for hiding this comment

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

Couple of things. Last question: are we sure that all actionable notifications should always remain until the user does something with them? I'd favour a more flexible system to allow the producer of the notification to decide. (For example, email applications now tend to offer an "undo send" feature, which displays an action you can take up until a certain timeout, after which the action goes away because the email has been sent).

@hadijahkyampeire
Copy link
Contributor Author

@ibacher I have implemented the changes, please take another look.

@denniskigen
Copy link
Member

denniskigen commented Jan 8, 2024

Is this good to go, @ibacher?

@ibacher
Copy link
Member

ibacher commented Jan 8, 2024

Yes, I think so.

@hadijahkyampeire hadijahkyampeire merged commit 966e697 into main Jan 8, 2024
9 checks passed
@hadijahkyampeire hadijahkyampeire deleted the hk/ft/actionable-toast/O3-2546 branch January 8, 2024 14:57
@hadijahkyampeire
Copy link
Contributor Author

Thanks @ibacher

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants