upcoming: [UIE-9564] - Implement Listener Detail - Nodes table (#13147)

* upcoming: [UIE-9564] - Implement Listener Detail - Nodes table.

* Added changeset: Implement Nodes table in listener detail page

* Address review comments.

* Fix unit test.

Author: tanushree-akamai

packages/manager/.changeset/pr-13147-upcoming-features-1764592604792.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Implement Nodes table in Network LoadBalancer Listener detail page ([#13147](https://github.com/linode/manager/pull/13147))

packages/manager/src/features/NetworkLoadBalancers/NetworkLoadBalancersDetail/NetworkLoadBalancersListenerDetail/NetworkLoadBalancersListenerDetail.tsx

@@ -10,8 +10,10 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { EntityDetail } from 'src/components/EntityDetail/EntityDetail';
 import { LandingHeader } from 'src/components/LandingHeader';
 
+import { NLB_API_DOCS_LINK } from '../../constants';
 import { NetworkLoadBalancersListenerDetailBody } from './NetworkLoadBalancersListenerDetailBody';
 import { NetworkLoadBalancersListenerDetailHeader } from './NetworkLoadBalancersListenerDetailHeader';
+import { NodesTable } from './NodesTable/NodesTable';
 
 const NetworkLoadBalancersListenerDetail = () => {
   const { id, listenerId } = useParams({
@@ -50,12 +52,13 @@ const NetworkLoadBalancersListenerDetail = () => {
             {
               label: nlb.label,
               position: 2,
+              linkTo: '/netloadbalancers/$id/listeners',
             },
           ],
           pathname: `/netloadbalancers/${id}/listeners/${listenerId}`,
         }}
         docsLabel="Docs"
-        docsLink="https://techdocs.akamai.com/linode-api/changelog/network-load-balancers"
+        docsLink={NLB_API_DOCS_LINK}
         removeCrumbX={2}
         title={`${listener.label}`}
       />
@@ -75,6 +78,7 @@ const NetworkLoadBalancersListenerDetail = () => {
         }
         noBodyBottomBorder={true}
       />
+      <NodesTable listenerId={listener.id} nlbId={nlb.id} />
     </>
   );
 };

packages/manager/src/features/NetworkLoadBalancers/NetworkLoadBalancersDetail/NetworkLoadBalancersListenerDetail/NodesTable/NodesTable.test.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { vi } from 'vitest';
+
+import { networkLoadBalancerNodeFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { NodesTable } from './NodesTable';
+
+const queryMocks = vi.hoisted(() => ({
+  useNetworkLoadBalancerNodesQuery: vi.fn().mockReturnValue({}),
+  useNavigate: vi.fn(),
+  useSearch: vi.fn().mockReturnValue({ query: '' }),
+}));
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useNetworkLoadBalancerNodesQuery:
+      queryMocks.useNetworkLoadBalancerNodesQuery,
+  };
+});
+
+vi.mock('@tanstack/react-router', async () => {
+  const actual = await vi.importActual('@tanstack/react-router');
+  return {
+    ...actual,
+    useNavigate: queryMocks.useNavigate,
+    useSearch: queryMocks.useSearch,
+  };
+});
+
+vi.mock('src/hooks/usePaginationV2', () => ({
+  usePaginationV2: () => ({
+    page: 1,
+    pageSize: 25,
+    handlePageChange: vi.fn(),
+    handlePageSizeChange: vi.fn(),
+  }),
+}));
+
+vi.mock('src/hooks/useOrderV2', () => ({
+  useOrderV2: () => ({
+    order: 'asc',
+    orderBy: 'id',
+    handleOrderChange: vi.fn(),
+  }),
+}));
+
+vi.mock('@linode/search', () => ({
+  getAPIFilterFromQuery: (query: string) => ({
+    filter: {},
+    error: null,
+  }),
+}));
+
+describe('NodesTable', () => {
+  const mockNodes = networkLoadBalancerNodeFactory.buildList(5);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders a loading state', () => {
+    queryMocks.useNetworkLoadBalancerNodesQuery.mockReturnValue({
+      isLoading: true,
+    });
+
+    const { getByTestId } = renderWithTheme(
+      <NodesTable listenerId={2} nlbId={1} />
+    );
+
+    expect(getByTestId('circle-progress')).toBeVisible();
+  });
+
+  it('renders nodes table with correct columns', () => {
+    queryMocks.useNetworkLoadBalancerNodesQuery.mockReturnValue({
+      isLoading: false,
+      data: { data: mockNodes, results: 5 },
+    });
+
+    const { getByText } = renderWithTheme(
+      <NodesTable listenerId={2} nlbId={1} />
+    );
+
+    expect(getByText('Node Label')).toBeVisible();
+    expect(getByText('ID')).toBeVisible();
+    expect(getByText('Linode ID')).toBeVisible();
+    expect(getByText('VPC IPv6')).toBeVisible();
+  });
+
+  it('renders nodes count in header', () => {
+    queryMocks.useNetworkLoadBalancerNodesQuery.mockReturnValue({
+      isLoading: false,
+      data: { data: mockNodes, results: 5 },
+    });
+
+    const { getByText } = renderWithTheme(
+      <NodesTable listenerId={2} nlbId={1} />
+    );
+
+    expect(getByText(/Nodes \(5\)/)).toBeVisible();
+  });
+
+  it('renders a Nodes table', () => {
+    const nodeFactory = networkLoadBalancerNodeFactory.build({
+      id: 123,
+      linode_id: 456,
+    });
+    queryMocks.useNetworkLoadBalancerNodesQuery.mockReturnValue({
+      isLoading: false,
+      data: { data: [nodeFactory], results: 1, page: 1, page_size: 25 },
+    });
+
+    const { getByText, getByTestId, getByRole } = renderWithTheme(
+      <NodesTable listenerId={2} nlbId={1} />
+    );
+
+    const link = getByRole('link', { name: `${nodeFactory.linode_id}` });
+    expect(link).toHaveAttribute('href', `/linodes/${nodeFactory.linode_id}`);
+
+    expect(getByText('Nodes (1)')).toBeVisible();
+    expect(getByTestId(`nlb-node-row-${nodeFactory.id}`)).toBeVisible();
+    expect(getByText(nodeFactory.label)).toBeVisible();
+    expect(getByText(nodeFactory.id)).toBeVisible();
+    expect(getByText(nodeFactory.linode_id)).toBeVisible();
+  });
+
+  it('renders table rows for each node', () => {
+    queryMocks.useNetworkLoadBalancerNodesQuery.mockReturnValue({
+      isLoading: false,
+      data: { data: mockNodes, results: 5 },
+    });
+
+    const { getByText } = renderWithTheme(
+      <NodesTable listenerId={2} nlbId={1} />
+    );
+
+    mockNodes.forEach((node) => {
+      expect(getByText(node.label)).toBeVisible();
+    });
+  });
+
+  it('renders an empty Nodes table if there are no nodes', () => {
+    queryMocks.useNetworkLoadBalancerNodesQuery.mockReturnValue({
+      isLoading: false,
+      data: { data: [], results: 0 },
+    });
+
+    const { getByText } = renderWithTheme(
+      <NodesTable listenerId={2} nlbId={1} />
+    );
+
+    expect(getByText('Nodes (0)')).toBeVisible();
+    expect(getByText('No nodes are assigned to this listener')).toBeVisible();
+  });
+
+  it('renders error state when query fails', () => {
+    queryMocks.useNetworkLoadBalancerNodesQuery.mockReturnValue({
+      isLoading: false,
+      error: [{ reason: 'Failed to fetch nodes' }],
+    });
+
+    const { getByText } = renderWithTheme(
+      <NodesTable listenerId={2} nlbId={1} />
+    );
+
+    expect(getByText('Failed to fetch nodes')).toBeVisible();
+  });
+
+  it('renders search field with correct placeholder', () => {
+    queryMocks.useNetworkLoadBalancerNodesQuery.mockReturnValue({
+      isLoading: false,
+      data: { data: mockNodes, results: 5 },
+    });
+
+    const { getByPlaceholderText } = renderWithTheme(
+      <NodesTable listenerId={2} nlbId={1} />
+    );
+
+    const searchField = getByPlaceholderText(
+      'Search Node ID, Linode ID or IP address'
+    );
+    expect(searchField).toBeVisible();
+  });
+});