refactor: [M3-6393] - MUI v5 - Components > Snackbar

[jaalah-akamai]

Description 📝

Refactors Snackbar to use styled api and cleaned up the overall usage of the component.

Major Changes 🔄

• Renamed SnackBar to Snackbar to follow naming convention
• Update to latest version of "notistack": "^3.0.1"
• Migrated withSnackbar to just call enqueueSnackbar directly
• WithSnackbarProps is no longer needed, but if it is, we can use ProviderContext from notistack
• Converted ToastNotifications Storybook MDX to 7.0 CSF
• Using named export/imports

Pending Changes

• Success color is now green instead of blue (pending UX review)
  • Edit: Keeping as blue until UX revisits this.

Preview 📷

Should be no visual changes

How to test 🧪

Option 1:

1. Run storybook yarn storybook
2. Go to http://localhost:6006/?path=/story/components-notifications-toasts--default

Option 2:

1. Run app locally and start a migration or resize on a linode (or anything that triggers a toast). See list here: https://github.com/linode/manager/blob/develop/packages/manager/src/features/ToastNotifications/ToastNotifications.tsx#L78
2. Verify toast messages still appear

[cypress]

Passing run #3494 ↗︎

0

162

4

0

0

Details:

null
Project: Cloud Manager E2E	Commit: 44cc1732e4
Status: Passed	Duration: 12:22 💡
Started: May 11, 2023 6:42 PM	Ended: May 11, 2023 6:54 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[jaalah-akamai]

I have a bit more work to do in order to get our tests to pass. The new version of Snackbar isn't allowing data-* to be applied to our DOM elements.

[jaalah-akamai]

I think the failing tests are due to the new version of notistack. I see a few related PRs in their repo waiting to be addressed. Hoping that solves the issues we're seeing here.

[jaalah-akamai]

This PR has been open for a while and conflicts would be easier to resolve with a new PR