Show loading spinner for Ingress/Knative IP

Show a loading spinner while Ingress/Knative IP is being assigned

app/assets/javascripts/clusters/components/applications.vue

 <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,14 +552,13 @@ 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">
                 {{

changelogs/unreleased/49863-ingress-ip-loading-state.yml

+---
+title: Show loading spinner while Ingress/Knative IP is being assigned
+merge_request: 25912
+author:
+type: changed

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

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