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

frontend/package-lock.json

@@ -62,6 +62,7 @@
         "lottie-react": "^2.4.0",
         "markdown-it": "^13.0.1",
         "next": "^12.3.4",
+        "nprogress": "^0.2.0",
         "posthog-js": "^1.58.0",
         "query-string": "^7.1.3",
         "react": "^17.0.2",
@@ -17481,6 +17482,11 @@
         "set-blocking": "^2.0.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -35769,6 +35775,11 @@
         "set-blocking": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",

frontend/package.json

@@ -70,6 +70,7 @@
     "lottie-react": "^2.4.0",
     "markdown-it": "^13.0.1",
     "next": "^12.3.4",
+    "nprogress": "^0.2.0",
     "posthog-js": "^1.58.0",
     "query-string": "^7.1.3",
     "react": "^17.0.2",

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -26,7 +26,7 @@ export const EmptyState = ({
     )}
   >
     <FontAwesomeIcon icon={icon} size={iconSize} />
-    <div className="flex flex-row items-center py-4">
+    <div className="flex flex-col items-center py-4">
       <div className="text-sm text-bunker-300">{title}</div>
       <div>{children}</div>
     </div>

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -70,7 +70,9 @@ export const SecretInput = ({
         dangerouslySetInnerHTML={{
           __html: syntaxHighlight(value, isVisible || isSecretFocused)
         }}
-        className={`absolute top-0 left-0 z-0 h-full w-full text-ellipsis whitespace-pre-line break-all ${!value && value !== "" && "text-red-600 italic"}`}
+        className={`absolute top-0 left-0 z-0 h-full w-full text-ellipsis whitespace-pre-line break-all ${
+          !value && value !== "" && "italic text-red-600/70"
+        }`}
       />
       <ContentEditable
         className="relative z-10 h-full w-full text-ellipsis whitespace-pre-line  break-all text-transparent caret-white outline-none"

frontend/src/components/v2/Table/Table.tsx

@@ -51,6 +51,17 @@ export const THead = ({ children, className }: THeadProps): JSX.Element => (
   </thead>
 );
 
+export type TFootProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const TFoot = ({ children, className }: TFootProps): JSX.Element => (
+  <tfoot className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}>
+    {children}
+  </tfoot>
+);
+
 // table rows
 export type TrProps = {
   children: ReactNode;
@@ -68,7 +79,7 @@ export const Tr = ({
 }: TrProps): JSX.Element => (
   <tr
     className={twMerge(
-      "cursor-default border border-solid border-mineshaft-700",
+      "cursor-default border border-solid border-mineshaft-600",
       isHoverable && "hover:bg-mineshaft-600",
       isSelectable && "cursor-pointer",
       className
@@ -126,7 +137,12 @@ export type TBodyLoader = {
   innerKey: string;
 };
 
-export const TableSkeleton = ({ rows = 3, columns, innerKey, className }: TBodyLoader): JSX.Element => (
+export const TableSkeleton = ({
+  rows = 3,
+  columns,
+  innerKey,
+  className
+}: TBodyLoader): JSX.Element => (
   <>
     {Array.apply(0, Array(rows)).map((_x, i) => (
       <Tr key={`${innerKey}-skeleton-rows-${i + 1}`}>

frontend/src/components/v2/Table/index.tsx

@@ -3,8 +3,8 @@ export type {
   TableProps,
   TBodyProps,
   TdProps,
+  TFootProps,
   THeadProps,
   ThProps,
-  TrProps
+  TrProps} from "./Table";
-} from "./Table";
+export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot,Th, THead, Tr } from "./Table";
-export { Table, TableContainer, TableSkeleton,TBody, Td, Th, THead, Tr } from "./Table";

frontend/src/pages/_app.tsx

@@ -9,6 +9,7 @@ import { AppProps } from "next/app";
 import { useRouter } from "next/router";
 import { config } from "@fortawesome/fontawesome-svg-core";
 import { QueryClientProvider } from "@tanstack/react-query";
+import NProgress from "nprogress";
 
 import NotificationProvider from "@app/components/context/Notifications/NotificationProvider";
 import { IntercomProvider } from "@app/components/utilities/intercom/intercomProvider";
@@ -25,6 +26,7 @@ import {
 import { AppLayout } from "@app/layouts";
 import { queryClient } from "@app/reactQuery";
 
+import "nprogress/nprogress.css";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import "../styles/globals.css";
 
@@ -44,7 +46,7 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
     const telemetry = new Telemetry().getInstance();
 
     const handleRouteChange = () => {
-			// (window).Intercom('update');
+      // (window).Intercom('update');
       if (typeof window !== "undefined") {
         telemetry.capture("$pageview");
       }
@@ -57,6 +59,22 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
     };
   }, [router.events]);
 
+  useEffect(() => {
+    const handleStart = () => NProgress.start();
+
+    const handleStop = () => NProgress.done();
+
+    router.events.on("routeChangeStart", handleStart);
+    router.events.on("routeChangeComplete", handleStop);
+    router.events.on("routeChangeError", handleStop);
+
+    return () => {
+      router.events.off("routeChangeStart", handleStart);
+      router.events.off("routeChangeComplete", handleStop);
+      router.events.off("routeChangeError", handleStop);
+    };
+  }, [router]);
+
   // If it's one of these routes, don't add the layout (e.g., these routes are external)
   if (
     publicPaths.includes(`/${appProps.router.pathname.split("/")[1]}`) ||

frontend/src/styles/globals.css

@@ -87,6 +87,10 @@
     scrollbar-width: thin;
     scrollbar-color: gray transparent;
   }
+
+  #nprogress .bar {
+    @apply bg-primary-400;
+  }
 }
 
 @import "@fontsource/inter/400.css";

frontend/src/views/DashboardPage/DashboardPage.tsx

@@ -506,38 +506,44 @@ export const DashboardPage = () => {
     handlePopUpClose("secretDetails");
   }, []);
 
-  const onCreateWsTag = useCallback(async (tagName: string) => {
+  const onCreateWsTag = useCallback(
-    try {
+    async (tagName: string) => {
-      await createWsTag({
+      try {
-        workspaceID: workspaceId,
+        await createWsTag({
-        tagName,
+          workspaceID: workspaceId,
-        tagSlug: tagName.replace(" ", "_")
+          tagName,
-      });
+          tagSlug: tagName.replace(" ", "_")
-      handlePopUpClose("addTag");
+        });
-      createNotification({
+        handlePopUpClose("addTag");
-        text: "Successfully created a tag",
+        createNotification({
-        type: "success"
+          text: "Successfully created a tag",
-      });
+          type: "success"
-    } catch (error) {
+        });
-      console.error(error);
+      } catch (error) {
-      createNotification({
+        console.error(error);
-        text: "Failed to create a tag",
+        createNotification({
-        type: "error"
+          text: "Failed to create a tag",
-      });
+          type: "error"
-    }
+        });
-  }, []);
-
-  const handleFolderOpen = useCallback((id: string) => {
-    setSearchFilter("");
-    console.log(router.query);
-    router.push({
-      pathname: router.pathname,
-      query: {
-        ...router.query,
-        folderId: id
       }
-    });
+    },
-  }, []);
+    [workspaceId]
+  );
+
+  const handleFolderOpen = useCallback(
+    (id: string) => {
+      setSearchFilter("");
+      router.push({
+        pathname: router.pathname,
+        query: {
+          id: workspaceId,
+          env: envQuery,
+          folderId: id
+        }
+      });
+    },
+    [envQuery, workspaceId]
+  );
 
   const isEditFolder = Boolean(popUp?.folderForm?.data);
 
@@ -564,28 +570,31 @@ export const DashboardPage = () => {
     }
   };
 
-  const handleFolderUpdate = useCallback(async (name: string) => {
+  const handleFolderUpdate = useCallback(
-    const { id } = popUp?.folderForm?.data as TDeleteFolderForm;
+    async (name: string) => {
-    try {
+      const { id } = popUp?.folderForm?.data as TDeleteFolderForm;
-      await updateFolder({
+      try {
-        folderId: id,
+        await updateFolder({
-        workspaceId,
+          folderId: id,
-        environment: selectedEnv?.slug || "",
+          workspaceId,
-        name
+          environment: selectedEnv?.slug || "",
-      });
+          name
-      createNotification({
+        });
-        type: "success",
+        createNotification({
-        text: "Successfully updated folder"
+          type: "success",
-      });
+          text: "Successfully updated folder"
-      handlePopUpClose("folderForm");
+        });
-    } catch (error) {
+        handlePopUpClose("folderForm");
-      console.error(error);
+      } catch (error) {
-      createNotification({
+        console.error(error);
-        text: "Failed to update folder",
+        createNotification({
-        type: "error"
+          text: "Failed to update folder",
-      });
+          type: "error"
-    }
+        });
-  }, []);
+      }
+    },
+    [selectedEnv?.slug, (popUp?.folderForm?.data as TDeleteFolderForm)?.id]
+  );
 
   const handleFolderDelete = useCallback(async () => {
     const { id } = popUp?.deleteFolder?.data as TDeleteFolderForm;
@@ -607,7 +616,7 @@ export const DashboardPage = () => {
         type: "error"
       });
     }
-  }, []);
+  }, [selectedEnv?.slug, (popUp?.deleteFolder?.data as TDeleteFolderForm)?.id]);
 
   // SECRET IMPORT SECTION
   const handleSecretImportCreate = async (env: string, secretPath: string) => {

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 =
+  const isTableLoading = !(
-    folders?.some(({ isLoading }) => isLoading) && secrets?.some(({ isLoading }) => isLoading);
+    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}>
+      <div className="thin-scrollbar mt-4" ref={parentTableRef}>
-        <TableContainer className="sticky top-0">
+        <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
           <Table>
-            <THead className="sticky top-0">
+            <THead>
-              <Tr>
+              <Tr className="sticky top-0 z-20 border-0">
-                <Th className="sticky left-0 z-10 min-w-[20rem] bg-clip-padding">Name</Th>
+                <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>
+            </TBody>
-                <Td className="fixed left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding" />
+            <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">
+                  <Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
-                    <div className="flex items-center justify-center">
+                    <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">
+      <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">
+        <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"}`}>
+        <Td
-          <div className="w-full h-full border-x border-mineshaft-700 py-2.5 px-5">
+          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">
+                  {isSecretEmpty && (
-                    <FontAwesomeIcon icon={faCircle} />
+                    <Tooltip content="Empty value">
-                  </Tooltip>}
+                      <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)`,
+                width: `calc(${expandableColWidth}px - 1rem)`
-                // position: "sticky",
-                // left: "1.25rem",
-                // right: "1.25rem"
               }}
             >
               <TableContainer>
@@ -94,8 +109,10 @@ export const SecretOverviewTableRow = ({
                       >
                         Environment
                       </th>
-                      <th style={{ padding: "0.5rem 1rem" }} className="border-none">Value</th>
+                      <th style={{ padding: "0.5rem 1rem" }} className="border-none">
-                      <div className="absolute top-0 right-0 w-min ml-auto mt-1 mr-1">
+                        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}