refactor: [M3-6263] - MUI v5 Migration - SRC > Features > EntityTransfers #9582

tyler-akamai · 2023-08-22T17:54:25Z

Description 📝

MUI v5 CSS migration for SRC > Features > EntityTransfers

Major Changes 🔄

Removed React.FC or `
Renamed interface Props to {ComponentName}Props.
Removed CombinedProps if it's directly referencing Props with nothing additional
Removed makeStyles for new styled API.
export component inline and removed export default {ComponentName} at bottom of file.

Preview 📷

Before	After

How to test 🧪

Navigate to http://localhost:3000/account/service-transfers
Ensure the functionality and styling is consistent

abailly-akamai

Looks good! Approving pending some cleanup

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferHeader.tsx

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.styles.ts

...s/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.test.tsx

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.styles.ts

packages/manager/src/features/EntityTransfers/RenderTransferRow.styles.ts

...anager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx

abailly-akamai

oops i missed this was a draft - comments still apply tho :)

This is a draft

coliu-akamai

Awesome job! Just a few things:

When there are no linodes in the /account/service-transfers/create page, the table column widths are different on your branch vs prod:

branch:

prod:

Also, it's not really easy to screenshot so I've only included an image of the area, not a comparison, but the Service Transfer Summary area on the same page may be slightly shifted? Will say though that sometimes I've come across spacing issues like this that just... disappeared the next day (???) so it may not be anything, but worth double checking:

...es/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransferCreate.styles.ts

...ges/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts

...s/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.test.tsx

coliu-akamai · 2023-08-25T19:04:25Z

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.styles.ts

+  label: 'StyledDebouncedSearchTextField',
+})(({ theme }) => ({
+  marginBottom: theme.spacing(0.5),
+  maxWidth: 556,


😆 I wonder how they got this specific of a number

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.styles.ts

coliu-akamai

Still getting a slight difference in width if there are no linodes for the /service-transfers/create page on this branch vs prod, seems to be the checkbox column. Other than that everything else looked good!

prod

tyler-akamai · 2023-08-30T19:42:22Z

Still getting a slight difference in width if there are no linodes for the /service-transfers/create page on this branch vs prod, seems to be the checkbox column. Other than that everything else looked good!

prod

Yeah its a little wider without data, but as soon as data is added, it expands to the width I currently have. Its a minor difference but I wouldn't consider it a regression.

coliu-akamai

Ok thanks for the clarification, approving in that case 🎉

cpathipa

Looks like search functionality in Make a Service Transfer page is not working as I expected.

Local	Production

cpathipa · 2023-09-06T15:05:48Z

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx

+      acceptEntityTransfer(token)
+        .then(() => {
+          // @analytics
+          if (data?.entities) {
+            const entityCount = countByEntity(data?.entities);
+            sendEntityTransferReceiveEvent(entityCount);
+          }
+          // Update the received transfer table since we're already on the landing page
+          queryClient.invalidateQueries({
+            predicate: (query) =>
+              query.queryKey[0] === queryKey &&
+              query.queryKey[2] === TRANSFER_FILTERS.received,
+          });
+          onClose();
+          setSubmitting(false);
+          enqueueSnackbar('Transfer accepted successfully.', {
+            variant: 'success',
+          });


Nice to have: we could simplify this with async/await's

coliu-akamai · 2023-09-06T15:38:35Z

@cpathipa if you're using the MSW, I'm not too sure if the search bar filters the MSW linodes: I'm getting the same behavior on the develop branch, where I can't search/filter MSW linodes. However, I tried turning off the MSW and creating some linodes, and the searchbar seemed to work fine for the actual linodes -- could you confirm this behavior on your end?

cpathipa · 2023-09-06T15:56:01Z

@cpathipa if you're using the MSW, I'm not too sure if the search bar filters the MSW linodes: I'm getting the same behavior on the develop branch, where I can't search/filter MSW linodes. However, I tried turning off the MSW and creating some linodes, and the searchbar seemed to work fine for the actual linodes -- could you confirm this behavior on your end?

@coliu-akamai My bad, I didn't realize MSW was enabled locally. Confirming that the search bar is working as I expected. and approved the PR with pending minor feedback on using async/await's.

…fers (#9582) * initial migration commit * finished EntityTransfers/ and EntityTransfersCreate/ * Partly done EntityTransfersLanding directory * finished css migration, have not tested yet * Added changeset: MUI v5 Migration - SRC > Features > EntityTransfers * removed test code * testing formating issues * fixed inconsistent styling issues * fixed pr suggestions --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com>

TylerWJ added 5 commits August 21, 2023 14:10

initial migration commit

4b5d1e7

finished EntityTransfers/ and EntityTransfersCreate/

59160c8

Partly done EntityTransfersLanding directory

45326a7

finished css migration, have not tested yet

868f99f

Merge branch 'develop' into M3-6263-Entity-Transfer-CSS-Migration

d0ef1ab

tyler-akamai changed the title ~~feat: [M3-6263] - MUI v5 Migration - SRC > Features > EntityTransfers~~ refactor: [M3-6263] - MUI v5 Migration - SRC > Features > EntityTransfers Aug 22, 2023

tyler-akamai self-assigned this Aug 22, 2023

tyler-akamai added the Project: MUI v5 Migration label Aug 22, 2023

TylerWJ added 2 commits August 22, 2023 13:56

Added changeset: MUI v5 Migration - SRC > Features > EntityTransfers

2a1e1d6

removed test code

be74b97

abailly-akamai previously approved these changes Aug 23, 2023

View reviewed changes

abailly-akamai requested review from abailly-akamai and removed request for abailly-akamai August 23, 2023 11:58

abailly-akamai reviewed Aug 23, 2023

View reviewed changes

TylerWJ added 3 commits August 23, 2023 13:11

testing formating issues

3d4e4ea

fixed inconsistent styling issues

e79d2b2

Merge branch 'develop' into M3-6263-Entity-Transfer-CSS-Migration

1ea6bff

tyler-akamai marked this pull request as ready for review August 23, 2023 20:54

bnussman-akamai added the Ready for Review label Aug 23, 2023

coliu-akamai reviewed Aug 25, 2023

View reviewed changes

fixed pr suggestions

ad0a6bd

tyler-akamai requested review from coliu-akamai and abailly-akamai August 28, 2023 17:26

TylerWJ added 2 commits August 28, 2023 13:35

Merge branch 'develop' into M3-6263-Entity-Transfer-CSS-Migration

097bd00

merged with develop

ba15c76

coliu-akamai reviewed Aug 29, 2023

View reviewed changes

tyler-akamai requested a review from coliu-akamai August 30, 2023 19:42

coliu-akamai approved these changes Aug 31, 2023

View reviewed changes

bnussman-akamai added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Aug 31, 2023

cpathipa reviewed Sep 6, 2023

View reviewed changes

cpathipa approved these changes Sep 6, 2023

View reviewed changes

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

Merge branch 'develop' into M3-6263-Entity-Transfer-CSS-Migration

9a657b9

tyler-akamai merged commit ed32421 into linode:develop Sep 6, 2023
11 checks passed

tyler-akamai deleted the M3-6263-Entity-Transfer-CSS-Migration branch September 8, 2023 14:47

This was referenced Sep 15, 2023

Release v1.102.0 - release → staging #9686

Merged

Release v1.102.0 - staging → master #9695

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [M3-6263] - MUI v5 Migration - SRC > Features > EntityTransfers #9582

refactor: [M3-6263] - MUI v5 Migration - SRC > Features > EntityTransfers #9582

tyler-akamai commented Aug 22, 2023 •

edited

Loading

abailly-akamai left a comment

abailly-akamai left a comment

coliu-akamai left a comment •

edited

Loading

coliu-akamai Aug 25, 2023

coliu-akamai left a comment •

edited

Loading

tyler-akamai commented Aug 30, 2023

coliu-akamai left a comment

cpathipa left a comment

cpathipa Sep 6, 2023

coliu-akamai commented Sep 6, 2023

cpathipa commented Sep 6, 2023

refactor: [M3-6263] - MUI v5 Migration - SRC > Features > EntityTransfers #9582

refactor: [M3-6263] - MUI v5 Migration - SRC > Features > EntityTransfers #9582

Conversation

tyler-akamai commented Aug 22, 2023 • edited Loading

Description 📝

Major Changes 🔄

Preview 📷

How to test 🧪

abailly-akamai left a comment

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai left a comment • edited Loading

Choose a reason for hiding this comment

coliu-akamai Aug 25, 2023

Choose a reason for hiding this comment

coliu-akamai left a comment • edited Loading

Choose a reason for hiding this comment

tyler-akamai commented Aug 30, 2023

coliu-akamai left a comment

Choose a reason for hiding this comment

cpathipa left a comment

Choose a reason for hiding this comment

cpathipa Sep 6, 2023

Choose a reason for hiding this comment

coliu-akamai commented Sep 6, 2023

cpathipa commented Sep 6, 2023

tyler-akamai commented Aug 22, 2023 •

edited

Loading

coliu-akamai left a comment •

edited

Loading

coliu-akamai left a comment •

edited

Loading