From a614b81a7a0e33f47d8eb4f4afbae6c04f846717 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 8 Jul 2025 09:49:22 -0700
Subject: [PATCH] improvement: clarify secre key/path filter behavior for audit
 logs

---
 .../components/LogFilterItem.tsx              | 50 +++++++++++++------
 .../AuditLogsPage/components/LogsFilter.tsx   | 12 ++---
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogFilterItem.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogFilterItem.tsx
index 38df23aad..cc8748953 100644
--- a/frontend/src/pages/organization/AuditLogsPage/components/LogFilterItem.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/components/LogFilterItem.tsx
@@ -1,3 +1,5 @@
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import { Button, Tooltip } from "@app/components/v2";
@@ -8,25 +10,41 @@ type Props = {
   label: string;
   onClear: () => void;
   children: React.ReactNode;
+  tooltipText?: string;
 };
 
-export const LogFilterItem = ({ label, onClear, hoverTooltip, children, className }: Props) => {
+export const LogFilterItem = ({
+  label,
+  onClear,
+  hoverTooltip,
+  children,
+  className,
+  tooltipText
+}: Props) => {
   return (
-    <Tooltip className="relative top-4" content={hoverTooltip} isDisabled={!hoverTooltip}>
-      <div className={twMerge("flex flex-col justify-between", className)}>
-        <div className="flex items-center justify-between pr-1">
-          <p className="text-xs opacity-60">{label}</p>
-          <Button
-            onClick={() => onClear()}
-            variant="link"
-            className="font-normal text-mineshaft-400 transition-all duration-75 hover:text-mineshaft-300"
-            size="xs"
-          >
-            Clear
-          </Button>
-        </div>
-        {children}
+    <div className={twMerge("flex flex-col justify-between", className)}>
+      <div className="flex items-center pr-1">
+        <p className="text-xs opacity-60">{label}</p>
+        {tooltipText && (
+          <Tooltip content={tooltipText} className="max-w-sm">
+            <FontAwesomeIcon
+              icon={faInfoCircle}
+              className="-mt-[0.05rem] ml-1 text-[11px] text-mineshaft-400"
+            />
+          </Tooltip>
+        )}
+        <Button
+          onClick={() => onClear()}
+          variant="link"
+          className="ml-auto font-normal text-mineshaft-400 transition-all duration-75 hover:text-mineshaft-300"
+          size="xs"
+        >
+          Clear
+        </Button>
       </div>
-    </Tooltip>
+      <Tooltip className="relative top-4" content={hoverTooltip} isDisabled={!hoverTooltip}>
+        <div>{children}</div>
+      </Tooltip>
+    </div>
   );
 };
diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx
index 7d406c865..73cc76ed7 100644
--- a/frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx
@@ -366,6 +366,7 @@ export const LogsFilter = ({ presets, setFilter, filter }: Props) => {
                     </LogFilterItem>
                     <LogFilterItem
                       label="Secret Path"
+                      tooltipText="Enter the exact secret path (wildcards like * are not supported)"
                       hoverTooltip={
                         !selectedProject
                           ? "Select a project before filtering by secret path."
@@ -380,10 +381,7 @@ export const LogsFilter = ({ presets, setFilter, filter }: Props) => {
                         control={control}
                         name="secretPath"
                         render={({ field: { onChange, value, ...field } }) => (
-                          <FormControl
-                            tooltipText="Filter audit logs related to events that occurred on a specific secret path."
-                            className="w-full"
-                          >
+                          <FormControl className="w-full">
                             <Input
                               placeholder="Enter secret path"
                               className="disabled:cursor-not-allowed"
@@ -403,6 +401,7 @@ export const LogsFilter = ({ presets, setFilter, filter }: Props) => {
                           ? "Select a project before filtering by secret key."
                           : undefined
                       }
+                      tooltipText="Enter the exact secret key name (wildcards like * are not supported)"
                       className={twMerge(!selectedProject && "opacity-50")}
                       label="Secret Key"
                       onClear={() => {
@@ -413,10 +412,7 @@ export const LogsFilter = ({ presets, setFilter, filter }: Props) => {
                         control={control}
                         name="secretKey"
                         render={({ field: { onChange, value, ...field } }) => (
-                          <FormControl
-                            tooltipText="Filter audit logs related to a specific secret."
-                            className="w-full"
-                          >
+                          <FormControl className="w-full">
                             <Input
                               isDisabled={!selectedProject}
                               {...field}