Merge branch 'run-new-pipeline-loading-state' into 'master'

Adds loading state to Run pipeline view

See merge request gitlab-org/gitlab!47213

app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue

@@ -14,6 +14,7 @@ import {
   GlDropdownItem,
   GlSearchBoxByType,
   GlSprintf,
+  GlLoadingIcon,
 } from '@gitlab/ui';
 import { s__, __, n__ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
@@ -45,6 +46,7 @@ export default {
     GlDropdownItem,
     GlSearchBoxByType,
     GlSprintf,
+    GlLoadingIcon,
   },
   props: {
     pipelinesPath: {
@@ -96,6 +98,7 @@ export default {
       warnings: [],
       totalWarnings: 0,
       isWarningDismissed: false,
+      isLoading: false,
     };
   },
   computed: {
@@ -209,6 +212,8 @@ export default {
 
     fetchConfigVariables(refValue) {
       if (gon?.features?.newPipelineFormPrefilledVars) {
+        this.isLoading = true;
+
         return axios
           .get(this.configVariablesPath, {
             params: {
@@ -226,6 +231,8 @@ export default {
               }
             });
 
+            this.isLoading = false;
+
             return { params, descriptions };
           });
       }
@@ -324,7 +331,9 @@ export default {
       >
     </gl-form-group>
 
-    <gl-form-group :label="s__('Pipeline|Variables')">
+    <gl-loading-icon v-if="isLoading" class="gl-mb-5" size="lg" />
+
+    <gl-form-group v-else :label="s__('Pipeline|Variables')">
       <div
         v-for="(variable, index) in variables"
         :key="variable.uniqueId"

spec/frontend/pipeline_new/components/pipeline_new_form_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlDropdownItem, GlForm, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlForm, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -35,6 +35,7 @@ describe('Pipeline New Form', () => {
   const findWarningAlert = () => wrapper.find('[data-testid="run-pipeline-warning-alert"]');
   const findWarningAlertSummary = () => findWarningAlert().find(GlSprintf);
   const findWarnings = () => wrapper.findAll('[data-testid="run-pipeline-warning"]');
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const getExpectedPostParams = () => JSON.parse(mock.history.post[0].data);
 
   const createComponent = (term = '', props = {}, method = shallowMount) => {
@@ -207,6 +208,25 @@ describe('Pipeline New Form', () => {
       window.gon = origGon;
     });
 
+    describe('loading state', () => {
+      it('loading icon is shown when content is requested and hidden when received', async () => {
+        createComponent('', mockParams, mount);
+
+        mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
+          [mockYmlKey]: {
+            value: mockYmlValue,
+            description: mockYmlDesc,
+          },
+        });
+
+        expect(findLoadingIcon().exists()).toBe(true);
+
+        await waitForPromises();
+
+        expect(findLoadingIcon().exists()).toBe(false);
+      });
+    });
+
     describe('when yml defines a variable with description', () => {
       beforeEach(async () => {
         createComponent('', mockParams, mount);