diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx index 715d8c51d..973feeb73 100644 --- a/frontend/src/components/navigation/NavHeader.tsx +++ b/frontend/src/components/navigation/NavHeader.tsx @@ -1,11 +1,17 @@ +import { ParsedUrlQuery } from "querystring"; + +import { useState } from "react"; 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 { twMerge } from "tailwind-merge"; 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 +56,10 @@ export default function NavHeader({ }: Props): JSX.Element { const { currentWorkspace } = useWorkspace(); const { currentOrg } = useOrganization(); + + const [isCopied, { timedToggle: toggleIsCopied }] = useToggle(false); + const [isHoveringCopyButton, setIsHoveringCopyButton] = useState(false); + const router = useRouter(); const secretPathSegments = secretPath.split("/").filter(Boolean); @@ -132,8 +142,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 (
{index + 1 === secretPathSegments?.length ? ( - {folderName} +
+ + {folderName} + + + setIsHoveringCopyButton(true)} + onMouseLeave={() => setIsHoveringCopyButton(false)} + 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" + > + + + +
) : ( - + {folderName}