From ee5cceaaf82e8b206bdddcf59eef1739ec5769bb Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Tue, 12 Feb 2019 14:55:28 -0700
Subject: Add information to "Stop pipeline" confirm modal

Make it its own component
Show pipeline status and link to pipeline
Show commit short hash, link, and message
---
 .../pipelines/components/pipeline_stop_modal.vue   | 96 ++++++++++++++++++++++
 .../pipelines/components/pipelines_table.vue       | 40 ++-------
 .../pipelines/components/pipelines_table_row.vue   |  2 +-
 .../46464-improve-stop-pipeline-modal.yml          |  5 ++
 4 files changed, 108 insertions(+), 35 deletions(-)
 create mode 100644 app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
 create mode 100644 changelogs/unreleased/46464-improve-stop-pipeline-modal.yml

diff --git a/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
new file mode 100644
index 00000000000..d4fa556f095
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
@@ -0,0 +1,96 @@
+<script>
+import _ from 'underscore';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { GlLink } from '@gitlab/ui';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import { s__, sprintf } from '~/locale';
+
+/**
+ * Pipeline Stop Modal.
+ *
+ * Renders the modal used to confirm stopping a pipeline.
+ */
+export default {
+  components: {
+    GlModal,
+    GlLink,
+    ClipboardButton,
+    CiIcon,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+      deep: true,
+    },
+    onSubmit: {
+      type: Function,
+      required: true,
+    },
+  },
+  computed: {
+    modalTitle() {
+      return sprintf(
+        s__('Pipeline|Stop pipeline #%{pipelineId}?'),
+        {
+          pipelineId: `${this.pipeline.id}`,
+        },
+        false,
+      );
+    },
+    modalText() {
+      return sprintf(
+        s__(`Pipeline|You’re about to stop pipeline %{pipelineId}.`),
+        {
+          pipelineId: `<strong>#${this.pipeline.id}</strong>`,
+        },
+        false,
+      );
+    },
+    hasRef() {
+      return !_.isEmpty(this.pipeline.ref);
+    },
+  },
+};
+</script>
+<template>
+  <gl-modal
+    id="confirmation-modal"
+    :header-title-text="modalTitle"
+    :footer-primary-button-text="s__('Pipeline|Stop pipeline')"
+    footer-primary-button-variant="danger"
+    @submit="onSubmit"
+  >
+    <p v-html="modalText"></p>
+
+    <p v-if="pipeline">
+      <ci-icon
+        v-if="pipeline.details"
+        :status="pipeline.details.status"
+        class="vertical-align-middle"
+      />
+
+      <span class="font-weight-bold">{{ __('Pipeline') }}</span>
+
+      <a :href="pipeline.path" class="js-pipeline-path link-commit qa-pipeline-path"
+        >#{{ pipeline.id }}</a
+      >
+      <template v-if="hasRef">
+        {{ __('from') }}
+        <a :href="pipeline.ref.path" class="link-commit ref-name">{{ pipeline.ref.name }}</a>
+      </template>
+    </p>
+
+    <template v-if="pipeline.commit">
+      <p>
+        <span class="font-weight-bold">{{ __('Commit') }}</span>
+
+        <gl-link :href="pipeline.commit.commit_path" class="js-commit-sha commit-sha link-commit">
+          {{ pipeline.commit.short_id }}
+        </gl-link>
+      </p>
+      <p>{{ pipeline.commit.title }}</p>
+    </template>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 1c60ae6a152..9d837ddf646 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -1,7 +1,6 @@
 <script>
-import Modal from '~/vue_shared/components/gl_modal.vue';
-import { s__, sprintf } from '~/locale';
 import PipelinesTableRowComponent from './pipelines_table_row.vue';
+import PipelineStopModal from './pipeline_stop_modal.vue';
 import eventHub from '../event_hub';
 
 /**
@@ -12,7 +11,7 @@ import eventHub from '../event_hub';
 export default {
   components: {
     PipelinesTableRowComponent,
-    Modal,
+    PipelineStopModal,
   },
   props: {
     pipelines: {
@@ -36,30 +35,11 @@ export default {
   data() {
     return {
       pipelineId: 0,
+      pipeline: {},
       endpoint: '',
       cancelingPipeline: null,
     };
   },
-  computed: {
-    modalTitle() {
-      return sprintf(
-        s__('Pipeline|Stop pipeline #%{pipelineId}?'),
-        {
-          pipelineId: `${this.pipelineId}`,
-        },
-        false,
-      );
-    },
-    modalText() {
-      return sprintf(
-        s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'),
-        {
-          pipelineId: `<strong>#${this.pipelineId}</strong>`,
-        },
-        false,
-      );
-    },
-  },
   created() {
     eventHub.$on('openConfirmationModal', this.setModalData);
   },
@@ -68,7 +48,8 @@ export default {
   },
   methods: {
     setModalData(data) {
-      this.pipelineId = data.pipelineId;
+      this.pipelineId = data.pipeline.id;
+      this.pipeline = data.pipeline;
       this.endpoint = data.endpoint;
     },
     onSubmit() {
@@ -103,15 +84,6 @@ export default {
       :view-type="viewType"
       :canceling-pipeline="cancelingPipeline"
     />
-
-    <modal
-      id="confirmation-modal"
-      :header-title-text="modalTitle"
-      :footer-primary-button-text="s__('Pipeline|Stop pipeline')"
-      footer-primary-button-variant="danger"
-      @submit="onSubmit"
-    >
-      <span v-html="modalText"></span>
-    </modal>
+    <pipeline-stop-modal :pipeline="pipeline" :on-submit="onSubmit" />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index da42698c255..f6454a84ea5 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -243,7 +243,7 @@ export default {
   methods: {
     handleCancelClick() {
       eventHub.$emit('openConfirmationModal', {
-        pipelineId: this.pipeline.id,
+        pipeline: this.pipeline,
         endpoint: this.pipeline.cancel_path,
       });
     },
diff --git a/changelogs/unreleased/46464-improve-stop-pipeline-modal.yml b/changelogs/unreleased/46464-improve-stop-pipeline-modal.yml
new file mode 100644
index 00000000000..541acdc56a7
--- /dev/null
+++ b/changelogs/unreleased/46464-improve-stop-pipeline-modal.yml
@@ -0,0 +1,5 @@
+---
+title: Show pipeline ID, commit, and branch name on modal while stopping pipeline
+merge_request: 25059
+author:
+type: changed
-- 
cgit v1.2.1


From d6a9cd5d040f68e00e8129186992fc4104c9fe42 Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Tue, 5 Mar 2019 23:39:31 -0700
Subject: Update corresponding test

---
 spec/javascripts/pipelines/pipelines_table_row_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/javascripts/pipelines/pipelines_table_row_spec.js b/spec/javascripts/pipelines/pipelines_table_row_spec.js
index 4c575536f0e..223703b60c1 100644
--- a/spec/javascripts/pipelines/pipelines_table_row_spec.js
+++ b/spec/javascripts/pipelines/pipelines_table_row_spec.js
@@ -196,7 +196,7 @@ describe('Pipelines Table Row', () => {
     it('emits `openConfirmationModal` event when cancel button is clicked and toggles loading', () => {
       eventHub.$once('openConfirmationModal', data => {
         expect(data.endpoint).toEqual('/cancel');
-        expect(data.pipelineId).toEqual(pipeline.id);
+        expect(data.pipeline.id).toEqual(pipeline.id);
       });
 
       component.$el.querySelector('.js-pipelines-cancel-button').click();
-- 
cgit v1.2.1


From b5a3004e2fae3637dab9efbe2f6540e4101e50a2 Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Wed, 6 Mar 2019 14:28:36 -0700
Subject: Add fields displayed in modal to test

---
 spec/javascripts/pipelines/pipelines_table_row_spec.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/spec/javascripts/pipelines/pipelines_table_row_spec.js b/spec/javascripts/pipelines/pipelines_table_row_spec.js
index 223703b60c1..234fc705a81 100644
--- a/spec/javascripts/pipelines/pipelines_table_row_spec.js
+++ b/spec/javascripts/pipelines/pipelines_table_row_spec.js
@@ -195,8 +195,10 @@ describe('Pipelines Table Row', () => {
 
     it('emits `openConfirmationModal` event when cancel button is clicked and toggles loading', () => {
       eventHub.$once('openConfirmationModal', data => {
+        const { id, ref, commit } = pipeline;
+
         expect(data.endpoint).toEqual('/cancel');
-        expect(data.pipeline.id).toEqual(pipeline.id);
+        expect(data.pipeline).toEqual(jasmine.objectContaining({ id, ref, commit }));
       });
 
       component.$el.querySelector('.js-pipelines-cancel-button').click();
-- 
cgit v1.2.1


From a7a33c21e20bef17afc63f78ad3f8f315005d272 Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Thu, 7 Mar 2019 01:52:49 -0700
Subject: Emit submit event instead of passing handler

---
 .../javascripts/pipelines/components/pipeline_stop_modal.vue  | 11 ++++++-----
 .../javascripts/pipelines/components/pipelines_table.vue      |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
index d4fa556f095..4cafd147511 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
@@ -24,10 +24,6 @@ export default {
       required: true,
       deep: true,
     },
-    onSubmit: {
-      type: Function,
-      required: true,
-    },
   },
   computed: {
     modalTitle() {
@@ -52,6 +48,11 @@ export default {
       return !_.isEmpty(this.pipeline.ref);
     },
   },
+  methods: {
+    emitSubmit(event) {
+      this.$emit('submit', event);
+    },
+  },
 };
 </script>
 <template>
@@ -60,7 +61,7 @@ export default {
     :header-title-text="modalTitle"
     :footer-primary-button-text="s__('Pipeline|Stop pipeline')"
     footer-primary-button-variant="danger"
-    @submit="onSubmit"
+    @submit="emitSubmit($event)"
   >
     <p v-html="modalText"></p>
 
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 9d837ddf646..fcd1f119df0 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -84,6 +84,6 @@ export default {
       :view-type="viewType"
       :canceling-pipeline="cancelingPipeline"
     />
-    <pipeline-stop-modal :pipeline="pipeline" :on-submit="onSubmit" />
+    <pipeline-stop-modal :pipeline="pipeline" @submit="onSubmit" />
   </div>
 </template>
-- 
cgit v1.2.1