fix(instance) ensure instance type is derived from image type also fo…

…r custom images created from an instance snapshot. Kepp supporting iso volume quick links to the instance creation flow

Signed-off-by: David Edler <david.edler@canonical.com>

src/pages/images/CustomIsoModal.tsx

@@ -7,7 +7,7 @@ import { IsoImage } from "types/iso";
 
 interface Props {
   onClose: () => void;
-  onSelect: (image: RemoteImage, type: LxdImageType | null) => void;
+  onSelect: (image: RemoteImage, type?: LxdImageType) => void;
 }
 
 const SELECT_ISO = "selectIso";

src/pages/images/CustomIsoSelector.tsx

@@ -12,7 +12,7 @@ import { useSupportedFeatures } from "context/useSupportedFeatures";
 
 interface Props {
   primaryImage: IsoImage | null;
-  onSelect: (image: RemoteImage, type: LxdImageType | null) => void;
+  onSelect: (image: RemoteImage, type?: LxdImageType) => void;
   onUpload: () => void;
   onCancel: () => void;
 }

src/pages/images/ImageSelector.tsx

@@ -29,7 +29,7 @@ import { fetchImageList } from "api/images";
 import { useParams } from "react-router-dom";
 
 interface Props {
-  onSelect: (image: RemoteImage, type: LxdImageType | null) => void;
+  onSelect: (image: RemoteImage, type?: LxdImageType) => void;
   onClose: () => void;
 }
 
@@ -53,7 +53,7 @@ const ImageSelector: FC<Props> = ({ onSelect, onClose }) => {
   const [os, setOs] = useState<string>("");
   const [release, setRelease] = useState<string>("");
   const [arch, setArch] = useState<string>("amd64");
-  const [type, setType] = useState<LxdImageType | null>(null);
+  const [type, setType] = useState<LxdImageType | undefined>(undefined);
   const [variant, setVariant] = useState<string>(ANY);
   const { project } = useParams<{ project: string }>();
 

src/pages/images/actions/SelectImageBtn.tsx

@@ -5,13 +5,13 @@ import { LxdImageType, RemoteImage } from "types/image";
 import ImageSelector from "pages/images/ImageSelector";
 
 interface Props {
-  onSelect: (image: RemoteImage, type: LxdImageType | null) => void;
+  onSelect: (image: RemoteImage, type?: LxdImageType) => void;
 }
 
 const SelectImageBtn: FC<Props> = ({ onSelect }) => {
   const { openPortal, closePortal, isOpen, Portal } = usePortal();
 
-  const handleSelect = (image: RemoteImage, type: LxdImageType | null) => {
+  const handleSelect = (image: RemoteImage, type?: LxdImageType) => {
     closePortal();
     onSelect(image, type);
   };

src/pages/images/actions/UseCustomIsoBtn.tsx

@@ -5,13 +5,13 @@ import { LxdImageType, RemoteImage } from "types/image";
 import CustomIsoModal from "pages/images/CustomIsoModal";
 
 interface Props {
-  onSelect: (image: RemoteImage, type: LxdImageType | null) => void;
+  onSelect: (image: RemoteImage, type?: LxdImageType) => void;
 }
 
 const UseCustomIsoBtn: FC<Props> = ({ onSelect }) => {
   const { openPortal, closePortal, isOpen, Portal } = usePortal();
 
-  const handleSelect = (image: RemoteImage, type: LxdImageType | null) => {
+  const handleSelect = (image: RemoteImage, type?: LxdImageType) => {
     closePortal();
     onSelect(image, type);
   };

src/pages/instances/CreateInstance.tsx

@@ -302,7 +302,7 @@ const CreateInstance: FC = () => {
 
   const isLocalIsoImage = formik.values.image?.server === LOCAL_ISO;
 
-  const handleSelectImage = (image: RemoteImage, type: LxdImageType | null) => {
+  const handleSelectImage = (image: RemoteImage, type?: LxdImageType) => {
     void formik.setFieldValue("image", image);
 
     const devices = formik.values.devices.filter(
@@ -314,21 +314,19 @@ const CreateInstance: FC = () => {
     }
     void formik.setFieldValue("devices", devices);
 
-    if (isVmOnlyImage(image)) {
+    if (type) {
+      void formik.setFieldValue("instanceType", type);
+    } else if (isVmOnlyImage(image)) {
       void formik.setFieldValue("instanceType", "virtual-machine");
     } else if (isContainerOnlyImage(image)) {
       void formik.setFieldValue("instanceType", "container");
-    } else if (type) {
-      void formik.setFieldValue("instanceType", type);
     }
   };
 
   useEffect(() => {
-    if (location.state?.selectedImage) {
-      const type = location.state.selectedImage.volume
-        ? "iso-volume"
-        : location.state.selectedImage.type ?? null;
-      handleSelectImage(location.state.selectedImage, type);
+    const imageFromLink = location.state?.selectedImage;
+    if (imageFromLink) {
+      handleSelectImage(imageFromLink, imageFromLink.type);
     }
   }, [location.state?.selectedImage]);
 

src/pages/instances/forms/InstanceCreateDetailsForm.tsx

@@ -73,7 +73,7 @@ export const instanceDetailPayload = (values: CreateInstanceFormValues) => {
 
 interface Props {
   formik: FormikProps<CreateInstanceFormValues>;
-  onSelectImage: (image: RemoteImage, type: LxdImageType | null) => void;
+  onSelectImage: (image: RemoteImage, type?: LxdImageType) => void;
   project: string;
 }
 

src/types/image.d.ts

@@ -1,6 +1,6 @@
 import { LxdStorageVolume } from "types/storage";
 
-export type LxdImageType = "container" | "virtual-machine" | "iso-volume";
+export type LxdImageType = "container" | "virtual-machine";
 
 interface LxdImageAlias {
   name: string;

src/util/images.tsx

@@ -2,7 +2,7 @@ import { LxdImage, RemoteImage } from "types/image";
 import { LxdStorageVolume } from "types/storage";
 
 export const isVmOnlyImage = (image: RemoteImage): boolean | undefined => {
-  if (image.server === LOCAL_ISO) {
+  if (image.server === LOCAL_ISO || image.type === "virtual-machine") {
     return true;
   }
   return image.variant?.includes("desktop");
@@ -32,6 +32,7 @@ export const isoToRemoteImage = (volume: LxdStorageVolume): RemoteImage => {
     pool: volume.pool,
     release: "-",
     server: LOCAL_ISO,
+    type: "virtual-machine",
     variant: "iso",
     created_at: new Date(volume.created_at).getTime(),
     volume: volume,