feat(api): view secret value, WIP

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -39,6 +39,7 @@ type Props = {
   isVisible?: boolean;
   isImportedSecret: boolean;
   environment: string;
+  secretValueHidden: boolean;
   secretPath: string;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
   onSecretUpdate: (
@@ -58,6 +59,7 @@ export const SecretEditRow = ({
   isImportedSecret,
   onSecretUpdate,
   secretName,
+  secretValueHidden,
   onSecretCreate,
   onSecretDelete,
   environment,
@@ -151,6 +153,7 @@ export const SecretEditRow = ({
               value={field.value as string}
               key="secret-input"
               isVisible={isVisible}
+              secretValueHidden={secretValueHidden}
               secretPath={secretPath}
               environment={environment}
               isImport={isImportedSecret}
@@ -158,6 +161,7 @@ export const SecretEditRow = ({
           )}
         />
       </div>
+
       <div
         className={twMerge(
           "flex w-24 justify-center space-x-3 pl-2 transition-all",

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

@@ -221,10 +221,13 @@ export const SecretOverviewTableRow = ({
                               secretPath={secretPath}
                               isVisible={isSecretVisible}
                               secretName={secretKey}
+                              secretValueHidden={secret?.secretValueHidden || false}
                               defaultValue={
-                                secret?.valueOverride ||
-                                secret?.value ||
-                                importedSecret?.secret?.value
+                                secret?.secretValueHidden
+                                  ? ""
+                                  : secret?.valueOverride ||
+                                    secret?.value ||
+                                    importedSecret?.secret?.value
                               }
                               secretId={secret?.id}
                               isOverride={Boolean(secret?.valueOverride)}

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

@@ -58,6 +58,7 @@ import {
   useSelectedSecrets
 } from "./SecretMainPage.store";
 import { Filter, RowType } from "./SecretMainPage.types";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 
 const LOADER_TEXT = [
   "Retrieving your encrypted secrets...",
@@ -103,7 +104,7 @@ const Page = () => {
   const projectSlug = currentWorkspace?.slug || "";
   const secretPath = (routerQueryParams.secretPath as string) || "/";
   const canReadSecret = permission.can(
-    ProjectPermissionActions.Read,
+    ProjectPermissionSecretActions.DescribeSecret,
     subject(ProjectPermissionSub.Secrets, {
       environment,
       secretPath,
@@ -111,6 +112,17 @@ const Page = () => {
       secretTags: ["*"]
     })
   );
+  const canReadSecretValue = permission.can(
+    ProjectPermissionSecretActions.ReadValue,
+    subject(ProjectPermissionSub.Secrets, {
+      environment,
+      secretPath,
+      secretName: "*",
+      secretTags: ["*"]
+    })
+  );
+
+  console.log("Can read secret value", canReadSecret);
 
   const canReadSecretImports = permission.can(
     ProjectPermissionActions.Read,
@@ -176,6 +188,7 @@ const Page = () => {
     orderDirection,
     includeImports: canReadSecretImports && filter.include.import,
     includeFolders: filter.include.folder,
+    viewSecretValue: canReadSecretValue,
     includeDynamicSecrets: canReadDynamicSecret && filter.include.dynamic,
     includeSecrets: canReadSecret && filter.include.secret,
     tags: filter.tags

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx

@@ -52,6 +52,8 @@ import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
+import { useEffect } from "react";
 
 type Props = {
   isOpen?: boolean;
@@ -122,7 +124,7 @@ export const SecretDetailSidebar = ({
   const selectTagSlugs = selectedTags.map((i) => i.slug);
 
   const cannotEditSecret = permission.cannot(
-    ProjectPermissionActions.Edit,
+    ProjectPermissionSecretActions.Edit,
     subject(ProjectPermissionSub.Secrets, {
       environment,
       secretPath,
@@ -130,16 +132,31 @@ export const SecretDetailSidebar = ({
       secretTags: selectTagSlugs
     })
   );
+
+  const cannotReadSecretValue = permission.cannot(
+    ProjectPermissionSecretActions.ReadValue,
+    subject(ProjectPermissionSub.Secrets, {
+      environment,
+      secretPath,
+      secretName: secretKey,
+      secretTags: selectTagSlugs
+    })
+  );
+
   const isReadOnly =
     permission.can(
-      ProjectPermissionActions.Read,
+      ProjectPermissionSecretActions.DescribeSecret,
       subject(ProjectPermissionSub.Secrets, {
         environment,
         secretPath,
         secretName: secretKey,
         secretTags: selectTagSlugs
       })
-    ) && cannotEditSecret;
+    ) &&
+    cannotEditSecret &&
+    cannotReadSecretValue;
+
+  console.log("cannotReadSecretValue", cannotReadSecretValue);
 
   const overrideAction = watch("overrideAction");
   const isOverridden =
@@ -261,7 +278,14 @@ export const SecretDetailSidebar = ({
                         key="secret-value"
                         control={control}
                         render={({ field }) => (
-                          <FormControl label="Value">
+                          <FormControl
+                            helperText={
+                              cannotReadSecretValue
+                                ? "The value of this secret is hidden because you don't have the read secret value permission."
+                                : undefined
+                            }
+                            label="Value"
+                          >
                             <InfisicalSecretInput
                               isReadOnly={isReadOnly}
                               environment={environment}

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable simple-import-sort/imports */
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
@@ -44,6 +45,7 @@ import {
   SecretReferenceTree
 } from "@app/components/secrets/SecretReferenceDetails";
 
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import {
   FontAwesomeSpriteName,
   formSchema,
@@ -99,8 +101,14 @@ export const SecretItem = memo(
       trigger,
       formState: { isDirty, isSubmitting, errors }
     } = useForm<TFormSchema>({
-      defaultValues: secret,
-      values: secret,
+      defaultValues: {
+        ...secret,
+        value: secret.secretValueHidden ? "" : secret.value
+      },
+      values: {
+        ...secret,
+        value: secret.secretValueHidden ? "" : secret.value
+      },
       resolver: zodResolver(formSchema)
     });
 
@@ -123,7 +131,7 @@ export const SecretItem = memo(
 
     const isReadOnly =
       permission.can(
-        ProjectPermissionActions.Read,
+        ProjectPermissionSecretActions.DescribeSecret,
         subject(ProjectPermissionSub.Secrets, {
           environment,
           secretPath,
@@ -132,7 +140,7 @@ export const SecretItem = memo(
         })
       ) &&
       permission.cannot(
-        ProjectPermissionActions.Edit,
+        ProjectPermissionSecretActions.Edit,
         subject(ProjectPermissionSub.Secrets, {
           environment,
           secretPath,
@@ -141,6 +149,9 @@ export const SecretItem = memo(
         })
       );
 
+    const { secretValueHidden } = secret;
+    console.log(`Secret Key: ${secret.key}, hidden: ${secretValueHidden}`);
+
     const [isSecValueCopied, setIsSecValueCopied] = useToggle(false);
     useEffect(() => {
       let timer: NodeJS.Timeout;
@@ -279,12 +290,14 @@ export const SecretItem = memo(
                   control={control}
                   render={({ field }) => (
                     <InfisicalSecretInput
+                      secretValueHidden={secretValueHidden}
                       isReadOnly={isReadOnly}
                       key="secret-value"
                       isVisible={isVisible}
                       environment={environment}
                       secretPath={secretPath}
                       {...field}
+                      defaultValue={secretValueHidden ? "" : undefined}
                       containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
                     />
                   )}