From 73d72e2ed98753482f76f950e22657ab60da291c Mon Sep 17 00:00:00 2001
From: lvuch <laurenvuchetich@gmail.com>
Date: Tue, 28 Jul 2020 15:56:33 -0700
Subject: [PATCH] 667 fixes

---
 .../networking.k8s.io.ingress/Certificate.vue | 90 ++++++++++-------
 edit/networking.k8s.io.ingress/Rule.vue       | 97 +++++++++++--------
 2 files changed, 109 insertions(+), 78 deletions(-)

diff --git a/edit/networking.k8s.io.ingress/Certificate.vue b/edit/networking.k8s.io.ingress/Certificate.vue
index 91b275f524..e36d71d3a4 100644
--- a/edit/networking.k8s.io.ingress/Certificate.vue
+++ b/edit/networking.k8s.io.ingress/Certificate.vue
@@ -1,40 +1,42 @@
 <script>
-import LabeledInput from '@/components/form/LabeledInput';
-import LabeledSelect from '@/components/form/LabeledSelect';
+import LabeledInput from "@/components/form/LabeledInput";
+import LabeledSelect from "@/components/form/LabeledSelect";
 export default {
   components: { LabeledInput, LabeledSelect },
-  props:      {
+  props: {
     value: {
-      type:    Object,
+      type: Object,
       default: () => {
         return {};
-      }
+      },
     },
     certs: {
-      type:    Array,
-      default: () => []
+      type: Array,
+      default: () => [],
     },
   },
   data() {
     const defaultCert = {
-      label: this.t('ingress.certificates.defaultCertLabel'),
+      label: this.t("ingress.certificates.defaultCertLabel"),
       value: null,
     };
-    const { hosts = [''], secretName = defaultCert.value } = this.value;
+    const { hosts = [""], secretName = defaultCert.value } = this.value;
 
     return {
-      defaultCert, hosts, secretName
+      defaultCert,
+      hosts,
+      secretName,
     };
   },
   computed: {
     certsWithDefault() {
       return [this.defaultCert, ...this.certs];
-    }
+    },
   },
   methods: {
     addHost(ev) {
       ev.preventDefault();
-      this.hosts.push('');
+      this.hosts.push("");
       this.update();
     },
     remove(ev, idx) {
@@ -48,9 +50,9 @@ export default {
       if (this.secretName !== this.defaultCert) {
         out.secretName = this.secretName;
       }
-      this.$emit('input', out);
-    }
-  }
+      this.$emit("input", out);
+    },
+  },
 };
 </script>
 
@@ -63,20 +65,38 @@ export default {
           :options="certsWithDefault"
           :label="t('ingress.certificates.certificate.label')"
           required
-          @input="e=>{secretName = e; update()}"
+          @input="
+            (e) => {
+              secretName = e;
+              update();
+            }
+          "
         />
       </div>
       <div class="col span-5">
         <div v-for="(host, i) in hosts" :key="i" class="row mb-10">
-          <div :style="{'margin-right': '0px'}" class="col span-11">
-            <LabeledInput :value="host" :label="t('ingress.certificates.host.label')" :placeholder="t('ingress.certificates.host.placeholder')" @input="e=>$set(hosts, i, e)" />
+          <div :style="{ 'margin-right': '0px' }" class="col span-11">
+            <LabeledInput
+              :value="host"
+              :label="t('ingress.certificates.host.label')"
+              :placeholder="t('ingress.certificates.host.placeholder')"
+              @input="(e) => $set(hosts, i, e)"
+            />
           </div>
-          <button class="btn btn-sm role-link col" @click="e=>remove(e, i)">
-            {{ t('ingress.certificates.removeHost') }}
+          <button
+            class="btn btn-sm role-link col"
+            @click="(e) => remove(e, i)"
+            style="line-height: 40px;"
+          >
+            {{ t("ingress.certificates.removeHost") }}
           </button>
         </div>
-        <button :style="{'padding':'0px 0px 0px 5px'}" class="bn btn-sm role-link" @click="addHost">
-          {{ t('ingress.certificates.addHost') }}
+        <button
+          :style="{ padding: '0px 0px 0px 5px' }"
+          class="bn btn-sm role-link"
+          @click="addHost"
+        >
+          {{ t("ingress.certificates.addHost") }}
         </button>
       </div>
       <div class="col span-1">
@@ -88,17 +108,17 @@ export default {
   </div>
 </template>
 
-<style lang='scss' scoped>
-  .close{
-    float:right;
-    padding: 0px;
-    position: relative;
-    top: -10px;
-    right: -10px;
-  }
-  .cert:not(:last-of-type) {
-    padding-bottom: 10px;
-    margin-bottom:30px;
-    border-bottom: 1px solid var(--border);
-  }
+<style lang="scss" scoped>
+.close {
+  float: right;
+  padding: 0px;
+  position: relative;
+  top: -10px;
+  right: -10px;
+}
+.cert:not(:last-of-type) {
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+  border-bottom: 1px solid var(--border);
+}
 </style>
diff --git a/edit/networking.k8s.io.ingress/Rule.vue b/edit/networking.k8s.io.ingress/Rule.vue
index d2f79e0452..cf785772f1 100644
--- a/edit/networking.k8s.io.ingress/Rule.vue
+++ b/edit/networking.k8s.io.ingress/Rule.vue
@@ -1,27 +1,29 @@
 <script>
-import RulePath from '@/edit/networking.k8s.io.ingress/RulePath';
-import LabeledInput from '@/components/form/LabeledInput';
-import { random32 } from '../../utils/string';
+import RulePath from "@/edit/networking.k8s.io.ingress/RulePath";
+import LabeledInput from "@/components/form/LabeledInput";
+import { random32 } from "../../utils/string";
 export default {
   components: { RulePath, LabeledInput },
-  props:      {
+  props: {
     value: {
-      type:    Object,
+      type: Object,
       default: () => {
         return {};
-      }
+      },
     },
     serviceTargets: {
-      type:    Array,
-      default: () => []
-    }
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
-    const { host = '', http = {} } = this.value;
+    const { host = "", http = {} } = this.value;
     const { paths = [{ id: random32(1) }] } = http;
 
     return {
-      host, paths, ruleMode: this.value.asDefault ? 'asDefault' : 'setHost'
+      host,
+      paths,
+      ruleMode: this.value.asDefault ? "asDefault" : "setHost",
     };
   },
   methods: {
@@ -34,7 +36,7 @@ export default {
       } else {
         delete out.host;
       }
-      this.$emit('input', out);
+      this.$emit("input", out);
     },
     addPath(ev) {
       ev.preventDefault();
@@ -47,9 +49,9 @@ export default {
       this.paths = neu;
     },
     removeRule() {
-      this.$emit('remove');
-    }
-  }
+      this.$emit("remove");
+    },
+  },
 };
 </script>
 
@@ -57,10 +59,13 @@ export default {
   <div class="rule" @input="update">
     <div class="row mb-20">
       <div id="host" class="col span-6">
-        <LabeledInput v-model="host" :label="t('ingress.rules.requestHost.label')" :placeholder="t('ingress.rules.requestHost.placeholder')" />
-      </div>
-      <div id="host" class="col span-5">
+        <LabeledInput
+          v-model="host"
+          :label="t('ingress.rules.requestHost.label')"
+          :placeholder="t('ingress.rules.requestHost.placeholder')"
+        />
       </div>
+      <div id="host" class="col span-5"></div>
       <div class="col span-1">
         <button class="btn role-link close" @click="removeRule">
           <i class="icon icon-2x icon-x" />
@@ -69,13 +74,13 @@ export default {
     </div>
     <div class="rule-path-headings row mb-0">
       <div class="col span-4">
-        {{ t('ingress.rules.path.label') }}
+        <label>{{ t("ingress.rules.path.label") }}</label>
       </div>
       <div class="col span-4">
-        {{ t('ingress.rules.target.label') }}
+        <label>{{ t("ingress.rules.target.label") }}</label>
       </div>
-      <div class="col span-3" :style="{'margin-right': '0px'}">
-        {{ t('ingress.rules.port.label') }}
+      <div class="col span-3" :style="{ 'margin-right': '0px' }">
+        <label>{{ t("ingress.rules.port.label") }}</label>
       </div>
       <div class="col" />
     </div>
@@ -86,31 +91,37 @@ export default {
         :value="path"
         :rule-mode="ruleMode"
         :service-targets="serviceTargets"
-        @input="e=>$set(paths, i, e)"
-        @remove="e=>removePath(i)"
+        @input="(e) => $set(paths, i, e)"
+        @remove="(e) => removePath(i)"
       />
     </template>
-    <button v-if="ruleMode === 'setHost'" :style="{'padding':'0px 0px 0px 5px'}" class="btn btn-sm role-link" @click="addPath">
-      {{ t('ingress.rules.addPath') }}
+    <button
+      v-if="ruleMode === 'setHost'"
+      :style="{ padding: '0px 0px 0px 5px' }"
+      class="btn btn-sm role-link"
+      @click="addPath"
+    >
+      {{ t("ingress.rules.addPath") }}
     </button>
   </div>
 </template>
 
-<style lang='scss' scoped>
-  .rule {
-    background: var(--tabbed-container-bg);
-    border: 1px solid var(--tabbed-border);
-    border-radius: var(--border-radius);
-    padding: 20px;
-  }
-  #host {
-    align-self: center
-  }
-  .close{
-    float:right;
-    padding: 0px;
-    position: relative;
-    top: -20px;
-    right: -20px;
-  }
+<style lang="scss" scoped>
+.rule {
+  background: var(--tabbed-container-bg);
+  border: 1px solid var(--tabbed-border);
+  border-radius: var(--border-radius);
+  padding: 20px;
+  margin-top: 20px;
+}
+#host {
+  align-self: center;
+}
+.close {
+  float: right;
+  padding: 0px;
+  position: relative;
+  top: -10px;
+  right: -10px;
+}
 </style>