From 206b1870550b01695484652a8d75ac6a3b4ce575 Mon Sep 17 00:00:00 2001
From: Robert Gingras <rgingras@mieweb.com>
Date: Thu, 9 Jul 2026 11:22:31 -0400
Subject: [PATCH] Display auto-assigned external port for TCP/UDP services

The external port for TCP/UDP transport services is auto-assigned by the
backend and already serialized by the API, but it was never shown in the
UI. Surface it (read-only) in each TCP/UDP service row of the container
form; new, unsaved services show "Auto-assigned on save".
---
 .../src/pages/containers/ContainerFormPage.tsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/create-a-container/client/src/pages/containers/ContainerFormPage.tsx b/create-a-container/client/src/pages/containers/ContainerFormPage.tsx
index 93792134..ad7079de 100644
--- a/create-a-container/client/src/pages/containers/ContainerFormPage.tsx
+++ b/create-a-container/client/src/pages/containers/ContainerFormPage.tsx
@@ -52,6 +52,7 @@ const serviceSchema = z
     id: z.number().optional(),
     type: z.enum(['http', 'https', 'tcp', 'udp', 'srv']),
     internalPort: z.string(),
+    externalPort: z.number().optional(),
     externalHostname: z.string().optional(),
     externalDomainId: z.string().optional(),
     dnsName: z.string().optional(),
@@ -183,6 +184,7 @@ export function ContainerFormPage() {
                   : 'http'
                 : (s.transportService?.protocol ?? 'tcp'),
           internalPort: String(s.internalPort),
+          externalPort: s.transportService?.externalPort,
           externalHostname: s.httpService?.externalHostname || '',
           externalDomainId: s.httpService ? String(s.httpService.externalDomainId) : '',
           dnsName: s.dnsService?.dnsName || '',
@@ -627,6 +629,20 @@ export function ContainerFormPage() {
                       />
                     </div>
                   )}
+                  {(svc.type === 'tcp' || svc.type === 'udp') && (
+                    <div>
+                      <p className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                        External port
+                      </p>
+                      <p className="font-mono text-sm">
+                        {svc.externalPort ?? (
+                          <span className="text-muted-foreground">
+                            Auto-assigned on save
+                          </span>
+                        )}
+                      </p>
+                    </div>
+                  )}
                   {svc.type === 'srv' && (
                     <Input
                       label="DNS name"