From b1d049c677027f170bf0b5311200c52d63d1c123 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sat, 17 Feb 2024 21:49:17 -0800
Subject: [PATCH] added ability to hide environments in the overview screen

---
 .../SecretListView/SecretDetaiSidebar.tsx     |  2 +-
 .../components/SecretListView/SecretItem.tsx  |  2 +-
 .../SecretOverviewPage/SecretOverviewPage.tsx | 82 ++++++++++++++++---
 3 files changed, 74 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
index cf50e44f3..092495597 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
@@ -291,7 +291,7 @@ export const SecretDetailSidebar = ({
                       )}
                     </ProjectPermissionCan>
                     <DropdownMenuContent align="end" className="z-[100]">
-                      <DropdownMenuLabel>Apply tags to this secrets</DropdownMenuLabel>
+                      <DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
                       {tags.map((tag) => {
                         const { id: tagId, name, color } = tag;
 
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
index a72463c9a..5434de70d 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
@@ -321,7 +321,7 @@ export const SecretItem = memo(
                       )}
                     </ProjectPermissionCan>
                     <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Apply tags to this secrets</DropdownMenuLabel>
+                      <DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
                       {tags.map((tag) => {
                         const { id: tagId, name, color } = tag;
 
diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 394914a00..c95e09acb 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -2,10 +2,12 @@ import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faArrowDown,
   faArrowUp,
   faFolderBlank,
+  faList,
   faMagnifyingGlass
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -15,6 +17,11 @@ import NavHeader from "@app/components/navigation/NavHeader";
 import { PermissionDeniedBanner } from "@app/components/permissions";
 import {
   Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
   EmptyState,
   IconButton,
   Input,
@@ -86,6 +93,7 @@ export const SecretOverviewPage = () => {
   }, [isWorkspaceLoading, workspaceId, router.isReady]);
 
   const userAvailableEnvs = currentWorkspace?.environments || [];
+  const [visibleEnvs, setVisisbleEnvs] = useState(userAvailableEnvs);
 
   const {
     data: secrets,
@@ -149,6 +157,14 @@ export const SecretOverviewPage = () => {
     }
   };
 
+  const handleEnvSelect = (envId: string) => {
+    if (visibleEnvs.map(env => env.id).includes(envId)) {
+      setVisisbleEnvs(visibleEnvs.filter(env => env.id !== envId))
+    } else {
+      setVisisbleEnvs(visibleEnvs.concat(userAvailableEnvs.filter(env => env.id === envId)))
+    }
+  };
+
   const handleSecretUpdate = async (env: string, key: string, value: string, secretId?: string) => {
     try {
       await updateSecretV3({
@@ -225,7 +241,7 @@ export const SecretOverviewPage = () => {
       }
     }
     const query: Record<string, string> = { ...router.query, env: slug };
-    const envIndex = userAvailableEnvs.findIndex((el) => slug === el.slug);
+    const envIndex = visibleEnvs.findIndex((el) => slug === el.slug);
     if (envIndex !== -1) {
       router.push({
         pathname: "/project/[id]/secrets/[env]",
@@ -317,7 +333,53 @@ export const SecretOverviewPage = () => {
       </div>
       <div className="mt-8 flex items-center justify-between">
         <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
-        <div className="w-80">
+        <div className="w-96 flex flex-row">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <IconButton
+                ariaLabel="Environments"
+                variant="plain"
+                size="sm"
+                className="flex justify-center items-center overflow-hidden p-0 w-11 bg-mineshaft-800 hover:bg-primary/10 hover:border-primary/60 border border-mineshaft-600 mr-2"
+              >
+                <Tooltip content="Choose visible environments" className="mb-2">
+                  <FontAwesomeIcon icon={faList} />
+                </Tooltip>
+              </IconButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
+              {userAvailableEnvs.map((avaiableEnv) => {
+                const { id: envId, name } = avaiableEnv;
+
+                const isEnvSelected = visibleEnvs.map(env => env.id).includes(envId);
+                return (
+                  <DropdownMenuItem
+                    onClick={() => handleEnvSelect(envId)}
+                    key={envId}
+                    icon={isEnvSelected && <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />}
+                    iconPos="left"
+                  >
+                    <div className="flex items-center">
+                      {name}
+                    </div>
+                  </DropdownMenuItem>
+                );
+              })}
+              {/* <DropdownMenuItem className="px-1.5" asChild>
+                <Button
+                  size="xs"
+                  className="w-full"
+                  colorSchema="primary"
+                  variant="outline_bg"
+                  leftIcon={<FontAwesomeIcon icon={faHockeyPuck} />}
+                  // onClick={onCreateTag}
+                >
+                  Create an environment
+                </Button>
+              </DropdownMenuItem> */}
+            </DropdownMenuContent>
+          </DropdownMenu>
           <Input
             className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
             placeholder="Search by secret/folder name..."
@@ -345,7 +407,7 @@ export const SecretOverviewPage = () => {
                     </IconButton>
                   </div>
                 </Th>
-                {userAvailableEnvs?.map(({ name, slug }, index) => {
+                {visibleEnvs?.map(({ name, slug }, index) => {
                   const envSecKeyCount = getEnvSecretKeyCount(slug);
                   const missingKeyCount = secKeys.length - envSecKeyCount;
                   return (
@@ -388,12 +450,12 @@ export const SecretOverviewPage = () => {
               )}
               {isTableEmpty && !isTableLoading && (
                 <Tr>
-                  <Td colSpan={userAvailableEnvs.length + 1}>
+                  <Td colSpan={visibleEnvs.length + 1}>
                     <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
                       <Link
                         href={{
                           pathname: "/project/[id]/secrets/[env]",
-                          query: { id: workspaceId, env: userAvailableEnvs?.[0]?.slug }
+                          query: { id: workspaceId, env: visibleEnvs?.[0]?.slug }
                         }}
                       >
                         <Button
@@ -402,7 +464,7 @@ export const SecretOverviewPage = () => {
                           colorSchema="primary"
                           size="md"
                         >
-                          Go to {userAvailableEnvs?.[0]?.name}
+                          Go to {visibleEnvs?.[0]?.name}
                         </Button>
                       </Link>
                     </EmptyState>
@@ -414,13 +476,13 @@ export const SecretOverviewPage = () => {
                   <SecretOverviewFolderRow
                     folderName={folderName}
                     isFolderPresentInEnv={isFolderPresentInEnv}
-                    environments={userAvailableEnvs}
+                    environments={visibleEnvs}
                     key={`overview-${folderName}-${index + 1}`}
                     onClick={handleFolderClick}
                   />
                 ))}
               {!isTableLoading &&
-                (userAvailableEnvs?.length > 0 ? (
+                (visibleEnvs?.length > 0 ? (
                   filteredSecretNames.map((key, index) => (
                     <SecretOverviewTableRow
                       secretPath={secretPath}
@@ -428,7 +490,7 @@ export const SecretOverviewPage = () => {
                       onSecretDelete={handleSecretDelete}
                       onSecretUpdate={handleSecretUpdate}
                       key={`overview-${key}-${index + 1}`}
-                      environments={userAvailableEnvs}
+                      environments={visibleEnvs}
                       secretKey={key}
                       getSecretByKey={getSecretByKey}
                       expandableColWidth={expandableTableWidth}
@@ -446,7 +508,7 @@ export const SecretOverviewPage = () => {
                     style={{ height: "45px" }}
                   />
                 </Td>
-                {userAvailableEnvs.map(({ name, slug }) => (
+                {visibleEnvs.map(({ name, slug }) => (
                   <Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
                     <div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
                       <Button