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

packages/api-v4/src/linodes/types.ts

@@ -302,8 +302,8 @@ export interface IPAllocationRequest {
   public: boolean;
 }
 
-interface UserData {
-  user_data: string;
+export interface UserData {
+  user_data: string | null;
 }
 
 export interface CreateLinodeRequest {
@@ -345,6 +345,7 @@ export interface LinodeCloneData {
 export interface RebuildRequest {
   image: string;
   root_pass: string;
+  metadata?: UserData;
   authorized_keys?: SSHKey[];
   authorized_users?: string[];
   stackscript_id?: number;

packages/manager/src/components/CheckBox/CheckBox.tsx

@@ -1,3 +1,4 @@
+import { SxProps } from '@mui/system';
 import classNames from 'classnames';
 import * as React from 'react';
 import CheckboxIcon from 'src/assets/icons/checkbox.svg';
@@ -39,10 +40,11 @@ interface Props extends CheckboxProps {
   text?: string | JSX.Element;
   toolTipText?: string | JSX.Element;
   toolTipInteractive?: boolean;
+  sxFormLabel?: SxProps;
 }
 
 const LinodeCheckBox = (props: Props) => {
-  const { toolTipInteractive, toolTipText, text, ...rest } = props;
+  const { toolTipInteractive, toolTipText, text, sxFormLabel, ...rest } = props;
   const classes = useStyles();
 
   const classnames = classNames({
@@ -67,6 +69,7 @@ const LinodeCheckBox = (props: Props) => {
             />
           }
           label={text}
+          sx={sxFormLabel}
         />
         {toolTipText ? (
           <HelpIcon interactive={toolTipInteractive} text={toolTipText} />

packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts

@@ -0,0 +1,8 @@
+import Notice from 'src/components/Notice';
+import { styled } from '@mui/material/styles';
+
+export const StyledNotice = styled(Notice)({
+  // @TODO: Remove the !important's once Notice.tsx has been refactored to use MUI's styled()
+  padding: '8px !important',
+  marginBottom: '0px !important',
+});

packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx

@@ -1,4 +1,8 @@
-import { rebuildLinode, RebuildRequest } from '@linode/api-v4/lib/linodes';
+import {
+  rebuildLinode,
+  RebuildRequest,
+  UserData,
+} from '@linode/api-v4/lib/linodes';
 import { RebuildLinodeSchema } from '@linode/validation/lib/linodes.schema';
 import { Formik, FormikProps } from 'formik';
 import { useSnackbar } from 'notistack';
@@ -8,11 +12,15 @@ import { compose } from 'recompose';
 import AccessPanel from 'src/components/AccessPanel';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
+import CheckBox from 'src/components/CheckBox';
+import Box from 'src/components/core/Box';
+import Divider from 'src/components/core/Divider';
 import { makeStyles, Theme } from 'src/components/core/styles';
 import Grid from 'src/components/Grid';
 import ImageSelect from 'src/components/ImageSelect';
 import TypeToConfirm from 'src/components/TypeToConfirm';
 import { resetEventsPolling } from 'src/eventsPolling';
+import UserDataAccordion from 'src/features/linodes/UserDataAccordion';
 import userSSHKeyHoc, {
   UserSSHKeyProps,
 } from 'src/features/linodes/userSSHKeyHoc';
@@ -25,6 +33,7 @@ import {
 } from 'src/utilities/formikErrorUtils';
 import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 import { extendValidationSchema } from 'src/utilities/validatePassword';
+import { StyledNotice } from './RebuildFromImage.styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -55,11 +64,15 @@ export type CombinedProps = Props & UserSSHKeyProps;
 interface RebuildFromImageForm {
   image: string;
   root_pass: string;
+  metadata?: UserData;
 }
 
 const initialValues: RebuildFromImageForm = {
   image: '',
   root_pass: '',
+  metadata: {
+    user_data: '',
+  },
 };
 
 export const RebuildFromImage: React.FC<CombinedProps> = (props) => {
@@ -79,12 +92,30 @@ export const RebuildFromImage: React.FC<CombinedProps> = (props) => {
 
   const classes = useStyles();
   const { enqueueSnackbar } = useSnackbar();
+  const { data: _imagesData, error: imagesError } = useAllImagesQuery();
 
   const RebuildSchema = () => extendValidationSchema(RebuildLinodeSchema);
 
   const [confirmationText, setConfirmationText] = React.useState<string>('');
 
-  const { data: _imagesData, error: imagesError } = useAllImagesQuery();
+  const [userData, setUserData] = React.useState<string | undefined>('');
+  const [shouldReuseUserData, setShouldReuseUserData] = React.useState<boolean>(
+    false
+  );
+
+  const handleUserDataChange = (userData: string) => {
+    setUserData(userData);
+  };
+
+  const handleShouldReuseUserDataChange = () => {
+    setShouldReuseUserData((shouldReuseUserData) => !shouldReuseUserData);
+  };
+
+  React.useEffect(() => {
+    if (shouldReuseUserData) {
+      setUserData('');
+    }
+  }, [shouldReuseUserData]);
 
   const submitButtonDisabled =
     preferences?.type_to_confirm !== false && confirmationText !== linodeLabel;
@@ -101,11 +132,20 @@ export const RebuildFromImage: React.FC<CombinedProps> = (props) => {
     const params: RebuildRequest = {
       image,
       root_pass,
+      metadata: {
+        user_data:
+          userData && !shouldReuseUserData ? window.btoa(userData) : null,
+      },
       authorized_users: userSSHKeys
         .filter((u) => u.selected)
         .map((u) => u.username),
     };
 
+    // If no user data has been added, do not include the metadata property in the payload.
+    if (!userData && !shouldReuseUserData) {
+      delete params['metadata'];
+    }
+
     // @todo: eventually this should be a dispatched action instead of a services library call
     rebuildLinode(linodeId, params)
       .then((_) => {
@@ -168,6 +208,13 @@ export const RebuildFromImage: React.FC<CombinedProps> = (props) => {
           handleRebuildError(status.generalError);
         }
 
+        const shouldDisplayUserDataAccordion = Boolean(
+          values.image &&
+            _imagesData
+              ?.find((image) => image.id === values.image)
+              ?.capabilities?.includes('cloud-init')
+        );
+
         return (
           <Grid item className={classes.root}>
             <form>
@@ -203,6 +250,32 @@ export const RebuildFromImage: React.FC<CombinedProps> = (props) => {
                 disabled={disabled}
                 passwordHelperText={passwordHelperText}
               />
+              {shouldDisplayUserDataAccordion ? (
+                <>
+                  <Divider spacingTop={40} />
+                  <UserDataAccordion
+                    userData={userData}
+                    onChange={handleUserDataChange}
+                    disabled={shouldReuseUserData}
+                    renderNotice={() => (
+                      <StyledNotice
+                        success
+                        text="Adding new user data is recommended as part of the rebuild process."
+                      />
+                    )}
+                    renderCheckbox={() => (
+                      <Box>
+                        <CheckBox
+                          checked={shouldReuseUserData}
+                          onChange={handleShouldReuseUserDataChange}
+                          text="Reuse user data previously provided for this Linode."
+                          sxFormLabel={{ paddingLeft: '2px' }}
+                        />
+                      </Box>
+                    )}
+                  />
+                </>
+              ) : null}
               <ActionsPanel className={classes.actionPanel}>
                 <TypeToConfirm
                   confirmationText={

packages/manager/src/features/linodes/UserDataAccordion.styles.ts

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+import HelpIcon from 'src/components/HelpIcon';
+
+export const StyledHelpIcon = styled(HelpIcon)({
+  padding: '0px 0px 4px 8px',
+  '& svg': {
+    fill: 'currentColor',
+    stroke: 'none',
+  },
+});

packages/manager/src/features/linodes/UserDataAccordion.test.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+import UserDataAccordion from 'src/features/linodes/UserDataAccordion';
+
+describe('UserDataAccordion', () => {
+  it('should NOT have a notice when a renderNotice prop is not passed in', () => {
+    const { queryByTestId } = renderWithTheme(
+      <UserDataAccordion userData={''} onChange={() => null} />
+    );
+
+    expect(queryByTestId('render-notice')).toBeNull();
+  });
+});

packages/manager/src/features/linodes/UserDataAccordion.tsx

@@ -1,40 +1,23 @@
 import * as React from 'react';
 import Accordion from 'src/components/Accordion';
-import { makeStyles } from 'src/components/core/styles';
 import Typography from 'src/components/core/Typography';
-import HelpIcon from 'src/components/HelpIcon';
-import Notice from 'src/components/Notice';
 import Link from 'src/components/Link';
+import Notice from 'src/components/Notice';
 import TextField from 'src/components/TextField';
+import { StyledHelpIcon } from './UserDataAccordion.styles';
 
 interface Props {
   userData: string | undefined;
   onChange: (userData: string) => void;
   disabled?: boolean;
+  renderNotice?: () => JSX.Element;
+  renderCheckbox?: () => JSX.Element;
 }
 
-const useStyles = makeStyles(() => ({
-  helpIcon: {
-    padding: '0px 0px 4px 8px',
-    '& svg': {
-      fill: 'currentColor',
-      stroke: 'none',
-    },
-  },
-  accordionSummary: {
-    padding: '5px 24px 0px 24px',
-  },
-  accordionDetail: {
-    padding: '0px 24px 24px 24px',
-  },
-}));
-
 const UserDataAccordion = (props: Props) => {
-  const { disabled, userData, onChange } = props;
+  const { disabled, userData, onChange, renderNotice, renderCheckbox } = props;
   const [formatWarning, setFormatWarning] = React.useState(false);
 
-  const classes = useStyles();
-
   const checkFormat = ({
     userData,
     hasInputValueChanged,
@@ -56,50 +39,33 @@ const UserDataAccordion = (props: Props) => {
     }
   };
 
-  const accordionHeading = (
-    <>
-      Add User Data{' '}
-      <HelpIcon
-        text={
-          <>
-            User data is part of a virtual machine&rsquo;s cloud-init metadata
-            containing information related to a user&rsquo;s local account.{' '}
-            <Link to="/">Learn more.</Link>
-          </>
-        }
-        className={classes.helpIcon}
-        interactive
-      />
-    </>
-  );
+  const sxDetails = {
+    padding: `0px 24px 24px ${renderNotice ? 0 : 24}px`,
+  };
 
   return (
     <Accordion
       heading={accordionHeading}
-      style={{ marginTop: 24 }}
+      style={{ marginTop: renderNotice && renderCheckbox ? 0 : 24 }} // for now, these props can be taken as an indicator we're in the Rebuild flow.
       headingProps={{
         variant: 'h2',
       }}
       summaryProps={{
-        classes: {
-          root: classes.accordionSummary,
-        },
+        sx: { padding: '5px 24px 0px 24px' },
       }}
-      detailProps={{
-        classes: {
-          root: classes.accordionDetail,
+      detailProps={{ sx: sxDetails }}
+      sx={{
+        '&:before': {
+          display: 'none',
         },
       }}
     >
-      <Typography>
-        <Link to="https://cloudinit.readthedocs.io/en/latest/reference/examples.html">
-          User Data
-        </Link>{' '}
-        is part of a virtual machine&rsquo;s cloud-init metadata that contains
-        anything related to a user&rsquo;s local account, including username and
-        user group(s). <br /> Accepted formats are YAML and bash.{' '}
-        <Link to="https://www.linode.com/docs">Learn more.</Link>
-      </Typography>
+      {renderNotice ? (
+        <div data-testid="render-notice">{renderNotice()}</div>
+      ) : (
+        userDataExplanatoryCopy
+      )}
+      {acceptedFormatsCopy}
       {formatWarning ? (
         <Notice warning spacingTop={16} spacingBottom={16}>
           This user data may not be in a format accepted by cloud-init.
@@ -121,8 +87,43 @@ const UserDataAccordion = (props: Props) => {
         }
         data-qa-user-data-input
       />
+      {renderCheckbox ? renderCheckbox() : null}
     </Accordion>
   );
 };
 
 export default UserDataAccordion;
+
+const accordionHeading = (
+  <>
+    Add User Data{' '}
+    <StyledHelpIcon
+      text={
+        <>
+          User data is part of a virtual machine&rsquo;s cloud-init metadata
+          containing information related to a user&rsquo;s local account.{' '}
+          <Link to="/">Learn more.</Link>
+        </>
+      }
+      interactive
+    />
+  </>
+);
+
+const userDataExplanatoryCopy = (
+  <Typography>
+    <Link to="https://cloudinit.readthedocs.io/en/latest/reference/examples.html">
+      User Data
+    </Link>{' '}
+    is part of a virtual machine&rsquo;s cloud-init metadata that contains
+    anything related to a user&rsquo;s local account, including username and
+    user group(s).
+  </Typography>
+);
+
+const acceptedFormatsCopy = (
+  <Typography>
+    <br /> Accepted formats are YAML and bash.{' '}
+    <Link to="https://www.linode.com/docs">Learn more.</Link>
+  </Typography>
+);