Implement apollo mutations

Setup the mutations in the
header component.

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

 <script>
 import { GlAlert, GlButton, GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
-import axios from '~/lib/utils/axios_utils';
 import ciHeader from '~/vue_shared/components/header_ci_component.vue';
 import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility';
 import getPipelineQuery from '../graphql/queries/get_pipeline_header_data.query.graphql';
@@ -32,7 +31,7 @@ export default {
     [DEFAULT]: __('An unknown error occurred.'),
   },
   inject: {
-    // Receive `cancel`, `delete`, `fullProject` and `retry`
+    // Receive `fullProject` and `pipelinesPath`
     paths: {
       default: {},
     },
@@ -126,37 +125,47 @@ export default {
     reportFailure(errorType) {
       this.failureType = errorType;
     },
-    async postAction(path) {
+    async cancelPipeline() {
+      this.isCanceling = true;
+
       try {
-        await axios.post(path);
+        await this.$apollo.mutate({
+          mutation: cancelPipelineMutation,
+          variables: { id: this.pipeline.id },
+        });
+
         this.$apollo.queries.pipeline.refetch();
       } catch {
         this.reportFailure(POST_FAILURE);
       }
     },
-    async cancelPipeline() {
-      this.isCanceling = true;
-      this.postAction(this.paths.cancel);
-    },
     async retryPipeline() {
       this.isRetrying = true;
-      this.postAction(this.paths.retry);
+
+      try {
+        await this.$apollo.mutate({
+          mutation: retryPipelineMutation,
+          variables: { id: this.pipeline.id },
+        });
+
+        this.$apollo.queries.pipeline.refetch();
+      } catch {
+        this.reportFailure(POST_FAILURE);
+      }
     },
     async deletePipeline() {
       this.isDeleting = true;
       this.$apollo.queries.pipeline.stopPolling();
 
       try {
-        const { request } = await axios.delete(this.paths.delete);
-
-        // const data = await this.$apollo.mutate({
-        //   mutation: deletePipelineMutation,
-        //   variables: {
-        //     id: this.pipelineId,
-        //   },
-        // });
+        await this.$apollo.mutate({
+          mutation: deletePipelineMutation,
+          variables: {
+            id: this.pipeline.id,
+          },
+        });
 
-        redirectTo(setUrlFragment(request.responseURL, 'delete_success'));
+        redirectTo(setUrlFragment(this.paths.pipelinesPath, 'delete_success'));
       } catch {
         this.$apollo.queries.pipeline.startPolling(POLL_INTERVAL);
         this.reportFailure(DELETE_FAILURE);

app/assets/javascripts/pipelines/graphql/mutations/cancel_pipeline.mutation.graphql

@@ -2,4 +2,4 @@ mutation cancelPipeline($id: CiPipelineID!) {
   pipelineCancel(input: { id: $id }) {
     errors
   }
-}
\ No newline at end of file
+}

app/assets/javascripts/pipelines/graphql/mutations/delete_pipeline.mutation.graphql

@@ -2,4 +2,4 @@ mutation deletePipeline($id: CiPipelineID!) {
   pipelineDestroy(input: { id: $id }) {
     errors
   }
-}
\ No newline at end of file
+}

app/assets/javascripts/pipelines/graphql/mutations/retry_pipeline.mutation.graphql

@@ -2,4 +2,4 @@ mutation retryPipeline($id: CiPipelineID!) {
   pipelineRetry(input: { id: $id }) {
     errors
   }
-}
\ No newline at end of file
+}

app/assets/javascripts/pipelines/pipeline_details_header.js

@@ -16,7 +16,7 @@ export const createPipelineHeaderApp = elSelector => {
     return;
   }
 
-  const { cancelPath, deletePath, fullPath, pipelineId, pipelineIid, retryPath } = el?.dataset;
+  const { fullPath, pipelineId, pipelineIid, pipelinesPath } = el?.dataset;
   // eslint-disable-next-line no-new
   new Vue({
     el,
@@ -26,10 +26,8 @@ export const createPipelineHeaderApp = elSelector => {
     apolloProvider,
     provide: {
       paths: {
-        cancel: cancelPath,
-        delete: deletePath,
         fullProject: fullPath,
-        retry: retryPath,
+        pipelinesPath,
       },
       pipelineId,
       pipelineIid,

app/views/projects/pipelines/show.html.haml

@@ -7,7 +7,7 @@
 - add_page_specific_style 'page_bundles/ci_status'
 
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
-  #js-pipeline-header-vue.pipeline-header-container{ data: {full_path: @project.full_path, retry_path: retry_project_pipeline_path(@pipeline.project, @pipeline), cancel_path: cancel_project_pipeline_path(@pipeline.project, @pipeline), delete_path: project_pipeline_path(@pipeline.project, @pipeline), pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id} }
+  #js-pipeline-header-vue.pipeline-header-container{ data: { full_path: @project.full_path, pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id, pipelines_path: project_pipelines_path(@project) } }
   - if @pipeline.commit.present?
     = render "projects/pipelines/info", commit: @pipeline.commit