feat(audit-logs): query by secret path

frontend/src/hooks/api/auditLogs/types.tsx

@@ -10,6 +10,7 @@ export type TGetAuditLogsFilter = {
   actorType?: ActorType;
   projectId?: string;
   actor?: string; // user ID format
+  secretPath?: string;
   startDate?: Date;
   endDate?: Date;
   limit: number;

frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx

@@ -14,6 +14,7 @@ import {
   DropdownMenuTrigger,
   FilterableSelect,
   FormControl,
+  Input,
   Select,
   SelectItem
 } from "@app/components/v2";
@@ -50,6 +51,7 @@ export const LogsFilter = ({
   className,
   control,
   reset,
+  setValue,
   watch
 }: Props) => {
   const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
@@ -101,6 +103,7 @@ export const LogsFilter = ({
   };
 
   const selectedEventTypes = watch("eventType") as EventType[] | undefined;
+  const selectedProjectId = watch("project")?.id;
 
   return (
     <div
@@ -109,30 +112,49 @@ export const LogsFilter = ({
         className
       )}
     >
-      {isOrgAuditLogs && workspacesInOrg.length > 0 && (
-        <Controller
-          control={control}
-          name="project"
-          render={({ field: { onChange, value }, fieldState: { error } }) => (
-            <FormControl
-              label="Project"
-              errorText={error?.message}
-              isError={Boolean(error)}
-              className="mr-12 w-64"
-            >
-              <FilterableSelect
-                value={value}
-                isClearable
-                onChange={onChange}
-                placeholder="Select a project..."
-                options={workspacesInOrg.map(({ name, id }) => ({ name, id }))}
-                getOptionValue={(option) => option.id}
-                getOptionLabel={(option) => option.name}
-              />
-            </FormControl>
-          )}
-        />
-      )}
+      <div className="flex items-center gap-4">
+        {isOrgAuditLogs && workspacesInOrg.length > 0 && (
+          <Controller
+            control={control}
+            name="project"
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+              <FormControl
+                label="Project"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                className="w-64"
+              >
+                <FilterableSelect
+                  value={value}
+                  isClearable
+                  onChange={(e) => {
+                    console.log(e);
+                    if (e === null) {
+                      setValue("secretPath", "");
+                    }
+                    onChange(e);
+                  }}
+                  placeholder="Select a project..."
+                  options={workspacesInOrg.map(({ name, id }) => ({ name, id }))}
+                  getOptionValue={(option) => option.id}
+                  getOptionLabel={(option) => option.name}
+                />
+              </FormControl>
+            )}
+          />
+        )}
+        {selectedProjectId && (
+          <Controller
+            control={control}
+            name="secretPath"
+            render={({ field: { onChange, value, ...field } }) => (
+              <FormControl label="Secret path" className="w-40">
+                <Input {...field} value={value} onChange={(e) => onChange(e.target.value)} />
+              </FormControl>
+            )}
+          />
+        )}
+      </div>
       <div className="mt-1 flex items-center space-x-2">
         <Controller
           control={control}

frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx

@@ -5,6 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
 import { withPermission } from "@app/hoc";
+import { useDebounce } from "@app/hooks";
 import { ActorType, EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 import { usePopUp } from "@app/hooks/usePopUp";
 
@@ -67,10 +68,13 @@ export const LogsSection = withPermission(
     const userAgentType = watch("userAgentType") as UserAgentType | undefined;
     const actor = watch("actor");
     const projectId = watch("project")?.id;
+    const secretPath = watch("secretPath");
 
     const startDate = watch("startDate");
     const endDate = watch("endDate");
 
+    const [debouncedSecretPath] = useDebounce<string>(secretPath!, 500);
+
     return (
       <div>
         {showFilters && (
@@ -90,6 +94,7 @@ export const LogsSection = withPermission(
           isOrgAuditLogs={isOrgAuditLogs}
           showActorColumn={!!showActorColumn}
           filter={{
+            secretPath: debouncedSecretPath || undefined,
             eventMetadata: presets?.eventMetadata,
             projectId,
             actorType: presets?.actorType,

frontend/src/pages/organization/AuditLogsPage/components/types.tsx

@@ -12,7 +12,8 @@ export const auditLogFilterFormSchema = z
     startDate: z.date().optional(),
     endDate: z.date().optional(),
     page: z.coerce.number().optional(),
-    perPage: z.coerce.number().optional()
+    perPage: z.coerce.number().optional(),
+    secretPath: z.string().optional()
   })
   .superRefine((el, ctx) => {
     if (el.endDate && el.startDate && el.endDate < el.startDate) {