Merge branch '49863-ingress-ip-loading-state' into 'master'

Show loading spinner while Ingress/Knative IP is being assigned

Closes #56945 and #49863

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

4 files changed, 24 insertions, 15 deletions

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 13e8617c515..5b206b82fe0 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -1,6 +1,7 @@
 <script>
 import _ from 'underscore';
 import helmInstallIllustration from '@gitlab/svgs/dist/illustrations/kubernetes-installation.svg';
+import { GlLoadingIcon } from '@gitlab/ui';
 import elasticsearchLogo from 'images/cluster_app_logos/elasticsearch.png';
 import gitlabLogo from 'images/cluster_app_logos/gitlab.png';
 import helmLogo from 'images/cluster_app_logos/helm.png';
@@ -23,6 +24,7 @@ export default {
     applicationRow,
     clipboardButton,
     LoadingButton,
+    GlLoadingIcon,
   },
   props: {
     type: {
@@ -296,7 +298,12 @@ export default {
                   />
                 </span>
               </div>
-              <input v-else type="text" class="form-control js-endpoint" readonly value="?" />
+              <div v-else class="input-group">
+                <input type="text" class="form-control js-endpoint" readonly />
+                <gl-loading-icon
+                  class="position-absolute align-self-center ml-2 js-ingress-ip-loading-icon"
+                />
+              </div>
               <p class="form-text text-muted">
                 {{
                   s__(`ClusterIntegration|Point a wildcard DNS to this
@@ -545,13 +552,12 @@ export default {
                     />
                   </span>
                 </div>
-                <input
-                  v-else
-                  type="text"
-                  class="form-control js-knative-endpoint"
-                  readonly
-                  value="?"
-                />
+                <div v-else class="input-group">
+                  <input type="text" class="form-control js-endpoint" readonly />
+                  <gl-loading-icon
+                    class="position-absolute align-self-center ml-2 js-knative-ip-loading-icon"
+                  />
+                </div>
               </div>
 
               <p class="form-text text-muted col-12">
diff --git a/changelogs/unreleased/49863-ingress-ip-loading-state.yml b/changelogs/unreleased/49863-ingress-ip-loading-state.yml
new file mode 100644
index 00000000000..51bb27d3153
--- /dev/null
+++ b/changelogs/unreleased/49863-ingress-ip-loading-state.yml
@@ -0,0 +1,5 @@
+---
+title: Show loading spinner while Ingress/Knative IP is being assigned
+merge_request: 25912
+author:
+type: changed
diff --git a/spec/features/projects/clusters/applications_spec.rb b/spec/features/projects/clusters/applications_spec.rb
index 4981bf794d9..aa1c3902f0f 100644
--- a/spec/features/projects/clusters/applications_spec.rb
+++ b/spec/features/projects/clusters/applications_spec.rb
@@ -227,7 +227,7 @@ describe 'Clusters Applications', :js do
               expect(page).to have_css('.js-cluster-application-install-button', exact_text: 'Installed')
               expect(page).to have_css('.js-cluster-application-install-button[disabled]')
               expect(page).to have_selector('.js-no-endpoint-message')
-              expect(page.find('.js-endpoint').value).to eq('?')
+              expect(page).to have_selector('.js-ingress-ip-loading-icon')
 
               # We receive the external IP address and display
               Clusters::Cluster.last.application_ingress.update!(external_ip: '192.168.1.100')
diff --git a/spec/javascripts/clusters/components/applications_spec.js b/spec/javascripts/clusters/components/applications_spec.js
index e2466bf326c..790e4b9602c 100644
--- a/spec/javascripts/clusters/components/applications_spec.js
+++ b/spec/javascripts/clusters/components/applications_spec.js
@@ -141,7 +141,7 @@ describe('Applications', () => {
       });
 
       describe('without ip address', () => {
-        it('renders an input text with a question mark and an alert text', () => {
+        it('renders an input text with a loading icon and an alert text', () => {
           vm = mountComponent(Applications, {
             applications: {
               ...APPLICATIONS_MOCK_STATE,
@@ -152,8 +152,7 @@ describe('Applications', () => {
             },
           });
 
-          expect(vm.$el.querySelector('.js-endpoint').value).toEqual('?');
-
+          expect(vm.$el.querySelector('.js-ingress-ip-loading-icon')).not.toBe(null);
           expect(vm.$el.querySelector('.js-no-endpoint-message')).not.toBe(null);
         });
       });
@@ -330,7 +329,7 @@ describe('Applications', () => {
       });
 
       describe('without ip address', () => {
-        it('renders an input text with a question mark and an alert text', () => {
+        it('renders an input text with a loading icon and an alert text', () => {
           vm = mountComponent(Applications, {
             applications: {
               ...APPLICATIONS_MOCK_STATE,
@@ -342,8 +341,7 @@ describe('Applications', () => {
             },
           });
 
-          expect(vm.$el.querySelector('.js-knative-endpoint').value).toEqual('?');
-
+          expect(vm.$el.querySelector('.js-knative-ip-loading-icon')).not.toBe(null);
           expect(vm.$el.querySelector('.js-no-knative-endpoint-message')).not.toBe(null);
         });
       });