Merge branch...

Merge branch '333014-make-the-call-to-register-ci-schema-only-when-schema_linting-ff-is-on' into 'master'

Register CI schema only when `schema_linting` ff is on

See merge request gitlab-org/gitlab!63552

app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue

@@ -2,12 +2,14 @@
 import { EDITOR_READY_EVENT } from '~/editor/constants';
 import { CiSchemaExtension } from '~/editor/extensions/editor_ci_schema_ext';
 import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import getCommitSha from '../../graphql/queries/client/commit_sha.graphql';
 
 export default {
   components: {
     EditorLite,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: ['ciConfigPath', 'projectPath', 'projectNamespace'],
   inheritAttrs: false,
   data() {
@@ -25,6 +27,7 @@ export default {
       this.$emit('updateCiConfig', content);
     },
     registerCiSchema() {
+      if (this.glFeatures.schemaLinting) {
         const editorInstance = this.$refs.editor.getEditor();
 
         editorInstance.use(new CiSchemaExtension({ instance: editorInstance }));
@@ -33,6 +36,7 @@ export default {
           projectNamespace: this.projectNamespace,
           ref: this.commitSha,
         });
+      }
     },
   },
   readyEvent: EDITOR_READY_EVENT,

app/controllers/projects/ci/pipeline_editor_controller.rb

@@ -6,6 +6,7 @@ class Projects::Ci::PipelineEditorController < Projects::ApplicationController
     push_frontend_feature_flag(:pipeline_editor_empty_state_action, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:pipeline_editor_branch_switcher, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:pipeline_editor_drawer, @project, default_enabled: :yaml)
+    push_frontend_feature_flag(:schema_linting, @project, default_enabled: :yaml)
   end
 
   feature_category :pipeline_authoring

spec/frontend/pipeline_editor/components/editor/text_editor_spec.js

@@ -32,12 +32,13 @@ describe('Pipeline Editor | Text editor component', () => {
     },
   };
 
-  const createComponent = (opts = {}, mountFn = shallowMount) => {
+  const createComponent = (glFeatures = {}, mountFn = shallowMount) => {
     wrapper = mountFn(TextEditor, {
       provide: {
         projectPath: mockProjectPath,
         projectNamespace: mockProjectNamespace,
         ciConfigPath: mockCiConfigPath,
+        glFeatures,
       },
       attrs: {
         value: mockCiYml,
@@ -54,7 +55,6 @@ describe('Pipeline Editor | Text editor component', () => {
       stubs: {
         EditorLite: MockEditorLite,
       },
-      ...opts,
     });
   };
 
@@ -66,7 +66,6 @@ describe('Pipeline Editor | Text editor component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
 
     mockUse.mockClear();
     mockRegisterCiSchema.mockClear();
@@ -100,19 +99,18 @@ describe('Pipeline Editor | Text editor component', () => {
     });
   });
 
-  describe('register CI schema', () => {
-    beforeEach(async () => {
-      createComponent();
-
+  describe('CI schema', () => {
+    describe('when `schema_linting` feature flag is on', () => {
+      beforeEach(() => {
+        createComponent({ schemaLinting: true });
         // Since the editor will have already mounted, the event will have fired.
         // To ensure we properly test this, we clear the mock and re-remit the event.
         mockRegisterCiSchema.mockClear();
         mockUse.mockClear();
-
         findEditor().vm.$emit(EDITOR_READY_EVENT);
       });
 
-    it('configures editor with syntax highlight', async () => {
+      it('configures editor with syntax highlight', () => {
         expect(mockUse).toHaveBeenCalledTimes(1);
         expect(mockRegisterCiSchema).toHaveBeenCalledTimes(1);
         expect(mockRegisterCiSchema).toHaveBeenCalledWith({
@@ -122,4 +120,17 @@ describe('Pipeline Editor | Text editor component', () => {
         });
       });
     });
+
+    describe('when `schema_linting` feature flag is off', () => {
+      beforeEach(() => {
+        createComponent();
+        findEditor().vm.$emit(EDITOR_READY_EVENT);
+      });
+
+      it('does not call the register CI schema function', () => {
+        expect(mockUse).not.toHaveBeenCalled();
+        expect(mockRegisterCiSchema).not.toHaveBeenCalled();
+      });
+    });
+  });
 });