feat: add an add to GitHub button on an encalve (#2256)

First frontend PR, please review properly

Note that the instance id and api key should fill up when in cloud!

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

@@ -0,0 +1,50 @@
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from "@chakra-ui/react";
+import { FileDisplay } from "kurtosis-ui-components";
+import { apiKey, instanceUUID } from "../../../../cookies";
+
+export type AddGithubActionModalProps = {
+  packageId: string;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const AddGithubActionModal = ({ isOpen, onClose, packageId }: AddGithubActionModalProps) => {
+  const commands = `
+name: CI
+on:
+    pull_request:
+
+jobs:
+  run_kurtosis:
+    runs-on: ubuntu-latest
+      steps:
+        - name: Checkout Repository
+          uses: actions/checkout@v4
+        - name: Run Kurtosis
+          uses: kurtosis-tech/kurtosis-github-action@v1
+          with:
+          path: ${packageId}
+          cloud_instance_id: ${instanceUUID}
+          cloud_api_key: ${apiKey} # We recommend placing this in repository secrets;`;
+  return (
+    <Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Run this enclave from GitHub</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <FileDisplay value={commands} title={"GitHub Action YAML"} filename={"per-pr.yml"} />
+        </ModalBody>
+        <ModalFooter>The GitHub Action allows you to run this package directly in CI</ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};

enclave-manager/web/packages/app/src/emui/enclaves/components/widgets/AddGithubActionButton.tsx

@@ -0,0 +1,54 @@
+import { Button, ButtonProps, Tooltip } from "@chakra-ui/react";
+import { isDefined } from "kurtosis-ui-components";
+import { useState } from "react";
+import { FiGithub } from "react-icons/fi";
+import { EnclaveFullInfo } from "../../types";
+import { AddGithubActionModal } from "../modals/AddGithubActionModal";
+
+type AddGithubActionButtonProps = ButtonProps & {
+  enclave: EnclaveFullInfo;
+};
+
+export const AddGithubActionButton = ({ enclave, ...buttonProps }: AddGithubActionButtonProps) => {
+  const [showModal, setShowModal] = useState(false);
+
+  if (!isDefined(enclave.starlarkRun)) {
+    return (
+      <Button isLoading={true} colorScheme={"yellow"} leftIcon={<FiGithub />} size={"sm"} {...buttonProps}>
+        Add GitHub Action
+      </Button>
+    );
+  }
+
+  if (enclave.starlarkRun.isErr) {
+    return (
+      <Tooltip label={"An error occurred while starting the enclave"}>
+        <Button isDisabled={true} colorScheme={"yellow"} leftIcon={<FiGithub />} size={"sm"} {...buttonProps}>
+          Add GitHub Action
+        </Button>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <>
+      <Tooltip label={`Steps to run this package from CI`} openDelay={1000}>
+        <Button
+          colorScheme={"yellow"}
+          leftIcon={<FiGithub />}
+          onClick={() => setShowModal(true)}
+          size={"sm"}
+          variant={"solid"}
+          {...buttonProps}
+        >
+          Add GitHub Action
+        </Button>
+      </Tooltip>
+      <AddGithubActionModal
+        packageId={enclave.starlarkRun.value.packageId}
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+      />
+    </>
+  );
+};

enclave-manager/web/packages/app/src/emui/enclaves/enclave/Enclave.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { AppPageLayout, HoverLineTabList, KurtosisAlert, PageTitle } from "kurtosis-ui-components";
 import { FunctionComponent } from "react";
 import { EditEnclaveButton } from "../components/EditEnclaveButton";
+import { AddGithubActionButton } from "../components/widgets/AddGithubActionButton";
 import { ConnectEnclaveButton } from "../components/widgets/ConnectEnclaveButton";
 import { DeleteEnclavesButton } from "../components/widgets/DeleteEnclavesButton";
 import { useFullEnclave } from "../EnclavesContext";
@@ -56,6 +57,7 @@ const EnclaveImpl = ({ enclave }: EnclaveImplProps) => {
             <DeleteEnclavesButton enclaves={[enclave]} />
             <EditEnclaveButton enclave={enclave} />
             <ConnectEnclaveButton enclave={enclave} />
+            <AddGithubActionButton enclave={enclave} />
           </Flex>
         </Flex>
         <TabPanels>