Merge pull request #4426 from Infisical/secret-dashboard-update

improvement(frontend): Remove secret overview page and re-vamp secret dashboard

backend/src/server/routes/v1/dashboard-router.ts

@@ -703,6 +703,9 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
       // prevent older projects from accessing endpoint
       if (!shouldUseSecretV2Bridge) throw new BadRequestError({ message: "Project version not supported" });
 
+      // verify folder exists and user has project permission
+      await server.services.folder.getFolderByPath({ projectId, environment, secretPath }, req.permission);
+
       const tags = req.query.tags?.split(",") ?? [];
 
       let remainingLimit = limit;

backend/src/services/secret-folder/secret-folder-service.ts

@@ -30,6 +30,7 @@ import {
   TDeleteFolderDTO,
   TDeleteManyFoldersDTO,
   TGetFolderByIdDTO,
+  TGetFolderByPathDTO,
   TGetFolderDTO,
   TGetFoldersDeepByEnvsDTO,
   TUpdateFolderDTO,
@@ -1398,6 +1399,31 @@ export const secretFolderServiceFactory = ({
     };
   };
 
+  const getFolderByPath = async (
+    { projectId, environment, secretPath }: TGetFolderByPathDTO,
+    actor: OrgServiceActor
+  ) => {
+    // folder check is allowed to be read by anyone
+    // permission is to check if user has access
+    await permissionService.getProjectPermission({
+      actor: actor.type,
+      actorId: actor.id,
+      projectId,
+      actorAuthMethod: actor.authMethod,
+      actorOrgId: actor.orgId,
+      actionProjectType: ActionProjectType.SecretManager
+    });
+
+    const folder = await folderDAL.findBySecretPath(projectId, environment, secretPath);
+
+    if (!folder)
+      throw new NotFoundError({
+        message: `Could not find folder with path "${secretPath}" in environment "${environment}" for project with ID "${projectId}"`
+      });
+
+    return folder;
+  };
+
   return {
     createFolder,
     updateFolder,
@@ -1405,6 +1431,7 @@ export const secretFolderServiceFactory = ({
     deleteFolder,
     getFolders,
     getFolderById,
+    getFolderByPath,
     getProjectFolderCount,
     getFoldersMultiEnv,
     getFoldersDeepByEnvs,

backend/src/services/secret-folder/secret-folder-types.ts

@@ -91,3 +91,9 @@ export type TDeleteManyFoldersDTO = {
     idOrName: string;
   }>;
 };
+
+export type TGetFolderByPathDTO = {
+  projectId: string;
+  environment: string;
+  secretPath: string;
+};

frontend/src/components/projects/NewProjectModal.tsx

@@ -153,7 +153,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
       reset();
       onOpenChange(false);
       navigate({
-        to: getProjectHomePage(project.type),
+        to: getProjectHomePage(project.type, project.environments),
         params: { projectId: project.id }
       });
     } catch (err) {

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

@@ -10,6 +10,7 @@ type Props = {
   children?: ReactNode;
   icon?: IconDefinition;
   iconSize?: SizeProp;
+  titleClassName?: string;
 };
 
 export const EmptyState = ({
@@ -17,7 +18,8 @@ export const EmptyState = ({
   className,
   children,
   icon = faCubesStacked,
-  iconSize = "2x"
+  iconSize = "2x",
+  titleClassName
 }: Props) => (
   <div
     className={twMerge(
@@ -27,7 +29,7 @@ export const EmptyState = ({
   >
     <FontAwesomeIcon icon={icon} size={iconSize} />
     <div className="flex flex-col items-center py-4">
-      <div className="text-sm text-bunker-300">{title}</div>
+      <div className={twMerge("text-sm text-bunker-300", titleClassName)}>{title}</div>
       <div>{children}</div>
     </div>
   </div>

frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx

@@ -67,7 +67,7 @@ export const FilterableSelect = <T,>({
         }),
         menuPortal: (provided) => ({
           ...provided,
-          zIndex: 9999
+          zIndex: 99999
         })
       }}
       tabSelectsValue={tabSelectsValue}

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

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode, TdHTMLAttributes } from "react";
+import { DetailedHTMLProps, forwardRef, HTMLAttributes, ReactNode, TdHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { Skeleton } from "../Skeleton";
@@ -9,22 +9,20 @@ export type TableContainerProps = {
   className?: string;
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
-export const TableContainer = ({
+export const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(
-  children,
+  ({ children, className, isRounded = true, ...props }, ref): JSX.Element => (
-  className,
+    <div
-  isRounded = true,
+      ref={ref}
-  ...props
+      className={twMerge(
-}: TableContainerProps): JSX.Element => (
+        "relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter",
-  <div
+        isRounded && "rounded-lg",
-    className={twMerge(
+        className
-      "relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter",
+      )}
-      isRounded && "rounded-lg",
+      {...props}
-      className
+    >
-    )}
+      {children}
-    {...props}
+    </div>
-  >
+  )
-    {children}
-  </div>
 );
 
 // main parent table

frontend/src/helpers/project.ts

@@ -1,6 +1,6 @@
 import { apiRequest } from "@app/config/request";
 import { createWorkspace } from "@app/hooks/api/workspace/queries";
-import { ProjectType } from "@app/hooks/api/workspace/types";
+import { ProjectType, WorkspaceEnv } from "@app/hooks/api/workspace/types";
 
 const secretsToBeAdded = [
   {
@@ -72,9 +72,12 @@ export const getProjectBaseURL = (type: ProjectType) => {
   }
 };
 
-export const getProjectHomePage = (type: ProjectType) => {
+export const getProjectHomePage = (type: ProjectType, environments: WorkspaceEnv[]) => {
   switch (type) {
     case ProjectType.SecretManager:
+      if (environments.length > 0)
+        return `/projects/secret-management/$projectId/secrets/${environments[0].slug}`;
+
       return "/projects/secret-management/$projectId/overview";
     case ProjectType.CertificateManager:
       return "/projects/cert-management/$projectId/subscribers";

frontend/src/hooks/api/dashboard/queries.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 
 import { apiRequest } from "@app/config/request";
 import {
@@ -273,6 +274,12 @@ export const useGetProjectSecretsDetails = (
     ...options,
     // wait for all values to be available
     enabled: Boolean(projectId) && (options?.enabled ?? true),
+    retry: (count, error) => {
+      // don't retry 404s
+      if (error instanceof AxiosError && error.status === 404) return false;
+
+      return count <= 5;
+    },
     queryKey: dashboardKeys.getProjectSecretsDetails({
       secretPath,
       search,

frontend/src/hooks/api/dashboard/types.ts

@@ -72,7 +72,7 @@ export type DashboardProjectSecretsOverview = Omit<
   DashboardProjectSecretsOverviewResponse,
   "secrets" | "secretRotations"
 > & {
-  secrets?: SecretV3RawSanitized[];
+  secrets?: (SecretV3RawSanitized & { sourceEnv?: string })[];
   secretRotations?: (TSecretRotationV2 & {
     secrets: (SecretV3RawSanitized | null)[];
   })[];

frontend/src/hooks/api/workspace/queries.tsx

@@ -47,7 +47,8 @@ import {
   UpdateEnvironmentDTO,
   UpdatePitVersionLimitDTO,
   UpdateProjectDTO,
-  Workspace
+  Workspace,
+  WorkspaceEnv
 } from "./types";
 
 export const fetchWorkspaceById = async (workspaceId: string) => {
@@ -396,12 +397,16 @@ export const useDeleteWorkspace = () => {
 export const useCreateWsEnvironment = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<object, object, CreateEnvironmentDTO>({
+  return useMutation<WorkspaceEnv, WorkspaceEnv, CreateEnvironmentDTO>({
-    mutationFn: ({ workspaceId, name, slug }) => {
+    mutationFn: async ({ workspaceId, name, slug }) => {
-      return apiRequest.post(`/api/v1/workspace/${workspaceId}/environments`, {
+      const { data } = await apiRequest.post<{ environment: WorkspaceEnv }>(
-        name,
+        `/api/v1/workspace/${workspaceId}/environments`,
-        slug
+        {
-      });
+          name,
+          slug
+        }
+      );
+      return data.environment;
     },
     onSuccess: () => {
       queryClient.invalidateQueries({

frontend/src/hooks/useResizableColWidth.tsx

@@ -1,12 +1,13 @@
-import { MouseEvent, useCallback, useEffect, useRef, useState } from "react";
+import { MouseEvent, RefObject, useCallback, useEffect, useRef, useState } from "react";
 
 type Params = {
   minWidth: number;
   maxWidth: number;
   initialWidth: number;
+  ref: RefObject<HTMLTableElement>;
 };
 
-export const useResizableColWidth = ({ minWidth, maxWidth, initialWidth }: Params) => {
+export const useResizableColWidth = ({ minWidth, maxWidth, initialWidth, ref }: Params) => {
   const [colWidth, setColWidth] = useState(initialWidth);
   const [isResizing, setIsResizing] = useState(false);
   const startX = useRef(0);
@@ -63,6 +64,28 @@ export const useResizableColWidth = ({ minWidth, maxWidth, initialWidth }: Param
     };
   }, [isResizing, handleMouseMove, handleMouseUp]);
 
+  useEffect(() => {
+    const element = ref?.current;
+    if (!element) return;
+
+    const handleResize = () => {
+      if (colWidth > maxWidth) {
+        setColWidth(Math.max(maxWidth, minWidth));
+      } else if (ref.current?.clientWidth && colWidth > ref.current.clientWidth * 0.9) {
+        // this else is a fallback to ensure col is always visible
+        setColWidth(initialWidth);
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(element);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [ref, maxWidth, colWidth]);
+
   return {
     colWidth,
     handleMouseDown,

frontend/src/hooks/utils/secrets-overview.tsx

@@ -130,7 +130,11 @@ export const useSecretOverview = (secrets: DashboardProjectSecretsOverview["secr
 
   const getEnvSecretKeyCount = useCallback(
     (env: string) => {
-      return secrets?.filter((secret) => secret.env === env).length ?? 0;
+      return (
+        secrets?.filter((secret) =>
+          secret.sourceEnv ? secret.sourceEnv === env : secret.env === env
+        ).length ?? 0
+      );
     },
     [secrets]
   );

frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/AssumePrivilegeModeBanner.tsx

@@ -36,7 +36,10 @@ export const AssumePrivilegeModeBanner = () => {
               },
               {
                 onSuccess: () => {
-                  const url = getProjectHomePage(currentWorkspace.type);
+                  const url = getProjectHomePage(
+                    currentWorkspace.type,
+                    currentWorkspace.environments
+                  );
                   window.location.href = url.replace("$projectId", currentWorkspace.id);
                 }
               }

frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx

@@ -101,7 +101,7 @@ export const ProjectSelect = () => {
     <div className="-mr-2 flex w-full items-center gap-1">
       <DropdownMenu modal={false}>
         <Link
-          to={getProjectHomePage(currentWorkspace.type)}
+          to={getProjectHomePage(currentWorkspace.type, currentWorkspace.environments)}
           params={{
             projectId: currentWorkspace.id
           }}
@@ -158,7 +158,7 @@ export const ProjectSelect = () => {
                       // to reproduce change this back to router.push and switch between two projects with different env count
                       // look into this on dashboard revamp
                       const url = linkOptions({
-                        to: getProjectHomePage(workspace.type),
+                        to: getProjectHomePage(workspace.type, workspace.environments),
                         params: {
                           projectId: workspace.id
                         }

frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx

@@ -11,7 +11,7 @@ import {
   faVault
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet } from "@tanstack/react-router";
+import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
 import { Badge, Lottie, Menu, MenuGroup, MenuItem } from "@app/components/v2";
@@ -31,6 +31,7 @@ export const SecretManagerLayout = () => {
   const { t } = useTranslation();
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
+  const location = useLocation();
 
   const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({
     workspaceId
@@ -71,13 +72,27 @@ export const SecretManagerLayout = () => {
                 <Menu>
                   <MenuGroup title="Resources">
                     <Link
-                      to="/projects/secret-management/$projectId/overview"
+                      to={
+                        currentWorkspace.environments.length
+                          ? "/projects/secret-management/$projectId/secrets/$envSlug"
+                          : "/projects/secret-management/$projectId/overview"
+                      }
                       params={{
-                        projectId: currentWorkspace.id
+                        projectId: currentWorkspace.id,
+                        ...(currentWorkspace.environments.length
+                          ? { envSlug: currentWorkspace.environments[0]?.slug }
+                          : {})
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem
+                          isSelected={
+                            isActive ||
+                            location.pathname.startsWith(
+                              `/projects/secret-management/${currentWorkspace.id}/secrets`
+                            )
+                          }
+                        >
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faVault} />

frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx

@@ -48,7 +48,7 @@ import {
   useRequestProjectAccess,
   useSearchProjects
 } from "@app/hooks/api";
-import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import { ProjectType, Workspace, WorkspaceEnv } from "@app/hooks/api/workspace/types";
 import {
   ProjectListToggle,
   ProjectListView
@@ -152,13 +152,17 @@ export const AllProjectView = ({
     type: projectTypeFilter
   });
 
-  const handleAccessProject = async (type: ProjectType, projectId: string) => {
+  const handleAccessProject = async (
+    type: ProjectType,
+    projectId: string,
+    environments: WorkspaceEnv[]
+  ) => {
     try {
       await orgAdminAccessProject.mutateAsync({
         projectId
       });
       await navigate({
-        to: getProjectHomePage(type),
+        to: getProjectHomePage(type, environments),
         params: {
           projectId
         }
@@ -315,7 +319,7 @@ export const AllProjectView = ({
               onKeyDown={(evt) => {
                 if (evt.key === "Enter" && workspace.isMember) {
                   navigate({
-                    to: getProjectHomePage(workspace.type),
+                    to: getProjectHomePage(workspace.type, workspace.environments),
                     params: {
                       projectId: workspace.id
                     }
@@ -325,7 +329,7 @@ export const AllProjectView = ({
               onClick={() => {
                 if (workspace.isMember) {
                   navigate({
-                    to: getProjectHomePage(workspace.type),
+                    to: getProjectHomePage(workspace.type, workspace.environments),
                     params: {
                       projectId: workspace.id
                     }
@@ -371,7 +375,7 @@ export const AllProjectView = ({
                         onClick={(e) => {
                           e.stopPropagation();
                           e.preventDefault();
-                          handleAccessProject(workspace.type, workspace.id);
+                          handleAccessProject(workspace.type, workspace.id, workspace.environments);
                         }}
                         disabled={
                           orgAdminAccessProject.variables?.projectId === workspace.id &&

frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx

@@ -193,7 +193,7 @@ export const MyProjectView = ({
     <div
       onClick={() => {
         navigate({
-          to: getProjectHomePage(workspace.type),
+          to: getProjectHomePage(workspace.type, workspace.environments),
           params: {
             projectId: workspace.id
           }
@@ -247,7 +247,7 @@ export const MyProjectView = ({
     <div
       onClick={() => {
         navigate({
-          to: getProjectHomePage(workspace.type),
+          to: getProjectHomePage(workspace.type, workspace.environments),
           params: {
             projectId: workspace.id
           }

frontend/src/pages/project/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersTable.tsx

@@ -136,7 +136,7 @@ export const GroupMembersTable = ({ groupMembership }: Props) => {
             text: "User privilege assumption has started"
           });
 
-          const url = getProjectHomePage(currentWorkspace.type);
+          const url = getProjectHomePage(currentWorkspace.type, currentWorkspace.environments);
           window.location.href = url.replace("$projectId", currentWorkspace.id);
         }
       }

frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -67,7 +67,7 @@ const Page = () => {
             type: "success",
             text: "Identity privilege assumption has started"
           });
-          const url = getProjectHomePage(currentWorkspace.type);
+          const url = getProjectHomePage(currentWorkspace.type, currentWorkspace.environments);
           window.location.href = url.replace("$projectId", currentWorkspace.id);
         }
       }

frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx

@@ -72,7 +72,7 @@ export const Page = () => {
             text: "User privilege assumption has started"
           });
 
-          const url = getProjectHomePage(currentWorkspace.type);
+          const url = getProjectHomePage(currentWorkspace.type, currentWorkspace.environments);
           window.location.href = url.replace("$projectId", currentWorkspace.id);
         }
       }

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

@@ -52,6 +52,7 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
 import { useCreateCommit } from "@app/hooks/api/secrets/mutations";
 import { SecretV3RawSanitized } from "@app/hooks/api/types";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
 import { usePathAccessPolicies } from "@app/hooks/usePathAccessPolicies";
 import { useResizableColWidth } from "@app/hooks/useResizableColWidth";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
@@ -64,6 +65,8 @@ import { ActionBar } from "./components/ActionBar";
 import { CommitForm } from "./components/CommitForm";
 import { CreateSecretForm } from "./components/CreateSecretForm";
 import { DynamicSecretListView } from "./components/DynamicSecretListView";
+import { EnvironmentTabs } from "./components/EnvironmentTabs";
+import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
 import { FolderListView } from "./components/FolderListView";
 import { PitDrawer } from "./components/PitDrawer";
 import { SecretDropzone } from "./components/SecretDropzone";
@@ -105,7 +108,7 @@ const Page = () => {
   const { permission } = useProjectPermission();
   const { mutateAsync: createCommit } = useCreateCommit();
 
-  const tableRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
 
   const [isVisible, setIsVisible] = useState(false);
   const { isBatchMode, pendingChanges } = useBatchMode();
@@ -249,7 +252,8 @@ const Page = () => {
   const {
     data,
     isPending: isDetailsLoading,
-    isFetching: isDetailsFetching
+    isFetching: isDetailsFetching,
+    isFetched
   } = useGetProjectSecretsDetails({
     environment,
     projectId: workspaceId,
@@ -270,6 +274,18 @@ const Page = () => {
     tags: filter.tags
   });
 
+  useEffect(() => {
+    // if switching tabs in a folder path that doesn't exist in a separate env we navigate to the root
+    if (!data && isFetched) {
+      navigate({
+        search: (prev) => ({
+          ...prev,
+          secretPath: "/"
+        })
+      });
+    }
+  }, [data, isFetched]);
+
   const {
     imports,
     folders,
@@ -491,7 +507,8 @@ const Page = () => {
     minWidth: 100,
     maxWidth: tableRef.current
       ? tableRef.current.clientWidth - 148 // ensure value column can't collapse completely
-      : 800
+      : 800,
+    ref: tableRef
   });
 
   useEffect(() => {
@@ -710,12 +727,18 @@ const Page = () => {
 
   const mergedSecrets = getMergedSecretsWithPending();
   const mergedFolders = getMergedFoldersWithPending();
+
+  if (!(currentWorkspace?.version === ProjectVersion.V3))
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+        <SecretV2MigrationSection />
+      </div>
+    );
+
   return (
     <div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:[color-scheme:dark]">
       <PageHeader
-        title={
+        title="Secrets Management"
-          currentWorkspace.environments.find((env) => env.slug === environment)?.name ?? environment
-        }
         description={
           <p className="text-md text-bunker-300">
             Inject your secrets using
@@ -759,6 +782,8 @@ const Page = () => {
         }
       />
       <SecretV2MigrationSection />
+      <FolderBreadCrumbs secretPath={secretPath} />
+      <EnvironmentTabs secretPath={secretPath} />
       {!isRollbackMode ? (
         <>
           <ActionBar
@@ -938,6 +963,7 @@ const Page = () => {
                   workspaceId={workspaceId}
                   secretPath={secretPath}
                   onNavigateToFolder={handleResetFilter}
+                  canNavigate={isFetched}
                 />
               )}
               {canReadDynamicSecret && Boolean(dynamicSecrets?.length) && (

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/CompareEnvironments.tsx

@@ -0,0 +1,595 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { MultiValue } from "react-select";
+import {
+  faArrowDown,
+  faArrowUp,
+  faCheckCircle,
+  faFilter,
+  faFingerprint,
+  faFolder,
+  faKey,
+  faRotate,
+  faSearch,
+  faWarning
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  EmptyState,
+  FilterableSelect,
+  FormLabel,
+  IconButton,
+  Input,
+  Lottie,
+  Pagination,
+  Table,
+  TableContainer,
+  TBody,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { useDebounce, usePagination, useResetPageHelper } from "@app/hooks";
+import { useGetImportedSecretsAllEnvs } from "@app/hooks/api";
+import { useGetProjectSecretsOverview } from "@app/hooks/api/dashboard";
+import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
+import { useResizableColWidth } from "@app/hooks/useResizableColWidth";
+import {
+  useDynamicSecretOverview,
+  useFolderOverview,
+  useSecretOverview,
+  useSecretRotationOverview
+} from "@app/hooks/utils";
+import { SecretTableResourceCount } from "@app/pages/secret-manager/OverviewPage/components/SecretTableResourceCount";
+
+import { DynamicSecretRow } from "./components/DynamicSecretRow";
+import { FolderRow } from "./components/FolderRow";
+import { SecretRotationRow } from "./components/SecretRotationRow";
+import { SecretNoAccessRow, SecretRow } from "./components/SecretRow";
+
+type Props = {
+  secretPath: string;
+};
+
+enum RowType {
+  Folder = "folder",
+  DynamicSecret = "dynamic",
+  Secret = "secret",
+  SecretRotation = "rotation"
+}
+
+type Filter = {
+  [key in RowType]: boolean;
+};
+
+const DEFAULT_FILTER_STATE = {
+  [RowType.Folder]: false,
+  [RowType.DynamicSecret]: false,
+  [RowType.Secret]: false,
+  [RowType.SecretRotation]: false
+};
+
+const COL_WIDTH_OFFSET = 220;
+
+export const CompareEnvironments = ({ secretPath }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const compareEnvironmentsKey = `compare-environments-${currentWorkspace.id}`;
+
+  const [selectedEnvironments, setSelectedEnvironments] = useState<WorkspaceEnv[]>(() => {
+    try {
+      const storedEnvironments = JSON.parse(localStorage.getItem(compareEnvironmentsKey) ?? "[]");
+
+      if (Array.isArray(storedEnvironments) && storedEnvironments.length > 0) {
+        const potentialEnvs: string[] = [];
+        storedEnvironments.forEach((env) => {
+          if (typeof env === "string") {
+            potentialEnvs.push(env);
+          }
+        });
+
+        return currentWorkspace.environments.filter((env) => potentialEnvs.includes(env.id));
+      }
+    } catch {
+      // do nothing and proceed
+    }
+    return currentWorkspace.environments.slice(0, 2);
+  });
+
+  const [filter, setFilter] = useState<Filter>(DEFAULT_FILTER_STATE);
+
+  const {
+    offset,
+    limit,
+    orderDirection,
+    setOrderDirection,
+    setPage,
+    perPage,
+    page,
+    setPerPage,
+    orderBy
+  } = usePagination<DashboardSecretsOrderBy>(DashboardSecretsOrderBy.Name, {
+    initPerPage: getUserTablePreference("secretCompareTable", PreferenceKey.PerPage, 50)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("secretCompareTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const workspaceId = currentWorkspace.id;
+  const [searchFilter, setSearchFilter] = useState("");
+  const [debouncedSearchFilter] = useDebounce(searchFilter);
+  const [debouncedSelectedEnvironments] = useDebounce(selectedEnvironments);
+
+  useEffect(() => {
+    localStorage.setItem(
+      compareEnvironmentsKey,
+      JSON.stringify(selectedEnvironments.map((env) => env.id))
+    );
+  }, [debouncedSelectedEnvironments]);
+
+  const {
+    secretImports,
+    isImportedSecretPresentInEnv,
+    getImportedSecretByKey,
+    getEnvImportedSecretKeyCount
+  } = useGetImportedSecretsAllEnvs({
+    projectId: workspaceId,
+    path: secretPath,
+    environments: (currentWorkspace.environments || []).map(({ slug }) => slug)
+  });
+
+  const compareEnvironments = selectedEnvironments.length
+    ? selectedEnvironments
+    : currentWorkspace.environments;
+
+  const isFilteredByResources = Object.values(filter).some(Boolean);
+  const { isPending: isOverviewLoading, data: overview } = useGetProjectSecretsOverview(
+    {
+      projectId: workspaceId,
+      environments: compareEnvironments.map((env) => env.slug),
+      secretPath,
+      orderDirection,
+      orderBy,
+      includeFolders: isFilteredByResources ? filter.folder : true,
+      includeDynamicSecrets: isFilteredByResources ? filter.dynamic : true,
+      includeSecrets: isFilteredByResources ? filter.secret : true,
+      includeImports: true,
+      includeSecretRotations: isFilteredByResources ? filter.rotation : true,
+      search: debouncedSearchFilter,
+      limit,
+      offset
+    },
+    { enabled: Boolean(compareEnvironments.length) }
+  );
+
+  const {
+    secrets,
+    folders,
+    dynamicSecrets,
+    secretRotations,
+    totalFolderCount,
+    totalSecretCount,
+    totalDynamicSecretCount,
+    totalSecretRotationCount,
+    totalCount = 0,
+    totalUniqueFoldersInPage,
+    totalUniqueSecretsInPage,
+    totalUniqueSecretImportsInPage,
+    totalUniqueDynamicSecretsInPage,
+    totalUniqueSecretRotationsInPage
+  } = overview ?? {};
+
+  const secretImportsShaped = secretImports
+    ?.flatMap(({ data }) => data)
+    .filter(Boolean)
+    .flatMap((item) => item?.secrets || []);
+
+  const handleIsImportedSecretPresentInEnv = (envSlug: string, secretName: string) => {
+    if (secrets?.some((s) => s.key === secretName && s.env === envSlug)) {
+      return false;
+    }
+    if (secretImportsShaped.some((s) => s.key === secretName && s.sourceEnv === envSlug)) {
+      return true;
+    }
+    return isImportedSecretPresentInEnv(envSlug, secretName);
+  };
+
+  useResetPageHelper({
+    totalCount,
+    offset,
+    setPage
+  });
+
+  const { folderNamesAndDescriptions, isFolderPresentInEnv } = useFolderOverview(folders);
+
+  const { dynamicSecretNames, isDynamicSecretPresentInEnv } =
+    useDynamicSecretOverview(dynamicSecrets);
+
+  const { secretRotationNames, isSecretRotationPresentInEnv, getSecretRotationByName } =
+    useSecretRotationOverview(secretRotations);
+
+  const { secKeys, getEnvSecretKeyCount } = useSecretOverview(
+    secrets?.concat(secretImportsShaped) || []
+  );
+
+  const getSecretByKey = useCallback(
+    (env: string, key: string) => {
+      const sec = secrets?.find((s) => s.env === env && s.key === key);
+      return sec;
+    },
+    [secrets]
+  );
+
+  const [tableWidth, setTableWidth] = useState(0);
+  const tableRef = useRef<HTMLTableElement>(null);
+
+  const { handleMouseDown, isResizing, colWidth } = useResizableColWidth({
+    initialWidth: 320,
+    minWidth: 160,
+    maxWidth: tableRef.current
+      ? tableRef.current.clientWidth - COL_WIDTH_OFFSET // ensure value column can't collapse completely
+      : 800,
+    ref: tableRef
+  });
+
+  const handleToggleRowType = useCallback(
+    (rowType: RowType) =>
+      setFilter((state) => {
+        return {
+          ...state,
+          [rowType]: !state[rowType]
+        };
+      }),
+    []
+  );
+
+  const isTableEmpty = totalCount === 0;
+
+  const isTableFiltered = isFilteredByResources;
+
+  useEffect(() => {
+    const element = tableRef.current;
+    if (!element) return;
+
+    const handleResize = () => {
+      setTableWidth(element.clientWidth - 1);
+    };
+
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(element);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [tableRef]);
+
+  return (
+    // scott: this is reverse to fix z-indexing bug of dropdown with sticky table cols; couldn't resolve with flex-col
+    <div className="flex flex-1 flex-col-reverse overflow-hidden">
+      {!isOverviewLoading && totalCount > 0 && (
+        <Pagination
+          startAdornment={
+            <SecretTableResourceCount
+              dynamicSecretCount={totalDynamicSecretCount}
+              secretCount={totalSecretCount}
+              folderCount={totalFolderCount}
+              secretRotationCount={totalSecretRotationCount}
+            />
+          }
+          className="rounded-b-lg border border-solid border-mineshaft-500 bg-mineshaft-700"
+          count={totalCount}
+          page={page}
+          perPage={perPage}
+          onChangePage={(newPage) => setPage(newPage)}
+          onChangePerPage={handlePerPageChange}
+        />
+      )}
+      <div className="thin-scrollbar flex flex-1 flex-col overflow-y-auto">
+        <TableContainer
+          ref={tableRef}
+          className={twMerge(
+            "mt-4 flex flex-1 flex-col border-mineshaft-500 bg-mineshaft-700",
+            !isTableEmpty && "rounded-b-none"
+          )}
+        >
+          {/* eslint-disable-next-line no-nested-ternary */}
+          {isOverviewLoading ? (
+            <div className="flex h-full flex-col items-center justify-center">
+              <Lottie
+                isAutoPlay
+                icon="infisical_loading"
+                className="h-10 place-self-center self-center"
+              />
+            </div>
+          ) : isTableEmpty ? (
+            <EmptyState
+              titleClassName="text-base"
+              className="m-auto bg-mineshaft-700 text-lg"
+              title={
+                isTableFiltered
+                  ? "No secrets to compare with current filters"
+                  : "No secrets to compare"
+              }
+            />
+          ) : (
+            <Table className="border-collapse bg-mineshaft-700">
+              <THead className="sticky top-0 z-20">
+                <Tr className="sticky top-0 z-20">
+                  <Th className="sticky left-0 z-10 border-none p-0" style={{ width: colWidth }}>
+                    <div className="relative">
+                      <div
+                        tabIndex={-1}
+                        role="button"
+                        className={`absolute -right-[0.02rem] z-40 h-full w-0.5 cursor-ew-resize hover:bg-blue-400/20 ${
+                          isResizing ? "bg-blue-400/75" : "bg-transparent"
+                        }`}
+                        onMouseDown={handleMouseDown}
+                      />
+                      <div className="pointer-events-none absolute -right-[0.02rem] top-[0.67rem] z-30">
+                        <div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
+                      </div>
+                      <div className="flex h-full items-center border-b-2 border-r border-mineshaft-500 bg-mineshaft-700 bg-clip-padding p-0 px-4 py-2.5 text-sm normal-case">
+                        Name
+                        <IconButton
+                          variant="plain"
+                          className="ml-1 mt-[0.1rem]"
+                          ariaLabel="sort"
+                          onClick={() =>
+                            setOrderDirection((prev) =>
+                              prev === OrderByDirection.ASC
+                                ? OrderByDirection.DESC
+                                : OrderByDirection.ASC
+                            )
+                          }
+                        >
+                          <FontAwesomeIcon
+                            className="h-3"
+                            icon={orderDirection === "asc" ? faArrowDown : faArrowUp}
+                          />
+                        </IconButton>
+                      </div>
+                    </div>
+                  </Th>
+                  {compareEnvironments?.map(({ name, slug }, index) => {
+                    const envSecKeyCount = getEnvSecretKeyCount(slug);
+                    const importedSecKeyCount = getEnvImportedSecretKeyCount(slug);
+                    const missingKeyCount = secKeys.length - envSecKeyCount - importedSecKeyCount;
+
+                    return (
+                      <Th
+                        className="whitespace-nowrap border-none p-0 text-center"
+                        key={`environment-${slug}`}
+                      >
+                        <div
+                          className={twMerge(
+                            "flex h-full w-full items-center justify-center gap-x-2 border-b-2 border-mineshaft-500 bg-mineshaft-700 p-0 px-4 py-2.5 text-center text-sm normal-case",
+                            index < compareEnvironments.length - 1 && "border-r"
+                          )}
+                        >
+                          {name}
+                          {missingKeyCount > 0 && (
+                            <Tooltip
+                              className="max-w-none lowercase"
+                              content={
+                                <>
+                                  {missingKeyCount} secret{missingKeyCount > 1 ? "s" : ""} missing
+                                  compared to other environments on this page
+                                </>
+                              }
+                            >
+                              <Badge
+                                variant="primary"
+                                className="-mt-[0.05rem] flex h-4 items-center gap-x-1 pt-[0.1rem] font-normal leading-3"
+                              >
+                                <FontAwesomeIcon icon={faWarning} className="-mt-[0.1rem] w-2.5" />
+                                {missingKeyCount}
+                              </Badge>
+                            </Tooltip>
+                          )}
+                        </div>
+                      </Th>
+                    );
+                  })}
+                </Tr>
+              </THead>
+              <TBody>
+                {folderNamesAndDescriptions.map(({ name: folderName }, index) => (
+                  <FolderRow
+                    folderName={folderName}
+                    isFolderPresentInEnv={isFolderPresentInEnv}
+                    environments={compareEnvironments}
+                    key={`overview-${folderName}-${index + 1}`}
+                    colWidth={colWidth}
+                  />
+                ))}
+                {dynamicSecretNames.map((dynamicSecretName, index) => (
+                  <DynamicSecretRow
+                    dynamicSecretName={dynamicSecretName}
+                    isDynamicSecretInEnv={isDynamicSecretPresentInEnv}
+                    environments={compareEnvironments}
+                    key={`overview-${dynamicSecretName}-${index + 1}`}
+                    colWidth={colWidth}
+                  />
+                ))}
+                {secretRotationNames.map((secretRotationName, index) => (
+                  <SecretRotationRow
+                    secretRotationName={secretRotationName}
+                    isSecretRotationInEnv={isSecretRotationPresentInEnv}
+                    environments={compareEnvironments}
+                    getSecretRotationByName={getSecretRotationByName}
+                    key={`overview-${secretRotationName}-${index + 1}`}
+                    colWidth={colWidth}
+                    tableWidth={tableWidth}
+                  />
+                ))}
+                {secKeys.map((key, index) => (
+                  <SecretRow
+                    colWidth={colWidth}
+                    secretPath={secretPath}
+                    getImportedSecretByKey={getImportedSecretByKey}
+                    isImportedSecretPresentInEnv={handleIsImportedSecretPresentInEnv}
+                    key={`overview-${key}-${index + 1}`}
+                    environments={compareEnvironments}
+                    secretKey={key}
+                    getSecretByKey={getSecretByKey}
+                    tableWidth={tableWidth}
+                  />
+                ))}
+                <SecretNoAccessRow
+                  colWidth={colWidth}
+                  environments={compareEnvironments}
+                  count={Math.max(
+                    (page * perPage > totalCount ? totalCount % perPage : perPage) -
+                      (totalUniqueFoldersInPage || 0) -
+                      (totalUniqueDynamicSecretsInPage || 0) -
+                      (totalUniqueSecretsInPage || 0) -
+                      (totalUniqueSecretImportsInPage || 0) -
+                      (totalUniqueSecretRotationsInPage || 0),
+                    0
+                  )}
+                />
+              </TBody>
+            </Table>
+          )}
+        </TableContainer>
+      </div>
+      <div className="mt-3 flex flex-row items-center justify-center space-x-2">
+        <Input
+          value={searchFilter}
+          onChange={(e) => setSearchFilter(e.target.value)}
+          className="h-full flex-1"
+          placeholder="Search by resource name..."
+          leftIcon={<FontAwesomeIcon icon={faSearch} />}
+          containerClassName="h-10"
+        />
+        {isTableFiltered && (
+          <Button
+            variant="plain"
+            colorSchema="secondary"
+            onClick={() => {
+              setFilter(DEFAULT_FILTER_STATE);
+            }}
+          >
+            Clear Filters
+          </Button>
+        )}
+        {compareEnvironments.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="sm"
+                variant="outline_bg"
+                className={twMerge(
+                  "flex h-[2.5rem]",
+                  isTableFiltered && "border-primary/40 bg-primary/10"
+                )}
+                leftIcon={
+                  <FontAwesomeIcon
+                    icon={faFilter}
+                    className={isTableFiltered ? "text-primary/80" : undefined}
+                  />
+                }
+              >
+                Filters
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="thin-scrollbar max-h-[70vh] overflow-y-auto"
+              align="end"
+              sideOffset={2}
+            >
+              <DropdownMenuLabel>Filter by Resource</DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleToggleRowType(RowType.Folder);
+                }}
+                icon={filter[RowType.Folder] && <FontAwesomeIcon icon={faCheckCircle} />}
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
+                  <span>Folders</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleToggleRowType(RowType.DynamicSecret);
+                }}
+                icon={filter[RowType.DynamicSecret] && <FontAwesomeIcon icon={faCheckCircle} />}
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" />
+                  <span>Dynamic Secrets</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleToggleRowType(RowType.SecretRotation);
+                }}
+                icon={filter[RowType.SecretRotation] && <FontAwesomeIcon icon={faCheckCircle} />}
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
+                  <span>Secret Rotations</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleToggleRowType(RowType.Secret);
+                }}
+                icon={filter[RowType.Secret] && <FontAwesomeIcon icon={faCheckCircle} />}
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faKey} className="text-bunker-300" />
+                  <span>Secrets</span>
+                </div>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+      <div className="!z-[99999999]">
+        <FormLabel label="Select Environments to Compare" />
+        <FilterableSelect
+          value={selectedEnvironments}
+          onChange={(value) => {
+            const selected = value as MultiValue<WorkspaceEnv>;
+
+            setSelectedEnvironments((selected as WorkspaceEnv[]) ?? []);
+          }}
+          placeholder="Leave blank to compare all environments"
+          options={currentWorkspace.environments}
+          getOptionValue={(option) => option.slug}
+          getOptionLabel={(option) => option.name}
+          isMulti
+        />
+      </div>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/DynamicSecretRow/DynamicSecretRow.tsx

@@ -0,0 +1,41 @@
+import { faFingerprint } from "@fortawesome/free-solid-svg-icons";
+
+import { Tr } from "@app/components/v2";
+
+import { EnvironmentStatusCell, ResourceNameCell } from "../shared";
+
+type Props = {
+  dynamicSecretName: string;
+  environments: { name: string; slug: string }[];
+  isDynamicSecretInEnv: (name: string, env: string) => boolean;
+  colWidth: number;
+};
+
+export const DynamicSecretRow = ({
+  dynamicSecretName,
+  environments = [],
+  isDynamicSecretInEnv,
+  colWidth
+}: Props) => {
+  return (
+    <Tr isHoverable className="group border-mineshaft-500">
+      <ResourceNameCell
+        label={dynamicSecretName}
+        icon={faFingerprint}
+        colWidth={colWidth}
+        iconClassName="text-yellow-700"
+      />
+      {environments.map(({ slug }, i) => {
+        const isPresent = isDynamicSecretInEnv(dynamicSecretName, slug);
+
+        return (
+          <EnvironmentStatusCell
+            isLast={i === environments.length - 1}
+            status={isPresent ? "present" : "missing"}
+            key={`dynamic-secret-${dynamicSecretName}-${i + 1}-value`}
+          />
+        );
+      })}
+    </Tr>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/DynamicSecretRow/index.tsx

@@ -0,0 +1 @@
+export { DynamicSecretRow } from "./DynamicSecretRow";

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/FolderRow/FolderRow.tsx

@@ -0,0 +1,41 @@
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+
+import { Tr } from "@app/components/v2";
+
+import { EnvironmentStatusCell, ResourceNameCell } from "../shared";
+
+type Props = {
+  folderName: string;
+  environments: { name: string; slug: string }[];
+  isFolderPresentInEnv: (name: string, env: string) => boolean;
+  colWidth: number;
+};
+
+export const FolderRow = ({
+  folderName,
+  environments = [],
+  isFolderPresentInEnv,
+  colWidth
+}: Props) => {
+  return (
+    <Tr isHoverable className="group border-mineshaft-500">
+      <ResourceNameCell
+        label={folderName}
+        icon={faFolder}
+        iconClassName="text-yellow-700"
+        colWidth={colWidth}
+      />
+      {environments.map(({ slug }, i) => {
+        const isPresent = isFolderPresentInEnv(folderName, slug);
+
+        return (
+          <EnvironmentStatusCell
+            isLast={i === environments.length - 1}
+            status={isPresent ? "present" : "missing"}
+            key={`folder-${slug}-${i + 1}-value`}
+          />
+        );
+      })}
+    </Tr>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/FolderRow/index.tsx

@@ -0,0 +1 @@
+export { FolderRow } from "./FolderRow";

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRotationRow/SecretRotationRow.tsx

@@ -0,0 +1,179 @@
+import { faEye, faEyeSlash, faInfoCircle, faRotate } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { IconButton, TableContainer, Tag, Td, Tooltip, Tr } from "@app/components/v2";
+import { Blur } from "@app/components/v2/Blur";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
+import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { useToggle } from "@app/hooks";
+import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+
+import { EnvironmentStatusCell, ResourceNameCell } from "../shared";
+
+type Props = {
+  secretRotationName: string;
+  environments: { name: string; slug: string }[];
+  isSecretRotationInEnv: (name: string, env: string) => boolean;
+  getSecretRotationByName: (slug: string, name: string) => TSecretRotationV2 | undefined;
+  colWidth: number;
+  tableWidth: number;
+};
+
+export const SecretRotationRow = ({
+  secretRotationName,
+  environments = [],
+  isSecretRotationInEnv,
+  colWidth,
+  getSecretRotationByName,
+  tableWidth
+}: Props) => {
+  const [isExpanded, setIsExpanded] = useToggle(false);
+  const [isSecretVisible, setIsSecretVisible] = useToggle();
+
+  const totalCols = environments.length + 1; // secret key row
+
+  return (
+    <>
+      <Tr isHoverable isSelectable onClick={setIsExpanded.toggle} className="group">
+        <ResourceNameCell
+          label={secretRotationName}
+          icon={faRotate}
+          colWidth={colWidth}
+          iconClassName="text-mineshaft-400"
+          isRowExpanded={isExpanded}
+        />
+        {environments.map(({ slug }, i) => {
+          const isPresent = isSecretRotationInEnv(secretRotationName, slug);
+
+          return (
+            <EnvironmentStatusCell
+              isLast={i === environments.length - 1}
+              status={isPresent ? "present" : "missing"}
+              key={`secret-rotation-${slug}-${i + 1}-value`}
+            />
+          );
+        })}
+      </Tr>
+      {isExpanded &&
+        environments.map(({ name: envName, slug }) => {
+          const secretRotation = getSecretRotationByName(slug, secretRotationName);
+
+          if (!secretRotation) return null;
+
+          const { type, secrets, description } = secretRotation;
+
+          const { name: rotationType, image } = SECRET_ROTATION_MAP[type];
+
+          return (
+            <Tr key={`secret-rotation-${slug}-${secretRotationName}`} className="border-b-0">
+              <Td
+                colSpan={totalCols}
+                style={{ minWidth: tableWidth, maxWidth: tableWidth }}
+                className="sticky left-0 bg-clip-padding px-0 py-0"
+              >
+                <div
+                  style={{ minWidth: tableWidth, maxWidth: tableWidth }}
+                  className="sticky left-0 bg-clip-padding px-0 py-0"
+                >
+                  <div className="flex !h-[40px] items-center justify-between gap-x-2 bg-mineshaft-800 px-4">
+                    <div className="w-full">
+                      <div className="flex w-full flex-wrap items-center gap-x-2.5">
+                        <span>{envName}</span>
+                        <Tag className="flex items-center gap-1 px-1.5 py-0 text-xs normal-case">
+                          <img
+                            src={`/images/integrations/${image}`}
+                            className="w-[11px]"
+                            alt={`${rotationType} logo`}
+                          />
+                          {rotationType}
+                        </Tag>
+                        {description && (
+                          <Tooltip content={description}>
+                            <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400" />
+                          </Tooltip>
+                        )}
+                      </div>
+                    </div>
+                    <Tooltip
+                      side="left"
+                      content={isSecretVisible ? "Hide Values" : "Reveal Values"}
+                    >
+                      <IconButton
+                        variant="plain"
+                        colorSchema="secondary"
+                        ariaLabel={isSecretVisible ? "Hide Values" : "Reveal Values"}
+                        onClick={() => setIsSecretVisible.toggle()}
+                      >
+                        <FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />
+                      </IconButton>
+                    </Tooltip>
+                  </div>
+                  <TableContainer className="rounded-none border-0">
+                    <table className="secret-table w-full border-b-0 !bg-mineshaft-900">
+                      <tbody className="!last:border-b-0 w-full border-t-2 border-mineshaft-600">
+                        {secrets.map((secret, index) => {
+                          return (
+                            <Tooltip
+                              className="max-w-sm"
+                              content={
+                                secret
+                                  ? undefined
+                                  : "You do not have permission to view this secret."
+                              }
+                              // eslint-disable-next-line react/no-array-index-key
+                              key={`rotation-secret-${secretRotation.id}-${index}`}
+                            >
+                              <tr className="hover:bg-mineshaft-800/50">
+                                <td
+                                  style={{
+                                    width: colWidth
+                                  }}
+                                  className="!h-[1px] border-none !p-0"
+                                >
+                                  <div
+                                    className="flex h-full flex-1 items-center border-r border-mineshaft-500 px-4 py-1"
+                                    style={{
+                                      width: colWidth
+                                    }}
+                                  >
+                                    <span className={twMerge(!secret && "blur", "truncate")}>
+                                      {secret?.key ?? "********"}
+                                    </span>
+                                  </div>
+                                </td>
+                                <td className="!h-[40px] !px-4">
+                                  {/* eslint-disable-next-line no-nested-ternary */}
+                                  {!secret ? (
+                                    <div className="h-full pl-4 blur">********</div>
+                                  ) : secret.secretValueHidden ? (
+                                    <Blur
+                                      className="py-0"
+                                      tooltipText="You do not have permission to read the value of this secret."
+                                    />
+                                  ) : (
+                                    <InfisicalSecretInput
+                                      isReadOnly
+                                      value={secret.value}
+                                      isVisible={isSecretVisible}
+                                      secretPath={secretRotation.folder.path}
+                                      environment={secretRotation.environment.slug}
+                                      onChange={() => {}}
+                                    />
+                                  )}
+                                </td>
+                              </tr>
+                            </Tooltip>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </TableContainer>
+                </div>
+              </Td>
+            </Tr>
+          );
+        })}
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRotationRow/index.tsx

@@ -0,0 +1 @@
+export { SecretRotationRow } from "./SecretRotationRow";

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/EnvironmentSecretRow.tsx

@@ -0,0 +1,49 @@
+import { faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Tooltip } from "@app/components/v2";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
+
+type Props = {
+  defaultValue?: string | null;
+  isOverride?: boolean;
+  isVisible?: boolean;
+  isImportedSecret: boolean;
+  environment: string;
+  secretValueHidden: boolean;
+  secretPath: string;
+};
+
+export const EnvironmentSecretRow = ({
+  defaultValue,
+  isOverride,
+  isImportedSecret,
+  secretValueHidden,
+  environment,
+  secretPath,
+  isVisible
+}: Props) => {
+  return (
+    <div className="group flex w-full cursor-text items-center space-x-2">
+      {secretValueHidden && !isOverride && (
+        <Tooltip content="You do not have access to view the current value">
+          <FontAwesomeIcon className="pl-2" size="sm" icon={faEyeSlash} />
+        </Tooltip>
+      )}
+      <div className="flex-1 pl-3 pr-2">
+        <InfisicalSecretInput
+          onChange={() => {}}
+          isReadOnly
+          value={defaultValue as string}
+          key="secret-input"
+          isVisible={isVisible && !secretValueHidden}
+          secretPath={secretPath}
+          environment={environment}
+          isImport={isImportedSecret}
+          defaultValue={secretValueHidden ? "" : undefined}
+          canEditButNotView={secretValueHidden && !isOverride}
+        />
+      </div>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretNoAccessRow.tsx

@@ -0,0 +1,44 @@
+import { faLock } from "@fortawesome/free-solid-svg-icons";
+
+import { Tr } from "@app/components/v2";
+import { Blur } from "@app/components/v2/Blur";
+
+import { EnvironmentStatusCell, ResourceNameCell } from "../shared";
+
+type Props = {
+  environments: { name: string; slug: string }[];
+  count: number;
+  colWidth: number;
+};
+
+export const SecretNoAccessRow = ({ environments = [], count, colWidth }: Props) => {
+  return (
+    <>
+      {Array.from(Array(count)).map((_, j) => (
+        <Tr
+          key={`no-access-secret-${j + 1}`}
+          isHoverable
+          isSelectable
+          className="group border-mineshaft-500"
+        >
+          <ResourceNameCell
+            label={<Blur />}
+            iconClassName="text-bunker-400"
+            icon={faLock}
+            colWidth={colWidth}
+            tooltipContent="You do not have permission to view this secret"
+          />
+          {environments.map(({ slug }, i) => {
+            return (
+              <EnvironmentStatusCell
+                isLast={i === environments.length - 1}
+                status="no-access"
+                key={`no-access-sec--${slug}-${i + 1}-value`}
+              />
+            );
+          })}
+        </Tr>
+      ))}
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretRow.tsx

@@ -0,0 +1,231 @@
+import { subject } from "@casl/ability";
+import {
+  faCodeBranch,
+  faEye,
+  faEyeSlash,
+  faFileImport,
+  faKey,
+  faRotate
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
+import { useProjectPermission } from "@app/context";
+import {
+  ProjectPermissionSecretActions,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
+import { useToggle } from "@app/hooks";
+import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
+import { HIDDEN_SECRET_VALUE } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem";
+
+import { EnvironmentStatus, EnvironmentStatusCell, ResourceNameCell } from "../shared";
+import { EnvironmentSecretRow } from "./EnvironmentSecretRow";
+
+type Props = {
+  secretKey: string;
+  secretPath: string;
+  environments: { name: string; slug: string }[];
+  getSecretByKey: (slug: string, key: string) => SecretV3RawSanitized | undefined;
+  isImportedSecretPresentInEnv: (env: string, secretName: string) => boolean;
+  getImportedSecretByKey: (
+    env: string,
+    secretName: string
+  ) => { secret?: SecretV3RawSanitized; environmentInfo?: WorkspaceEnv } | undefined;
+  colWidth: number;
+  tableWidth: number;
+};
+
+export const SecretRow = ({
+  secretKey,
+  environments = [],
+  secretPath,
+  getSecretByKey,
+  isImportedSecretPresentInEnv,
+  getImportedSecretByKey,
+  colWidth,
+  tableWidth
+}: Props) => {
+  const [isFormExpanded, setIsFormExpanded] = useToggle();
+  const totalCols = environments.length + 1; // secret key row
+  const [isSecretVisible, setIsSecretVisible] = useToggle();
+
+  const { permission } = useProjectPermission();
+
+  const getDefaultValue = (
+    secret: SecretV3RawSanitized | undefined,
+    importedSecret: { secret?: SecretV3RawSanitized } | undefined
+  ) => {
+    const canEditSecretValue = permission.can(
+      ProjectPermissionSecretActions.Edit,
+      subject(ProjectPermissionSub.Secrets, {
+        environment: secret?.env || "",
+        secretPath: secret?.path || "",
+        secretName: secret?.key || "",
+        secretTags: ["*"]
+      })
+    );
+
+    if (secret?.secretValueHidden && !secret?.valueOverride) {
+      return canEditSecretValue ? HIDDEN_SECRET_VALUE : "";
+    }
+    return secret?.valueOverride || secret?.value || importedSecret?.secret?.value || "";
+  };
+
+  return (
+    <>
+      <Tr
+        isHoverable
+        isSelectable
+        onClick={() => setIsFormExpanded.toggle()}
+        className="group border-mineshaft-500"
+      >
+        <ResourceNameCell
+          colWidth={colWidth}
+          label={secretKey}
+          icon={faKey}
+          iconClassName="text-bunker-300"
+          isRowExpanded={isFormExpanded}
+        />
+        {environments.map(({ slug }, i) => {
+          const secret = getSecretByKey(slug, secretKey);
+
+          const isSecretImported = isImportedSecretPresentInEnv(slug, secretKey);
+
+          const isSecretPresent = Boolean(secret);
+          const isSecretEmpty = secret?.value === "";
+
+          let status: EnvironmentStatus;
+
+          if (isSecretEmpty) {
+            status = "empty";
+          } else if (isSecretPresent) {
+            status = "present";
+          } else if (isSecretImported) {
+            status = "imported";
+          } else {
+            status = "missing";
+          }
+
+          return (
+            <EnvironmentStatusCell
+              isLast={i === environments.length - 1}
+              key={`sec-overview-${slug}-${i + 1}-value`}
+              status={status}
+            />
+          );
+        })}
+      </Tr>
+      {isFormExpanded && (
+        <Tr className="border-b-0">
+          <Td
+            colSpan={totalCols}
+            style={{ minWidth: tableWidth, maxWidth: tableWidth }}
+            className="sticky left-0 bg-clip-padding px-0 py-0"
+          >
+            <div
+              style={{ minWidth: tableWidth, maxWidth: tableWidth }}
+              className="sticky left-0 bg-clip-padding px-0 py-0"
+            >
+              <TableContainer className="rounded-none border-0">
+                <table className="secret-table bg-mineshaft-900">
+                  <thead>
+                    <tr className="h-10 border-b-2 border-mineshaft-600 bg-mineshaft-800">
+                      <th
+                        style={{
+                          width: colWidth
+                        }}
+                        className="min-table-row"
+                      >
+                        <span className="truncate">Environment</span>
+                      </th>
+                      <th style={{ padding: "0.5rem 1rem" }} className="border-none">
+                        Value
+                      </th>
+                      <div className="absolute right-3 top-[4px] ml-auto mr-1 mt-1 w-min">
+                        <Tooltip
+                          side="left"
+                          content={isSecretVisible ? "Hide Values" : "Reveal Values"}
+                        >
+                          <IconButton
+                            variant="plain"
+                            colorSchema="secondary"
+                            ariaLabel={isSecretVisible ? "Hide Values" : "Reveal Values"}
+                            onClick={() => setIsSecretVisible.toggle()}
+                          >
+                            <FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />
+                          </IconButton>
+                        </Tooltip>
+                      </div>
+                    </tr>
+                  </thead>
+                  <tbody className="border-t-2 border-mineshaft-600">
+                    {environments.map(({ name, slug }) => {
+                      const secret = getSecretByKey(slug, secretKey);
+
+                      const isImportedSecret = isImportedSecretPresentInEnv(slug, secretKey);
+                      const importedSecret = getImportedSecretByKey(slug, secretKey);
+
+                      return (
+                        <tr
+                          key={`secret-expanded-${slug}-${secretKey}`}
+                          className="h-full hover:bg-mineshaft-700/70"
+                        >
+                          <td
+                            className="h-[1px] border-none !p-0"
+                            style={{
+                              width: colWidth
+                            }}
+                          >
+                            <div
+                              title={name}
+                              style={{
+                                width: colWidth
+                              }}
+                              className="flex h-full min-h-[40px] w-[8rem] items-center space-x-2 border-r border-mineshaft-500 px-4"
+                            >
+                              <span className="truncate">{name}</span>
+                              {isImportedSecret && (
+                                <Tooltip
+                                  content={`Imported secret from the '${importedSecret?.environmentInfo?.name}' environment`}
+                                >
+                                  <FontAwesomeIcon icon={faFileImport} />
+                                </Tooltip>
+                              )}
+                              {secret?.isRotatedSecret && (
+                                <Tooltip content="Rotated Secret">
+                                  <FontAwesomeIcon icon={faRotate} />
+                                </Tooltip>
+                              )}
+                              {secret?.valueOverride && (
+                                <Tooltip content="Personal Override">
+                                  <FontAwesomeIcon icon={faCodeBranch} />
+                                </Tooltip>
+                              )}
+                            </div>
+                          </td>
+                          <td className="col-span-2 h-8 w-full">
+                            <EnvironmentSecretRow
+                              secretPath={secretPath}
+                              isVisible={isSecretVisible}
+                              secretValueHidden={secret?.secretValueHidden || false}
+                              defaultValue={getDefaultValue(secret, importedSecret)}
+                              isOverride={Boolean(secret?.valueOverride)}
+                              isImportedSecret={isImportedSecret}
+                              environment={slug}
+                            />
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </TableContainer>
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/index.tsx

@@ -0,0 +1,2 @@
+export { SecretNoAccessRow } from "./SecretNoAccessRow";
+export { SecretRow } from "./SecretRow";

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/EnvironmentStatusCell.tsx

@@ -0,0 +1,75 @@
+import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
+import { faCircle } from "@fortawesome/free-regular-svg-icons";
+import { faBan, faCheck, faFileImport, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { Td, Tooltip } from "@app/components/v2";
+
+export type EnvironmentStatus = "present" | "missing" | "empty" | "imported" | "no-access";
+
+type Props = {
+  isLast: boolean;
+  status: EnvironmentStatus;
+};
+
+export const EnvironmentStatusCell = ({ isLast, status }: Props) => {
+  let tooltipContent: string;
+  let icon: IconDefinition;
+  let iconClassName: string;
+
+  switch (status) {
+    case "present":
+      tooltipContent = "Present in environment";
+      icon = faCheck;
+      iconClassName = "h-3 w-3";
+      break;
+    case "missing":
+      tooltipContent = "Missing from environment";
+      icon = faXmark;
+      iconClassName = "h-3.5 w-3.5";
+      break;
+    case "empty":
+      tooltipContent = "Empty value in environment";
+      icon = faCircle;
+      iconClassName = "h-3 w-3";
+      break;
+    case "imported":
+      tooltipContent = "Imported into environment";
+      icon = faFileImport;
+      iconClassName = "h-3 w-3";
+      break;
+    case "no-access":
+      tooltipContent = "You do not have permission to view this secret";
+      icon = faBan;
+      iconClassName = "h-3 w-3";
+      break;
+    default:
+      throw new Error(`Unhandled environment status: ${status as string}`);
+  }
+
+  return (
+    <Td
+      className={twMerge(
+        "border-b border-mineshaft-500 bg-clip-padding p-0 group-hover:bg-mineshaft-600",
+        (status === "present" || status === "imported") && "text-green-600",
+        status === "empty" && "text-yellow",
+        status === "missing" && "text-red-600",
+        status === "no-access" && "text-bunker-400"
+      )}
+    >
+      <div
+        className={twMerge(
+          "flex h-10 items-center justify-center border-mineshaft-500 px-0 py-3",
+          !isLast && "border-r"
+        )}
+      >
+        <div className="flex justify-center">
+          <Tooltip center content={tooltipContent}>
+            <FontAwesomeIcon className={iconClassName} icon={icon} />
+          </Tooltip>
+        </div>
+      </div>
+    </Td>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/ResourceNameCell.tsx

@@ -0,0 +1,47 @@
+import { ReactElement } from "react";
+import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Td, Tooltip } from "@app/components/v2";
+
+type Props = {
+  isRowExpanded?: boolean;
+  label: ReactElement | string;
+  icon: IconDefinition;
+  iconClassName?: string;
+  colWidth: number;
+  tooltipContent?: string;
+};
+
+export const ResourceNameCell = ({
+  isRowExpanded,
+  label,
+  icon,
+  iconClassName,
+  colWidth,
+  tooltipContent
+}: Props) => {
+  return (
+    <Td
+      className="sticky left-0 z-10 border-b border-mineshaft-500 bg-mineshaft-700 bg-clip-padding p-0 group-hover:bg-mineshaft-600"
+      style={{
+        width: colWidth
+      }}
+    >
+      <Tooltip content={tooltipContent} className="max-w-sm">
+        <div
+          style={{
+            width: colWidth
+          }}
+          className="flex h-10 items-center space-x-5 border-r border-mineshaft-600 px-4 py-2.5"
+        >
+          <div className="w-5 min-w-5">
+            <FontAwesomeIcon className={iconClassName} icon={isRowExpanded ? faAngleDown : icon} />
+          </div>
+          {typeof label === "string" ? <span className="truncate">{label}</span> : label}
+        </div>
+      </Tooltip>
+    </Td>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/index.ts

@@ -0,0 +1,2 @@
+export * from "./EnvironmentStatusCell";
+export * from "./ResourceNameCell";

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/index.tsx

@@ -0,0 +1 @@
+export * from "./CompareEnvironments";

frontend/src/pages/secret-manager/SecretDashboardPage/components/EnvironmentTabs/EnvironmentTabs.tsx

@@ -0,0 +1,242 @@
+import { useState } from "react";
+import { faArrowRightArrowLeft, faEllipsisH, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useParams } from "@tanstack/react-router";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  Modal,
+  ModalContent,
+  Tab,
+  TabList,
+  Tabs,
+  Tooltip
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useSubscription,
+  useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { workspaceKeys } from "@app/hooks/api";
+import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
+import { AddEnvironmentModal } from "@app/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal";
+
+import { CompareEnvironments } from "../CompareEnvironments";
+
+const COMPARE_ENVIRONMENT_TAB = "__COMPARE_ENVIRONMENT_TAB__";
+const ADD_ENVIRONMENT_TAB = "__ADD_ENVIRONMENT_TAB__";
+const VIEW_MORE_ENVIRONMENT_TAB = "__VIEW_MORE_ENVIRONMENT_TAB__";
+
+type Props = {
+  secretPath: string;
+};
+
+const TABS_TO_SHOW = 5;
+
+export const EnvironmentTabs = ({ secretPath }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const currentEnv = useParams({
+    from: ROUTE_PATHS.SecretManager.SecretDashboardPage.id,
+    select: (el) => el.envSlug
+  });
+
+  const { subscription } = useSubscription();
+
+  const isMoreEnvironmentsAllowed =
+    subscription?.environmentLimit && currentWorkspace?.environments
+      ? currentWorkspace.environments.length < subscription.environmentLimit
+      : true;
+
+  const [isNavigating, setIsNavigating] = useState(false);
+
+  const navigate = useNavigate();
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "compareEnvironments",
+    "createEnvironment",
+    "upgradePlan"
+  ] as const);
+
+  const selectedIndex = currentWorkspace.environments.findIndex((env) => env.slug === currentEnv);
+
+  let tabEnvironments: WorkspaceEnv[];
+  let dropdownEnvironments: WorkspaceEnv[];
+
+  if (selectedIndex < TABS_TO_SHOW) {
+    tabEnvironments = currentWorkspace.environments.slice(0, TABS_TO_SHOW);
+    dropdownEnvironments = currentWorkspace.environments.slice(TABS_TO_SHOW);
+  } else {
+    tabEnvironments = [
+      ...currentWorkspace.environments.slice(0, TABS_TO_SHOW - 1),
+      currentWorkspace.environments[selectedIndex]
+    ];
+    dropdownEnvironments = currentWorkspace.environments
+      .slice(TABS_TO_SHOW - 1)
+      .filter((env) => env.slug !== currentEnv);
+  }
+
+  const queryClient = useQueryClient();
+
+  const handleSelect = async (envSlug: string) => {
+    if (isNavigating) return;
+
+    setIsNavigating(true);
+    await navigate({
+      to: ROUTE_PATHS.SecretManager.SecretDashboardPage.path,
+      params: {
+        envSlug,
+        projectId: currentWorkspace.id
+      },
+      search: (prev) => prev
+    });
+    setIsNavigating(false);
+  };
+
+  const handleAddEnvironment = () => {
+    if (isMoreEnvironmentsAllowed) {
+      handlePopUpOpen("createEnvironment");
+    } else {
+      handlePopUpOpen("upgradePlan");
+    }
+  };
+
+  return (
+    <>
+      <Tabs
+        value={currentEnv}
+        onValueChange={(value) => {
+          if (value === COMPARE_ENVIRONMENT_TAB) {
+            handlePopUpOpen("compareEnvironments");
+            return;
+          }
+
+          if (value === ADD_ENVIRONMENT_TAB) {
+            handleAddEnvironment();
+            return;
+          }
+
+          handleSelect(value);
+        }}
+        defaultValue="environment-tabs"
+      >
+        <TabList>
+          {tabEnvironments.map((environment) => (
+            <Tab key={environment.slug} className="max-w-[12vw] truncate" value={environment.slug}>
+              <p className="truncate">{environment.name}</p>
+            </Tab>
+          ))}
+          {dropdownEnvironments.length ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <Tab value={VIEW_MORE_ENVIRONMENT_TAB} className="p-0">
+                  <Tooltip content="More Environments">
+                    <div className="px-3">
+                      <FontAwesomeIcon icon={faEllipsisH} />
+                    </div>
+                  </Tooltip>
+                </Tab>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="thin-scrollbar max-h-[70vh] overflow-y-auto"
+                sideOffset={2}
+                align="center"
+              >
+                <DropdownMenuLabel>Environments</DropdownMenuLabel>
+                <div className="thin-scrollbar max-h-[40vh] overflow-auto">
+                  {dropdownEnvironments.map((environment) => (
+                    <DropdownMenuItem
+                      key={environment.id}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSelect(environment.slug);
+                      }}
+                    >
+                      {environment.name}
+                    </DropdownMenuItem>
+                  ))}
+                </div>
+                <div className="h-1 border-t border-mineshaft-600" />
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Create}
+                  a={ProjectPermissionSub.Environments}
+                >
+                  {(isAllowed) => (
+                    <DropdownMenuItem
+                      isDisabled={!isAllowed}
+                      onClick={handleAddEnvironment}
+                      className="data-[highlighted]:bg-mineshaft-900"
+                    >
+                      <Button
+                        size="xs"
+                        variant="outline_bg"
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                        className="w-full"
+                      >
+                        Add Environment
+                      </Button>
+                    </DropdownMenuItem>
+                  )}
+                </ProjectPermissionCan>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <Tab value={ADD_ENVIRONMENT_TAB} className="p-0">
+              <Tooltip content="Add environment">
+                <div className="px-3">
+                  <FontAwesomeIcon icon={faPlus} />
+                </div>
+              </Tooltip>
+            </Tab>
+          )}
+          {currentWorkspace.environments.length > 1 && (
+            <Tab className="ml-auto" value={COMPARE_ENVIRONMENT_TAB}>
+              <div className="flex items-center gap-x-2 whitespace-nowrap">
+                <FontAwesomeIcon icon={faArrowRightArrowLeft} />
+                Compare Environments
+              </div>
+            </Tab>
+          )}
+        </TabList>
+      </Tabs>
+      <Modal
+        isOpen={popUp.compareEnvironments.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("compareEnvironments", isOpen)}
+      >
+        <ModalContent
+          title="Compare Environments"
+          subTitle="Compare secrets across multiple environments"
+          className="flex h-full !w-[95vw] max-w-none flex-col"
+          bodyClassName="flex-1 flex flex-col overflow-hidden"
+        >
+          <CompareEnvironments secretPath={secretPath} />
+        </ModalContent>
+      </Modal>
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can add custom environments if you switch to Infisical's Team plan."
+      />
+      <AddEnvironmentModal
+        isOpen={popUp.createEnvironment.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("createEnvironment", isOpen)}
+        onComplete={async (env) => {
+          await queryClient.refetchQueries({
+            queryKey: workspaceKeys.getWorkspaceById(currentWorkspace.id)
+          });
+          handleSelect(env.slug);
+        }}
+      />
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/EnvironmentTabs/index.tsx

@@ -0,0 +1 @@
+export * from "./EnvironmentTabs";

frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx

@@ -0,0 +1,52 @@
+import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+
+type Props = {
+  secretPath: string;
+};
+
+export const FolderBreadCrumbs = ({ secretPath = "/" }: Props) => {
+  const navigate = useNavigate({
+    from: "/projects/secret-management/$projectId/secrets/$envSlug"
+  });
+
+  const onFolderCrumbClick = (index: number) => {
+    const newSecPath = `/${secretPath.split("/").filter(Boolean).slice(0, index).join("/")}`;
+    if (secretPath === newSecPath) return;
+    navigate({
+      search: (prev) => ({ ...prev, secretPath: newSecPath })
+    });
+  };
+
+  return (
+    <div className="mb-3 flex flex-wrap items-center gap-x-2 gap-y-3">
+      <div
+        className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pl-5 pr-2 text-sm hover:bg-mineshaft-600"
+        onClick={() => onFolderCrumbClick(0)}
+        onKeyDown={() => null}
+        role="button"
+        tabIndex={0}
+      >
+        <FontAwesomeIcon icon={faFolderOpen} className="text-primary-700" />
+      </div>
+      {(secretPath || "")
+        .split("/")
+        .filter(Boolean)
+        .map((path, index, arr) => (
+          <div
+            key={`secret-path-${index + 1}`}
+            className={`breadcrumb relative z-20 ${
+              index + 1 === arr.length ? "cursor-default" : "cursor-pointer"
+            } border-solid border-mineshaft-600 py-1 pl-5 pr-2 text-sm text-mineshaft-200`}
+            onClick={() => onFolderCrumbClick(index + 1)}
+            onKeyDown={() => null}
+            role="button"
+            tabIndex={0}
+          >
+            {path}
+          </div>
+        ))}
+    </div>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderBreadCrumbs/index.tsx

@@ -0,0 +1 @@
+export { FolderBreadCrumbs } from "./FolderBreadCrumbs";

frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderListView/FolderListView.tsx

@@ -36,6 +36,7 @@ type Props = {
   workspaceId: string;
   secretPath?: string;
   onNavigateToFolder: (path: string) => void;
+  canNavigate: boolean;
 };
 
 export const FolderListView = ({
@@ -43,7 +44,8 @@ export const FolderListView = ({
   environment,
   workspaceId,
   secretPath = "/",
-  onNavigateToFolder
+  onNavigateToFolder,
+  canNavigate
 }: Props) => {
   const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "updateFolder",
@@ -190,7 +192,7 @@ export const FolderListView = ({
   };
 
   const handleFolderClick = (name: string, isPending?: boolean) => {
-    if (isPending) {
+    if (isPending || !canNavigate) {
       return;
     }
     const path = `${secretPathQueryparam === "/" ? "" : secretPathQueryparam}/${name}`;

frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx

@@ -3,16 +3,16 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { Button, FormControl, Input, Modal, ModalClose, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useCreateWsEnvironment } from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
+import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
 import { slugSchema } from "@app/lib/schemas";
 
 type Props = {
-  popUp: UsePopUpState<["createEnv"]>;
+  isOpen: boolean;
-  handlePopUpClose: (popUpName: keyof UsePopUpState<["createEnv"]>) => void;
+  onOpenChange: (isOpen: boolean) => void;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<["createEnv"]>, state?: boolean) => void;
+  onComplete?: (environment: WorkspaceEnv) => void;
 };
 
 const schema = z.object({
@@ -24,10 +24,14 @@ const schema = z.object({
 
 export type FormData = z.infer<typeof schema>;
 
-export const AddEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+type ContentProps = {
+  onComplete: (environment: WorkspaceEnv) => void;
+};
+
+const Content = ({ onComplete }: ContentProps) => {
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isPending } = useCreateWsEnvironment();
-  const { control, handleSubmit, reset } = useForm<FormData>({
+  const { control, handleSubmit } = useForm<FormData>({
     resolver: zodResolver(schema)
   });
 
@@ -35,7 +39,7 @@ export const AddEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle
     try {
       if (!currentWorkspace?.id) return;
 
-      await mutateAsync({
+      const env = await mutateAsync({
         workspaceId: currentWorkspace.id,
         name: environmentName,
         slug: environmentSlug
@@ -46,7 +50,7 @@ export const AddEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle
         type: "success"
       });
 
-      handlePopUpClose("createEnv");
+      onComplete(env);
     } catch (err) {
       console.error(err);
       createNotification({
@@ -57,64 +61,62 @@ export const AddEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle
   };
 
   return (
-    <Modal
+    <form onSubmit={handleSubmit(onFormSubmit)}>
-      isOpen={popUp?.createEnv?.isOpen}
+      <Controller
-      onOpenChange={(isOpen) => {
+        control={control}
-        handlePopUpToggle("createEnv", isOpen);
+        defaultValue=""
-        reset();
+        name="environmentName"
-      }}
+        render={({ field, fieldState: { error } }) => (
-    >
+          <FormControl label="Environment Name" isError={Boolean(error)} errorText={error?.message}>
-      <ModalContent title="Create a new environment">
+            <Input {...field} />
-        <form onSubmit={handleSubmit(onFormSubmit)}>
+          </FormControl>
-          <Controller
+        )}
-            control={control}
+      />
-            defaultValue=""
+      <Controller
-            name="environmentName"
+        control={control}
-            render={({ field, fieldState: { error } }) => (
+        defaultValue=""
-              <FormControl
+        name="environmentSlug"
-                label="Environment Name"
+        render={({ field, fieldState: { error } }) => (
-                isError={Boolean(error)}
+          <FormControl
-                errorText={error?.message}
+            label="Environment Slug"
-              >
+            helperText="Slugs are shorthands used in cli to access environment"
-                <Input {...field} />
+            isError={Boolean(error)}
-              </FormControl>
+            errorText={error?.message}
-            )}
+          >
-          />
+            <Input {...field} />
-          <Controller
+          </FormControl>
-            control={control}
+        )}
-            defaultValue=""
+      />
-            name="environmentSlug"
+      <div className="mt-8 flex items-center">
-            render={({ field, fieldState: { error } }) => (
+        <Button
-              <FormControl
+          className="mr-4"
-                label="Environment Slug"
+          size="sm"
-                helperText="Slugs are shorthands used in cli to access environment"
+          type="submit"
-                isError={Boolean(error)}
+          isLoading={isPending}
-                errorText={error?.message}
+          isDisabled={isPending}
-              >
+        >
-                <Input {...field} />
+          Create
-              </FormControl>
+        </Button>
-            )}
+        <ModalClose asChild>
-          />
+          <Button colorSchema="secondary" variant="plain">
-          <div className="mt-8 flex items-center">
+            Cancel
-            <Button
+          </Button>
-              className="mr-4"
+        </ModalClose>
-              size="sm"
+      </div>
-              type="submit"
+    </form>
-              isLoading={isPending}
+  );
-              isDisabled={isPending}
+};
-            >
-              Create
-            </Button>
 
-            <Button
+export const AddEnvironmentModal = ({ onComplete, ...props }: Props) => {
-              onClick={() => handlePopUpClose("createEnv")}
+  return (
-              colorSchema="secondary"
+    <Modal {...props}>
-              variant="plain"
+      <ModalContent title="Create a new environment">
-            >
+        <Content
-              Cancel
+          onComplete={(env) => {
-            </Button>
+            if (onComplete) onComplete(env);
-          </div>
+            props.onOpenChange(false);
-        </form>
+          }}
+        />
       </ModalContent>
     </Modal>
   );

frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentSection.tsx

@@ -103,9 +103,8 @@ export const EnvironmentSection = () => {
         <PermissionDeniedBanner />
       )}
       <AddEnvironmentModal
-        popUp={popUp}
+        isOpen={popUp.createEnv.isOpen}
-        handlePopUpClose={handlePopUpClose}
+        onOpenChange={(isOpen) => handlePopUpToggle("createEnv", isOpen)}
-        handlePopUpToggle={handlePopUpToggle}
       />
       <UpdateEnvironmentModal
         popUp={popUp}