Merge pull request #4618 from Infisical/fix/audit-log-date-picker

fix: Audit log custom date picker

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

@@ -174,7 +174,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
               <Controller
                 control={control}
                 name="relativeModeValue"
-                render={({ field }) => {
+                render={({ field, fieldState: { error } }) => {
                   const duration = field.value?.substring(0, field.value.length - 1);
                   const unitOfTime = field.value?.at(-1);
                   return (
@@ -200,28 +200,44 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
                           })}
                         </div>
                       ))}
-                      <div className="flex items-center gap-2">
+                      <div className="flex flex-col gap-1">
-                        <FormControl className="mb-0 w-28" label="Duration">
+                        <div className="flex items-center gap-2">
-                          <Input
+                          <FormControl
-                            type="number"
+                            className="mb-0 w-28"
-                            value={duration || "1"}
+                            label="Duration"
-                            onChange={(val) => field.onChange(`${val}${unitOfTime}`)}
+                            isError={Boolean(error)}
-                            max={60}
-                            min={1}
-                          />
-                        </FormControl>
-                        <FormControl className="mb-0 w-36" label="Unit of Time">
-                          <Select
-                            value={unitOfTime}
-                            onValueChange={(val) => field.onChange(`${duration}${val}`)}
-                            className="w-full"
-                            position="popper"
                           >
-                            {RELATIVE_OPTIONS.map((opt) => (
+                            <Input
-                              <SelectItem value={opt.unit}>{opt.label}</SelectItem>
+                              type="number"
-                            ))}
+                              value={duration}
-                          </Select>
+                              onChange={(val) => {
-                        </FormControl>
+                                const durationVal = val.target.value
+                                  ? Number(val.target.value)
+                                  : undefined;
+                                field.onChange(`${durationVal}${unitOfTime}`);
+                              }}
+                              max={60}
+                              min={1}
+                            />
+                          </FormControl>
+                          <FormControl className="mb-0 w-36" label="Unit of Time">
+                            <Select
+                              value={unitOfTime}
+                              onValueChange={(val) => field.onChange(`${duration}${val}`)}
+                              className="w-full"
+                              position="popper"
+                            >
+                              {RELATIVE_OPTIONS.map((opt) => (
+                                <SelectItem value={opt.unit}>{opt.label}</SelectItem>
+                              ))}
+                            </Select>
+                          </FormControl>
+                        </div>
+                        {error && (
+                          <span className="text-xs text-red-600 text-opacity-90">
+                            {error.message}
+                          </span>
+                        )}
                       </div>
                     </div>
                   );

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

@@ -1,3 +1,4 @@
+import ms from "ms";
 import { z } from "zod";
 
 import { ActorType, EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
@@ -27,7 +28,18 @@ export const auditLogFilterFormSchema = z.object({
 export const auditLogDateFilterFormSchema = z
   .object({
     type: z.nativeEnum(AuditLogDateFilterType),
-    relativeModeValue: z.string().optional(),
+    relativeModeValue: z
+      .string()
+      .refine(
+        (val) => {
+          const parsedMs = ms(val);
+          return typeof parsedMs === "number" && parsedMs > 0;
+        },
+        {
+          message: "Invalid duration format. Must be a positive duration."
+        }
+      )
+      .optional(),
     startDate: z.date(),
     endDate: z.date()
   })