From 94ebf0783e9cc76c7b78f928c3dccd90712dc920 Mon Sep 17 00:00:00 2001
From: Cody Jackson <cody@rancher.com>
Date: Tue, 7 Jul 2020 16:24:12 -0700
Subject: [PATCH] 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                   | 14 ++++++++++++++
 components/Banner.vue                             |  2 +-
 components/form/LabeledSelect.vue                 |  6 +++++-
 edit/networking.k8s.io.ingress/DefaultBackend.vue | 11 +++++++++--
 edit/networking.k8s.io.ingress/RulePath.vue       |  8 +++++++-
 5 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/assets/styles/global/_form.scss b/assets/styles/global/_form.scss
index 108c63916f..e3c92fdbe4 100644
--- a/assets/styles/global/_form.scss
+++ b/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);
 
diff --git a/components/Banner.vue b/components/Banner.vue
index f1f871a703..a24b9103dc 100644
--- a/components/Banner.vue
+++ b/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);
     }
   }
diff --git a/components/form/LabeledSelect.vue b/components/form/LabeledSelect.vue
index 9feb90cb1c..e038e94bb9 100644
--- a/components/form/LabeledSelect.vue
+++ b/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 }}
diff --git a/edit/networking.k8s.io.ingress/DefaultBackend.vue b/edit/networking.k8s.io.ingress/DefaultBackend.vue
index 0ce2bcf748..880fa34a4d 100644
--- a/edit/networking.k8s.io.ingress/DefaultBackend.vue
+++ b/edit/networking.k8s.io.ingress/DefaultBackend.vue
@@ -4,8 +4,8 @@ import LabeledSelect from '@/components/form/LabeledSelect';
 import { _EDIT, _VIEW } from '@/config/query-params';
 import Banner from '@/components/Banner';
 export default {
-  components: {
-    LabeledInput, LabeledSelect, Banner
+  components: {
+    LabeledInput, LabeledSelect, Banner
   },
   props:      {
     value: {
@@ -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>
diff --git a/edit/networking.k8s.io.ingress/RulePath.vue b/edit/networking.k8s.io.ingress/RulePath.vue
index 431bca99a0..7e8a26dd88 100644
--- a/edit/networking.k8s.io.ingress/RulePath.vue
+++ b/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 = ''"
       />