Merge branch 'port-ci-lint-to-vue-intial-setup' into 'master'

Setup boilerplate for CI lint to Vue

See merge request gitlab-org/gitlab!42401

app/assets/javascripts/ci_lint/components/ci_lint.vue

+<script>
+export default {
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template
+  ><div></div
+></template>

app/assets/javascripts/ci_lint/components/ci_lint_results.vue

+<script>
+export default {
+  props: {},
+};
+</script>
+
+<template
+  ><div></div
+></template>

app/assets/javascripts/ci_lint/index.js

+import Vue from 'vue';
+import CILint from './components/ci_lint.vue';
+
+export default (containerId = '#js-ci-lint') => {
+  const containerEl = document.querySelector(containerId);
+  const { endpoint } = containerEl.dataset;
+
+  return new Vue({
+    el: containerEl,
+    render(createElement) {
+      return createElement(CILint, {
+        props: {
+          endpoint,
+        },
+      });
+    },
+  });
+};

app/assets/javascripts/pages/projects/ci/lints/new/index.js

 import CILintEditor from '../ci_lint_editor';
+import initCILint from '~/ci_lint/index';
 
-document.addEventListener('DOMContentLoaded', () => new CILintEditor());
+document.addEventListener('DOMContentLoaded', () => {
+  if (gon?.features?.ciLintVue) {
+    initCILint();
+  } else {
+    // eslint-disable-next-line no-new
+    new CILintEditor();
+  }
+});

app/controllers/projects/ci/lints_controller.rb

@@ -2,6 +2,9 @@
 
 class Projects::Ci::LintsController < Projects::ApplicationController
   before_action :authorize_create_pipeline!
+  before_action do
+    push_frontend_feature_flag(:ci_lint_vue, project)
+  end
 
   def show
   end

app/views/projects/ci/lints/show.html.haml

@@ -6,7 +6,11 @@
 
 %h2.pt-3.pb-3= _("Validate your GitLab CI configuration")
 
-.project-ci-linter
+- if Feature.enabled?(:ci_lint_vue, @project)
+  #js-ci-lint{ data: { endpoint: project_ci_lint_path(@project) } }
+
+- else
+  .project-ci-linter
     = form_tag project_ci_lint_path(@project), method: :post, class: 'js-ci-lint-form' do
       .row
         .col-sm-12

config/feature_flags/development/ci_lint_vue.yml

+---
+name: ci_lint_vue
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/42401
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/249661
+group: group::continuous intergration
+type: development
+default_enabled: false
\ No newline at end of file

spec/features/projects/ci/lint_spec.rb

@@ -12,6 +12,7 @@ RSpec.describe 'CI Lint', :js do
     describe 'YAML parsing' do
       shared_examples 'validates the YAML' do
         before do
+          stub_feature_flags(ci_lint_vue: false)
           click_on 'Validate'
         end
 
@@ -86,6 +87,7 @@ RSpec.describe 'CI Lint', :js do
 
       before do
         stub_feature_flags(monaco_ci: false)
+        stub_feature_flags(ci_lint_vue: false)
         project.add_developer(user)
         sign_in(user)
 
@@ -107,6 +109,7 @@ RSpec.describe 'CI Lint', :js do
 
       before do
         stub_feature_flags(monaco_ci: true)
+        stub_feature_flags(ci_lint_vue: false)
         project.add_developer(user)
         sign_in(user)
 

spec/views/projects/ci/lints/show.html.haml_spec.rb

@@ -13,6 +13,7 @@ RSpec.describe 'projects/ci/lints/show' do
     before do
       assign(:project, project)
       assign(:result, result)
+      stub_feature_flags(ci_lint_vue: false)
     end
 
     context 'when builds attrbiutes contain HTML nodes' do
@@ -66,6 +67,7 @@ RSpec.describe 'projects/ci/lints/show' do
     before do
       assign(:project, project)
       assign(:result, result)
+      stub_feature_flags(ci_lint_vue: false)
     end
 
     it 'shows the correct values' do
@@ -103,6 +105,7 @@ RSpec.describe 'projects/ci/lints/show' do
 
       assign(:project, project)
       assign(:result, result)
+      stub_feature_flags(ci_lint_vue: false)
     end
 
     it 'shows error message' do