Merge pull request #3859 from Infisical/overview-ui-improvements

improvement(secret-overview): Add collapsed environment view to secret overview page

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { TooltipProps as RootProps } from "@radix-ui/react-tooltip";
 import { twMerge } from "tailwind-merge";
 
 export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "content"> & {
@@ -14,6 +15,7 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
   isDisabled?: boolean;
   center?: boolean;
   size?: "sm" | "md";
+  rootProps?: RootProps;
 };
 
 export const Tooltip = ({
@@ -28,12 +30,14 @@ export const Tooltip = ({
   isDisabled,
   position = "top",
   size = "md",
+  rootProps,
   ...props
 }: TooltipProps) =>
   // just render children if tooltip content is empty
   content ? (
     <TooltipPrimitive.Root
       delayDuration={50}
+      {...rootProps}
       open={isOpen}
       defaultOpen={defaultOpen}
       onOpenChange={onOpenChange}

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -6,6 +6,9 @@ import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
   faArrowDown,
+  faArrowLeft,
+  faArrowRight,
+  faArrowRightToBracket,
   faArrowUp,
   faFileImport,
   faFingerprint,
@@ -69,7 +72,7 @@ import {
   PreferenceKey,
   setUserTablePreference
 } from "@app/helpers/userTablePreferences";
-import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
+import { useDebounce, usePagination, usePopUp, useResetPageHelper, useToggle } from "@app/hooks";
 import {
   useCreateFolder,
   useCreateSecretV3,
@@ -164,6 +167,18 @@ export const OverviewPage = () => {
   const [debouncedSearchFilter, setDebouncedSearchFilter] = useDebounce(searchFilter);
   const secretPath = (routerSearch?.secretPath as string) || "/";
   const { subscription } = useSubscription();
+  const [collapseEnvironments, setCollapseEnvironments] = useToggle(
+    Boolean(localStorage.getItem("overview-collapse-environments"))
+  );
+
+  const handleToggleNarrowHeader = () => {
+    setCollapseEnvironments.toggle();
+    if (collapseEnvironments) {
+      localStorage.removeItem("overview-collapse-environments");
+    } else {
+      localStorage.setItem("overview-collapse-environments", "true");
+    }
+  };
 
   const [filter, setFilter] = useState<Filter>(DEFAULT_FILTER_STATE);
   const [filterHistory, setFilterHistory] = useState<
@@ -1173,47 +1188,81 @@ export const OverviewPage = () => {
             className="thin-scrollbar rounded-b-none"
           >
             <Table>
-              <THead>
+              <THead className={collapseEnvironments ? "h-24" : ""}>
-                <Tr className="sticky top-0 z-20 border-0">
+                <Tr
-                  <Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
+                  className={twMerge("sticky top-0 z-20 border-0", collapseEnvironments && "h-24")}
-                    <div className="flex items-center border-b border-r border-mineshaft-600 pb-3 pl-3 pr-5 pt-3.5">
+                >
-                      <Tooltip
+                  <Th
-                        className="max-w-[20rem] whitespace-nowrap capitalize"
+                    className={twMerge(
-                        content={
+                      "sticky left-0 z-20 min-w-[20rem] border-b-0 p-0",
-                          totalCount > 0
+                      collapseEnvironments && "h-24"
-                            ? `${
+                    )}
-                                !allRowsSelectedOnPage.isChecked ? "Select" : "Unselect"
+                  >
-                              } all folders and secrets on page`
+                    <div
-                            : ""
+                      className={twMerge(
-                        }
+                        "flex h-full border-b border-mineshaft-600 pb-3 pl-3 pr-5",
+                        !collapseEnvironments && "border-r pt-3.5"
+                      )}
+                    >
+                      <div
+                        className={twMerge("flex items-center", collapseEnvironments && "mt-auto")}
                       >
-                        <div className="ml-2 mr-4">
+                        <Tooltip
-                          <Checkbox
+                          className="max-w-[20rem] whitespace-nowrap capitalize"
-                            isDisabled={totalCount === 0}
+                          content={
-                            id="checkbox-select-all-rows"
+                            totalCount > 0
-                            isChecked={allRowsSelectedOnPage.isChecked}
+                              ? `${
-                            isIndeterminate={allRowsSelectedOnPage.isIndeterminate}
+                                  !allRowsSelectedOnPage.isChecked ? "Select" : "Unselect"
-                            onCheckedChange={toggleSelectAllRows}
+                                } all folders and secrets on page`
+                              : ""
+                          }
+                        >
+                          <div className="ml-2 mr-4">
+                            <Checkbox
+                              isDisabled={totalCount === 0}
+                              id="checkbox-select-all-rows"
+                              isChecked={allRowsSelectedOnPage.isChecked}
+                              isIndeterminate={allRowsSelectedOnPage.isIndeterminate}
+                              onCheckedChange={toggleSelectAllRows}
+                            />
+                          </div>
+                        </Tooltip>
+                        Name
+                        <IconButton
+                          variant="plain"
+                          className="ml-2"
+                          ariaLabel="sort"
+                          onClick={() =>
+                            setOrderDirection((prev) =>
+                              prev === OrderByDirection.ASC
+                                ? OrderByDirection.DESC
+                                : OrderByDirection.ASC
+                            )
+                          }
+                        >
+                          <FontAwesomeIcon
+                            icon={orderDirection === "asc" ? faArrowDown : faArrowUp}
                           />
-                        </div>
+                        </IconButton>
-                      </Tooltip>
+                      </div>
-                      Name
+                      <Tooltip
-                      <IconButton
+                        content={
-                        variant="plain"
+                          collapseEnvironments ? "Expand Environments" : "Collapse Environments"
-                        className="ml-2"
-                        ariaLabel="sort"
-                        onClick={() =>
-                          setOrderDirection((prev) =>
-                            prev === OrderByDirection.ASC
-                              ? OrderByDirection.DESC
-                              : OrderByDirection.ASC
-                          )
                         }
+                        className="capitalize"
                       >
-                        <FontAwesomeIcon
+                        <IconButton
-                          icon={orderDirection === "asc" ? faArrowDown : faArrowUp}
+                          ariaLabel="Toggle Environment View"
-                        />
+                          variant="plain"
-                      </IconButton>
+                          colorSchema="secondary"
+                          className="ml-auto mt-auto h-min p-1"
+                          onClick={handleToggleNarrowHeader}
+                        >
+                          <FontAwesomeIcon
+                            icon={collapseEnvironments ? faArrowLeft : faArrowRight}
+                          />
+                        </IconButton>
+                      </Tooltip>
                     </div>
                   </Th>
                   {visibleEnvs?.map(({ name, slug }, index) => {
@@ -1223,28 +1272,76 @@ export const OverviewPage = () => {
 
                     return (
                       <Th
-                        className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
+                        className={twMerge(
+                          "min-table-row border-b-0 p-0 text-xs",
+                          collapseEnvironments && index === visibleEnvs.length - 1 && "mr-8",
+                          collapseEnvironments ? "h-24 w-[1rem]" : "min-w-[11rem] text-center"
+                        )}
                         key={`secret-overview-${name}-${index + 1}`}
                       >
-                        <div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pb-[0.83rem] pt-3.5">
+                        <Tooltip
-                          <button
+                          content={
-                            type="button"
+                            collapseEnvironments ? (
-                            className="text-sm font-medium duration-100 hover:text-mineshaft-100"
+                              <p className="whitespace-break-spaces">{name}</p>
-                            onClick={() => handleExploreEnvClick(slug)}
+                            ) : (
+                              ""
+                            )
+                          }
+                          side="bottom"
+                          sideOffset={-1}
+                          align="end"
+                          className="max-w-xl text-xs normal-case"
+                          rootProps={{
+                            disableHoverableContent: true
+                          }}
+                        >
+                          <div
+                            className={twMerge(
+                              "border-b border-mineshaft-600",
+                              collapseEnvironments
+                                ? "relative h-24 w-[2.9rem]"
+                                : "flex items-center justify-center px-5 pb-[0.82rem] pt-3.5",
+                              collapseEnvironments &&
+                                index === visibleEnvs.length - 1 &&
+                                "overflow-clip"
+                            )}
                           >
-                            {name}
+                            <div
-                          </button>
+                              className={twMerge(
-                          {missingKeyCount > 0 && (
+                                "border-mineshaft-600",
-                            <Tooltip
+                                collapseEnvironments
-                              className="max-w-none lowercase"
+                                  ? "ml-[0.85rem] h-24 -skew-x-[16rad] transform border-l text-xs"
-                              content={`${missingKeyCount} secrets missing\n compared to other environments`}
+                                  : "flex items-center justify-center"
+                              )}
+                            />
+                            <button
+                              type="button"
+                              className={twMerge(
+                                "duration-100 hover:text-mineshaft-100",
+                                collapseEnvironments &&
+                                  (index === visibleEnvs.length - 1
+                                    ? "bottom-[1.75rem] w-14"
+                                    : "bottom-10 w-20"),
+                                collapseEnvironments
+                                  ? "absolute -rotate-[72.25deg] text-left !text-[12px] font-normal"
+                                  : "flex items-center text-center text-sm font-medium"
+                              )}
+                              onClick={() => handleExploreEnvClick(slug)}
                             >
-                              <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">
+                              <p className="truncate font-medium">{name}</p>
-                                <span className="text-bunker-100">{missingKeyCount}</span>
+                            </button>
-                              </div>
+                            {!collapseEnvironments && missingKeyCount > 0 && (
-                            </Tooltip>
+                              <Tooltip
-                          )}
+                                className="max-w-none lowercase"
-                        </div>
+                                content={`${missingKeyCount} secrets missing\n compared to other environments`}
+                              >
+                                <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>
+                            )}
+                          </div>
+                        </Tooltip>
                       </Th>
                     );
                   })}
@@ -1409,16 +1506,40 @@ export const OverviewPage = () => {
                     />
                   </Td>
                   {visibleEnvs?.map(({ name, slug }) => (
-                    <Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
+                    <Td
-                      <div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
+                      key={`explore-${name}-btn`}
-                        <Button
+                      className="border-0 border-r border-mineshaft-600 p-0"
-                          size="xs"
+                    >
-                          variant="outline_bg"
+                      <div
-                          isFullWidth
+                        className={twMerge(
-                          onClick={() => handleExploreEnvClick(slug)}
+                          "flex w-full items-center justify-center border-t border-mineshaft-600 py-2"
-                        >
+                        )}
-                          Explore
+                      >
-                        </Button>
+                        {collapseEnvironments ? (
+                          <Tooltip className="normal-case" content="Explore Environment">
+                            <IconButton
+                              ariaLabel="Explore Environment"
+                              size="xs"
+                              variant="outline_bg"
+                              className="mx-auto h-[1.76rem] rounded"
+                              onClick={() => handleExploreEnvClick(slug)}
+                            >
+                              <FontAwesomeIcon icon={faArrowRightToBracket} />
+                            </IconButton>
+                          </Tooltip>
+                        ) : (
+                          <Button
+                            leftIcon={
+                              <FontAwesomeIcon className="mr-1" icon={faArrowRightToBracket} />
+                            }
+                            variant="outline_bg"
+                            size="xs"
+                            className="mx-2 w-full"
+                            onClick={() => handleExploreEnvClick(slug)}
+                          >
+                            Explore
+                          </Button>
+                        )}
                       </div>
                     </Td>
                   ))}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewDynamicSecretRow/SecretOverviewDynamicSecretRow.tsx

@@ -36,7 +36,7 @@ export const SecretOverviewDynamicSecretRow = ({
               isPresent ? "text-green-600" : "text-red-600"
             )}
           >
-            <div className="flex justify-center">
+            <div className="mx-auto flex w-[0.03rem] justify-center">
               <FontAwesomeIcon
                 // eslint-disable-next-line no-nested-ternary
                 icon={isPresent ? faCheck : faXmark}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx

@@ -70,7 +70,7 @@ export const SecretOverviewFolderRow = ({
               isPresent ? "text-green-600" : "text-red-600"
             )}
           >
-            <div className="flex justify-center">
+            <div className="mx-auto flex w-[0.03rem] justify-center">
               <FontAwesomeIcon
                 // eslint-disable-next-line no-nested-ternary
                 icon={isPresent ? faCheck : faXmark}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewSecretRotationRow.tsx

@@ -94,7 +94,7 @@ export const SecretOverviewSecretRotationRow = ({
                 isPresent ? "text-green-600" : "text-red-600"
               )}
             >
-              <div className="flex justify-center">
+              <div className="mx-auto flex w-[0.03rem] justify-center">
                 <FontAwesomeIcon
                   // eslint-disable-next-line no-nested-ternary
                   icon={isPresent ? faCheck : faXmark}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -1,8 +1,8 @@
 import { subject } from "@casl/ability";
-import { faCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
   faCheck,
+  faCircle,
   faCodeBranch,
   faEye,
   faEyeSlash,
@@ -145,14 +145,14 @@ export const SecretOverviewTableRow = ({
             <Td
               key={`sec-overview-${slug}-${i + 1}-value`}
               className={twMerge(
-                "px-0 py-0 group-hover:bg-mineshaft-700",
+                "border-r border-mineshaft-600 px-0 py-3 group-hover:bg-mineshaft-700",
                 isFormExpanded && "border-t-2 border-mineshaft-500",
                 (isSecretPresent && !isSecretEmpty) || isSecretImported ? "text-green-600" : "",
                 isSecretPresent && isSecretEmpty && !isSecretImported ? "text-yellow" : "",
                 !isSecretPresent && !isSecretEmpty && !isSecretImported ? "text-red-600" : ""
               )}
             >
-              <div className="h-full w-full border-r border-mineshaft-600 px-5 py-[0.85rem]">
+              <div className="mx-auto flex w-[0.03rem] justify-center">
                 <div className="flex justify-center">
                   {!isSecretEmpty && (
                     <Tooltip