diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue')
| -rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue | 121 |
1 files changed, 87 insertions, 34 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue index 9942861d9e4..de01821a292 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue @@ -1,22 +1,31 @@ <script> -import { GlLink, GlSprintf } from '@gitlab/ui'; +import { GlLink, GlSprintf, GlButton } from '@gitlab/ui'; import MrWidgetIcon from './mr_widget_icon.vue'; -import PipelineTourState from './states/mr_widget_pipeline_tour.vue'; +import Tracking from '~/tracking'; +import { s__ } from '~/locale'; + +const trackingMixin = Tracking.mixin(); +const TRACK_LABEL = 'no_pipeline_noticed'; export default { name: 'MRWidgetSuggestPipeline', iconName: 'status_notfound', - popoverTarget: 'suggest-popover', - popoverContainer: 'suggest-pipeline', - trackLabel: 'no_pipeline_noticed', + trackLabel: TRACK_LABEL, linkTrackValue: 30, linkTrackEvent: 'click_link', + showTrackValue: 10, + showTrackEvent: 'click_button', + helpContent: s__( + `mrWidget|Use %{linkStart}CI pipelines to test your code%{linkEnd} by simply adding a GitLab CI configuration file to your project. It only takes a minute to make your code more secure and robust.`, + ), + helpURL: 'https://about.gitlab.com/blog/2019/07/12/guide-to-ci-cd-pipelines/', components: { GlLink, GlSprintf, + GlButton, MrWidgetIcon, - PipelineTourState, }, + mixins: [trackingMixin], props: { pipelinePath: { type: String, @@ -31,45 +40,89 @@ export default { required: true, }, }, + computed: { + tracking() { + return { + label: TRACK_LABEL, + property: this.humanAccess, + }; + }, + }, + mounted() { + this.track(); + }, }; </script> <template> - <div :id="$options.popoverContainer" class="d-flex mr-pipeline-suggest append-bottom-default"> - <mr-widget-icon :name="$options.iconName" /> - <div :id="$options.popoverTarget"> - <gl-sprintf - :message=" - s__(`mrWidget|%{prefixToLinkStart}No pipeline%{prefixToLinkEnd} + <div class="mr-widget-body mr-pipeline-suggest gl-mb-3"> + <div class="gl-display-flex gl-align-items-center"> + <mr-widget-icon :name="$options.iconName" /> + <div> + <gl-sprintf + :message=" + s__(`mrWidget|%{prefixToLinkStart}No pipeline%{prefixToLinkEnd} %{addPipelineLinkStart}Add the .gitlab-ci.yml file%{addPipelineLinkEnd} to create one.`) - " - > - <template #prefixToLink="{content}"> + " + > + <template #prefixToLink="{content}"> + <strong> + {{ content }} + </strong> + </template> + <template #addPipelineLink="{content}"> + <gl-link + :href="pipelinePath" + class="gl-ml-1" + data-testid="add-pipeline-link" + :data-track-property="humanAccess" + :data-track-value="$options.linkTrackValue" + :data-track-event="$options.linkTrackEvent" + :data-track-label="$options.trackLabel" + > + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </div> + </div> + <div class="row"> + <div class="col-md-5 order-md-last col-12 gl-mt-5 mt-md-n3 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"> <strong> - {{ content }} + {{ s__('mrWidget|Are you adding technical debt or code vulnerabilities?') }} </strong> - </template> - <template #addPipelineLink="{content}"> - <gl-link + <p class="gl-mt-2"> + <gl-sprintf :message="$options.helpContent"> + <template #link="{ content }"> + <gl-link + data-testid="help" + :href="$options.helpURL" + target="_blank" + class="font-size-inherit" + >{{ content }} + </gl-link> + </template> + </gl-sprintf> + </p> + <gl-button + data-testid="ok" + category="primary" + class="gl-mt-2" + variant="info" :href="pipelinePath" - class="ml-2 js-add-pipeline-path" :data-track-property="humanAccess" - :data-track-value="$options.linkTrackValue" - :data-track-event="$options.linkTrackEvent" + :data-track-value="$options.showTrackValue" + :data-track-event="$options.showTrackEvent" :data-track-label="$options.trackLabel" > - {{ content }} - </gl-link> - </template> - </gl-sprintf> - <pipeline-tour-state - :pipeline-path="pipelinePath" - :pipeline-svg-path="pipelineSvgPath" - :human-access="humanAccess" - :popover-target="$options.popoverTarget" - :popover-container="$options.popoverContainer" - :track-label="$options.trackLabel" - /> + {{ __('Show me how to add a pipeline') }} + </gl-button> + </div> + </div> </div> </div> </template> |