feat: fixed padding, added progress bar for routing, added sticky header for overview

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -1,19 +1,22 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
 import {
   Button,
+  EmptyState,
   Input,
   Table,
   TableContainer,
   TableSkeleton,
   TBody,
   Td,
+  TFoot,
   Th,
   THead,
   Tooltip,
@@ -210,8 +213,9 @@ export const SecretOverviewPage = () => {
     );
   }
 
-  const isTableLoading =
-    folders?.some(({ isLoading }) => isLoading) && secrets?.some(({ isLoading }) => isLoading);
+  const isTableLoading = !(
+    folders?.some(({ isLoading }) => !isLoading) && secrets?.some(({ isLoading }) => !isLoading)
+  );
 
   const filteredSecretNames = secKeys?.filter((name) =>
     name.toUpperCase().includes(searchFilter.toUpperCase())
@@ -219,6 +223,12 @@ export const SecretOverviewPage = () => {
   const filteredFolderNames = folderNames?.filter((name) =>
     name.toLowerCase().includes(searchFilter.toLowerCase())
   );
+  const isTableEmpty =
+    !(
+      folders?.every(({ isLoading }) => isLoading) && secrets?.every(({ isLoading }) => isLoading)
+    ) &&
+    filteredSecretNames?.length === 0 &&
+    filteredFolderNames?.length === 0;
 
   return (
     <div className="container mx-auto px-6 text-mineshaft-50 dark:[color-scheme:dark]">
@@ -260,28 +270,32 @@ export const SecretOverviewPage = () => {
           />
         </div>
       </div>
-      <div className="thin-scrollbar mt-4 max-h-[calc(100vh-250px)] overflow-y-auto" ref={parentTableRef}>
-        <TableContainer className="sticky top-0">
+      <div className="thin-scrollbar mt-4" ref={parentTableRef}>
+        <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
           <Table>
-            <THead className="sticky top-0">
-              <Tr>
-                <Th className="sticky left-0 z-10 min-w-[20rem] bg-clip-padding">Name</Th>
+            <THead>
+              <Tr className="sticky top-0 z-20 border-0">
+                <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
+                  </div>
+                </Th>
                 {userAvailableEnvs?.map(({ name, slug }, index) => {
                   const envSecKeyCount = getEnvSecretKeyCount(slug);
                   const missingKeyCount = secKeys.length - envSecKeyCount;
                   return (
                     <Th
-                      className="min-table-row min-w-[11rem] text-center"
+                      className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
                       key={`secret-overview-${name}-${index + 1}`}
                     >
-                      <div className="flex items-center justify-center">
+                      <div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pt-4 pb-3.5">
                         {name}
                         {missingKeyCount > 0 && (
                           <Tooltip
                             className="max-w-none lowercase"
                             content={`${missingKeyCount} secrets missing\n compared to other environments`}
                           >
-                            <div className="ml-2 h-[1.1rem] font-medium flex cursor-default items-center justify-center rounded-sm bg-red-600 border border-red-400 p-1 text-xs text-bunker-100">
+                            <div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
                               <span className="text-bunker-100">{missingKeyCount}</span>
                             </div>
                           </Tooltip>
@@ -301,6 +315,22 @@ export const SecretOverviewPage = () => {
                   className="bg-mineshaft-700"
                 />
               )}
+              {isTableEmpty && (
+                <Tr>
+                  <Td colSpan={userAvailableEnvs.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 }
+                        }}
+                      >
+                        <Button className="mt-2 p-1">Go to {userAvailableEnvs?.[0]?.name}</Button>
+                      </Link>
+                    </EmptyState>
+                  </Td>
+                </Tr>
+              )}
               {filteredFolderNames.map((folderName, index) => (
                 <SecretOverviewFolderRow
                   folderName={folderName}
@@ -322,11 +352,18 @@ export const SecretOverviewPage = () => {
                   expandableColWidth={expandableTableWidth}
                 />
               ))}
-              <Tr>
-                <Td className="fixed left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding" />
+            </TBody>
+            <TFoot>
+              <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
+                <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 p-0">
+                  <div
+                    className="w-full border-t border-r border-mineshaft-600"
+                    style={{ height: "45px" }}
+                  />
+                </Td>
                 {userAvailableEnvs.map(({ name, slug }) => (
-                  <Td key={`explore-${name}-btn`} className=" border-x border-mineshaft-700">
-                    <div className="flex items-center justify-center">
+                  <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
                         size="xs"
                         variant="outline_bg"
@@ -339,7 +376,7 @@ export const SecretOverviewPage = () => {
                   </Td>
                 ))}
               </Tr>
-            </TBody>
+            </TFoot>
           </Table>
         </TableContainer>
       </div>

frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx

@@ -19,8 +19,8 @@ export const SecretOverviewFolderRow = ({
 }: Props) => {
   return (
     <Tr isHoverable isSelectable className="group" onClick={() => onClick(folderName)}>
-      <Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-2.5 group-hover:bg-mineshaft-700">
-        <div className="flex items-center space-x-5">
+      <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
+        <div className="flex items-center space-x-5 border-r border-mineshaft-600 px-5 py-2.5">
           <div className="text-yellow-700">
             <FontAwesomeIcon icon={faFolder} />
           </div>
@@ -33,7 +33,7 @@ export const SecretOverviewFolderRow = ({
           <Td
             key={`sec-overview-${slug}-${i + 1}-folder`}
             className={twMerge(
-              "border-x border-mineshaft-700 py-3 group-hover:bg-mineshaft-700",
+              "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
               isPresent ? "text-green-600" : "text-red-600"
             )}
           >

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -85,7 +85,7 @@ export const SecretEditRow = ({
   };
 
   return (
-    <div className="group flex w-full cursor-text items-start space-x-2 items-center">
+    <div className="group flex w-full cursor-text space-x-2 items-center">
       <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller
           control={control}

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -1,5 +1,12 @@
 import { faCircle } from "@fortawesome/free-regular-svg-icons";
-import { faAngleDown, faCheck, faEye, faEyeSlash, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
+import {
+  faAngleDown,
+  faCheck,
+  faEye,
+  faEyeSlash,
+  faKey,
+  faXmark
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
@@ -35,8 +42,12 @@ export const SecretOverviewTableRow = ({
   return (
     <>
       <Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
-        <Td className={`sticky left-0 py-0 px-0 z-10 bg-mineshaft-800 bg-clip-padding group-hover:bg-mineshaft-700 ${isFormExpanded && "border-t-2 border-mineshaft-500"}`}>
-          <div className="w-full h-full border-x border-mineshaft-700 py-2.5 px-5">
+        <Td
+          className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${
+            isFormExpanded && "border-t-2 border-mineshaft-500"
+          }`}
+        >
+          <div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
             <div className="flex items-center space-x-5">
               <div className="text-blue-300/70">
                 <FontAwesomeIcon icon={isFormExpanded ? faAngleDown : faKey} />
@@ -60,12 +71,14 @@ export const SecretOverviewTableRow = ({
                 !isSecretPresent && !isSecretEmpty ? "text-red-600" : ""
               )}
             >
-              <div className="w-full h-full py-[0.85rem] px-5 border-r border-mineshaft-600">
+              <div className="h-full w-full border-r border-mineshaft-600 py-[0.85rem] px-5">
                 <div className="flex justify-center">
                   {!isSecretEmpty && <FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} />}
-                  {isSecretEmpty && <Tooltip content="Empty value">
-                    <FontAwesomeIcon icon={faCircle} />
-                  </Tooltip>}
+                  {isSecretEmpty && (
+                    <Tooltip content="Empty value">
+                      <FontAwesomeIcon icon={faCircle} />
+                    </Tooltip>
+                  )}
                 </div>
               </div>
             </Td>
@@ -74,14 +87,16 @@ export const SecretOverviewTableRow = ({
       </Tr>
       {isFormExpanded && (
         <Tr>
-          <Td colSpan={totalCols} className={`px-0 py-0 ${isFormExpanded && "border-b-2 border-mineshaft-500"}`}>
+          <Td
+            colSpan={totalCols}
+            className={`bg-bunker-600 px-0 py-0 ${
+              isFormExpanded && "border-b-2 border-mineshaft-500"
+            }`}
+          >
             <div
-              className="bg-bunker-600 p-2"
+              className="ml-2 p-2"
               style={{
-                width: `calc(${expandableColWidth}px - 0.4rem)`,
-                // position: "sticky",
-                // left: "1.25rem",
-                // right: "1.25rem"
+                width: `calc(${expandableColWidth}px - 1rem)`
               }}
             >
               <TableContainer>
@@ -94,8 +109,10 @@ export const SecretOverviewTableRow = ({
                       >
                         Environment
                       </th>
-                      <th style={{ padding: "0.5rem 1rem" }} className="border-none">Value</th>
-                      <div className="absolute top-0 right-0 w-min ml-auto mt-1 mr-1">
+                      <th style={{ padding: "0.5rem 1rem" }} className="border-none">
+                        Value
+                      </th>
+                      <div className="absolute top-0 right-0 ml-auto mt-1 mr-1 w-min">
                         <Button
                           variant="outline_bg"
                           className="p-1"
@@ -120,7 +137,7 @@ export const SecretOverviewTableRow = ({
                           <td className="flex" style={{ padding: "0.25rem 1rem" }}>
                             <div className="flex h-8 items-center">{name}</div>
                           </td>
-                          <td className="h-8 col-span-2 w-full">
+                          <td className="col-span-2 h-8 w-full">
                             <SecretEditRow
                               isVisible={isSecretVisible}
                               secretName={secretKey}