Merge pull request #3982 from Infisical/audit-log-secret-path-tooltip

improvement(audit-logs): clarify secret key/path filter behavior for audit logs

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={twMerge("flex flex-col justify-between", className)}>
+      <div className="flex items-center pr-1">
-        <div className="flex items-center justify-between pr-1">
+        <p className="text-xs opacity-60">{label}</p>
-          <p className="text-xs opacity-60">{label}</p>
+        {tooltipText && (
-          <Button
+          <Tooltip content={tooltipText} className="max-w-sm">
-            onClick={() => onClear()}
+            <FontAwesomeIcon
-            variant="link"
+              icon={faInfoCircle}
-            className="font-normal text-mineshaft-400 transition-all duration-75 hover:text-mineshaft-300"
+              className="-mt-[0.05rem] ml-1 text-[11px] text-mineshaft-400"
-            size="xs"
+            />
-          >
+          </Tooltip>
-            Clear
+        )}
-          </Button>
+        <Button
-        </div>
+          onClick={() => onClear()}
-        {children}
+          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>
   );
 };

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
+                          <FormControl className="w-full">
-                            tooltipText="Filter audit logs related to events that occurred on a specific secret path."
-                            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
+                          <FormControl className="w-full">
-                            tooltipText="Filter audit logs related to a specific secret."
-                            className="w-full"
-                          >
                             <Input
                               isDisabled={!selectedProject}
                               {...field}