diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx index 715d8c51d..59f97a1a5 100644 --- a/frontend/src/components/navigation/NavHeader.tsx +++ b/frontend/src/components/navigation/NavHeader.tsx @@ -1,11 +1,15 @@ +import { ParsedUrlQuery } from "querystring"; + import Link from "next/link"; import { useRouter } from "next/router"; -import { faAngleRight, faLock } from "@fortawesome/free-solid-svg-icons"; +import { faAngleRight, faCheck, faCopy, faLock } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useOrganization, useWorkspace } from "@app/context"; +import { useToggle } from "@app/hooks"; -import { Select, SelectItem, Tooltip } from "../v2"; +import { createNotification } from "../notifications"; +import { IconButton, Select, SelectItem, Tooltip } from "../v2"; type Props = { pageName: string; @@ -50,6 +54,9 @@ export default function NavHeader({ }: Props): JSX.Element { const { currentWorkspace } = useWorkspace(); const { currentOrg } = useOrganization(); + + const [isCopied, { timedToggle: toggleIsCopied }] = useToggle(false); + const router = useRouter(); const secretPathSegments = secretPath.split("/").filter(Boolean); @@ -132,8 +139,10 @@ export default function NavHeader({ )} {isFolderMode && secretPathSegments?.map((folderName, index) => { - const query = { ...router.query }; - query.secretPath = `/${secretPathSegments.slice(0, index + 1).join("/")}`; + const query: ParsedUrlQuery & { secretPath: string } = { + ...router.query, + secretPath: `/${secretPathSegments.slice(0, index + 1).join("/")}` + }; return ( <div @@ -142,7 +151,38 @@ export default function NavHeader({ > <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" /> {index + 1 === secretPathSegments?.length ? ( - <span className="text-sm font-semibold text-bunker-300">{folderName}</span> + <div className="flex items-center space-x-2"> + <span className="text-sm font-semibold text-bunker-300">{folderName}</span> + <Tooltip + className="relative right-2" + position="bottom" + content="Copy secret path" + > + <IconButton + variant="plain" + ariaLabel="copy" + onClick={() => { + if (isCopied) return; + + navigator.clipboard.writeText(query.secretPath); + + createNotification({ + text: "Copied secret path to clipboard", + type: "info" + }); + + toggleIsCopied(2000); + }} + className="hover:bg-bunker-100/10" + > + <FontAwesomeIcon + icon={!isCopied ? faCopy : faCheck} + size="sm" + className="cursor-pointer" + /> + </IconButton> + </Tooltip> + </div> ) : ( <Link passHref