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

81.25% Statements 13/16
100% Branches 6/6
71.43% Functions 5/7
81.25% Lines 13/16

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  2x 2x 2x 2x 2x 2x 2x 2x                                                                                           4x     14x     12x       14x                         60x                                                                                                            
<script>
import { GlEmptyState, GlButton } from '@gitlab/ui';
import { startCodeQualityWalkthrough, track } from '~/code_quality_walkthrough/utils';
import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
import ExperimentTracking from '~/experimentation/experiment_tracking';
import { getExperimentData } from '~/experimentation/utils';
import { helpPagePath } from '~/helpers/help_page_helper';
import { s__ } from '~/locale';
import PipelinesCiTemplates from './pipelines_ci_templates.vue';
 
export default {
  i18n: {
    title: s__('Pipelines|Build with confidence'),
    description: s__(`Pipelines|GitLab CI/CD can automatically build,
      test, and deploy your code. Let GitLab take care of time
      consuming tasks, so you can spend more time creating.`),
    aboutRunnersBtnText: s__('Pipelines|Learn about Runners'),
    installRunnersBtnText: s__('Pipelines|Install GitLab Runners'),
    codeQualityTitle: s__('Pipelines|Improve code quality with GitLab CI/CD'),
    codeQualityDescription: s__(`Pipelines|To keep your codebase simple,
      readable, and accessible to contributors, use GitLab CI/CD
      to analyze your code quality with every push to your project.`),
    codeQualityBtnText: s__('Pipelines|Add a code quality job'),
    noCiDescription: s__('Pipelines|This project is not currently set up to run pipelines.'),
  },
  name: 'PipelinesEmptyState',
  components: {
    GlEmptyState,
    GlButton,
    GitlabExperiment,
    PipelinesCiTemplates,
  },
  props: {
    emptyStateSvgPath: {
      type: String,
      required: true,
    },
    canSetCi: {
      type: Boolean,
      required: true,
    },
    codeQualityPagePath: {
      type: String,
      required: false,
      default: null,
    },
    ciRunnerSettingsPath: {
      type: String,
      required: false,
      default: null,
    },
  },
  computed: {
    ciHelpPagePath() {
      return helpPagePath('ci/quick_start/index.md');
    },
    isCodeQualityExperimentActive() {
      return this.canSetCi && Boolean(getExperimentData('code_quality_walkthrough'));
    },
    isCiRunnerTemplatesExperimentActive() {
      return this.canSetCi && Boolean(getExperimentData('ci_runner_templates'));
    },
  },
  mounted() {
    startCodeQualityWalkthrough();
  },
  methods: {
    trackClick() {
      track('cta_clicked');
    },
    trackCiRunnerTemplatesClick(action) {
      const tracking = new ExperimentTracking('ci_runner_templates');
      tracking.event(action);
    },
  },
};
</script>
<template>
  <div>
    <gitlab-experiment v-if="isCodeQualityExperimentActive" name="code_quality_walkthrough">
      <template #control><pipelines-ci-templates /></template>
      <template #candidate>
        <gl-empty-state
          :title="$options.i18n.codeQualityTitle"
          :svg-path="emptyStateSvgPath"
          :description="$options.i18n.codeQualityDescription"
        >
          <template #actions>
            <gl-button :href="codeQualityPagePath" variant="confirm" @click="trackClick()">
              {{ $options.i18n.codeQualityBtnText }}
            </gl-button>
          </template>
        </gl-empty-state>
      </template>
    </gitlab-experiment>
    <gitlab-experiment v-else-if="isCiRunnerTemplatesExperimentActive" name="ci_runner_templates">
      <template #control><pipelines-ci-templates /></template>
      <template #candidate>
        <gl-empty-state
          :title="$options.i18n.title"
          :svg-path="emptyStateSvgPath"
          :description="$options.i18n.description"
        >
          <template #actions>
            <gl-button
              :href="ciRunnerSettingsPath"
              variant="confirm"
              @click="trackCiRunnerTemplatesClick('install_runners_button_clicked')"
            >
              {{ $options.i18n.installRunnersBtnText }}
            </gl-button>
            <gl-button
              :href="ciHelpPagePath"
              variant="default"
              @click="trackCiRunnerTemplatesClick('learn_button_clicked')"
            >
              {{ $options.i18n.aboutRunnersBtnText }}
            </gl-button>
          </template>
        </gl-empty-state>
      </template>
    </gitlab-experiment>
    <pipelines-ci-templates v-else-if="canSetCi" />
    <gl-empty-state
      v-else
      title=""
      :svg-path="emptyStateSvgPath"
      :description="$options.i18n.noCiDescription"
    />
  </div>
</template>