style: implement new navigation

frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx

@@ -21,8 +21,8 @@ export const PamAccountsPage = () => {
         a={ProjectPermissionSub.PamAccounts}
       >
         <div className="h-full bg-bunker-800">
-          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-            <div className="mx-auto mb-6 w-full max-w-7xl">
+          <div className="mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+            <div className="mx-auto mb-6 w-full max-w-8xl">
               <PageHeader
                 scope="project"
                 title="Accounts"

frontend/src/pages/pam/PamAccountsPage/components/FolderBreadCrumbs.tsx

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

frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx

@@ -45,6 +45,7 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { PAM_RESOURCE_TYPE_MAP, TPamAccount, TPamFolder } from "@app/hooks/api/pam";
 
 import { AccountView, AccountViewToggle } from "./AccountViewToggle";
+import { FolderBreadCrumbs } from "./FolderBreadCrumbs";
 import { PamAccessAccountModal } from "./PamAccessAccountModal";
 import { PamAccountRow } from "./PamAccountRow";
 import { PamAddAccountModal } from "./PamAddAccountModal";
@@ -255,6 +256,7 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
 
   return (
     <div>
+      {accountView === AccountView.Nested && <FolderBreadCrumbs path={accountPath} />}
       <div className="mt-4 flex gap-2">
         <ProjectPermissionCan I={ProjectPermissionActions.Read} a={ProjectPermissionSub.PamFolders}>
           {(isAllowed) =>