feat: Add create instance from snapshot feature [WD-14411] (#858)

## Done

- Add duplicate snapshot feature

src/pages/cluster/ClusterMemberSelector.tsx

@@ -0,0 +1,38 @@
+import { Select, SelectProps } from "@canonical/react-components";
+import { useQuery } from "@tanstack/react-query";
+import { fetchClusterMembers } from "api/cluster";
+import { useSettings } from "context/useSettings";
+import React, { FC } from "react";
+import { queryKeys } from "util/queryKeys";
+import { isClusteredServer } from "util/settings";
+
+const ClusterMemberSelector: FC<SelectProps> = ({
+  label,
+  disabled,
+  ...props
+}) => {
+  const { data: settings } = useSettings();
+  const isClustered = isClusteredServer(settings);
+  const { data: clusterMembers = [], isLoading: clusterMembersLoading } =
+    useQuery({
+      queryKey: [queryKeys.cluster],
+      queryFn: fetchClusterMembers,
+      enabled: isClustered,
+    });
+
+  return isClustered ? (
+    <Select
+      {...props}
+      label={label ?? "Cluster member"}
+      options={clusterMembers.map((clusterMember) => {
+        return {
+          label: clusterMember.server_name,
+          value: clusterMember.server_name,
+        };
+      })}
+      disabled={disabled || clusterMembersLoading}
+    />
+  ) : null;
+};
+
+export default ClusterMemberSelector;

src/pages/instances/actions/UploadInstanceBtn.tsx

@@ -68,7 +68,7 @@ const UploadInstanceBtn: FC = () => {
   const handleSuccess = (instanceName: string) => {
     const message = (
       <>
-        Created Instance <strong>{instanceName}</strong>.
+        Created instance <strong>{instanceName}</strong>.
       </>
     );
 

src/pages/instances/actions/snapshots/CreateInstanceFromSnapshotBtn.tsx

@@ -0,0 +1,48 @@
+import { FC } from "react";
+import { LxdInstance, LxdInstanceSnapshot } from "types/instance";
+import { Button, Icon } from "@canonical/react-components";
+import usePortal from "react-useportal";
+import CreateInstanceFromSnapshotForm from "../../forms/CreateInstanceFromSnapshotForm";
+
+interface Props {
+  instance: LxdInstance;
+  snapshot: LxdInstanceSnapshot;
+  isDeleting: boolean;
+  isRestoring: boolean;
+}
+
+const CreateInstanceFromSnapshotBtn: FC<Props> = ({
+  instance,
+  snapshot,
+  isDeleting,
+  isRestoring,
+}) => {
+  const { openPortal, closePortal, isOpen, Portal } = usePortal();
+
+  return (
+    <>
+      {isOpen && (
+        <Portal>
+          <CreateInstanceFromSnapshotForm
+            close={closePortal}
+            instance={instance}
+            snapshot={snapshot}
+          />
+        </Portal>
+      )}
+      <Button
+        appearance="base"
+        hasIcon
+        dense
+        aria-label="Create instance"
+        disabled={isDeleting || isRestoring}
+        onClick={openPortal}
+        title="Create instance"
+      >
+        <Icon name="plus" />
+      </Button>
+    </>
+  );
+};
+
+export default CreateInstanceFromSnapshotBtn;

src/pages/instances/actions/snapshots/InstanceSnapshotActions.tsx

@@ -13,6 +13,7 @@ import ConfirmationForce from "components/ConfirmationForce";
 import { useEventQueue } from "context/eventQueue";
 import InstanceEditSnapshotBtn from "./InstanceEditSnapshotBtn";
 import CreateImageFromInstanceSnapshotBtn from "pages/instances/actions/snapshots/CreateImageFromInstanceSnapshotBtn";
+import CreateInstanceFromSnapshotBtn from "./CreateInstanceFromSnapshotBtn";
 
 interface Props {
   instance: LxdInstance;
@@ -103,13 +104,6 @@ const InstanceSnapshotActions: FC<Props> = ({
             isDeleting={isDeleting}
             isRestoring={isRestoring}
           />,
-          <CreateImageFromInstanceSnapshotBtn
-            key="publish"
-            instance={instance}
-            snapshot={snapshot}
-            isRestoring={isRestoring}
-            isDeleting={isDeleting}
-          />,
           <ConfirmationButton
             key="restore"
             appearance="base"
@@ -142,6 +136,20 @@ const InstanceSnapshotActions: FC<Props> = ({
           >
             <Icon name="change-version" />
           </ConfirmationButton>,
+          <CreateImageFromInstanceSnapshotBtn
+            key="publish"
+            instance={instance}
+            snapshot={snapshot}
+            isRestoring={isRestoring}
+            isDeleting={isDeleting}
+          />,
+          <CreateInstanceFromSnapshotBtn
+            key="duplicate"
+            instance={instance}
+            snapshot={snapshot}
+            isDeleting={isDeleting}
+            isRestoring={isRestoring}
+          />,
           <ConfirmationButton
             key="delete"
             appearance="base"