From e12ac6c07e3bae117e99f0df4329a3526729e7c2 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Sun, 15 Sep 2024 12:29:24 -0700
Subject: [PATCH] fix: hide envs without read permission in the env filter
 dropdown

---
 .../SecretOverviewPage/SecretOverviewPage.tsx | 50 +++++++++++--------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 7c5aefc0a..97101b21a 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -600,27 +600,37 @@ export const SecretOverviewPage = () => {
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
                     <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
-                    {userAvailableEnvs.map((availableEnv) => {
-                      const { id: envId, name } = availableEnv;
+                    {userAvailableEnvs
+                      .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);
-                      return (
-                        <DropdownMenuItem
-                          onClick={() => handleEnvSelect(envId)}
-                          key={envId}
-                          icon={
-                            isEnvSelected ? (
-                              <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
-                            ) : (
-                              <FontAwesomeIcon className="text-mineshaft-400" icon={faCircle} />
-                            )
-                          }
-                          iconPos="left"
-                        >
-                          <div className="flex items-center">{name}</div>
-                        </DropdownMenuItem>
-                      );
-                    })}
+                        const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
+                        return (
+                          <DropdownMenuItem
+                            onClick={() => handleEnvSelect(envId)}
+                            key={envId}
+                            icon={
+                              isEnvSelected ? (
+                                <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                              ) : (
+                                <FontAwesomeIcon className="text-mineshaft-400" icon={faCircle} />
+                              )
+                            }
+                            iconPos="left"
+                          >
+                            <div className="flex items-center">{name}</div>
+                          </DropdownMenuItem>
+                        );
+                      })}
                     {/* <DropdownMenuItem className="px-1.5" asChild>
                     <Button
                       size="xs"