All files / app/assets/javascripts/pipelines/components/pipelines_list pipeline_stop_modal.vue

90% Statements 9/10
100% Branches 2/2
85.71% Functions 6/7
90% Lines 9/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107  5x   5x 5x                                             77x                 77x     77x     77x           77x                       323x                                                                                            
<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>