upcoming: [UIE-10427] - Reserved IP: Implement IP Address Selection component

[tanushree-akamai]

Description 📝

Implement Re-usable IP Address Selection Component with Reserved IP Support

Changes 🔄

• Added re-usable IP Address Selection component with Mode Selection Radio buttons for Auto and Reserved
• Added Reserved IP Dropdown when "Reserved" mode is selected
• Reserved IP Dropdown displays filtered list of unassigned reserved IPs for the selected region
• Dropdown remains disabled until a region is selected
• Helper text when displayed when no region is selected
• Added Reserve IP Link Button to create and reserve new IPs using the Reserve IP drawer

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

21st May, 2026

Preview 📷

How to test 🧪

Prerequisites

• Enable the Reserved IP feature flag from Dev Tools
• At least one reserved IP exists in your test region (or create one via the Reserve IP drawer)

Verification steps

Note: Complete integration testing will be validated in subsequent PRs related to Linode create and Node balancer create
To test the component in isolation before integration testing:

• Add this code to ReservedIpsLanding.tsx for quick testing:

// filepath: /packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLanding.tsx
import { IPAddressSelection } from '../IPAddressSelection/IPAddressSelection';
import type { IPAddress } from '@linode/api-v4';
import React from 'react';

export const ReservedIpsLanding = () => {
  const [mode, setMode] = React.useState<'auto' | 'reserved'>('auto');
  const [selectedIP, setSelectedIP] = React.useState<IPAddress | null>(null);

  const handleReservedIPSelect = (ip: IPAddress | null) => {
    console.log('Selected IP:', ip);
    setSelectedIP(ip);
  };

  const handleIPModeChange = (mode: 'auto' | 'reserved') => {
    console.log('Mode changed to:', mode);
    setMode(mode);
  };

  return (
    <IPAddressSelection
      value={mode}
      onIPModeChange={handleIPModeChange}
      onReservedIPSelect={handleReservedIPSelect}
      regionId="us-east" // or any region with reserved IPs
      selectedIP={selectedIP}
    />
  );
};

• Navigate to Networking → Reserved IPs page
• Verify the component behavior

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[Copilot]

Pull request overview

Implements a reusable IP Address Selection UI for Reserved IP flows, allowing users to choose between auto-assigned and reserved IPv4 and optionally reserve a new IP via the Reserve IP drawer.

Changes:

• Added IPAddressSelection component with Auto/Reserved mode radios, reserved IP Autocomplete, and “Reserve IP” drawer entrypoint.
• Added filtering of reserved IP options to unassigned IPs in the selected region.
• Added unit tests covering basic rendering, mode switching, reserved IP dropdown behavior, and drawer open behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.

File	Description
packages/manager/src/features/ReservedIps/IPAddressSelection/IPAddressSelection.tsx	New reusable component for selecting auto vs reserved IP and launching Reserve IP drawer.
packages/manager/src/features/ReservedIps/IPAddressSelection/IPAddressSelection.test.tsx	New test suite for the component’s rendering and interactions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #2 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	901 Passing	11 Skipped	38m 4s

Details

Failing Tests
	Spec	Test
❌	object-storage.e2e.spec.ts	Cloud Manager Cypress Tests→object storage end-to-end tests » can update bucket access

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts"