Add latest changes from gitlab-org/gitlab@master

4 files changed, 69 insertions, 6 deletions

diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index 39afa87afc3..726bba7f9f4 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -1,14 +1,17 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlModal } from '@gitlab/ui';
 import ciHeader from '../../vue_shared/components/header_ci_component.vue';
 import eventHub from '../event_hub';
 import { __ } from '~/locale';
 
+const DELETE_MODAL_ID = 'pipeline-delete-modal';
+
 export default {
   name: 'PipelineHeaderSection',
   components: {
     ciHeader,
     GlLoadingIcon,
+    GlModal,
   },
   props: {
     pipeline: {
@@ -33,6 +36,11 @@ export default {
     shouldRenderContent() {
       return !this.isLoading && Object.keys(this.pipeline).length;
     },
+    deleteModalConfirmationText() {
+      return __(
+        'Are you sure you want to delete this pipeline? Doing so will expire all pipeline caches and delete all related objects, such as builds, logs, artifacts, and triggers. This action cannot be undone.',
+      );
+    },
   },
 
   watch: {
@@ -42,6 +50,13 @@ export default {
   },
 
   methods: {
+    onActionClicked(action) {
+      if (action.modal) {
+        this.$root.$emit('bv::show::modal', action.modal);
+      } else {
+        this.postAction(action);
+      }
+    },
     postAction(action) {
       const index = this.actions.indexOf(action);
 
@@ -49,6 +64,13 @@ export default {
 
       eventHub.$emit('headerPostAction', action);
     },
+    deletePipeline() {
+      const index = this.actions.findIndex(action => action.modal === DELETE_MODAL_ID);
+
+      this.$set(this.actions[index], 'isLoading', true);
+
+      eventHub.$emit('headerDeleteAction', this.actions[index]);
+    },
 
     getActions() {
       const actions = [];
@@ -58,7 +80,6 @@ export default {
           label: __('Retry'),
           path: this.pipeline.retry_path,
           cssClass: 'js-retry-button btn btn-inverted-secondary',
-          type: 'button',
           isLoading: false,
         });
       }
@@ -68,7 +89,16 @@ export default {
           label: __('Cancel running'),
           path: this.pipeline.cancel_path,
           cssClass: 'js-btn-cancel-pipeline btn btn-danger',
-          type: 'button',
+          isLoading: false,
+        });
+      }
+
+      if (this.pipeline.delete_path) {
+        actions.push({
+          label: __('Delete'),
+          path: this.pipeline.delete_path,
+          modal: DELETE_MODAL_ID,
+          cssClass: 'js-btn-delete-pipeline btn btn-danger btn-inverted',
           isLoading: false,
         });
       }
@@ -76,6 +106,7 @@ export default {
       return actions;
     },
   },
+  DELETE_MODAL_ID,
 };
 </script>
 <template>
@@ -88,8 +119,21 @@ export default {
       :user="pipeline.user"
       :actions="actions"
       item-name="Pipeline"
-      @actionClicked="postAction"
+      @actionClicked="onActionClicked"
     />
+
     <gl-loading-icon v-if="isLoading" :size="2" class="prepend-top-default append-bottom-default" />
+
+    <gl-modal
+      :modal-id="$options.DELETE_MODAL_ID"
+      :title="__('Delete pipeline')"
+      :ok-title="__('Delete pipeline')"
+      ok-variant="danger"
+      @ok="deletePipeline()"
+    >
+      <p>
+        {{ deleteModalConfirmationText }}
+      </p>
+    </gl-modal>
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index d8dbc3c2454..c874c4c6fdd 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Flash from '~/flash';
 import Translate from '~/vue_shared/translate';
 import { __ } from '~/locale';
+import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility';
 import pipelineGraph from './components/graph/graph_component.vue';
 import GraphBundleMixin from './mixins/graph_pipeline_bundle_mixin';
 import PipelinesMediator from './pipeline_details_mediator';
@@ -62,9 +63,11 @@ export default () => {
     },
     created() {
       eventHub.$on('headerPostAction', this.postAction);
+      eventHub.$on('headerDeleteAction', this.deleteAction);
     },
     beforeDestroy() {
       eventHub.$off('headerPostAction', this.postAction);
+      eventHub.$off('headerDeleteAction', this.deleteAction);
     },
     methods: {
       postAction(action) {
@@ -73,6 +76,13 @@ export default () => {
           .then(() => this.mediator.refreshPipeline())
           .catch(() => Flash(__('An error occurred while making the request.')));
       },
+      deleteAction(action) {
+        this.mediator.stopPipelinePoll();
+        this.mediator.service
+          .deleteAction(action.path)
+          .then(({ request }) => redirectTo(setUrlFragment(request.responseURL, 'delete_success')))
+          .catch(() => Flash(__('An error occurred while deleting the pipeline.')));
+      },
     },
     render(createElement) {
       return createElement('pipeline-header', {
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediator.js b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
index bf021a0b447..f3387f00fc1 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_mediator.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
@@ -35,7 +35,7 @@ export default class pipelinesMediator {
       if (!Visibility.hidden()) {
         this.poll.restart();
       } else {
-        this.poll.stop();
+        this.stopPipelinePoll();
       }
     });
   }
@@ -51,7 +51,7 @@ export default class pipelinesMediator {
   }
 
   refreshPipeline() {
-    this.poll.stop();
+    this.stopPipelinePoll();
 
     return this.service
       .getPipeline()
@@ -64,6 +64,10 @@ export default class pipelinesMediator {
       );
   }
 
+  stopPipelinePoll() {
+    this.poll.stop();
+  }
+
   /**
    * Backend expects paramets in the following format: `expanded[]=id&expanded[]=id`
    */
diff --git a/app/assets/javascripts/pipelines/services/pipeline_service.js b/app/assets/javascripts/pipelines/services/pipeline_service.js
index e44eb9cdfd1..ba2830ec596 100644
--- a/app/assets/javascripts/pipelines/services/pipeline_service.js
+++ b/app/assets/javascripts/pipelines/services/pipeline_service.js
@@ -10,6 +10,11 @@ export default class PipelineService {
   }
 
   // eslint-disable-next-line class-methods-use-this
+  deleteAction(endpoint) {
+    return axios.delete(`${endpoint}.json`);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
     return axios.post(`${endpoint}.json`);
   }