Fix ingress port validation issue

https://github.com/rancher/rancher/issues/11822

lib/shared/addon/components/form-ingress-backends/component.js

@@ -1,14 +1,17 @@
 import { get, set, observer } from '@ember/object'
 import Component from '@ember/component';
 import layout from './template';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
   layout,
+  intl: service(),
 
   ingress: null,
   rule: null,
   checked: null,
   editing: true,
+  errors: null,
 
   pathArray: null,
 
@@ -65,6 +68,23 @@ export default Component.extend({
     }
   },
 
+  validate: observer('pathArray.@each.{path,backendType,targetPort,serviceId}', function () {
+    let intl = this.get('intl');
+    let errors = [];
+
+    const pathArray = get(this, 'pathArray');
+    const invalid = pathArray.some(path => !path.targetPort);
+    if (invalid) {
+      errors.push(intl.t('validation.required', { key: intl.t('generic.port') }));
+    }
+
+    if (errors.length) {
+      this.set('errors', errors);
+    } else {
+      this.set('errors', null);
+    }
+  }),
+
   pathsChanged: observer('pathArray.@each.{path,backendType,targetPort,serviceId}', 'checked', function () {
     if (get(this, 'checked')) {
       this.setDefaultBackend();

lib/shared/addon/components/form-ingress-rows/component.js

@@ -9,6 +9,7 @@ export default Component.extend({
   rules: null,
   ingress: null,
   editing: true,
+  errors: null,
   defaultBackend: null,
 
   checked: false,

lib/shared/addon/components/form-ingress-rows/template.hbs

@@ -30,5 +30,5 @@
       <hr class="mt-20 mb-20" />
     {{/unless}}
 
-    {{form-ingress-backends ingress=ingress checked=checked rule=rule editing=editing}}
+    {{form-ingress-backends errors=errors ingress=ingress checked=checked rule=rule editing=editing}}
   </div>

lib/shared/addon/components/form-ingress-rule/template.hbs

@@ -7,6 +7,7 @@
     removeRule=(action 'removeRule')
     updateDefaultBackend=(action 'updateDefaultBackend')
     defaultBackend=defaultBackend
+    errors=errors
     rules=rules
     rule=rule
     ingress=ingress

lib/shared/addon/components/new-edit-ingress/component.js

@@ -16,7 +16,7 @@ export default Component.extend(NewOrEdit, {
   namespacedCertificates: null,
   certificates: null,
 
-  ruleErrors: null,
+  ruleBackendErrors: null,
 
   primaryResource: alias('ingress'),
 
@@ -80,7 +80,7 @@ export default Component.extend(NewOrEdit, {
     let pr = get(this, 'primaryResource');
     let errors = pr.validationErrors() || [];
 
-    errors.pushObjects(get(this, 'ruleErrors') || []);
+    errors.pushObjects(get(this, 'ruleBackendErrors') || []);
     errors.pushObjects(get(this, 'namespaceErrors') || []);
 
     if (!get(this, 'ingress.rules.length') && !get(this, 'ingress.defaultBackend')) {

lib/shared/addon/components/new-edit-ingress/template.hbs

@@ -24,7 +24,7 @@
 <section class="mt-40 horizontal-form container-fluid">
   {{form-ingress-rule
     ingress=ingress
-    errors=ruleErrors
+    errors=ruleBackendErrors
     editing=true
   }}
   <hr class="mt-30 mb-30" />

translations/en-us.yaml

@@ -63,6 +63,7 @@ generic:
   none: None
   owner: Owner
   paste: Paste
+  port: Port
   ports: Ports
   remove: Remove
   role: Role