Ensures disabled status while request is being made

6 files changed, 30 insertions, 34 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 558bf812fef..847789b834c 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -31,29 +31,40 @@ export default {
       type: String,
       required: true,
     },
-
-    buttonDisabled: {
-      type: String,
-      required: false,
-      default: null,
-    },
   },
+  data() {
+    return {
+      isDisabled: false,
+      linkRequested: '',
+    };
+  },
+
   computed: {
     cssClass() {
       const actionIconDash = dasherize(this.actionIcon);
       return `${actionIconDash} js-icon-${actionIconDash}`;
     },
-    isDisabled() {
-      return this.buttonDisabled === this.link;
-    },
   },
 
   methods: {
     onClickAction() {
       $(this.$el).tooltip('hide');
       eventHub.$emit('graphAction', this.link);
+      this.linkRequested = this.link;
+      this.isDisabled = true;
     },
+    updateDisabled(actionUrl) {
+      if (actionUrl === this.linkRequested) {
+        this.isDisabled = false;
+      }
+    }
   },
+  created() {
+      eventHub.$on('graphActionFinished', this.updateDisabled);
+    },
+    beforeDestroy() {
+      eventHub.$off('graphActionFinished', this.updateDisabled);
+    },
 };
 </script>
 <template>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index ac9ce7e47d6..260b9c949d7 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -17,11 +17,6 @@ export default {
       type: Object,
       required: true,
     },
-    actionDisabled: {
-      type: String,
-      required: false,
-      default: null,
-    },
   },
 
   computed: {
@@ -75,7 +70,6 @@ export default {
           :key="stage.name"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
-          :action-disabled="actionDisabled"
         />
       </ul>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 3c0f35cdb6c..11a294ec9da 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -54,12 +54,6 @@ export default {
       required: false,
       default: false,
     },
-
-    actionDisabled: {
-      type: String,
-      required: false,
-      default: null,
-    },
   },
 
   computed: {
@@ -136,7 +130,6 @@ export default {
       :tooltip-text="status.action.title"
       :link="status.action.path"
       :action-icon="status.action.icon"
-      :button-disabled="actionDisabled"
     />
 
   </div>
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index f6e6569e15b..c22ec75e5ec 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -29,11 +29,6 @@ export default {
       required: false,
       default: '',
     },
-    actionDisabled: {
-      type: String,
-      required: false,
-      default: null,
-    },
   },
 
   methods: {
@@ -74,7 +69,6 @@ export default {
             v-if="job.size === 1"
             :job="job"
             css-class-job-name="build-content"
-            :action-disabled="actionDisabled"
           />
 
           <dropdown-job-component
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 900eb7855f4..a61bfbe25f3 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -25,7 +25,6 @@ export default () => {
     data() {
       return {
         mediator,
-        actionDisabled: null,
       };
     },
     created() {
@@ -36,16 +35,14 @@ export default () => {
     },
     methods: {
       postAction(action) {
-        this.actionDisabled = action;
-
         this.mediator.service.postAction(action)
           .then(() => {
             this.mediator.refreshPipeline();
-            this.actionDisabled = null;
+            eventHub.$emit('graphActionFinished', action);
           })
           .catch(() => {
-            this.actionDisabled = null;
             Flash(__('An error occurred while making the request.'));
+            eventHub.$emit('graphActionFinished', action);
           });
       },
     },
@@ -54,7 +51,6 @@ export default () => {
         props: {
           isLoading: this.mediator.state.isLoading,
           pipeline: this.mediator.store.state.pipeline,
-          actionDisabled: this.actionDisabled,
         },
       });
     },
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 855ebf7d86d..3a8ec779c14 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -468,6 +468,14 @@
     margin-bottom: 10px;
     white-space: normal;
 
+    .ci-job-dropdown-container {
+      // override dropdown.scss
+      .dropdown-menu li button {
+        padding: 0;
+        text-align: center;
+      }
+    }
+
     // ensure .build-content has hover style when action-icon is hovered
     .ci-job-dropdown-container:hover .build-content {
       @extend .build-content:hover;