feat: added new secret input component and updated toolbar key special prop to innerKey

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

@@ -1,6 +1,7 @@
 export {
   useCreateFolder,
   useDeleteFolder,
+  useGetFoldersByEnv,
   useGetProjectFolders,
   useGetProjectFoldersBatch,
   useUpdateFolder

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

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
@@ -9,6 +9,7 @@ import {
   DeleteFolderDTO,
   GetProjectFoldersBatchDTO,
   GetProjectFoldersDTO,
+  TGetFoldersByEnvDTO,
   TSecretFolder,
   UpdateFolderDTO
 } from "./types";
@@ -62,6 +63,48 @@ export const useGetProjectFolders = ({
     )
   });
 
+export const useGetFoldersByEnv = ({
+  parentFolderPath,
+  workspaceId,
+  environments,
+  parentFolderId
+}: TGetFoldersByEnvDTO) => {
+  const folders = useQueries({
+    queries: environments.map((env) => ({
+      queryKey: queryKeys.getSecretFolders(workspaceId, env, parentFolderPath || parentFolderId),
+      queryFn: async () => fetchProjectFolders(workspaceId, env, parentFolderId, parentFolderPath),
+      enabled: Boolean(workspaceId) && Boolean(env)
+    }))
+  });
+
+  const folderNames = useMemo(() => {
+    const names = new Set<string>();
+    folders?.forEach(({ data }) => {
+      data?.folders.forEach(({ name }) => {
+        names.add(name);
+      });
+    });
+    return [...names];
+  }, [(folders || []).map((folder) => folder.data)]);
+
+  const isFolderPresentInEnv = useCallback(
+    (name: string, env: string) => {
+      const selectedEnvIndex = environments.indexOf(env);
+      if (selectedEnvIndex !== -1) {
+        return Boolean(
+          folders?.[selectedEnvIndex]?.data?.folders?.find(
+            ({ name: folderName }) => folderName === name
+          )
+        );
+      }
+      return false;
+    },
+    [(folders || []).map((folder) => folder.data)]
+  );
+
+  return { folders, folderNames, isFolderPresentInEnv };
+};
+
 export const useGetProjectFoldersBatch = ({
   folders = [],
   isPaused,

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

@@ -17,6 +17,13 @@ export type GetProjectFoldersBatchDTO = {
   parentFolderPath?: string;
 };
 
+export type TGetFoldersByEnvDTO = {
+  environments: string[];
+  workspaceId: string;
+  parentFolderPath?: string;
+  parentFolderId?: string;
+};
+
 export type CreateFolderDTO = {
   workspaceId: string;
   environment: string;

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

@@ -1,6 +1,7 @@
+export { useCreateSecretV3, useDeleteSecretV3, useUpdateSecretV3 } from "./mutations";
 export {
   useBatchSecretsOp,
   useGetProjectSecrets,
-  useGetProjectSecretsByKey,
+  useGetProjectSecretsAllEnv,
   useGetSecretVersion
 } from "./queries";

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

@@ -0,0 +1,172 @@
+import crypto from "crypto";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import {
+  decryptAssymmetric,
+  encryptSymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import { apiRequest } from "@app/config/request";
+
+import { secretKeys } from "./queries";
+import { TCreateSecretsV3DTO, TDeleteSecretsV3DTO, TUpdateSecretsV3DTO } from "./types";
+
+const encryptSecret = (randomBytes: string, key: string, value?: string, comment?: string) => {
+  // encrypt key
+  const {
+    ciphertext: secretKeyCiphertext,
+    iv: secretKeyIV,
+    tag: secretKeyTag
+  } = encryptSymmetric({
+    plaintext: key,
+    key: randomBytes
+  });
+
+  // encrypt value
+  const {
+    ciphertext: secretValueCiphertext,
+    iv: secretValueIV,
+    tag: secretValueTag
+  } = encryptSymmetric({
+    plaintext: value ?? "",
+    key: randomBytes
+  });
+
+  // encrypt comment
+  const {
+    ciphertext: secretCommentCiphertext,
+    iv: secretCommentIV,
+    tag: secretCommentTag
+  } = encryptSymmetric({
+    plaintext: comment ?? "",
+    key: randomBytes
+  });
+
+  return {
+    secretKeyCiphertext,
+    secretKeyIV,
+    secretKeyTag,
+    secretValueCiphertext,
+    secretValueIV,
+    secretValueTag,
+    secretCommentCiphertext,
+    secretCommentIV,
+    secretCommentTag
+  };
+};
+
+export const useCreateSecretV3 = () => {
+  const queryClient = useQueryClient();
+  return useMutation<{}, {}, TCreateSecretsV3DTO>({
+    mutationFn: async ({
+      secretPath = "/",
+      type,
+      environment,
+      workspaceId,
+      secretName,
+      secretValue,
+      latestFileKey,
+      secretComment
+    }) => {
+      const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+
+      const randomBytes = latestFileKey
+        ? decryptAssymmetric({
+            ciphertext: latestFileKey.encryptedKey,
+            nonce: latestFileKey.nonce,
+            publicKey: latestFileKey.sender.publicKey,
+            privateKey: PRIVATE_KEY
+          })
+        : crypto.randomBytes(16).toString("hex");
+
+      const reqBody = {
+        workspaceId,
+        environment,
+        type,
+        secretPath,
+        ...encryptSecret(randomBytes, secretName, secretValue, secretComment)
+      };
+      const { data } = await apiRequest.post(`/api/v3/secrets/${secretName}`, reqBody);
+      return data;
+    },
+    onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        secretKeys.getProjectSecret(workspaceId, environment, secretPath)
+      );
+    }
+  });
+};
+
+export const useUpdateSecretV3 = () => {
+  const queryClient = useQueryClient();
+  return useMutation<{}, {}, TUpdateSecretsV3DTO>({
+    mutationFn: async ({
+      secretPath = "/",
+      type,
+      environment,
+      workspaceId,
+      secretName,
+      secretValue,
+      latestFileKey
+    }) => {
+      const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+
+      const randomBytes = latestFileKey
+        ? decryptAssymmetric({
+            ciphertext: latestFileKey.encryptedKey,
+            nonce: latestFileKey.nonce,
+            publicKey: latestFileKey.sender.publicKey,
+            privateKey: PRIVATE_KEY
+          })
+        : crypto.randomBytes(16).toString("hex");
+      const { secretValueIV, secretValueTag, secretValueCiphertext } = encryptSecret(
+        randomBytes,
+        secretName,
+        secretValue,
+        ""
+      );
+
+      const reqBody = {
+        workspaceId,
+        environment,
+        type,
+        secretPath,
+        secretValueIV,
+        secretValueTag,
+        secretValueCiphertext
+      };
+      const { data } = await apiRequest.patch(`/api/v3/secrets/${secretName}`, reqBody);
+      return data;
+    },
+    onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        secretKeys.getProjectSecret(workspaceId, environment, secretPath)
+      );
+    }
+  });
+};
+
+export const useDeleteSecretV3 = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TDeleteSecretsV3DTO>({
+    mutationFn: async ({ secretPath = "/", type, environment, workspaceId, secretName }) => {
+      const reqBody = {
+        workspaceId,
+        environment,
+        type,
+        secretPath
+      };
+
+      const { data } = await apiRequest.delete(`/api/v3/secrets/${secretName}`, {
+        data: reqBody
+      });
+      return data;
+    },
+    onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        secretKeys.getProjectSecret(workspaceId, environment, secretPath)
+      );
+    }
+  });
+};

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import {
@@ -38,40 +38,15 @@ const fetchProjectEncryptedSecrets = async (
   folderId?: string,
   secretPath?: string
 ) => {
-  if (typeof env === "string") {
-    const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>("/api/v2/secrets", {
-      params: {
-        environment: env,
-        workspaceId,
-        folderId: folderId || undefined,
-        secretPath
-      }
-    });
-    return data.secrets;
-  }
-
-  if (typeof env === "object") {
-    let allEnvData: any = [];
-
-    // eslint-disable-next-line no-restricted-syntax
-    for (const envPoint of env) {
-      // eslint-disable-next-line no-await-in-loop
-      const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>("/api/v2/secrets", {
-        params: {
-          environment: envPoint,
-          workspaceId,
-          folderId,
-          secretPath
-        }
-      });
-      allEnvData = allEnvData.concat(data.secrets);
+  const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>("/api/v2/secrets", {
+    params: {
+      environment: env,
+      workspaceId,
+      folderId: folderId || undefined,
+      secretPath
     }
-
-    return allEnvData;
-    // eslint-disable-next-line no-else-return
-  } else {
-    return null;
-  }
+  });
+  return data.secrets;
 };
 
 export const useGetProjectSecrets = ({
@@ -167,31 +142,13 @@ export const useGetProjectSecretsAllEnv = ({
   decryptFileKey,
   folderId,
   secretPath
-}: TGetProjectSecretsAllEnvDTO) =>
-  useQueries({
+}: TGetProjectSecretsAllEnvDTO) => {
+  const secrets = useQueries({
     queries: envs.map((env) => ({
       queryKey: secretKeys.getProjectSecret(workspaceId, env, secretPath || folderId),
       enabled: Boolean(decryptFileKey && workspaceId && env),
-      queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env, folderId, secretPath)
-    }))
-  });
-
-export const useGetProjectSecretsByKey = ({
-  workspaceId,
-  env,
-  decryptFileKey,
-  isPaused,
-  folderId,
-  secretPath
-}: GetProjectSecretsDTO) =>
-  useQuery({
-    // wait for all values to be available
-    enabled: Boolean(decryptFileKey && workspaceId && env) && !isPaused,
-    // right now secretpath is passed as folderid as only this is used in overview
-    queryKey: secretKeys.getProjectSecret(workspaceId, env, secretPath),
-    queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env, folderId, secretPath),
-    select: useCallback(
-      (data: EncryptedSecret[]) => {
+      queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env, folderId, secretPath),
+      select: (data: EncryptedSecret[]) => {
         const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
         const latestKey = decryptFileKey;
         const key = decryptAssymmetric({
@@ -201,12 +158,11 @@ export const useGetProjectSecretsByKey = ({
           privateKey: PRIVATE_KEY
         });
 
-        const sharedSecrets: Record<string, DecryptedSecret[]> = {};
+        const sharedSecrets: Record<string, DecryptedSecret> = {};
         const personalSecrets: Record<string, { id: string; value: string }> = {};
         // this used for add-only mode in dashboard
         // type won't be there thus only one key is shown
         const duplicateSecretKey: Record<string, boolean> = {};
-        const uniqSecKeys: Record<string, boolean> = {};
         data.forEach((encSecret: EncryptedSecret) => {
           const secretKey = decryptSymmetric({
             ciphertext: encSecret.secretKeyCiphertext,
@@ -214,7 +170,6 @@ export const useGetProjectSecretsByKey = ({
             tag: encSecret.secretKeyTag,
             key
           });
-          if (!uniqSecKeys?.[secretKey]) uniqSecKeys[secretKey] = true;
 
           const secretValue = decryptSymmetric({
             ciphertext: encSecret.secretValueCiphertext,
@@ -242,35 +197,65 @@ export const useGetProjectSecretsByKey = ({
           };
 
           if (encSecret.type === "personal") {
-            personalSecrets[`${decryptedSecret.key}-${decryptedSecret.env}`] = {
+            personalSecrets[decryptedSecret.key] = {
               id: encSecret._id,
               value: secretValue
             };
           } else {
-            if (!duplicateSecretKey?.[`${decryptedSecret.key}-${decryptedSecret.env}`]) {
-              if (!sharedSecrets?.[secretKey]) sharedSecrets[secretKey] = [];
-              sharedSecrets[secretKey].push(decryptedSecret);
+            if (!duplicateSecretKey?.[decryptedSecret.key]) {
+              sharedSecrets[decryptedSecret.key] = decryptedSecret;
             }
-            duplicateSecretKey[`${decryptedSecret.key}-${decryptedSecret.env}`] = true;
+            duplicateSecretKey[decryptedSecret.key] = true;
           }
         });
-        Object.keys(sharedSecrets).forEach((secName) => {
-          sharedSecrets[secName].forEach((val) => {
-            const dupKey = `${val.key}-${val.env}`;
-            if (personalSecrets?.[dupKey]) {
-              val.idOverride = personalSecrets[dupKey].id;
-              val.valueOverride = personalSecrets[dupKey].value;
-              val.overrideAction = "modified";
-            }
-          });
-        });
 
-        return { secrets: sharedSecrets, uniqueSecCount: Object.keys(uniqSecKeys).length };
-      },
-      [decryptFileKey]
-    )
+        Object.keys(sharedSecrets).forEach((val) => {
+          if (personalSecrets?.[val]) {
+            sharedSecrets[val].idOverride = personalSecrets[val].id;
+            sharedSecrets[val].valueOverride = personalSecrets[val].value;
+            sharedSecrets[val].overrideAction = "modified";
+          }
+        });
+        return sharedSecrets;
+      }
+    }))
   });
 
+  const secKeys = useMemo(() => {
+    const keys = new Set<string>();
+    secrets?.forEach(({ data }) => {
+      // TODO(akhilmhdh): find out why this is unknown
+      Object.keys(data || {}).forEach((key) => keys.add(key));
+    });
+    return [...keys];
+  }, [(secrets || []).map((sec) => sec.data)]);
+
+  const getEnvSecretKeyCount = useCallback(
+    (env: string) => {
+      const selectedEnvIndex = envs.indexOf(env);
+      if (selectedEnvIndex !== -1) {
+        return Object.keys(secrets[selectedEnvIndex]?.data || {}).length;
+      }
+      return 0;
+    },
+    [(secrets || []).map((sec) => sec.data)]
+  );
+
+  const getSecretByKey = useCallback(
+    (env: string, key: string) => {
+      const selectedEnvIndex = envs.indexOf(env);
+      if (selectedEnvIndex !== -1) {
+        const sec = secrets[selectedEnvIndex]?.data?.[key];
+        return sec;
+      }
+      return undefined;
+    },
+    [(secrets || []).map((sec) => sec.data)]
+  );
+
+  return { data: secrets, secKeys, getSecretByKey, getEnvSecretKeyCount };
+};
+
 const fetchEncryptedSecretVersion = async (secretId: string, offset: number, limit: number) => {
   const { data } = await apiRequest.get<{ secretVersions: EncryptedSecretVersion[] }>(
     `/api/v1/secret/${secretId}/secret-versions`,

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

@@ -118,3 +118,32 @@ export type GetSecretVersionsDTO = {
   offset: number;
   decryptFileKey: UserWsKeyPair;
 };
+
+export type TCreateSecretsV3DTO = {
+  latestFileKey: UserWsKeyPair;
+  secretName: string;
+  secretValue: string;
+  secretComment: string;
+  secretPath: string;
+  workspaceId: string;
+  environment: string;
+  type: string;
+};
+
+export type TUpdateSecretsV3DTO = {
+  latestFileKey: UserWsKeyPair;
+  workspaceId: string;
+  environment: string;
+  type: string;
+  secretPath: string;
+  secretName: string;
+  secretValue: string;
+};
+
+export type TDeleteSecretsV3DTO = {
+  workspaceId: string;
+  environment: string;
+  type: string;
+  secretPath: string;
+  secretName: string;
+};