Merge branch 'main' into feat/allowShareToAnyoneEdition

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

@@ -1,10 +1,10 @@
 export {
   useAdminDeleteUser,
+  useAdminGrantServerAdminAccess,
   useCreateAdminUser,
   useUpdateAdminSlackConfig,
   useUpdateServerConfig,
-  useUpdateServerEncryptionStrategy,
-  useAdminGrantServerAdminAccess
+  useUpdateServerEncryptionStrategy
 } from "./mutation";
 export {
   useAdminGetUsers,

frontend/src/hooks/api/admin/queries.ts

@@ -4,19 +4,24 @@ import { apiRequest } from "@app/config/request";
 
 import { User } from "../types";
 import {
+  AdminGetIdentitiesFilters,
   AdminGetUsersFilters,
   AdminSlackConfig,
   TGetServerRootKmsEncryptionDetails,
   TServerConfig
 } from "./types";
+import { Identity } from "@app/hooks/api/identities/types";
 
 export const adminStandaloneKeys = {
-  getUsers: "get-users"
+  getUsers: "get-users",
+  getIdentities: "get-identities"
 };
 
 export const adminQueryKeys = {
   serverConfig: () => ["server-config"] as const,
   getUsers: (filters: AdminGetUsersFilters) => [adminStandaloneKeys.getUsers, { filters }] as const,
+  getIdentities: (filters: AdminGetIdentitiesFilters) =>
+    [adminStandaloneKeys.getIdentities, { filters }] as const,
   getAdminSlackConfig: () => ["admin-slack-config"] as const,
   getServerEncryptionStrategies: () => ["server-encryption-strategies"] as const
 };
@@ -68,6 +73,28 @@ export const useAdminGetUsers = (filters: AdminGetUsersFilters) => {
   });
 };
 
+export const useAdminGetIdentities = (filters: AdminGetIdentitiesFilters) => {
+  return useInfiniteQuery({
+    initialPageParam: 0,
+    queryKey: adminQueryKeys.getIdentities(filters),
+    queryFn: async ({ pageParam }) => {
+      const { data } = await apiRequest.get<{ identities: Identity[] }>(
+        "/api/v1/admin/identity-management/identities",
+        {
+          params: {
+            ...filters,
+            offset: pageParam
+          }
+        }
+      );
+
+      return data.identities;
+    },
+    getNextPageParam: (lastPage, pages) =>
+      lastPage.length !== 0 ? pages.length * filters.limit : undefined
+  });
+};
+
 export const useGetAdminSlackConfig = () => {
   return useQuery({
     queryKey: adminQueryKeys.getAdminSlackConfig(),

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

@@ -50,6 +50,12 @@ export type TUpdateAdminSlackConfigDTO = {
 export type AdminGetUsersFilters = {
   limit: number;
   searchTerm: string;
+  adminsOnly: boolean;
+};
+
+export type AdminGetIdentitiesFilters = {
+  limit: number;
+  searchTerm: string;
 };
 
 export type AdminSlackConfig = {

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

@@ -2,6 +2,8 @@ export {
   useGetAuthToken,
   useOauthTokenExchange,
   useResetPassword,
+  useResetPasswordV2,
+  useResetUserPasswordV2,
   useSelectOrganization,
   useSendMfaToken,
   useSendPasswordResetEmail,

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

@@ -22,12 +22,15 @@ import {
   LoginLDAPRes,
   MfaMethod,
   ResetPasswordDTO,
+  ResetPasswordV2DTO,
+  ResetUserPasswordV2DTO,
   SendMfaTokenDTO,
   SetupPasswordDTO,
   SRP1DTO,
   SRPR1Res,
   TOauthTokenExchangeDTO,
   UserAgentType,
+  UserEncryptionVersion,
   VerifyMfaTokenDTO,
   VerifyMfaTokenRes,
   VerifySignupInviteDTO
@@ -247,7 +250,10 @@ export const useSendPasswordResetEmail = () => {
 export const useVerifyPasswordResetCode = () => {
   return useMutation({
     mutationFn: async ({ email, code }: { email: string; code: string }) => {
-      const { data } = await apiRequest.post("/api/v1/password/email/password-reset-verify", {
+      const { data } = await apiRequest.post<{
+        token: string;
+        userEncryptionVersion: UserEncryptionVersion;
+      }>("/api/v1/password/email/password-reset-verify", {
         email,
         code
       });
@@ -302,6 +308,26 @@ export const useResetPassword = () => {
   });
 };
 
+export const useResetPasswordV2 = () => {
+  return useMutation({
+    mutationFn: async (details: ResetPasswordV2DTO) => {
+      await apiRequest.post("/api/v2/password/password-reset", details, {
+        headers: {
+          Authorization: `Bearer ${details.verificationToken}`
+        }
+      });
+    }
+  });
+};
+
+export const useResetUserPasswordV2 = () => {
+  return useMutation({
+    mutationFn: async (details: ResetUserPasswordV2DTO) => {
+      await apiRequest.post("/api/v2/password/user/password-reset", details);
+    }
+  });
+};
+
 export const changePassword = async (details: ChangePasswordDTO) => {
   const { data } = await apiRequest.post("/api/v1/password/change-password", details);
   return data;

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

@@ -3,6 +3,11 @@ export type GetAuthTokenAPI = {
   organizationId?: string;
 };
 
+export enum UserEncryptionVersion {
+  V1 = 1,
+  V2 = 2
+}
+
 export type SendMfaTokenDTO = {
   email: string;
 };
@@ -136,6 +141,16 @@ export type ResetPasswordDTO = {
   password: string;
 };
 
+export type ResetPasswordV2DTO = {
+  newPassword: string;
+  verificationToken: string;
+};
+
+export type ResetUserPasswordV2DTO = {
+  oldPassword: string;
+  newPassword: string;
+};
+
 export type SetupPasswordDTO = {
   protectedKey: string;
   protectedKeyIV: string;

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

@@ -1,4 +1,5 @@
 export {
+  useGetAccessibleSecrets,
   useGetProjectSecretsDetails,
   useGetProjectSecretsOverview,
   useGetProjectSecretsQuickSearch

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

@@ -11,6 +11,7 @@ import {
   DashboardSecretsOrderBy,
   TDashboardProjectSecretsQuickSearch,
   TDashboardProjectSecretsQuickSearchResponse,
+  TGetAccessibleSecretsDTO,
   TGetDashboardProjectSecretsByKeys,
   TGetDashboardProjectSecretsDetailsDTO,
   TGetDashboardProjectSecretsOverviewDTO,
@@ -20,6 +21,8 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { mergePersonalSecrets } from "@app/hooks/api/secrets/queries";
 import { groupBy, unique } from "@app/lib/fn/array";
 
+import { SecretV3Raw } from "../types";
+
 export const dashboardKeys = {
   all: () => ["dashboard"] as const,
   getDashboardSecrets: ({
@@ -58,6 +61,17 @@ export const dashboardKeys = {
       ...dashboardKeys.getDashboardSecrets({ projectId, secretPath }),
       "quick-search",
       params
+    ] as const,
+  getAccessibleSecrets: ({
+    projectId,
+    secretPath,
+    environment,
+    filterByAction
+  }: TGetAccessibleSecretsDTO) =>
+    [
+      ...dashboardKeys.all(),
+      "accessible-secrets",
+      { projectId, secretPath, environment, filterByAction }
     ] as const
 };
 
@@ -207,6 +221,7 @@ export const useGetProjectSecretsDetails = (
     search = "",
     includeSecrets,
     includeFolders,
+    viewSecretValue,
     includeImports,
     includeDynamicSecrets,
     tags
@@ -231,6 +246,7 @@ export const useGetProjectSecretsDetails = (
       limit,
       orderBy,
       orderDirection,
+      viewSecretValue,
       offset,
       projectId,
       environment,
@@ -247,6 +263,7 @@ export const useGetProjectSecretsDetails = (
         limit,
         orderBy,
         orderDirection,
+        viewSecretValue,
         offset,
         projectId,
         environment,
@@ -292,6 +309,22 @@ export const fetchProjectSecretsQuickSearch = async ({
   return data;
 };
 
+const fetchAccessibleSecrets = async ({
+  projectId,
+  secretPath,
+  environment,
+  filterByAction
+}: TGetAccessibleSecretsDTO) => {
+  const { data } = await apiRequest.get<{ secrets: SecretV3Raw[] }>(
+    "/api/v1/dashboard/accessible-secrets",
+    {
+      params: { projectId, secretPath, environment, filterByAction }
+    }
+  );
+
+  return data.secrets;
+};
+
 export const useGetProjectSecretsQuickSearch = (
   {
     projectId,
@@ -354,3 +387,32 @@ export const useGetProjectSecretsQuickSearch = (
     placeholderData: (previousData) => previousData
   });
 };
+
+export const useGetAccessibleSecrets = ({
+  projectId,
+  secretPath,
+  environment,
+  filterByAction,
+  options
+}: TGetAccessibleSecretsDTO & {
+  options?: Omit<
+    UseQueryOptions<
+      SecretV3Raw[],
+      unknown,
+      SecretV3Raw[],
+      ReturnType<typeof dashboardKeys.getAccessibleSecrets>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) => {
+  return useQuery({
+    ...options,
+    queryKey: dashboardKeys.getAccessibleSecrets({
+      projectId,
+      secretPath,
+      environment,
+      filterByAction
+    }),
+    queryFn: () => fetchAccessibleSecrets({ projectId, secretPath, environment, filterByAction })
+  });
+};

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

@@ -1,3 +1,4 @@
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { TSecretFolder } from "@app/hooks/api/secretFolders/types";
@@ -69,6 +70,7 @@ export type TGetDashboardProjectSecretsDetailsDTO = Omit<
   TGetDashboardProjectSecretsOverviewDTO,
   "environments"
 > & {
+  viewSecretValue: boolean;
   environment: string;
   includeImports?: boolean;
   tags: Record<string, boolean>;
@@ -100,3 +102,12 @@ export type TGetDashboardProjectSecretsByKeys = {
   environment: string;
   keys: string[];
 };
+
+export type TGetAccessibleSecretsDTO = {
+  projectId: string;
+  secretPath: string;
+  environment: string;
+  filterByAction:
+    | ProjectPermissionSecretActions.DescribeSecret
+    | ProjectPermissionSecretActions.ReadValue;
+};

frontend/src/hooks/api/reactQuery.tsx

@@ -10,280 +10,52 @@ import {
   formatedConditionsOperatorNames,
   PermissionConditionOperators
 } from "@app/context/ProjectPermissionContext/types";
+import { camelCaseToSpaces } from "@app/lib/fn/string";
 
 import { ApiErrorTypes, TApiErrors } from "./types";
-
 // this is saved in react-query cache
 export const SIGNUP_TEMP_TOKEN_CACHE_KEY = ["infisical__signup-temp-token"];
 export const MFA_TEMP_TOKEN_CACHE_KEY = ["infisical__mfa-temp-token"];
 export const AUTH_TOKEN_CACHE_KEY = ["infisical__auth-token"];
 
-const camelCaseToSpaces = (input: string) => {
-  return input.replace(/([a-z])([A-Z])/g, "$1 $2");
-};
-
-export const queryClient = new QueryClient({
-  mutationCache: new MutationCache({
-    onError: (error) => {
-      if (axios.isAxiosError(error)) {
-        const serverResponse = error.response?.data as TApiErrors;
-        if (serverResponse?.error === ApiErrorTypes.ValidationError) {
-          createNotification(
-            {
-              title: "Validation Error",
-              type: "error",
-              text: "Please check the input and try again.",
-              callToAction: (
-                <Modal>
-                  <ModalTrigger asChild>
-                    <Button variant="outline_bg" size="xs">
-                      Show more
-                    </Button>
-                  </ModalTrigger>
-                  <ModalContent title="Validation Error Details">
-                    <TableContainer>
-                      <Table>
-                        <THead>
-                          <Tr>
-                            <Th>Field</Th>
-                            <Th>Issue</Th>
-                          </Tr>
-                        </THead>
-                        <TBody>
-                          {serverResponse.message?.map(({ message, path }) => (
-                            <Tr key={path.join(".")}>
-                              <Td>{path.join(".")}</Td>
-                              <Td>{message.toLowerCase()}</Td>
-                            </Tr>
-                          ))}
-                        </TBody>
-                      </Table>
-                    </TableContainer>
-                  </ModalContent>
-                </Modal>
-              ),
-              copyActions: [
-                {
-                  value: serverResponse.reqId,
-                  name: "Request ID",
-                  label: `Request ID: ${serverResponse.reqId}`
-                }
-              ]
-            },
-            { closeOnClick: false }
-          );
-          return;
-        }
-        if (serverResponse?.error === ApiErrorTypes.PermissionBoundaryError) {
-          createNotification(
-            {
-              title: "Forbidden Access",
-              type: "error",
-              text: `${serverResponse.message}.`,
-              callToAction: serverResponse?.details?.missingPermissions?.length ? (
-                <Modal>
-                  <ModalTrigger asChild>
-                    <Button variant="outline_bg" size="xs">
-                      Show more
-                    </Button>
-                  </ModalTrigger>
-                  <ModalContent title="Missing Permission">
-                    <div className="flex flex-col gap-2">
-                      {serverResponse.details?.missingPermissions?.map((el, index) => {
-                        const hasConditions = Boolean(Object.keys(el.conditions || {}).length);
-                        return (
-                          <div
-                            key={`Forbidden-error-details-${index + 1}`}
-                            className="rounded-md border border-gray-600 p-4"
-                          >
-                            <div>
-                              You are not authorized to perform the <b>{el.action}</b> action on the{" "}
-                              <b>{el.subject}</b> resource.{" "}
-                              {hasConditions &&
-                                "Your permission does not allow access to the following conditions:"}
-                            </div>
-                            {hasConditions && (
-                              <ul className="flex list-disc flex-col gap-1 pl-5 pt-2 text-sm">
-                                {Object.keys(el.conditions || {}).flatMap((field, fieldIndex) => {
-                                  const operators = (
-                                    el.conditions as Record<
-                                      string,
-                                      | string
-                                      | { [K in PermissionConditionOperators]: string | string[] }
-                                    >
-                                  )[field];
-
-                                  const formattedFieldName = camelCaseToSpaces(field).toLowerCase();
-                                  if (typeof operators === "string") {
-                                    return (
-                                      <li
-                                        key={`Forbidden-error-details-${index + 1}-${
-                                          fieldIndex + 1
-                                        }`}
-                                      >
-                                        <span className="font-bold capitalize">
-                                          {formattedFieldName}
-                                        </span>{" "}
-                                        <span className="text-mineshaft-200">equal to</span>{" "}
-                                        <span className="text-yellow-600">{operators}</span>
-                                      </li>
-                                    );
-                                  }
-
-                                  return Object.keys(operators).map((operator, operatorIndex) => (
-                                    <li
-                                      key={`Forbidden-error-details-${index + 1}-${
-                                        fieldIndex + 1
-                                      }-${operatorIndex + 1}`}
-                                    >
-                                      <span className="font-bold capitalize">
-                                        {formattedFieldName}
-                                      </span>{" "}
-                                      <span className="text-mineshaft-200">
-                                        {
-                                          formatedConditionsOperatorNames[
-                                            operator as PermissionConditionOperators
-                                          ]
-                                        }
-                                      </span>{" "}
-                                      <span className="text-yellow-600">
-                                        {operators[
-                                          operator as PermissionConditionOperators
-                                        ].toString()}
-                                      </span>
-                                    </li>
-                                  ));
-                                })}
-                              </ul>
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </ModalContent>
-                </Modal>
-              ) : undefined,
-              copyActions: [
-                {
-                  value: serverResponse.reqId,
-                  name: "Request ID",
-                  label: `Request ID: ${serverResponse.reqId}`
-                }
-              ]
-            },
-            { closeOnClick: false }
-          );
-          return;
-        }
-        if (serverResponse?.error === ApiErrorTypes.ForbiddenError) {
-          createNotification(
-            {
-              title: "Forbidden Access",
-              type: "error",
-              text: `${serverResponse.message}.`,
-              callToAction: serverResponse?.details?.length ? (
-                <Modal>
-                  <ModalTrigger asChild>
-                    <Button variant="outline_bg" size="xs">
-                      Show more
-                    </Button>
-                  </ModalTrigger>
-                  <ModalContent
-                    title="Validation Rules"
-                    subTitle="Please review the allowed rules below."
-                  >
-                    <div className="flex flex-col gap-2">
-                      {serverResponse.details?.map((el, index) => {
-                        const hasConditions = Boolean(Object.keys(el.conditions || {}).length);
-                        return (
-                          <div
-                            key={`Forbidden-error-details-${index + 1}`}
-                            className="rounded-md border border-gray-600 p-4"
-                          >
-                            <div>
-                              {el.inverted ? "Cannot" : "Can"}{" "}
-                              <span className="text-yellow-600">
-                                {el.action.toString().replaceAll(",", ", ")}
-                              </span>{" "}
-                              {el.subject.toString()} {hasConditions && "with conditions:"}
-                            </div>
-                            {hasConditions && (
-                              <ul className="flex list-disc flex-col gap-1 pl-5 pt-2 text-sm">
-                                {Object.keys(el.conditions || {}).flatMap((field, fieldIndex) => {
-                                  const operators = (
-                                    el.conditions as Record<
-                                      string,
-                                      | string
-                                      | { [K in PermissionConditionOperators]: string | string[] }
-                                    >
-                                  )[field];
-
-                                  const formattedFieldName = camelCaseToSpaces(field).toLowerCase();
-                                  if (typeof operators === "string") {
-                                    return (
-                                      <li
-                                        key={`Forbidden-error-details-${index + 1}-${
-                                          fieldIndex + 1
-                                        }`}
-                                      >
-                                        <span className="font-bold capitalize">
-                                          {formattedFieldName}
-                                        </span>{" "}
-                                        <span className="text-mineshaft-200">equal to</span>{" "}
-                                        <span className="text-yellow-600">{operators}</span>
-                                      </li>
-                                    );
-                                  }
-
-                                  return Object.keys(operators).map((operator, operatorIndex) => (
-                                    <li
-                                      key={`Forbidden-error-details-${index + 1}-${
-                                        fieldIndex + 1
-                                      }-${operatorIndex + 1}`}
-                                    >
-                                      <span className="font-bold capitalize">
-                                        {formattedFieldName}
-                                      </span>{" "}
-                                      <span className="text-mineshaft-200">
-                                        {
-                                          formatedConditionsOperatorNames[
-                                            operator as PermissionConditionOperators
-                                          ]
-                                        }
-                                      </span>{" "}
-                                      <span className="text-yellow-600">
-                                        {operators[
-                                          operator as PermissionConditionOperators
-                                        ].toString()}
-                                      </span>
-                                    </li>
-                                  ));
-                                })}
-                              </ul>
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </ModalContent>
-                </Modal>
-              ) : undefined,
-              copyActions: [
-                {
-                  value: serverResponse.reqId,
-                  name: "Request ID",
-                  label: `Request ID: ${serverResponse.reqId}`
-                }
-              ]
-            },
-            { closeOnClick: false }
-          );
-          return;
-        }
-        createNotification({
-          title: "Bad Request",
+export const onRequestError = (error: unknown) => {
+  if (axios.isAxiosError(error)) {
+    const serverResponse = error.response?.data as TApiErrors;
+    if (serverResponse?.error === ApiErrorTypes.ValidationError) {
+      createNotification(
+        {
+          title: "Validation Error",
           type: "error",
-          text: `${serverResponse.message}${serverResponse.message?.endsWith(".") ? "" : "."}`,
+          text: "Please check the input and try again.",
+          callToAction: (
+            <Modal>
+              <ModalTrigger asChild>
+                <Button variant="outline_bg" size="xs">
+                  Show more
+                </Button>
+              </ModalTrigger>
+              <ModalContent title="Validation Error Details">
+                <TableContainer>
+                  <Table>
+                    <THead>
+                      <Tr>
+                        <Th>Field</Th>
+                        <Th>Issue</Th>
+                      </Tr>
+                    </THead>
+                    <TBody>
+                      {serverResponse.message?.map(({ message, path }) => (
+                        <Tr key={path.join(".")}>
+                          <Td>{path.join(".")}</Td>
+                          <Td>{message.toLowerCase()}</Td>
+                        </Tr>
+                      ))}
+                    </TBody>
+                  </Table>
+                </TableContainer>
+              </ModalContent>
+            </Modal>
+          ),
           copyActions: [
             {
               value: serverResponse.reqId,
@@ -291,9 +63,128 @@ export const queryClient = new QueryClient({
               label: `Request ID: ${serverResponse.reqId}`
             }
           ]
-        });
-      }
+        },
+        { closeOnClick: false }
+      );
+      return;
     }
+    if (serverResponse?.error === ApiErrorTypes.ForbiddenError) {
+      createNotification(
+        {
+          title: "Forbidden Access",
+          type: "error",
+          text: `${serverResponse.message}.`,
+          callToAction: serverResponse?.details?.length ? (
+            <Modal>
+              <ModalTrigger asChild>
+                <Button variant="outline_bg" size="xs">
+                  Show more
+                </Button>
+              </ModalTrigger>
+              <ModalContent
+                title="Validation Rules"
+                subTitle="Please review the allowed rules below."
+              >
+                <div className="flex flex-col gap-2">
+                  {serverResponse.details?.map((el, index) => {
+                    const hasConditions = Boolean(Object.keys(el.conditions || {}).length);
+                    return (
+                      <div
+                        key={`Forbidden-error-details-${index + 1}`}
+                        className="rounded-md border border-gray-600 p-4"
+                      >
+                        <div>
+                          {el.inverted ? "Cannot" : "Can"}{" "}
+                          <span className="text-yellow-600">
+                            {el.action.toString().replaceAll(",", ", ")}
+                          </span>{" "}
+                          {el.subject.toString()} {hasConditions && "with conditions:"}
+                        </div>
+                        {hasConditions && (
+                          <ul className="flex list-disc flex-col gap-1 pl-5 pt-2 text-sm">
+                            {Object.keys(el.conditions || {}).flatMap((field, fieldIndex) => {
+                              const operators = (
+                                el.conditions as Record<
+                                  string,
+                                  | string
+                                  | { [K in PermissionConditionOperators]: string | string[] }
+                                >
+                              )[field];
+
+                              const formattedFieldName = camelCaseToSpaces(field).toLowerCase();
+                              if (typeof operators === "string") {
+                                return (
+                                  <li
+                                    key={`Forbidden-error-details-${index + 1}-${fieldIndex + 1}`}
+                                  >
+                                    <span className="font-bold capitalize">
+                                      {formattedFieldName}
+                                    </span>{" "}
+                                    <span className="text-mineshaft-200">equal to</span>{" "}
+                                    <span className="text-yellow-600">{operators}</span>
+                                  </li>
+                                );
+                              }
+
+                              return Object.keys(operators).map((operator, operatorIndex) => (
+                                <li
+                                  key={`Forbidden-error-details-${index + 1}-${
+                                    fieldIndex + 1
+                                  }-${operatorIndex + 1}`}
+                                >
+                                  <span className="font-bold capitalize">{formattedFieldName}</span>{" "}
+                                  <span className="text-mineshaft-200">
+                                    {
+                                      formatedConditionsOperatorNames[
+                                        operator as PermissionConditionOperators
+                                      ]
+                                    }
+                                  </span>{" "}
+                                  <span className="text-yellow-600">
+                                    {operators[operator as PermissionConditionOperators].toString()}
+                                  </span>
+                                </li>
+                              ));
+                            })}
+                          </ul>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </ModalContent>
+            </Modal>
+          ) : undefined,
+          copyActions: [
+            {
+              value: serverResponse.reqId,
+              name: "Request ID",
+              label: `Request ID: ${serverResponse.reqId}`
+            }
+          ]
+        },
+        { closeOnClick: false }
+      );
+      return;
+    }
+    createNotification({
+      title: "Bad Request",
+      type: "error",
+      text: `${serverResponse.message}${serverResponse.message?.endsWith(".") ? "" : "."}`,
+      copyActions: [
+        {
+          value: serverResponse.reqId,
+          name: "Request ID",
+          label: `Request ID: ${serverResponse.reqId}`
+        }
+      ]
+    });
+  }
+};
+
+export const queryClient = new QueryClient({
+  mutationCache: new MutationCache({
+    onError: onRequestError
   }),
   defaultOptions: {
     queries: {

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

@@ -79,6 +79,7 @@ export const decryptSecrets = (
       id: encSecret.id,
       env: encSecret.environment,
       key: secretKey,
+      secretValueHidden: encSecret.secretValueHidden,
       value: secretValue,
       tags: encSecret.tags,
       comment: secretComment,

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

@@ -16,6 +16,7 @@ import {
   TDeleteFolderDTO,
   TGetFoldersByEnvDTO,
   TGetProjectFoldersDTO,
+  TProjectEnvironmentsFolders,
   TSecretFolder,
   TUpdateFolderBatchDTO,
   TUpdateFolderDTO
@@ -23,7 +24,9 @@ import {
 
 export const folderQueryKeys = {
   getSecretFolders: ({ projectId, environment, path }: TGetProjectFoldersDTO) =>
-    ["secret-folders", { projectId, environment, path }] as const
+    ["secret-folders", { projectId, environment, path }] as const,
+  getProjectEnvironmentsFolders: (projectId: string) =>
+    ["secret-folders", "environment", projectId] as const
 };
 
 const fetchProjectFolders = async (workspaceId: string, environment: string, path = "/") => {
@@ -37,6 +40,29 @@ const fetchProjectFolders = async (workspaceId: string, environment: string, pat
   return data.folders;
 };
 
+export const useListProjectEnvironmentsFolders = (
+  projectId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TProjectEnvironmentsFolders,
+      unknown,
+      TProjectEnvironmentsFolders,
+      ReturnType<typeof folderQueryKeys.getProjectEnvironmentsFolders>
+    >,
+    "queryKey" | "queryFn"
+  >
+) =>
+  useQuery({
+    queryKey: folderQueryKeys.getProjectEnvironmentsFolders(projectId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TProjectEnvironmentsFolders>(
+        `/api/v1/workspace/${projectId}/environment-folder-tree`
+      );
+      return data;
+    },
+    ...options
+  });
+
 export const useGetProjectFolders = ({
   projectId,
   environment,

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

@@ -1,3 +1,5 @@
+import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
+
 export enum ReservedFolders {
   SecretReplication = "__reserve_replication_"
 }
@@ -6,6 +8,13 @@ export type TSecretFolder = {
   id: string;
   name: string;
   description?: string;
+  parentId?: string | null;
+};
+
+export type TSecretFolderWithPath = TSecretFolder & { path: string };
+
+export type TProjectEnvironmentsFolders = {
+  [key: string]: WorkspaceEnv & { folders: TSecretFolderWithPath[] };
 };
 
 export type TGetProjectFoldersDTO = {

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

@@ -137,6 +137,7 @@ export const useGetImportedSecretsSingleEnv = ({
             env: encSecret.environment,
             key: encSecret.secretKey,
             value: encSecret.secretValue,
+            secretValueHidden: encSecret.secretValueHidden,
             tags: encSecret.tags,
             comment: encSecret.secretComment,
             createdAt: encSecret.createdAt,
@@ -176,6 +177,7 @@ export const useGetImportedSecretsAllEnvs = ({
                 env: encSecret.environment,
                 key: encSecret.secretKey,
                 value: encSecret.secretValue,
+                secretValueHidden: encSecret.secretValueHidden,
                 tags: encSecret.tags,
                 comment: encSecret.secretComment,
                 createdAt: encSecret.createdAt,

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

@@ -75,6 +75,7 @@ export const useGetSnapshotSecrets = ({ snapshotId }: TSnapshotDataProps) =>
           id: secretVersion.secretId,
           env: data.environment.slug,
           key: secretVersion.secretKey,
+          secretValueHidden: secretVersion.secretValueHidden,
           value: secretVersion.secretValue || "",
           tags: secretVersion.tags,
           comment: secretVersion.secretComment,

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

@@ -26,8 +26,13 @@ import {
 
 export const secretKeys = {
   // this is also used in secretSnapshot part
-  getProjectSecret: ({ workspaceId, environment, secretPath }: TGetProjectSecretsKey) =>
-    [{ workspaceId, environment, secretPath }, "secrets"] as const,
+  getProjectSecret: ({
+    workspaceId,
+    environment,
+    secretPath,
+    viewSecretValue
+  }: TGetProjectSecretsKey) =>
+    [{ workspaceId, environment, secretPath, viewSecretValue }, "secrets"] as const,
   getSecretVersion: (secretId: string) => [{ secretId }, "secret-versions"] as const,
   getSecretAccessList: ({
     workspaceId,
@@ -44,13 +49,15 @@ export const fetchProjectSecrets = async ({
   environment,
   secretPath,
   includeImports,
-  expandSecretReferences
+  expandSecretReferences,
+  viewSecretValue
 }: TGetProjectSecretsKey) => {
   const { data } = await apiRequest.get<SecretV3RawResponse>("/api/v3/secrets/raw", {
     params: {
       environment,
       workspaceId,
       secretPath,
+      viewSecretValue,
       expandSecretReferences,
       include_imports: includeImports
     }
@@ -68,6 +75,7 @@ export const mergePersonalSecrets = (rawSecrets: SecretV3Raw[]) => {
       env: el.environment,
       key: el.secretKey,
       value: el.secretValue,
+      secretValueHidden: el.secretValueHidden,
       tags: el.tags || [],
       comment: el.secretComment || "",
       reminderRepeatDays: el.secretReminderRepeatDays,
@@ -107,6 +115,7 @@ export const useGetProjectSecrets = ({
   workspaceId,
   environment,
   secretPath,
+  viewSecretValue,
   options
 }: TGetProjectSecretsDTO & {
   options?: Omit<
@@ -123,8 +132,13 @@ export const useGetProjectSecrets = ({
     ...options,
     // wait for all values to be available
     enabled: Boolean(workspaceId && environment) && (options?.enabled ?? true),
-    queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
-    queryFn: () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
+    queryKey: secretKeys.getProjectSecret({
+      workspaceId,
+      environment,
+      secretPath,
+      viewSecretValue
+    }),
+    queryFn: () => fetchProjectSecrets({ workspaceId, environment, secretPath, viewSecretValue }),
     select: useCallback(
       (data: Awaited<ReturnType<typeof fetchProjectSecrets>>) => mergePersonalSecrets(data.secrets),
       []

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

@@ -19,6 +19,7 @@ export type EncryptedSecret = {
   secretValueCiphertext: string;
   secretValueIV: string;
   secretValueTag: string;
+  secretValueHidden: boolean;
   __v: number;
   createdAt: string;
   updatedAt: string;
@@ -37,6 +38,7 @@ export type SecretV3RawSanitized = {
   version: number;
   key: string;
   value?: string;
+  secretValueHidden: boolean;
   comment?: string;
   reminderRepeatDays?: number | null;
   reminderNote?: string | null;
@@ -61,6 +63,7 @@ export type SecretV3Raw = {
   environment: string;
   version: number;
   type: string;
+  secretValueHidden: boolean;
   secretKey: string;
   secretPath: string;
   secretValue?: string;
@@ -95,6 +98,7 @@ export type SecretVersions = {
   envId: string;
   secretKey: string;
   secretValue?: string;
+  secretValueHidden: boolean;
   secretComment?: string;
   tags: WsTag[];
   __v: number;
@@ -115,6 +119,7 @@ export type TGetProjectSecretsKey = {
   environment: string;
   secretPath?: string;
   includeImports?: boolean;
+  viewSecretValue?: boolean;
   expandSecretReferences?: boolean;
 };
 

frontend/src/hooks/api/types.ts

@@ -47,7 +47,8 @@ export enum ApiErrorTypes {
   PermissionBoundaryError = "PermissionBoundaryError",
   BadRequestError = "BadRequest",
   UnauthorizedError = "UnauthorizedError",
-  ForbiddenError = "PermissionDenied"
+  ForbiddenError = "PermissionDenied",
+  CustomForbiddenError = "ForbiddenError"
 }
 
 export type TApiErrors =
@@ -70,6 +71,12 @@ export type TApiErrors =
       details: PureAbility["rules"];
       statusCode: 403;
     }
+  | {
+      reqId: string;
+      error: ApiErrorTypes.CustomForbiddenError;
+      message: string;
+      statusCode: 403;
+    }
   | {
       reqId: string;
       statusCode: 400;