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

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);

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';

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 }

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);
+      });
+    });
+  });
 });