All files / app/assets/javascripts/blob/suggest_gitlab_ci_yml/components popover.vue

78.95% Statements 15/19
75% Branches 12/16
70% Functions 7/10
78.95% Lines 15/19

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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141  5x 5x 5x 5x   5x   5x                                                                                                 6x                   5x     5x     5x                   6x       3x     6x               11x           40x                                                                        
<script>
import { GlPopover, GlSprintf, GlButton } from '@gitlab/ui';
import { parseBoolean, scrollToElement, setCookie, getCookie } from '~/lib/utils/common_utils';
import { s__ } from '~/locale';
import Tracking from '~/tracking';
 
const trackingMixin = Tracking.mixin();
 
const popoverStates = {
  suggest_gitlab_ci_yml: {
    title: s__(`suggestPipeline|1/2: Choose a template`),
    content: s__(
      `suggestPipeline|We’re adding a GitLab CI configuration file to add a pipeline to the project. You could create it manually, but we recommend that you start with a GitLab template that works out of the box.`,
    ),
    footer: s__(
      `suggestPipeline|Choose %{boldStart}Code Quality%{boldEnd} to add a pipeline that tests the quality of your code.`,
    ),
  },
  suggest_commit_first_project_gitlab_ci_yml: {
    title: s__(`suggestPipeline|2/2: Commit your changes`),
    content: s__(
      `suggestPipeline|The template is ready! You can now commit it to create your first pipeline.`,
    ),
  },
};
export default {
  dismissTrackValue: 10,
  clickTrackValue: 'click_button',
  components: {
    GlPopover,
    GlSprintf,
    GlButton,
  },
  mixins: [trackingMixin],
  props: {
    target: {
      type: String,
      required: true,
    },
    trackLabel: {
      type: String,
      required: true,
    },
    dismissKey: {
      type: String,
      required: true,
    },
    humanAccess: {
      type: String,
      required: true,
    },
    mergeRequestPath: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      popoverDismissed: parseBoolean(getCookie(`${this.trackLabel}_${this.dismissKey}`)),
      tracking: {
        label: this.trackLabel,
        property: this.humanAccess,
      },
    };
  },
  computed: {
    suggestTitle() {
      return popoverStates[this.trackLabel].title || '';
    },
    suggestContent() {
      return popoverStates[this.trackLabel].content || '';
    },
    suggestFooter() {
      return popoverStates[this.trackLabel].footer || '';
    },
    emoji() {
      return popoverStates[this.trackLabel].emoji || '';
    },
    dismissCookieName() {
      return `${this.trackLabel}_${this.dismissKey}`;
    },
  },
  mounted() {
    if (
      this.trackLabel === 'suggest_commit_first_project_gitlab_ci_yml' &&
      !this.popoverDismissed
    ) {
      scrollToElement(document.querySelector(this.target));
    }
 
    this.trackOnShow();
  },
  methods: {
    onDismiss() {
      this.popoverDismissed = true;
      setCookie(this.dismissCookieName, this.popoverDismissed);
    },
    trackOnShow() {
      if (!this.popoverDismissed) this.track();
    },
  },
};
</script>
 
<template>
  <gl-popover
    v-if="!popoverDismissed"
    show
    :target="target"
    placement="right"
    container="viewport"
    :css-classes="['suggest-gitlab-ci-yml', 'ml-4']"
  >
    <template #title>
      <span>{{ suggestTitle }}</span>
      <span class="ml-auto">
        <gl-button
          :aria-label="__('Close')"
          class="btn-blank"
          name="dismiss"
          icon="close"
          :data-track-property="humanAccess"
          :data-track-value="$options.dismissTrackValue"
          :data-track-action="$options.clickTrackValue"
          :data-track-label="trackLabel"
          @click="onDismiss"
        />
      </span>
    </template>
 
    <gl-sprintf :message="suggestContent" />
    <div class="mt-3">
      <gl-sprintf :message="suggestFooter">
        <template #bold="{ content }">
          <strong> {{ content }} </strong>
        </template>
      </gl-sprintf>
    </div>
  </gl-popover>
</template>