Setup boilerplate for ci lint

Setup feature flag and basic
boilerplate for moving ci lint
to vue.

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,31 +6,35 @@
 
 %h2.pt-3.pb-3= _("Validate your GitLab CI configuration")
 
-.project-ci-linter
-  = form_tag project_ci_lint_path(@project), method: :post, class: 'js-ci-lint-form' do
-    .row
-      .col-sm-12
-        .file-holder
-          .js-file-title.file-title.clearfix
-            = _("Contents of .gitlab-ci.yml")
-          - if Feature.enabled?(:monaco_ci)
-            .file-editor.code
-              .js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }<
-                %pre.editor-loading-content= params[:content]
-          - else
-            #ci-editor.ci-editor= @content
-        = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
-      .col-sm-12
-        .float-left.gl-mt-3
-          = submit_tag(_('Validate'), class: 'btn btn-success submit-yml')
-          - if Gitlab::Ci::Features.lint_creates_pipeline_with_dry_run?(@project)
-            = check_box_tag(:dry_run, 'true', params[:dry_run])
-            = label_tag(:dry_run, _('Simulate a pipeline created for the default branch'))
-            = link_to sprite_icon('question-o'), help_page_path('ci/lint', anchor: 'pipeline-simulation'), target: '_blank', rel: 'noopener noreferrer'
-        .float-right.prepend-top-10
-          = button_tag(_('Clear'), type: 'button', class: 'btn btn-default clear-yml')
+- if Feature.enabled?(:ci_lint_vue, @project)
+  #js-ci-lint{ data: { endpoint: project_ci_lint_path(@project) } }
 
-  .row.prepend-top-20
-    .col-sm-12
-      .results.project-ci-template
-        = render partial: 'create' if defined?(@result)
+- else
+  .project-ci-linter
+    = form_tag project_ci_lint_path(@project), method: :post, class: 'js-ci-lint-form' do
+      .row
+        .col-sm-12
+          .file-holder
+            .js-file-title.file-title.clearfix
+              = _("Contents of .gitlab-ci.yml")
+            - if Feature.enabled?(:monaco_ci)
+              .file-editor.code
+                .js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }<
+                  %pre.editor-loading-content= params[:content]
+            - else
+              #ci-editor.ci-editor= @content
+          = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
+        .col-sm-12
+          .float-left.gl-mt-3
+            = submit_tag(_('Validate'), class: 'btn btn-success submit-yml')
+            - if Gitlab::Ci::Features.lint_creates_pipeline_with_dry_run?(@project)
+              = check_box_tag(:dry_run, 'true', params[:dry_run])
+              = label_tag(:dry_run, _('Simulate a pipeline created for the default branch'))
+              = link_to sprite_icon('question-o'), help_page_path('ci/lint', anchor: 'pipeline-simulation'), target: '_blank', rel: 'noopener noreferrer'
+          .float-right.prepend-top-10
+            = button_tag(_('Clear'), type: 'button', class: 'btn btn-default clear-yml')
+
+    .row.prepend-top-20
+      .col-sm-12
+        .results.project-ci-template
+          = render partial: 'create' if defined?(@result)

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