refactor: [M3-6922] - Add Autocomplete Component #9497

jaalah-akamai · 2023-08-05T04:02:42Z

Description 📝

We want to enhance accessibility and streamline our use of third-party libraries by eliminating our reliance on react-select. This leverages a customized version of MUI Autocomplete which will enable us to gradually replace occurrences of EnhancedSelect across our entire codebase.

Major Changes 🔄

Add generic Autocomplete that should fit our needs. We can iterate on this component as we come across edge cases.
Added a complete storybook, which also includes an example of how we can transition our Backups and Clone Linode UI to an Autocomplete.
Moved LinodeSelect.styles to Autocomplete.styles since they made more sense there.
Added basic unit tests
Created a new hook for Select All feature

TODO

Extend AutocompleteProps from MUI
Allow for flags or icons to be displayed (regions)
Clean up renderOptions by maybe being more explicit as to what can be passed in

Preview 📷

Single Select	Multi-Select



	autocomplete-multiple.mov

Custom No Options Message	Custom Render Options

Regions

Separate Options List

How to test 🧪

yarn storybook
http://localhost:6006/?path=/docs/components-autocomplete--documentation

abailly-akamai

This is really nice and clean. Great work!

Added some comments to clean things up.

Also, have we discussed the use of the "Autocomplete" VS "Select" nomenclature. I don't think it is a crucial discussion but I'd be curious to know why gearing towards the MUI naming convention rather than keeping our existing one

abailly-akamai · 2023-08-07T13:25:00Z

packages/manager/src/components/Autocomplete/Autocomplete.tsx

+  value: string;
+}
+
+export interface AutocompleteProps {


You are overriding a lot of MUI Autocomplete props which I think we should avoid to prevent breaking changes when updating MUI. Rather we should extend the MUI component's props and only declare our custom props. (same with other interfaces below)

They will be automatically picked up by storybook

Consider this done!

abailly-akamai · 2023-08-07T13:27:53Z

packages/manager/src/components/Autocomplete/Autocomplete.tsx

+    sx,
+  } = props;
+
+  const [inputValue, setInputValue] = React.useState('');


Out of curiosity, can the value be an object if (for instance) there's an icon to be displayed with the label and in the selected state? I assume this could be also an iteration

I'm assuming you mean like Regions selector? If so, I added an example of how to do that via the optional data property

To clarify, this should already be working for the selected option too? I might be missing something but in Storybook it doesn't seem like the flag gets displayed upon selecting an option.

abailly-akamai · 2023-08-07T13:29:22Z

packages/manager/src/components/Autocomplete/Autocomplete.tsx

+      )}
+      renderOption={(props, option: OptionsType, { selected }) => {
+        return (
+          <li {...props}>


Could we just pass the props we need here?

We're type-checking that only list item properties are applied here, I'd rather keep it for flexibility.

packages/manager/src/components/Autocomplete/Autocomplete.tsx

packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx

jaalah-akamai · 2023-08-07T13:54:15Z

This is really nice and clean. Great work!

Added some comments to clean things up.

Also, have we discussed the use of the "Autocomplete" VS "Select" nomenclature. I don't think it is a crucial discussion but I'd be curious to know why gearing towards the MUI naming convention rather than keeping our existing one

Yes, I thought about this too! The existing EnhancedSelect allows for typeahead interactions, so that falls within the Autocomplete nomenclature

packages/manager/src/components/Autocomplete/Autocomplete.tsx

tyler-akamai · 2023-08-08T18:31:01Z

Great work!

jaalah-akamai · 2023-08-09T02:38:30Z

Sorry @tyler-akamai been making major changes to this PR, I'm going to close out-of-date comments, but looking forward to your review when I put it up again!

packages/manager/src/features/Linodes/LinodeSelect/LinodeSelect.tsx

jaalah-akamai · 2023-08-11T03:50:33Z

There's still a lot more unit tests we can write for this. I may tackle writing them in a separate PR due to my time constraints or someone on the team can pick that up. Ready for review again! 🚀

dwiley-akamai

This is looking good based on my testing 🎉

We discussed on Friday during the group review/testing that some improvements can be made for the types (e.g. the one marked TODO in Autocomplete.tsx), but I think that could be done in a follow-up PR or iteratively as we implement this component in the app.

dwiley-akamai · 2023-09-05T17:48:58Z

packages/manager/src/components/Autocomplete/Autocomplete.tsx

+    sx,
+  } = props;
+
+  const [inputValue, setInputValue] = React.useState('');


To clarify, this should already be working for the selected option too? I might be missing something but in Storybook it doesn't seem like the flag gets displayed upon selecting an option.

packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx

packages/manager/src/components/Autocomplete/Autocomplete.tsx

jaalah-akamai · 2023-09-06T16:49:11Z

Added a storybook example for having separate options as opposed to using Tags.

@dwiley-akamai Adding flags to the value is not something we can do easily given the types we're restricted to. This may be one tradeoff unless we do a customized input.

bnussman-akamai · 2023-09-06T16:56:29Z

Looks great but I have some general concerns about the typesafety of this component.

No type safety on the data
renderInput is required
The onSelectionChange value is an array even though multiple is false

None of this stuff is easy but I propose we try to align our component more with MUI's implementation

Allow options to be any type T
Use onChange instead of a custom onSelectionChange
And so on...

jaalah-akamai · 2023-09-08T18:51:53Z

packages/manager/src/foundations/themes/light.ts

@@ -662,7 +667,6 @@ export const lightTheme: ThemeOptions = {
            backgroundColor: 'transparent',
            color: primaryColors.main,
          },
-          padding: 12,


This was a bug that prevented the IconButton size prop from working properly. There should be no regressions since we default to the large size which has a padding of 12 by default. https://github.com/linode/manager/pull/9497/files#diff-f767369a01cd40921dc0da8dac44cf6777e3c155f3680aa2990be0da93c2dc48R659

jaalah-akamai · 2023-09-08T18:52:55Z

Thanks @bnussman-akamai for the review and providing an alternative solution 🎉

packages/manager/src/components/Autocomplete/Autocomplete.tsx

bnussman-akamai

I think this is a great starting point! 🎉 We can refine this component as we use it and see what changes it may need

jaalah-akamai self-assigned this Aug 5, 2023

jaalah-akamai added the Storybook label Aug 5, 2023

jaalah-akamai marked this pull request as ready for review August 5, 2023 04:45

jaalah-akamai added the Ready for Review label Aug 5, 2023

abailly-akamai reviewed Aug 7, 2023

View reviewed changes

jaalah-akamai added the Work in Progress label Aug 8, 2023

tyler-akamai reviewed Aug 8, 2023

View reviewed changes

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

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

tyler-akamai reviewed Aug 8, 2023

View reviewed changes

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

tyler-akamai reviewed Aug 8, 2023

View reviewed changes

packages/manager/src/components/Autocomplete/Autocomplete.tsx Show resolved Hide resolved

tyler-akamai reviewed Aug 8, 2023

View reviewed changes

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

tyler-akamai reviewed Aug 8, 2023

View reviewed changes

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

jaalah-akamai marked this pull request as draft August 8, 2023 21:41

bnussman-akamai reviewed Aug 9, 2023

View reviewed changes

packages/manager/src/features/Linodes/LinodeSelect/LinodeSelect.tsx Outdated Show resolved Hide resolved

jaalah-akamai marked this pull request as ready for review August 11, 2023 03:30

jaalah-akamai removed the Work in Progress label Aug 11, 2023

coliu-akamai mentioned this pull request Aug 31, 2023

feat: [M3-6754] - [on hold] Create new react list component #9594

Closed

jaalah added 10 commits September 1, 2023 10:30

wip

21bdd52

Work In Progress

69cb3ac

refactor: [M3-6922] - Add Autocomplete Component

3215465

Added changeset: Add Autocomplete Component

33b05f7

Add unit tests

d401ff4

Add unit tests

cff6b77

More updates

c05a188

Work In Progress

ea61d23

Work in progress

849effd

Work In Progress

e454d61

jaalah added 8 commits September 1, 2023 10:30

Work in progress

e914fcb

Work in progress

1593f5a

Work in progress

9be31a8

Added regions flags, better typing and refactored some stuff

08acd11

Fix tests

8d358f7

Add comment

2f42f46

Remove key and add comments

4dbe4ef

Flexbox regions

b89430d

abailly-akamai force-pushed the M3-6922-v2 branch from 25f5e57 to b89430d Compare September 1, 2023 14:33

abailly-akamai added 2 commits September 1, 2023 11:14

feat: [M3-6922] add ownerstate to renderprops

12d9836

feat: [M3-6922] fix clearable state

5401b82

dwiley-akamai approved these changes Sep 5, 2023

View reviewed changes

hana-akamai reviewed Sep 5, 2023

View reviewed changes

Review updates and add example for separate list

eb4ba30

jaalah added 2 commits September 6, 2023 12:56

Remove undefined as a type for errorText

52af86f

Review comments - thanks @bnussman

391b3cc

jaalah-akamai commented Sep 8, 2023

View reviewed changes

bnussman-akamai requested changes Sep 8, 2023

View reviewed changes

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

Remove leftover props

4131527

jaalah-akamai requested a review from bnussman-akamai September 8, 2023 20:05

bnussman-akamai approved these changes Sep 8, 2023

View reviewed changes

bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Ready for Review labels Sep 8, 2023

Merge branch 'develop' of github.com:linode/manager into M3-6922-v2

de031c2

jaalah-akamai merged commit ac497b7 into linode:develop Sep 8, 2023
11 checks passed

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-6922] - Add Autocomplete Component #9497

refactor: [M3-6922] - Add Autocomplete Component #9497

jaalah-akamai commented Aug 5, 2023 •

edited

Loading

abailly-akamai left a comment

abailly-akamai Aug 7, 2023

jaalah-akamai Aug 11, 2023

abailly-akamai Aug 7, 2023

jaalah-akamai Aug 11, 2023

dwiley-akamai Sep 5, 2023

abailly-akamai Aug 7, 2023

jaalah-akamai Aug 11, 2023

jaalah-akamai commented Aug 7, 2023

tyler-akamai commented Aug 8, 2023

jaalah-akamai commented Aug 9, 2023

jaalah-akamai commented Aug 11, 2023

dwiley-akamai left a comment

dwiley-akamai Sep 5, 2023

jaalah-akamai commented Sep 6, 2023

bnussman-akamai commented Sep 6, 2023

jaalah-akamai Sep 8, 2023

jaalah-akamai commented Sep 8, 2023

bnussman-akamai left a comment

refactor: [M3-6922] - Add Autocomplete Component #9497

refactor: [M3-6922] - Add Autocomplete Component #9497

Conversation

jaalah-akamai commented Aug 5, 2023 • edited Loading

Description 📝

Major Changes 🔄

TODO

Preview 📷

How to test 🧪

abailly-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaalah-akamai commented Aug 7, 2023

tyler-akamai commented Aug 8, 2023

jaalah-akamai commented Aug 9, 2023

jaalah-akamai commented Aug 11, 2023

dwiley-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaalah-akamai commented Sep 6, 2023

bnussman-akamai commented Sep 6, 2023

Choose a reason for hiding this comment

jaalah-akamai commented Sep 8, 2023

bnussman-akamai left a comment

Choose a reason for hiding this comment

jaalah-akamai commented Aug 5, 2023 •

edited

Loading