Skip to content

refactor: [M3-7960] - Update Notistack to 3.0.1 - #10357

Merged
abailly-akamai merged 8 commits into
linode:developfrom
abailly-akamai:M3-7960
Apr 9, 2024
Merged

abailly-akamai merged 8 commits into
linode:developfrom
abailly-akamai:M3-7960

Conversation

@abailly-akamai

@abailly-akamai abailly-akamai commented Apr 5, 2024 •

Copy link
Copy Markdown
Contributor

Description 📝

Update Notistack to 3.0.1 - pretty light refactor for a major update. This will bring us up to date with the lib and prevent some console errors we saw surface recently between React/Router & Notistack. ex:

Screenshot 2024-04-03 at 16 05 00

Every time we'd have a snackbar pop up ⬆️

see Migration Notes for more info

Changes 🔄

  • Update Notistack to 3.0.1
  • Update Styling with new API in Snackbar.tsx
  • Update Class Components instances

Target release date 🗓️

Please specify a release date to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed.

Preview 📷

ℹ️ There should be no functional or visual regressions as a result of this PR (1/1 refactor)

How to test 🧪

Verification steps

  • pull code, run yarn && yarn up
  • test application overall for potential regression

As an Author I have considered 🤔

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@abailly-akamai abailly-akamai self-assigned this Apr 5, 2024
@abailly-akamai abailly-akamai changed the title refactor: [M3-7960] - Update Notistack to 3.0.1 refactor: [M3-7960] - Update Notistack to 3.0.1 Apr 5, 2024
@abailly-akamai
abailly-akamai marked this pull request as ready for review April 5, 2024 17:56
@abailly-akamai
abailly-akamai requested a review from a team as a code owner April 5, 2024 17:56
@abailly-akamai
abailly-akamai requested review from carrillo-erik and dwiley-akamai and removed request for a team April 5, 2024 17:56

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Only test to complain from running the suite

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Is it safe to pass an APIError[] to enqueueSnackbar? I'm worried this could cause a crash.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think it could be an issue, the first parameter for enqueueSnackbar has a type of SnackbarMessage

Screenshot 2024-04-09 at 11 58 46 AM

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Absolutely not safe 🤦

fixed

@abailly-akamai abailly-akamai Apr 9, 2024 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

actually it takes React Node as type, which is why is accepted an array. Need to figure out what is does with it

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

ok, so yeah, since catch error is any it'll take it.
That being said I tested it and it won't throw with ApiError (just an empty toast, good to know I guess), but it isn't type safe

enqueueSnackbar([{ field: 'label', reason: 'Label is too long' }], {
  variant,
});

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

withSnackbar HOC has been deprecated in favor of direct imports.

In short:

  • direct imports for class components
  • useSnackbar for functional components

CC @bnussman-akamai for Linode Create v2, tho I guess you handle this already the right way, or will

@github-actions

github-actions Bot commented Apr 5, 2024 •

Copy link
Copy Markdown

Coverage Report: ❌
Base Coverage: 81.71%
Current Coverage: 81.69%

@bnussman-akamai bnussman-akamai left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Changes look good to me! ✅

Would like to confirm e2es pass before approving

@abailly-akamai

Copy link
Copy Markdown
Contributor Author

@bnussman-akamai no luck in getting a run to run at all, getting 130 exit codes - not sure why

Will need help from @jdamore-linode

@bnussman-akamai bnussman-akamai added the Dependencies Pull requests that update a dependency file label Apr 9, 2024
@abailly-akamai
abailly-akamai requested a review from a team as a code owner April 9, 2024 15:06
@abailly-akamai
abailly-akamai requested review from cliu-akamai and removed request for a team April 9, 2024 15:06
'[aria-describedby="notistack-snackbar"]',
message,
options
);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@bnussman-akamai i went with using an existing attribute as a CY selector instead, removing the need to pass a non type-safe one

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Nice! looks good

@dwiley-akamai dwiley-akamai left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code review ✅
Tested snackbars and general functionality in several places throughout the app ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Dependencies Pull requests that update a dependency file

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants