Merge branch 'main' into secret-rotations-v2-feature

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

@@ -18,7 +18,7 @@ export const AuditLogsPage = () => {
             title="Audit logs"
             description="Audit logs for security and compliance teams to monitor information access."
           />
-          <LogsSection filterClassName="static py-2" showFilters />
+          <LogsSection />
         </div>
       </div>
     </div>

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

@@ -0,0 +1,32 @@
+import { twMerge } from "tailwind-merge";
+
+import { Button, Tooltip } from "@app/components/v2";
+
+type Props = {
+  hoverTooltip?: string;
+  className?: string;
+  label: string;
+  onClear: () => void;
+  children: React.ReactNode;
+};
+
+export const LogFilterItem = ({ label, onClear, hoverTooltip, children, className }: 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>
+    </Tooltip>
+  );
+};

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

@@ -1,11 +1,26 @@
 /* eslint-disable no-nested-ternary */
-import { useState } from "react";
-import { Control, Controller, UseFormReset, UseFormSetValue, UseFormWatch } from "react-hook-form";
-import { faCaretDown, faCheckCircle, faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import { useMemo, useState } from "react";
+import {
+  Control,
+  Controller,
+  UseFormGetFieldState,
+  UseFormReset,
+  UseFormResetField,
+  UseFormSetValue,
+  UseFormWatch
+} from "react-hook-form";
+import {
+  faArrowRight,
+  faCaretDown,
+  faCheckCircle,
+  faFilterCircleXmark
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import {
+  Badge,
   Button,
   DatePicker,
   DropdownMenu,
@@ -19,13 +34,17 @@ import {
   SelectItem
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import { useGetAuditLogActorFilterOpts, useGetUserWorkspaces } from "@app/hooks/api";
-import { eventToNameMap, userAgentTTypeoNameMap } from "@app/hooks/api/auditLogs/constants";
-import { ActorType, EventType } from "@app/hooks/api/auditLogs/enums";
-import { Actor } from "@app/hooks/api/auditLogs/types";
-import { ProjectType } from "@app/hooks/api/workspace/types";
+import { useGetUserWorkspaces } from "@app/hooks/api";
+import {
+  eventToNameMap,
+  secretEvents,
+  userAgentTTypeoNameMap
+} from "@app/hooks/api/auditLogs/constants";
+import { EventType } from "@app/hooks/api/auditLogs/enums";
+import { UserAgentType } from "@app/hooks/api/auth/types";
 
-import { AuditLogFilterFormData } from "./types";
+import { LogFilterItem } from "./LogFilterItem";
+import { AuditLogFilterFormData, Presets } from "./types";
 
 const eventTypes = Object.entries(eventToNameMap).map(([value, label]) => ({ label, value }));
 const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label]) => ({
@@ -34,26 +53,70 @@ const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label
 }));
 
 type Props = {
-  presets?: {
-    actorId?: string;
-    eventType?: EventType[];
-  };
-  className?: string;
-  isOrgAuditLogs?: boolean;
-  setValue: UseFormSetValue<AuditLogFilterFormData>;
+  presets?: Presets;
   control: Control<AuditLogFilterFormData>;
   reset: UseFormReset<AuditLogFilterFormData>;
+  resetField: UseFormResetField<AuditLogFilterFormData>;
   watch: UseFormWatch<AuditLogFilterFormData>;
+  getFieldState: UseFormGetFieldState<AuditLogFilterFormData>;
+  setValue: UseFormSetValue<AuditLogFilterFormData>;
+};
+
+const getActiveFilterCount = (
+  getFieldState: UseFormGetFieldState<AuditLogFilterFormData>,
+  watch: UseFormWatch<AuditLogFilterFormData>
+) => {
+  const fields = [
+    "actor",
+    "project",
+    "eventType",
+    "startDate",
+    "endDate",
+    "environment",
+    "secretPath",
+    "userAgentType",
+    "secretKey"
+  ] as Partial<keyof AuditLogFilterFormData>[];
+
+  let filterCount = 0;
+
+  // either start or end date should only be counted as one filter
+  let dateProcessed = false;
+
+  fields.forEach((field) => {
+    const fieldState = getFieldState(field);
+
+    if (
+      field === "userAgentType" ||
+      field === "environment" ||
+      field === "secretKey" ||
+      field === "secretPath"
+    ) {
+      const value = watch(field);
+
+      if (value !== undefined && value !== "") {
+        filterCount += 1;
+      }
+    } else if (fieldState.isDirty && !dateProcessed) {
+      filterCount += 1;
+
+      if (field === "startDate" || field === "endDate") {
+        dateProcessed = true;
+      }
+    }
+  });
+
+  return filterCount;
 };
 
 export const LogsFilter = ({
   presets,
-  isOrgAuditLogs,
-  className,
   control,
   reset,
-  setValue,
-  watch
+  resetField,
+  watch,
+  getFieldState,
+  setValue
 }: Props) => {
   const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
   const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
@@ -63,288 +126,423 @@ export const LogsFilter = ({
 
   const workspacesInOrg = workspaces.filter((ws) => ws.orgId === currentOrg?.id);
 
-  const { data, isPending } = useGetAuditLogActorFilterOpts(workspaces?.[0]?.id ?? "");
-
-  const renderActorSelectItem = (actor: Actor) => {
-    switch (actor.type) {
-      case ActorType.USER:
-        return (
-          <SelectItem
-            value={`${actor.type}-${actor.metadata.userId}`}
-            key={`user-actor-filter-${actor.metadata.userId}`}
-          >
-            {actor.metadata.email}
-          </SelectItem>
-        );
-      case ActorType.SERVICE:
-        return (
-          <SelectItem
-            value={`${actor.type}-${actor.metadata.serviceId}`}
-            key={`service-actor-filter-${actor.metadata.serviceId}`}
-          >
-            {actor.metadata.name}
-          </SelectItem>
-        );
-      case ActorType.IDENTITY:
-        return (
-          <SelectItem
-            value={`${actor.type}-${actor.metadata.identityId}`}
-            key={`identity-filter-${actor.metadata.identityId}`}
-          >
-            {actor.metadata.name}
-          </SelectItem>
-        );
-      case ActorType.KMIP_CLIENT:
-        return (
-          <SelectItem
-            value={`${actor.type}-${actor.metadata.clientId}`}
-            key={`kmip-client-filter-${actor.metadata.clientId}`}
-          >
-            {actor.metadata.name}
-          </SelectItem>
-        );
-      default:
-        return (
-          <SelectItem value="actor-none" key="actor-none">
-            N/A
-          </SelectItem>
-        );
-    }
-  };
-
   const selectedEventTypes = watch("eventType") as EventType[] | undefined;
   const selectedProject = watch("project");
 
+  const showSecretsSection =
+    selectedEventTypes?.some(
+      (eventType) => secretEvents.includes(eventType) && eventType !== EventType.GET_SECRETS
+    ) || selectedEventTypes?.length === 0;
+
+  const availableEnvironments = useMemo(() => {
+    if (!selectedProject) return [];
+
+    return workspacesInOrg.find((ws) => ws.id === selectedProject.id)?.environments ?? [];
+  }, [selectedProject, workspacesInOrg]);
+
+  const activeFilterCount = getActiveFilterCount(getFieldState, watch);
+
   return (
-    <div
-      className={twMerge(
-        "sticky top-20 z-10 flex flex-wrap items-center justify-between bg-bunker-800",
-        className
-      )}
-    >
-      <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) => {
-                    if (e === null) {
-                      setValue("secretPath", "");
-                    }
-                    onChange(e);
-                  }}
-                  placeholder="Select a project..."
-                  options={workspacesInOrg.map(({ name, id, type }) => ({ name, id, type }))}
-                  getOptionValue={(option) => option.id}
-                  getOptionLabel={(option) => option.name}
-                />
-              </FormControl>
-            )}
-          />
-        )}
-        {selectedProject?.type === ProjectType.SecretManager && (
-          <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}
-          name="eventType"
-          render={({ field }) => (
-            <FormControl label="Events">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <div className="inline-flex w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
-                    {selectedEventTypes?.length === 1
-                      ? eventTypes.find((eventType) => eventType.value === selectedEventTypes[0])
-                          ?.label
-                      : selectedEventTypes?.length === 0
-                        ? "All events"
-                        : `${selectedEventTypes?.length} events selected`}
-                    <FontAwesomeIcon icon={faCaretDown} className="ml-2 text-xs" />
-                  </div>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="z-[100] max-h-80 overflow-hidden">
-                  <div className="max-h-80 overflow-y-auto">
-                    {eventTypes && eventTypes.length > 0 ? (
-                      eventTypes.map((eventType) => {
-                        const isSelected = selectedEventTypes?.includes(
-                          eventType.value as EventType
-                        );
-
-                        return (
-                          <DropdownMenuItem
-                            onSelect={(event) => eventTypes.length > 1 && event.preventDefault()}
-                            onClick={() => {
-                              if (selectedEventTypes?.includes(eventType.value as EventType)) {
-                                field.onChange(
-                                  selectedEventTypes?.filter((e: string) => e !== eventType.value)
-                                );
-                              } else {
-                                field.onChange([...(selectedEventTypes || []), eventType.value]);
-                              }
-                            }}
-                            key={`event-type-${eventType.value}`}
-                            icon={
-                              isSelected ? (
-                                <FontAwesomeIcon
-                                  icon={faCheckCircle}
-                                  className="pr-0.5 text-primary"
-                                />
-                              ) : (
-                                <div className="pl-[1.01rem]" />
-                              )
-                            }
-                            iconPos="left"
-                            className="w-[28.4rem] text-sm"
-                          >
-                            {eventType.label}
-                          </DropdownMenuItem>
-                        );
-                      })
-                    ) : (
-                      <div />
-                    )}
-                  </div>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </FormControl>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline_bg" colorSchema="primary">
+          <FontAwesomeIcon icon={faFilterCircleXmark} className="mr-3 px-[0.1rem]" />
+          Filters
+          {activeFilterCount > 0 && (
+            <Badge className="ml-2 px-1.5 py-0.5" variant="primary">
+              {activeFilterCount}
+            </Badge>
           )}
-        />
-
-        {!isPending && data && data.length > 0 && !presets?.actorId && (
-          <Controller
-            control={control}
-            name="actor"
-            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-              <FormControl
-                label="Actor"
-                errorText={error?.message}
-                isError={Boolean(error)}
-                className="w-40"
-              >
-                <Select
-                  {...(field.value ? { value: field.value } : { placeholder: "Select" })}
-                  {...field}
-                  onValueChange={(e) => onChange(e)}
-                  className="w-full border border-mineshaft-500 bg-mineshaft-700 text-mineshaft-100"
-                >
-                  {data.map((actor) => renderActorSelectItem(actor))}
-                </Select>
-              </FormControl>
-            )}
-          />
-        )}
-        <Controller
-          control={control}
-          name="userAgentType"
-          render={({ field: { onChange, value, ...field }, fieldState: { error } }) => (
-            <FormControl
-              label="Source"
-              errorText={error?.message}
-              isError={Boolean(error)}
-              className="w-40"
-            >
-              <Select
-                value={value === undefined ? "all" : value}
-                {...field}
-                onValueChange={(e) => {
-                  if (e === "all") onChange(undefined);
-                  else onChange(e);
-                }}
-                className={twMerge("w-full border border-mineshaft-500 bg-mineshaft-700")}
-              >
-                <SelectItem value="all" key="all">
-                  All sources
-                </SelectItem>
-                {userAgentTypes.map(({ label, value: userAgent }) => (
-                  <SelectItem value={userAgent} key={label}>
-                    {label}
-                  </SelectItem>
-                ))}
-              </Select>
-            </FormControl>
-          )}
-        />
-        <Controller
-          name="startDate"
-          control={control}
-          render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-            return (
-              <FormControl label="Start date" errorText={error?.message} isError={Boolean(error)}>
-                <DatePicker
-                  value={field.value || undefined}
-                  onChange={onChange}
-                  dateFormat="P"
-                  popUpProps={{
-                    open: isStartDatePickerOpen,
-                    onOpenChange: setIsStartDatePickerOpen
-                  }}
-                  popUpContentProps={{}}
-                />
-              </FormControl>
-            );
-          }}
-        />
-        <Controller
-          name="endDate"
-          control={control}
-          render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-            return (
-              <FormControl label="End date" errorText={error?.message} isError={Boolean(error)}>
-                <DatePicker
-                  value={field.value || undefined}
-                  onChange={onChange}
-                  dateFormat="P"
-                  popUpProps={{
-                    open: isEndDatePickerOpen,
-                    onOpenChange: setIsEndDatePickerOpen
-                  }}
-                  popUpContentProps={{}}
-                />
-              </FormControl>
-            );
-          }}
-        />
-        <Button
-          isLoading={false}
-          colorSchema="primary"
-          variant="outline_bg"
-          className="mt-[0.45rem]"
-          type="submit"
-          leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} />}
-          onClick={() =>
-            reset({
-              eventType: presets?.eventType || [],
-              actor: presets?.actorId,
-              userAgentType: undefined,
-              startDate: undefined,
-              endDate: undefined,
-              project: null
-            })
-          }
-        >
-          Clear filters
         </Button>
-      </div>
-    </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="mt-4 py-4">
+        <div className="flex min-w-64 flex-col font-inter">
+          <div className="mb-3 flex items-center border-b border-b-mineshaft-500 px-3 pb-2">
+            <div className="flex w-full items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span>Filters</span>
+                <Badge className="px-1.5 py-0.5" variant="primary">
+                  {activeFilterCount}
+                </Badge>
+              </div>
+              <Button
+                onClick={() => {
+                  reset({
+                    eventType: presets?.eventType || [],
+                    actor: presets?.actorId,
+                    userAgentType: undefined,
+                    startDate: undefined,
+                    endDate: undefined,
+                    project: null,
+                    secretPath: undefined,
+                    secretKey: undefined
+                  });
+                }}
+                variant="link"
+                className="text-mineshaft-400"
+                size="xs"
+              >
+                Clear filters
+              </Button>
+            </div>
+          </div>
+
+          <div className="px-3">
+            <LogFilterItem
+              label="Events"
+              onClear={() => {
+                resetField("eventType");
+              }}
+            >
+              <Controller
+                control={control}
+                name="eventType"
+                render={({ field }) => (
+                  <FormControl>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <div className="thin-scrollbar inline-flex w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                          {selectedEventTypes?.length === 1
+                            ? eventTypes.find(
+                                (eventType) => eventType.value === selectedEventTypes[0]
+                              )?.label
+                            : selectedEventTypes?.length === 0
+                              ? "All events"
+                              : `${selectedEventTypes?.length} events selected`}
+                          <FontAwesomeIcon icon={faCaretDown} className="ml-2 text-xs" />
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        align="start"
+                        className="thin-scrollbar z-[100] max-h-80 overflow-hidden"
+                      >
+                        <div className="max-h-80 overflow-y-auto">
+                          {eventTypes && eventTypes.length > 0 ? (
+                            eventTypes.map((eventType) => {
+                              const isSelected = selectedEventTypes?.includes(
+                                eventType.value as EventType
+                              );
+
+                              return (
+                                <DropdownMenuItem
+                                  onSelect={(event) =>
+                                    eventTypes.length > 1 && event.preventDefault()
+                                  }
+                                  onClick={() => {
+                                    if (
+                                      selectedEventTypes?.includes(eventType.value as EventType)
+                                    ) {
+                                      field.onChange(
+                                        selectedEventTypes?.filter(
+                                          (e: string) => e !== eventType.value
+                                        )
+                                      );
+                                    } else {
+                                      field.onChange([
+                                        ...(selectedEventTypes || []),
+                                        eventType.value
+                                      ]);
+                                    }
+                                  }}
+                                  key={`event-type-${eventType.value}`}
+                                  icon={
+                                    isSelected ? (
+                                      <FontAwesomeIcon
+                                        icon={faCheckCircle}
+                                        className="pr-0.5 text-primary"
+                                      />
+                                    ) : (
+                                      <div className="pl-[1.01rem]" />
+                                    )
+                                  }
+                                  iconPos="left"
+                                  className="w-[28.4rem] text-sm"
+                                >
+                                  {eventType.label}
+                                </DropdownMenuItem>
+                              );
+                            })
+                          ) : (
+                            <div />
+                          )}
+                        </div>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </FormControl>
+                )}
+              />
+            </LogFilterItem>
+            <LogFilterItem
+              label="Source"
+              onClear={() => {
+                resetField("userAgentType");
+              }}
+            >
+              <Controller
+                control={control}
+                name="userAgentType"
+                render={({ field: { onChange, value, ...field }, fieldState: { error } }) => (
+                  <FormControl
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                    className="w-full"
+                  >
+                    <Select
+                      value={value === undefined ? "all" : value}
+                      {...field}
+                      onValueChange={(e) => {
+                        if (e === "all") onChange(undefined);
+                        else setValue("userAgentType", e as UserAgentType, { shouldDirty: true });
+                      }}
+                      className={twMerge("w-full border border-mineshaft-500 bg-mineshaft-700")}
+                    >
+                      <SelectItem value="all" key="all">
+                        All sources
+                      </SelectItem>
+                      {userAgentTypes.map(({ label, value: userAgent }) => (
+                        <SelectItem value={userAgent} key={label}>
+                          {label}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+            </LogFilterItem>
+
+            <LogFilterItem
+              label="Date"
+              onClear={() => {
+                resetField("startDate");
+                resetField("endDate");
+              }}
+            >
+              <div className="flex h-10 w-full items-center justify-between gap-2">
+                <Controller
+                  name="startDate"
+                  control={control}
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        className="relative top-2"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <DatePicker
+                          value={field.value || undefined}
+                          onChange={onChange}
+                          dateFormat="P"
+                          popUpProps={{
+                            open: isStartDatePickerOpen,
+                            onOpenChange: setIsStartDatePickerOpen
+                          }}
+                          popUpContentProps={{}}
+                        />
+                      </FormControl>
+                    );
+                  }}
+                />
+
+                <div className="flex items-center -space-x-3">
+                  <div className="h-[2px] w-[20px] rounded-full bg-mineshaft-500" />
+                  <FontAwesomeIcon icon={faArrowRight} className="text-mineshaft-500" />
+                </div>
+
+                <Controller
+                  name="endDate"
+                  control={control}
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        className="relative top-2"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <DatePicker
+                          value={field.value || undefined}
+                          onChange={onChange}
+                          dateFormat="P"
+                          popUpProps={{
+                            open: isEndDatePickerOpen,
+                            onOpenChange: setIsEndDatePickerOpen
+                          }}
+                          popUpContentProps={{}}
+                        />
+                      </FormControl>
+                    );
+                  }}
+                />
+              </div>
+            </LogFilterItem>
+            <AnimatePresence initial={false}>
+              {showSecretsSection && (
+                <motion.div
+                  className="mt-2 overflow-hidden"
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: "auto" }}
+                  exit={{ opacity: 0, height: 0 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <div className="mb-3 mt-2">
+                    <p className="text-xs opacity-60">Secrets</p>
+                    <div className="h-[1px] w-full rounded-full bg-mineshaft-500" />
+                  </div>
+
+                  <LogFilterItem
+                    label="Project"
+                    onClear={() => {
+                      resetField("project");
+                      resetField("environment");
+                      setValue("secretPath", "");
+                      setValue("secretKey", "");
+                    }}
+                  >
+                    <Controller
+                      control={control}
+                      name="project"
+                      render={({ field: { onChange, value }, fieldState: { error } }) => (
+                        <FormControl
+                          errorText={error?.message}
+                          isError={Boolean(error)}
+                          className="w-full"
+                        >
+                          <FilterableSelect
+                            value={value}
+                            isClearable
+                            onChange={(e) => {
+                              if (e === null) {
+                                setValue("secretPath", "");
+                                setValue("secretKey", "");
+                              }
+                              resetField("environment");
+                              onChange(e);
+                            }}
+                            placeholder="All projects"
+                            options={workspacesInOrg.map(({ name, id, type }) => ({
+                              name,
+                              id,
+                              type
+                            }))}
+                            getOptionValue={(option) => option.id}
+                            getOptionLabel={(option) => option.name}
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </LogFilterItem>
+
+                  <LogFilterItem
+                    label="Environment"
+                    hoverTooltip={
+                      !selectedProject
+                        ? "Select a project before filtering by environment."
+                        : undefined
+                    }
+                    className={twMerge(!selectedProject && "opacity-50")}
+                    onClear={() => {
+                      resetField("environment");
+                    }}
+                  >
+                    <Controller
+                      control={control}
+                      name="environment"
+                      render={({ field: { onChange, value }, fieldState: { error } }) => (
+                        <FormControl
+                          errorText={error?.message}
+                          isError={Boolean(error)}
+                          className="w-full"
+                        >
+                          <FilterableSelect
+                            value={value}
+                            key={value?.name || "filter-environment"}
+                            isClearable
+                            isDisabled={!selectedProject}
+                            onChange={(e) => onChange(e)}
+                            placeholder="All environments"
+                            options={availableEnvironments.map(({ name, slug }) => ({
+                              name,
+                              slug
+                            }))}
+                            getOptionValue={(option) => option.slug}
+                            getOptionLabel={(option) => option.name}
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </LogFilterItem>
+                  <LogFilterItem
+                    label="Secret Path"
+                    hoverTooltip={
+                      !selectedProject
+                        ? "Select a project before filtering by secret path."
+                        : undefined
+                    }
+                    className={twMerge(!selectedProject && "opacity-50")}
+                    onClear={() => {
+                      setValue("secretPath", "");
+                    }}
+                  >
+                    <Controller
+                      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"
+                        >
+                          <Input
+                            placeholder="Enter secret path"
+                            className="disabled:cursor-not-allowed"
+                            isDisabled={!selectedProject}
+                            {...field}
+                            value={value}
+                            onChange={(e) => onChange(e.target.value)}
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </LogFilterItem>
+
+                  <LogFilterItem
+                    hoverTooltip={
+                      !selectedProject
+                        ? "Select a project before filtering by secret key."
+                        : undefined
+                    }
+                    className={twMerge(!selectedProject && "opacity-50")}
+                    label="Secret Key"
+                    onClear={() => {
+                      setValue("secretKey", "");
+                    }}
+                  >
+                    <Controller
+                      control={control}
+                      name="secretKey"
+                      render={({ field: { onChange, value, ...field } }) => (
+                        <FormControl
+                          tooltipText="Filter audit logs related to a specific secret."
+                          className="w-full"
+                        >
+                          <Input
+                            isDisabled={!selectedProject}
+                            {...field}
+                            placeholder="Enter secret key"
+                            className="disabled:cursor-not-allowed"
+                            value={value}
+                            onChange={(e) =>
+                              setValue("secretKey", e.target.value, { shouldDirty: true })
+                            }
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </LogFilterItem>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

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

@@ -6,46 +6,40 @@ 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 { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { LogsFilter } from "./LogsFilter";
 import { LogsTable } from "./LogsTable";
-import { AuditLogFilterFormData, auditLogFilterFormSchema } from "./types";
+import { AuditLogFilterFormData, auditLogFilterFormSchema, Presets } from "./types";
 
 type Props = {
-  presets?: {
-    actorId?: string;
-    eventType?: EventType[];
-    actorType?: ActorType;
-    startDate?: Date;
-    endDate?: Date;
-    eventMetadata?: Record<string, string>;
-  };
-
-  showFilters?: boolean;
-  filterClassName?: string;
+  presets?: Presets;
   refetchInterval?: number;
+  showFilters?: boolean;
 };
 
 export const LogsSection = withPermission(
-  ({ presets, filterClassName, refetchInterval, showFilters }: Props) => {
+  ({ presets, refetchInterval, showFilters = true }: Props) => {
     const { subscription } = useSubscription();
 
     const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
-    const { control, reset, watch, setValue } = useForm<AuditLogFilterFormData>({
-      resolver: zodResolver(auditLogFilterFormSchema),
-      defaultValues: {
-        project: null,
-        actor: presets?.actorId,
-        eventType: presets?.eventType || [],
-        page: 1,
-        perPage: 10,
-        startDate: presets?.startDate ?? new Date(new Date().setDate(new Date().getDate() - 1)), // day before today
-        endDate: presets?.endDate ?? new Date(new Date(Date.now()).setHours(23, 59, 59, 999)) // end of today
-      }
-    });
+    const { control, reset, watch, getFieldState, resetField, setValue } =
+      useForm<AuditLogFilterFormData>({
+        resolver: zodResolver(auditLogFilterFormSchema),
+        defaultValues: {
+          project: null,
+          environment: undefined,
+          secretKey: "",
+          secretPath: "",
+          actor: presets?.actorId,
+          eventType: presets?.eventType || [],
+          userAgentType: undefined,
+          startDate: presets?.startDate ?? new Date(new Date().setDate(new Date().getDate() - 1)),
+          endDate: presets?.endDate ?? new Date(new Date(Date.now()).setHours(23, 59, 59, 999))
+        }
+      });
 
     useEffect(() => {
       if (subscription && !subscription.auditLogs) {
@@ -57,30 +51,37 @@ export const LogsSection = withPermission(
     const userAgentType = watch("userAgentType") as UserAgentType | undefined;
     const actor = watch("actor");
     const projectId = watch("project")?.id;
+    const environment = watch("environment")?.slug;
     const secretPath = watch("secretPath");
+    const secretKey = watch("secretKey");
 
     const startDate = watch("startDate");
     const endDate = watch("endDate");
 
     const [debouncedSecretPath] = useDebounce<string>(secretPath!, 500);
+    const [debouncedSecretKey] = useDebounce<string>(secretKey!, 500);
 
     return (
-      <div>
-        {showFilters && (
-          <LogsFilter
-            isOrgAuditLogs
-            className={filterClassName}
-            presets={presets}
-            control={control}
-            setValue={setValue}
-            watch={watch}
-            reset={reset}
-          />
-        )}
+      <div className="space-y-2">
+        <div className="flex w-full justify-end">
+          {showFilters && (
+            <LogsFilter
+              presets={presets}
+              control={control}
+              watch={watch}
+              reset={reset}
+              resetField={resetField}
+              getFieldState={getFieldState}
+              setValue={setValue}
+            />
+          )}
+        </div>
+
         <LogsTable
           refetchInterval={refetchInterval}
           filter={{
             secretPath: debouncedSecretPath || undefined,
+            secretKey: debouncedSecretKey || undefined,
             eventMetadata: presets?.eventMetadata,
             projectId,
             actorType: presets?.actorType,
@@ -89,6 +90,7 @@ export const LogsSection = withPermission(
             userAgentType,
             startDate,
             endDate,
+            environment,
             actor
           }}
         />

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

@@ -1,10 +1,12 @@
 import { Fragment } from "react";
 import { faFile, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import {
   Button,
   EmptyState,
+  Spinner,
   Table,
   TableContainer,
   TableSkeleton,
@@ -52,7 +54,9 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => {
         <Table>
           <THead>
             <Tr>
-              <Th className="w-24" />
+              <Th className="w-24">
+                <Spinner size="xs" className={twMerge(isPending ? "opacity-100" : "opacity-0")} />
+              </Th>
               <Th className="w-64">
                 Timestamp
                 <Tooltip
@@ -94,7 +98,7 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => {
         <Button
           className="mb-20 mt-4 px-4 py-3 text-sm"
           isFullWidth
-          variant="star"
+          variant="outline_bg"
           isLoading={isFetchingNextPage}
           isDisabled={isFetchingNextPage || !hasNextPage}
           onClick={() => fetchNextPage()}

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

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
+import { ActorType, EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
 export const auditLogFilterFormSchema = z
@@ -10,10 +10,12 @@ export const auditLogFilterFormSchema = z
       .object({ id: z.string(), name: z.string(), type: z.nativeEnum(ProjectType) })
       .optional()
       .nullable(),
+    environment: z.object({ name: z.string(), slug: z.string() }).optional().nullable(),
     eventType: z.nativeEnum(EventType).array(),
     actor: z.string().optional(),
     userAgentType: z.nativeEnum(UserAgentType),
     secretPath: z.string().optional(),
+    secretKey: z.string().optional(),
     startDate: z.date().optional(),
     endDate: z.date().optional(),
     page: z.coerce.number().optional(),
@@ -39,3 +41,12 @@ export type SetValueType = (
     shouldDirty?: boolean;
   }
 ) => void;
+
+export type Presets = {
+  actorId?: string;
+  eventType?: EventType[];
+  actorType?: ActorType;
+  startDate?: Date;
+  endDate?: Date;
+  eventMetadata?: Record<string, string>;
+};

frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserAuditLogsSection.tsx

@@ -1,8 +1,3 @@
-import { useState } from "react";
-import { faFilter } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { IconButton, Tooltip } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
 import { withPermission } from "@app/hoc";
 import { OrgUser } from "@app/hooks/api/types";
@@ -14,7 +9,6 @@ type Props = {
 
 export const UserAuditLogsSection = withPermission(
   ({ orgMembership }: Props) => {
-    const [showFilter, setShowFilter] = useState(false);
     const { subscription } = useSubscription();
 
     // eslint-disable-next-line no-nested-ternary
@@ -23,25 +17,8 @@ export const UserAuditLogsSection = withPermission(
         <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
           <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
             <p className="text-lg font-semibold text-gray-200">Audit Logs</p>
-
-            <Tooltip content="Show audit log filters">
-              <IconButton
-                colorSchema="primary"
-                ariaLabel="copy icon"
-                variant="plain"
-                className="group relative"
-                onClick={() => setShowFilter(!showFilter)}
-              >
-                <div className="flex items-center space-x-2">
-                  <p>Filter</p>
-                  <FontAwesomeIcon icon={faFilter} />
-                </div>
-              </IconButton>
-            </Tooltip>
           </div>
           <LogsSection
-            showFilters={showFilter}
-            filterClassName="bg-mineshaft-900 static"
             presets={{
               actorId: orgMembership.user.id
             }}

frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationAuditLogsSection.tsx

@@ -35,7 +35,6 @@ export const IntegrationAuditLogsSection = ({ integration }: Props) => {
           startDate: new Date(new Date().setDate(new Date().getDate() - auditLogsRetentionDays)),
           eventType: INTEGRATION_EVENTS
         }}
-        filterClassName="bg-mineshaft-900 static"
       />
     </div>
   ) : (

frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -7,7 +7,13 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  Input,
+  PasswordGenerator
+} from "@app/components/v2";
 import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import {
@@ -226,10 +232,13 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
             isError={Boolean(errors?.value)}
             errorText={errors?.value?.message}
           >
-            <InfisicalSecretInput
-              {...field}
-              containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-            />
+            <div className="flex items-center gap-2">
+              <InfisicalSecretInput
+                {...field}
+                containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+              />
+              <PasswordGenerator onUsePassword={field.onChange} />
+            </div>
           </FormControl>
         )}
       />

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -17,11 +17,13 @@ import {
   faKey,
   faLock,
   faMinusSquare,
+  faPaste,
   faPlus,
   faRotate,
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import FileSaver from "file-saver";
 import { twMerge } from "tailwind-merge";
@@ -56,8 +58,19 @@ import {
 } from "@app/context";
 import { ProjectPermissionSecretRotationActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
-import { useCreateFolder, useDeleteSecretBatch, useMoveSecrets } from "@app/hooks/api";
-import { fetchProjectSecrets } from "@app/hooks/api/secrets/queries";
+import {
+  useCreateFolder,
+  useCreateSecretBatch,
+  useDeleteSecretBatch,
+  useMoveSecrets,
+  useUpdateSecretBatch
+} from "@app/hooks/api";
+import {
+  dashboardKeys,
+  fetchDashboardProjectSecretsByKeys
+} from "@app/hooks/api/dashboard/queries";
+import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
+import { fetchProjectSecrets, secretKeys } from "@app/hooks/api/secrets/queries";
 import { ApiErrorTypes, SecretType, TApiErrors, WsTag } from "@app/hooks/api/types";
 import { SecretSearchInput } from "@app/pages/secret-manager/OverviewPage/components/SecretSearchInput";
 
@@ -68,11 +81,19 @@ import {
   useSelectedSecrets
 } from "../../SecretMainPage.store";
 import { Filter, RowType } from "../../SecretMainPage.types";
+import { ReplicateFolderFromBoard } from "./ReplicateFolderFromBoard/ReplicateFolderFromBoard";
 import { CreateDynamicSecretForm } from "./CreateDynamicSecretForm";
 import { CreateSecretImportForm } from "./CreateSecretImportForm";
 import { FolderForm } from "./FolderForm";
 import { MoveSecretsModal } from "./MoveSecretsModal";
 
+type TParsedEnv = Record<string, { value: string; comments: string[]; secretPath?: string }>;
+type TParsedFolderEnv = Record<
+  string,
+  Record<string, { value: string; comments: string[]; secretPath?: string }>
+>;
+type TSecOverwriteOpt = { update: TParsedEnv; create: TParsedEnv };
+
 type Props = {
   // switch the secrets type as it gets decrypted after api call
   environment: string;
@@ -118,7 +139,9 @@ export const ActionBar = ({
     "addSecretRotation",
     "moveSecrets",
     "misc",
-    "upgradePlan"
+    "upgradePlan",
+    "replicateFolder",
+    "confirmUpload"
   ] as const);
   const isProtectedBranch = Boolean(protectedBranchPolicyName);
   const { subscription } = useSubscription();
@@ -126,6 +149,13 @@ export const ActionBar = ({
   const { mutateAsync: createFolder } = useCreateFolder();
   const { mutateAsync: deleteBatchSecretV3 } = useDeleteSecretBatch();
   const { mutateAsync: moveSecrets } = useMoveSecrets();
+  const { mutateAsync: updateSecretBatch, isPending: isUpdatingSecrets } = useUpdateSecretBatch({
+    options: { onSuccess: undefined }
+  });
+  const { mutateAsync: createSecretBatch, isPending: isCreatingSecrets } = useCreateSecretBatch({
+    options: { onSuccess: undefined }
+  });
+  const queryClient = useQueryClient();
 
   const selectedSecrets = useSelectedSecrets();
   const { reset: resetSelectedSecret } = useSelectedSecretActions();
@@ -297,6 +327,285 @@ export const ActionBar = ({
     }
   };
 
+  // Replicate Folder Logic
+  const createSecretCount = Object.keys(
+    (popUp.confirmUpload?.data as TSecOverwriteOpt)?.create || {}
+  ).length;
+
+  const updateSecretCount = Object.keys(
+    (popUp.confirmUpload?.data as TSecOverwriteOpt)?.update || {}
+  ).length;
+
+  const isNonConflictingUpload = !updateSecretCount;
+  const isSubmitting = isCreatingSecrets || isUpdatingSecrets;
+
+  const handleParsedEnvMultiFolder = async (envByPath: TParsedFolderEnv) => {
+    if (Object.keys(envByPath).length === 0) {
+      createNotification({
+        type: "error",
+        text: "Failed to find secrets"
+      });
+      return;
+    }
+
+    try {
+      const allUpdateSecrets: TParsedEnv = {};
+      const allCreateSecrets: TParsedEnv = {};
+
+      await Promise.all(
+        Object.entries(envByPath).map(async ([folderPath, secrets]) => {
+          // Normalize the path
+          let normalizedPath = folderPath;
+
+          // If the path is "/", use the current secretPath
+          if (normalizedPath === "/") {
+            normalizedPath = secretPath;
+          } else {
+            // Otherwise, concatenate with the current secretPath, avoiding double slashes
+            const baseSecretPath = secretPath.endsWith("/") ? secretPath.slice(0, -1) : secretPath;
+            // Remove leading slash from folder path if present to avoid double slashes
+            const cleanFolderPath = folderPath.startsWith("/")
+              ? folderPath.substring(1)
+              : folderPath;
+            normalizedPath = `${baseSecretPath}/${cleanFolderPath}`;
+          }
+
+          const secretFolderKeys = Object.keys(secrets);
+
+          if (secretFolderKeys.length === 0) return;
+
+          // Check which secrets already exist in this path
+          const batchSize = 50;
+          const secretBatches = Array.from(
+            { length: Math.ceil(secretFolderKeys.length / batchSize) },
+            (_, i) => secretFolderKeys.slice(i * batchSize, (i + 1) * batchSize)
+          );
+
+          const existingSecretLookup: Record<string, boolean> = {};
+
+          const processBatches = async () => {
+            await secretBatches.reduce(async (previous, batch) => {
+              await previous;
+
+              const { secrets: batchSecrets } = await fetchDashboardProjectSecretsByKeys({
+                secretPath: normalizedPath,
+                environment,
+                projectId: workspaceId,
+                keys: batch
+              });
+
+              batchSecrets.forEach((secret) => {
+                existingSecretLookup[secret.secretKey] = true;
+              });
+            }, Promise.resolve());
+          };
+
+          await processBatches();
+
+          // Categorize each secret as update or create
+          secretFolderKeys.forEach((secretKey) => {
+            const secretData = secrets[secretKey];
+
+            // Store the path with the secret for later batch processing
+            const secretWithPath = {
+              ...secretData,
+              secretPath: normalizedPath
+            };
+
+            if (existingSecretLookup[secretKey]) {
+              allUpdateSecrets[secretKey] = secretWithPath;
+            } else {
+              allCreateSecrets[secretKey] = secretWithPath;
+            }
+          });
+        })
+      );
+
+      handlePopUpOpen("confirmUpload", {
+        update: allUpdateSecrets,
+        create: allCreateSecrets
+      });
+    } catch (e) {
+      console.error(e);
+      createNotification({
+        text: "Failed to check for secret conflicts",
+        type: "error"
+      });
+      handlePopUpClose("confirmUpload");
+    }
+  };
+
+  const handleSaveFolderImport = async () => {
+    const { update, create } = popUp?.confirmUpload?.data as TSecOverwriteOpt;
+    try {
+      // Group secrets by their path for batch operations
+      const groupedCreateSecrets: Record<
+        string,
+        Array<{
+          type: SecretType;
+          secretComment: string;
+          secretValue: string;
+          secretKey: string;
+        }>
+      > = {};
+
+      const groupedUpdateSecrets: Record<
+        string,
+        Array<{
+          type: SecretType;
+          secretComment: string;
+          secretValue: string;
+          secretKey: string;
+        }>
+      > = {};
+
+      // Collect all unique paths that need folders to be created
+      const allPaths = new Set<string>();
+
+      // Add paths from create secrets
+      Object.values(create || {}).forEach((secData) => {
+        if (secData.secretPath && secData.secretPath !== secretPath) {
+          allPaths.add(secData.secretPath);
+        }
+      });
+
+      // Create a map of folder paths to their folder name (last segment)
+      const folderPaths = Array.from(allPaths).map((path) => {
+        // Remove trailing slash if it exists
+        const normalizedPath = path.endsWith("/") ? path.slice(0, -1) : path;
+        // Split by '/' to get path segments
+        const segments = normalizedPath.split("/");
+        // Get the last segment as the folder name
+        const folderName = segments[segments.length - 1];
+        // Get the parent path (everything except the last segment)
+        const parentPath = segments.slice(0, -1).join("/");
+
+        return {
+          folderName,
+          fullPath: normalizedPath,
+          parentPath: parentPath || "/"
+        };
+      });
+
+      // Sort paths by depth (shortest first) to ensure parent folders are created before children
+      folderPaths.sort(
+        (a, b) => (a.fullPath.match(/\//g) || []).length - (b.fullPath.match(/\//g) || []).length
+      );
+
+      // Track created folders to avoid duplicates
+      const createdFolders = new Set<string>();
+
+      // Create all necessary folders in order using Promise.all and reduce
+      await folderPaths.reduce(async (previousPromise, { folderName, fullPath, parentPath }) => {
+        // Wait for the previous promise to complete
+        await previousPromise;
+
+        // Skip if we've already created this folder
+        if (createdFolders.has(fullPath)) return Promise.resolve();
+
+        try {
+          await createFolder({
+            name: folderName,
+            path: parentPath,
+            environment,
+            projectId: workspaceId
+          });
+
+          createdFolders.add(fullPath);
+        } catch (err) {
+          console.log(`Folder ${folderName} may already exist:`, err);
+        }
+
+        return Promise.resolve();
+      }, Promise.resolve());
+
+      if (Object.keys(create || {}).length > 0) {
+        Object.entries(create).forEach(([secretKey, secData]) => {
+          // Use the stored secretPath or fall back to the current secretPath
+          const path = secData.secretPath || secretPath;
+
+          if (!groupedCreateSecrets[path]) {
+            groupedCreateSecrets[path] = [];
+          }
+
+          groupedCreateSecrets[path].push({
+            type: SecretType.Shared,
+            secretComment: secData.comments.join("\n"),
+            secretValue: secData.value,
+            secretKey
+          });
+        });
+
+        await Promise.all(
+          Object.entries(groupedCreateSecrets).map(([path, secrets]) =>
+            createSecretBatch({
+              secretPath: path,
+              workspaceId,
+              environment,
+              secrets
+            })
+          )
+        );
+      }
+
+      if (Object.keys(update || {}).length > 0) {
+        Object.entries(update).forEach(([secretKey, secData]) => {
+          // Use the stored secretPath or fall back to the current secretPath
+          const path = secData.secretPath || secretPath;
+
+          if (!groupedUpdateSecrets[path]) {
+            groupedUpdateSecrets[path] = [];
+          }
+
+          groupedUpdateSecrets[path].push({
+            type: SecretType.Shared,
+            secretComment: secData.comments.join("\n"),
+            secretValue: secData.value,
+            secretKey
+          });
+        });
+
+        // Update secrets for each path in parallel
+        await Promise.all(
+          Object.entries(groupedUpdateSecrets).map(([path, secrets]) =>
+            updateSecretBatch({
+              secretPath: path,
+              workspaceId,
+              environment,
+              secrets
+            })
+          )
+        );
+      }
+
+      // Invalidate appropriate queries to refresh UI
+      queryClient.invalidateQueries({
+        queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
+      });
+      queryClient.invalidateQueries({
+        queryKey: dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
+      });
+      queryClient.invalidateQueries({
+        queryKey: secretApprovalRequestKeys.count({ workspaceId })
+      });
+
+      // Close the modal and show notification
+      handlePopUpClose("confirmUpload");
+      createNotification({
+        type: "success",
+        text: isProtectedBranch
+          ? "Uploaded changes have been sent for review"
+          : "Successfully uploaded secrets"
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to upload secrets"
+      });
+    }
+  };
+
   return (
     <>
       <div className="mt-4 flex items-center space-x-2">
@@ -618,6 +927,29 @@ export const ActionBar = ({
                     </Button>
                   )}
                 </ProjectPermissionCan>
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Create}
+                  a={subject(ProjectPermissionSub.SecretFolders, {
+                    environment,
+                    secretPath
+                  })}
+                >
+                  {(isAllowed) => (
+                    <Button
+                      leftIcon={<FontAwesomeIcon icon={faPaste} className="pr-2" />}
+                      onClick={() => {
+                        handlePopUpOpen("replicateFolder");
+                        handlePopUpClose("misc");
+                      }}
+                      isDisabled={!isAllowed}
+                      variant="outline_bg"
+                      className="h-10 text-left"
+                      isFullWidth
+                    >
+                      Replicate Folder
+                    </Button>
+                  )}
+                </ProjectPermissionCan>
               </div>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -733,6 +1065,15 @@ export const ActionBar = ({
         handlePopUpToggle={handlePopUpToggle}
         onMoveApproved={handleSecretsMove}
       />
+      <ReplicateFolderFromBoard
+        isOpen={popUp.replicateFolder.isOpen}
+        onToggle={(isOpen) => handlePopUpToggle("replicateFolder", isOpen)}
+        onParsedEnv={handleParsedEnvMultiFolder}
+        environment={environment}
+        environments={currentWorkspace.environments}
+        workspaceId={workspaceId}
+        secretPath={secretPath}
+      />
       {subscription && (
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
@@ -744,6 +1085,58 @@ export const ActionBar = ({
           }
         />
       )}
+      <Modal
+        isOpen={popUp?.confirmUpload?.isOpen}
+        onOpenChange={(open) => handlePopUpToggle("confirmUpload", open)}
+      >
+        <ModalContent
+          title="Confirm Secret Upload"
+          footerContent={[
+            <Button
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+              colorSchema={isNonConflictingUpload ? "primary" : "danger"}
+              key="overwrite-btn"
+              onClick={handleSaveFolderImport}
+            >
+              {isNonConflictingUpload ? "Upload" : "Overwrite"}
+            </Button>,
+            <Button
+              key="keep-old-btn"
+              className="ml-4"
+              onClick={() => handlePopUpClose("confirmUpload")}
+              variant="outline_bg"
+              isDisabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+          ]}
+        >
+          {isNonConflictingUpload ? (
+            <div>
+              Are you sure you want to import {createSecretCount} secret
+              {createSecretCount > 1 ? "s" : ""} to this environment?
+            </div>
+          ) : (
+            <div className="flex flex-col text-gray-300">
+              <div>Your project already contains the following {updateSecretCount} secrets:</div>
+              <div className="mt-2 text-sm text-gray-400">
+                {Object.keys((popUp?.confirmUpload?.data as TSecOverwriteOpt)?.update || {})
+                  ?.map((key) => key)
+                  .join(", ")}
+              </div>
+              <div className="mt-6">
+                Are you sure you want to overwrite these secrets
+                {createSecretCount > 0
+                  ? ` and import ${createSecretCount} new
+                one${createSecretCount > 1 ? "s" : ""}`
+                  : ""}
+                ?
+              </div>
+            </div>
+          )}
+        </ModalContent>
+      </Modal>
     </>
   );
 };

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/ReplicateFolderFromBoard.tsx

@@ -0,0 +1,307 @@
+import { useEffect, useMemo, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faClone } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  Modal,
+  ModalContent,
+  Switch
+} from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
+import { useDebounce } from "@app/hooks";
+import { useGetAccessibleSecrets } from "@app/hooks/api/dashboard";
+import { SecretV3Raw } from "@app/hooks/api/types";
+
+import { SecretTreeView } from "./SecretTreeView";
+
+const formSchema = z.object({
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  secretPath: z
+    .string()
+    .trim()
+    .transform((val) =>
+      typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
+    ),
+  secrets: z
+    .object({
+      secretKey: z.string(),
+      secretValue: z.string().optional(),
+      secretPath: z.string()
+    })
+    .array()
+    .min(1, "Select one or more secrets to copy")
+});
+
+type TFormSchema = z.infer<typeof formSchema>;
+
+type Props = {
+  isOpen?: boolean;
+  onToggle: (isOpen: boolean) => void;
+  onParsedEnv: (
+    env: Record<string, Record<string, { value: string; comments: string[]; secretPath?: string }>>
+  ) => void;
+  environments?: { name: string; slug: string }[];
+  workspaceId: string;
+  environment: string;
+  secretPath: string;
+};
+
+type SecretFolder = {
+  items: Partial<SecretV3Raw>[];
+  subFolders: Record<string, SecretFolder>;
+};
+
+type SecretStructure = {
+  [rootPath: string]: SecretFolder;
+};
+
+export const ReplicateFolderFromBoard = ({
+  environments = [],
+  workspaceId,
+  isOpen,
+  onToggle,
+  onParsedEnv
+}: Props) => {
+  const [shouldIncludeValues, setShouldIncludeValues] = useState(true);
+
+  const { handleSubmit, control, watch, reset, setValue } = useForm<TFormSchema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { secretPath: "/", environment: environments?.[0], secrets: [] }
+  });
+
+  const envCopySecPath = watch("secretPath");
+  const selectedEnvSlug = watch("environment");
+  const selectedSecrets = watch("secrets");
+  const [debouncedEnvCopySecretPath] = useDebounce(envCopySecPath);
+
+  const { data: accessibleSecrets } = useGetAccessibleSecrets({
+    projectId: workspaceId,
+    secretPath: "/",
+    environment: selectedEnvSlug.slug,
+    recursive: true,
+    filterByAction: shouldIncludeValues
+      ? ProjectPermissionSecretActions.ReadValue
+      : ProjectPermissionSecretActions.DescribeSecret,
+    options: { enabled: Boolean(workspaceId) && Boolean(selectedEnvSlug) && isOpen }
+  });
+
+  const restructureSecrets = useMemo(() => {
+    if (!accessibleSecrets) return {};
+
+    const result: SecretStructure = {};
+    result["/"] = {
+      items: [],
+      subFolders: {}
+    };
+
+    accessibleSecrets.forEach((secret) => {
+      const path = secret.secretPath || "/";
+
+      if (path === "/") {
+        result["/"]?.items.push(secret);
+        return;
+      }
+
+      const normalizedPath = path.startsWith("/") ? path.substring(1) : path;
+      const pathParts = normalizedPath.split("/");
+
+      let currentFolder = result["/"];
+
+      for (let i = 0; i < pathParts.length; i += 1) {
+        const part = pathParts[i];
+
+        // eslint-disable-next-line no-continue
+        if (!part) continue;
+
+        if (i === pathParts.length - 1) {
+          if (!currentFolder.subFolders[part]) {
+            currentFolder.subFolders[part] = {
+              items: [],
+              subFolders: {}
+            };
+          }
+          currentFolder.subFolders[part].items.push(secret);
+        } else {
+          if (!currentFolder.subFolders[part]) {
+            currentFolder.subFolders[part] = {
+              items: [],
+              subFolders: {}
+            };
+          }
+          currentFolder = currentFolder.subFolders[part];
+        }
+      }
+    });
+
+    return result;
+  }, [accessibleSecrets, selectedEnvSlug]);
+
+  const secretsFilteredByPath = useMemo(() => {
+    let normalizedPath = debouncedEnvCopySecretPath;
+    normalizedPath = debouncedEnvCopySecretPath.startsWith("/")
+      ? debouncedEnvCopySecretPath
+      : `/${debouncedEnvCopySecretPath}`;
+    if (normalizedPath.length > 1 && normalizedPath.endsWith("/")) {
+      normalizedPath = debouncedEnvCopySecretPath.slice(0, -1);
+    }
+
+    if (normalizedPath === "/") {
+      return restructureSecrets["/"];
+    }
+
+    const segments = normalizedPath.split("/").filter((segment) => segment !== "");
+
+    let currentLevel = restructureSecrets["/"];
+    let result = null;
+    let currentPath = "";
+
+    if (!currentLevel) {
+      setValue("secretPath", "/");
+      return null;
+    }
+
+    for (let i = 0; i < segments.length; i += 1) {
+      const segment = segments[i];
+      currentPath += `/${segment}`;
+
+      if (currentLevel?.subFolders?.[segment]) {
+        currentLevel = currentLevel.subFolders[segment];
+
+        if (currentPath === normalizedPath) {
+          result = currentLevel;
+          break;
+        }
+      } else {
+        return null;
+      }
+    }
+
+    return result;
+  }, [restructureSecrets, debouncedEnvCopySecretPath]);
+
+  useEffect(() => {
+    setValue("secrets", []);
+  }, [debouncedEnvCopySecretPath, selectedEnvSlug]);
+
+  const handleFormSubmit = async (data: TFormSchema) => {
+    const secretsToBePulled: Record<
+      string,
+      Record<string, { value: string; comments: string[]; secretPath: string }>
+    > = {};
+    data.secrets.forEach(({ secretKey, secretValue, secretPath: secretPathToRecreate }) => {
+      const normalizedPath = secretPathToRecreate.startsWith(envCopySecPath)
+        ? secretPathToRecreate.slice(envCopySecPath.length)
+        : secretPathToRecreate;
+
+      if (!secretsToBePulled[normalizedPath]) {
+        secretsToBePulled[normalizedPath] = {};
+      }
+
+      secretsToBePulled[normalizedPath][secretKey] = {
+        value: (shouldIncludeValues && secretValue) || "",
+        comments: [""],
+        secretPath: normalizedPath
+      };
+    });
+    onParsedEnv(secretsToBePulled);
+    onToggle(false);
+    reset();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(state) => {
+        onToggle(state);
+        reset();
+      }}
+    >
+      <ModalContent
+        bodyClassName="overflow-visible"
+        className="max-w-2xl"
+        title="Replicate Folder Content From An Environment"
+        subTitle="Replicate folder content from other environments into this context"
+      >
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+          <div className="flex items-center space-x-2">
+            <Controller
+              control={control}
+              name="environment"
+              render={({ field: { value, onChange } }) => (
+                <FormControl label="Environment" isRequired className="w-1/3">
+                  <FilterableSelect
+                    value={value}
+                    onChange={onChange}
+                    options={environments}
+                    placeholder="Select environment..."
+                    getOptionLabel={(option) => option.name}
+                    getOptionValue={(option) => option.slug}
+                  />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="secretPath"
+              render={({ field }) => (
+                <FormControl label="Secret Path" className="flex-grow" isRequired>
+                  <SecretPathInput
+                    {...field}
+                    placeholder="Provide a path, default is /"
+                    environment={selectedEnvSlug?.slug}
+                  />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="border-t border-mineshaft-600 pt-4">
+            <Controller
+              control={control}
+              name="secrets"
+              render={({ field: { onChange } }) => (
+                <FormControl className="flex-grow" isRequired>
+                  <SecretTreeView
+                    data={secretsFilteredByPath}
+                    basePath={debouncedEnvCopySecretPath}
+                    onChange={onChange}
+                  />
+                </FormControl>
+              )}
+            />
+            <div className="my-6 ml-2">
+              <Switch
+                id="populate-include-value"
+                isChecked={shouldIncludeValues}
+                onCheckedChange={(isChecked) => {
+                  setValue("secrets", []);
+                  setShouldIncludeValues(isChecked as boolean);
+                }}
+              >
+                Include secret values
+              </Switch>
+            </div>
+            <div className="flex items-center space-x-4">
+              <Button
+                leftIcon={<FontAwesomeIcon icon={faClone} />}
+                type="submit"
+                isDisabled={!selectedSecrets || selectedSecrets.length === 0}
+              >
+                Replicate Folder
+              </Button>
+              <Button variant="plain" colorSchema="secondary" onClick={() => onToggle(false)}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/SecretTreeView.tsx

@@ -0,0 +1,321 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  faChevronDown,
+  faChevronRight,
+  faFolder,
+  faFolderOpen,
+  faFolderTree,
+  faKey
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+import { Checkbox } from "@app/components/v2";
+
+interface SecretItem {
+  id?: string;
+  secretKey?: string;
+  secretValue?: string;
+  secretPath?: string;
+  [key: string]: any;
+}
+
+interface FolderStructure {
+  items: SecretItem[];
+  subFolders: {
+    [key: string]: FolderStructure;
+  };
+}
+
+interface TreeData {
+  [key: string]: FolderStructure | null;
+}
+
+interface FolderProps {
+  name: string;
+  structure: FolderStructure;
+  path: string;
+  selectedItems: SecretItem[];
+  onItemSelect: (item: SecretItem, isChecked: boolean) => void;
+  onFolderSelect: (folderPath: string, isChecked: boolean) => void;
+  isExpanded?: boolean;
+  level: number;
+  basePath?: string;
+}
+
+interface TreeViewProps {
+  data: FolderStructure | null;
+  basePath?: string;
+  className?: string;
+  onChange: (items: SecretItem[]) => void;
+}
+
+const getAllItemsInFolder = (folder: FolderStructure): SecretItem[] => {
+  let items: SecretItem[] = [];
+
+  items = items.concat(folder.items);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Object.entries(folder.subFolders).forEach(([_, subFolder]) => {
+    items = items.concat(getAllItemsInFolder(subFolder));
+  });
+
+  return items;
+};
+
+const getDisplayName = (name: string): string => {
+  const parts = name.split("/");
+  return parts[parts.length - 1];
+};
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+const CollapsibleContent = CollapsiblePrimitive.Content;
+
+const Folder: React.FC<FolderProps> = ({
+  name,
+  structure,
+  path,
+  selectedItems,
+  onItemSelect,
+  onFolderSelect,
+  isExpanded = false,
+  level,
+  basePath
+}) => {
+  const [open, setOpen] = useState(isExpanded);
+  const displayName = useMemo(() => getDisplayName(name), [name]);
+
+  const allItems = useMemo(() => getAllItemsInFolder(structure), [structure]);
+  const allItemIds = useMemo(() => allItems.map((item) => item.id), [allItems]);
+  const selectedItemIds = useMemo(() => selectedItems.map((item) => item.id), [selectedItems]);
+  const allSelected = useMemo(
+    () => allItemIds.length > 0 && allItemIds.every((id) => selectedItemIds.includes(id)),
+    [allItemIds, selectedItemIds]
+  );
+  const someSelected = useMemo(
+    () => allItemIds.some((id) => selectedItemIds.includes(id)) && !allSelected,
+    [allItemIds, selectedItemIds, allSelected]
+  );
+  const hasContents = structure.items.length > 0 || Object.keys(structure.subFolders).length > 0;
+
+  const handleFolderSelect = (checked: boolean) => {
+    onFolderSelect(path, checked);
+  };
+
+  return (
+    <div className={`folder-container ml-${level > 0 ? "4" : 0}`}>
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <div className="group flex items-center rounded px-2 py-1">
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="mr-1 flex h-6 w-6 items-center justify-center rounded focus:outline-none"
+              disabled={!hasContents}
+              aria-label={open ? "Collapse folder" : "Expand folder"}
+            >
+              {hasContents && (
+                <FontAwesomeIcon icon={open ? faChevronDown : faChevronRight} className="h-3 w-3" />
+              )}
+            </button>
+          </CollapsibleTrigger>
+
+          <div className="mr-2">
+            <FontAwesomeIcon
+              // eslint-disable-next-line no-nested-ternary
+              icon={level > 0 ? (open ? faFolderOpen : faFolder) : faFolderTree}
+              className={`h-4 w-4 text-${level === 0 ? "mineshaft-300" : "yellow"}`}
+            />
+          </div>
+          <Checkbox
+            id="folder-root"
+            className="data-[state=indeterminate]:bg-secondary data-[state=checked]:bg-primary"
+            isChecked={allSelected || someSelected}
+            onCheckedChange={handleFolderSelect}
+            isIndeterminate={someSelected && !allSelected}
+          />
+
+          <label
+            htmlFor={`folder-${path}`}
+            className={`ml-2 flex-1 cursor-pointer truncate ${basePath ? "italic text-mineshaft-300" : ""}`}
+            title={displayName}
+          >
+            {displayName || `${basePath}`}
+          </label>
+
+          {allItemIds.length > 0 && (
+            <span className="ml-2 text-xs text-mineshaft-400">
+              {allItemIds.length} {allItemIds.length === 1 ? "item" : "items"}
+            </span>
+          )}
+        </div>
+
+        <CollapsibleContent className="overflow-hidden transition-all duration-300 ease-in-out">
+          <div className="relative mt-1">
+            <div className="absolute bottom-0 left-5 top-0 w-px bg-mineshaft-600" />
+            {structure.items.map((item) => (
+              <div key={item.id} className="group ml-6 flex items-center rounded px-2 py-1">
+                <div className="ml-6 mr-2">
+                  <FontAwesomeIcon icon={faKey} className="h-3 w-3" />
+                </div>
+                <Checkbox
+                  id={`folder-${item.id}`}
+                  className="data-[state=indeterminate]:bg-secondary data-[state=checked]:bg-primary"
+                  isChecked={selectedItemIds.includes(item.id)}
+                  onCheckedChange={(checked) => onItemSelect(item, !!checked)}
+                />
+                <label
+                  htmlFor={item.id}
+                  className="ml-2 flex-1 cursor-pointer truncate"
+                  title={item.secretKey}
+                >
+                  {item.secretKey}
+                </label>
+              </div>
+            ))}
+
+            {Object.entries(structure.subFolders).map(([subName, subStructure]) => (
+              <Folder
+                key={subName}
+                name={subName}
+                structure={subStructure}
+                path={path ? `${path}/${subName}` : subName}
+                selectedItems={selectedItems}
+                onItemSelect={onItemSelect}
+                onFolderSelect={onFolderSelect}
+                level={level + 1}
+              />
+            ))}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+export const SecretTreeView: React.FC<TreeViewProps> = ({
+  data,
+  basePath = "/",
+  className = "",
+  onChange
+}) => {
+  const [selectedItems, setSelectedItems] = useState<SecretItem[]>([]);
+  const rootPath = "/";
+  const treeData: TreeData = data ? { [rootPath]: data as FolderStructure } : { [rootPath]: null };
+
+  const rootFolders = useMemo(() => {
+    return Object.entries(treeData);
+  }, [treeData]);
+
+  const isEmptyData = useMemo(() => {
+    return (
+      !data || (typeof data === "object" && Object.keys(data).length === 0) || !rootFolders.length
+    );
+  }, [data, rootFolders]);
+
+  const handleItemSelect = (item: SecretItem, isChecked: boolean) => {
+    if (isChecked) {
+      setSelectedItems((prev) => [...prev, item]);
+    } else {
+      setSelectedItems((prev) => prev.filter((i) => i.id !== item.id));
+    }
+  };
+
+  const handleFolderSelect = (folderPath: string, isChecked: boolean) => {
+    const getFolderFromPath = (tree: TreeData, path: string): FolderStructure | null => {
+      if (rootFolders.length === 1 && rootFolders[0][0] === path) {
+        return rootFolders[0][1];
+      }
+
+      let adjustedPath = path;
+      if (!path.startsWith(rootPath)) {
+        adjustedPath = rootPath === path ? rootPath : `${rootPath}/${path}`;
+      }
+
+      if (adjustedPath === "/") return tree["/"];
+
+      const parts = adjustedPath.split("/").filter((p) => p !== "");
+
+      let current: any;
+      current = tree["/"];
+
+      const targetExists = parts.every((part) => {
+        if (current?.subFolders?.[part]) {
+          current = current.subFolders[part];
+          return true;
+        }
+        return false;
+      });
+
+      if (!targetExists) {
+        return null;
+      }
+
+      return current;
+    };
+
+    const folder = getFolderFromPath(treeData, folderPath);
+    if (!folder) return;
+
+    const folderItems = getAllItemsInFolder(folder);
+    const folderItemIds = folderItems.map((item) => item.id);
+
+    if (isChecked) {
+      setSelectedItems((prev) => {
+        const prevIds = prev.map((item) => item.id);
+        const newItems = [...prev];
+        folderItems.forEach((item) => {
+          if (!prevIds.includes(item.id)) {
+            newItems.push(item);
+          }
+        });
+        return newItems;
+      });
+    } else {
+      setSelectedItems((prev) => prev.filter((item) => !folderItemIds.includes(item.id)));
+    }
+  };
+
+  useEffect(() => {
+    setSelectedItems([]);
+  }, [data]);
+
+  useEffect(() => {
+    onChange(selectedItems);
+  }, [selectedItems]);
+
+  return (
+    <div className="flex w-full items-start gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900">
+      <div className={`w-full rounded-lg shadow-sm ${className}`}>
+        <div className="h-[25vh] overflow-auto p-3">
+          {isEmptyData ? (
+            <div className="flex h-full w-full items-center justify-center text-center text-mineshaft-300">
+              <p>No secrets or folders available</p>
+            </div>
+          ) : (
+            rootFolders.map(([folderName, folderStructure]) => (
+              <Folder
+                basePath={basePath}
+                key={folderName}
+                name={folderName}
+                structure={folderStructure || { items: [], subFolders: {} }}
+                path={folderName}
+                selectedItems={selectedItems}
+                onItemSelect={handleItemSelect}
+                onFolderSelect={handleFolderSelect}
+                isExpanded
+                level={0}
+              />
+            ))
+          )}
+        </div>
+
+        <div className="flex justify-end pb-2 pr-2 pt-2">
+          <h3 className="flex items-center text-mineshaft-400">
+            {selectedItems.length} Item{selectedItems.length === 1 ? "" : "s"} Selected
+          </h3>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input } from "@app/components/v2";
+import { Button, FormControl, Input, PasswordGenerator } from "@app/components/v2";
 import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
@@ -162,12 +162,15 @@ export const CreateSecretForm = ({
             isError={Boolean(errors?.value)}
             errorText={errors?.value?.message}
           >
-            <InfisicalSecretInput
-              {...field}
-              environment={environment}
-              secretPath={secretPath}
-              containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-            />
+            <div className="flex items-center gap-2">
+              <InfisicalSecretInput
+                {...field}
+                environment={environment}
+                secretPath={secretPath}
+                containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+              />
+              <PasswordGenerator onUsePassword={field.onChange} />
+            </div>
           </FormControl>
         )}
       />

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/SecretDropzone.tsx

@@ -64,7 +64,8 @@ export const SecretDropzone = ({
   const { mutateAsync: createSecretBatch, isPending: isCreatingSecrets } = useCreateSecretBatch({
     options: { onSuccess: undefined }
   });
-
+  // hide copy secrets from board due to import folders feature
+  const shouldRenderCopySecrets = false;
   const isSubmitting = isCreatingSecrets || isUpdatingSecrets;
 
   const handleDrag = (e: DragEvent) => {
@@ -308,16 +309,18 @@ export const SecretDropzone = ({
                 secretPath={secretPath}
                 isSmaller={isSmaller}
               />
-              <CopySecretsFromBoard
-                isOpen={popUp.importSecEnv.isOpen}
-                onToggle={(isOpen) => handlePopUpToggle("importSecEnv", isOpen)}
-                onParsedEnv={handleParsedEnv}
-                environment={environment}
-                environments={environments}
-                workspaceId={workspaceId}
-                secretPath={secretPath}
-                isSmaller={isSmaller}
-              />
+              {shouldRenderCopySecrets && (
+                <CopySecretsFromBoard
+                  isOpen={popUp.importSecEnv.isOpen}
+                  onToggle={(isOpen) => handlePopUpToggle("importSecEnv", isOpen)}
+                  onParsedEnv={handleParsedEnv}
+                  environment={environment}
+                  environments={environments}
+                  workspaceId={workspaceId}
+                  secretPath={secretPath}
+                  isSmaller={isSmaller}
+                />
+              )}
               {!isSmaller && (
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Create}

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncAuditLogsSection.tsx

@@ -41,7 +41,6 @@ export const SecretSyncAuditLogsSection = ({ secretSync }: Props) => {
             startDate: new Date(new Date().setDate(new Date().getDate() - auditLogsRetentionDays)),
             eventType: INTEGRATION_EVENTS
           }}
-          filterClassName="bg-mineshaft-900 static"
         />
       ) : (
         <div className="flex h-full items-center justify-center rounded-lg bg-mineshaft-800 text-sm text-mineshaft-200">