Enables Run Pipeline button to be rendered

In the Merge Request view, under pipelines tab
the user can see a run pipeline button

Adds axios post request to button click

Adds the logic to handle the user click,
refresh the table and disable the button while thee
request is being made

Updates UI for desktop and mobile

Adds specs
Regenerates potfile

Follow-up after review

Uses .finally to avoid code repetition

1 files changed, 91 insertions, 6 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 4890f99e9d1..e5b030d4900 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -1,14 +1,19 @@
 <script>
-import PipelinesService from '../../pipelines/services/pipelines_service';
-import PipelineStore from '../../pipelines/stores/pipelines_store';
-import pipelinesMixin from '../../pipelines/mixins/pipelines';
-import TablePagination from '../../vue_shared/components/pagination/table_pagination.vue';
-import { getParameterByName } from '../../lib/utils/common_utils';
-import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import PipelinesService from '~/pipelines/services/pipelines_service';
+import PipelineStore from '~/pipelines/stores/pipelines_store';
+import pipelinesMixin from '~/pipelines/mixins/pipelines';
+import eventHub from '~/pipelines/event_hub';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import { getParameterByName } from '~/lib/utils/common_utils';
+import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
+import bp from '~/breakpoints';
 
 export default {
   components: {
     TablePagination,
+    GlButton,
+    GlLoadingIcon,
   },
   mixins: [pipelinesMixin, CIPaginationMixin],
   props: {
@@ -33,6 +38,21 @@ export default {
       required: false,
       default: 'child',
     },
+    canRunPipeline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    projectId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    mergeRequestId: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
 
   data() {
@@ -53,6 +73,41 @@ export default {
     shouldRenderErrorState() {
       return this.hasError && !this.isLoading;
     },
+    /**
+     * The Run Pipeline button can only be rendered when:
+     * - In MR view -  we use `canRunPipeline` for that purpose
+     * - If the latest pipeline has the `detached_merge_request_pipeline` flag
+     *
+     * @returns {Boolean}
+     */
+    canRenderPipelineButton() {
+      return this.canRunPipeline && this.latestPipelineDetachedFlag;
+    },
+    /**
+     * Checks if either `detached_merge_request_pipeline` or
+     * `merge_request_pipeline` are tru in the first
+     * object in the pipelines array.
+     *
+     * @returns {Boolean}
+     */
+    latestPipelineDetachedFlag() {
+      const latest = this.state.pipelines[0];
+      return (
+        latest &&
+        latest.flags &&
+        (latest.flags.detached_merge_request_pipeline || latest.flags.merge_request_pipeline)
+      );
+    },
+    /**
+     * When we are on Desktop and the button is visible
+     * we need to add a negative margin to the table
+     * to make it inline with the button
+     *
+     * @returns {Boolean}
+     */
+    shouldAddNegativeMargin() {
+      return this.canRenderPipelineButton && bp.isDesktop();
+    },
   },
   created() {
     this.service = new PipelinesService(this.endpoint);
@@ -77,6 +132,22 @@ export default {
         this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
       }
     },
+    /**
+     * When the user clicks on the Run Pipeline button
+     * we need to make a post request and
+     * to update the table content once the request is finished.
+     *
+     * We are emitting an event through the eventHub using the old pattern
+     * to make use of the code in mixins/pipelines.js that handles all the
+     * table events
+     *
+     */
+    onClickRunPipeline() {
+      eventHub.$emit('runMergeRequestPipeline', {
+        projectId: this.projectId,
+        mergeRequestId: this.mergeRequestId,
+      });
+    },
   },
 };
 </script>
@@ -99,11 +170,25 @@ export default {
     />
 
     <div v-else-if="shouldRenderTable" class="table-holder">
+      <div v-if="canRenderPipelineButton" class="nav justify-content-end">
+        <gl-button
+          v-if="canRenderPipelineButton"
+          variant="success"
+          class="js-run-mr-pipeline prepend-top-10 btn-wide-on-xs"
+          :disabled="state.isRunningMergeRequestPipeline"
+          @click="onClickRunPipeline"
+        >
+          <gl-loading-icon v-if="state.isRunningMergeRequestPipeline" inline />
+          {{ s__('Pipelines|Run Pipeline') }}
+        </gl-button>
+      </div>
+
       <pipelines-table-component
         :pipelines="state.pipelines"
         :update-graph-dropdown="updateGraphDropdown"
         :auto-devops-help-path="autoDevopsHelpPath"
         :view-type="viewType"
+        :class="{ 'negative-margin-top': shouldAddNegativeMargin }"
       />
     </div>