Merge pull request #2802 from Infisical/audit-logs-project-select-filter

Improvement:  Filterable Project Select for Audit Logs

frontend/src/components/v2/DatePicker/DatePicker.tsx

@@ -14,6 +14,7 @@ export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
   onChange: (date?: Date) => void;
   popUpProps: PopoverProps;
   popUpContentProps: PopoverContentProps;
+  dateFormat?: "PPP" | "PP" | "P"; // extend as needed
 };
 
 // Doc: https://react-day-picker.js.org/
@@ -22,6 +23,7 @@ export const DatePicker = ({
   onChange,
   popUpProps,
   popUpContentProps,
+  dateFormat = "PPP",
   ...props
 }: DatePickerProps) => {
   const [timeValue, setTimeValue] = useState<string>(value ? format(value, "HH:mm") : "00:00");
@@ -53,7 +55,7 @@ export const DatePicker = ({
     <Popover {...popUpProps}>
       <PopoverTrigger asChild>
         <Button variant="outline_bg" leftIcon={<FontAwesomeIcon icon={faCalendar} />}>
-          {value ? format(value, "PPP") : "Pick a date and time"}
+          {value ? format(value, dateFormat) : "Pick a date and time"}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-fit p-2" {...popUpContentProps}>

frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx

@@ -53,7 +53,7 @@ export const FilterableSelect = <T,>({
       indicatorSeparator: () => "bg-bunker-400",
       dropdownIndicator: () => "text-bunker-200 p-1",
       menu: () =>
-        "mt-2 border text-sm text-mineshaft-200 bg-mineshaft-900 border-mineshaft-600 rounded-md",
+        "mt-2 border text-sm text-mineshaft-200 thin-scrollbar bg-mineshaft-900 border-mineshaft-600 rounded-md",
       groupHeading: () => "ml-3 mt-2 mb-1 text-mineshaft-400 text-sm",
       option: ({ isFocused, isSelected }) =>
         twMerge(