Merge branch '57357-automate-base-domain-help-text' into 'master'

Automate base domain help text on Clusters page

Closes #57357

See merge request gitlab-org/gitlab-ce!26124

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

@@ -33,9 +33,9 @@
       - auto_devops_url = help_page_path('topics/autodevops/index')
       - auto_devops_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: auto_devops_url }
       = 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 }
-      - if @cluster.application_ingress_external_ip.present?
+      %span{ :class => ["js-ingress-domain-help-text", ("hide" unless @cluster.application_ingress_external_ip.present?)] }
         = s_('ClusterIntegration|Alternatively')
-        %code #{@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 }

changelogs/unreleased/57357-automate-base-domain-help-text.yml

+---
+title: Automate base domain help text on Clusters page
+merge_request: 26124
+author:
+type: changed

spec/features/clusters/cluster_detail_page_spec.rb

@@ -4,6 +4,8 @@ require 'spec_helper'
 
 describe 'Clusterable > Show page' do
   let(:current_user) { create(:user) }
+  let(:cluster_ingress_help_text_selector) { '.js-ingress-domain-help-text' }
+  let(:hide_modifier_selector) { '.hide' }
 
   before do
     sign_in(current_user)
@@ -35,7 +37,7 @@ describe 'Clusterable > Show page' do
 
       it 'shows help text with the domain as an alternative to custom domain' do
         within '#cluster-integration' do
-          expect(page).to have_content('Alternatively 192.168.1.100.nip.io can be used instead of a custom domain')
+          expect(find(cluster_ingress_help_text_selector)).not_to match_css(hide_modifier_selector)
         end
       end
     end
@@ -45,7 +47,7 @@ describe 'Clusterable > Show page' do
         visit cluster_path
 
         within '#cluster-integration' do
-          expect(page).not_to have_content('can be used instead of a custom domain.')
+          expect(find(cluster_ingress_help_text_selector)).to match_css(hide_modifier_selector)
         end
       end
     end

spec/javascripts/clusters/clusters_bundle_spec.js

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