From 2c402fbbb6219d2c3d65624a874f4d7ca549c0ee Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Wed, 27 Nov 2024 01:31:11 +0400
Subject: [PATCH 1/2] Update NavHeader.tsx

---
 .../src/components/navigation/NavHeader.tsx   | 50 +++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

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

From 5277a50b3e87b2d04e76f66b47e338473a5a3d3f Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Fri, 29 Nov 2024 05:48:40 +0400
Subject: [PATCH 2/2] Update NavHeader.tsx

---
 .../src/components/navigation/NavHeader.tsx   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx
index 59f97a1a5..973feeb73 100644
--- a/frontend/src/components/navigation/NavHeader.tsx
+++ b/frontend/src/components/navigation/NavHeader.tsx
@@ -1,9 +1,11 @@
 import { ParsedUrlQuery } from "querystring";
 
+import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 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";
@@ -56,6 +58,7 @@ export default function NavHeader({
   const { currentOrg } = useOrganization();
 
   const [isCopied, { timedToggle: toggleIsCopied }] = useToggle(false);
+  const [isHoveringCopyButton, setIsHoveringCopyButton] = useState(false);
 
   const router = useRouter();
 
@@ -152,7 +155,14 @@ export default function NavHeader({
               <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
               {index + 1 === secretPathSegments?.length ? (
                 <div className="flex items-center space-x-2">
-                  <span className="text-sm font-semibold text-bunker-300">{folderName}</span>
+                  <span
+                    className={twMerge(
+                      "text-sm font-semibold transition-all",
+                      isHoveringCopyButton ? "text-bunker-200" : "text-bunker-300"
+                    )}
+                  >
+                    {folderName}
+                  </span>
                   <Tooltip
                     className="relative right-2"
                     position="bottom"
@@ -161,6 +171,8 @@ export default function NavHeader({
                     <IconButton
                       variant="plain"
                       ariaLabel="copy"
+                      onMouseEnter={() => setIsHoveringCopyButton(true)}
+                      onMouseLeave={() => setIsHoveringCopyButton(false)}
                       onClick={() => {
                         if (isCopied) return;
 
@@ -189,7 +201,12 @@ export default function NavHeader({
                   legacyBehavior
                   href={{ pathname: "/project/[id]/secrets/[env]", query }}
                 >
-                  <a className="text-sm font-semibold text-primary/80 hover:text-primary">
+                  <a
+                    className={twMerge(
+                      "text-sm font-semibold transition-all hover:text-primary",
+                      isHoveringCopyButton ? "text-primary" : "text-primary/80"
+                    )}
+                  >
                     {folderName}
                   </a>
                 </Link>