feat: [M3-6150] - Add Cloud-init compatible check box to Image Upload…

… flow (#8800) * Add Cloud-init compatible check box * use Checkbox component and reduce space between label and tooltip icon * add new fileds for image create * code cleanup * make cloud_in as optional * Code cleanup * Copy update and PR feedback * code cleanup * Enable interactive to tooltip
linode · Feb 28, 2023 · f313d78 · f313d78
1 parent 35daaf1
commit f313d78
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/packages/manager/src/components/FileUploader/FileUploader.tsx b/packages/manager/src/components/FileUploader/FileUploader.tsx
@@ -116,6 +116,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 interface Props {
   label: string;
   description?: string;
+  isCloudInit?: boolean;
   region: string;
   dropzoneDisabled: boolean;
   apiError: string | undefined;
@@ -131,6 +132,7 @@ const FileUploader: React.FC<CombinedProps> = (props) => {
   const {
     label,
     description,
+    isCloudInit,
     region,
     dropzoneDisabled,
     apiError,
@@ -299,6 +301,7 @@ const FileUploader: React.FC<CombinedProps> = (props) => {
           uploadImage({
             label,
             description: description || undefined,
+            cloud_init: isCloudInit || undefined,
             region,
           })
         )

diff --git a/packages/manager/src/features/Images/ImageUpload.tsx b/packages/manager/src/features/Images/ImageUpload.tsx
@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
+import CheckBox from 'src/components/CheckBox';
 import ConfirmationDialog from 'src/components/ConfirmationDialog';
 import Paper from 'src/components/core/Paper';
 import { makeStyles, Theme } from 'src/components/core/styles';
@@ -55,16 +56,37 @@ const useStyles = makeStyles((theme: Theme) => ({
     ...theme.applyLinkStyles,
     fontWeight: 700,
   },
+  cloudInitCheckboxWrapper: {
+    marginTop: theme.spacing(2),
+    marginLeft: '3px',
+  },
 }));
+
+const cloudInitTooltipMessage = (
+  <Typography>
+    Only check this box if your Custom Image that is compatible with cloud-init,
+    or has had cloud-init installed at some point, and the config has been
+    changed to use our data service. <Link to="/">Link to doc</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 ImageUpload: React.FC<Props> = (props) => {
-  const { label, description, changeLabel, changeDescription } = props;
+  const {
+    label,
+    description,
+    changeLabel,
+    changeDescription,
+    changeIsCloudInit,
+    isCloudInit,
+  } = props;
 
   const { data: profile } = useProfile();
   const { data: grants } = useGrants();
@@ -213,6 +235,15 @@ export const ImageUpload: React.FC<Props> = (props) => {
             errorText={errorMap.description}
             disabled={!canCreateImage}
           />
+          <div className={classes.cloudInitCheckboxWrapper}>
+            <CheckBox
+              checked={isCloudInit}
+              onChange={changeIsCloudInit}
+              text="This image is Cloud-init compatible"
+              toolTipText={cloudInitTooltipMessage}
+              toolTipInteractive
+            />
+          </div>
 
           <RegionSelect
             label="Region"
@@ -249,6 +280,7 @@ export const ImageUpload: React.FC<Props> = (props) => {
             label={label}
             description={description}
             region={region}
+            isCloudInit={isCloudInit}
             dropzoneDisabled={uploadingDisabled}
             apiError={errorMap.none} // Any errors that aren't related to 'label', 'description', or 'region' fields
             setErrors={setErrors}

diff --git a/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx b/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx
@@ -54,6 +54,8 @@ export const ImageCreate: React.FC<CombinedProps> = (props) => {
           description={description}
           changeLabel={handleSetLabel}
           changeDescription={handleSetDescription}
+          changeIsCloudInit={() => setIsCloudInit(!isCloudInit)}
+          isCloudInit={isCloudInit}
         />
       ),
     },