Merge branch 'master' into bootstrap4

1 files changed, 60 insertions, 36 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index 0dcda8a2234..eaff0b25354 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -1,13 +1,14 @@
 <script>
-  /* eslint-disable no-param-reassign */
-  import asyncButtonComponent from './async_button.vue';
-  import pipelinesActionsComponent from './pipelines_actions.vue';
-  import pipelinesArtifactsComponent from './pipelines_artifacts.vue';
-  import ciBadge from '../../vue_shared/components/ci_badge_link.vue';
-  import pipelineStage from './stage.vue';
-  import pipelineUrl from './pipeline_url.vue';
-  import pipelinesTimeago from './time_ago.vue';
-  import commitComponent from '../../vue_shared/components/commit.vue';
+  import eventHub from '../event_hub';
+  import PipelinesActionsComponent from './pipelines_actions.vue';
+  import PipelinesArtifactsComponent from './pipelines_artifacts.vue';
+  import CiBadge from '../../vue_shared/components/ci_badge_link.vue';
+  import PipelineStage from './stage.vue';
+  import PipelineUrl from './pipeline_url.vue';
+  import PipelinesTimeago from './time_ago.vue';
+  import CommitComponent from '../../vue_shared/components/commit.vue';
+  import LoadingButton from '../../vue_shared/components/loading_button.vue';
+  import Icon from '../../vue_shared/components/icon.vue';
 
   /**
    * Pipeline table row.
@@ -16,14 +17,15 @@
    */
   export default {
     components: {
-      asyncButtonComponent,
-      pipelinesActionsComponent,
-      pipelinesArtifactsComponent,
-      commitComponent,
-      pipelineStage,
-      pipelineUrl,
-      ciBadge,
-      pipelinesTimeago,
+      PipelinesActionsComponent,
+      PipelinesArtifactsComponent,
+      CommitComponent,
+      PipelineStage,
+      PipelineUrl,
+      CiBadge,
+      PipelinesTimeago,
+      LoadingButton,
+      Icon,
     },
     props: {
       pipeline: {
@@ -44,6 +46,12 @@
         required: true,
       },
     },
+    data() {
+      return {
+        isRetrying: false,
+        isCancelling: false,
+      };
+    },
     computed: {
       /**
        * If provided, returns the commit tag.
@@ -119,8 +127,10 @@
         if (this.pipeline.ref) {
           return Object.keys(this.pipeline.ref).reduce((accumulator, prop) => {
             if (prop === 'path') {
+              // eslint-disable-next-line no-param-reassign
               accumulator.ref_url = this.pipeline.ref[prop];
             } else {
+              // eslint-disable-next-line no-param-reassign
               accumulator[prop] = this.pipeline.ref[prop];
             }
             return accumulator;
@@ -216,6 +226,21 @@
         return this.viewType === 'child';
       },
     },
+
+    methods: {
+      handleCancelClick() {
+        this.isCancelling = true;
+
+        eventHub.$emit('openConfirmationModal', {
+          pipelineId: this.pipeline.id,
+          endpoint: this.pipeline.cancel_path,
+        });
+      },
+      handleRetryClick() {
+        this.isRetrying = true;
+        eventHub.$emit('retryPipeline', this.pipeline.retry_path);
+      },
+    },
   };
 </script>
 <template>
@@ -287,7 +312,8 @@
 
     <div
       v-if="displayPipelineActions"
-      class="table-section section-20 table-button-footer pipeline-actions">
+      class="table-section section-20 table-button-footer pipeline-actions"
+    >
       <div class="btn-group table-action-buttons">
         <pipelines-actions-component
           v-if="pipeline.details.manual_actions.length"
@@ -300,29 +326,27 @@
           :artifacts="pipeline.details.artifacts"
         />
 
-        <async-button-component
+        <loading-button
           v-if="pipeline.flags.retryable"
-          :endpoint="pipeline.retry_path"
-          css-class="js-pipelines-retry-button btn-default btn-retry"
-          title="Retry"
-          icon="repeat"
-          :pipeline-id="pipeline.id"
-          data-toggle="modal"
-          data-target="#confirmation-modal"
-          type="retry"
-        />
+          @click="handleRetryClick"
+          container-class="js-pipelines-retry-button btn btn-default btn-retry"
+          :loading="isRetrying"
+          :disabled="isRetrying"
+        >
+          <icon name="repeat" />
+        </loading-button>
 
-        <async-button-component
+        <loading-button
           v-if="pipeline.flags.cancelable"
-          :endpoint="pipeline.cancel_path"
-          css-class="js-pipelines-cancel-button btn-remove"
-          title="Stop"
-          icon="close"
-          :pipeline-id="pipeline.id"
+          @click="handleCancelClick"
           data-toggle="modal"
           data-target="#confirmation-modal"
-          type="stop"
-        />
+          container-class="js-pipelines-cancel-button btn btn-remove"
+          :loading="isCancelling"
+          :disabled="isCancelling"
+        >
+          <icon name="close" />
+        </loading-button>
       </div>
     </div>
   </div>