feat: completed all nav restructing and breadcrumbs cleanup

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

@@ -7,7 +7,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
-import NavHeader from "@app/components/navigation/NavHeader";
 import { createNotification } from "@app/components/notifications";
 import { PermissionDeniedBanner } from "@app/components/permissions";
 import {
@@ -67,7 +66,6 @@ const LOADER_TEXT = [
 ];
 
 const Page = () => {
-  const { t } = useTranslation();
   const { currentWorkspace } = useWorkspace();
   const navigate = useNavigate({
     from: ROUTE_PATHS.SecretManager.SecretDashboardPage.path
@@ -264,18 +262,6 @@ const Page = () => {
       state === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
     );
 
-  const handleEnvChange = (slug: string) => {
-    navigate({
-      params: {
-        envSlug: slug
-      },
-      search: (state) => {
-        const newState = { ...state, secretPath: undefined };
-        return newState;
-      }
-    });
-  };
-
   const handleTagToggle = useCallback(
     (tagSlug: string) =>
       setFilter((state) => {
@@ -396,21 +382,8 @@ const Page = () => {
     setDebouncedSearchFilter("");
   };
   return (
-    <div className="container mx-auto flex flex-col px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+    <div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:[color-scheme:dark]">
       <SecretV2MigrationSection />
-      <div className="relative -top-2 right-6 mb-2 ml-6">
-        <NavHeader
-          pageName={t("dashboard.title")}
-          currentEnv={environment}
-          userAvailableEnvs={currentWorkspace?.environments}
-          isFolderMode
-          secretPath={secretPath}
-          isProjectRelated
-          onEnvChange={handleEnvChange}
-          isProtectedBranch={isProtectedBranch}
-          protectionPolicyName={boardPolicy?.name}
-        />
-      </div>
       {!isRollbackMode ? (
         <>
           <ActionBar
@@ -428,6 +401,7 @@ const Page = () => {
             isSnapshotCountLoading={isSnapshotCountLoading}
             onToggleRowType={handleToggleRowType}
             onClickRollbackMode={() => handlePopUpToggle("snapshots", true)}
+            protectedBranchPolicyName={boardPolicy?.name}
           />
           <div className="thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md rounded-b-none bg-mineshaft-800 text-left text-sm text-bunker-300">
             <div className="flex flex-col" id="dashboard">

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

@@ -15,6 +15,7 @@ import {
   faFolder,
   faFolderPlus,
   faKey,
+  faLock,
   faMinusSquare,
   faPlus,
   faTrash
@@ -80,6 +81,7 @@ type Props = {
   isVisible?: boolean;
   snapshotCount: number;
   isSnapshotCountLoading?: boolean;
+  protectedBranchPolicyName?: string;
   onSearchChange: (term: string) => void;
   onToggleTagFilter: (tagId: string) => void;
   onVisibilityToggle: () => void;
@@ -101,7 +103,8 @@ export const ActionBar = ({
   onToggleTagFilter,
   onVisibilityToggle,
   onClickRollbackMode,
-  onToggleRowType
+  onToggleRowType,
+  protectedBranchPolicyName
 }: Props) => {
   const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
     "addFolder",
@@ -112,9 +115,9 @@ export const ActionBar = ({
     "misc",
     "upgradePlan"
   ] as const);
+  const isProtectedBranch = Boolean(protectedBranchPolicyName);
   const { subscription } = useSubscription();
   const { openPopUp } = usePopUpAction();
-
   const { mutateAsync: createFolder } = useCreateFolder();
   const { mutateAsync: deleteBatchSecretV3 } = useDeleteSecretBatch();
   const { mutateAsync: moveSecrets } = useMoveSecrets();
@@ -387,6 +390,15 @@ export const ActionBar = ({
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
+        <div>
+          {isProtectedBranch && (
+            <Tooltip content={`Protected by policy ${protectedBranchPolicyName}`}>
+              <IconButton variant="outline_bg" ariaLabel="protected">
+                <FontAwesomeIcon icon={faLock} className="text-primary" />
+              </IconButton>
+            </Tooltip>
+          )}
+        </div>
         <div className="flex-grow" />
         <div>
           <IconButton variant="outline_bg" ariaLabel="Download" onClick={handleSecretDownload}>

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

@@ -1,7 +1,10 @@
-import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { SecretDashboardPathBreadcrumb } from "@app/components/navigation/SecretDashboardPathBreadcrumb";
+import { BreadcrumbTypes } from "@app/components/v2";
+
 import { SecretDashboardPage } from "./SecretDashboardPage";
 
 const SecretDashboardPageQueryParamsSchema = z.object({
@@ -9,7 +12,6 @@ const SecretDashboardPageQueryParamsSchema = z.object({
   search: z.string().catch(""),
   tags: z.string().catch("")
 });
-
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug"
 )({
@@ -17,5 +19,39 @@ export const Route = createFileRoute(
   validateSearch: zodValidator(SecretDashboardPageQueryParamsSchema),
   search: {
     middlewares: [stripSearchParams({ secretPath: "/", search: "", tags: "" })]
+  },
+  beforeLoad: ({ context, params, search }) => {
+    const secretPathSegments = search.secretPath.split("/").filter(Boolean);
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          type: BreadcrumbTypes.Dropdown,
+          label: context.project.environments.find((el) => el.slug === params.envSlug)?.name || "",
+          dropdownTitle: "Environments",
+          links: context.project.environments.map((el) => ({
+            label: el.name,
+            link: linkOptions({
+              to: "/secret-manager/$projectId/secrets/$envSlug",
+              params: {
+                projectId: params.projectId,
+                envSlug: el.slug
+              }
+            })
+          }))
+        },
+        ...secretPathSegments.map((_, index) => ({
+          type: BreadcrumbTypes.Component,
+          component: () => (
+            <SecretDashboardPathBreadcrumb
+              secretPathSegments={secretPathSegments}
+              selectedPathSegmentIndex={index}
+              environmentSlug={params.envSlug}
+              projectId={params.projectId}
+            />
+          )
+        }))
+      ]
+    };
   }
 });