Improve port bindings validation to follow Docker specification (#1019)

This PR updates the frontend validation for port bindings to fully
support the Docker specification. Previously, the input validation only
allowed the port:port format, which is incomplete

Examples that are now accepted:
  - "3000"
  - "3000-3005"
  - "8000:8000"
  - "9090-9091:8080-8081"
  - "49100:22"
  - "8000-9000:80"
  - "127.0.0.1:8001:8001"
  - "127.0.0.1:5000-5010:5000-5010"
  - "::1:6000:6000"
  - "[::1]:6001:6001"
  - "6060:6060/udp"

Signed-off-by: Jasmina <jasmina.piric@secomind.com>

Author: JasminaPiric

frontend/src/forms/CreateRelease.tsx

@@ -1018,7 +1018,7 @@ const ContainerForm = ({
             {...register(`containers.${index}.portBindings` as const)}
             type="text"
             isInvalid={!!errors.containers?.[index]?.portBindings}
-            placeholder="e.g., 8080:80, 443:443"
+            placeholder="e.g., 8080:80, 6060:6060/udp, 127.0.0.1:8001:8001"
           />
           <Form.Control.Feedback type="invalid">
             {errors.containers?.[index]?.portBindings?.message && (

frontend/src/forms/index.ts

@@ -85,7 +85,7 @@ const messages = defineMessages({
   portBindingsFormat: {
     id: "validation.portBindings.format",
     defaultMessage:
-      "Port Bindings must be comma-separated values like '8080:80, 443:443'.",
+      "Port Bindings must be comma-separated values in the format [HOST:]CONTAINER[/PROTOCOL]",
   },
   bindsInvalid: {
     id: "validation.binds.format",
@@ -234,6 +234,11 @@ const envSchema = yup
   })
   .default("{}");
 
+const ipv4PortRegex =
+  /^(\d{1,5}(-\d{1,5})?(:(\d{1,5}(-\d{1,5})?))?(\/(tcp|udp))?|(\d{1,3}\.){3}\d{1,3}:\d{1,5}(-\d{1,5})?:\d{1,5}(-\d{1,5})?(\/(tcp|udp))?)$/;
+const ipv6PortRegex =
+  /^(\[?[0-9a-fA-F:]+\]?:\d{1,5}(-\d{1,5})?:\d{1,5}(-\d{1,5})?(\/(tcp|udp))?)$/;
+
 const portBindingsSchema = yup
   .string()
   .nullable()
@@ -243,7 +248,11 @@ const portBindingsSchema = yup
     message: messages.portBindingsFormat.id,
     test: (value) =>
       !value ||
-      value.split(", ").every((v) => /^[0-9]+:[0-9]+$/.test(v.trim())),
+      value
+        .split(", ")
+        .every(
+          (v) => ipv4PortRegex.test(v.trim()) || ipv6PortRegex.test(v.trim()),
+        ),
   });
 
 const bindingsSchema = yup

frontend/src/i18n/langs/en.json

@@ -2540,7 +2540,7 @@
     "defaultMessage": "{label} must be a positive number."
   },
   "validation.portBindings.format": {
-    "defaultMessage": "Port Bindings must be comma-separated values like '8080:80, 443:443'."
+    "defaultMessage": "Port Bindings must be comma-separated values in the format [HOST:]CONTAINER[/PROTOCOL]"
   },
   "validation.required": {
     "defaultMessage": "Required."