From 8062f0238bce216f8f5607b58250dd5804889c4a Mon Sep 17 00:00:00 2001
From: isaiahmartin847 <isaiahmartin847@gmail.com>
Date: Mon, 27 Jan 2025 12:25:38 -0700
Subject: [PATCH 1/2] I added a wrapper div with a class of relative to make
 the icon and tooltip align vertically inline.

---
 .../SecretRenameRow.tsx                       | 104 +++++++++---------
 1 file changed, 55 insertions(+), 49 deletions(-)

diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
index 2295a963c..e0980e9a6 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
@@ -189,17 +189,19 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
                 animate={{ x: 0, opacity: 1 }}
                 exit={{ x: 10, opacity: 0 }}
               >
-                <Tooltip content="Copy secret name">
-                  <IconButton
-                    ariaLabel="copy-value"
-                    variant="plain"
-                    size="sm"
-                    className="p-0 opacity-0 group-hover:opacity-100"
-                    onClick={copyTokenToClipboard}
-                  >
-                    <FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
-                  </IconButton>
-                </Tooltip>
+                <div className="relative">
+                  <Tooltip content="Copy secret name">
+                    <IconButton
+                      ariaLabel="copy-value"
+                      variant="plain"
+                      size="sm"
+                      className="p-0 opacity-0 group-hover:opacity-100"
+                      onClick={copyTokenToClipboard}
+                    >
+                      <FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
+                    </IconButton>
+                  </Tooltip>
+                </div>
               </motion.div>
             ) : (
               <motion.div
@@ -209,44 +211,48 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
                 animate={{ x: 0, opacity: 1 }}
                 exit={{ x: -10, opacity: 0 }}
               >
-                <Tooltip content={errors.key ? errors.key.message : "Save"}>
-                  <IconButton
-                    ariaLabel="more"
-                    variant="plain"
-                    type="submit"
-                    size="md"
-                    className={twMerge(
-                      "p-0 text-primary opacity-0 group-hover:opacity-100",
-                      isDirty && "opacity-100"
-                    )}
-                    isDisabled={isSubmitting || Boolean(errors.key)}
-                  >
-                    {isSubmitting ? (
-                      <Spinner className="m-0 h-4 w-4 p-0" />
-                    ) : (
-                      <FontAwesomeIcon
-                        icon={faCheck}
-                        size="lg"
-                        className={twMerge("text-primary", errors.key && "text-mineshaft-400")}
-                      />
-                    )}
-                  </IconButton>
-                </Tooltip>
-                <Tooltip content="Cancel">
-                  <IconButton
-                    ariaLabel="more"
-                    variant="plain"
-                    size="md"
-                    className={twMerge(
-                      "p-0 opacity-0 group-hover:opacity-100",
-                      isDirty && "opacity-100"
-                    )}
-                    onClick={() => reset()}
-                    isDisabled={isSubmitting}
-                  >
-                    <FontAwesomeIcon icon={faClose} size="lg" />
-                  </IconButton>
-                </Tooltip>
+                <div className="relative">
+                  <Tooltip content={errors.key ? errors.key.message : "Save"}>
+                    <IconButton
+                      ariaLabel="more"
+                      variant="plain"
+                      type="submit"
+                      size="md"
+                      className={twMerge(
+                        "p-0 text-primary opacity-0 group-hover:opacity-100",
+                        isDirty && "opacity-100"
+                      )}
+                      isDisabled={isSubmitting || Boolean(errors.key)}
+                    >
+                      {isSubmitting ? (
+                        <Spinner className="m-0 h-4 w-4 p-0" />
+                      ) : (
+                        <FontAwesomeIcon
+                          icon={faCheck}
+                          size="lg"
+                          className={twMerge("text-primary", errors.key && "text-mineshaft-400")}
+                        />
+                      )}
+                    </IconButton>
+                  </Tooltip>
+                </div>
+                <div className="relative">
+                  <Tooltip content="Cancel">
+                    <IconButton
+                      ariaLabel="more"
+                      variant="plain"
+                      size="md"
+                      className={twMerge(
+                        "p-0 opacity-0 group-hover:opacity-100",
+                        isDirty && "opacity-100"
+                      )}
+                      onClick={() => reset()}
+                      isDisabled={isSubmitting}
+                    >
+                      <FontAwesomeIcon icon={faClose} size="lg" />
+                    </IconButton>
+                  </Tooltip>
+                </div>
               </motion.div>
             )}
           </AnimatePresence>

From 92f697e195dbe1a4cbec61fe9c460d6e21e2bbaa Mon Sep 17 00:00:00 2001
From: isaiahmartin847 <isaiahmartin847@gmail.com>
Date: Mon, 27 Jan 2025 12:26:22 -0700
Subject: [PATCH 2/2] I removed the hover opacity on the 'copy secret name'
 icon so the icon is always visible instead of appearing only on hover. I
 believe this will make it more noticeable to users. As a user myself, I
 didn't realize it was possible to copy a secret name until I accidentally
 hovered over it.

---
 .../components/SecretOverviewTableRow/SecretRenameRow.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
index e0980e9a6..ae1916b86 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
@@ -195,7 +195,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
                       ariaLabel="copy-value"
                       variant="plain"
                       size="sm"
-                      className="p-0 opacity-0 group-hover:opacity-100"
+                      className="p-0 opacity-100"
                       onClick={copyTokenToClipboard}
                     >
                       <FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />