diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index 388f674f643384bb143249e5d825ae83e2d50244..c95d7608e37be1881136cfe428a73032d00a1e22 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 39022879d91c31847b35a00d4dcf34acd21c6606..67f481f2afbcbbdec1043ba5b15c65140c15bd19 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 c08b41e2f236df11791f00d6b425dbd883210bae..455322b208932175d8673c02c12e9d9e9b72223a 100644 --- a/app/views/clusters/clusters/_form.html.haml +++ b/app/views/clusters/clusters/_form.html.haml @@ -33,9 +33,9 @@ - auto_devops_url = help_page_path('topics/autodevops/index') - auto_devops_start = ''.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: ''.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 = ''.html_safe % { url: custom_domain_url } diff --git a/changelogs/unreleased/57357-automate-base-domain-help-text.yml b/changelogs/unreleased/57357-automate-base-domain-help-text.yml new file mode 100644 index 0000000000000000000000000000000000000000..fa1831b66ea0e24c18e794e2df3e1f387d71fe7c --- /dev/null +++ b/changelogs/unreleased/57357-automate-base-domain-help-text.yml @@ -0,0 +1,5 @@ +--- +title: Automate base domain help text on Clusters page +merge_request: 26124 +author: +type: changed diff --git a/spec/features/clusters/cluster_detail_page_spec.rb b/spec/features/clusters/cluster_detail_page_spec.rb index 0a9c4bcaf125c9245ce29089adbeff598aa36b39..b9fc52d0dceffe56c93f22b54bf9c839278a1a0f 100644 --- a/spec/features/clusters/cluster_detail_page_spec.rb +++ b/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 diff --git a/spec/javascripts/clusters/clusters_bundle_spec.js b/spec/javascripts/clusters/clusters_bundle_spec.js index e094e6a462d4b526236f2b7a5567a3d9c4573a9f..0d3dcc29f22f61f0086aa2f79ade8036e7daace8 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); + }); + }); + }); });