diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_wizard')
4 files changed, 69 insertions, 11 deletions
diff --git a/app/assets/javascripts/pipeline_wizard/components/editor.vue b/app/assets/javascripts/pipeline_wizard/components/editor.vue index 41611233f71..0c063241173 100644 --- a/app/assets/javascripts/pipeline_wizard/components/editor.vue +++ b/app/assets/javascripts/pipeline_wizard/components/editor.vue @@ -27,7 +27,7 @@ export default { data() { return { editor: null, - isUpdating: false, + isFocused: false, yamlEditorExtension: null, }; }, @@ -60,19 +60,23 @@ export default { this.editor.onDidChangeModelContent( debounce(() => this.handleChange(), CONTENT_UPDATE_DEBOUNCE), ); + this.editor.onDidFocusEditorText(() => { + this.isFocused = true; + }); + this.editor.onDidBlurEditorText(() => { + this.isFocused = false; + }); this.updateEditorContent(); this.emitValue(); }, methods: { async updateEditorContent() { - this.isUpdating = true; this.editor.setDoc(this.doc); - this.isUpdating = false; this.requestHighlight(this.highlight); }, handleChange() { this.emitValue(); - if (!this.isUpdating) { + if (this.isFocused) { this.handleTouch(); } }, diff --git a/app/assets/javascripts/pipeline_wizard/components/wrapper.vue b/app/assets/javascripts/pipeline_wizard/components/wrapper.vue index 0fe87bcee7b..adeb4ae598b 100644 --- a/app/assets/javascripts/pipeline_wizard/components/wrapper.vue +++ b/app/assets/javascripts/pipeline_wizard/components/wrapper.vue @@ -5,6 +5,7 @@ import { uniqueId } from 'lodash'; import { merge } from '~/lib/utils/yaml'; import { __ } from '~/locale'; import { isValidStepSeq } from '~/pipeline_wizard/validators'; +import Tracking from '~/tracking'; import YamlEditor from './editor.vue'; import WizardStep from './step.vue'; import CommitStep from './commit.vue'; @@ -16,6 +17,8 @@ export const i18n = { YAML-file for you to add to your repository`), }; +const trackingMixin = Tracking.mixin(); + export default { name: 'PipelineWizardWrapper', i18n, @@ -25,6 +28,7 @@ export default { WizardStep, CommitStep, }, + mixins: [trackingMixin], props: { steps: { type: Object, @@ -43,6 +47,11 @@ export default { type: String, required: true, }, + templateId: { + type: String, + required: false, + default: null, + }, }, data() { return { @@ -77,6 +86,11 @@ export default { template: this.steps.get(i).get('template', true), })); }, + tracking() { + return { + category: `pipeline_wizard:${this.templateId}`, + }; + }, }, watch: { isLastStep(value) { @@ -84,9 +98,6 @@ export default { }, }, methods: { - getStep(index) { - return this.steps.get(index); - }, resetHighlight() { this.highlightPath = null; }, @@ -106,6 +117,43 @@ export default { }); return doc; }, + onBack() { + this.currentStepIndex -= 1; + this.track('click_button', { + property: 'back', + label: 'pipeline_wizard_navigation', + extra: { + fromStep: this.currentStepIndex + 1, + toStep: this.currentStepIndex, + }, + }); + }, + onNext() { + this.currentStepIndex += 1; + this.track('click_button', { + property: 'next', + label: 'pipeline_wizard_navigation', + extra: { + fromStep: this.currentStepIndex - 1, + toStep: this.currentStepIndex, + }, + }); + }, + onDone() { + this.$emit('done'); + this.track('click_button', { + label: 'pipeline_wizard_commit', + property: 'commit', + }); + }, + onEditorTouched() { + this.track('edit', { + label: 'pipeline_wizard_editor_interaction', + extra: { + currentStep: this.currentStepIndex, + }, + }); + }, }, }; </script> @@ -127,8 +175,8 @@ export default { :file-content="pipelineBlob" :filename="filename" :project-path="projectPath" - @back="currentStepIndex--" - @done="$emit('done')" + @back="onBack" + @done="onDone" /> <wizard-step v-for="(step, i) in stepList" @@ -141,8 +189,8 @@ export default { :highlight.sync="highlightPath" :inputs="step.inputs" :template="step.template" - @back="currentStepIndex--" - @next="currentStepIndex++" + @back="onBack" + @next="onNext" @update:compiled="onUpdate" /> </section> @@ -162,6 +210,7 @@ export default { :highlight="highlightPath" class="gl-w-full" @update:yaml="onEditorUpdate" + @touch.once="onEditorTouched" /> <div v-if="showPlaceholder" diff --git a/app/assets/javascripts/pipeline_wizard/pipeline_wizard.vue b/app/assets/javascripts/pipeline_wizard/pipeline_wizard.vue index 79b1507ad0e..5a93de3b1be 100644 --- a/app/assets/javascripts/pipeline_wizard/pipeline_wizard.vue +++ b/app/assets/javascripts/pipeline_wizard/pipeline_wizard.vue @@ -42,6 +42,9 @@ export default { steps() { return this.parsedTemplate?.get('steps'); }, + templateId() { + return this.parsedTemplate?.get('id'); + }, }, }; </script> @@ -60,6 +63,7 @@ export default { :filename="filename" :project-path="projectPath" :steps="steps" + :template-id="templateId" @done="$emit('done')" /> </div> diff --git a/app/assets/javascripts/pipeline_wizard/templates/pages.yml b/app/assets/javascripts/pipeline_wizard/templates/pages.yml index cd2242b1ba7..9d7936f2f5a 100644 --- a/app/assets/javascripts/pipeline_wizard/templates/pages.yml +++ b/app/assets/javascripts/pipeline_wizard/templates/pages.yml @@ -1,3 +1,4 @@ +id: gitlab/pages title: Get started with Pages description: "GitLab Pages lets you deploy static websites in minutes. All you need is a .gitlab-ci.yml file. Follow the below steps to |