From ce61444e033a57297e847bfb5d6e1986bb6d8b2f Mon Sep 17 00:00:00 2001
From: Westly Wright <westly.wright@gmail.com>
Date: Thu, 14 May 2020 15:19:56 -0700
Subject: [PATCH 1/5] Add service detail page

Adds new component CreateEditView/Service which replaces both pages
create/edit and detail with a single compoent that renders based on mode

rancher/dashboard#632
---
 assets/translations/en-us.yaml        |   1 +
 components/CreateEditView/Service.vue | 315 ++++++++++++++++++++++++++
 detail/service.vue                    |  12 +
 edit/service.vue                      | 280 +----------------------
 4 files changed, 334 insertions(+), 274 deletions(-)
 create mode 100644 components/CreateEditView/Service.vue
 create mode 100644 detail/service.vue

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index a020f0cdc0..4f5dfbb777 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -13,6 +13,7 @@ generic:
   customize: Customize
   na: "n/a"
   unknown: Unknown
+  type: Type
 
 suffix:
   ib: iB
diff --git a/components/CreateEditView/Service.vue b/components/CreateEditView/Service.vue
new file mode 100644
index 0000000000..b1dd25652e
--- /dev/null
+++ b/components/CreateEditView/Service.vue
@@ -0,0 +1,315 @@
+<script>
+import { find } from 'lodash';
+import ArrayList from '@/components/form/ArrayList';
+import CreateEditView from '@/mixins/create-edit-view';
+import DetailTop from '@/components/DetailTop';
+import Footer from '@/components/form/Footer';
+import KeyValue from '@/components/form/KeyValue';
+import LabeledInput from '@/components/form/LabeledInput';
+import LabeledSelect from '@/components/form/LabeledSelect';
+import LiveDate from '@/components/formatter/LiveDate';
+import NameNsDescription from '@/components/form/NameNsDescription';
+import RadioGroup from '@/components/form/RadioGroup';
+import ResourceTabs from '@/components/form/ResourceTabs';
+import ServicePorts from '@/components/form/ServicePorts';
+import Tab from '@/components/Tabbed/Tab';
+import UnitInput from '@/components/form/UnitInput';
+import { DEFAULT_SERVICE_TYPES } from '@/config/types';
+import { ucFirst } from '@/utils/string';
+
+const SESSION_AFFINITY_ACTION_VALUES = {
+  NONE:      'None',
+  CLUSTERIP: 'ClusterIP'
+};
+
+const SESSION_AFFINITY_ACTION_LABELS = {
+  NONE:      'servicesPage.affinity.actionLabels.none',
+  CLUSTERIP: 'servicesPage.affinity.actionLabels.clusterIp'
+};
+
+const SESSION_STICKY_TIME_DEFAULT = 10800;
+
+export default {
+  // Props are found in CreateEditView
+  // props: {},
+
+  components: {
+    ArrayList,
+    DetailTop,
+    Footer,
+    KeyValue,
+    LabeledInput,
+    LabeledSelect,
+    LiveDate,
+    NameNsDescription,
+    RadioGroup,
+    ResourceTabs,
+    ServicePorts,
+    Tab,
+    UnitInput,
+  },
+
+  mixins:     [CreateEditView],
+
+  data() {
+    if (!this?.value?.spec?.type) {
+      const defaultService = find(DEFAULT_SERVICE_TYPES, ['id', 'ClusterIP']);
+
+      if (!this?.value?.spec) {
+        this.$set(this.value, 'spec', {
+          ports:           [],
+          sessionAffinity: 'None',
+          type:            defaultService.id,
+        });
+      } else {
+        this.$set(this.value.spec, 'type', defaultService.id);
+      }
+    }
+
+    return {
+      sessionAffinityActionOptions: Object.values(SESSION_AFFINITY_ACTION_VALUES),
+      sessionAffinityActionLabels:  Object.values(SESSION_AFFINITY_ACTION_LABELS).map(v => this.$store.getters['i18n/t'](v)).map(ucFirst),
+      defaultServiceTypes:          DEFAULT_SERVICE_TYPES,
+    };
+  },
+
+  computed: {
+    extraColumns() {
+      return ['type-col'];
+    },
+
+    detailTopColumns() {
+      return [
+        {
+          title:   this.$store.getters['i18n/t']('generic.type'),
+          content: this.value?.spec.type,
+          name:    'type',
+        },
+        {
+          title: this.$store.getters['i18n/t']('generic.created'),
+          name:  'created'
+        },
+      ];
+    },
+  },
+
+  watch: {
+    'value.spec.type'(val) {
+      if (val === 'ExternalName') {
+        this.value.spec.ports = null;
+      }
+
+      if (val === 'Headless') {
+        this.value.spec.clusterIP = 'None';
+      } else if (val !== 'Headless' && this.value.spec.clusterIP === 'None') {
+        this.value.spec.clusterIP = null;
+      }
+    },
+
+    'value.spec.sessionAffinity'(val) {
+      if (val === 'ClusterIP') {
+        this.value.spec.sessionAffinityConfig = { clientIP: { timeoutSeconds: null } };
+
+        // set it null and then set it with vue to make reactive.
+        this.$set(this.value.spec.sessionAffinityConfig.clientIP, 'timeoutSeconds', SESSION_STICKY_TIME_DEFAULT);
+      } else if (this.value?.spec?.sessionAffinityConfig?.clientIP?.timeoutSeconds) {
+        delete this.value.spec.sessionAffinityConfig.clientIP.timeoutSeconds;
+      }
+    }
+  },
+
+  methods: {
+    checkTypeIs(typeIn) {
+      const { value: { spec: { type } } } = this;
+
+      if (type === typeIn) {
+        return true;
+      }
+
+      return false;
+    }
+  },
+
+  updateExternalName(e) {
+    debugger;
+    this.$set(this.value.spec, 'externalName', e);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <DetailTop v-if="isView" :columns="detailTopColumns">
+      <template v-slot:created>
+        <LiveDate
+          :value="value.metadata.creationTimestamp"
+          :add-suffix="true"
+        />
+      </template>
+    </DetailTop>
+    <form>
+      <NameNsDescription
+        v-if="isCreate"
+        :value="value"
+        :namespaced="false"
+        :mode="mode"
+        :extra-columns="extraColumns"
+      >
+        <template #type-col>
+          <LabeledSelect
+            option-key="id"
+            option-label="translationLabel"
+            :label="t('servicesPage.typeOpts.label')"
+            :localized-label="true"
+            :mode="mode"
+            :options="defaultServiceTypes"
+            :value="value.spec.type"
+            @input="e=>$set(value.spec, 'type', e.id)"
+          />
+        </template>
+      </NameNsDescription>
+
+      <div class="spacer"></div>
+
+      <div v-if="checkTypeIs('ExternalName')">
+        <div class="title clearfix">
+          <h4>
+            <t k="servicesPage.externalName.label" />
+          </h4>
+          <p class="helper-text">
+            <t k="servicesPage.externalName.helpText" />
+          </p>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-6">
+            <span v-if="isView">{{ value.spec.externalName }}</span>
+            <input
+              v-else
+              ref="external-name"
+              v-model.number="value.spec.externalName"
+              type="text"
+              :placeholder="t('servicesPage.externalName.placeholder')"
+            />
+          </div>
+        </div>
+      </div>
+      <ServicePorts
+        v-else
+        v-model="value.spec.ports"
+        class="col span-12"
+        :mode="mode"
+        :spec-type="value.spec.type"
+      />
+
+      <div class="spacer"></div>
+
+      <ResourceTabs v-model="value" :mode="mode">
+        <template #before>
+          <Tab
+            v-if="!checkTypeIs('NodePort') && !checkTypeIs('ExternalName')"
+            name="selectors"
+            :label="t('servicesPage.selectors.label')"
+          >
+            <div class="row">
+              <div class="col span-12">
+                <p class="helper-text">
+                  <t k="servicesPage.selectors.helpText" />
+                </p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col span-12">
+                <KeyValue
+                  key="selectors"
+                  v-model="value.spec.selector"
+                  :mode="mode"
+                  :initial-empty-row="true"
+                  :pad-left="false"
+                  :read-allowed="false"
+                  :protip="false"
+                  @input="e=>$set(value.spec, 'selector', e)"
+                />
+              </div>
+            </div>
+          </Tab>
+          <Tab name="ips" :label="t('servicesPage.ips.label')">
+            <div v-if="checkTypeIs('ClusterIP') || checkTypeIs('LoadBalancer')" class="row">
+              <div class="col span-12">
+                <p class="helper-text">
+                  <t k="servicesPage.ips.helpText" />
+                </p>
+              </div>
+            </div>
+            <div v-if="checkTypeIs('ClusterIP') || checkTypeIs('LoadBalancer')" class="row mb-20">
+              <div class="col span-6">
+                <LabeledInput
+                  v-model="value.spec.clusterIP"
+                  :mode="mode"
+                  :label="t('servicesPage.ips.input.label')"
+                  :placeholder="t('servicesPage.ips.input.placeholder')"
+                  @input="e=>$set(value.spec, 'clusterIP', e)"
+                />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col span-6 pl-10">
+                <ArrayList
+                  key="clusterExternalIpAddresses"
+                  v-model="value.spec.externalIPs"
+                  :title="t('servicesPage.ips.external.label')"
+                  :value-placeholder="t('servicesPage.ips.external.placeholder')"
+                  :value-multiline="false"
+                  :mode="mode"
+                  :pad-left="false"
+                  :protip="false"
+                  @input="e=>$set(value.spec, 'externalIPs', e)"
+                />
+              </div>
+            </div>
+          </Tab>
+          <Tab
+            v-if="!checkTypeIs('NodePort') && !checkTypeIs('ExternalName')"
+            name="session-affinity"
+            :label="t('servicesPage.affinity.label')"
+          >
+            <div class="row">
+              <div class="col span-12">
+                <p class="helper-text">
+                  <t k="servicesPage.affinity.helpText" />
+                </p>
+              </div>
+            </div>
+            <div class="row session-affinity">
+              <div class="col span-6">
+                <RadioGroup
+                  v-model="value.spec.sessionAffinity"
+                  class="enforcement-action"
+                  :options="sessionAffinityActionOptions"
+                  :labels="sessionAffinityActionLabels"
+                  :mode="mode"
+                  @input="e=>value.spec.sessionAffinity = e"
+                />
+              </div>
+              <div v-if="value.spec.sessionAffinity === 'ClusterIP'" class="col span-6">
+                <UnitInput
+                  v-model="value.spec.sessionAffinityConfig.clientIP.timeoutSeconds"
+                  :suffix="t('suffix.seconds')"
+                  :label="t('servicesPage.affinity.timeout.label')"
+                  :placeholder="t('servicesPage.affinity.timeout.placeholder')"
+                  @input="e=>$set(value.spec.sessionAffinityConfig.clientIP, 'timeoutSeconds', e)"
+                />
+              </div>
+            </div>
+          </Tab>
+        </template>
+      </ResourceTabs>
+
+      <Footer
+        :mode="mode"
+        :errors="errors"
+        @save="save"
+        @done="done"
+      />
+    </form>
+  </div>
+</template>
diff --git a/detail/service.vue b/detail/service.vue
new file mode 100644
index 0000000000..7a090935d8
--- /dev/null
+++ b/detail/service.vue
@@ -0,0 +1,12 @@
+<script>
+import ServiceCreateEditView from '@/components/CreateEditView/Service';
+
+export default { components: { ServiceCreateEditView } };
+</script>
+
+<template>
+  <ServiceCreateEditView
+    :props="$props"
+    v-bind="$attrs"
+  />
+</template>
diff --git a/edit/service.vue b/edit/service.vue
index 8c259d3da2..7a090935d8 100644
--- a/edit/service.vue
+++ b/edit/service.vue
@@ -1,280 +1,12 @@
 <script>
-import { find } from 'lodash';
-import { ucFirst } from '@/utils/string';
-import CreateEditView from '@/mixins/create-edit-view';
-import ArrayList from '@/components/form/ArrayList';
-import Footer from '@/components/form/Footer';
-import KeyValue from '@/components/form/KeyValue';
-import LabeledInput from '@/components/form/LabeledInput';
-import LabeledSelect from '@/components/form/LabeledSelect';
-import NameNsDescription from '@/components/form/NameNsDescription';
-import RadioGroup from '@/components/form/RadioGroup';
-import ResourceTabs from '@/components/form/ResourceTabs';
-import ServicePorts from '@/components/form/ServicePorts';
-import Tab from '@/components/Tabbed/Tab';
-import UnitInput from '@/components/form/UnitInput';
-import { DEFAULT_SERVICE_TYPES } from '@/config/types';
+import ServiceCreateEditView from '@/components/CreateEditView/Service';
 
-const SESSION_AFFINITY_ACTION_VALUES = {
-  NONE:      'None',
-  CLUSTERIP: 'ClusterIP'
-};
-
-const SESSION_AFFINITY_ACTION_LABELS = {
-  NONE:      'servicesPage.affinity.actionLabels.none',
-  CLUSTERIP: 'servicesPage.affinity.actionLabels.clusterIp'
-};
-
-const SESSION_STICKY_TIME_DEFAULT = 10800;
-
-export default {
-  components: {
-    ArrayList,
-    Footer,
-    KeyValue,
-    LabeledInput,
-    LabeledSelect,
-    NameNsDescription,
-    RadioGroup,
-    ResourceTabs,
-    ServicePorts,
-    Tab,
-    UnitInput,
-  },
-
-  mixins:     [CreateEditView],
-
-  data() {
-    if (!this?.value?.spec?.type) {
-      const defaultService = find(DEFAULT_SERVICE_TYPES, ['id', 'ClusterIP']);
-
-      if (!this?.value?.spec) {
-        this.$set(this.value, 'spec', {
-          ports:           [],
-          sessionAffinity: 'None',
-          type:            defaultService.id,
-        });
-      } else {
-        this.$set(this.value.spec, 'type', defaultService.id);
-      }
-    }
-
-    return {
-      sessionAffinityActionOptions: Object.values(SESSION_AFFINITY_ACTION_VALUES),
-      sessionAffinityActionLabels:  Object.values(SESSION_AFFINITY_ACTION_LABELS).map(v => this.$store.getters['i18n/t'](v)).map(ucFirst),
-      defaultServiceTypes:          DEFAULT_SERVICE_TYPES,
-    };
-  },
-
-  computed: {
-    extraColumns() {
-      return ['type-col'];
-    },
-  },
-
-  watch: {
-    'value.spec.type'(val) {
-      if (val === 'ExternalName') {
-        this.value.spec.ports = null;
-      }
-
-      if (val === 'Headless') {
-        this.value.spec.clusterIP = 'None';
-      } else if (val !== 'Headless' && this.value.spec.clusterIP === 'None') {
-        this.value.spec.clusterIP = null;
-      }
-    },
-
-    'value.spec.sessionAffinity'(val) {
-      if (val === 'ClusterIP') {
-        this.value.spec.sessionAffinityConfig = { clientIP: { timeoutSeconds: null } };
-
-        // set it null and then set it with vue to make reactive.
-        this.$set(this.value.spec.sessionAffinityConfig.clientIP, 'timeoutSeconds', SESSION_STICKY_TIME_DEFAULT);
-      } else if (this.value?.spec?.sessionAffinityConfig?.clientIP?.timeoutSeconds) {
-        delete this.value.spec.sessionAffinityConfig.clientIP.timeoutSeconds;
-      }
-    }
-  },
-
-  methods: {
-    checkTypeIs(typeIn) {
-      const { value: { spec: { type } } } = this;
-
-      if (type === typeIn) {
-        return true;
-      }
-
-      return false;
-    }
-  }
-};
+export default { components: { ServiceCreateEditView } };
 </script>
 
 <template>
-  <div>
-    <form>
-      <NameNsDescription
-        :value="value"
-        :namespaced="false"
-        :mode="mode"
-        :extra-columns="extraColumns"
-      >
-        <template #type-col>
-          <LabeledSelect
-            option-key="id"
-            option-label="translationLabel"
-            :label="t('servicesPage.typeOpts.label')"
-            :localized-label="true"
-            :mode="mode"
-            :options="defaultServiceTypes"
-            :value="value.spec.type"
-            @input="e=>$set(value.spec, 'type', e.id)"
-          />
-        </template>
-      </NameNsDescription>
-
-      <div class="spacer"></div>
-
-      <div v-if="checkTypeIs('ExternalName')">
-        <div class="title clearfix">
-          <h4>
-            <t k="servicesPage.externalName.label" />
-          </h4>
-          <p class="helper-text">
-            <t k="servicesPage.externalName.helpText" />
-          </p>
-        </div>
-        <div class="row mt-10">
-          <div class="col span-6">
-            <span v-if="isView">{{ value.spec.externalName }}</span>
-            <input
-              v-else
-              ref="external-name"
-              v-model.number="value.spec.externalName"
-              type="text"
-              :placeholder="t('servicesPage.externalName.placeholder')"
-              @input="e=>$set(value.spec, 'externalName', e)"
-            />
-          </div>
-        </div>
-      </div>
-      <ServicePorts
-        v-else
-        v-model="value.spec.ports"
-        class="col span-12"
-        :mode="mode"
-        :spec-type="value.spec.type"
-      />
-
-      <div class="spacer"></div>
-
-      <ResourceTabs v-model="value" :mode="mode">
-        <template #before>
-          <Tab
-            v-if="!checkTypeIs('NodePort') && !checkTypeIs('ExternalName')"
-            name="selectors"
-            :label="t('servicesPage.selectors.label')"
-          >
-            <div class="row">
-              <div class="col span-12">
-                <p class="helper-text">
-                  <t k="servicesPage.selectors.helpText" />
-                </p>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col span-12">
-                <KeyValue
-                  key="selectors"
-                  v-model="value.spec.selector"
-                  :mode="mode"
-                  :initial-empty-row="true"
-                  :pad-left="false"
-                  :read-allowed="false"
-                  :protip="false"
-                  @input="e=>$set(value.spec, 'selector', e)"
-                />
-              </div>
-            </div>
-          </Tab>
-          <Tab name="ips" :label="t('servicesPage.ips.label')">
-            <div v-if="checkTypeIs('ClusterIP') || checkTypeIs('LoadBalancer')" class="row">
-              <div class="col span-12">
-                <p class="helper-text">
-                  <t k="servicesPage.ips.helpText" />
-                </p>
-              </div>
-            </div>
-            <div v-if="checkTypeIs('ClusterIP') || checkTypeIs('LoadBalancer')" class="row mb-20">
-              <div class="col span-6">
-                <LabeledInput
-                  v-model="value.spec.clusterIP"
-                  :label="t('servicesPage.ips.input.label')"
-                  :placeholder="t('servicesPage.ips.input.placeholder')"
-                  @input="e=>$set(value.spec, 'clusterIP', e)"
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col span-6">
-                <ArrayList
-                  key="clusterExternalIpAddresses"
-                  v-model="value.spec.externalIPs"
-                  :title="t('servicesPage.ips.external.label')"
-                  :value-placeholder="t('servicesPage.ips.external.placeholder')"
-                  :value-multiline="false"
-                  :mode="mode"
-                  :pad-left="false"
-                  :protip="false"
-                  @input="e=>$set(value.spec, 'externalIPs', e)"
-                />
-              </div>
-            </div>
-          </Tab>
-          <Tab
-            v-if="!checkTypeIs('NodePort') && !checkTypeIs('ExternalName')"
-            name="session-affinity"
-            :label="t('servicesPage.affinity.label')"
-          >
-            <div class="row">
-              <div class="col span-12">
-                <p class="helper-text">
-                  <t k="servicesPage.affinity.helpText" />
-                </p>
-              </div>
-            </div>
-            <div class="row session-affinity">
-              <div class="col span-6">
-                <RadioGroup
-                  v-model="value.spec.sessionAffinity"
-                  class="enforcement-action"
-                  :options="sessionAffinityActionOptions"
-                  :labels="sessionAffinityActionLabels"
-                  :mode="mode"
-                  @input="e=>value.spec.sessionAffinity = e"
-                />
-              </div>
-              <div v-if="value.spec.sessionAffinity === 'ClusterIP'" class="col span-6">
-                <UnitInput
-                  v-model="value.spec.sessionAffinityConfig.clientIP.timeoutSeconds"
-                  :suffix="t('suffix.seconds')"
-                  :label="t('servicesPage.affinity.timeout.label')"
-                  :placeholder="t('servicesPage.affinity.timeout.placeholder')"
-                  @input="e=>$set(value.spec.sessionAffinityConfig.clientIP, 'timeoutSeconds', e)"
-                />
-              </div>
-            </div>
-          </Tab>
-        </template>
-      </ResourceTabs>
-
-      <Footer
-        :mode="mode"
-        :errors="errors"
-        @save="save"
-        @done="done"
-      />
-    </form>
-  </div>
+  <ServiceCreateEditView
+    :props="$props"
+    v-bind="$attrs"
+  />
 </template>

From ac3597ac4ca38cbec3a76096966364b731e9b466 Mon Sep 17 00:00:00 2001
From: Westly Wright <westly.wright@gmail.com>
Date: Fri, 15 May 2020 12:10:39 -0700
Subject: [PATCH 2/5] refactor resource detail edit/detail selection

Add additional checks for asYamlInit
Refactor checks for showComponent selection
---
 components/CreateEditView/Service.vue | 315 --------------------------
 components/ResourceDetail/index.vue   |  44 ++--
 detail/service.vue                    |  12 -
 edit/service.vue                      | 314 ++++++++++++++++++++++++-
 4 files changed, 333 insertions(+), 352 deletions(-)
 delete mode 100644 components/CreateEditView/Service.vue
 delete mode 100644 detail/service.vue

diff --git a/components/CreateEditView/Service.vue b/components/CreateEditView/Service.vue
deleted file mode 100644
index b1dd25652e..0000000000
--- a/components/CreateEditView/Service.vue
+++ /dev/null
@@ -1,315 +0,0 @@
-<script>
-import { find } from 'lodash';
-import ArrayList from '@/components/form/ArrayList';
-import CreateEditView from '@/mixins/create-edit-view';
-import DetailTop from '@/components/DetailTop';
-import Footer from '@/components/form/Footer';
-import KeyValue from '@/components/form/KeyValue';
-import LabeledInput from '@/components/form/LabeledInput';
-import LabeledSelect from '@/components/form/LabeledSelect';
-import LiveDate from '@/components/formatter/LiveDate';
-import NameNsDescription from '@/components/form/NameNsDescription';
-import RadioGroup from '@/components/form/RadioGroup';
-import ResourceTabs from '@/components/form/ResourceTabs';
-import ServicePorts from '@/components/form/ServicePorts';
-import Tab from '@/components/Tabbed/Tab';
-import UnitInput from '@/components/form/UnitInput';
-import { DEFAULT_SERVICE_TYPES } from '@/config/types';
-import { ucFirst } from '@/utils/string';
-
-const SESSION_AFFINITY_ACTION_VALUES = {
-  NONE:      'None',
-  CLUSTERIP: 'ClusterIP'
-};
-
-const SESSION_AFFINITY_ACTION_LABELS = {
-  NONE:      'servicesPage.affinity.actionLabels.none',
-  CLUSTERIP: 'servicesPage.affinity.actionLabels.clusterIp'
-};
-
-const SESSION_STICKY_TIME_DEFAULT = 10800;
-
-export default {
-  // Props are found in CreateEditView
-  // props: {},
-
-  components: {
-    ArrayList,
-    DetailTop,
-    Footer,
-    KeyValue,
-    LabeledInput,
-    LabeledSelect,
-    LiveDate,
-    NameNsDescription,
-    RadioGroup,
-    ResourceTabs,
-    ServicePorts,
-    Tab,
-    UnitInput,
-  },
-
-  mixins:     [CreateEditView],
-
-  data() {
-    if (!this?.value?.spec?.type) {
-      const defaultService = find(DEFAULT_SERVICE_TYPES, ['id', 'ClusterIP']);
-
-      if (!this?.value?.spec) {
-        this.$set(this.value, 'spec', {
-          ports:           [],
-          sessionAffinity: 'None',
-          type:            defaultService.id,
-        });
-      } else {
-        this.$set(this.value.spec, 'type', defaultService.id);
-      }
-    }
-
-    return {
-      sessionAffinityActionOptions: Object.values(SESSION_AFFINITY_ACTION_VALUES),
-      sessionAffinityActionLabels:  Object.values(SESSION_AFFINITY_ACTION_LABELS).map(v => this.$store.getters['i18n/t'](v)).map(ucFirst),
-      defaultServiceTypes:          DEFAULT_SERVICE_TYPES,
-    };
-  },
-
-  computed: {
-    extraColumns() {
-      return ['type-col'];
-    },
-
-    detailTopColumns() {
-      return [
-        {
-          title:   this.$store.getters['i18n/t']('generic.type'),
-          content: this.value?.spec.type,
-          name:    'type',
-        },
-        {
-          title: this.$store.getters['i18n/t']('generic.created'),
-          name:  'created'
-        },
-      ];
-    },
-  },
-
-  watch: {
-    'value.spec.type'(val) {
-      if (val === 'ExternalName') {
-        this.value.spec.ports = null;
-      }
-
-      if (val === 'Headless') {
-        this.value.spec.clusterIP = 'None';
-      } else if (val !== 'Headless' && this.value.spec.clusterIP === 'None') {
-        this.value.spec.clusterIP = null;
-      }
-    },
-
-    'value.spec.sessionAffinity'(val) {
-      if (val === 'ClusterIP') {
-        this.value.spec.sessionAffinityConfig = { clientIP: { timeoutSeconds: null } };
-
-        // set it null and then set it with vue to make reactive.
-        this.$set(this.value.spec.sessionAffinityConfig.clientIP, 'timeoutSeconds', SESSION_STICKY_TIME_DEFAULT);
-      } else if (this.value?.spec?.sessionAffinityConfig?.clientIP?.timeoutSeconds) {
-        delete this.value.spec.sessionAffinityConfig.clientIP.timeoutSeconds;
-      }
-    }
-  },
-
-  methods: {
-    checkTypeIs(typeIn) {
-      const { value: { spec: { type } } } = this;
-
-      if (type === typeIn) {
-        return true;
-      }
-
-      return false;
-    }
-  },
-
-  updateExternalName(e) {
-    debugger;
-    this.$set(this.value.spec, 'externalName', e);
-  },
-};
-</script>
-
-<template>
-  <div>
-    <DetailTop v-if="isView" :columns="detailTopColumns">
-      <template v-slot:created>
-        <LiveDate
-          :value="value.metadata.creationTimestamp"
-          :add-suffix="true"
-        />
-      </template>
-    </DetailTop>
-    <form>
-      <NameNsDescription
-        v-if="isCreate"
-        :value="value"
-        :namespaced="false"
-        :mode="mode"
-        :extra-columns="extraColumns"
-      >
-        <template #type-col>
-          <LabeledSelect
-            option-key="id"
-            option-label="translationLabel"
-            :label="t('servicesPage.typeOpts.label')"
-            :localized-label="true"
-            :mode="mode"
-            :options="defaultServiceTypes"
-            :value="value.spec.type"
-            @input="e=>$set(value.spec, 'type', e.id)"
-          />
-        </template>
-      </NameNsDescription>
-
-      <div class="spacer"></div>
-
-      <div v-if="checkTypeIs('ExternalName')">
-        <div class="title clearfix">
-          <h4>
-            <t k="servicesPage.externalName.label" />
-          </h4>
-          <p class="helper-text">
-            <t k="servicesPage.externalName.helpText" />
-          </p>
-        </div>
-        <div class="row mt-10">
-          <div class="col span-6">
-            <span v-if="isView">{{ value.spec.externalName }}</span>
-            <input
-              v-else
-              ref="external-name"
-              v-model.number="value.spec.externalName"
-              type="text"
-              :placeholder="t('servicesPage.externalName.placeholder')"
-            />
-          </div>
-        </div>
-      </div>
-      <ServicePorts
-        v-else
-        v-model="value.spec.ports"
-        class="col span-12"
-        :mode="mode"
-        :spec-type="value.spec.type"
-      />
-
-      <div class="spacer"></div>
-
-      <ResourceTabs v-model="value" :mode="mode">
-        <template #before>
-          <Tab
-            v-if="!checkTypeIs('NodePort') && !checkTypeIs('ExternalName')"
-            name="selectors"
-            :label="t('servicesPage.selectors.label')"
-          >
-            <div class="row">
-              <div class="col span-12">
-                <p class="helper-text">
-                  <t k="servicesPage.selectors.helpText" />
-                </p>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col span-12">
-                <KeyValue
-                  key="selectors"
-                  v-model="value.spec.selector"
-                  :mode="mode"
-                  :initial-empty-row="true"
-                  :pad-left="false"
-                  :read-allowed="false"
-                  :protip="false"
-                  @input="e=>$set(value.spec, 'selector', e)"
-                />
-              </div>
-            </div>
-          </Tab>
-          <Tab name="ips" :label="t('servicesPage.ips.label')">
-            <div v-if="checkTypeIs('ClusterIP') || checkTypeIs('LoadBalancer')" class="row">
-              <div class="col span-12">
-                <p class="helper-text">
-                  <t k="servicesPage.ips.helpText" />
-                </p>
-              </div>
-            </div>
-            <div v-if="checkTypeIs('ClusterIP') || checkTypeIs('LoadBalancer')" class="row mb-20">
-              <div class="col span-6">
-                <LabeledInput
-                  v-model="value.spec.clusterIP"
-                  :mode="mode"
-                  :label="t('servicesPage.ips.input.label')"
-                  :placeholder="t('servicesPage.ips.input.placeholder')"
-                  @input="e=>$set(value.spec, 'clusterIP', e)"
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col span-6 pl-10">
-                <ArrayList
-                  key="clusterExternalIpAddresses"
-                  v-model="value.spec.externalIPs"
-                  :title="t('servicesPage.ips.external.label')"
-                  :value-placeholder="t('servicesPage.ips.external.placeholder')"
-                  :value-multiline="false"
-                  :mode="mode"
-                  :pad-left="false"
-                  :protip="false"
-                  @input="e=>$set(value.spec, 'externalIPs', e)"
-                />
-              </div>
-            </div>
-          </Tab>
-          <Tab
-            v-if="!checkTypeIs('NodePort') && !checkTypeIs('ExternalName')"
-            name="session-affinity"
-            :label="t('servicesPage.affinity.label')"
-          >
-            <div class="row">
-              <div class="col span-12">
-                <p class="helper-text">
-                  <t k="servicesPage.affinity.helpText" />
-                </p>
-              </div>
-            </div>
-            <div class="row session-affinity">
-              <div class="col span-6">
-                <RadioGroup
-                  v-model="value.spec.sessionAffinity"
-                  class="enforcement-action"
-                  :options="sessionAffinityActionOptions"
-                  :labels="sessionAffinityActionLabels"
-                  :mode="mode"
-                  @input="e=>value.spec.sessionAffinity = e"
-                />
-              </div>
-              <div v-if="value.spec.sessionAffinity === 'ClusterIP'" class="col span-6">
-                <UnitInput
-                  v-model="value.spec.sessionAffinityConfig.clientIP.timeoutSeconds"
-                  :suffix="t('suffix.seconds')"
-                  :label="t('servicesPage.affinity.timeout.label')"
-                  :placeholder="t('servicesPage.affinity.timeout.placeholder')"
-                  @input="e=>$set(value.spec.sessionAffinityConfig.clientIP, 'timeoutSeconds', e)"
-                />
-              </div>
-            </div>
-          </Tab>
-        </template>
-      </ResourceTabs>
-
-      <Footer
-        :mode="mode"
-        :errors="errors"
-        @save="save"
-        @done="done"
-      />
-    </form>
-  </div>
-</template>
diff --git a/components/ResourceDetail/index.vue b/components/ResourceDetail/index.vue
index a44ad35c78..186ee459ce 100644
--- a/components/ResourceDetail/index.vue
+++ b/components/ResourceDetail/index.vue
@@ -1,4 +1,5 @@
 <script>
+import { hasIn } from 'lodash';
 import { cleanForNew } from '@/plugins/steve/normalize';
 import CreateEditView from '@/mixins/create-edit-view';
 import ResourceYaml from '@/components/ResourceYaml';
@@ -67,7 +68,9 @@ export async function defaultAsyncData(ctx, resource) {
 
   const hasCustomDetail = store.getters['type-map/hasCustomDetail'](resource);
   const hasCustomEdit = store.getters['type-map/hasCustomEdit'](resource);
-  const asYamlInit = (route.query[AS_YAML] === _FLAGGED) || (realMode === _VIEW && !hasCustomDetail) || (realMode !== _VIEW && !hasCustomEdit);
+  const asYamlInit = (hasIn(route.query, AS_YAML) && (route.query[AS_YAML] === _FLAGGED)) ||
+   (realMode === _VIEW && !hasCustomDetail && !hasCustomEdit) ||
+    (realMode !== _VIEW && !hasCustomEdit);
   const schema = store.getters['cluster/schemaFor'](resource);
   const schemas = store.getters['cluster/all'](SCHEMA);
 
@@ -187,11 +190,14 @@ export default {
 
   data() {
     // asYamlInit is taken from route query and passed as prop from _id page; asYaml is saved in local data to be manipulated by Masthead
-    const asYaml = this.asYamlInit;
+    const {
+      asYamlInit: asYaml,
+      value: currentValue,
+    } = this;
 
     return {
       asYaml,
-      currentValue:            this.value,
+      currentValue,
       detailComponent:         this.$store.getters['type-map/importDetail'](this.resource),
       editComponent:           this.$store.getters['type-map/importEdit'](this.resource),
     };
@@ -230,7 +236,7 @@ export default {
     showComponent() {
       if ( this.isView && this.hasCustomDetail ) {
         return this.detailComponent;
-      } else if ( !this.isView && this.hasCustomEdit ) {
+      } else if ( !this.asYaml && this.hasCustomEdit ) {
         return this.editComponent;
       }
 
@@ -267,7 +273,21 @@ export default {
       :as-yaml.sync="asYaml"
       :has-detail="hasCustomDetail"
     />
-    <template v-if="asYaml">
+    <template v-if="(hasCustomEdit || hasCustomDetail) && showComponent">
+      <component
+        :is="showComponent"
+        v-model="model"
+        :original-value="originalModel"
+        :done-route="doneRoute"
+        :done-params="doneParams"
+        :mode="mode"
+        :real-mode="realMode"
+        :value="model"
+        :obj="model"
+        :yaml="yaml"
+      />
+    </template>
+    <template v-else>
       <div v-if="!isView">
         <button class="btn btn-sm role-primary" @click="readFromFile">
           Read from file
@@ -282,20 +302,6 @@ export default {
         :done-route="doneRoute"
       />
     </template>
-    <template v-else>
-      <component
-        :is="showComponent"
-        v-model="model"
-        :original-value="originalModel"
-        :done-route="doneRoute"
-        :done-params="doneParams"
-        :mode="mode"
-        :real-mode="realMode"
-        :value="model"
-        :obj="model"
-        :yaml="yaml"
-      />
-    </template>
   </div>
 </template>
 
diff --git a/detail/service.vue b/detail/service.vue
deleted file mode 100644
index 7a090935d8..0000000000
--- a/detail/service.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-import ServiceCreateEditView from '@/components/CreateEditView/Service';
-
-export default { components: { ServiceCreateEditView } };
-</script>
-
-<template>
-  <ServiceCreateEditView
-    :props="$props"
-    v-bind="$attrs"
-  />
-</template>
diff --git a/edit/service.vue b/edit/service.vue
index 7a090935d8..3109630b97 100644
--- a/edit/service.vue
+++ b/edit/service.vue
@@ -1,12 +1,314 @@
 <script>
-import ServiceCreateEditView from '@/components/CreateEditView/Service';
+import { find } from 'lodash';
+import ArrayList from '@/components/form/ArrayList';
+import CreateEditView from '@/mixins/create-edit-view';
+import DetailTop from '@/components/DetailTop';
+import Footer from '@/components/form/Footer';
+import KeyValue from '@/components/form/KeyValue';
+import LabeledInput from '@/components/form/LabeledInput';
+import LabeledSelect from '@/components/form/LabeledSelect';
+import LiveDate from '@/components/formatter/LiveDate';
+import NameNsDescription from '@/components/form/NameNsDescription';
+import RadioGroup from '@/components/form/RadioGroup';
+import ResourceTabs from '@/components/form/ResourceTabs';
+import ServicePorts from '@/components/form/ServicePorts';
+import Tab from '@/components/Tabbed/Tab';
+import UnitInput from '@/components/form/UnitInput';
+import { DEFAULT_SERVICE_TYPES } from '@/config/types';
+import { ucFirst } from '@/utils/string';
 
-export default { components: { ServiceCreateEditView } };
+const SESSION_AFFINITY_ACTION_VALUES = {
+  NONE:      'None',
+  CLUSTERIP: 'ClusterIP'
+};
+
+const SESSION_AFFINITY_ACTION_LABELS = {
+  NONE:      'servicesPage.affinity.actionLabels.none',
+  CLUSTERIP: 'servicesPage.affinity.actionLabels.clusterIp'
+};
+
+const SESSION_STICKY_TIME_DEFAULT = 10800;
+
+export default {
+  // Props are found in CreateEditView
+  // props: {},
+
+  components: {
+    ArrayList,
+    DetailTop,
+    Footer,
+    KeyValue,
+    LabeledInput,
+    LabeledSelect,
+    LiveDate,
+    NameNsDescription,
+    RadioGroup,
+    ResourceTabs,
+    ServicePorts,
+    Tab,
+    UnitInput,
+  },
+
+  mixins:     [CreateEditView],
+
+  data() {
+    if (!this?.value?.spec?.type) {
+      const defaultService = find(DEFAULT_SERVICE_TYPES, ['id', 'ClusterIP']);
+
+      if (!this?.value?.spec) {
+        this.$set(this.value, 'spec', {
+          ports:           [],
+          sessionAffinity: 'None',
+          type:            defaultService.id,
+        });
+      } else {
+        this.$set(this.value.spec, 'type', defaultService.id);
+      }
+    }
+
+    return {
+      sessionAffinityActionOptions: Object.values(SESSION_AFFINITY_ACTION_VALUES),
+      sessionAffinityActionLabels:  Object.values(SESSION_AFFINITY_ACTION_LABELS).map(v => this.$store.getters['i18n/t'](v)).map(ucFirst),
+      defaultServiceTypes:          DEFAULT_SERVICE_TYPES,
+    };
+  },
+
+  computed: {
+    extraColumns() {
+      return ['type-col'];
+    },
+
+    detailTopColumns() {
+      return [
+        {
+          title:   this.$store.getters['i18n/t']('generic.type'),
+          content: this.value?.spec.type,
+          name:    'type',
+        },
+        {
+          title: this.$store.getters['i18n/t']('generic.created'),
+          name:  'created'
+        },
+      ];
+    },
+  },
+
+  watch: {
+    'value.spec.type'(val) {
+      if (val === 'ExternalName') {
+        this.value.spec.ports = null;
+      }
+
+      if (val === 'Headless') {
+        this.value.spec.clusterIP = 'None';
+      } else if (val !== 'Headless' && this.value.spec.clusterIP === 'None') {
+        this.value.spec.clusterIP = null;
+      }
+    },
+
+    'value.spec.sessionAffinity'(val) {
+      if (val === 'ClusterIP') {
+        this.value.spec.sessionAffinityConfig = { clientIP: { timeoutSeconds: null } };
+
+        // set it null and then set it with vue to make reactive.
+        this.$set(this.value.spec.sessionAffinityConfig.clientIP, 'timeoutSeconds', SESSION_STICKY_TIME_DEFAULT);
+      } else if (this.value?.spec?.sessionAffinityConfig?.clientIP?.timeoutSeconds) {
+        delete this.value.spec.sessionAffinityConfig.clientIP.timeoutSeconds;
+      }
+    }
+  },
+
+  methods: {
+    checkTypeIs(typeIn) {
+      const { value: { spec: { type } } } = this;
+
+      if (type === typeIn) {
+        return true;
+      }
+
+      return false;
+    }
+  },
+
+  updateExternalName(e) {
+    this.$set(this.value.spec, 'externalName', e);
+  },
+};
 </script>
 
 <template>
-  <ServiceCreateEditView
-    :props="$props"
-    v-bind="$attrs"
-  />
+  <div>
+    <DetailTop v-if="isView" :columns="detailTopColumns">
+      <template v-slot:created>
+        <LiveDate
+          :value="value.metadata.creationTimestamp"
+          :add-suffix="true"
+        />
+      </template>
+    </DetailTop>
+    <form>
+      <NameNsDescription
+        v-if="isCreate"
+        :value="value"
+        :namespaced="false"
+        :mode="mode"
+        :extra-columns="extraColumns"
+      >
+        <template #type-col>
+          <LabeledSelect
+            option-key="id"
+            option-label="translationLabel"
+            :label="t('servicesPage.typeOpts.label')"
+            :localized-label="true"
+            :mode="mode"
+            :options="defaultServiceTypes"
+            :value="value.spec.type"
+            @input="e=>$set(value.spec, 'type', e.id)"
+          />
+        </template>
+      </NameNsDescription>
+
+      <div class="spacer"></div>
+
+      <div v-if="checkTypeIs('ExternalName')">
+        <div class="title clearfix">
+          <h4>
+            <t k="servicesPage.externalName.label" />
+          </h4>
+          <p class="helper-text">
+            <t k="servicesPage.externalName.helpText" />
+          </p>
+        </div>
+        <div class="row mt-10">
+          <div class="col span-6">
+            <span v-if="isView">{{ value.spec.externalName }}</span>
+            <input
+              v-else
+              ref="external-name"
+              v-model.number="value.spec.externalName"
+              type="text"
+              :placeholder="t('servicesPage.externalName.placeholder')"
+            />
+          </div>
+        </div>
+      </div>
+      <ServicePorts
+        v-else
+        v-model="value.spec.ports"
+        class="col span-12"
+        :mode="mode"
+        :spec-type="value.spec.type"
+      />
+
+      <div class="spacer"></div>
+
+      <ResourceTabs v-model="value" :mode="mode">
+        <template #before>
+          <Tab
+            v-if="!checkTypeIs('NodePort') && !checkTypeIs('ExternalName')"
+            name="selectors"
+            :label="t('servicesPage.selectors.label')"
+          >
+            <div class="row">
+              <div class="col span-12">
+                <p class="helper-text">
+                  <t k="servicesPage.selectors.helpText" />
+                </p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col span-12">
+                <KeyValue
+                  key="selectors"
+                  v-model="value.spec.selector"
+                  :mode="mode"
+                  :initial-empty-row="true"
+                  :pad-left="false"
+                  :read-allowed="false"
+                  :protip="false"
+                  @input="e=>$set(value.spec, 'selector', e)"
+                />
+              </div>
+            </div>
+          </Tab>
+          <Tab name="ips" :label="t('servicesPage.ips.label')">
+            <div v-if="checkTypeIs('ClusterIP') || checkTypeIs('LoadBalancer')" class="row">
+              <div class="col span-12">
+                <p class="helper-text">
+                  <t k="servicesPage.ips.helpText" />
+                </p>
+              </div>
+            </div>
+            <div v-if="checkTypeIs('ClusterIP') || checkTypeIs('LoadBalancer')" class="row mb-20">
+              <div class="col span-6">
+                <LabeledInput
+                  v-model="value.spec.clusterIP"
+                  :mode="mode"
+                  :label="t('servicesPage.ips.input.label')"
+                  :placeholder="t('servicesPage.ips.input.placeholder')"
+                  @input="e=>$set(value.spec, 'clusterIP', e)"
+                />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col span-6 pl-10">
+                <ArrayList
+                  key="clusterExternalIpAddresses"
+                  v-model="value.spec.externalIPs"
+                  :title="t('servicesPage.ips.external.label')"
+                  :value-placeholder="t('servicesPage.ips.external.placeholder')"
+                  :value-multiline="false"
+                  :mode="mode"
+                  :pad-left="false"
+                  :protip="false"
+                  @input="e=>$set(value.spec, 'externalIPs', e)"
+                />
+              </div>
+            </div>
+          </Tab>
+          <Tab
+            v-if="!checkTypeIs('NodePort') && !checkTypeIs('ExternalName')"
+            name="session-affinity"
+            :label="t('servicesPage.affinity.label')"
+          >
+            <div class="row">
+              <div class="col span-12">
+                <p class="helper-text">
+                  <t k="servicesPage.affinity.helpText" />
+                </p>
+              </div>
+            </div>
+            <div class="row session-affinity">
+              <div class="col span-6">
+                <RadioGroup
+                  v-model="value.spec.sessionAffinity"
+                  class="enforcement-action"
+                  :options="sessionAffinityActionOptions"
+                  :labels="sessionAffinityActionLabels"
+                  :mode="mode"
+                  @input="e=>value.spec.sessionAffinity = e"
+                />
+              </div>
+              <div v-if="value.spec.sessionAffinity === 'ClusterIP'" class="col span-6">
+                <UnitInput
+                  v-model="value.spec.sessionAffinityConfig.clientIP.timeoutSeconds"
+                  :suffix="t('suffix.seconds')"
+                  :label="t('servicesPage.affinity.timeout.label')"
+                  :placeholder="t('servicesPage.affinity.timeout.placeholder')"
+                  @input="e=>$set(value.spec.sessionAffinityConfig.clientIP, 'timeoutSeconds', e)"
+                />
+              </div>
+            </div>
+          </Tab>
+        </template>
+      </ResourceTabs>
+
+      <Footer
+        :mode="mode"
+        :errors="errors"
+        @save="save"
+        @done="done"
+      />
+    </form>
+  </div>
 </template>

From bf3d929dbc37e53a12bc737c166225866a7c02a8 Mon Sep 17 00:00:00 2001
From: Westly Wright <westly.wright@gmail.com>
Date: Fri, 15 May 2020 14:37:36 -0700
Subject: [PATCH 3/5] More refactoring for masthead and yaml-viewing

rolled back some changes i made to resource detail & showing the
correct component
changed the name of hasDetail to be more descriptive of what it is
---
 components/ResourceDetail/Masthead.vue |  4 +--
 components/ResourceDetail/index.vue    | 34 +++++++++++++-------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/components/ResourceDetail/Masthead.vue b/components/ResourceDetail/Masthead.vue
index f97572954f..d2a529430e 100644
--- a/components/ResourceDetail/Masthead.vue
+++ b/components/ResourceDetail/Masthead.vue
@@ -37,7 +37,7 @@ export default {
       default: false
     },
 
-    hasDetail: {
+    hasDetailOrEdit: {
       type:    Boolean,
       default: false
     }
@@ -128,7 +128,7 @@ export default {
     </div>
     <div v-if="mode==='view'" class="actions">
       <!-- //TODO remove check for custom detail component once there is a generic detail -->
-      <div v-if="hasDetail">
+      <div v-if="hasDetailOrEdit">
         <ButtonGroup :labels-are-translations="true" :value="asYaml" :options="[{label: 'resourceDetail.masthead.overview', value: false},{label:'resourceDetail.masthead.yaml', value: true }]" @input="toggleYaml" />
       </div>
       <button ref="actions" aria-haspopup="true" type="button" class="btn btn-sm role-multi-action actions" @click="showActions">
diff --git a/components/ResourceDetail/index.vue b/components/ResourceDetail/index.vue
index 186ee459ce..292a2c8e59 100644
--- a/components/ResourceDetail/index.vue
+++ b/components/ResourceDetail/index.vue
@@ -236,7 +236,7 @@ export default {
     showComponent() {
       if ( this.isView && this.hasCustomDetail ) {
         return this.detailComponent;
-      } else if ( !this.asYaml && this.hasCustomEdit ) {
+      } else if ( this.hasCustomEdit ) {
         return this.editComponent;
       }
 
@@ -271,23 +271,9 @@ export default {
       :done-route="doneRoute"
       :real-mode="realMode"
       :as-yaml.sync="asYaml"
-      :has-detail="hasCustomDetail"
+      :has-detail-or-edit="(hasCustomDetail || hasCustomEdit)"
     />
-    <template v-if="(hasCustomEdit || hasCustomDetail) && showComponent">
-      <component
-        :is="showComponent"
-        v-model="model"
-        :original-value="originalModel"
-        :done-route="doneRoute"
-        :done-params="doneParams"
-        :mode="mode"
-        :real-mode="realMode"
-        :value="model"
-        :obj="model"
-        :yaml="yaml"
-      />
-    </template>
-    <template v-else>
+    <template v-if="asYaml">
       <div v-if="!isView">
         <button class="btn btn-sm role-primary" @click="readFromFile">
           Read from file
@@ -302,6 +288,20 @@ export default {
         :done-route="doneRoute"
       />
     </template>
+    <template v-else>
+      <component
+        :is="showComponent"
+        v-model="model"
+        :original-value="originalModel"
+        :done-route="doneRoute"
+        :done-params="doneParams"
+        :mode="mode"
+        :real-mode="realMode"
+        :value="model"
+        :obj="model"
+        :yaml="yaml"
+      />
+    </template>
   </div>
 </template>
 

From a1a48aec2801f507dabc5be985079b8b70172f36 Mon Sep 17 00:00:00 2001
From: Westly Wright <westly.wright@gmail.com>
Date: Fri, 15 May 2020 14:37:46 -0700
Subject: [PATCH 4/5] translations

---
 assets/translations/en-us.yaml |  8 +++++++-
 components/ResourceYaml.vue    | 28 ++++++++++++++++++++++------
 components/form/Footer.vue     |  2 +-
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index 4f5dfbb777..8e421e6501 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -7,13 +7,14 @@ buttons:
   remove: Remove
 
 generic:
+  cancel: Cancel
   close: Close
   comingSoon: Coming Soon
   created: Created
   customize: Customize
   na: "n/a"
-  unknown: Unknown
   type: Type
+  unknown: Unknown
 
 suffix:
   ib: iB
@@ -411,3 +412,8 @@ serviceTypes:
   headless: Headless
   loadbalancer: Load Balancer
   nodeport: Node Port
+
+resourceYaml:
+  buttons:
+    continue: Continue Editing
+    diff: Show Diff
diff --git a/components/ResourceYaml.vue b/components/ResourceYaml.vue
index aef6b7eea1..1eb11488f6 100644
--- a/components/ResourceYaml.vue
+++ b/components/ResourceYaml.vue
@@ -256,13 +256,29 @@ export default {
       @onReady="onReady"
       @onChanges="onChanges"
     />
-    <Footer v-if="!isView" :mode="mode" :errors="errors" @save="save" @done="done">
-      <template #middle>
-        <button v-if="showPreview" type="button" class="btn role-secondary" @click="unpreview">
-          Continue Editing
+    <Footer
+      :mode="mode"
+      :errors="errors"
+      @save="save"
+      @done="done"
+    >
+      <template v-if="!isView" #middle>
+        <button
+          v-if="showPreview"
+          type="button"
+          class="btn role-secondary"
+          @click="unpreview"
+        >
+          <t k="resourceYaml.buttons.continue" />
         </button>
-        <button v-else-if="offerPreview" :disabled="yaml === currentYaml" type="button" class="btn role-secondary" @click="preview">
-          Show Diff
+        <button
+          v-else-if="offerPreview"
+          :disabled="yaml === currentYaml"
+          type="button"
+          class="btn role-secondary"
+          @click="preview"
+        >
+          <t k="resourceYaml.buttons.diff" />
         </button>
       </template>
     </Footer>
diff --git a/components/form/Footer.vue b/components/form/Footer.vue
index aa0a3e2b77..11c707e0bf 100644
--- a/components/form/Footer.vue
+++ b/components/form/Footer.vue
@@ -51,7 +51,7 @@ export default {
       <slot name="left" />
       <slot name="cancel">
         <button type="button" class="btn role-secondary" @click="done">
-          Cancel
+          <t k="generic.cancel" />
         </button>
       </slot>
       <slot name="middle" />

From f2f1a6a0b2df5f090c7c418e930d25d33d8f2a4a Mon Sep 17 00:00:00 2001
From: Westly Wright <westly.wright@gmail.com>
Date: Mon, 18 May 2020 14:04:32 -0700
Subject: [PATCH 5/5] PR feedback

remvoe unused udpateExternalName method
change form-name-desc v-if
rollback change to show cancel on view page
---
 components/ResourceDetail/index.vue | 3 +--
 edit/service.vue                    | 7 ++-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/ResourceDetail/index.vue b/components/ResourceDetail/index.vue
index 292a2c8e59..46bed9e5f4 100644
--- a/components/ResourceDetail/index.vue
+++ b/components/ResourceDetail/index.vue
@@ -1,5 +1,4 @@
 <script>
-import { hasIn } from 'lodash';
 import { cleanForNew } from '@/plugins/steve/normalize';
 import CreateEditView from '@/mixins/create-edit-view';
 import ResourceYaml from '@/components/ResourceYaml';
@@ -68,7 +67,7 @@ export async function defaultAsyncData(ctx, resource) {
 
   const hasCustomDetail = store.getters['type-map/hasCustomDetail'](resource);
   const hasCustomEdit = store.getters['type-map/hasCustomEdit'](resource);
-  const asYamlInit = (hasIn(route.query, AS_YAML) && (route.query[AS_YAML] === _FLAGGED)) ||
+  const asYamlInit = (route.query[AS_YAML] === _FLAGGED) ||
    (realMode === _VIEW && !hasCustomDetail && !hasCustomEdit) ||
     (realMode !== _VIEW && !hasCustomEdit);
   const schema = store.getters['cluster/schemaFor'](resource);
diff --git a/edit/service.vue b/edit/service.vue
index 3109630b97..819d628b80 100644
--- a/edit/service.vue
+++ b/edit/service.vue
@@ -129,10 +129,6 @@ export default {
       return false;
     }
   },
-
-  updateExternalName(e) {
-    this.$set(this.value.spec, 'externalName', e);
-  },
 };
 </script>
 
@@ -148,7 +144,7 @@ export default {
     </DetailTop>
     <form>
       <NameNsDescription
-        v-if="isCreate"
+        v-if="!isView"
         :value="value"
         :namespaced="false"
         :mode="mode"
@@ -304,6 +300,7 @@ export default {
       </ResourceTabs>
 
       <Footer
+        v-if="!isView"
         :mode="mode"
         :errors="errors"
         @save="save"