From 6cc0d79d8adcb7187015bc94803f64ade5cbac56 Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Mon, 11 Mar 2024 06:01:31 +0530
Subject: [PATCH 1/5] Fixed environment filter button height Polished the
 interface more

---
 .../SecretOverviewPage/SecretOverviewPage.tsx | 265 ++++++++++--------
 .../CreateSecretForm/CreateSecretForm.tsx     |  21 +-
 .../EnvironmentSection/EnvironmentSection.tsx |   5 +-
 3 files changed, 167 insertions(+), 124 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 1fba46266..487d75f82 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -2,15 +2,15 @@ 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 { subject } from "@casl/ability";
+import { faCheckCircle, faCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
   faArrowDown,
   faArrowUp,
   faFolderBlank,
-  faList,
   faFolderPlus,
+  faList,
   faMagnifyingGlass,
   faPlus
 } from "@fortawesome/free-solid-svg-icons";
@@ -18,7 +18,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
-import { PermissionDeniedBanner, ProjectPermissionCan } from "@app/components/permissions";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DropdownMenu,
@@ -207,10 +207,10 @@ export const SecretOverviewPage = () => {
   };
 
   const handleEnvSelect = (envId: string) => {
-    if (visibleEnvs.map(env => env.id).includes(envId)) {
-      setVisisbleEnvs(visibleEnvs.filter(env => env.id !== envId))
+    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)))
+      setVisisbleEnvs(visibleEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
     }
   };
 
@@ -390,39 +390,44 @@ export const SecretOverviewPage = () => {
           <div className="flex items-center justify-between">
             <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
             <div className="flex flex-row items-center justify-center space-x-2">
-              <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;
+              {userAvailableEnvs.length > 0 && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <IconButton
+                      ariaLabel="Environments"
+                      variant="plain"
+                      size="sm"
+                      className="mr-2 flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 hover:border-primary/60 hover:bg-primary/10"
+                    >
+                      <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>
+                      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"
                       className="w-full"
@@ -434,8 +439,9 @@ export const SecretOverviewPage = () => {
                       Create an environment
                     </Button>
                   </DropdownMenuItem> */}
-                </DropdownMenuContent>
-              </DropdownMenu>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
               <div className="w-80">
                 <Input
                   className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
@@ -445,62 +451,64 @@ export const SecretOverviewPage = () => {
                   leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
                 />
               </div>
-              <div>
-                <ProjectPermissionCan
-                  I={ProjectPermissionActions.Create}
-                  a={subject(ProjectPermissionSub.Secrets, { secretPath })}
-                >
-                  {(isAllowed) => (
-                    <Button
-                      variant="outline_bg"
-                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                      onClick={() => handlePopUpOpen("addSecretsInAllEnvs")}
-                      className="h-10 rounded-r-none"
-                      isDisabled={!isAllowed}
-                    >
-                      Add Secret
-                    </Button>
-                  )}
-                </ProjectPermissionCan>
-                <DropdownMenu
-                  open={popUp.misc.isOpen}
-                  onOpenChange={(isOpen) => handlePopUpToggle("misc", isOpen)}
-                >
-                  <DropdownMenuTrigger asChild>
-                    <IconButton
-                      ariaLabel="add-folder-or-import"
-                      variant="outline_bg"
-                      className="rounded-l-none bg-mineshaft-600 p-3"
-                    >
-                      <FontAwesomeIcon icon={faAngleDown} />
-                    </IconButton>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <div className="flex flex-col space-y-1 p-1.5">
-                      <ProjectPermissionCan
-                        I={ProjectPermissionActions.Create}
-                        a={subject(ProjectPermissionSub.Secrets, { secretPath })}
+              {userAvailableEnvs.length > 0 && (
+                <div>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Create}
+                    a={subject(ProjectPermissionSub.Secrets, { secretPath })}
+                  >
+                    {(isAllowed) => (
+                      <Button
+                        variant="outline_bg"
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                        onClick={() => handlePopUpOpen("addSecretsInAllEnvs")}
+                        className="h-10 rounded-r-none"
+                        isDisabled={!isAllowed}
                       >
-                        {(isAllowed) => (
-                          <Button
-                            leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
-                            onClick={() => {
-                              handlePopUpOpen("addFolder");
-                              handlePopUpClose("misc");
-                            }}
-                            isDisabled={!isAllowed}
-                            variant="outline_bg"
-                            className="h-10"
-                            isFullWidth
-                          >
-                            Add Folder
-                          </Button>
-                        )}
-                      </ProjectPermissionCan>
-                    </div>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
+                        Add Secret
+                      </Button>
+                    )}
+                  </ProjectPermissionCan>
+                  <DropdownMenu
+                    open={popUp.misc.isOpen}
+                    onOpenChange={(isOpen) => handlePopUpToggle("misc", isOpen)}
+                  >
+                    <DropdownMenuTrigger asChild>
+                      <IconButton
+                        ariaLabel="add-folder-or-import"
+                        variant="outline_bg"
+                        className="rounded-l-none bg-mineshaft-600 p-3"
+                      >
+                        <FontAwesomeIcon icon={faAngleDown} />
+                      </IconButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <div className="flex flex-col space-y-1 p-1.5">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Create}
+                          a={subject(ProjectPermissionSub.Secrets, { secretPath })}
+                        >
+                          {(isAllowed) => (
+                            <Button
+                              leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
+                              onClick={() => {
+                                handlePopUpOpen("addFolder");
+                                handlePopUpClose("misc");
+                              }}
+                              isDisabled={!isAllowed}
+                              variant="outline_bg"
+                              className="h-10"
+                              isFullWidth
+                            >
+                              Add Folder
+                            </Button>
+                          )}
+                        </ProjectPermissionCan>
+                      </div>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -563,14 +571,25 @@ export const SecretOverviewPage = () => {
                     className="bg-mineshaft-700"
                   />
                 )}
-                {isTableEmpty && !isTableLoading && (
+                {userAvailableEnvs.length > 0 && visibleEnvs.length === 0 && (
                   <Tr>
                     <Td colSpan={visibleEnvs.length + 1}>
-                      <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
+                      <EmptyState title="You have no visible environments" iconSize="3x" />
+                    </Td>
+                  </Tr>
+                )}
+                {userAvailableEnvs.length === 0 && (
+                  <Tr>
+                    <Td colSpan={visibleEnvs.length + 1}>
+                      <EmptyState
+                        title="You have no environments, start by adding some"
+                        iconSize="3x"
+                      >
                         <Link
                           href={{
-                            pathname: "/project/[id]/secrets/[env]",
-                            query: { id: workspaceId, env: visibleEnvs?.[0]?.slug }
+                            pathname: "/project/[id]/settings",
+                            query: { id: workspaceId },
+                            hash: "environments"
                           }}
                         >
                           <Button
@@ -579,13 +598,30 @@ export const SecretOverviewPage = () => {
                             colorSchema="primary"
                             size="md"
                           >
-                            Go to {visibleEnvs?.[0]?.name}
+                            Add environments
                           </Button>
                         </Link>
                       </EmptyState>
                     </Td>
                   </Tr>
                 )}
+                {isTableEmpty && !isTableLoading && visibleEnvs.length > 0 && (
+                  <Tr>
+                    <Td colSpan={visibleEnvs.length + 1}>
+                      <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
+                        <Button
+                          className="mt-4"
+                          variant="outline_bg"
+                          colorSchema="primary"
+                          size="md"
+                          onClick={() => handlePopUpOpen("addSecretsInAllEnvs")}
+                        >
+                          Add Secrets
+                        </Button>
+                      </EmptyState>
+                    </Td>
+                  </Tr>
+                )}
                 {!isTableLoading &&
                   filteredFolderNames.map((folderName, index) => (
                     <SecretOverviewFolderRow
@@ -597,22 +633,19 @@ export const SecretOverviewPage = () => {
                     />
                   ))}
                 {!isTableLoading &&
-                  (visibleEnvs?.length > 0 ? (
-                    filteredSecretNames.map((key, index) => (
-                      <SecretOverviewTableRow
-                        secretPath={secretPath}
-                        onSecretCreate={handleSecretCreate}
-                        onSecretDelete={handleSecretDelete}
-                        onSecretUpdate={handleSecretUpdate}
-                        key={`overview-${key}-${index + 1}`}
-                        environments={visibleEnvs}
-                        secretKey={key}
-                        getSecretByKey={getSecretByKey}
-                        expandableColWidth={expandableTableWidth}
-                      />
-                    ))
-                  ) : (
-                    <PermissionDeniedBanner />
+                  visibleEnvs?.length > 0 &&
+                  filteredSecretNames.map((key, index) => (
+                    <SecretOverviewTableRow
+                      secretPath={secretPath}
+                      onSecretCreate={handleSecretCreate}
+                      onSecretDelete={handleSecretDelete}
+                      onSecretUpdate={handleSecretUpdate}
+                      key={`overview-${key}-${index + 1}`}
+                      environments={visibleEnvs}
+                      secretKey={key}
+                      getSecretByKey={getSecretByKey}
+                      expandableColWidth={expandableTableWidth}
+                    />
                   ))}
               </TBody>
               <TFoot>
diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
index 403564274..36f8cfb27 100644
--- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -171,7 +171,7 @@ export const CreateSecretForm = ({
             )}
           />
           <FormLabel label="Environments" className="mb-2" />
-          <div className="thin-scrollbar grid max-h-64 grid-cols-3 gap-4 overflow-auto ">
+          <div className="thin-scrollbar grid max-h-64 grid-cols-3 gap-4 overflow-auto py-2">
             {environments.map((env) => {
               return (
                 <Controller
@@ -183,13 +183,20 @@ export const CreateSecretForm = ({
                       isChecked={field.value}
                       onCheckedChange={field.onChange}
                       id={`secret-input-${env.slug}`}
+                      className="!justify-start"
                     >
-                      {env.name}
-                      {getSecretByKey(env.slug, newSecretKey) && (
-                        <Tooltip content="Secret exists. Will be overwritten">
-                          <FontAwesomeIcon icon={faWarning} className="ml-1 text-yellow-400" />
-                        </Tooltip>
-                      )}
+                      <span className="flex w-full flex-row items-center justify-start whitespace-pre-wrap">
+                        <span title={env.name} className="truncate">
+                          {env.name}
+                        </span>
+                        <span>
+                          {getSecretByKey(env.slug, newSecretKey) && (
+                            <Tooltip content="Secret exists. Will be overwritten">
+                              <FontAwesomeIcon icon={faWarning} className="ml-1 text-yellow-400" />
+                            </Tooltip>
+                          )}
+                        </span>
+                      </span>
                     </Checkbox>
                   )}
                 />
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
index 20f163f45..92ba623a2 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
@@ -63,7 +63,10 @@ export const EnvironmentSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div
+      id="environments"
+      className="mb-6 scroll-m-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
       <div className="mb-8 flex justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Environments</p>
         <div>

From 972b80e7906551f19b636786caf6a932fec8e51a Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Mon, 11 Mar 2024 06:11:26 +0530
Subject: [PATCH 2/5] updated message if search results not found

---
 .../views/SecretOverviewPage/SecretOverviewPage.tsx    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 487d75f82..6ca16291f 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -608,7 +608,15 @@ export const SecretOverviewPage = () => {
                 {isTableEmpty && !isTableLoading && visibleEnvs.length > 0 && (
                   <Tr>
                     <Td colSpan={visibleEnvs.length + 1}>
-                      <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
+                      <EmptyState
+                        title={
+                          searchFilter
+                            ? "No secret found for your search, add one now"
+                            : "Let's add some secrets"
+                        }
+                        icon={faFolderBlank}
+                        iconSize="3x"
+                      >
                         <Button
                           className="mt-4"
                           variant="outline_bg"

From 8a27b1b5e6930cf6bffe2257cf113952969d3799 Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Mon, 11 Mar 2024 09:43:00 +0530
Subject: [PATCH 3/5] Fixed overflow of environment name in
 SecretOverviewTableRow

---
 .../SecretOverviewTableRow/SecretOverviewTableRow.tsx    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
index 719b17d44..8ae96d888 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
@@ -148,8 +148,13 @@ export const SecretOverviewTableRow = ({
                           key={`secret-expanded-${slug}-${secretKey}`}
                           className="hover:bg-mineshaft-700"
                         >
-                          <td className="flex" style={{ padding: "0.25rem 1rem" }}>
-                            <div className="flex h-8 items-center">{name}</div>
+                          <td
+                            className="flex h-full items-center"
+                            style={{ padding: "0.25rem 1rem" }}
+                          >
+                            <div title={name} className="flex h-8 w-[8rem] items-center ">
+                              <span className="truncate">{name}</span>
+                            </div>
                           </td>
                           <td className="col-span-2 h-8 w-full">
                             <SecretEditRow

From 624fb3d46ad191a25cce17f4233cd1153eb44324 Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Mon, 11 Mar 2024 10:04:47 +0530
Subject: [PATCH 4/5] Fixed issue when visible environments not updating on
 project change

---
 frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 6ca16291f..4c464fa93 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -110,6 +110,10 @@ export const SecretOverviewPage = () => {
   const userAvailableEnvs = currentWorkspace?.environments || [];
   const [visibleEnvs, setVisisbleEnvs] = useState(userAvailableEnvs);
 
+  useEffect(() => {
+    setVisisbleEnvs(userAvailableEnvs);
+  }, [userAvailableEnvs]);
+
   const {
     data: secrets,
     getSecretByKey,

From a232450f20d16f9d2714034038f76c17da565f80 Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Tue, 12 Mar 2024 21:21:29 +0530
Subject: [PATCH 5/5] Resolved Comments

---
 .../SecretOverviewPage/SecretOverviewPage.tsx      | 14 +++++++-------
 .../CreateSecretForm/CreateSecretForm.tsx          |  5 ++++-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 4c464fa93..ec8b5c2f9 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -108,10 +108,10 @@ export const SecretOverviewPage = () => {
   }, [isWorkspaceLoading, workspaceId, router.isReady]);
 
   const userAvailableEnvs = currentWorkspace?.environments || [];
-  const [visibleEnvs, setVisisbleEnvs] = useState(userAvailableEnvs);
+  const [visibleEnvs, setVisibleEnvs] = useState(userAvailableEnvs);
 
   useEffect(() => {
-    setVisisbleEnvs(userAvailableEnvs);
+    setVisibleEnvs(userAvailableEnvs);
   }, [userAvailableEnvs]);
 
   const {
@@ -212,9 +212,9 @@ export const SecretOverviewPage = () => {
 
   const handleEnvSelect = (envId: string) => {
     if (visibleEnvs.map((env) => env.id).includes(envId)) {
-      setVisisbleEnvs(visibleEnvs.filter((env) => env.id !== envId));
+      setVisibleEnvs(visibleEnvs.filter((env) => env.id !== envId));
     } else {
-      setVisisbleEnvs(visibleEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
+      setVisibleEnvs(visibleEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
     }
   };
 
@@ -401,7 +401,7 @@ export const SecretOverviewPage = () => {
                       ariaLabel="Environments"
                       variant="plain"
                       size="sm"
-                      className="mr-2 flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 hover:border-primary/60 hover:bg-primary/10"
+                      className="flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 hover:border-primary/60 hover:bg-primary/10"
                     >
                       <Tooltip content="Choose visible environments" className="mb-2">
                         <FontAwesomeIcon icon={faList} />
@@ -410,8 +410,8 @@ export const SecretOverviewPage = () => {
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
                     <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
-                    {userAvailableEnvs.map((avaiableEnv) => {
-                      const { id: envId, name } = avaiableEnv;
+                    {userAvailableEnvs.map((availableEnv) => {
+                      const { id: envId, name } = availableEnv;
 
                       const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
                       return (
diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
index 36f8cfb27..8c305af1a 100644
--- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -191,7 +191,10 @@ export const CreateSecretForm = ({
                         </span>
                         <span>
                           {getSecretByKey(env.slug, newSecretKey) && (
-                            <Tooltip content="Secret exists. Will be overwritten">
+                            <Tooltip
+                              className="max-w-[150px]"
+                              content="Secret already exists, and it will be overwritten"
+                            >
                               <FontAwesomeIcon icon={faWarning} className="ml-1 text-yellow-400" />
                             </Tooltip>
                           )}