Updating ingress page to include new requests

- Enable freeform target service
- Add status support to LabeledSelect
- Indicate that the target service isn't one of the existing options with LabeledSelect warning status
- Update text

https://github.com/rancher/dashboard/issues/272#issuecomment-642436439

assets/styles/global/_form.scss

@@ -23,6 +23,20 @@ TEXTAREA,
   border: solid $outline-width var(--input-border);
   color: var(--input-text);
 
+  &:not(.focused) {
+    &.success {
+      border: solid 1px var(--success);
+    }
+  
+    &.warning {
+      border: solid 1px var(--warning);
+    }
+  
+    &.error {
+      border: solid 1px var(--error);
+    }
+  }
+
   &:not(.view) {
     background-color: var(--input-bg);
 

components/Banner.vue

@@ -67,7 +67,7 @@ export default {
 
     &.error {
       background: var(--error-banner-bg);
-      border: solid 1px (--error);
+      border: solid 1px var(--error);
       color: var(--error);
     }
   }

components/form/LabeledSelect.vue

@@ -40,6 +40,10 @@ export default {
       type:    Boolean,
       default: false
     },
+    status: {
+      type:      String,
+      default:   null
+    },
     reduce: {
       type:     Function,
       default: (e) => {
@@ -152,7 +156,7 @@ export default {
 </script>
 
 <template>
-  <div class="labeled-select labeled-input" :class="{disabled, focused, [mode]: true}">
+  <div class="labeled-select labeled-input" :class="{disabled, focused, [mode]: true, [status]: status }">
     <div :class="{'labeled-container': true, raised, empty, [mode]: true}" :style="{border:'none'}">
       <label v-if="label">
         {{ label }}

edit/networking.k8s.io.ingress/DefaultBackend.vue

@@ -36,6 +36,11 @@ export default {
       const service = this.serviceTargets.find(s => s.label === this.serviceName);
 
       return service?.ports || [];
+    },
+    serviceTargetStatus() {
+      const isValueAnOption = !this.serviceName || this.serviceTargets.find(target => this.serviceName === target.value);
+
+      return isValueAnOption ? null : 'warning';
     }
   },
   methods: {
@@ -54,10 +59,12 @@ export default {
       <div class="col span-4">
         <LabeledSelect
           v-model="serviceName"
+          :taggable="true"
           :mode="mode"
           :label="t('ingress.defaultBackend.targetService.label')"
           :options="serviceTargets"
           option-label="label"
+          :status="serviceTargetStatus"
           @input="update(); servicePort = ''"
         />
       </div>

edit/networking.k8s.io.ingress/RulePath.vue

@@ -24,9 +24,14 @@ export default {
   },
   computed: {
     portOptions() {
-      const service = this.serviceTargets.find(s => s.label === this.serviceName);
+      const service = this.serviceTargets.find(s => s.label === this.value);
 
       return service?.ports || [];
+    },
+    serviceTargetStatus() {
+      const isValueAnOption = !this.serviceName || this.serviceTargets.find(target => this.serviceName === target.value);
+
+      return isValueAnOption ? null : 'warning';
     }
   },
   methods: {
@@ -51,6 +56,7 @@ export default {
         option-label="label"
         option-key="label"
         :options="serviceTargets"
+        :status="serviceTargetStatus"
         :taggable="true"
         @input="update(); servicePort = ''"
       />