feat: [M3-6149] - Add Cloud Init checkbox to Image Capture/Create flow (

#8807)

* Add checkbox to Capture Image form

* Update request to support cloud_init

* Fix controlled component error where checkbox is undefined

* Update image validation and types interface for cloud_init

* (Debugging  an undefined value in createImage request)

* Add cloud_init to redux create fn params to include in request

* Move checkbox state to ImageCreate so value persists across tabs; code cleanup

* Code clean up

* Fix comment referencing cloud-init for naming consistency

* Update CheckBox tooltip: allow interactivity, minor styling fix

* Add final tooltip copy for now

packages/api-v4/src/images/images.ts

@@ -40,16 +40,19 @@ export const getImages = (params: any = {}, filters: any = {}) =>
  * @param diskId { number } The ID of the Linode Disk that this Image will be created from.
  * @param label { string } A short description of the Image. Labels cannot contain special characters.
  * @param description { string } A detailed description of this Image.
+ * @param cloud_init { boolean } An indicator of whether Image supports cloud-init.
  */
 export const createImage = (
   diskId: number,
   label?: string,
-  description?: string
+  description?: string,
+  cloud_init?: boolean
 ) => {
   const data = {
     disk_id: diskId,
     ...(label && { label }),
     ...(description && { description }),
+    ...(cloud_init && { cloud_init }),
   };
 
   return Request<Image>(

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

@@ -29,6 +29,7 @@ export interface UploadImageResponse {
 export interface BaseImagePayload {
   label?: string;
   description?: string;
+  cloud_init?: boolean;
 }
 
 export interface CreateImagePayload extends BaseImagePayload {

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

@@ -30,15 +30,19 @@ const useStyles = makeStyles((theme: Theme) => ({
       fill: `${theme.bg.main}`,
     },
   },
+  formControlStyles: {
+    marginRight: 0,
+  },
 }));
 
 interface Props extends CheckboxProps {
   text?: string | JSX.Element;
-  toolTipText?: string;
+  toolTipText?: string | JSX.Element;
+  toolTipInteractive?: boolean;
 }
 
-const LinodeCheckBox: React.FC<Props> = (props) => {
-  const { toolTipText, text, ...rest } = props;
+const LinodeCheckBox = (props: Props) => {
+  const { toolTipInteractive, toolTipText, text, ...rest } = props;
   const classes = useStyles();
 
   const classnames = classNames({
@@ -51,6 +55,7 @@ const LinodeCheckBox: React.FC<Props> = (props) => {
     return (
       <React.Fragment>
         <FormControlLabel
+          className={classes.formControlStyles}
           control={
             <Checkbox
               color="primary"
@@ -61,9 +66,11 @@ const LinodeCheckBox: React.FC<Props> = (props) => {
               {...rest}
             />
           }
-          label={props.text}
+          label={text}
         />
-        {toolTipText && <HelpIcon text={toolTipText} />}
+        {toolTipText ? (
+          <HelpIcon interactive={toolTipInteractive} text={toolTipText} />
+        ) : null}
       </React.Fragment>
     );
   }

packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx

@@ -23,6 +23,7 @@ import { useGrants, useProfile } from 'src/queries/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import getAPIErrorFor from 'src/utilities/getAPIErrorFor';
 import Link from 'src/components/Link';
+import CheckBox from 'src/components/CheckBox';
 
 const useStyles = makeStyles((theme: Theme) => ({
   container: {
@@ -57,21 +58,37 @@ const useStyles = makeStyles((theme: Theme) => ({
       width: '100%',
     },
   },
+  cloudInitCheckboxWrapper: {
+    marginTop: theme.spacing(2),
+    marginLeft: 3,
+  },
 }));
 
+const cloudInitTooltipMessage = (
+  <Typography>
+    Many Linode supported distributions are compatible with cloud-init by
+    default, or you may have installed cloud-init.{' '}
+    <Link to="/">Learn more.</Link>
+  </Typography>
+);
+
 export interface Props {
   label?: string;
   description?: string;
+  isCloudInit?: boolean;
   changeLabel: (e: React.ChangeEvent<HTMLInputElement>) => void;
   changeDescription: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  changeIsCloudInit: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const CreateImageTab: React.FC<Props & ImagesDispatch> = (props) => {
   const {
     label,
     description,
+    isCloudInit,
     changeLabel,
     changeDescription,
+    changeIsCloudInit,
     createImage,
   } = props;
 
@@ -150,6 +167,7 @@ export const CreateImageTab: React.FC<Props & ImagesDispatch> = (props) => {
       diskID: Number(selectedDisk),
       label,
       description: safeDescription,
+      cloud_init: isCloudInit ? isCloudInit : undefined,
     })
       .then((_) => {
         resetEventsPolling();
@@ -265,6 +283,15 @@ export const CreateImageTab: React.FC<Props & ImagesDispatch> = (props) => {
         />
       </Box>
       {isRawDisk ? rawDiskWarning : null}
+      <Box className={classes.cloudInitCheckboxWrapper}>
+        <CheckBox
+          checked={isCloudInit}
+          onChange={changeIsCloudInit}
+          text="This image is Cloud-init compatible"
+          toolTipText={cloudInitTooltipMessage}
+          toolTipInteractive
+        />
+      </Box>
       <>
         <TextField
           label="Label"

packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx

@@ -18,6 +18,7 @@ export const ImageCreate: React.FC<CombinedProps> = (props) => {
   const [description, setDescription] = React.useState<string>(
     location?.state ? location.state.imageDescription : ''
   );
+  const [isCloudInit, setIsCloudInit] = React.useState<boolean>(false);
 
   const handleSetLabel = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
@@ -37,8 +38,10 @@ export const ImageCreate: React.FC<CombinedProps> = (props) => {
         <CreateImageTab
           label={label}
           description={description}
+          isCloudInit={isCloudInit}
           changeLabel={handleSetLabel}
           changeDescription={handleSetDescription}
+          changeIsCloudInit={() => setIsCloudInit(!isCloudInit)}
         />
       ),
     },

packages/manager/src/store/image/image.requests.ts

@@ -29,7 +29,8 @@ export const requestImages = createRequestThunk(requestImagesActions, () =>
 
 export const createImage = createRequestThunk(
   createImageActions,
-  ({ diskID, label, description }) => _create(diskID, label, description)
+  ({ diskID, label, description, cloud_init }) =>
+    _create(diskID, label, description, cloud_init)
 );
 
 export const uploadImage = createRequestThunk(uploadImageActions, (payload) =>

packages/validation/src/images.schema.ts

@@ -1,4 +1,4 @@
-import { number, object, string } from 'yup';
+import { boolean, number, object, string } from 'yup';
 
 const labelSchema = string()
   .max(50, 'Length must be 50 characters or less.')
@@ -10,6 +10,7 @@ const labelSchema = string()
 export const baseImageSchema = object().shape({
   label: labelSchema.notRequired(),
   description: string().notRequired().min(1).max(65000),
+  cloud_init: boolean().notRequired(),
 });
 
 export const createImageSchema = baseImageSchema.shape({