upcoming: [UIE-10430] - Reserved IP: Implement Landing Screen.

packages/manager/.changeset/pr-13549-upcoming-features-1774976696073.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Implemented Reserved IPs Landing Page ([#13549](https://github.com/linode/manager/pull/13549))

packages/manager/src/factories/networking.ts

@@ -17,3 +17,55 @@ export const ipAddressFactory = Factory.Sync.makeFactory<IPAddress>({
   reserved: false,
   tags: [],
 });
+
+const REGIONS = ['pl-labkrk-2', 'us-labedgeeat-2', 'us-labedgeeat-3'];
+const SAMPLE_TAGS = [
+  ['web', 'production', 'db', 'staging', 'lb', 'api', 'internal'],
+  ['db', 'staging'],
+  ['lb'],
+  ['api', 'internal'],
+  [],
+];
+const SAMPLE_ENTITIES: Array<IPAddress['assigned_entity']> = [
+  {
+    id: 1,
+    label: 'web-server-01',
+    type: 'linode',
+    url: '/v4/linode/instances/1',
+  },
+  {
+    id: 2,
+    label: 'ubuntu-pl-labkrk-2',
+    type: 'linode',
+    url: '/v4/linode/instances/2',
+  },
+  null,
+  {
+    id: 5,
+    label: 'my-nodebalancer',
+    type: 'nodebalancer',
+    url: '/v4/nodebalancers/5',
+  },
+  null,
+];
+
+export const reservedIPsFactory = Factory.Sync.makeFactory<IPAddress>({
+  address: Factory.each((id) => `203.0.113.${id}`),
+  assigned_entity: Factory.each(
+    (id) => SAMPLE_ENTITIES[id % SAMPLE_ENTITIES.length]
+  ),
+  gateway: '203.0.113.1',
+  interface_id: null,
+  linode_id: Factory.each((id) => {
+    const entity = SAMPLE_ENTITIES[id % SAMPLE_ENTITIES.length];
+    return entity?.type === 'linode' ? entity.id : null;
+  }),
+  prefix: 24,
+  public: true,
+  rdns: '172-24-226-80.ip.linodeusercontent.com',
+  region: Factory.each((id) => REGIONS[id % REGIONS.length]),
+  reserved: true,
+  subnet_mask: '255.255.255.0',
+  tags: Factory.each((id) => SAMPLE_TAGS[id % SAMPLE_TAGS.length]),
+  type: 'ipv4',
+});

packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsActionMenu.test.tsx

@@ -0,0 +1,62 @@
+import { userEvent } from '@testing-library/user-event';
+import * as React from 'react';
+
+import { reservedIPsFactory } from 'src/factories/networking';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ReservedIpsActionMenu } from './ReservedIpsActionMenu';
+
+import type { ReservedIpsActionHandlers } from './ReservedIpsActionMenu';
+
+describe('ReservedIpsActionMenu', () => {
+  const mockHandlers: ReservedIpsActionHandlers = {
+    onEdit: vi.fn(),
+    onUnreserve: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the action menu with the correct aria-label', () => {
+    const ip = reservedIPsFactory.build({ address: '203.0.113.5' });
+
+    const { getByLabelText } = renderWithTheme(
+      <ReservedIpsActionMenu handlers={mockHandlers} ip={ip} />
+    );
+
+    expect(
+      getByLabelText('Action menu for Reserved IP 203.0.113.5')
+    ).toBeVisible();
+  });
+
+  it('calls onEdit when Edit is clicked', async () => {
+    const ip = reservedIPsFactory.build();
+
+    const { getByLabelText, getByText } = renderWithTheme(
+      <ReservedIpsActionMenu handlers={mockHandlers} ip={ip} />
+    );
+
+    await userEvent.click(
+      getByLabelText(`Action menu for Reserved IP ${ip.address}`)
+    );
+    await userEvent.click(getByText('Edit'));
+
+    expect(mockHandlers.onEdit).toHaveBeenCalledWith(ip);
+  });
+
+  it('calls onUnreserve when Unreserve is clicked', async () => {
+    const ip = reservedIPsFactory.build();
+
+    const { getByLabelText, getByText } = renderWithTheme(
+      <ReservedIpsActionMenu handlers={mockHandlers} ip={ip} />
+    );
+
+    await userEvent.click(
+      getByLabelText(`Action menu for Reserved IP ${ip.address}`)
+    );
+    await userEvent.click(getByText('Unreserve'));
+
+    expect(mockHandlers.onUnreserve).toHaveBeenCalledWith(ip);
+  });
+});

packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsActionMenu.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+
+import type { IPAddress } from '@linode/api-v4';
+import type { Action } from 'src/components/ActionMenu/ActionMenu';
+
+export interface ReservedIpsActionHandlers {
+  onEdit: (ip: IPAddress) => void;
+  onUnreserve: (ip: IPAddress) => void;
+}
+
+interface Props {
+  handlers: ReservedIpsActionHandlers;
+  ip: IPAddress;
+}
+
+export const ReservedIpsActionMenu = ({ handlers, ip }: Props) => {
+  const actions: Action[] = [
+    {
+      onClick: () => handlers.onEdit(ip),
+      title: 'Edit',
+    },
+    {
+      onClick: () => handlers.onUnreserve(ip),
+      title: 'Unreserve',
+    },
+  ];
+
+  return (
+    <ActionMenu
+      actionsList={actions}
+      ariaLabel={`Action menu for Reserved IP ${ip.address}`}
+    />
+  );
+};

packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLanding.test.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+
+import { routeTree } from 'src/routes';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ReservedIpsLanding } from './ReservedIpsLanding';
+
+const mockQueryReturn = vi.hoisted(() =>
+  vi.fn().mockReturnValue({
+    data: undefined,
+    error: null,
+    isLoading: true,
+  })
+);
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useReservedIPsQuery: mockQueryReturn,
+  };
+});
+
+describe('ReservedIpsLanding', () => {
+  it('renders a loading state while data is fetching', () => {
+    const { getByTestId } = renderWithTheme(<ReservedIpsLanding />, {
+      initialRoute: '/reserved-ips',
+      routeTree,
+    });
+
+    expect(getByTestId('circle-progress')).toBeInTheDocument();
+  });
+
+  it('renders an error state when the query fails', () => {
+    mockQueryReturn.mockReturnValue({
+      data: undefined,
+      error: [{ reason: 'Something went wrong.' }],
+      isLoading: false,
+    });
+
+    const { getByText } = renderWithTheme(<ReservedIpsLanding />, {
+      initialRoute: '/reserved-ips',
+      routeTree,
+    });
+
+    expect(getByText('Something went wrong.')).toBeVisible();
+  });
+
+  it('renders the empty state when there are no reserved IPs', () => {
+    mockQueryReturn.mockReturnValue({
+      data: { data: [], results: 0 },
+      error: null,
+      isLoading: false,
+    });
+
+    const { getByText } = renderWithTheme(<ReservedIpsLanding />, {
+      initialRoute: '/reserved-ips',
+      routeTree,
+    });
+
+    expect(getByText('Reserve an IP Address')).toBeVisible();
+  });
+
+  it('renders the table when reserved IPs are returned', () => {
+    mockQueryReturn.mockReturnValue({
+      data: {
+        data: [
+          {
+            address: '203.0.113.1',
+            assigned_entity: null,
+            gateway: '203.0.113.0',
+            interface_id: null,
+            linode_id: null,
+            prefix: 24,
+            public: true,
+            rdns: null,
+            region: 'us-east',
+            reserved: true,
+            subnet_mask: '255.255.255.0',
+            tags: ['web'],
+            type: 'ipv4',
+          },
+        ],
+        results: 1,
+      },
+      error: null,
+      isLoading: false,
+    });
+
+    const { getByText } = renderWithTheme(<ReservedIpsLanding />, {
+      initialRoute: '/reserved-ips',
+      routeTree,
+    });
+
+    expect(getByText('Reserved IP Addresses')).toBeVisible();
+    expect(getByText('203.0.113.1')).toBeVisible();
+  });
+});

packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLanding.tsx

@@ -1,28 +1,113 @@
-import { Notice } from '@linode/ui';
+import { useReservedIPsQuery } from '@linode/queries';
+import { CircleProgress, ErrorState } from '@linode/ui';
 import * as React from 'react';
 
 import { LandingHeader } from 'src/components/LandingHeader';
+import { useOrderV2 } from 'src/hooks/useOrderV2';
+import { usePaginationV2 } from 'src/hooks/usePaginationV2';
+import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { ReservedIpsLandingEmptyState } from './ReservedIpsLandingEmptyState';
+import { ReservedIpsLandingTable } from './ReservedIpsLandingTable';
+
+import type { ReservedIpsActionHandlers } from './ReservedIpsActionMenu';
+
+const preferenceKey = 'reserved-ips';
 
 export const ReservedIpsLanding = () => {
-  // TODO: Replace with actual data check once API queries are implemented
-  const showEmptyState = true;
+  // TODO: These will be used by the Edit drawer and Unreserve dialog component
+  // const [_selectedIP, setSelectedIP] = React.useState<IPAddress>();
+  // const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+
+  // const [_isEditDrawerOpen, setIsEditDrawerOpen] = React.useState(false);
+
+  // const [_isUnreserveDialogOpen, setIsUnreserveDialogOpen] = React.useState(false);
+
+  const handlers: ReservedIpsActionHandlers = {
+    onEdit: (ip) => {
+      // setSelectedIP(ip);
+      // setIsEditDrawerOpen(true);
+    },
+    onUnreserve: (ip) => {
+      // setSelectedIP(ip);
+      // setIsUnreserveDialogOpen(true);
+    },
+  };
 
-  if (showEmptyState) {
+  const pagination = usePaginationV2({
+    currentRoute: '/reserved-ips',
+    preferenceKey,
+  });
+
+  const { handleOrderChange, order, orderBy } = useOrderV2({
+    initialRoute: {
+      defaultOrder: {
+        order: 'asc',
+        orderBy: 'address',
+      },
+      from: '/reserved-ips',
+    },
+    preferenceKey: `${preferenceKey}-order`,
+  });
+
+  const filter = {
+    ['+order']: order,
+    ['+order_by']: orderBy,
+  };
+
+  const {
+    data: reservedIps,
+    error,
+    isLoading,
+  } = useReservedIPsQuery(
+    {
+      page: pagination.page,
+      page_size: pagination.pageSize,
+    },
+    filter
+  );
+
+  if (error) {
+    return (
+      <ErrorState
+        errorText={
+          getAPIErrorOrDefault(
+            error,
+            'Error loading your Reserved IP addresses.'
+          )[0].reason
+        }
+      />
+    );
+  }
+
+  if (isLoading) {
+    return <CircleProgress />;
+  }
+
+  if (!reservedIps?.data.length) {
     return <ReservedIpsLandingEmptyState />;
   }
+
   return (
     <>
       <LandingHeader
-        breadcrumbProps={{
-          pathname: 'Reserved IPs',
-          removeCrumbX: 1,
+        createButtonText="Reserve an IP Address"
+        onButtonClick={() => {
+          /*To be updated
+          setIsDrawerOpen(true) */
         }}
         spacingBottom={16}
-        title="Reserved IPs"
+        title="Reserved IP Addresses"
+      />
+      <ReservedIpsLandingTable
+        data={reservedIps?.data}
+        handleOrderChange={handleOrderChange}
+        handlers={handlers}
+        order={order}
+        orderBy={orderBy}
+        pagination={pagination}
+        results={reservedIps?.results}
       />
-      <Notice variant="info">Reserved IPs is coming soon...</Notice>
     </>
   );
 };