Extract knative domain editor into a component

The new component also implements several improvements in the
knative domain editor workflow:

- Display a loading spinner when saving changes in the domain name
- Display success toast message indicating changes were saved
successfully.
- Display error message in the contraty occurs

5 files changed, 365 insertions, 205 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 70af333a0dd..bc2e71b99f2 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -353,8 +353,10 @@ export default class Clusters {
 
   saveKnativeDomain(data) {
     const appId = data.id;
-    this.store.updateAppProperty(appId, 'status', APPLICATION_STATUS.UPDATING);
-    this.service.updateApplication(appId, data.params);
+    this.store.updateApplication(appId);
+    this.service.updateApplication(appId, data.params).catch(() => {
+      this.store.notifyUpdateFailure(appId);
+    });
   }
 
   setKnativeHostname(data) {
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 73760da9b98..2d129245d37 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -15,6 +15,7 @@ import prometheusLogo from 'images/cluster_app_logos/prometheus.png';
 import { s__, sprintf } from '../../locale';
 import applicationRow from './application_row.vue';
 import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import KnativeDomainEditor from './knative_domain_editor.vue';
 import { CLUSTER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '~/clusters/event_hub';
@@ -25,6 +26,7 @@ export default {
     clipboardButton,
     LoadingButton,
     GlLoadingIcon,
+    KnativeDomainEditor,
   },
   props: {
     type: {
@@ -154,64 +156,21 @@ export default {
     knative() {
       return this.applications.knative;
     },
-    knativeInstalled() {
-      return (
-        this.knative.status === APPLICATION_STATUS.INSTALLED ||
-        this.knativeUpgrading ||
-        this.knativeUpgradeFailed ||
-        this.knative.status === APPLICATION_STATUS.UPDATED
-      );
-    },
-    knativeUpgrading() {
-      return (
-        this.knative.status === APPLICATION_STATUS.UPDATING ||
-        this.knative.status === APPLICATION_STATUS.SCHEDULED
-      );
-    },
-    knativeUpgradeFailed() {
-      return this.knative.status === APPLICATION_STATUS.UPDATE_ERRORED;
-    },
-    knativeExternalEndpoint() {
-      return this.knative.externalIp || this.knative.externalHostname;
-    },
-    knativeDescription() {
-      return sprintf(
-        _.escape(
-          s__(
-            `ClusterIntegration|Installing Knative may incur additional costs. Learn more about %{pricingLink}.`,
-          ),
-        ),
-        {
-          pricingLink: `<strong><a href="https://cloud.google.com/compute/pricing#lb"
-              target="_blank" rel="noopener noreferrer">
-              ${_.escape(s__('ClusterIntegration|pricing'))}</a></strong>`,
-        },
-        false,
-      );
-    },
-    canUpdateKnativeEndpoint() {
-      return this.knativeExternalEndpoint && !this.knativeUpgradeFailed && !this.knativeUpgrading;
-    },
-    knativeHostname: {
-      get() {
-        return this.knative.hostname;
-      },
-      set(hostname) {
-        eventHub.$emit('setKnativeHostname', {
-          id: 'knative',
-          hostname,
-        });
-      },
-    },
   },
   created() {
     this.helmInstallIllustration = helmInstallIllustration;
   },
   methods: {
-    saveKnativeDomain() {
+    saveKnativeDomain(hostname) {
       eventHub.$emit('saveKnativeDomain', {
         id: 'knative',
-        params: { hostname: this.knative.hostname },
+        params: { hostname },
+      });
+    },
+    setKnativeHostname(hostname) {
+      eventHub.$emit('setKnativeHostname', {
+        id: 'knative',
+        hostname,
       });
     },
   },
@@ -318,9 +277,9 @@ export default {
                 generated endpoint in order to access
                 your application after it has been deployed.`)
                 }}
-                <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">{{
-                  __('More information')
-                }}</a>
+                <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
+                  {{ __('More information') }}
+                </a>
               </p>
             </div>
 
@@ -330,9 +289,9 @@ export default {
               the process of being assigned. Please check your Kubernetes
               cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
               }}
-              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">{{
-                __('More information')
-              }}</a>
+              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
+                {{ __('More information') }}
+              </a>
             </p>
           </template>
           <template v-if="!ingressInstalled">
@@ -361,9 +320,9 @@ export default {
           <div slot="description">
             <p v-html="certManagerDescription"></p>
             <div class="form-group">
-              <label for="cert-manager-issuer-email">{{
-                s__('ClusterIntegration|Issuer Email')
-              }}</label>
+              <label for="cert-manager-issuer-email">
+                {{ s__('ClusterIntegration|Issuer Email') }}
+              </label>
               <div class="input-group">
                 <input
                   v-model="applications.cert_manager.email"
@@ -491,9 +450,9 @@ export default {
                   s__(`ClusterIntegration|Replace this with your own hostname if you want.
                 If you do so, point hostname to Ingress IP Address from above.`)
                 }}
-                <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">{{
-                  __('More information')
-                }}</a>
+                <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
+                  {{ __('More information') }}
+                </a>
               </p>
             </div>
           </template>
@@ -514,6 +473,7 @@ export default {
         :uninstallable="applications.knative.uninstallable"
         :uninstall-successful="applications.knative.uninstallSuccessful"
         :uninstall-failed="applications.knative.uninstallFailed"
+        :updateable="false"
         :disabled="!helmInstalled"
         v-bind="applications.knative"
         title-link="https://github.com/knative/docs"
@@ -525,9 +485,9 @@ export default {
                 s__(`ClusterIntegration|You must have an RBAC-enabled cluster
               to install Knative.`)
               }}
-              <a :href="helpPath" target="_blank" rel="noopener noreferrer">{{
-                __('More information')
-              }}</a>
+              <a :href="helpPath" target="_blank" rel="noopener noreferrer">
+                {{ __('More information') }}
+              </a>
             </p>
             <br />
           </span>
@@ -540,83 +500,13 @@ export default {
             }}
           </p>
 
-          <div class="row">
-            <template v-if="knativeInstalled || (helmInstalled && rbac)">
-              <div
-                :class="{ 'col-md-6': knativeInstalled, 'col-12': helmInstalled && rbac }"
-                class="form-group col-sm-12 mb-0"
-              >
-                <label for="knative-domainname">
-                  <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong>
-                </label>
-                <input
-                  id="knative-domainname"
-                  v-model="knativeHostname"
-                  type="text"
-                  class="form-control js-knative-domainname"
-                />
-              </div>
-            </template>
-            <template v-if="knativeInstalled">
-              <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
-                <label for="knative-endpoint">
-                  <strong>{{ s__('ClusterIntegration|Knative Endpoint:') }}</strong>
-                </label>
-                <div v-if="knativeExternalEndpoint" class="input-group">
-                  <input
-                    id="knative-endpoint"
-                    :value="knativeExternalEndpoint"
-                    type="text"
-                    class="form-control js-knative-endpoint"
-                    readonly
-                  />
-                  <span class="input-group-append">
-                    <clipboard-button
-                      :text="knativeExternalEndpoint"
-                      :title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
-                      class="input-group-text js-knative-endpoint-clipboard-btn"
-                    />
-                  </span>
-                </div>
-                <div v-else class="input-group">
-                  <input type="text" class="form-control js-endpoint" readonly />
-                  <gl-loading-icon
-                    class="position-absolute align-self-center ml-2 js-knative-ip-loading-icon"
-                  />
-                </div>
-              </div>
-
-              <p class="form-text text-muted col-12">
-                {{
-                  s__(
-                    `ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint.`,
-                  )
-                }}
-                <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">{{
-                  __('More information')
-                }}</a>
-              </p>
-
-              <p
-                v-if="!knativeExternalEndpoint"
-                class="settings-message js-no-knative-endpoint-message mt-2 mr-3 mb-0 ml-3"
-              >
-                {{
-                  s__(`ClusterIntegration|The endpoint is in
-                the process of being assigned. Please check your Kubernetes
-                cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
-                }}
-              </p>
-
-              <button
-                v-if="canUpdateKnativeEndpoint"
-                class="btn btn-success js-knative-save-domain-button mt-3 ml-3"
-                @click="saveKnativeDomain"
-              >
-                {{ s__('ClusterIntegration|Save changes') }}
-              </button>
-            </template>
-          </div>
+          <knative-domain-editor
+            v-if="knative.installed || (helmInstalled && rbac)"
+            :knative="knative"
+            :ingress-dns-help-path="ingressDnsHelpPath"
+            @save="saveKnativeDomain"
+            @set="setKnativeHostname"
+          />
         </div>
       </application-row>
     </div>
diff --git a/app/assets/javascripts/clusters/components/knative_domain_editor.vue b/app/assets/javascripts/clusters/components/knative_domain_editor.vue
new file mode 100644
index 00000000000..480228619a5
--- /dev/null
+++ b/app/assets/javascripts/clusters/components/knative_domain_editor.vue
@@ -0,0 +1,150 @@
+<script>
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import { APPLICATION_STATUS } from '~/clusters/constants';
+
+const { UPDATING, UNINSTALLING } = APPLICATION_STATUS;
+
+export default {
+  components: {
+    LoadingButton,
+    ClipboardButton,
+    GlLoadingIcon,
+  },
+  props: {
+    knative: {
+      type: Object,
+      required: true,
+    },
+    ingressDnsHelpPath: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    saveButtonDisabled() {
+      return [UNINSTALLING, UPDATING].includes(this.knative.status);
+    },
+    saving() {
+      return [UPDATING].includes(this.knative.status);
+    },
+    saveButtonLabel() {
+      return this.saving ? this.__('Saving') : this.__('Save changes');
+    },
+    knativeInstalled() {
+      return this.knative.installed;
+    },
+    knativeExternalEndpoint() {
+      return this.knative.externalIp || this.knative.externalHostname;
+    },
+    knativeUpdateSuccessful() {
+      return this.knative.updateSuccessful;
+    },
+    knativeHostname: {
+      get() {
+        return this.knative.hostname;
+      },
+      set(hostname) {
+        this.$emit('set', hostname);
+      },
+    },
+  },
+  watch: {
+    knativeUpdateSuccessful(updateSuccessful) {
+      if (updateSuccessful) {
+        this.$toast.show(s__('ClusterIntegration|Knative domain name was updated successfully.'));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="row">
+    <div
+      v-if="knative.updateFailed"
+      class="bs-callout bs-callout-danger cluster-application-banner col-12 mt-2 mb-2 js-cluster-knative-domain-name-failure-message"
+    >
+      {{ s__('ClusterIntegration|Something went wrong while updating Knative domain name.') }}
+    </div>
+
+    <template>
+      <div
+        :class="{ 'col-md-6': knativeInstalled, 'col-12': !knativeInstalled }"
+        class="form-group col-sm-12 mb-0"
+      >
+        <label for="knative-domainname">
+          <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong>
+        </label>
+        <input
+          id="knative-domainname"
+          v-model="knativeHostname"
+          type="text"
+          class="form-control js-knative-domainname"
+        />
+      </div>
+    </template>
+    <template v-if="knativeInstalled">
+      <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
+        <label for="knative-endpoint">
+          <strong>{{ s__('ClusterIntegration|Knative Endpoint:') }}</strong>
+        </label>
+        <div v-if="knativeExternalEndpoint" class="input-group">
+          <input
+            id="knative-endpoint"
+            :value="knativeExternalEndpoint"
+            type="text"
+            class="form-control js-knative-endpoint"
+            readonly
+          />
+          <span class="input-group-append">
+            <clipboard-button
+              :text="knativeExternalEndpoint"
+              :title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
+              class="input-group-text js-knative-endpoint-clipboard-btn"
+            />
+          </span>
+        </div>
+        <div v-else class="input-group">
+          <input type="text" class="form-control js-endpoint" readonly />
+          <gl-loading-icon
+            class="position-absolute align-self-center ml-2 js-knative-ip-loading-icon"
+          />
+        </div>
+      </div>
+
+      <p class="form-text text-muted col-12">
+        {{
+          s__(
+            `ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint.`,
+          )
+        }}
+        <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
+          {{ __('More information') }}
+        </a>
+      </p>
+
+      <p
+        v-if="!knativeExternalEndpoint"
+        class="settings-message js-no-knative-endpoint-message mt-2 mr-3 mb-0 ml-3"
+      >
+        {{
+          s__(`ClusterIntegration|The endpoint is in
+        the process of being assigned. Please check your Kubernetes
+        cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+        }}
+      </p>
+
+      <loading-button
+        class="btn-success js-knative-save-domain-button mt-3 ml-3"
+        :loading="saving"
+        :disabled="saveButtonDisabled"
+        :label="saveButtonLabel"
+        @click="$emit('save', knativeHostname)"
+      />
+    </template>
+  </div>
+</template>
diff --git a/spec/frontend/clusters/components/applications_spec.js b/spec/frontend/clusters/components/applications_spec.js
index 8bcf02f0a34..221ebb143be 100644
--- a/spec/frontend/clusters/components/applications_spec.js
+++ b/spec/frontend/clusters/components/applications_spec.js
@@ -1,9 +1,11 @@
 import Vue from 'vue';
 import applications from '~/clusters/components/applications.vue';
 import { CLUSTER_TYPE } from '~/clusters/constants';
-import eventHub from '~/clusters/event_hub';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import { APPLICATIONS_MOCK_STATE } from '../services/mock_data';
+import eventHub from '~/clusters/event_hub';
+import { shallowMount } from '@vue/test-utils';
+import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
 
 describe('Applications', () => {
   let vm;
@@ -277,73 +279,48 @@ describe('Applications', () => {
   });
 
   describe('Knative application', () => {
-    describe('when installed', () => {
-      describe('with ip address', () => {
-        const props = {
-          applications: {
-            ...APPLICATIONS_MOCK_STATE,
-            knative: {
-              title: 'Knative',
-              hostname: 'example.com',
-              status: 'installed',
-              externalIp: '1.1.1.1',
-            },
-          },
-        };
-        it('renders ip address with a clipboard button', () => {
-          vm = mountComponent(Applications, props);
+    const propsData = {
+      applications: {
+        ...APPLICATIONS_MOCK_STATE,
+        knative: {
+          title: 'Knative',
+          hostname: 'example.com',
+          status: 'installed',
+          externalIp: '1.1.1.1',
+          installed: true,
+        },
+      },
+    };
+    const newHostname = 'newhostname.com';
+    let wrapper;
+    let knativeDomainEditor;
 
-          expect(vm.$el.querySelector('.js-knative-endpoint').value).toEqual('1.1.1.1');
-
-          expect(
-            vm.$el
-              .querySelector('.js-knative-endpoint-clipboard-btn')
-              .getAttribute('data-clipboard-text'),
-          ).toEqual('1.1.1.1');
-        });
-
-        it('renders domain & allows editing', () => {
-          expect(vm.$el.querySelector('.js-knative-domainname').value).toEqual('example.com');
-          expect(vm.$el.querySelector('.js-knative-domainname').getAttribute('readonly')).toBe(
-            null,
-          );
-        });
-
-        it('renders an update/save Knative domain button', () => {
-          expect(vm.$el.querySelector('.js-knative-save-domain-button')).not.toBe(null);
-        });
+    beforeEach(() => {
+      wrapper = shallowMount(Applications, { propsData });
+      jest.spyOn(eventHub, '$emit');
 
-        it('emits event when clicking Save changes button', () => {
-          jest.spyOn(eventHub, '$emit');
-          vm = mountComponent(Applications, props);
+      knativeDomainEditor = wrapper.find(KnativeDomainEditor);
+    });
 
-          const saveButton = vm.$el.querySelector('.js-knative-save-domain-button');
+    afterEach(() => {
+      wrapper.destroy();
+    });
 
-          saveButton.click();
+    it('emits saveKnativeDomain event when knative domain editor emits save event', () => {
+      knativeDomainEditor.vm.$emit('save', newHostname);
 
-          expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', {
-            id: 'knative',
-            params: { hostname: 'example.com' },
-          });
-        });
+      expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', {
+        id: 'knative',
+        params: { hostname: newHostname },
       });
+    });
 
-      describe('without ip address', () => {
-        it('renders an input text with a loading icon and an alert text', () => {
-          vm = mountComponent(Applications, {
-            applications: {
-              ...APPLICATIONS_MOCK_STATE,
-              knative: {
-                title: 'Knative',
-                hostname: 'example.com',
-                status: 'installed',
-              },
-            },
-          });
+    it('emits setKnativeHostname event when knative domain editor emits change event', () => {
+      wrapper.find(KnativeDomainEditor).vm.$emit('set', newHostname);
 
-          expect(vm.$el.querySelector('.js-knative-ip-loading-icon')).not.toBe(null);
-          expect(vm.$el.querySelector('.js-no-knative-endpoint-message')).not.toBe(null);
-        });
+      expect(eventHub.$emit).toHaveBeenCalledWith('setKnativeHostname', {
+        id: 'knative',
+        hostname: newHostname,
       });
     });
   });
diff --git a/spec/frontend/clusters/components/knative_domain_editor_spec.js b/spec/frontend/clusters/components/knative_domain_editor_spec.js
new file mode 100644
index 00000000000..242b5701f8b
--- /dev/null
+++ b/spec/frontend/clusters/components/knative_domain_editor_spec.js
@@ -0,0 +1,141 @@
+import { shallowMount } from '@vue/test-utils';
+import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { APPLICATION_STATUS } from '~/clusters/constants';
+
+const { UPDATING } = APPLICATION_STATUS;
+
+describe('KnativeDomainEditor', () => {
+  let wrapper;
+  let knative;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(KnativeDomainEditor, {
+      propsData: { ...props },
+    });
+  };
+
+  beforeEach(() => {
+    knative = {
+      title: 'Knative',
+      hostname: 'example.com',
+      installed: true,
+    };
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('knative has an assigned IP address', () => {
+    beforeEach(() => {
+      knative.externalIp = '1.1.1.1';
+      createComponent({ knative });
+    });
+
+    it('renders ip address with a clipboard button', () => {
+      expect(wrapper.find('.js-knative-endpoint').exists()).toBe(true);
+      expect(wrapper.find('.js-knative-endpoint').element.value).toEqual(knative.externalIp);
+    });
+
+    it('displays ip address clipboard button', () => {
+      expect(wrapper.find('.js-knative-endpoint-clipboard-btn').attributes('text')).toEqual(
+        knative.externalIp,
+      );
+    });
+
+    it('renders domain & allows editing', () => {
+      const domainNameInput = wrapper.find('.js-knative-domainname');
+
+      expect(domainNameInput.element.value).toEqual(knative.hostname);
+      expect(domainNameInput.attributes('readonly')).toBeFalsy();
+    });
+
+    it('renders an update/save Knative domain button', () => {
+      expect(wrapper.find('.js-knative-save-domain-button').exists()).toBe(true);
+    });
+  });
+
+  describe('knative without ip address', () => {
+    beforeEach(() => {
+      knative.externalIp = null;
+      createComponent({ knative });
+    });
+
+    it('renders an input text with a loading icon', () => {
+      expect(wrapper.find('.js-knative-ip-loading-icon').exists()).toBe(true);
+    });
+
+    it('renders message indicating there is not IP address assigned', () => {
+      expect(wrapper.find('.js-no-knative-endpoint-message').exists()).toBe(true);
+    });
+  });
+
+  describe('clicking save changes button', () => {
+    beforeEach(() => {
+      createComponent({ knative });
+    });
+
+    it('triggers save event and pass current knative hostname', () => {
+      wrapper.find(LoadingButton).vm.$emit('click');
+      expect(wrapper.emitted('save')[0]).toEqual([knative.hostname]);
+    });
+  });
+
+  describe('when knative domain name was saved successfully', () => {
+    beforeEach(() => {
+      createComponent({ knative });
+    });
+
+    it('displays toast indicating a successful update', () => {
+      wrapper.vm.$toast = { show: jest.fn() };
+      wrapper.setProps({ knative: Object.assign({ updateSuccessful: true }, knative) });
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(
+          'Knative domain name was updated successfully.',
+        );
+      });
+    });
+  });
+
+  describe('when knative domain name input changes', () => {
+    it('emits "set" event with updated domain name', () => {
+      const newHostname = 'newhostname.com';
+
+      wrapper.setData({ knativeHostname: newHostname });
+
+      expect(wrapper.emitted('set')[0]).toEqual([newHostname]);
+    });
+  });
+
+  describe('when updating knative domain name failed', () => {
+    beforeEach(() => {
+      createComponent({ knative });
+    });
+
+    it('displays an error banner indicating the operation failure', () => {
+      wrapper.setProps({ knative: { updateFailed: true, ...knative } });
+
+      expect(wrapper.find('.js-cluster-knative-domain-name-failure-message').exists()).toBe(true);
+    });
+  });
+
+  describe(`when knative status is ${UPDATING}`, () => {
+    beforeEach(() => {
+      createComponent({ knative: { status: UPDATING, ...knative } });
+    });
+
+    it('renders loading spinner in save button', () => {
+      expect(wrapper.find(LoadingButton).props('loading')).toBe(true);
+    });
+
+    it('renders disabled save button', () => {
+      expect(wrapper.find(LoadingButton).props('disabled')).toBe(true);
+    });
+
+    it('renders save button with "Saving" label', () => {
+      expect(wrapper.find(LoadingButton).props('label')).toBe('Saving');
+    });
+  });
+});