Update domain help text when ingress is installed

When ingress application is installed, the cluster domain help text
is updated to indicate that ingress external ip can be used as the
cluster domain

4 files changed, 101 insertions, 2 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 388f674f643..c95d7608e37 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -12,6 +12,8 @@ import {
   REQUEST_FAILURE,
   UPGRADE_REQUESTED,
   UPGRADE_REQUEST_FAILURE,
+  INGRESS,
+  INGRESS_DOMAIN_SUFFIX,
 } from './constants';
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
@@ -76,6 +78,10 @@ export default class Clusters {
     this.successApplicationContainer = document.querySelector('.js-cluster-application-notice');
     this.showTokenButton = document.querySelector('.js-show-cluster-token');
     this.tokenField = document.querySelector('.js-cluster-token');
+    this.ingressDomainHelpText = document.querySelector('.js-ingress-domain-help-text');
+    this.ingressDomainSnippet = this.ingressDomainHelpText.querySelector(
+      '.js-ingress-domain-snippet',
+    );
 
     Clusters.initDismissableCallout();
     initSettingsPanels();
@@ -182,6 +188,10 @@ export default class Clusters {
 
     this.checkForNewInstalls(prevApplicationMap, this.store.state.applications);
     this.updateContainer(prevStatus, this.store.state.status, this.store.state.statusReason);
+    this.toggleIngressDomainHelpText(
+      prevApplicationMap[INGRESS],
+      this.store.state.applications[INGRESS],
+    );
   }
 
   showToken() {
@@ -277,6 +287,16 @@ export default class Clusters {
     this.store.updateAppProperty(appId, 'requestStatus', null);
   }
 
+  toggleIngressDomainHelpText(ingressPreviousState, ingressNewState) {
+    const helpTextHidden = ingressNewState.status !== APPLICATION_STATUS.INSTALLED;
+    const domainSnippetText = `${ingressNewState.externalIp}${INGRESS_DOMAIN_SUFFIX}`;
+
+    if (ingressPreviousState.status !== ingressNewState.status) {
+      this.ingressDomainHelpText.classList.toggle('hide', helpTextHidden);
+      this.ingressDomainSnippet.textContent = domainSnippetText;
+    }
+  }
+
   saveKnativeDomain(data) {
     const appId = data.id;
     this.store.updateAppProperty(appId, 'status', APPLICATION_STATUS.UPDATING);
diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js
index 39022879d91..67f481f2afb 100644
--- a/app/assets/javascripts/clusters/constants.js
+++ b/app/assets/javascripts/clusters/constants.js
@@ -28,3 +28,4 @@ export const JUPYTER = 'jupyter';
 export const KNATIVE = 'knative';
 export const RUNNER = 'runner';
 export const CERT_MANAGER = 'cert_manager';
+export const INGRESS_DOMAIN_SUFFIX = '.nip.io';
diff --git a/app/views/clusters/clusters/_form.html.haml b/app/views/clusters/clusters/_form.html.haml
index bef2d522d45..455322b2089 100644
--- a/app/views/clusters/clusters/_form.html.haml
+++ b/app/views/clusters/clusters/_form.html.haml
@@ -35,7 +35,7 @@
       = s_('ClusterIntegration|Specifying a domain will allow you to use Auto Review Apps and Auto Deploy stages for %{auto_devops_start}Auto DevOps%{auto_devops_end}. The domain should have a wildcard DNS configured matching the domain.').html_safe % { auto_devops_start: auto_devops_start, auto_devops_end: '</a>'.html_safe }
       %span{ :class => ["js-ingress-domain-help-text", ("hide" unless @cluster.application_ingress_external_ip.present?)] }
         = s_('ClusterIntegration|Alternatively')
-        %code{ :class => "js-ingress-external-ip-help-text" } #{@cluster.application_ingress_external_ip}.nip.io
+        %code{ :class => "js-ingress-domain-snippet" } #{@cluster.application_ingress_external_ip}.nip.io
         = s_('ClusterIntegration| can be used instead of a custom domain.')
       - custom_domain_url = help_page_path('user/project/clusters/index', anchor: 'pointing-your-dns-at-the-external-endpoint')
       - custom_domain_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: custom_domain_url }
diff --git a/spec/javascripts/clusters/clusters_bundle_spec.js b/spec/javascripts/clusters/clusters_bundle_spec.js
index 7928feeadfa..71f16dc259e 100644
--- a/spec/javascripts/clusters/clusters_bundle_spec.js
+++ b/spec/javascripts/clusters/clusters_bundle_spec.js
@@ -1,5 +1,10 @@
 import Clusters from '~/clusters/clusters_bundle';
-import { REQUEST_SUBMITTED, REQUEST_FAILURE, APPLICATION_STATUS } from '~/clusters/constants';
+import {
+  REQUEST_SUBMITTED,
+  REQUEST_FAILURE,
+  APPLICATION_STATUS,
+  INGRESS_DOMAIN_SUFFIX,
+} from '~/clusters/constants';
 import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
 
 describe('Clusters', () => {
@@ -265,4 +270,77 @@ describe('Clusters', () => {
         .catch(done.fail);
     });
   });
+
+  describe('handleSuccess', () => {
+    beforeEach(() => {
+      spyOn(cluster.store, 'updateStateFromServer');
+      spyOn(cluster, 'toggleIngressDomainHelpText');
+      spyOn(cluster, 'checkForNewInstalls');
+      spyOn(cluster, 'updateContainer');
+
+      cluster.handleSuccess({ data: {} });
+    });
+
+    it('updates clusters store', () => {
+      expect(cluster.store.updateStateFromServer).toHaveBeenCalled();
+    });
+
+    it('checks for new installable apps', () => {
+      expect(cluster.checkForNewInstalls).toHaveBeenCalled();
+    });
+
+    it('toggles ingress domain help text', () => {
+      expect(cluster.toggleIngressDomainHelpText).toHaveBeenCalled();
+    });
+
+    it('updates message containers', () => {
+      expect(cluster.updateContainer).toHaveBeenCalled();
+    });
+  });
+
+  describe('toggleIngressDomainHelpText', () => {
+    const { INSTALLED, INSTALLABLE, NOT_INSTALLABLE } = APPLICATION_STATUS;
+
+    const ingressPreviousState = { status: INSTALLABLE };
+    const ingressNewState = { status: INSTALLED, externalIp: '127.0.0.1' };
+
+    describe(`when ingress application new status is ${INSTALLED}`, () => {
+      beforeEach(() => {
+        ingressNewState.status = INSTALLED;
+        cluster.toggleIngressDomainHelpText(ingressPreviousState, ingressNewState);
+      });
+
+      it('displays custom domain help text', () => {
+        expect(cluster.ingressDomainHelpText.classList.contains('hide')).toEqual(false);
+      });
+
+      it('updates ingress external ip address', () => {
+        expect(cluster.ingressDomainSnippet.textContent).toEqual(
+          `${ingressNewState.externalIp}${INGRESS_DOMAIN_SUFFIX}`,
+        );
+      });
+    });
+
+    describe(`when ingress application new status is different from ${INSTALLED}`, () => {
+      it('hides custom domain help text', () => {
+        ingressNewState.status = NOT_INSTALLABLE;
+        cluster.ingressDomainHelpText.classList.remove('hide');
+
+        cluster.toggleIngressDomainHelpText(ingressPreviousState, ingressNewState);
+
+        expect(cluster.ingressDomainHelpText.classList.contains('hide')).toEqual(true);
+      });
+    });
+
+    describe('when ingress application new status and old status are the same', () => {
+      it('does not modify custom domain help text', () => {
+        ingressPreviousState.status = INSTALLED;
+        ingressNewState.status = ingressPreviousState.status;
+
+        cluster.toggleIngressDomainHelpText(ingressPreviousState, ingressNewState);
+
+        expect(cluster.ingressDomainHelpText.classList.contains('hide')).toEqual(true);
+      });
+    });
+  });
 });