From 3b0a80eb002e02967c8570f77cb73741c8220db9 Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 25 Jan 2024 16:26:08 +0000
Subject: [PATCH] feat: emui add report a bug and info dialog to nav (#2080)

## Description:
This PR fixes #2078 and fixes #2077 by adding the requested buttons to
the navigation bar.

### Demo

[Screencast from 25-01-24
16:05:48.webm](https://github.com/kurtosis-tech/kurtosis/assets/4419574/1d11a961-eece-4ada-9f2d-bfe998c68391)

## Is this change user facing?
YES

## References (if applicable):
* #2078
* #2077
---
 .../web/packages/app/src/emui/Navbar.tsx      | 62 ++++++++++++++++++-
 .../packages/components/src/Navigation.tsx    |  8 ++-
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/enclave-manager/web/packages/app/src/emui/Navbar.tsx b/enclave-manager/web/packages/app/src/emui/Navbar.tsx
index 409801a081..3176b6c93f 100644
--- a/enclave-manager/web/packages/app/src/emui/Navbar.tsx
+++ b/enclave-manager/web/packages/app/src/emui/Navbar.tsx
@@ -1,5 +1,22 @@
-import { NavButton, Navigation } from "kurtosis-ui-components";
+import {
+  Button,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from "@chakra-ui/react";
+import { CopyButton, NavButton, Navigation, NavigationDivider } from "kurtosis-ui-components";
+import { useState } from "react";
 import { FiHome, FiPackage } from "react-icons/fi";
+import { GoBug } from "react-icons/go";
+import { MdInfoOutline } from "react-icons/md";
 import { PiLinkSimpleBold } from "react-icons/pi";
 import { Link, useLocation } from "react-router-dom";
 import { KURTOSIS_CLOUD_CONNECT_URL } from "../client/constants";
@@ -8,6 +25,8 @@ import { useKurtosisClient } from "../client/enclaveManager/KurtosisClientContex
 export const Navbar = () => {
   const location = useLocation();
   const kurtosisClient = useKurtosisClient();
+  const [showAboutDialog, setShowAboutDialog] = useState(false);
+  const kurtosisVersion = process.env.REACT_APP_VERSION || "Unknown";
 
   return (
     <Navigation>
@@ -26,6 +45,47 @@ export const Navbar = () => {
           <NavButton label={"Link your CLI"} Icon={<PiLinkSimpleBold />} />
         </Link>
       )}
+      <NavigationDivider />
+      <Link
+        to={`https://github.com/kurtosis-tech/kurtosis/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml&version=${kurtosisVersion}`}
+        target={"_blank"}
+      >
+        <NavButton label={"Report a Bug"} Icon={<GoBug />} />
+      </Link>
+      <NavButton label={"About"} Icon={<MdInfoOutline />} onClick={() => setShowAboutDialog(true)} />
+
+      <Modal isOpen={showAboutDialog} onClose={() => setShowAboutDialog(false)}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>About your Kurtosis Engine</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text>Your Kurtosis engine version is:</Text>
+            <InputGroup size={"lg"} variant={"solid"}>
+              <Input
+                value={kurtosisVersion}
+                textOverflow={"ellipsis"}
+                fontFamily={"Inconsolata"}
+                bgColor={"gray.850"}
+                readOnly
+              />
+              <InputRightElement>
+                <CopyButton
+                  contentName={"version"}
+                  isIconButton
+                  aria-label={"Click to copy this version"}
+                  valueToCopy={kurtosisVersion}
+                />
+              </InputRightElement>
+            </InputGroup>
+            <Text></Text>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onClick={() => setShowAboutDialog(false)}>Close</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </Navigation>
   );
 };
diff --git a/enclave-manager/web/packages/components/src/Navigation.tsx b/enclave-manager/web/packages/components/src/Navigation.tsx
index 1e6a738abc..b7163f40c3 100644
--- a/enclave-manager/web/packages/components/src/Navigation.tsx
+++ b/enclave-manager/web/packages/components/src/Navigation.tsx
@@ -1,4 +1,4 @@
-import { Flex, IconButton, IconButtonProps, Image, Tooltip } from "@chakra-ui/react";
+import { Box, Flex, IconButton, IconButtonProps, Image, Tooltip } from "@chakra-ui/react";
 import { PropsWithChildren } from "react";
 import { useHref } from "react-router-dom";
 
@@ -22,13 +22,17 @@ export const Navigation = ({ children }: PropsWithChildren & NavigationProps) =>
       <Flex width={"40px"} height={"40px"} alignItems={"center"}>
         <Image src={logoHref} />
       </Flex>
-      <Flex flexDirection={"column"} gap={"16px"}>
+      <Flex flexDirection={"column"} gap={"16px"} flex={"1"}>
         {children}
       </Flex>
     </Flex>
   );
 };
 
+export const NavigationDivider = () => {
+  return <Box flex={"1"} />;
+};
+
 type NavButtonProps = Omit<IconButtonProps, "aria-label"> & {
   label: string;
   Icon: React.ReactElement;