1 files changed, 97 insertions, 0 deletions
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..4cafd147511
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
@@ -0,0 +1,97 @@
+<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,
+    },
+  },
+  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);
+    },
+  },
+  methods: {
+    emitSubmit(event) {
+      this.$emit('submit', event);
+    },
+  },
+};
+</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="emitSubmit($event)"
+  >
+    <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>