New breadcrumbs for IPAM pages (#7576)

Author: bilalabbad

frontend/app/src/app/router.tsx

@@ -19,7 +19,6 @@ import type { BreadcrumbItem } from "@/shared/components/layout/breadcrumb-navig
 
 import { RequireAuth } from "@/entities/authentication/ui/require-auth";
 import { BranchesProvider } from "@/entities/branches/ui/branches-provider";
-import { constructPathForIpam } from "@/entities/ipam/utils";
 import { RESOURCE_GENERIC_KIND } from "@/entities/resource-manager/constants";
 import { SchemaProvider } from "@/entities/schema/ui/providers/schema-provider";
 
@@ -383,27 +382,9 @@ export const router = createBrowserRouter([
               },
               {
                 path: "ipam",
-                handle: {
-                  breadcrumb: () => {
-                    return {
-                      type: "link",
-                      label: "IP Address Manager",
-                      to: constructPathForIpam("/ipam"),
-                    } as BreadcrumbItem;
-                  },
-                },
                 children: [
                   {
                     path: "namespaces",
-                    handle: {
-                      breadcrumb: () => {
-                        return {
-                          type: "link",
-                          label: "namespaces",
-                          to: constructPath("/ipam/namespaces"),
-                        } satisfies BreadcrumbItem;
-                      },
-                    },
                     children: [
                       {
                         index: true,
@@ -426,15 +407,6 @@ export const router = createBrowserRouter([
               {
                 path: "ipam",
                 lazy: () => import("@/pages/ipam/ipam-layout"),
-                handle: {
-                  breadcrumb: () => {
-                    return {
-                      type: "link",
-                      label: "IP Address Manager",
-                      to: constructPathForIpam("/ipam"),
-                    } as BreadcrumbItem;
-                  },
-                },
                 children: [
                   {
                     index: true,

frontend/app/src/entities/ipam/constants.ts

@@ -8,6 +8,8 @@ export const IP_ADDRESS_AVAILABLE_KIND = "InternalIPRangeAvailable" as const;
 export const IP_PREFIX_GENERIC = "BuiltinIPPrefix";
 export const IP_PREFIX_AVAILABLE_KIND = "InternalIPPrefixAvailable";
 
+export const IP_PREFIX_RELATIONSHIP_NAME = "ip_prefix";
+
 export const TREE_ROOT_ID = "root" as const;
 
 export const IPAM_QSP = {

frontend/app/src/entities/ipam/ip-addresses/utils/get-ip-address-relationships-visible-in-list-view.ts

@@ -1,11 +1,12 @@
+import { IP_PREFIX_RELATIONSHIP_NAME } from "@/entities/ipam/constants";
 import { getRelationshipsVisibleInListView } from "@/entities/nodes/object/utils/get-relationships-visible-in-list-view";
 import type { RelationshipSchema } from "@/entities/schema/types";
 
 export function getIpAddressRelationshipsVisibleInListView(
   relationships: Array<RelationshipSchema>
 ): Array<RelationshipSchema> {
   const ipPrefixRelationshipSchema = relationships.find(
-    (relationship) => relationship.name === "ip_prefix"
+    (relationship) => relationship.name === IP_PREFIX_RELATIONSHIP_NAME
   );
 
   const otherRelationshipSchema = getRelationshipsVisibleInListView(relationships);

frontend/app/src/shared/components/layout/breadcrumb-navigation/breadcrumb-ip-namespaces.tsx

@@ -0,0 +1,19 @@
+import { BreadcrumbIpamBase } from "@/shared/components/layout/breadcrumb-navigation/breadcrumb-ipam";
+import { BreadcrumbObjects } from "@/shared/components/layout/breadcrumb-navigation/breadcrumb-objects";
+import { BreadcrumbItemSchema } from "@/shared/components/layout/breadcrumb-navigation/items/breadcrumb-item-schema";
+
+import { IP_NAMESPACE_GENERIC } from "@/entities/ipam/constants";
+import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
+
+export function BreadcrumbIpNamespaces() {
+  const { schema } = useSchema(IP_NAMESPACE_GENERIC);
+
+  if (!schema) return null;
+
+  return (
+    <BreadcrumbIpamBase>
+      <BreadcrumbItemSchema schema={schema} />
+      <BreadcrumbObjects />
+    </BreadcrumbIpamBase>
+  );
+}

frontend/app/src/shared/components/layout/breadcrumb-navigation/breadcrumb-ipam.tsx

@@ -0,0 +1,110 @@
+import { keepPreviousData } from "@tanstack/react-query";
+import type React from "react";
+import { useParams } from "react-router";
+
+import { BreadcrumbObjectDetailsHierarchy } from "@/shared/components/layout/breadcrumb-navigation/breadcrumb-object-details-hierarchy";
+import { BreadcrumbItemObject } from "@/shared/components/layout/breadcrumb-navigation/items/breadcrumb-item-object";
+import {
+  Breadcrumb,
+  BreadcrumbError,
+  BreadcrumbItem,
+  BreadcrumbLoading,
+} from "@/shared/components/ui/breadcrumb";
+
+import {
+  IP_ADDRESS_GENERIC,
+  IP_PREFIX_GENERIC,
+  IP_PREFIX_RELATIONSHIP_NAME,
+} from "@/entities/ipam/constants";
+import { constructPathForIpam } from "@/entities/ipam/utils";
+import { useGetObject } from "@/entities/nodes/object/domain/get-object.query";
+import type { NodeRelationshipOne } from "@/entities/nodes/types";
+import type { ModelSchema } from "@/entities/schema/types";
+import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
+import { isOfKind } from "@/entities/schema/utils/is-of-kind";
+
+export function BreadcrumbIpam() {
+  const { objectKind, objectId } = useParams();
+  const { schema } = useSchema(objectKind);
+
+  if (!schema || !objectId) return <BreadcrumbIpamBase />;
+
+  return (
+    <BreadcrumbIpamBase>
+      <BreadcrumbIpamContent objectSchema={schema} objectId={objectId} />
+    </BreadcrumbIpamBase>
+  );
+}
+
+export function BreadcrumbIpamBase({ children }: { children?: React.ReactNode }) {
+  return (
+    <Breadcrumb data-testid="breadcrumb-ipam">
+      <BreadcrumbItem href={constructPathForIpam("/ipam")}>IP Address Manager</BreadcrumbItem>
+      {children}
+    </Breadcrumb>
+  );
+}
+
+interface BreadcrumbIpamContentProps {
+  objectSchema: ModelSchema;
+  objectId: string;
+}
+
+function BreadcrumbIpamContent({ objectSchema, objectId }: BreadcrumbIpamContentProps) {
+  if (isOfKind(IP_PREFIX_GENERIC, objectSchema)) {
+    return <BreadcrumbObjectDetailsHierarchy objectSchema={objectSchema} objectId={objectId} />;
+  }
+
+  if (isOfKind(IP_ADDRESS_GENERIC, objectSchema)) {
+    return <BreadcrumbIpAddress ipAddressSchema={objectSchema} ipAddressId={objectId} />;
+  }
+
+  return null;
+}
+
+interface BreadcrumbIpAddressProps {
+  ipAddressSchema: ModelSchema;
+  ipAddressId: string;
+}
+
+export function BreadcrumbIpAddress({ ipAddressSchema, ipAddressId }: BreadcrumbIpAddressProps) {
+  const { schema: ipPrefixSchema } = useSchema(IP_PREFIX_GENERIC);
+  const { data, isPending, error } = useGetObject(
+    {
+      objectSchema: ipAddressSchema,
+      objectId: ipAddressId,
+    },
+    {
+      placeholderData: keepPreviousData,
+    }
+  );
+
+  if (isPending) {
+    return <BreadcrumbLoading />;
+  }
+
+  if (error) {
+    return <BreadcrumbError error={error} />;
+  }
+
+  const ipPrefixRelationshipSchema = ipAddressSchema.relationships?.find(
+    ({ name }) => name === IP_PREFIX_RELATIONSHIP_NAME
+  );
+  const ipPrefixNode = (data.ip_prefix as NodeRelationshipOne | undefined)?.node;
+
+  return (
+    <>
+      {ipPrefixSchema && ipPrefixNode && (
+        <BreadcrumbObjectDetailsHierarchy
+          objectSchema={ipPrefixSchema}
+          objectId={ipPrefixNode.id}
+        />
+      )}
+      <BreadcrumbItemObject
+        node={data}
+        parentId={ipPrefixNode?.id}
+        parentRelationshipSchema={ipPrefixRelationshipSchema}
+      />
+    </>
+  );
+}

frontend/app/src/shared/components/layout/breadcrumb-navigation/breadcrumb-navigation.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { matchPath, type UIMatch, useLocation, useMatches, useParams } from "react-router";
 
 import { BreadcrumbBranches } from "@/shared/components/layout/breadcrumb-navigation/breadcrumb-branches";
+import { BreadcrumbIpNamespaces } from "@/shared/components/layout/breadcrumb-navigation/breadcrumb-ip-namespaces";
+import { BreadcrumbIpam } from "@/shared/components/layout/breadcrumb-navigation/breadcrumb-ipam";
 import { BreadcrumbObjects } from "@/shared/components/layout/breadcrumb-navigation/breadcrumb-objects";
 import {
   BreadcrumbDynamicElement,
@@ -23,6 +25,14 @@ export default function BreadcrumbNavigation() {
     return <BreadcrumbBranches />;
   }
 
+  if (matchPath({ path: "/ipam/namespaces", end: false }, pathname)) {
+    return <BreadcrumbIpNamespaces />;
+  }
+
+  if (matchPath({ path: "/ipam", end: false }, pathname)) {
+    return <BreadcrumbIpam />;
+  }
+
   if (objectKind) {
     return <BreadcrumbObjects />;
   }