feat: support vmdk import for vm instance creation

Signed-off-by: Mason Hu <[email protected]>

src/context/useSupportedFeatures.tsx

@@ -26,5 +26,8 @@ export const useSupportedFeatures = () => {
     hasAccessManagement: apiExtensions.has("access_management"),
     hasExplicitTrustToken: apiExtensions.has("explicit_trust_token"),
     hasInstanceCreateStart: apiExtensions.has("instance_create_start"),
+    hasInstanceImportConversion: apiExtensions.has(
+      "instance_import_conversion",
+    ),
   };
 };

src/pages/instances/actions/UploadInstanceFileBtn.tsx

@@ -0,0 +1,27 @@
+import { FC } from "react";
+import { Button } from "@canonical/react-components";
+import usePortal from "react-useportal";
+import UploadInstanceFileModal from "../forms/UploadInstanceFileModal";
+
+interface Props {
+  name?: string;
+}
+
+const UploadInstanceFileBtn: FC<Props> = ({ name }) => {
+  const { openPortal, closePortal, isOpen, Portal } = usePortal();
+
+  return (
+    <>
+      <Button onClick={openPortal} type="button">
+        <span>Upload instance file</span>
+      </Button>
+      {isOpen && (
+        <Portal>
+          <UploadInstanceFileModal close={closePortal} name={name} />
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default UploadInstanceFileBtn;

src/pages/instances/forms/InstanceCreateDetailsForm.tsx

@@ -24,7 +24,7 @@ import UseCustomIsoBtn from "pages/images/actions/UseCustomIsoBtn";
 import AutoExpandingTextArea from "components/AutoExpandingTextArea";
 import ScrollableForm from "components/ScrollableForm";
 import { useSupportedFeatures } from "context/useSupportedFeatures";
-import UploadInstanceBtn from "pages/instances/actions/UploadInstanceBtn";
+import UploadInstanceFileBtn from "../actions/UploadInstanceFileBtn";
 
 export interface InstanceDetailsFormValues {
   name?: string;
@@ -143,7 +143,7 @@ const InstanceCreateDetailsForm: FC<Props> = ({
                 {hasCustomVolumeIso && (
                   <UseCustomIsoBtn onSelect={onSelectImage} />
                 )}
-                <UploadInstanceBtn />
+                <UploadInstanceFileBtn name={formik.values.name} />
               </>
             )}
           </div>

src/pages/instances/forms/InstanceFileTypeSelector.tsx

@@ -0,0 +1,40 @@
+import { RadioInput } from "@canonical/react-components";
+import { FC } from "react";
+
+export type InstanceFileType = "instance-backup" | "external-format";
+
+interface Props {
+  value: InstanceFileType;
+  onChange: (value: InstanceFileType) => void;
+}
+
+const InstanceFileTypeSelector: FC<Props> = ({ value, onChange }) => {
+  return (
+    <>
+      <label htmlFor="file-type">Select upload file type</label>
+      <div id="file-type">
+        <div className="u-sv1">
+          <RadioInput
+            label="LXD backup archive (.tar.gz)"
+            checked={value === "instance-backup"}
+            onChange={() => onChange("instance-backup")}
+          />
+        </div>
+        <div className="u-sv3">
+          <RadioInput
+            label={
+              <span>
+                External format (.qcow2, .vmdk,{" "}
+                <abbr title=".qcow, .vdi, .vhdx">etc...</abbr>)
+              </span>
+            }
+            checked={value === "external-format"}
+            onChange={() => onChange("external-format")}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default InstanceFileTypeSelector;