All files / app/assets/javascripts/vue_merge_request_widget/components mr_widget_suggest_pipeline.vue

33.33% Statements 1/3
100% Branches 0/0
0% Functions 0/2
33.33% Lines 1/3

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 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126                            3x                                                                                                                                                                                                                              
<script>
import { GlLink, GlSprintf, GlButton } from '@gitlab/ui';
import Tracking from '~/tracking';
import DismissibleContainer from '~/vue_shared/components/dismissible_container.vue';
import {
  SP_TRACK_LABEL,
  SP_SHOW_TRACK_EVENT,
  SP_SHOW_TRACK_VALUE,
  SP_HELP_CONTENT,
  SP_HELP_URL,
  SP_ICON_NAME,
} from '../constants';
import MrWidgetIcon from './mr_widget_icon.vue';
 
const trackingMixin = Tracking.mixin();
 
export default {
  name: 'MRWidgetSuggestPipeline',
  SP_ICON_NAME,
  SP_TRACK_LABEL,
  SP_SHOW_TRACK_EVENT,
  SP_SHOW_TRACK_VALUE,
  SP_HELP_CONTENT,
  SP_HELP_URL,
  components: {
    GlLink,
    GlSprintf,
    GlButton,
    MrWidgetIcon,
    DismissibleContainer,
  },
  mixins: [trackingMixin],
  props: {
    pipelinePath: {
      type: String,
      required: true,
    },
    pipelineSvgPath: {
      type: String,
      required: true,
    },
    humanAccess: {
      type: String,
      required: true,
    },
    userCalloutsPath: {
      type: String,
      required: true,
    },
    userCalloutFeatureId: {
      type: String,
      required: true,
    },
  },
  computed: {
    tracking() {
      return {
        label: SP_TRACK_LABEL,
        property: this.humanAccess,
      };
    },
  },
  mounted() {
    this.track();
  },
};
</script>
<template>
  <dismissible-container
    class="mr-widget-body mr-pipeline-suggest gl-mb-3"
    :path="userCalloutsPath"
    :feature-id="userCalloutFeatureId"
    @dismiss="$emit('dismiss')"
  >
    <template #title>
      <mr-widget-icon :name="$options.SP_ICON_NAME" />
      <div>
        <gl-sprintf
          :message="
            s__(`mrWidget|%{boldHeaderStart}Looks like there's no pipeline here.%{boldHeaderEnd}`)
          "
        >
          <template #boldHeader="{ content }">
            <strong>
              {{ content }}
            </strong>
          </template>
        </gl-sprintf>
      </div>
    </template>
    <div class="row">
      <div
        class="col-md-5 order-md-last col-12 gl-mt-5 gl-md-mt-n2! gl-md-pt-2 svg-content svg-225"
      >
        <img data-testid="pipeline-image" :src="pipelineSvgPath" />
      </div>
      <div class="col-md-7 order-md-first col-12">
        <div class="ml-6 gl-pt-5">
          <p class="gl-mt-2">
            <gl-sprintf :message="$options.SP_HELP_CONTENT">
              <template #link="{ content }">
                <gl-link data-testid="help" :href="$options.SP_HELP_URL" target="_blank"
                  >{{ content }}
                </gl-link>
              </template>
            </gl-sprintf>
          </p>
          <gl-button
            data-testid="ok"
            category="primary"
            class="gl-mt-2"
            variant="confirm"
            :href="pipelinePath"
            :data-track-property="humanAccess"
            :data-track-value="$options.SP_SHOW_TRACK_VALUE"
            :data-track-action="$options.SP_SHOW_TRACK_EVENT"
            :data-track-label="$options.SP_TRACK_LABEL"
          >
            {{ __('Try out GitLab Pipelines') }}
          </gl-button>
        </div>
      </div>
    </div>
  </dismissible-container>
</template>