feat: [M3-6146] - Add User Data to Linode Rebuild flow

[dwiley-akamai]

Description 📝

Adds User Data section to the Linode Rebuild flow when an image with cloud-init capability is selected.

Preview 📷

To-Do

• Add unit tests

How to test 🧪

• Ensure that the existing User Data work elsewhere in the app has not been adversely impacted by changes made on this branch
• Confirm that Linode rebuild requests go through with the { metadata: { user_data: [encoded string ...] } } property (or null instead of encoded string when the Reuse checkbox is marked)

[hana-akamai]

Can we make the spacing between Add User Data and SSH Keys the same?

[dwiley-akamai]

I would keep this as a normal div in the JSX with no styles attached to it. Then allow Notice to accept an sx prop where you pass the padding and marginBottom down to it. You won't need the important tags and there will be no need to reference the .notice class which we need to avoid doing from now on as we refactor.

<Notice /> is built largely with <Grid />, which is a custom implementation to mimic MUIv4's grid behavior, and src/components/core/Grid.tsx returns a <div>. If I'm understanding correctly, the sx prop in Notice.tsx would be applied to the top-level <Grid /> instance. Is the sx prop approach still viable here @jaalah-akamai (since we're not using the MUIv5 Grid)?

[bnussman-akamai]

Can we use a more descriptive variable name for reuseUserData? Maybe something like shouldReuseUserData? reuseUserData sounds more like a function name to me.

Also what makes us need to use state here over the formik form?

Suggested change

	checked={reuseUserData}
	checked={reuseUserData}

[dwiley-akamai]

With regards to the state for checked, since we wouldn't want to submit shouldReuseUserData as part of the payload, I think we're in a similar position here as we were in for AccessKeyDrawer.tsx

[hana-akamai]

Sorry, looks like I misunderstood the rebuild endpoint 😅

1. By default, if no user data has been added/user hasn't clicked on the re-use checkbox, we should send user_data as null to the rebuild endpoint
2. If the user checks the reuse checkbox, then we should not send any metadata/user data
3. If metadata/user data is given, we send user_data encoded in base64

[dwiley-akamai]

This should be good to go now 🚀

[cpathipa]

Overall, it looks great. I only have a few comments left related to the naming of JSX elements.

[cpathipa]

We could also access props within Styled components to conditionally apply styles.
Example:

const StyledAccordion = styled(Accordion)`
  margin-top: ${({ renderNotice, renderCheckbox }) => (renderNotice && renderCheckbox ? 0 : 24)};
  &:before {
    display: none;
  }
`;
<StyledAccordion
  heading={accordionHeading}
  renderNotice={renderNotice}
  renderCheckbox={renderCheckbox}
....
>

[jaalah-akamai]

If you do down that route, for code readability I recommend using only one top-level function, especially if in the future we need to add to this:

const Accordion = styled(AccordionComponent)(({ renderNotice, renderCheckbox }) => ({
  marginTop: renderNotice && renderCheckbox ? 0 : 24,
  '&:before': {
    display: 'none',
  },
}));

[hana-akamai]

🚀