Skip to content

Commit

Permalink
feat: emui add report a bug and info dialog to nav (#2080)
Browse files Browse the repository at this point in the history
## 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
  • Loading branch information
Dartoxian authored Jan 25, 2024
1 parent 7669881 commit 3b0a80e
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 3 deletions.
62 changes: 61 additions & 1 deletion enclave-manager/web/packages/app/src/emui/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
Expand All @@ -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>
);
};
8 changes: 6 additions & 2 deletions enclave-manager/web/packages/components/src/Navigation.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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;
Expand Down

0 comments on commit 3b0a80e

Please sign in to comment.