From 3a43d7c5d5bca3b877a6802a1f1206829abd2fa5 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Thu, 26 Sep 2024 16:40:33 -0700
Subject: [PATCH] improvement: add tooltip to secret table resource count and
 match secret icon color

---
 .../SecretOverviewTableRow.tsx                |  2 +-
 .../SecretTableResourceCount.tsx              | 74 +++++++++++++++----
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
index 287269838..c71480e59 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
@@ -73,7 +73,7 @@ export const SecretOverviewTableRow = ({
         >
           <div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
             <div className="flex items-center space-x-5">
-              <div className="text-blue-300/70">
+              <div className="text-bunker-300">
                 <Checkbox
                   id={`checkbox-${secretKey}`}
                   isChecked={isSelected}
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx b/frontend/src/views/SecretOverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx
index f4492a31d..e1b94549c 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx
@@ -1,6 +1,8 @@
 import { faFileImport, faFingerprint, faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { Tooltip } from "@app/components/v2";
+
 type Props = {
   folderCount?: number;
   importCount?: number;
@@ -17,28 +19,68 @@ export const SecretTableResourceCount = ({
   return (
     <div className="flex items-center gap-2 divide-x divide-mineshaft-500 text-sm text-mineshaft-400">
       {importCount > 0 && (
-        <div className="flex items-center gap-2">
-          <FontAwesomeIcon icon={faFileImport} className=" text-green-700" />
-          <span>{importCount}</span>
-        </div>
+        <Tooltip
+          className="max-w-sm"
+          content={
+            <p className="whitespace-nowrap text-center">
+              Total import count{" "}
+              <span className="text-center text-mineshaft-400">(matching filters)</span>
+            </p>
+          }
+        >
+          <div className="flex items-center gap-2">
+            <FontAwesomeIcon icon={faFileImport} className=" text-green-700" />
+            <span>{importCount}</span>
+          </div>
+        </Tooltip>
       )}
       {folderCount > 0 && (
-        <div className="flex items-center gap-2 pl-2">
-          <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
-          <span>{folderCount}</span>
-        </div>
+        <Tooltip
+          className="max-w-sm"
+          content={
+            <p className="whitespace-nowrap text-center">
+              Total folder count{" "}
+              <span className="text-center text-mineshaft-400">(matching filters)</span>
+            </p>
+          }
+        >
+          <div className="flex items-center gap-2 pl-2">
+            <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
+            <span>{folderCount}</span>
+          </div>
+        </Tooltip>
       )}
       {dynamicSecretCount > 0 && (
-        <div className="flex items-center gap-2 pl-2">
-          <FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" />
-          <span>{dynamicSecretCount}</span>
-        </div>
+        <Tooltip
+          className="max-w-sm"
+          content={
+            <p className="whitespace-nowrap text-center">
+              Total dynamic secret count{" "}
+              <span className="text-center text-mineshaft-400">(matching filters)</span>
+            </p>
+          }
+        >
+          <div className="flex items-center gap-2 pl-2">
+            <FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" />
+            <span>{dynamicSecretCount}</span>
+          </div>
+        </Tooltip>
       )}
       {secretCount > 0 && (
-        <div className="flex items-center gap-2 pl-2">
-          <FontAwesomeIcon icon={faKey} className="text-bunker-300" />
-          <span>{secretCount}</span>
-        </div>
+        <Tooltip
+          className="max-w-sm"
+          content={
+            <p className="whitespace-nowrap text-center">
+              Total secret count{" "}
+              <span className="text-center text-mineshaft-400">(matching filters)</span>
+            </p>
+          }
+        >
+          <div className="flex items-center gap-2 pl-2">
+            <FontAwesomeIcon icon={faKey} className="text-bunker-300" />
+            <span>{secretCount}</span>
+          </div>
+        </Tooltip>
       )}
     </div>
   );