refactor: [M3-6913] Replace Select with Autocomplete in: linodes #10725

harsh-akamai · 2024-07-30T12:44:05Z

Description 📝

We want to get rid of our dependency on react-select for accessibility reasons and to consolidate our usage of third-party libraries.

Changes 🔄

Replaced all instances of Select with Autocomplete in the Linode feature.

How to test 🧪

Verification steps

(How to verify changes)

Navigate to http://localhost:3000/linodes
Verify the select input fields remains unchanged when using Autocomplete

As an Author I have considered 🤔

Check all that apply

…node feature

cpathipa · 2024-07-30T14:38:25Z

@harsh-akamai It looks like there are conflicts that need to resolved.

…omplete-in-linodes

mjac0bs · 2024-07-31T18:04:14Z

I still need to finish confirming the rest of the code changes look good, but the Cypress failures were related to Volumes only, so e2es are looking good otherwise. (We can merge in develop now that Joe merged #10728 to fix the Volumes failures.)

It looks like the last unit test failures are coming from VLANAccordion.test.tsx, where we can't find the placeholder text for 'Create or select a VLAN' ( getByPlaceholderText instead of getByText will fix) and can't find the disabled attributes (this no longer exists on the field with Autocomplete - we might want to find a different way to test that).

AzureLatte

Test passed

mjac0bs

@harsh-akamai, thanks for doing this and keeping up with the test changes in all the various components!

Overall, I didn't see any major regressions. I pointed out a couple of places where we're seeing slightly different behavior from prod, as well as some props that we can clean up a little.

And installing the recommended VSCode extensions I linked and cleaning up the linting warnings also ensures our code is consistently readable.

packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx

packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx

packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/DeviceSelection.tsx

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx

github-actions · 2024-08-01T12:26:46Z

Coverage Report: ❌
Base Coverage: 82.41%
Current Coverage: 82.4%

mjac0bs

Thanks for the clean up!

There's an unintended crash in the VPC Panel selection as a result of how we're handling lack of selection that we should fix, and it would be helpful to merge in the latest from develop before your next commit in order to get e2e test passing (all just Volume failures fixed in develop).

Once that feedback is addressed, I'll approve.

packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx

…nfig

…omplete-in-linodes

cpathipa

Nice work! I've left a few comments for minor adjustments; otherwise, things LGTM. I believe these efforts have already been addressed in the Linode Create V2 as a long-term solution.
CC: @bnussman

cpathipa · 2024-08-02T16:15:14Z

packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx

+  const vpcDropdownOptions: DropdownOption[] = vpcs.reduce(
+    (accumulator, vpc) => {
+      return vpc.region === region
+        ? [...accumulator, { label: vpc.label, value: vpc.id }]
+        : accumulator;
+    },
+    []
+  );


Can we wrap this in useCallback hook?

I believe you meant useMemo? It has been implemented in 20d7eea.

cpathipa · 2024-08-02T16:27:05Z

packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/DeviceSelection.tsx

            noMarginTop
            onChange={() => null}
-            placeholder="Finnix Media"
+            options={[]}


Is it intentional change, passing empty array as options ?

Yes. This input field has been disabled by default, which is why options is an empty array.

cpathipa · 2024-08-02T16:31:08Z

packages/manager/src/features/Linodes/LinodesDetail/utilities.ts

@@ -9,3 +9,13 @@ export const lishLink = (
 ) => {
  return `ssh -t ${username}@lish-${region}.linode.com ${linodeLabel}`;
 };
+
+export const getSelectedDeviceOption = (


Can we have test coverage for this util ?

Added in 12cb9d8.

…side the Linode feature

…ons, preventing unwanted re-renders

…he VPC dropdown list

…omplete-in-linodes

…atches

refactor: [M3-6913] Replace Select with Autocomplete in: linodes

56d8cba

harsh-akamai added the Linodes Dealing with the Linodes section of the app label Jul 30, 2024

harsh-akamai self-assigned this Jul 30, 2024

harsh-akamai requested a review from a team as a code owner July 30, 2024 12:44

harsh-akamai requested review from mjac0bs and cpathipa and removed request for a team July 30, 2024 12:44

Added changeset: Replace Select with Autocomplete component in the Li…

96028d1

…node feature

harsh-akamai added 3 commits July 30, 2024 21:37

Merge branch 'develop' into feature/M3-6913-replace-select-with-autoc…

5e60940

…omplete-in-linodes

refactor: [M3-6913] Fixed Linode Config Dialog unit test cases

2b3390d

refactor: [M3-6913] fixed failing e2e test case in Linode Create Page

16c37ff

harsh-akamai requested a review from a team as a code owner July 31, 2024 11:17

harsh-akamai requested review from AzureLatte and removed request for a team July 31, 2024 11:17

AzureLatte approved these changes Jul 31, 2024

View reviewed changes

mjac0bs reviewed Jul 31, 2024

View reviewed changes

refactor: [M3-6913] Removed linting errors

e81be51

mjac0bs reviewed Aug 1, 2024

View reviewed changes

packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx Show resolved Hide resolved

harsh-akamai added 2 commits August 2, 2024 18:00

refactor: [M3-6913] Fixed Autocomplete for VPC Selection in Linode Co…

ab26df2

…nfig

Merge branch 'develop' into feature/M3-6913-replace-select-with-autoc…

7f599f0

…omplete-in-linodes

mjac0bs approved these changes Aug 2, 2024

View reviewed changes

mjac0bs added the Approved Multiple approvals and ready to merge! label Aug 2, 2024

cpathipa reviewed Aug 2, 2024

View reviewed changes

harsh-akamai added 2 commits August 5, 2024 18:58

test: [M3-6913] Added a test case for the utility function created in…

12cb9d8

…side the Linode feature

refactor: [M3-6913] Used useMemo hook to cache VPCPanel dropdown opti…

20d7eea

…ons, preventing unwanted re-renders

harsh-akamai requested a review from cpathipa August 5, 2024 13:34

refactor: [M3-6913] Fixed duplicate addition of default options for t…

f738804

…he VPC dropdown list

harsh-akamai added 3 commits August 7, 2024 19:06

Merge branch 'develop' into feature/M3-6913-replace-select-with-autoc…

f66c768

…omplete-in-linodes

Merge branch 'develop' into feature/M3-6913-replace-select-with-autoc…

0eb32f5

…omplete-in-linodes

refactor: [M3-6913] fixed the kernel select types to handle type mism…

fba1e1c

…atches

harsh-akamai merged commit 54fc4c1 into linode:develop Aug 9, 2024
19 checks passed

harsh-akamai deleted the feature/M3-6913-replace-select-with-autocomplete-in-linodes branch August 9, 2024 14:49

mjac0bs mentioned this pull request Aug 14, 2024

fix: 'Oh snap' error when creating VPC from Linode Create #10783

Merged

12 tasks

This was referenced Aug 16, 2024

Release v1.126.0 - release → staging #10792

Merged

Release v1.126.0 - staging → master #10798

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [M3-6913] Replace Select with Autocomplete in: linodes #10725

refactor: [M3-6913] Replace Select with Autocomplete in: linodes #10725

harsh-akamai commented Jul 30, 2024 •

edited

Loading

cpathipa commented Jul 30, 2024

mjac0bs commented Jul 31, 2024 •

edited

Loading

AzureLatte left a comment

mjac0bs left a comment

github-actions bot commented Aug 1, 2024 •

edited

Loading

mjac0bs left a comment

cpathipa left a comment

cpathipa Aug 2, 2024

harsh-akamai Aug 5, 2024

cpathipa Aug 2, 2024

harsh-akamai Aug 5, 2024

cpathipa Aug 2, 2024

harsh-akamai Aug 5, 2024

refactor: [M3-6913] Replace Select with Autocomplete in: linodes #10725

refactor: [M3-6913] Replace Select with Autocomplete in: linodes #10725

Conversation

harsh-akamai commented Jul 30, 2024 • edited Loading

Description 📝

Changes 🔄

How to test 🧪

Verification steps

As an Author I have considered 🤔

cpathipa commented Jul 30, 2024

mjac0bs commented Jul 31, 2024 • edited Loading

AzureLatte left a comment

Choose a reason for hiding this comment

mjac0bs left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 1, 2024 • edited Loading

mjac0bs left a comment

Choose a reason for hiding this comment

cpathipa left a comment

Choose a reason for hiding this comment

cpathipa Aug 2, 2024

Choose a reason for hiding this comment

harsh-akamai Aug 5, 2024

Choose a reason for hiding this comment

cpathipa Aug 2, 2024

Choose a reason for hiding this comment

harsh-akamai Aug 5, 2024

Choose a reason for hiding this comment

cpathipa Aug 2, 2024

Choose a reason for hiding this comment

harsh-akamai Aug 5, 2024

Choose a reason for hiding this comment

harsh-akamai commented Jul 30, 2024 •

edited

Loading

mjac0bs commented Jul 31, 2024 •

edited

Loading

github-actions bot commented Aug 1, 2024 •

edited

Loading