refactor: [M3-6411] - MUI v5 - `Components > Tag` by hana-akamai · Pull Request #9164 · linode/manager

hana-akamai · 2023-05-23T21:12:43Z

Description 📝

Migrate styles for the Tag component

How to test 🧪

Confirm that there have been no Tag regressions across the app

packages/manager/src/components/Tag/Tag.tsx

cypress · 2023-05-23T21:38:10Z

1 flaky tests on run #3915 ↗︎

0	166	3	0	1

Details:

Added changeset: MUI v5 -
Project: Cloud Manager E2E	Commit: `7c2f23b874`
Status: Passed	Duration: 13:58 💡
Started: May 31, 2023 10:46 PM	Ended: May 31, 2023 11:00 PM

cypress/e2e/objectStorage/object-storage-errors.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
object storage failure paths > shows error upon object upload failure		`Output` `Screenshots` `Video`

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

packages/manager/src/components/Tag/Tag.tsx

packages/manager/src/components/Tag/index.ts

packages/manager/src/components/Tag/Tag.tsx

abailly-akamai

am seeing style discrepancies

label has a lighter shade
we lost the separator between the label and the X

Prod	Current PR

packages/manager/src/components/Tag/Tag.tsx

mjac0bs

I just noticed this issue in prod where the tag text is illegible on highlight of an item in the search results drop down in light mode. Would you prefer I make a separate ticket?

Screen.Recording.2023-05-25.at.2.03.25.PM.mov

hana-akamai · 2023-05-26T13:58:20Z

@mjac0bs Don't seem to see the issue anymore, can you check again? 🤔

Screen.Recording.2023-05-26.at.9.56.33.AM.mov

mjac0bs · 2023-05-26T14:15:38Z

@hana-linode You're right, looks good! Not sure what happened -- I thought I verified with this branch as well as prod, but maybe I had another mistakenly checked out. Glad it's fixed here, though!

mjac0bs

Styling and functionality LGTM other than the one thing I've called out here.

packages/manager/src/components/Tag/Tag.tsx

abailly-akamai

Thanks for the changes!

…sLanding (#9046) * Initial idea for RQ events Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Initial working version of useEventsPolling hook Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Re-implementation of useEventsPolling hook Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Completed initial implementation of useEvents hook Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Invalidate events cache when new events are fetched Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Use read instead of seen flag for polling Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Implement polling interval Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Switch to RQ hook for notifications menu Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Switch EventsLanding to RQ hook and enhance top-menu Fixes notification menu button background color disappearing on hover in dark mode Fix Notification menu doesn't close when navigating to EventsLanding Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Implement markEventsAsSeen mutation Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Temporarily re-enable redux polling Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Track previously existing in-progress events Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Remove old test Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Move NotificationMenu styled component to dedicated file * Follow style guide in EventsLanding * Rename TopMenuIconWrapper * fix: Re-add `fs` import to Cypress config (#9199) * add `fs` import * use cleaner import --------- Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: [M3-6382] - MUI v5 - `Components > Radio` (#9185) * move styles to theme and update stories * remove incorrect color --------- Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: [M3-6411] - MUI v5 - `Components > Tag` (#9164) ## Description 📝 Migrate styles for the Tag component ## How to test 🧪 Confirm that there have been no Tag regressions across the app Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * refactor: [M3-6412, M3-6413, M3-6650] - MUI v5 - `Components > TagCell, Tags, AddTag` (#9186) ## Description 📝 Migrate styles for the TagCell and AddTag component Update Tags component to match our current patterns ## How to test 🧪 - Check tags around the app for regressions - Ensure the Tags story renders in Storybook --------- Co-authored-by: Hussain Khalil <hussain@sanpilot.co> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com> Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

@jaalah-akamai

* refactor: [M3-6570] - RQ-ify Events - Part 1: NotificationMenu, EventsLanding (#9046) * Initial idea for RQ events Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Initial working version of useEventsPolling hook Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Re-implementation of useEventsPolling hook Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Completed initial implementation of useEvents hook Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Invalidate events cache when new events are fetched Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Use read instead of seen flag for polling Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Implement polling interval Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Switch to RQ hook for notifications menu Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Switch EventsLanding to RQ hook and enhance top-menu Fixes notification menu button background color disappearing on hover in dark mode Fix Notification menu doesn't close when navigating to EventsLanding Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Implement markEventsAsSeen mutation Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Temporarily re-enable redux polling Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Track previously existing in-progress events Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Remove old test Co-authored-by: Hussain Khalil <hussain@sanpilot.co> * Move NotificationMenu styled component to dedicated file * Follow style guide in EventsLanding * Rename TopMenuIconWrapper * fix: Re-add `fs` import to Cypress config (#9199) * add `fs` import * use cleaner import --------- Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: [M3-6382] - MUI v5 - `Components > Radio` (#9185) * move styles to theme and update stories * remove incorrect color --------- Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: [M3-6411] - MUI v5 - `Components > Tag` (#9164) ## Description 📝 Migrate styles for the Tag component ## How to test 🧪 Confirm that there have been no Tag regressions across the app Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * refactor: [M3-6412, M3-6413, M3-6650] - MUI v5 - `Components > TagCell, Tags, AddTag` (#9186) ## Description 📝 Migrate styles for the TagCell and AddTag component Update Tags component to match our current patterns ## How to test 🧪 - Check tags around the app for regressions - Ensure the Tags story renders in Storybook --------- Co-authored-by: Hussain Khalil <hussain@sanpilot.co> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com> Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * Undo no-longer needed changes to top menu icons * refactor: [M3-6571] - RQ-ify Events - Part 2: Event Handlers (#9293) * Make polling part of EventsInfiniteQuery * Move event utilities to utilities folder * Create events query container * Migrate App events handlers to new events hook * Migrate toast notifications to new hook * Move app event handlers to hook * Finish migrating event handlers * Remove events redux store * Fix failing test * Fix issue causing multiple pages of events to refresh * implement page zero for new events * Optimize/reduce calls to events endpoint * Implement rolling-time polling * Fix events being duplicated * Fix unsupported API filter * Fix index out of bounds bug * Fix broken in-progress events polling * Get rid of separate page zero cache and store new events in first page instead * Undo accidental changes to cachedData * remove leftover pageZero stuff * Fix undefined recent event * Start from page 1 * Feedback @jaalah-akamai * New hook for synchronizing polling intervals * Remove unused exports * Custom implementation of partition util * Sort in-progress events to top * Use events instead of data * Use React.useMemo * Fix state accidental deletion * Clean up useToastNotifications * Add changesets * Remove Redux connector in EventsLanding * Rename to NotificationMenu.styles.ts * nodebalanacer -> nodebalancer * Import from src/components instead of MUI * Replace CombinedProps with EventsLandingProps --------- Co-authored-by: Hussain Khalil <hussain@sanpilot.co> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com> Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

migrate tag component

97ac85e

hana-akamai added Ready for Review Project: MUI v5 Migration labels May 23, 2023

hana-akamai self-assigned this May 23, 2023

hana-akamai commented May 23, 2023

View reviewed changes

packages/manager/src/components/Tag/Tag.tsx Outdated Show resolved Hide resolved

jaalah-akamai changed the title ~~refactor: [M3-6411] - MUI v5 - Components > Tab~~ refactor: [M3-6411] - MUI v5 - Components > Tag May 24, 2023

jaalah-akamai suggested changes May 24, 2023

View reviewed changes

jaalah-akamai reviewed May 24, 2023

View reviewed changes

packages/manager/src/components/Tag/index.ts Outdated Show resolved Hide resolved

bnussman-akamai reviewed May 24, 2023

View reviewed changes

packages/manager/src/components/Tag/Tag.tsx Outdated Show resolved Hide resolved

packages/manager/src/components/Tag/Tag.tsx Outdated Show resolved Hide resolved

hana-akamai added 3 commits May 24, 2023 13:54

address feedback

40e0779

clean up

6bf6aba

Merge branch 'develop' into M3-6411-tag

cdc91ed

hana-akamai requested review from bnussman-akamai and jaalah-akamai May 24, 2023 18:12

abailly-akamai requested changes May 24, 2023

View reviewed changes

packages/manager/src/components/Tag/Tag.tsx Outdated Show resolved Hide resolved

address feedback

7063e2e

mjac0bs reviewed May 25, 2023

View reviewed changes

Fix spacing issues & border radius

ecff02f

hana-akamai requested review from abailly-akamai and mjac0bs May 26, 2023 14:30

mjac0bs approved these changes May 26, 2023

View reviewed changes

packages/manager/src/components/Tag/Tag.tsx Outdated Show resolved Hide resolved

fix border and hover state

b608159

hana-akamai added the Add'tl Approval Needed Waiting on another approval! label May 26, 2023

bnussman-akamai approved these changes May 31, 2023

View reviewed changes

jaalah-akamai approved these changes May 31, 2023

View reviewed changes

jaalah-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels May 31, 2023

abailly-akamai approved these changes May 31, 2023

View reviewed changes

Added changeset: MUI v5 -

7c2f23b

hana-akamai merged commit e90edfd into linode:develop Jun 1, 2023

hana-akamai deleted the M3-6411-tag branch June 1, 2023 15:09

jaalah-akamai mentioned this pull request Jun 9, 2023

Release v1.95.0 - release → staging #9236

Merged

dwiley-akamai mentioned this pull request Jun 12, 2023

Release v1.95.0 – staging → master #9250

Merged

Conversation

hana-akamai commented May 23, 2023

Description 📝

How to test 🧪

Uh oh!

Uh oh!

cypress bot commented May 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1 flaky tests on run #3915 ↗︎

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

abailly-akamai left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mjac0bs left a comment

Choose a reason for hiding this comment

Uh oh!

hana-akamai commented May 26, 2023

Uh oh!

mjac0bs commented May 26, 2023

Uh oh!

mjac0bs left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

abailly-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

cypress bot commented May 23, 2023 •

edited

Loading

abailly-akamai left a comment •

edited

Loading