feat(rbac): fixed merge conflicts and resolved some more issues with permission checks

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -2,7 +2,13 @@ import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faArrowDown, faArrowUp, faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { subject } from "@casl/ability";
+import {
+  faArrowDown,
+  faArrowUp,
+  faFolderBlank,
+  faMagnifyingGlass
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -27,6 +33,7 @@ import {
   ProjectPermissionActions,
   ProjectPermissionSub,
   useOrganization,
+  useProjectPermission,
   useWorkspace
 } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
@@ -76,6 +83,7 @@ const SecretOverview = () => {
   const { data: latestFileKey } = useGetUserWsKey(workspaceId);
   const [searchFilter, setSearchFilter] = useState("");
   const secretPath = router.query?.secretPath as string;
+  const permission = useProjectPermission();
 
   useEffect(() => {
     if (!isWorkspaceLoading && !workspaceId && router.isReady) {
@@ -83,11 +91,13 @@ const SecretOverview = () => {
     }
   }, [isWorkspaceLoading, workspaceId, router.isReady]);
 
-  const { data: wsEnv, isLoading: isEnvListLoading } = useGetUserWsEnvironments({
-    workspaceId
-  });
-
-  const userAvailableEnvs = wsEnv?.filter(({ isReadDenied }) => !isReadDenied) || [];
+  const userAvailableEnvs =
+    currentWorkspace?.environments?.filter(({ slug }) =>
+      permission.can(
+        ProjectPermissionActions.Read,
+        subject(ProjectPermissionSub.Secrets, { environment: slug, secretPath: secretPath || "/" })
+      )
+    ) || [];
 
   const {
     data: secrets,
@@ -213,7 +223,7 @@ const SecretOverview = () => {
     }
   };
 
-  if (isEnvListLoading) {
+  if (isWorkspaceLoading) {
     return (
       <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
         <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
@@ -225,9 +235,9 @@ const SecretOverview = () => {
     folders?.some(({ isLoading }) => !isLoading) && secrets?.some(({ isLoading }) => !isLoading)
   );
 
-  const filteredSecretNames = secKeys?.filter((name) =>
-    name.toUpperCase().includes(searchFilter.toUpperCase())
-  ).sort((a, b) => sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a));
+  const filteredSecretNames = secKeys
+    ?.filter((name) => name.toUpperCase().includes(searchFilter.toUpperCase()))
+    .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a)));
   const filteredFolderNames = folderNames?.filter((name) =>
     name.toLowerCase().includes(searchFilter.toLowerCase())
   );
@@ -286,7 +296,12 @@ const SecretOverview = () => {
                 <Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
                   <div className="flex items-center border-b border-r border-mineshaft-600 px-5 pt-4 pb-3.5">
                     Name
-                    <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={() => setSortDir(prev => prev === "asc" ? "desc" : "asc")}>
+                    <IconButton
+                      variant="plain"
+                      className="ml-2"
+                      ariaLabel="sort"
+                      onClick={() => setSortDir((prev) => (prev === "asc" ? "desc" : "asc"))}
+                    >
                       <FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
                     </IconButton>
                   </div>