Changes after review

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

@@ -5,6 +5,7 @@
   import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
   import {
     APPLICATION_INSTALLED,
+    INGRESS,
   } from '../constants';
 
   export default {
@@ -53,6 +54,9 @@
           false,
         );
       },
+      ingressId() {
+        return INGRESS;
+      },
       ingressInstalled() {
         return this.applications.ingress.status === APPLICATION_INSTALLED;
       },
@@ -150,7 +154,7 @@
           </div>
         </application-row>
         <application-row
-          id="ingress"
+          :id="ingressId"
           :title="applications.ingress.title"
           title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
           :status="applications.ingress.status"
@@ -167,7 +171,7 @@
 
             <template v-if="ingressInstalled">
               <div class="form-group">
-                <label for="ipAddress">
+                <label for="ingress-ip-address">
                   {{ s__("ClusterIntegration| Ingress IP Address") }}
                 </label>
                 <div
@@ -176,7 +180,7 @@
                 >
                   <input
                     type="text"
-                    id="ipAddress"
+                    id="ingress-ip-address"
                     class="form-control js-ip-address"
                     :placeholder="ingressExternalIp"
                     readonly
@@ -210,7 +214,7 @@
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  {{ __("More information") }}
+                  {{ __('More information') }}
                 </a>
               </p>
 
@@ -223,16 +227,16 @@
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  {{ __("More information") }}
+                  {{ __('More information') }}
                 </a>
               </p>
 
             </template>
-            <template
+            <div
               v-else
               v-html="ingressDescription"
             >
-            </template>
+            </div>
           </div>
         </application-row>
         <application-row

app/assets/javascripts/clusters/constants.js

@@ -10,3 +10,4 @@ export const APPLICATION_ERROR = 'errored';
 export const REQUEST_LOADING = 'request-loading';
 export const REQUEST_SUCCESS = 'request-success';
 export const REQUEST_FAILURE = 'request-failure';
+export const INGRESS = 'ingress';

app/assets/javascripts/clusters/stores/clusters_store.js

@@ -1,4 +1,5 @@
 import { s__ } from '../../locale';
+import { INGRESS } from '../constants';
 
 export default class ClusterStore {
   constructor() {
@@ -80,7 +81,7 @@ export default class ClusterStore {
         statusReason,
       };
 
-      if (appId === 'ingress') {
+      if (appId === INGRESS) {
         this.state.applications.ingress.externalIp = serverAppEntry.external_ip;
       }
     });

spec/javascripts/clusters/components/applications_spec.js

@@ -88,11 +88,7 @@ describe('Applications', () => {
             vm.$el.querySelector('.js-ip-address').getAttribute('placeholder'),
           ).toEqual('?');
 
-          expect(
-            vm.$el.querySelector('.js-no-ip-message').textContent.replace(/\n(\s)+/g, ' ').trim(),
-          ).toEqual(
-            'The IP address is still in the process of being assigned, please check your Kubernetes cluster or Quotas on GKE if it takes a long time. More information',
-          );
+          expect(vm.$el.querySelector('.js-no-ip-message')).not.toBe(null);
         });
       });
     });