Update

frontend/src/hooks/api/secretFolders/queries.tsx

@@ -16,6 +16,7 @@ import {
   TGetFoldersByEnvDTO,
   TGetProjectFoldersDTO,
   TSecretFolder,
+  TUpdateFolderBatchDTO,
   TUpdateFolderDTO
 } from "./types";
 
@@ -190,3 +191,43 @@ export const useDeleteFolder = () => {
     }
   });
 };
+
+export const useUpdateFolderBatch = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TUpdateFolderBatchDTO>({
+    mutationFn: async ({ projectSlug, folders }) => {
+      const { data } = await apiRequest.patch("/api/v1/folders/batch", {
+        projectSlug,
+        folders
+      });
+
+      return data;
+    },
+    onSuccess: (_, { projectId, folders }) => {
+      folders.forEach((folder) => {
+        queryClient.invalidateQueries(
+          folderQueryKeys.getSecretFolders({
+            projectId,
+            environment: folder.environment,
+            path: folder.path
+          })
+        );
+        queryClient.invalidateQueries(
+          secretSnapshotKeys.list({
+            workspaceId: projectId,
+            environment: folder.environment,
+            directory: folder.path
+          })
+        );
+        queryClient.invalidateQueries(
+          secretSnapshotKeys.count({
+            workspaceId: projectId,
+            environment: folder.environment,
+            directory: folder.path
+          })
+        );
+      });
+    }
+  });
+};

frontend/src/hooks/api/secretFolders/types.ts

@@ -36,3 +36,14 @@ export type TDeleteFolderDTO = {
   folderId: string;
   path?: string;
 };
+
+export type TUpdateFolderBatchDTO = {
+  projectId: string;
+  projectSlug: string;
+  folders: {
+    name: string;
+    environment: string;
+    id: string;
+    path?: string;
+  }[];
+};

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -47,6 +47,7 @@ import {
   ProjectPermissionActions,
   ProjectPermissionSub,
   useOrganization,
+  useProjectPermission,
   useWorkspace
 } from "@app/context";
 import { usePopUp } from "@app/hooks";
@@ -61,6 +62,9 @@ import {
   useGetUserWsKey,
   useUpdateSecretV3
 } from "@app/hooks/api";
+import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
+import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
+import { TSecretFolder } from "@app/hooks/api/types";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 import { FolderForm } from "../SecretMainPage/components/ActionBar/FolderForm";
@@ -87,6 +91,7 @@ export const SecretOverviewPage = () => {
   const parentTableRef = useRef<HTMLTableElement>(null);
   const [expandableTableWidth, setExpandableTableWidth] = useState(0);
   const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const { permission } = useProjectPermission();
 
   useEffect(() => {
     if (parentTableRef.current) {
@@ -201,11 +206,13 @@ export const SecretOverviewPage = () => {
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
   const { mutateAsync: deleteSecretV3 } = useDeleteSecretV3();
   const { mutateAsync: createFolder } = useCreateFolder();
+  const { mutateAsync: updateFolderBatch } = useUpdateFolderBatch();
 
   const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
     "addSecretsInAllEnvs",
     "addFolder",
-    "misc"
+    "misc",
+    "updateFolder"
   ] as const);
 
   const handleFolderCreate = async (folderName: string) => {
@@ -236,6 +243,59 @@ export const SecretOverviewPage = () => {
     }
   };
 
+  const handleFolderUpdate = async (newFolderName: string) => {
+    const { name: oldFolderName } = popUp.updateFolder.data as TSecretFolder;
+
+    const updatedFolders: TUpdateFolderBatchDTO["folders"] = [];
+    userAvailableEnvs.forEach((env) => {
+      if (
+        permission.can(
+          ProjectPermissionActions.Edit,
+          subject(ProjectPermissionSub.Secrets, { environment: env.slug, secretPath })
+        )
+      ) {
+        const folder = getFolderByNameAndEnv(oldFolderName, env.slug);
+        if (folder) {
+          updatedFolders.push({
+            environment: env.slug,
+            name: newFolderName,
+            id: folder.id,
+            path: secretPath
+          });
+        }
+      }
+    });
+
+    if (updatedFolders.length === 0) {
+      createNotification({
+        type: "info",
+        text: "You don't have access to rename selected folder"
+      });
+
+      handlePopUpClose("updateFolder");
+      return;
+    }
+
+    try {
+      await updateFolderBatch({
+        projectSlug,
+        folders: updatedFolders,
+        projectId: workspaceId
+      });
+      createNotification({
+        type: "success",
+        text: "Successfully renamed folder across environments"
+      });
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to rename folder across environments"
+      });
+    } finally {
+      handlePopUpClose("updateFolder");
+    }
+  };
+
   const handleSecretCreate = async (env: string, key: string, value: string) => {
     try {
       // create folder if not existing
@@ -726,6 +786,9 @@ export const SecretOverviewPage = () => {
                       environments={visibleEnvs}
                       key={`overview-${folderName}-${index + 1}`}
                       onClick={handleFolderClick}
+                      onToggleFolderEdit={(name: string) =>
+                        handlePopUpOpen("updateFolder", { name })
+                      }
                     />
                   ))}
                 {!isTableLoading &&
@@ -800,6 +863,18 @@ export const SecretOverviewPage = () => {
           <FolderForm onCreateFolder={handleFolderCreate} />
         </ModalContent>
       </Modal>
+      <Modal
+        isOpen={popUp.updateFolder.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("updateFolder", isOpen)}
+      >
+        <ModalContent title="Edit Folder Name">
+          <FolderForm
+            isEdit
+            defaultFolderName={(popUp.updateFolder?.data as Pick<TSecretFolder, "name">)?.name}
+            onUpdateFolder={handleFolderUpdate}
+          />
+        </ModalContent>
+      </Modal>
     </>
   );
 };

frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx

@@ -1,8 +1,8 @@
-import { faCheck, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faFolder, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Checkbox, Td, Tr } from "@app/components/v2";
+import { Checkbox, IconButton, Td, Tr } from "@app/components/v2";
 
 type Props = {
   folderName: string;
@@ -11,6 +11,7 @@ type Props = {
   onClick: (path: string) => void;
   isSelected: boolean;
   onToggleFolderSelect: (folderName: string) => void;
+  onToggleFolderEdit: (name: string) => void;
 };
 
 export const SecretOverviewFolderRow = ({
@@ -19,6 +20,7 @@ export const SecretOverviewFolderRow = ({
   isFolderPresentInEnv,
   isSelected,
   onToggleFolderSelect,
+  onToggleFolderEdit,
   onClick
 }: Props) => {
   return (
@@ -43,6 +45,18 @@ export const SecretOverviewFolderRow = ({
             />
           </div>
           <div>{folderName}</div>
+          <IconButton
+            ariaLabel="edit-folder"
+            variant="plain"
+            size="sm"
+            className="p-0 opacity-0 group-hover:opacity-100"
+            onClick={(e) => {
+              onToggleFolderEdit(folderName);
+              e.stopPropagation();
+            }}
+          >
+            <FontAwesomeIcon icon={faPencil} size="sm" />
+          </IconButton>
         </div>
       </Td>
       {environments.map(({ slug }, i) => {