Merge pull request #2426 from scott-ray-wilson/secret-env-access-warning

Fix: Restricted Secret Environment UI Corrections

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -50,7 +50,7 @@ type Props = {
   ) => void;
 };
 
-const INIT_PER_PAGE = 10;
+const INIT_PER_PAGE = 20;
 
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
   const router = useRouter();

frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx

@@ -56,7 +56,7 @@ import { IdentityModal } from "./components/IdentityModal";
 import { IdentityRoleForm } from "./components/IdentityRoleForm";
 
 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
-const INIT_PER_PAGE = 10;
+const INIT_PER_PAGE = 20;
 const formatRoleName = (role: string, customRoleName?: string) => {
   if (role === ProjectMembershipRole.Custom) return customRoleName;
   if (role === ProjectMembershipRole.Member) return "Developer";

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -47,7 +47,7 @@ const LOADER_TEXT = [
   "Getting secret import links..."
 ];
 
-const INIT_PER_PAGE = 10;
+const INIT_PER_PAGE = 20;
 export const SecretMainPage = () => {
   const { t } = useTranslation();
   const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
@@ -344,7 +344,15 @@ export const SecretMainPage = () => {
           <NavHeader
             pageName={t("dashboard.title")}
             currentEnv={environment}
-            userAvailableEnvs={currentWorkspace?.environments}
+            userAvailableEnvs={currentWorkspace?.environments.filter(({ slug }) =>
+              permission.can(
+                ProjectPermissionActions.Read,
+                subject(ProjectPermissionSub.Secrets, {
+                  environment: slug,
+                  secretPath
+                })
+              )
+            )}
             isFolderMode
             secretPath={secretPath}
             isProjectRelated

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -85,7 +85,7 @@ enum RowType {
   Secret = "Secret"
 }
 
-const INIT_PER_PAGE = 10;
+const INIT_PER_PAGE = 20;
 
 export const SecretOverviewPage = () => {
   const { t } = useTranslation();
@@ -173,11 +173,31 @@ export const SecretOverviewPage = () => {
   }, [isWorkspaceLoading, workspaceId, router.isReady]);
 
   const userAvailableEnvs = currentWorkspace?.environments || [];
-  const [visibleEnvs, setVisibleEnvs] = useState(userAvailableEnvs);
+  const [visibleEnvs, setVisibleEnvs] = useState(
+    userAvailableEnvs?.filter(({ slug }) =>
+      permission.can(
+        ProjectPermissionActions.Read,
+        subject(ProjectPermissionSub.Secrets, {
+          environment: slug,
+          secretPath
+        })
+      )
+    )
+  );
 
   useEffect(() => {
-    setVisibleEnvs(userAvailableEnvs);
+    setVisibleEnvs(
-  }, [userAvailableEnvs]);
+      userAvailableEnvs?.filter(({ slug }) =>
+        permission.can(
+          ProjectPermissionActions.Read,
+          subject(ProjectPermissionSub.Secrets, {
+            environment: slug,
+            secretPath
+          })
+        )
+      )
+    );
+  }, [userAvailableEnvs, secretPath]);
 
   const {
     data: secrets,
@@ -580,27 +600,37 @@ export const SecretOverviewPage = () => {
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
                     <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
-                    {userAvailableEnvs.map((availableEnv) => {
+                    {userAvailableEnvs
-                      const { id: envId, name } = availableEnv;
+                      .filter(({ slug }) =>
+                        permission.can(
+                          ProjectPermissionActions.Read,
+                          subject(ProjectPermissionSub.Secrets, {
+                            environment: slug,
+                            secretPath
+                          })
+                        )
+                      )
+                      .map((availableEnv) => {
+                        const { id: envId, name } = availableEnv;
 
-                      const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
+                        const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
-                      return (
+                        return (
-                        <DropdownMenuItem
+                          <DropdownMenuItem
-                          onClick={() => handleEnvSelect(envId)}
+                            onClick={() => handleEnvSelect(envId)}
-                          key={envId}
+                            key={envId}
-                          icon={
+                            icon={
-                            isEnvSelected ? (
+                              isEnvSelected ? (
-                              <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                                <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
-                            ) : (
+                              ) : (
-                              <FontAwesomeIcon className="text-mineshaft-400" icon={faCircle} />
+                                <FontAwesomeIcon className="text-mineshaft-400" icon={faCircle} />
-                            )
+                              )
-                          }
+                            }
-                          iconPos="left"
+                            iconPos="left"
-                        >
+                          >
-                          <div className="flex items-center">{name}</div>
+                            <div className="flex items-center">{name}</div>
-                        </DropdownMenuItem>
+                          </DropdownMenuItem>
-                      );
+                        );
-                    })}
+                      })}
                     {/* <DropdownMenuItem className="px-1.5" asChild>
                     <Button
                       size="xs"

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

@@ -13,7 +13,7 @@ import { twMerge } from "tailwind-merge";
 
 import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
-import { SecretType,SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
+import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
 
 import { SecretEditRow } from "./SecretEditRow";
@@ -53,6 +53,8 @@ export const SecretOverviewTableRow = ({
   onSecretDelete,
   isImportedSecretPresentInEnv,
   getImportedSecretByKey,
+  // temporary until below todo is resolved
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   expandableColWidth,
   onToggleSecretSelect,
   isSelected
@@ -150,10 +152,11 @@ export const SecretOverviewTableRow = ({
             }`}
           >
             <div
-              className="ml-2 p-2"
+              className="ml-2 w-[99%] p-2"
-              style={{
+              // TODO: scott expandableColWidth sometimes 0 due to parent ref not mounting, opting for relative width until resolved
-                width: `calc(${expandableColWidth}px - 1rem)`
+              // style={{
-              }}
+              //   width: `calc(${expandableColWidth} - 1rem)`
+              // }}
             >
               <SecretRenameRow
                 secretKey={secretKey}