gitlab-org--gitlab-foss/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue

<script>
import { GlLink, GlModal, GlSprintf } from '@gitlab/ui';
import { isEmpty } from 'lodash';
import { __, s__, sprintf } from '~/locale';
import CiIcon from '~/vue_shared/components/ci_icon.vue';

/**
 * Pipeline Stop Modal.
 *
 * Renders the modal used to confirm stopping a pipeline.
 */
export default {
  components: {
    GlModal,
    GlLink,
    GlSprintf,
    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 s__(`Pipeline|You’re about to stop pipeline #%{pipelineId}.`);
    },
    hasRef() {
      return !isEmpty(this.pipeline.ref);
    },
    primaryProps() {
      return {
        text: s__('Pipeline|Stop pipeline'),
        attributes: [{ variant: 'danger' }],
      };
    },
    cancelProps() {
      return {
        text: __('Cancel'),
      };
    },
  },
  methods: {
    emitSubmit(event) {
      this.$emit('submit', event);
    },
  },
};
</script>
<template>
  <gl-modal
    modal-id="confirmation-modal"
    :title="modalTitle"
    :action-primary="primaryProps"
    :action-cancel="cancelProps"
    @primary="emitSubmit($event)"
  >
    <p>
      <gl-sprintf :message="modalText">
        <template #pipelineId>
          <strong>{{ pipeline.id }}</strong>
        </template>
      </gl-sprintf>
    </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>