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

2 files changed, 21 insertions, 0 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';