add run locally modal

enclave-manager/web/packages/app/src/emui/enclaves/components/modals/LocalRunModal.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+  Text,
+  Box,
+  IconButton,
+  CloseButton,
+} from '@chakra-ui/react';
+import { CopyIcon } from '@chakra-ui/icons';
+import { v4 as uuidv4 } from 'uuid';
+
+const LocalRunModal: React.FC = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [uniqueId, setUniqueId] = useState<string>('');
+
+  useEffect(() => {
+    if (isOpen) {
+      setUniqueId(uuidv4());
+    }
+  }, [isOpen]);
+
+  const codeSnippets = [
+    'brew install kurtosis',
+    `kurtosis run local ${uniqueId}`
+  ];
+
+  const handleCopy = (snippet: string): void => {
+    navigator.clipboard.writeText(snippet)
+      .then(() => console.log('Code copied to clipboard!'))
+      .catch(err => console.error('Failed to copy: ', err));
+  };
+
+  return (
+    <>
+      <Button size={"xs"} variant={"ghost"}
+        onClick={onOpen}>
+        Run locally
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={onClose} size="xl" isCentered>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Setup local environment</ModalHeader>
+          <CloseButton position="absolute" right="8px" top="8px" onClick={onClose} />
+          <ModalBody>
+            <Text>Follow the steps below deploy a local copy:</Text>
+            {codeSnippets.map((snippet, index) => (
+              <Box key={index} as="pre" p="4" background="gray.500" my="2" position="relative" overflowY="auto">
+                {snippet}
+                <IconButton
+                  aria-label="Copy code"
+                  icon={<CopyIcon />}
+                  size="sm"
+                  position="absolute"
+                  right="1"
+                  top="1"
+                  onClick={() => handleCopy(snippet)}
+                />
+              </Box>
+            ))}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default LocalRunModal;
+

enclave-manager/web/packages/app/src/emui/enclaves/components/tables/EnclavesTable.tsx

@@ -10,6 +10,7 @@ import { Link } from "react-router-dom";
 import { Result } from "true-myth";
 import { useKurtosisPackageIndexerClient } from "../../../../client/packageIndexer/KurtosisPackageIndexerClientContext";
 import { EnclaveFullInfo } from "../../types";
+import LocalRunModal from "../modals/LocalRunModal";
 import { EnclaveServicesSummary } from "../widgets/EnclaveServicesSummary";
 import { EnclaveStatus } from "../widgets/EnclaveStatus";
 import { PackageLinkButton } from "../widgets/PackageLinkButton";
@@ -37,17 +38,17 @@ const enclaveToRow = (enclave: EnclaveFullInfo, catalog?: Result<GetPackagesResp
       !isDefined(starlarkRun) || !isDefined(catalog)
         ? "loading"
         : starlarkRun.isOk && catalog.isOk
-        ? catalog.value.packages.find((kurtosisPackage) => kurtosisPackage.name === starlarkRun.value.packageId) || null
-        : null,
+          ? catalog.value.packages.find((kurtosisPackage) => kurtosisPackage.name === starlarkRun.value.packageId) || null
+          : null,
     services: !isDefined(enclave.services)
       ? "loading"
       : enclave.services.isOk
-      ? Object.values(enclave.services.value.serviceInfo)
-      : null,
+        ? Object.values(enclave.services.value.serviceInfo)
+        : null,
     ports: !isDefined(enclave.services)
       ? "loading"
       : enclave.services.isOk
-      ? Object.values(enclave.services.value.serviceInfo).flatMap((service) =>
+        ? Object.values(enclave.services.value.serviceInfo).flatMap((service) =>
           getPortTableRows(
             enclave.enclaveUuid,
             service.serviceUuid,
@@ -57,7 +58,7 @@ const enclaveToRow = (enclave: EnclaveFullInfo, catalog?: Result<GetPackagesResp
             service.name,
           ),
         )
-      : null,
+        : null,
   };
 };
 
@@ -138,6 +139,10 @@ export const EnclavesTable = ({ enclavesData, selection, onSelectionChange }: En
         cell: (servicesCell) => <EnclaveServicesSummary services={servicesCell.getValue()} />,
         meta: { centerAligned: true },
       }),
+      columnHelper.accessor("status", {
+        header: "Run Locally",
+        cell: (statusCell) => <LocalRunModal />,
+      }),
       columnHelper.accessor("ports", {
         header: "Endpoints",
         cell: (portsCell) => <PortsSummary ports={portsCell.getValue()} />,