Use value attribute in ip input

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

@@ -172,7 +172,7 @@
             <template v-if="ingressInstalled">
               <div class="form-group">
                 <label for="ingress-ip-address">
-                  {{ s__("ClusterIntegration| Ingress IP Address") }}
+                  {{ s__('ClusterIntegration| Ingress IP Address') }}
                 </label>
                 <div
                   v-if="ingressExternalIp"
@@ -182,7 +182,7 @@
                     type="text"
                     id="ingress-ip-address"
                     class="form-control js-ip-address"
-                    :placeholder="ingressExternalIp"
+                    :value="ingressExternalIp"
                     readonly
                   />
                   <span class="input-group-btn">
@@ -198,7 +198,7 @@
                   type="text"
                   class="form-control js-ip-address"
                   readonly
-                  placeholder="?"
+                  value="?"
                 />
               </div>
 

spec/features/projects/clusters/applications_spec.rb

@@ -99,13 +99,13 @@ feature 'Clusters Applications', :js do
               expect(page.find(:css, '.js-cluster-application-install-button')['disabled']).to eq('true')
               expect(page.find(:css, '.js-cluster-application-install-button')).to have_content('Installed')
               expect(page).to have_selector('.js-no-ip-message')
-              expect(page.find(:css, 'input.js-ip-address')['placeholder']).to eq('?')
+              expect(page.find('.js-ip-address').value).to eq('?')
 
               # We receive the external IP address and display
               Clusters::Cluster.last.application_ingress.update!(external_ip: '192.168.1.100')
 
               expect(page).not_to have_selector('.js-no-ip-message')
-              expect(page.find(:css, 'input.js-ip-address')['placeholder']).to eq('192.168.1.100')
+              expect(page.find('.js-ip-address').value).to eq('192.168.1.100')
             end
 
             expect(page).to have_content('Ingress was successfully installed on your Kubernetes cluster')

spec/javascripts/clusters/components/applications_spec.js

@@ -61,9 +61,11 @@ describe('Applications', () => {
               prometheus: { title: 'Prometheus' },
             },
           });
+
           expect(
-            vm.$el.querySelector('.js-ip-address').getAttribute('placeholder'),
+            vm.$el.querySelector('.js-ip-address').value,
           ).toEqual('0.0.0.0');
+
           expect(
             vm.$el.querySelector('.js-clipboard-btn').getAttribute('data-clipboard-text'),
           ).toEqual('0.0.0.0');
@@ -85,7 +87,7 @@ describe('Applications', () => {
           });
 
           expect(
-            vm.$el.querySelector('.js-ip-address').getAttribute('placeholder'),
+            vm.$el.querySelector('.js-ip-address').value,
           ).toEqual('?');
 
           expect(vm.$el.querySelector('.js-no-ip-message')).not.toBe(null);