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

3 files changed, 12 insertions, 15 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 11a8bcb0772..82b4ce083fb 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/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>
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 8e7430bf69e..61cf7c1b665 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/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
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index de0faf181e5..30b1eee186d 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/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();