frontend: PortForward: Add custom local port input dialog for port forwarding

[jaehanbyun]

Summary

This PR adds a custom local port selection dialog for port forwarding, allowing users to specify their preferred local ports (e.g., 8080) instead of only using auto-assigned ports.

Related Issue

N/A

Changes

• Added PortForwardStartDialog component for custom port input
• Updated PortForward.tsx to integrate the dialog with existing port forward flow
• Updated index.tsx (port forwarding list) to use the dialog for Start action
• Added port range validation with Docker Desktop detection

Steps to Test

1. Navigate to a Pod or Service details page
2. Click "Forward port" button on any container port
3. Verify the dialog opens with appropriate placeholder
4. Test custom port input:
   • Enter a valid port (e.g., 8080) and click "Start" - should succeed
   • Enter an invalid port (e.g., 99999) - should show validation error
   • Leave empty and click "Start" - should auto-assign a port
5. For Docker Desktop users, verify port range validation:
   • Enter 8080 - should show error "Docker Desktop requires ports in range 30000-32000"
   • Enter 30080 - should succeed
6. Test Enter key submission in the port input field
7. Navigate to Port Forwarding list page and test "Start" action with the dialog

Screenshots (if applicable)

Screen.Recording.2025-11-08.at.10.41.28.PM.mov

Notes for the Reviewer

• [e.g., This touches the i18n layer, so please check language consistency.]

[Copilot]

Pull Request Overview

This PR introduces a user-facing dialog for port forwarding configuration, allowing users to specify custom local ports when starting port forwards in Docker Desktop environments. The key changes include:

• Added a new PortForwardStartDialog component for user port input with validation
• Exported Docker Desktop port range constants (DOCKER_DESKTOP_MIN_PORT, DOCKER_DESKTOP_MAX_PORT) for reuse
• Modified port forwarding logic to only auto-assign ports when the user doesn't specify one
• Added translation strings for new dialog UI elements across multiple locales

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/src/components/portforward/PortForwardStartDialog.tsx	New dialog component for port input with Docker Desktop range validation
frontend/src/components/portforward/index.tsx	Integrated dialog into port forward list UI, replaced immediate start with dialog-based confirmation
frontend/src/components/common/Resource/PortForward.tsx	Exported port range constants, refactored port assignment logic to support user input, integrated dialog into resource view
frontend/src/i18n/locales/*/translation.json	Added translation keys for dialog UI (en with values, others empty)
frontend/src/plugin/snapshots/pluginLib.snapshot	Updated snapshot to include exported port constants

---

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

[jaehanbyun]

Ah, the example video didn’t include the custom port setup. I’ll upload an updated version.

[jaehanbyun]

Ah, the example video didn’t include the custom port setup. I’ll upload an updated version.

I've updated the video.

[illume]

🎉 thanks!

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: illume, jaehanbyun

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [illume]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment