upcoming: [M3-7872] - Linode Create Refactor - StackScripts #10367

bnussman-akamai · 2024-04-10T20:28:29Z

Description 📝

Note

Because of the amount of work involved to implement StackScripts on the new Linode Create flow, it will be broken up into a few PRs. You can consider this Part 1. There will be a part 2. Maybe a part 3.

This PR begins to implement the "StackScripts" section of the new Linode Create flow 🎉

Main features ➕

This is all new code. I considered hooking up the old code but it was way too crusty. 👎🏼 We'll be better with fresh code. 🧼
Begins to React Query-ify StackScripts. This allows us to use nice things like infinite queries. Eventually we we refactor all of the StackScripts pages to use React Query, but there is no hurry to do so. 🧹
Adds the ability to select a community or account StackScript and deploy it to a Linode ➕
Properly resets form when tab is changed to match behavior of existing flow
Fixes deep linking when clicking "Deploy to new Linode" from the Images Landing Page
Adds deep linking when clicking "Deploy new Linode" from the StackScripts Landing Page

Features that will come in Part 2

Re-add the Search field 🔍
Add User Defined Fields (UDFs) ⌨️

Preview 📷

How to test 🧪

Prerequisites

Turn on the Linode Create v2 feature flag using the local dev tools

Verification steps

Check for basic functionality
Verify you can select an account StackScript
Verify you can select a community StackScript
Verify you can click "Deploy New Linode" on the StackScripts landing page and it auto-fills the Linode Create form
Verify Query Params work and update as expected
Compare functionality to https://cloud.linode.com

As an Author I have considered 🤔

This reverts commit f56e4ad.

github-actions · 2024-04-12T13:34:04Z

Coverage Report: ✅
Base Coverage: 81.81%
Current Coverage: 81.83%

jaalah-akamai · 2024-04-12T13:54:09Z

✅ Skeleton loading and caching when switching between tabs is much nicer
✅ When re-ordering community stackscripts many times, we no longer get "Too many requests"
✅ Better section separation between Create From: and Select an Image

When selecting an account stackscript, it appears the endpoint we're hitting is different between prod and this:

Prod	Refactor

jaalah-akamai · 2024-04-12T13:54:58Z

If there is only one image to select from, in Prod we're pre-populating "Choose an Image" dropdown - do we want to maintain this?

jaalah-akamai · 2024-04-12T13:58:15Z

Do we want to maintain the bolding we have stackscripts?

jaalah-akamai · 2024-04-12T14:00:46Z

In Prod, the linode label is pre-populated with the selected stackscript name, is that something we want to keep? I know you had opinions about that in the past.

bnussman-akamai · 2024-04-12T14:35:46Z

@jaalah-akamai

✅ If there is only one image to select from, pre-repopulate "Choose an Image" dropdown
✅ Re-add bolding to label
The different API requests should be no worry. As long as behavior is the same, we should be good!
Linode label auto-generation will be handled at at later point

hkhalil-akamai

Great work on this so far! I agree with a fresh approach to the StackScripts components. Will continue my review next week.

hkhalil-akamai · 2024-04-12T22:22:23Z

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScriptImages.tsx

Noticing that the StackScripts Image selection lives in its own card in contrast to prod where it shares a card with the StackScript Selection

I believe that was a regression, so sections will now be spaced out

abailly-akamai

Super nice refactor! left some minor code and style comments to improve a few things, stick to conventions and consider visual regression/changes

abailly-akamai · 2024-04-15T13:45:58Z

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

+  if (
+    filteredOptions?.length === 1 &&
+    props.onChange &&
+    selectIfOnlyOneOption


Aren't filteredOptions?.length === 1 & selectIfOnlyOneOption doing the same thing?

Do we need the selectIfOnlyOneOption optional prop?

I added the selectIfOnlyOneOption prop so that the functionality is op-in. I don't think it should be the default behavior

abailly-akamai · 2024-04-15T14:18:16Z

...s/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScriptSelectionList.tsx

+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell sx={{ width: 20 }}></TableCell>


I personally prefer the older table header rendering without an extra cell for the radio. Not a big deal either way, but that's a regression from previous layout, even if meant as an improvement.

I did it this way to match our other selectable tables like Plan selection and Service Transfers. I'd be happy to rework this so that it is one single table cell if this is too much of a breaking change.

abailly-akamai · 2024-04-15T14:20:52Z

...s/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScriptSelectionList.tsx

+                onOpenDetails={() => setSelectedStackScriptId(stackscript.id)}
+                onSelect={() => field.onChange(stackscript.id)}
+                stackscript={stackscript}
+              />


on mobile PROD we wrap the "show details" CTA which leaves more room for the title

Yep. I think I'd have to rework this so that it is one single table cell if we want this behavior. The wrapping looked kind of wacky to me, so that's why I went the route of using 3 table cells. I'd be happy to re-work this back to a single table cell if you think that's better

...es/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScriptSelectionRow.tsx

abailly-akamai · 2024-04-15T14:23:25Z

...es/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScriptSelectionRow.tsx

+      <TableCell actionCell sx={{ minWidth: 120 }}>
+        <InlineMenuAction actionText="Show Details" onClick={onOpenDetails} />
+      </TableCell>
+    </TableRow>


As mentioned in other comments, typography is a a bit different here. It's not really pretty originally with the bolding so not sure what is best. A quick UX back and forth could be helpful to clean that up

abailly-akamai · 2024-04-15T14:25:02Z

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScripts.tsx

+      image: null,
+      stackscript_data: null,
+      stackscript_id: null,
+    }));


abailly-akamai · 2024-04-15T14:28:50Z

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

    history.push({ search: newParams.toString() });
  };

  const params = {
+    imageID: rawParams.imageID as string | undefined,


Suggested change

imageID: rawParams.imageID as string | undefined,

imageId: rawParams.imageId as string | undefined,

Yeah, I debated that change. I did imageID because that is how it is represented in the query params (which we can't change because we need to keep feature parity), but I can change this variable to imageId if we'd prefer that. I think imageID helps the reader understand that it matches the query param, but I'm also cool with strictly following our camel case rule.

abailly-akamai · 2024-04-15T14:29:11Z

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

    history.push({ search: newParams.toString() });
  };

  const params = {
+    imageID: rawParams.imageID as string | undefined,
+    stackScriptID: rawParams.stackScriptID


same, would be nice to stick to our Id convention here and below

hkhalil-akamai

Tested:

✅ Selecting account and community stackscripts
✅ Viewing stack script details
✅ Actually creating the Linode from stackscript
✅ Code review 🧼

Really nice work on this. Approved pending some minor tweaks raised by @abailly-akamai.

…0367) * initial work * filter options based on stackscript compatibility * implement complex preselection logic * clean up a bit * implement details dialog * fix some query param logic * lots of behavior changes to match production * fix image select clear behavior and fix table waypoint console error * improve validation for when image is `null` * first unit tests * add lots of unit testing * add stackscript event handler * hook up validation packages for realtime validation * use default validation behavior * Revert "hook up validation packages for realtime validation" This reverts commit f56e4ad. * handle resets when switching tabs * add changesets * add some comments * bold label and pre-select if only one option * improve ux * fix unit tests * add comment --------- Co-authored-by: Banks Nussman <banks@nussman.us>

bnussman added 12 commits April 9, 2024 17:32

initial work

fcf7827

filter options based on stackscript compatibility

0b82b26

implement complex preselection logic

e02f1c0

clean up a bit

c656c1a

implement details dialog

9a5b510

fix some query param logic

1b93698

lots of behavior changes to match production

325ef5f

fix image select clear behavior and fix table waypoint console error

8f1d6d6

improve validation for when image is null

c694197

first unit tests

5148d52

add lots of unit testing

94fa5f4

add stackscript event handler

e4e71f6

bnussman-akamai added the Linode Create Refactor label Apr 10, 2024

bnussman-akamai self-assigned this Apr 10, 2024

bnussman added 6 commits April 10, 2024 17:45

hook up validation packages for realtime validation

f56e4ad

Merge branch 'develop' into M3-7872-linode-create-refactor-stackscripts

26a5e44

use default validation behavior

c464078

Revert "hook up validation packages for realtime validation"

de158af

This reverts commit f56e4ad.

handle resets when switching tabs

e7f668b

add changesets

5ed5f57

bnussman-akamai marked this pull request as ready for review April 11, 2024 20:51

bnussman-akamai requested a review from a team as a code owner April 11, 2024 20:51

bnussman-akamai requested review from dwiley-akamai and hana-akamai and removed request for a team April 11, 2024 20:51

add some comments

658e7ec

bnussman-akamai added the Ready for Review label Apr 12, 2024

bnussman-akamai requested review from hkhalil-akamai, abailly-akamai and jaalah-akamai April 12, 2024 13:22

bold label and pre-select if only one option

fe974cb

bnussman added 2 commits April 12, 2024 10:40

improve ux

d53719a

fix unit tests

884b4b4

jaalah-akamai approved these changes Apr 12, 2024

View reviewed changes

hkhalil-akamai reviewed Apr 12, 2024

View reviewed changes

abailly-akamai reviewed Apr 15, 2024

View reviewed changes

add comment

09188d4

hkhalil-akamai approved these changes Apr 15, 2024

View reviewed changes

Merge branch 'develop' into M3-7872-linode-create-refactor-stackscripts

3a8cf7a

bnussman-akamai merged commit cffa916 into linode:develop Apr 18, 2024
18 checks passed

This was referenced Apr 25, 2024

Release v.118.0 - release → staging #10409

Closed

Release v1.118.0 - release → staging #10410

Merged

Release v1.118.0 - staging → master #10416

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upcoming: [M3-7872] - Linode Create Refactor - StackScripts #10367

upcoming: [M3-7872] - Linode Create Refactor - StackScripts #10367

bnussman-akamai commented Apr 10, 2024 •

edited

Loading

github-actions bot commented Apr 12, 2024 •

edited

Loading

jaalah-akamai commented Apr 12, 2024 •

edited

Loading

jaalah-akamai commented Apr 12, 2024 •

edited

Loading

jaalah-akamai commented Apr 12, 2024

jaalah-akamai commented Apr 12, 2024 •

edited

Loading

bnussman-akamai commented Apr 12, 2024

hkhalil-akamai left a comment

hkhalil-akamai Apr 12, 2024

bnussman-akamai Apr 15, 2024

abailly-akamai left a comment

abailly-akamai Apr 15, 2024

bnussman-akamai Apr 15, 2024

abailly-akamai Apr 15, 2024

bnussman-akamai Apr 15, 2024

abailly-akamai Apr 15, 2024

bnussman-akamai Apr 15, 2024 •

edited

Loading

abailly-akamai Apr 15, 2024

abailly-akamai Apr 15, 2024

abailly-akamai Apr 15, 2024

bnussman-akamai Apr 15, 2024 •

edited

Loading

abailly-akamai Apr 15, 2024

hkhalil-akamai left a comment

	imageID: rawParams.imageID as string \| undefined,
	imageId: rawParams.imageId as string \| undefined,

upcoming: [M3-7872] - Linode Create Refactor - StackScripts #10367

upcoming: [M3-7872] - Linode Create Refactor - StackScripts #10367

Conversation

bnussman-akamai commented Apr 10, 2024 • edited Loading

Description 📝

Main features ➕

Features that will come in Part 2

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

github-actions bot commented Apr 12, 2024 • edited Loading

jaalah-akamai commented Apr 12, 2024 • edited Loading

jaalah-akamai commented Apr 12, 2024 • edited Loading

jaalah-akamai commented Apr 12, 2024

jaalah-akamai commented Apr 12, 2024 • edited Loading

bnussman-akamai commented Apr 12, 2024

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

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

bnussman-akamai Apr 15, 2024 • edited Loading

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 Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hkhalil-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai commented Apr 10, 2024 •

edited

Loading

github-actions bot commented Apr 12, 2024 •

edited

Loading

jaalah-akamai commented Apr 12, 2024 •

edited

Loading

jaalah-akamai commented Apr 12, 2024 •

edited

Loading

jaalah-akamai commented Apr 12, 2024 •

edited

Loading

bnussman-akamai Apr 15, 2024 •

edited

Loading

bnussman-akamai Apr 15, 2024 •

edited

Loading