Merge pull request #4199 from Infisical/search-by-tags-metadata

improvement(dashboard): add secret tag/metadata search functionality to single env view dashboard

frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/SecretSearchInput.tsx

@@ -53,7 +53,7 @@ export const SecretSearchInput = ({
                   }}
                   autoComplete="off"
                   className="input text-md h-[2.3rem] w-full rounded-md rounded-l-none bg-mineshaft-800 py-[0.375rem] pl-2.5 pr-8 text-gray-400 placeholder-mineshaft-50 placeholder-opacity-50 outline-none duration-200 placeholder:text-sm hover:ring-bunker-400/60 focus:bg-mineshaft-700/80 focus:ring-1 focus:ring-primary-400/50"
-                  placeholder="Search by secret/folder name..."
+                  placeholder="Search by secret, folder, tag or metadata..."
                   value={value}
                   onChange={(e) => onChange(e.target.value)}
                 />

frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretItem.tsx

@@ -1,6 +1,7 @@
 import {
   faCheck,
   faChevronRight,
+  faCode,
   faCopy,
   faEye,
   faFolder,
@@ -82,6 +83,17 @@ export const QuickSearchSecretItem = ({
     search.trim() &&
     secretGroupTags?.find((tag) => tag && tag.slug.toLowerCase().includes(search.toLowerCase()));
 
+  const secretGroupMetadata = secretGroup.flatMap((secret) => secret.secretMetadata);
+
+  const metadataMatch =
+    search.trim() &&
+    secretGroupMetadata?.find(
+      (metadata) =>
+        metadata &&
+        (metadata.key.toLowerCase().includes(search.toLowerCase()) ||
+          metadata.value.toLowerCase().includes(search.toLowerCase()))
+    );
+
   return (
     <Tr
       className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
@@ -109,6 +121,12 @@ export const QuickSearchSecretItem = ({
               {tagMatch.slug}
             </Badge>
           )}
+          {metadataMatch && !tagMatch && (
+            <Badge variant="primary" className="flex items-center gap-1 whitespace-nowrap">
+              <FontAwesomeIcon size="xs" icon={faCode} />
+              <p className="truncate">Metadata Match</p>
+            </Badge>
+          )}
           {isSingleEnv ? (
             <Tooltip
               isDisabled={!groupSecret?.secretValueHidden}