diff --git a/packages/manager/src/components/FileUploader/FileUploader.tsx b/packages/manager/src/components/FileUploader/FileUploader.tsx index 3356f2b35a1..4996bb9c426 100644 --- 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 = (props) => { const { label, description, + isCloudInit, region, dropzoneDisabled, apiError, @@ -299,6 +301,7 @@ const FileUploader: React.FC = (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 index 146d4b686ed..e2d2dbf8eae 100644 --- 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 = ( + + 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 doc + +); export interface Props { label: string; description: string; + isCloudInit: boolean; changeLabel: (e: React.ChangeEvent) => void; changeDescription: (e: React.ChangeEvent) => void; + changeIsCloudInit: (e: React.ChangeEvent) => void; } export const ImageUpload: React.FC = (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) => { errorText={errorMap.description} disabled={!canCreateImage} /> +
+ +
= (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 index daf7a947475..91daeffc265 100644 --- 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 = (props) => { description={description} changeLabel={handleSetLabel} changeDescription={handleSetDescription} + changeIsCloudInit={() => setIsCloudInit(!isCloudInit)} + isCloudInit={isCloudInit} /> ), },