diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-20 03:12:08 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-20 03:12:08 +0300 |
commit | b0e1e54ce9918a83ad41de7e2a1f57cad687e654 (patch) | |
tree | f7a2dc0a4a091e7cfbc39aaab7a54618c376f787 /app/assets | |
parent | ce5c259086445d71b405833c60ca71cd8c33de63 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
6 files changed, 110 insertions, 14 deletions
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js index df643675357..10e9f6a9488 100644 --- a/app/assets/javascripts/ide/index.js +++ b/app/assets/javascripts/ide/index.js @@ -8,6 +8,7 @@ import { parseBoolean } from '../lib/utils/common_utils'; import { resetServiceWorkersPublicPath } from '../lib/utils/webpack'; import ide from './components/ide.vue'; import { createRouter } from './ide_router'; +import { initGitlabWebIDE } from './init_gitlab_web_ide'; import { DEFAULT_THEME } from './lib/themes'; import { createStore } from './stores'; @@ -34,7 +35,7 @@ Vue.use(PerformancePlugin, { * @param {extendStoreCallback} options.extendStore - * Function that receives the default store and returns an extended one. */ -export const initIde = (el, options = {}) => { +export const initLegacyWebIDE = (el, options = {}) => { if (!el) return null; const { rootComponent = ide, extendStore = identity } = options; @@ -93,8 +94,15 @@ export const initIde = (el, options = {}) => { */ export function startIde(options) { const ideElement = document.getElementById('ide'); - if (ideElement) { + + if (!ideElement) { + return; + } + + if (gon.features?.vscodeWebIde) { + initGitlabWebIDE(ideElement); + } else { resetServiceWorkersPublicPath(); - initIde(ideElement, options); + initLegacyWebIDE(ideElement, options); } } diff --git a/app/assets/javascripts/ide/init_gitlab_web_ide.js b/app/assets/javascripts/ide/init_gitlab_web_ide.js new file mode 100644 index 00000000000..a061da38d4f --- /dev/null +++ b/app/assets/javascripts/ide/init_gitlab_web_ide.js @@ -0,0 +1,30 @@ +import { cleanTrailingSlash } from './stores/utils'; + +export const initGitlabWebIDE = async (el) => { + const { start } = await import('@gitlab/web-ide'); + + const { gitlab_url: gitlabUrl } = window.gon; + const baseUrl = new URL(process.env.GITLAB_WEB_IDE_PUBLIC_PATH, window.location.origin); + + // what: Pull what we need from the element. We will replace it soon. + const { path_with_namespace: projectPath } = JSON.parse(el.dataset.project); + const { cspNonce: nonce, branchName: ref } = el.dataset; + + // what: Clean up the element, but preserve id. + // why: This way we don't inherit any `ide-loading` side-effects. This + // mirrors the behavior of Vue when it mounts to an element. + const newEl = document.createElement(el.tagName); + newEl.id = el.id; + newEl.classList.add('gl--flex-center', 'gl-relative', 'gl-h-full'); + + el.replaceWith(newEl); + + // what: Trigger start on our new mounting element + await start(newEl, { + baseUrl: cleanTrailingSlash(baseUrl.href), + projectPath, + gitlabUrl, + ref, + nonce, + }); +}; 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..1c6b1a167a1 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', + extras: { + fromStep: this.currentStepIndex + 1, + toStep: this.currentStepIndex, + }, + }); + }, + onNext() { + this.currentStepIndex += 1; + this.track('click_button', { + property: 'next', + label: 'pipeline_wizard_navigation', + extras: { + 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', + extras: { + 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 |