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

3 files changed, 187 insertions, 145 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>