Reloads pipeline table when dropdown action is clicked and closes the dropdown in the MR widget

app/assets/javascripts/pipelines/components/graph/action_component.vue

@@ -5,7 +5,6 @@ import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
 import tooltip from '~/vue_shared/directives/tooltip';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 
 /**
@@ -21,7 +20,6 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   components: {
     Icon,
-    LoadingIcon,
   },
 
   directives: {
@@ -47,7 +45,7 @@ export default {
   },
   data() {
     return {
-      isLoading: false,
+      isDisabled: false,
     };
   },
 
@@ -67,15 +65,15 @@ export default {
     onClickAction() {
       $(this.$el).tooltip('hide');
 
-      this.isLoading = true;
+      this.isDisabled = true;
 
       axios.post(`${this.link}.json`)
         .then(() => {
-          this.isLoading = false;
+          this.isDisabled = false;
           this.$emit('pipelineActionRequestComplete');
         })
         .catch(() => {
-          this.isLoading = false;
+          this.isDisabled = false;
 
           createFlash(__('An error occurred while making the request.'));
         });
@@ -93,12 +91,8 @@ export default {
 btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     :class="cssClass"
     data-container="body"
-    :disabled="isLoading"
+    :disabled="isDisabled"
   >
-    <icon
-      v-if="!isLoading"
-      :name="actionIcon"
-    />
-    <loading-icon v-else />
+    <icon :name="actionIcon"/>
   </button>
 </template>

app/assets/javascripts/pipelines/components/stage.vue

@@ -143,10 +143,10 @@ export default {
     pipelineActionRequestComplete() {
       if (this.type === 'PIPELINES_TABLE') {
         // warn the table to update
-        eventHub.$emit('clickedDropdown');
+        eventHub.$emit('refreshPipelinesTable');
       } else {
-        // refresh the content
-        this.fetchJobs();
+        // close the dropdown in mr widget
+        $(this.$refs.dropdown).dropdown('toggle');
       }
     },
   },
@@ -167,6 +167,7 @@ export default {
       id="stageDropdown"
       aria-haspopup="true"
       aria-expanded="false"
+      ref="dropdown"
     >
 
       <span

app/assets/javascripts/pipelines/mixins/pipelines.js

@@ -55,11 +55,13 @@ export default {
     eventHub.$on('postAction', this.postAction);
     eventHub.$on('retryPipeline', this.postAction);
     eventHub.$on('clickedDropdown', this.updateTable);
+    eventHub.$on('refreshPipelinesTable', this.fetchPipelines);
   },
   beforeDestroy() {
     eventHub.$off('postAction', this.postAction);
     eventHub.$off('retryPipeline', this.postAction);
     eventHub.$off('clickedDropdown', this.updateTable);
+    eventHub.$off('refreshPipelinesTable', this.fetchPipelines);
   },
   destroyed() {
     this.poll.stop();

spec/javascripts/pipelines/graph/action_component_spec.js

@@ -48,23 +48,11 @@ describe('pipeline graph action component', () => {
     expect(component.$el.querySelector('svg')).toBeDefined();
   });
 
-  it('renders a loading icon while component is loading', done => {
-    component.isLoading = true;
-
-    component.$nextTick()
-      .then(() => {
-        expect(component.$el.querySelector('.fa-spin')).not.toBeNull();
-      })
-      .then(done)
-      .catch(done.fail);
-  });
-
   describe('on click', () => {
     it('emits `pipelineActionRequestComplete` after a successfull request', done => {
       spyOn(component, '$emit');
 
       component.$el.click();
-      expect(component.isLoading).toEqual(true);
 
       component.$nextTick()
         .then(() => {

spec/javascripts/pipelines/stage_spec.js

@@ -111,7 +111,7 @@ describe('Pipelines stage component', () => {
     });
 
     describe('within pipeline table', () => {
-      it('emits `clickedDropdown` event when `pipelineActionRequestComplete` is triggered', done => {
+      it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', done => {
         spyOn(eventHub, '$emit');
 
         component.type = 'PIPELINES_TABLE';
@@ -121,34 +121,12 @@ describe('Pipelines stage component', () => {
           component.$el.querySelector('.js-ci-action').click();
           component.$nextTick()
           .then(() => {
-            expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
-
-            expect(eventHub.$emit).toHaveBeenCalledTimes(2);
+            expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
           })
           .then(done)
           .catch(done.fail);
         }, 0);
       });
     });
-
-    describe('without a type', () => {
-      it('fetches dropdown content again', done => {
-        spyOn(component, 'fetchJobs').and.callThrough();
-
-        component.$el.querySelector('button').click();
-
-        expect(component.fetchJobs).toHaveBeenCalledTimes(1);
-
-        setTimeout(() => {
-          component.$el.querySelector('.js-ci-action').click();
-          component.$nextTick()
-            .then(() => {
-              expect(component.fetchJobs).toHaveBeenCalledTimes(2);
-            })
-            .then(done)
-            .catch(done.fail);
-        }, 0);
-      });
-    });
   });
 });