Fixed environment filter button height

Polished the interface more

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)) {
+    if (visibleEnvs.map((env) => env.id).includes(envId)) {
-      setVisisbleEnvs(visibleEnvs.filter(env => env.id !== 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,13 +390,14 @@ 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">
+              {userAvailableEnvs.length > 0 && (
                 <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"
+                      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} />
@@ -408,17 +409,21 @@ export const SecretOverviewPage = () => {
                     {userAvailableEnvs.map((avaiableEnv) => {
                       const { id: envId, name } = avaiableEnv;
 
-                    const isEnvSelected = visibleEnvs.map(env => env.id).includes(envId);
+                      const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
                       return (
                         <DropdownMenuItem
                           onClick={() => handleEnvSelect(envId)}
                           key={envId}
-                        icon={isEnvSelected && <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />}
+                          icon={
+                            isEnvSelected ? (
+                              <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                            ) : (
+                              <FontAwesomeIcon className="text-mineshaft-400" icon={faCircle} />
+                            )
+                          }
                           iconPos="left"
                         >
-                        <div className="flex items-center">
+                          <div className="flex items-center">{name}</div>
-                          {name}
-                        </div>
                         </DropdownMenuItem>
                       );
                     })}
@@ -436,6 +441,7 @@ export const SecretOverviewPage = () => {
                   </DropdownMenuItem> */}
                   </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,6 +451,7 @@ export const SecretOverviewPage = () => {
                   leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
                 />
               </div>
+              {userAvailableEnvs.length > 0 && (
                 <div>
                   <ProjectPermissionCan
                     I={ProjectPermissionActions.Create}
@@ -501,6 +508,7 @@ export const SecretOverviewPage = () => {
                     </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]",
+                            pathname: "/project/[id]/settings",
-                            query: { id: workspaceId, env: visibleEnvs?.[0]?.slug }
+                            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,7 +633,7 @@ export const SecretOverviewPage = () => {
                     />
                   ))}
                 {!isTableLoading &&
-                  (visibleEnvs?.length > 0 ? (
+                  visibleEnvs?.length > 0 &&
                   filteredSecretNames.map((key, index) => (
                     <SecretOverviewTableRow
                       secretPath={secretPath}
@@ -610,9 +646,6 @@ export const SecretOverviewPage = () => {
                       getSecretByKey={getSecretByKey}
                       expandableColWidth={expandableTableWidth}
                     />
-                    ))
-                  ) : (
-                    <PermissionDeniedBanner />
                   ))}
               </TBody>
               <TFoot>

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"
                     >
+                      <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>
                   )}
                 />

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>