upcoming: [M3-7869] - Linode Create Refactor - Part 2 - Images and Distributions #10281

bnussman-akamai · 2024-03-14T00:13:09Z

Description 📝

Part 2 of the Linode Create refactor effort 🎉

Changes 🔄

Introduces Tabs (Distribution, Marketplace , StackScripts, Backups, Clone)
Introduces some helpers for managing query params (Linode Create relies somewhat heavily on query params)
Completely implements the Distribution and Image Tabs
Implements a new ImageSelectv2
- Yes, this does expand this scope of this project, and yes, it does add a 3rd ImageSelect to the codebase but we'd eventually write this code anyway. The current LinodeSelect literally has a Paper baked into it 🙄
Adds LandingHeader to match the existing Linode Create
Switches use of watch to useWatch to fix other components re-rendering when changing region
Configure MUI Autocomplete Group Label theme so that it looks more like our old component

Preview 📷

Putting a before and after so you can how the refactor is progressing 🤩

Before	After

How to test 🧪

Manually test the new functionality
Check for unnecessary renders
Look and my code and roast it 😳
- I want this new code to be super clean and maintainable. If I'm doing something questionable, please call me out! 📣

As an Author I have considered 🤔

bnussman-akamai · 2024-03-14T00:32:22Z

packages/manager/src/features/Linodes/LinodeCreatev2/Plan.tsx

  const { field, fieldState } = useController<CreateLinodeRequest>({
    name: 'type',
  });

  const { data: regions } = useRegionsQuery();
  const { data: types } = useAllTypes();

-  const regionId = watch('region');


Turns out, this is very bad.

It resulted in the entire form re-rendering when the region changed. With this new flow, I'm going to focus on performance and fine-grain rendering.

Changing out this watch call for a useWatch makes it so that only this component subscribes to region changing.

This is what makes react-hook-form great. They build things in a way so that you have to be very intentional with what state updates you subscribe to.

…utions

bnussman-akamai · 2024-03-14T00:49:36Z

packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx

+          <Tabs
+            index={currentTabIndex}
+            onChange={(index) => updateParams({ type: tabs[index] })}
+          >
+            <TabList>
+              <Tab>Distributions</Tab>
+              <Tab>Marketplace</Tab>
+              <Tab>StackScripts</Tab>
+              <Tab>Images</Tab>
+              <Tab>Backups</Tab>
+              <Tab>Clone Linode</Tab>
+            </TabList>
+            <TabPanels>
+              <SafeTabPanel index={0}>
+                <Distributions />
+              </SafeTabPanel>
+              <SafeTabPanel index={1}>Marketplace</SafeTabPanel>
+              <SafeTabPanel index={2}>StackScripts</SafeTabPanel>
+              <SafeTabPanel index={3}>
+                <Images />
+              </SafeTabPanel>
+              <SafeTabPanel index={4}>Bckups</SafeTabPanel>
+              <SafeTabPanel index={5}>Clone Linode</SafeTabPanel>
+            </TabPanels>
+          </Tabs>


I debated moving this chunk into another component to keep this root file super clean but I decided keeping it here helps your brain match up the code with the UI.

Curious to hear what others think!

I'm fine with it this way, the file remains pretty short and readable.

ya, it's fine to keep it here.

github-actions · 2024-03-14T01:10:52Z

Coverage Report: ✅
Base Coverage: 81.45%
Current Coverage: 81.57%

…s needed

bnussman-akamai · 2024-03-14T15:04:28Z

packages/manager/src/index.tsx

@@ -1,9 +1,8 @@
 import CssBaseline from '@mui/material/CssBaseline';
-import 'font-logos/assets/font-logos.css';


I moved this import to DistributionIcon.tsx. Moving this import down the tree makes it so font-logos.css isn't loaded until it is needed. 🎉

hkhalil-akamai

Changes look good in testing and code is clean and readable. Left a few minor comments. Great to see this work proceed @bnussman-akamai!

hkhalil-akamai · 2024-03-18T19:25:24Z

packages/manager/src/components/ImageSelectv2/ImageSelectv2.tsx

+  const value = images?.find((i) => i.id === props.value);
+
+  return (
+    <Autocomplete


Would it be possible to display the selected distro's icon (to match the current functionality)? This might be possible using startAdornment

Yeah, I should do that for the 1:1 parity with the old component.

I left it simple for now because I prefer the clean look 😖

Keeping it vs. not keeping it might be worth raising during Cafe this week

hkhalil-akamai · 2024-03-18T19:27:46Z

packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx

-      // @todo this is temporary API error handling. We will develop a more
-      // robust helper that can convert API errors to react-hook-form errors


What is the reason for removing this todo?

I removed it because this whole entire flow could have "@todo"s everywhere. I don't wanna go crazy with them. I also think this error handling might work as is.

hkhalil-akamai · 2024-03-18T19:28:24Z

packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx

+          <Tabs
+            index={currentTabIndex}
+            onChange={(index) => updateParams({ type: tabs[index] })}
+          >
+            <TabList>
+              <Tab>Distributions</Tab>
+              <Tab>Marketplace</Tab>
+              <Tab>StackScripts</Tab>
+              <Tab>Images</Tab>
+              <Tab>Backups</Tab>
+              <Tab>Clone Linode</Tab>
+            </TabList>
+            <TabPanels>
+              <SafeTabPanel index={0}>
+                <Distributions />
+              </SafeTabPanel>
+              <SafeTabPanel index={1}>Marketplace</SafeTabPanel>
+              <SafeTabPanel index={2}>StackScripts</SafeTabPanel>
+              <SafeTabPanel index={3}>
+                <Images />
+              </SafeTabPanel>
+              <SafeTabPanel index={4}>Bckups</SafeTabPanel>
+              <SafeTabPanel index={5}>Clone Linode</SafeTabPanel>
+            </TabPanels>
+          </Tabs>


I'm fine with it this way, the file remains pretty short and readable.

hkhalil-akamai · 2024-03-18T19:30:34Z

packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx

+              <Tab>Distributions</Tab>
+              <Tab>Marketplace</Tab>
+              <Tab>StackScripts</Tab>
+              <Tab>Images</Tab>
+              <Tab>Backups</Tab>
+              <Tab>Clone Linode</Tab>


Would this be better expressed as a tabs.map?

I thought about it, but because this page is likely not going to change much, I think keeping it static is okay.

My only concern is with currentTabIndex going out of sync, but as you said with these not changing often its unlikely.

abailly-akamai

Nice! super clean - some improvement to be made but the direction is great as far as i can see the scaffolding!

Apart from my comments, the Image Select Option still needs some TLC (alignment w/ icon, padding, hover styles)

abailly-akamai · 2024-03-19T13:27:41Z

packages/manager/src/components/DistributionIcon.tsx

+    <i
+      className={className}
+      data-testid="distro-icon"
+      style={{ fontSize: size ?? '1.8em' }}


Do we want the icon size to be relative to the parent? I am not saying we don't, i am frankly wondering cause sometimes it can cause unwanted side effects. Since we can override the size am wondering about using px instead for the default. No big deal either way

I updated this component in 5981137

It will now just inherit the fontSize and have no default.

abailly-akamai · 2024-03-19T13:29:11Z

packages/manager/src/components/ImageSelect/ImageOption.tsx

 import * as React from 'react';
 import { OptionProps } from 'react-select';
+import { makeStyles } from 'tss-react/mui';


perfectionist/sort-imports 🤷

abailly-akamai · 2024-03-19T13:29:44Z

packages/manager/src/components/ImageSelect/ImageSelect.tsx

@@ -137,6 +137,9 @@ const isMemo = (prevProps: ImageSelectProps, nextProps: ImageSelectProps) => {
  );
 };

+/**
+ * @deprecated Start using ImageSelectv2 when possible
+ */


abailly-akamai · 2024-03-19T13:38:54Z

packages/manager/src/components/ImageSelectv2/ImageSelectv2.tsx

Extending the scope is fine, but let's keep going with our recommanded practices? This one definitely warrants a unit test and to be in Storybook since we do that for our custom selects (LinodeSelect, RegionSelect etc). A bit of of overhead but worth it IMO.

Added some testing in 1bf9aa5

abailly-akamai · 2024-03-19T13:41:37Z

packages/manager/src/components/ImageSelectv2/utilities.ts

+ * for the Images Select.
+ *
+ * Please use API filtering (getAPIFilterForImageSelect) when possible!
+ */


What is the original behavior here (with legacy ImageSelect)?

ImageSelect just had intense client side filtering / sorting. This new implementation should be much more simple!

right right just trying to understand if anything is changing to the logic

Yes, there are changes to logic. packages/manager/src/components/ImageSelect/ImageSelect.tsx does a lot of crazy stuff and this new component likely doesn't work exactly like the old one.

For example, there is an API bug that is breaking the ordering on this new component. I filed an ARB for it already!

This is something we can iterate on as we need other functionality

@bnussman-akamai Does the bug you're referring to cover the reason why, for example, openSUSE images get listed under separate headers?

Yes exactly that! @dwiley-akamai

abailly-akamai · 2024-03-19T13:45:25Z

packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx

+          <Tabs
+            index={currentTabIndex}
+            onChange={(index) => updateParams({ type: tabs[index] })}
+          >
+            <TabList>
+              <Tab>Distributions</Tab>
+              <Tab>Marketplace</Tab>
+              <Tab>StackScripts</Tab>
+              <Tab>Images</Tab>
+              <Tab>Backups</Tab>
+              <Tab>Clone Linode</Tab>
+            </TabList>
+            <TabPanels>
+              <SafeTabPanel index={0}>
+                <Distributions />
+              </SafeTabPanel>
+              <SafeTabPanel index={1}>Marketplace</SafeTabPanel>
+              <SafeTabPanel index={2}>StackScripts</SafeTabPanel>
+              <SafeTabPanel index={3}>
+                <Images />
+              </SafeTabPanel>
+              <SafeTabPanel index={4}>Bckups</SafeTabPanel>
+              <SafeTabPanel index={5}>Clone Linode</SafeTabPanel>
+            </TabPanels>
+          </Tabs>


ya, it's fine to keep it here.

abailly-akamai · 2024-03-19T13:48:30Z

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

+export const useLinodeCreateQueryParams = () => {
+  const history = useHistory();
+
+  const rawParams = getQueryParamsFromQueryString(history.location.search);


Any reason you are not using useParams?

I'm going to 1:1 parity with the existing create flow and it only uses query params. I think useParams is only for router path params

abailly-akamai · 2024-03-19T13:50:54Z

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

+
+  const updateParams = (params: Partial<LinodeCreateQueryParams>) => {
+    const newParams = new URLSearchParams({ ...rawParams, ...params });
+    history.replace({ search: newParams.toString() });


history.replace will prevent the browser from remember the history, therefore not allowing the browser back and forward buttons. This introduces regressions with the current behavior. history.push is probably what you want here.

Good catch! Thanks! 4a3e081

dwiley-akamai

Will circle back to wrap up my review tomorrow morning!

dwiley-akamai · 2024-03-20T20:59:22Z

packages/manager/src/components/ImageSelectv2/ImageOptionv2.tsx

minor: can we do "V2" in the directory and file names instead of "v2"? Just makes it easier to notice when looking quickly

dwiley-akamai · 2024-03-20T21:02:03Z

packages/manager/src/components/ImageSelectv2/utilities.ts

+ * for the Images Select.
+ *
+ * Please use API filtering (getAPIFilterForImageSelect) when possible!
+ */


@bnussman-akamai Does the bug you're referring to cover the reason why, for example, openSUSE images get listed under separate headers?

dwiley-akamai · 2024-03-20T21:19:38Z

packages/manager/src/features/Linodes/LinodeCreatev2/Plan.tsx

@@ -47,7 +48,7 @@ export const Plan = () => {
      selectedId={field.value}
      selectedRegionID={regionId}
      showTransfer
-      types={types?.map(extendType) ?? []}
+      types={types?.map(extendType) ?? []} // @todo don't extend type


Maybe a notation like @TODO Linode Create Refactor to make it easy to track these down during this refactoring effort?

I think I might leave it as a basic todo because that change isn't within the scope of this project.

dwiley-akamai · 2024-03-20T21:28:13Z

packages/manager/src/components/ImageSelectv2/ImageSelectv2.tsx

+  const value = images?.find((i) => i.id === props.value);
+
+  return (
+    <Autocomplete


Keeping it vs. not keeping it might be worth raising during Cafe this week

abailly-akamai

Thanks for addressing the changes!

PR is good to go from my end, for future ones I'd still love to see out of scope commits (such as the new ImageSelect) decoupled in a separate PR - especially since it seems like this is prompting the most questions on this PR and diverting the attention from the create flow refactor. My two cents!

bnussman added 10 commits March 12, 2024 17:16

initial tab handling

d37bfa0

add some code comments

da993ce

add distribution tab

ff22162

clean up

b3e8cdf

fix console error

63268ec

make styles match existing component

a907562

wip

2efb996

fix: extra rendering due to incorrect watch call

956820b

test and document

fdb1100

add a way to test with hook form context

ff58cae

bnussman-akamai added the Linode Create Refactor label Mar 14, 2024

bnussman-akamai self-assigned this Mar 14, 2024

bnussman-akamai commented Mar 14, 2024

View reviewed changes

bnussman-akamai requested review from hkhalil-akamai, jaalah-akamai and abailly-akamai March 14, 2024 00:35

bnussman-akamai changed the title ~~feat: [M3-xxxx] - Linode Create Refactor - Part 2~~ feat: [M3-7869] - Linode Create Refactor - Part 2 Mar 14, 2024

Added changeset: Linode Create Refactor - Part 2 - Images and Distrib…

638803f

…utions

bnussman-akamai changed the title ~~feat: [M3-7869] - Linode Create Refactor - Part 2~~ feat: [M3-7869] - Linode Create Refactor - Part 2 - Images and Distributions Mar 14, 2024

bnussman-akamai commented Mar 14, 2024

View reviewed changes

bnussman-akamai marked this pull request as ready for review March 14, 2024 00:49

bnussman-akamai requested a review from a team as a code owner March 14, 2024 00:49

bnussman-akamai requested review from jdamore-linode and mjac0bs and removed request for a team March 14, 2024 00:49

bnussman-akamai added Ready for Review and removed Ready for Review labels Mar 14, 2024

clean up a lot and test more

1fe6b29

move font-logos css import in hopes to defer loading till the css i…

4dfb984

…s needed

bnussman-akamai commented Mar 14, 2024

View reviewed changes

hkhalil-akamai approved these changes Mar 18, 2024

View reviewed changes

abailly-akamai reviewed Mar 19, 2024

View reviewed changes

bnussman added 5 commits March 19, 2024 10:11

use history.push

4a3e081

add basic testing for new select

c2a5ab2

Merge branch 'develop' into linode-create-v2-part-2

42d6b24

add a unit test for ImageSelectv2

1bf9aa5

fix icon size in chrome

5981137

bnussman-akamai requested a review from abailly-akamai March 19, 2024 15:49

bnussman-akamai added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Mar 19, 2024

bnussman added 5 commits March 19, 2024 12:16

follow react-hook-forms reccomendation of not using undefined

556b950

Added changeset: Make image nullable in CreateLinodeSchema

330c80e

make image nullable

3e48701

allow image to be null in CreateLinodeRequest

a9a25ba

Added changeset: Allow image to be null in CreateLinodeRequest

ce23b06

bnussman-akamai changed the title ~~feat: [M3-7869] - Linode Create Refactor - Part 2 - Images and Distributions~~ upcoming: [M3-7869] - Linode Create Refactor - Part 2 - Images and Distributions Mar 19, 2024

dwiley-akamai self-requested a review March 20, 2024 16:50

dwiley-akamai reviewed Mar 20, 2024

View reviewed changes

abailly-akamai approved these changes Mar 21, 2024

View reviewed changes

bnussman-akamai merged commit 2ca1896 into linode:develop Mar 21, 2024
18 checks passed

This was referenced Mar 28, 2024

Release v1.116.0 - release → staging #10327

Merged

Release v1.116.0 - staging → master #10335

Merged

		@@ -1,9 +1,8 @@
		import CssBaseline from '@mui/material/CssBaseline';
		import 'font-logos/assets/font-logos.css';

		// @todo this is temporary API error handling. We will develop a more
		// robust helper that can convert API errors to react-hook-form errors

upcoming: [M3-7869] - Linode Create Refactor - Part 2 - Images and Distributions #10281

upcoming: [M3-7869] - Linode Create Refactor - Part 2 - Images and Distributions #10281

Conversation

bnussman-akamai commented Mar 14, 2024 • edited by dwiley-akamai

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

As an Author I have considered 🤔

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

github-actions bot commented Mar 14, 2024 • edited

Choose a reason for hiding this comment

hkhalil-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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

Choose a reason for hiding this comment

bnussman-akamai Mar 19, 2024 • edited

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dwiley-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

abailly-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai commented Mar 14, 2024 •

edited by dwiley-akamai

github-actions bot commented Mar 14, 2024 •

edited

bnussman-akamai Mar 19, 2024 •

edited