feat: moved org breadcrumbs to top level

frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,11 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { faCaretDown, faChevronRight, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCaretDown,
+  faChevronRight,
+  faEllipsis,
+  faSlash
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, ReactNode } from "@tanstack/react-router";
 import { LinkComponentProps } from "node_modules/@tanstack/react-router/dist/esm/link";
@@ -78,13 +83,14 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
-  <li
+  <li role="presentation" aria-hidden="true" className={twMerge("", className)} {...props}>
-    role="presentation"
+    {children ?? (
-    aria-hidden="true"
+      <FontAwesomeIcon
-    className={twMerge("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
+        icon={faSlash}
-    {...props}
+        className="rotate-90 font-medium text-bunker-300"
-  >
+        style={{ fontSize: "10px" }}
-    {children ?? <FontAwesomeIcon icon={faChevronRight} />}
+      />
+    )}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

frontend/src/components/v2/Menu/Menu.tsx

@@ -86,7 +86,7 @@ export type MenuGroupProps = {
 
 export const MenuGroup = ({ children, title }: MenuGroupProps): JSX.Element => (
   <>
-    <li className="px-2 pt-3 text-xs uppercase text-gray-400">{title}</li>
+    <li className="px-2 pt-3 text-xs font-medium uppercase text-gray-400">{title}</li>
     {children}
   </>
 );

frontend/src/layouts/AdminLayout/Sidebar.tsx

@@ -14,7 +14,7 @@ import {
 import { envConfig } from "@app/config/env";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
-import { INFISICAL_SUPPORT_OPTIONS } from "../OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar";
+import { INFISICAL_SUPPORT_OPTIONS } from "../OrganizationLayout/components/NavBar/Navbar";
 
 const generalTabs = [
   {

frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx

@@ -1,25 +1,20 @@
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { linkOptions, Outlet, useLocation, useRouterState } from "@tanstack/react-router";
+import { Outlet } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
 import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
 import { Banner } from "@app/components/page-frames/Banner";
-import { BreadcrumbContainer, TBreadcrumbFormat } from "@app/components/v2";
 import { OrgPermissionSubjects, useOrgPermission, useServerConfig } from "@app/context";
 import { OrgPermissionSecretShareAction } from "@app/context/OrgPermissionContext/types";
 import { usePopUp } from "@app/hooks";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { InsecureConnectionBanner } from "./components/InsecureConnectionBanner";
 import { OrgSidebar } from "./components/OrgSidebar";
-import { DefaultSideBar, ProjectOverviewSideBar, SecretSharingSideBar } from "./ProductsSideBar";
 import { Navbar } from "./components/NavBar";
 
 export const OrganizationLayout = () => {
-  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
-  const location = useLocation();
   const { config } = useServerConfig();
   const { permission } = useOrgPermission();
 
@@ -28,12 +23,6 @@ export const OrganizationLayout = () => {
     OrgPermissionSubjects.SecretShare
   );
 
-  const isOrganizationSpecificPage = location.pathname.startsWith("/organization");
-  const breadcrumbs =
-    isOrganizationSpecificPage && matches && "breadcrumbs" in matches
-      ? matches.breadcrumbs
-      : undefined;
-
   const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
 
   const { t } = useTranslation();
@@ -50,15 +39,7 @@ export const OrganizationLayout = () => {
         {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
           <OrgSidebar />
-          <main
+          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 py-4 dark:[color-scheme:dark]">
-            className={twMerge(
-              "flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 pb-4 dark:[color-scheme:dark]",
-              !isOrganizationSpecificPage && "overflow-hidden p-0"
-            )}
-          >
-            {breadcrumbs ? (
-              <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
-            ) : null}
             <Outlet />
           </main>
         </div>

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -15,28 +15,25 @@ import {
 import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";
-import { Link, useNavigate, useRouter } from "@tanstack/react-router";
+import { Link, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
 
 import { Mfa } from "@app/components/auth/Mfa";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import {
+  BreadcrumbContainer,
   Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  Lottie
+  Lottie,
+  TBreadcrumbFormat
 } from "@app/components/v2";
 import { envConfig } from "@app/config/env";
 import { useOrganization, useSubscription, useUser } from "@app/context";
 import { isInfisicalCloud } from "@app/helpers/platform";
 import { useToggle } from "@app/hooks";
-import {
+import { useGetOrganizations, useLogoutUser, workspaceKeys } from "@app/hooks/api";
-  useGetOrganizations,
-  useGetOrgTrialUrl,
-  useLogoutUser,
-  workspaceKeys
-} from "@app/hooks/api";
 import { authKeys, selectOrganization } from "@app/hooks/api/auth/queries";
 import { MfaMethod } from "@app/hooks/api/auth/types";
 import { SubscriptionPlan } from "@app/hooks/api/types";
@@ -83,8 +80,6 @@ export const Navbar = () => {
   const { currentOrg } = useOrganization();
   const [openSupport, setOpenSupport] = useState(false);
   const [openUser, setOpenUser] = useState(false);
-  const [showAdminsModal, setShowAdminsModal] = useState(false);
-  const { mutateAsync } = useGetOrgTrialUrl();
 
   const { data: orgs } = useGetOrganizations();
   const navigate = useNavigate();
@@ -94,6 +89,9 @@ export const Navbar = () => {
   const router = useRouter();
   const queryClient = useQueryClient();
 
+  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
+  const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
+
   const handleOrgChange = async (orgId: string) => {
     queryClient.removeQueries({ queryKey: authKeys.getAuthToken });
     queryClient.removeQueries({ queryKey: workspaceKeys.getAllUserWorkspace() });
@@ -140,7 +138,7 @@ export const Navbar = () => {
   }
 
   return (
-    <div className="dark z-10 flex h-12 items-center gap-1 border-b border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 px-4 py-2">
+    <div className="z-10 flex h-12 items-center gap-1 border-b border-mineshaft-600 bg-mineshaft-800 px-4 py-2">
       <div>
         <Link to="/organization/secret-manager/overview">
           <img alt="infisical logo" src="/images/logotransparent.png" className="h-4" />
@@ -159,9 +157,7 @@ export const Navbar = () => {
               <div className="rounded border border-mineshaft-500 p-1 text-xs text-bunker-300">
                 {getPlan(subscription)}
               </div>
-              <div>
+              <FontAwesomeIcon icon={faSort} className="text-xs text-bunker-300" />
-                <FontAwesomeIcon icon={faSort} className="text-xs text-bunker-300" />
-              </div>
             </div>
           </DropdownMenuTrigger>
           <DropdownMenuContent
@@ -217,6 +213,16 @@ export const Navbar = () => {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
+        <FontAwesomeIcon
+          icon={faSlash}
+          className="mr-1 rotate-90 font-medium text-bunker-300"
+          style={{ fontSize: "10px" }}
+        />
+      </div>
+      <div>
+        {breadcrumbs ? (
+          <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
+        ) : null}
       </div>
       <div className="flex-grow" />
       <DropdownMenu modal={false} open={openSupport} onOpenChange={setOpenSupport}>

frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx

@@ -1,179 +1,36 @@
 import { useState } from "react";
-import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
 import {
-  faArrowUpRightFromSquare,
   faBook,
-  faCheck,
   faCheckCircle,
   faCog,
   faDoorClosed,
-  faEnvelope,
   faInfinity,
-  faInfo,
-  faInfoCircle,
   faMoneyBill,
   faPlug,
-  faSignOut,
-  faUser,
   faUserCog,
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useQueryClient } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
-import { Link, linkOptions, useLocation, useNavigate, useRouter } from "@tanstack/react-router";
 
-import { Mfa } from "@app/components/auth/Mfa";
 import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
-import SecurityClient from "@app/components/utilities/SecurityClient";
+import { Menu, MenuGroup, MenuItem, Modal, ModalContent, Tooltip } from "@app/components/v2";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  Menu,
-  MenuGroup,
-  MenuItem,
-  Modal,
-  ModalContent,
-  Tooltip
-} from "@app/components/v2";
-import { envConfig } from "@app/config/env";
 import { useOrganization, useSubscription, useUser } from "@app/context";
-import { isInfisicalCloud } from "@app/helpers/platform";
+import { usePopUp } from "@app/hooks";
-import { usePopUp, useToggle } from "@app/hooks";
+import { useGetOrgTrialUrl } from "@app/hooks/api";
-import {
-  useGetOrganizations,
-  useGetOrgTrialUrl,
-  useLogoutUser,
-  useSelectOrganization,
-  workspaceKeys
-} from "@app/hooks/api";
-import { authKeys } from "@app/hooks/api/auth/queries";
-import { MfaMethod } from "@app/hooks/api/auth/types";
-import { SubscriptionPlan } from "@app/hooks/api/types";
-import { AuthMethod } from "@app/hooks/api/users/types";
-import { ProjectType } from "@app/hooks/api/workspace/types";
-import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";
 
-import { MenuIconButton } from "../MenuIconButton";
 import { ServerAdminsPanel } from "../ServerAdminsPanel/ServerAdminsPanel";
 
-const getPlan = (subscription: SubscriptionPlan) => {
-  if (subscription.groups) return "Enterprise Plan";
-  if (subscription.pitRecovery) return "Pro Plan";
-  return "Free Plan";
-};
-
-export const INFISICAL_SUPPORT_OPTIONS = [
-  [
-    <FontAwesomeIcon key={1} className="pr-4 text-sm" icon={faSlack} />,
-    "Support Forum",
-    "https://infisical.com/slack"
-  ],
-  [
-    <FontAwesomeIcon key={2} className="pr-4 text-sm" icon={faBook} />,
-    "Read Docs",
-    "https://infisical.com/docs/documentation/getting-started/introduction"
-  ],
-  [
-    <FontAwesomeIcon key={3} className="pr-4 text-sm" icon={faGithub} />,
-    "GitHub Issues",
-    "https://github.com/Infisical/infisical/issues"
-  ],
-  [
-    <FontAwesomeIcon key={4} className="pr-4 text-sm" icon={faEnvelope} />,
-    "Email Support",
-    "mailto:[email protected]"
-  ],
-  [
-    <FontAwesomeIcon key={5} className="pr-4 text-sm" icon={faUsers} />,
-    "Instance Admins",
-    "server-admins"
-  ]
-];
-
 export const OrgSidebar = () => {
-  const [shouldShowMfa, toggleShowMfa] = useToggle(false);
-  const [requiredMfaMethod, setRequiredMfaMethod] = useState(MfaMethod.EMAIL);
-  const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {});
   const { subscription } = useSubscription();
-  const [open, setOpen] = useState(false);
-  const [openSupport, setOpenSupport] = useState(false);
-  const [openUser, setOpenUser] = useState(false);
-  const [openOrg, setOpenOrg] = useState(false);
   const [showAdminsModal, setShowAdminsModal] = useState(false);
 
   const { user } = useUser();
   const { mutateAsync } = useGetOrgTrialUrl();
 
   const { currentOrg } = useOrganization();
-  const { data: orgs } = useGetOrganizations();
 
   const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
-  const { mutateAsync: selectOrganization } = useSelectOrganization();
-  const navigate = useNavigate();
-  const router = useRouter();
-  const location = useLocation();
-  const queryClient = useQueryClient();
-
-  const isMoreSelected = (
-    [
-      linkOptions({ to: "/organization/access-management" }).to,
-      linkOptions({ to: "/organization/app-connections" }).to,
-      linkOptions({ to: "/organization/billing" }).to,
-      linkOptions({ to: "/organization/sso" }).to,
-      linkOptions({ to: "/organization/gateways" }).to,
-      linkOptions({ to: "/organization/settings" }).to,
-      linkOptions({ to: "/organization/audit-logs" }).to
-    ] as string[]
-  ).includes(location.pathname);
-
-  const handleOrgChange = async (orgId: string) => {
-    queryClient.removeQueries({ queryKey: authKeys.getAuthToken });
-    queryClient.removeQueries({ queryKey: workspaceKeys.getAllUserWorkspace() });
-
-    const { token, isMfaEnabled, mfaMethod } = await selectOrganization({
-      organizationId: orgId
-    });
-
-    if (isMfaEnabled) {
-      SecurityClient.setMfaToken(token);
-      if (mfaMethod) {
-        setRequiredMfaMethod(mfaMethod);
-      }
-      toggleShowMfa.on();
-      setMfaSuccessCallback(() => () => handleOrgChange(orgId));
-      return;
-    }
-    await router.invalidate();
-    await navigateUserToOrg(navigate, orgId);
-  };
-
-  const logout = useLogoutUser();
-  const logOutUser = async () => {
-    try {
-      console.log("Logging out...");
-      await logout.mutateAsync();
-      navigate({ to: "/login" });
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  if (shouldShowMfa) {
-    return (
-      <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
-        <Mfa
-          email={user.email as string}
-          method={requiredMfaMethod}
-          successCallback={mfaSuccessCallback}
-          closeMfa={() => toggleShowMfa.off()}
-        />
-      </div>
-    );
-  }
 
   return (
     <>
@@ -188,13 +45,6 @@ export const OrgSidebar = () => {
                   </MenuItem>
                 )}
               </Link>
-              <Link to="/organization/secret-sharing">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive} icon="lock-closed">
-                    Share Secret
-                  </MenuItem>
-                )}
-              </Link>
               <Link to="/organization/access-management">
                 {({ isActive }) => (
                   <MenuItem isSelected={isActive}>
@@ -205,26 +55,6 @@ export const OrgSidebar = () => {
                   </MenuItem>
                 )}
               </Link>
-              <Link to="/organization/app-connections">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faPlug} className="mr-4" />
-                      App Connections
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
-              <Link to="/organization/gateways">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faDoorClosed} className="mr-4" />
-                      Gateways
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
               <Link to="/organization/billing">
                 {({ isActive }) => (
                   <MenuItem isSelected={isActive}>
@@ -266,6 +96,28 @@ export const OrgSidebar = () => {
                 )}
               </Link>
             </MenuGroup>
+            <MenuGroup title="Resources">
+              <Link to="/organization/app-connections">
+                {({ isActive }) => (
+                  <MenuItem isSelected={isActive}>
+                    <div className="mx-1">
+                      <FontAwesomeIcon icon={faPlug} className="mr-4" />
+                      App Connections
+                    </div>
+                  </MenuItem>
+                )}
+              </Link>
+              <Link to="/organization/gateways">
+                {({ isActive }) => (
+                  <MenuItem isSelected={isActive}>
+                    <div className="mx-1">
+                      <FontAwesomeIcon icon={faDoorClosed} className="mr-4" />
+                      Gateways
+                    </div>
+                  </MenuItem>
+                )}
+              </Link>
+            </MenuGroup>
             <MenuGroup title="Admin Panels">
               {user?.superAdmin && (
                 <Link to="/admin">
@@ -290,6 +142,15 @@ export const OrgSidebar = () => {
                 )}
               </Link>
             </MenuGroup>
+            <MenuGroup title="Others">
+              <Link to="/organization/secret-sharing">
+                {({ isActive }) => (
+                  <MenuItem isSelected={isActive} icon="lock-closed">
+                    Share Secret
+                  </MenuItem>
+                )}
+              </Link>
+            </MenuGroup>
           </Menu>
           <div
             className={`relative mt-10 ${

frontend/src/pages/organization/AccessManagementPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -24,11 +22,6 @@ export const Route = createFileRoute(
   },
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
-      },
       {
         label: "Access Control"
       }

frontend/src/pages/organization/AdminPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { createFileRoute } from "@tanstack/react-router";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { AdminPage } from "./AdminPage";
 
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: AdminPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Admin Console"
       }

frontend/src/pages/organization/AppConnections/AppConnectionsPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { createFileRoute } from "@tanstack/react-router";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { AppConnectionsPage } from "./AppConnectionsPage";
 
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: AppConnectionsPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "App Connections"
       }

frontend/src/pages/organization/AuditLogsPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { createFileRoute } from "@tanstack/react-router";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { AuditLogsPage } from "./AuditLogsPage";
 
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: AuditLogsPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Audit Logs"
       }

frontend/src/pages/organization/CertManagerOverviewPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { CertManagerOverviewPage } from "./CertManagerOverviewPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: CertManagerOverviewPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "Cert Management",
         link: linkOptions({ to: "/organization/cert-manager/overview" })

frontend/src/pages/organization/CertManagerSettingsPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { CertManagerSettingsPage } from "./CertManagerSettingsPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: CertManagerSettingsPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "Cert Management",
         link: linkOptions({ to: "/organization/cert-manager/overview" })

frontend/src/pages/organization/Gateways/GatewayListPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { createFileRoute } from "@tanstack/react-router";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { GatewayListPage } from "./GatewayListPage";
 
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: GatewayListPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Gateways"
       }

frontend/src/pages/organization/GroupDetailsByIDPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: GroupDetailsByIDPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Access Control",
         link: linkOptions({ to: "/organization/access-management" })

frontend/src/pages/organization/IdentityDetailsByIDPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: IdentityDetailsByIDPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Access Control",
         link: linkOptions({ to: "/organization/access-management" })

frontend/src/pages/organization/KmsOverviewPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { KmsOverviewPage } from "./KmsOverviewPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: KmsOverviewPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "KMS",
         link: linkOptions({ to: "/organization/kms/overview" })

frontend/src/pages/organization/KmsSettingsPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { KmsSettingsPage } from "./KmsSettingsPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: KmsSettingsPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "KMS",
         link: linkOptions({ to: "/organization/kms/overview" })

frontend/src/pages/organization/RoleByIDPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { RoleByIDPage } from "./RoleByIDPage";
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: RoleByIDPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Access Control",
         link: linkOptions({ to: "/organization/access-management" })

frontend/src/pages/organization/SecretManagerOverviewPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute } from "@tanstack/react-router";
 
 import { SecretManagerOverviewPage } from "./SecretManagerOverviewPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: SecretManagerOverviewPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "Secret Management"
       }

frontend/src/pages/organization/SecretManagerSettingsPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { SecretManagerSettingsPage } from "./SecretManagerSettingsPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: SecretManagerSettingsPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "Secret Management",
         link: linkOptions({ to: "/organization/secret-manager/overview" })

frontend/src/pages/organization/SecretScanningOverviewPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { SecretScanningOverviewPage } from "./SecretScanningOverviewPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: SecretScanningOverviewPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "Secret Scanning",
         link: linkOptions({ to: "/organization/secret-scanning/overview" })

frontend/src/pages/organization/SecretScanningSettingsPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { SecretScanningSettingsPage } from "./SecretScanningSettingsPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: SecretScanningSettingsPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "Secret Scanning",
         link: linkOptions({ to: "/organization/secret-scanning/overview" })

frontend/src/pages/organization/SecretSharingPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -21,11 +19,6 @@ export const Route = createFileRoute(
   },
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
-      },
       {
         label: "Secret Sharing"
       }

frontend/src/pages/organization/SecretSharingSettingsPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
@@ -20,11 +18,6 @@ export const Route = createFileRoute(
   },
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
-      },
       {
         label: "Secret Sharing",
         link: linkOptions({ to: "/organization/secret-sharing" })

frontend/src/pages/organization/SettingsPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -20,11 +18,6 @@ export const Route = createFileRoute(
   },
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
-      },
       {
         label: "Settings"
       }

frontend/src/pages/organization/SshOverviewPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { SshOverviewPage } from "./SshOverviewPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: SshOverviewPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "SSH",
         link: linkOptions({ to: "/organization/ssh/overview" })

frontend/src/pages/organization/SshSettingsPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { SshSettingsPage } from "./SshSettingsPage";
@@ -10,10 +8,6 @@ export const Route = createFileRoute(
   component: SshSettingsPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
       {
         label: "SSH",
         link: linkOptions({ to: "/organization/ssh/overview" })

frontend/src/pages/organization/SsoPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -20,11 +18,6 @@ export const Route = createFileRoute(
   },
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
-      },
       {
         label: "Single Sign-On (SSO)"
       }

frontend/src/pages/organization/UserDetailsByIDPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { UserDetailsByIDPage } from "./UserDetailsByIDPage";
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: UserDetailsByIDPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Access Control",
         link: linkOptions({ to: "/organization/access-management" })

frontend/src/pages/project/GroupDetailsByIDPage/route.tsx

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: GroupDetailsByIDPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Access Control",
         link: linkOptions({ to: "/organization/access-management" })