Merge pull request #1078 from akhilmhdh/feat/secret-bug

feat: added support for recursive file creation

frontend/src/components/v2/Drawer/Drawer.tsx

@@ -37,7 +37,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
   ) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className="fixed inset-0 z-[70] h-full w-full"
+        className="fixed inset-0 z-20 h-full w-full"
         style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
       />
       <DialogPrimitive.Content

frontend/src/hooks/api/secrets/mutations.tsx

@@ -189,12 +189,20 @@ export const useDeleteSecretV3 = ({
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TDeleteSecretsV3DTO>({
-    mutationFn: async ({ secretPath = "/", type, environment, workspaceId, secretName }) => {
+    mutationFn: async ({
+      secretPath = "/",
+      type,
+      environment,
+      workspaceId,
+      secretName,
+      secretId
+    }) => {
       const reqBody = {
         workspaceId,
         environment,
         type,
-        secretPath
+        secretPath,
+        secretId
       };
 
       const { data } = await apiRequest.delete(`/api/v3/secrets/${secretName}`, {

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

@@ -120,6 +120,7 @@ export type TDeleteSecretsV3DTO = {
   type: "shared" | "personal";
   secretPath: string;
   secretName: string;
+  secretId?: string;
 };
 
 export type TCreateSecretBatchDTO = {

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -124,13 +124,15 @@ export const SecretListView = ({
       comment,
       tags,
       skipMultilineEncoding,
-      newKey
+      newKey,
+      secretId
     }: Partial<{
       value: string;
       comment: string;
       tags: string[];
       skipMultilineEncoding: boolean;
       newKey: string;
+      secretId: string;
     }> = {}
   ) => {
     if (operation === "delete") {
@@ -139,7 +141,8 @@ export const SecretListView = ({
         workspaceId,
         secretPath,
         secretName: key,
-        type
+        type,
+        secretId
       });
       return;
     }
@@ -249,9 +252,9 @@ export const SecretListView = ({
   );
 
   const handleSecretDelete = useCallback(async () => {
-    const { key } = popUp.deleteSecret?.data as DecryptedSecret;
+    const { key, _id: secretId } = popUp.deleteSecret?.data as DecryptedSecret;
     try {
-      await handleSecretOperation("delete", "shared", key);
+      await handleSecretOperation("delete", "shared", key, { secretId });
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -31,6 +31,7 @@ import {
 } from "@app/components/v2";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
+  useCreateFolder,
   useCreateSecretV3,
   useDeleteSecretV3,
   useGetFoldersByEnv,
@@ -104,9 +105,24 @@ export const SecretOverviewPage = () => {
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
   const { mutateAsync: deleteSecretV3 } = useDeleteSecretV3();
+  const { mutateAsync: createFolder } = useCreateFolder();
 
   const handleSecretCreate = async (env: string, key: string, value: string) => {
     try {
+      // create folder if not existing
+      if (secretPath !== "/") {
+        const path = secretPath.split("/");
+        const directory = path.slice(0, -1).join("/");
+        const folderName = path.at(-1);
+        if (folderName && directory) {
+          await createFolder({
+            workspaceId,
+            environment: env,
+            directory,
+            folderName
+          });
+        }
+      }
       await createSecretV3({
         environment: env,
         workspaceId,
@@ -154,13 +170,14 @@ export const SecretOverviewPage = () => {
     }
   };
 
-  const handleSecretDelete = async (env: string, key: string) => {
+  const handleSecretDelete = async (env: string, key: string, secretId?: string) => {
     try {
       await deleteSecretV3({
         environment: env,
         workspaceId,
         secretPath,
         secretName: key,
+        secretId,
         type: "shared"
       });
       createNotification({
@@ -188,7 +205,20 @@ export const SecretOverviewPage = () => {
     });
   };
 
-  const handleExploreEnvClick = (slug: string) => {
+  const handleExploreEnvClick = async (slug: string) => {
+    if (secretPath !== "/") {
+      const path = secretPath.split("/");
+      const directory = path.slice(0, -1).join("/");
+      const folderName = path.at(-1);
+      if (folderName && directory) {
+        await createFolder({
+          workspaceId,
+          environment: slug,
+          directory,
+          folderName
+        });
+      }
+    }
     const query: Record<string, string> = { ...router.query, env: slug };
     const envIndex = userAvailableEnvs.findIndex((el) => slug === el.slug);
     if (envIndex !== -1) {
@@ -335,7 +365,14 @@ export const SecretOverviewPage = () => {
                           query: { id: workspaceId, env: userAvailableEnvs?.[0]?.slug }
                         }}
                       >
-                        <Button className="mt-4" variant="outline_bg" colorSchema="primary" size="md">Go to {userAvailableEnvs?.[0]?.name}</Button>
+                        <Button
+                          className="mt-4"
+                          variant="outline_bg"
+                          colorSchema="primary"
+                          size="md"
+                        >
+                          Go to {userAvailableEnvs?.[0]?.name}
+                        </Button>
                       </Link>
                     </EmptyState>
                   </Td>

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -12,13 +12,14 @@ import { useToggle } from "@app/hooks";
 type Props = {
   defaultValue?: string | null;
   secretName: string;
+  secretId?: string;
   isCreatable?: boolean;
   isVisible?: boolean;
   environment: string;
   secretPath: string;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
   onSecretUpdate: (env: string, key: string, value: string) => Promise<void>;
-  onSecretDelete: (env: string, key: string) => Promise<void>;
+  onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
 };
 
 export const SecretEditRow = ({
@@ -30,7 +31,8 @@ export const SecretEditRow = ({
   onSecretDelete,
   environment,
   secretPath,
-  isVisible
+  isVisible,
+  secretId
 }: Props) => {
   const {
     handleSubmit,
@@ -77,7 +79,7 @@ export const SecretEditRow = ({
   const handleDeleteSecret = async () => {
     setIsDeleting.on();
     try {
-      await onSecretDelete(environment, secretName);
+      await onSecretDelete(environment, secretName, secretId);
       reset({ value: undefined });
     } finally {
       setIsDeleting.off();

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

@@ -24,7 +24,7 @@ type Props = {
   getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
   onSecretUpdate: (env: string, key: string, value: string) => Promise<void>;
-  onSecretDelete: (env: string, key: string) => Promise<void>;
+  onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
 };
 
 export const SecretOverviewTableRow = ({
@@ -149,6 +149,7 @@ export const SecretOverviewTableRow = ({
                               isVisible={isSecretVisible}
                               secretName={secretKey}
                               defaultValue={secret?.value}
+                              secretId={secret?._id}
                               isCreatable={isCreatable}
                               onSecretDelete={onSecretDelete}
                               onSecretCreate={onSecretCreate}