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

M2-4969: [Admin Panel] Set up Banners infra for system messages #1464

Merged

Conversation

farmerpaul
Copy link
Contributor

@farmerpaul farmerpaul commented Feb 3, 2024

Resolves: M2-4969 (parent story: M2-4823)

Objective

This PR adds infrastructure for system messages as banners, which will be used in place of specific popups (as assessed in popup audit), including:

  • Redux slice for tracking which banner(s) are displayed
  • Banner base component
  • Banners container component to display banners based on Redux state

Also in this PR, only these system messages have been converted to use the new infra to keep this PR from getting too large (see Follow-up tasks below):

Banner Name Behaviour
Existing app version warning banner VersionWarningBanner
(formerly Banner)
persistent (manually dismissed)
Popup when no changes are made AppletWithoutChangesBanner
(formerly AppletWithoutChangesPopup)
auto-closing after 5s

Notes

Commits have been broken down into logical changesets, each with an explanation of changes, to make this PR easier to review. So please review commit-by-commit. 🙏🏻

Screenshots

demo.mov

Follow-up tasks

Copy link

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-1464.dpmzgfnfrj2mv.amplifyapp.com

@farmerpaul farmerpaul added the enhancement New feature or request label Feb 3, 2024
@farmerpaul farmerpaul marked this pull request as ready for review February 3, 2024 17:54
@farmerpaul farmerpaul force-pushed the feature/M2-4969-set-up-banners-infra-for-system-messages branch from 664b205 to 2f91296 Compare February 5, 2024 15:48
@farmerpaul farmerpaul force-pushed the feature/M2-4969-set-up-banners-infra-for-system-messages branch from 2f91296 to 3c20a59 Compare February 5, 2024 16:52
package.json Outdated Show resolved Hide resolved
Currently the app only shows a single static banner below the breadcrumbs.
This slice will support being able to display other banners in place of popups.
Used the MUI Alert component, which already closely aligns with
Figma designs. Added MUI Snackbar-like a11y behaviour to prevent
alerts from auto-closing while hovering or if window missing focus.
Set up default styling via MUI theme settings. Added missing sprites
for success/error states.
Now it uses the new Banner base component. Also add it to the list of
banner components available to enable in the banners state schema, and
renamed BannerSchema to BannersSchema.
Renders banners dictated by banners Redux state. Includes automatic
collapse animation via Material UI TransitionGroup.
Adds default app version warning banner on sign-in and clears banners on
sign-out.
Implement custom version instead.
@farmerpaul farmerpaul force-pushed the feature/M2-4969-set-up-banners-infra-for-system-messages branch from 3a30add to b92ef06 Compare February 6, 2024 15:45
@farmerpaul farmerpaul merged commit 2864ee6 into develop Feb 6, 2024
3 checks passed
@farmerpaul farmerpaul deleted the feature/M2-4969-set-up-banners-infra-for-system-messages branch February 6, 2024 16:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants