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,207 @@
+import { fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
+import * as React from 'react';
+
+import { reservedIPsFactory } from 'src/factories/networking';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { http, HttpResponse, server } from 'src/mocks/testServer';
+import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ReservedIpsLanding } from './ReservedIpsLanding';
+import { headers } from './ReservedIpsLandingEmptyStateData';
+
+const queryMocks = vi.hoisted(() => ({
+  useProfile: vi.fn().mockReturnValue({ data: { restricted: false } }),
+}));
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useProfile: queryMocks.useProfile,
+  };
+});
+
+beforeAll(() => mockMatchMedia());
+
+const loadingTestId = 'circle-progress';
+const reservedIPsEndpoint = '*/networking/reserved/ips';
+
+describe('Reserved IPs Landing', () => {
+  it('renders loading state initially', async () => {
+    server.use(
+      http.get(reservedIPsEndpoint, () => {
+        return HttpResponse.json(makeResourcePage([]));
+      })
+    );
+
+    const { getByTestId } = renderWithTheme(<ReservedIpsLanding />);
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId), {
+      timeout: 3000,
+    });
+  });
+
+  it('renders the empty state when there are no reserved IPs', async () => {
+    server.use(
+      http.get(reservedIPsEndpoint, () => {
+        return HttpResponse.json(makeResourcePage([]));
+      })
+    );
+
+    const { getByTestId, getByText } = renderWithTheme(<ReservedIpsLanding />);
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    expect(getByText(headers.description)).toBeInTheDocument();
+  });
+
+  it('renders the table with reserved IPs', async () => {
+    const reservedIPs = reservedIPsFactory.buildList(3, {
+      region: 'us-east',
+      reserved: true,
+    });
+
+    server.use(
+      http.get(reservedIPsEndpoint, () => {
+        return HttpResponse.json(makeResourcePage(reservedIPs));
+      })
+    );
+
+    const { getAllByText, getByTestId, queryAllByText } = renderWithTheme(
+      <ReservedIpsLanding />
+    );
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId), {
+      timeout: 3000,
+    });
+
+    // Table column headers
+    getAllByText('IP Address');
+    getAllByText('Assigned Resource');
+    getAllByText('Region');
+    getAllByText('Tags');
+
+    // Check mocked IP addresses rendered in the table
+    queryAllByText(reservedIPs[0].address);
+  });
+
+  it('renders the "Reserve an IP Address" button', async () => {
+    server.use(
+      http.get(reservedIPsEndpoint, () => {
+        return HttpResponse.json(makeResourcePage([]));
+      })
+    );
+
+    const { container, getByTestId } = renderWithTheme(<ReservedIpsLanding />);
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const reserveIPButton = container.querySelector('button');
+
+    expect(reserveIPButton).toBeInTheDocument();
+    expect(reserveIPButton).toHaveTextContent('Reserve an IP Address');
+  });
+
+  it('renders a row with action menu for each reserved IP', async () => {
+    const reservedIPs = reservedIPsFactory.buildList(3, {
+      assigned_entity: null,
+      reserved: true,
+    });
+
+    server.use(
+      http.get(reservedIPsEndpoint, () => {
+        return HttpResponse.json(makeResourcePage(reservedIPs));
+      })
+    );
+
+    const { getByLabelText, getByTestId } = renderWithTheme(
+      <ReservedIpsLanding />
+    );
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId), {
+      timeout: 3000,
+    });
+
+    const actionMenu = getByLabelText(
+      `Action menu for Reserved IP ${reservedIPs[0].address}`
+    );
+    expect(actionMenu).toBeInTheDocument();
+  });
+
+  it('opens the action menu with correct options', async () => {
+    const reservedIPs = reservedIPsFactory.buildList(1, {
+      assigned_entity: null,
+      reserved: true,
+    });
+
+    server.use(
+      http.get(reservedIPsEndpoint, () => {
+        return HttpResponse.json(makeResourcePage(reservedIPs));
+      })
+    );
+
+    const { getByLabelText, getByTestId, getByText } = renderWithTheme(
+      <ReservedIpsLanding />
+    );
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId), {
+      timeout: 3000,
+    });
+
+    const actionMenu = getByLabelText(
+      `Action menu for Reserved IP ${reservedIPs[0].address}`
+    );
+
+    await fireEvent.click(actionMenu);
+
+    getByText('Edit');
+    getByText('Unreserve');
+  });
+
+  describe('Restricted users', () => {
+    it('should have the "Reserve an IP Address" button disabled for restricted users', async () => {
+      queryMocks.useProfile.mockReturnValue({ data: { restricted: true } });
+
+      server.use(
+        http.get(reservedIPsEndpoint, () => {
+          return HttpResponse.json(makeResourcePage([]));
+        })
+      );
+
+      const { container, getByTestId } = renderWithTheme(
+        <ReservedIpsLanding />
+      );
+
+      await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+      const reserveIPButton = container.querySelector('button');
+
+      expect(reserveIPButton).toBeInTheDocument();
+      expect(reserveIPButton).toHaveTextContent('Reserve an IP Address');
+    });
+
+    it('should have the "Reserve an IP Address" button enabled for users with full access', async () => {
+      queryMocks.useProfile.mockReturnValue({ data: { restricted: false } });
+
+      server.use(
+        http.get(reservedIPsEndpoint, () => {
+          return HttpResponse.json(makeResourcePage([]));
+        })
+      );
+
+      const { container, getByTestId } = renderWithTheme(
+        <ReservedIpsLanding />
+      );
+
+      await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+      const reserveIPButton = container.querySelector('button');
+
+      expect(reserveIPButton).toBeInTheDocument();
+      expect(reserveIPButton).toHaveTextContent('Reserve an IP Address');
+      expect(reserveIPButton).toBeEnabled();
+    });
+  });
+});