Add latest changes from gitlab-org/gitlab@master

8 files changed, 113 insertions, 15 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
diff --git a/app/controllers/ide_controller.rb b/app/controllers/ide_controller.rb
index 9fcb8385312..58a985cbc46 100644
--- a/app/controllers/ide_controller.rb
+++ b/app/controllers/ide_controller.rb
@@ -13,6 +13,7 @@ class IdeController < ApplicationController
     push_frontend_feature_flag(:build_service_proxy)
     push_frontend_feature_flag(:schema_linting)
     push_frontend_feature_flag(:reject_unsigned_commits_by_gitlab)
+    push_frontend_feature_flag(:vscode_web_ide, current_user)
     define_index_vars
   end
 
diff --git a/app/helpers/ide_helper.rb b/app/helpers/ide_helper.rb
index 4b463b9971d..ec1327cf7ae 100644
--- a/app/helpers/ide_helper.rb
+++ b/app/helpers/ide_helper.rb
@@ -24,7 +24,8 @@ module IdeHelper
       'web-terminal-svg-path' => image_path('illustrations/web-ide_promotion.svg'),
       'web-terminal-help-path' => help_page_path('user/project/web_ide/index.md', anchor: 'interactive-web-terminals-for-the-web-ide'),
       'web-terminal-config-help-path' => help_page_path('user/project/web_ide/index.md', anchor: 'web-ide-configuration-file'),
-      'web-terminal-runners-help-path' => help_page_path('user/project/web_ide/index.md', anchor: 'runner-configuration')
+      'web-terminal-runners-help-path' => help_page_path('user/project/web_ide/index.md', anchor: 'runner-configuration'),
+      'csp-nonce' => content_security_policy_nonce
     }
   end