Hide code quality annotation space when feature flag is disabled

app/assets/javascripts/diffs/components/diff_view.vue

@@ -3,6 +3,7 @@ import { mapGetters, mapState, mapActions } from 'vuex';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DiffCommentCell from './diff_comment_cell.vue';
 import DiffExpansionCell from './diff_expansion_cell.vue';
 import DiffRow from './diff_row.vue';
@@ -14,7 +15,7 @@ export default {
     DiffCommentCell,
     DraftNote,
   },
-  mixins: [draftCommentsMixin],
+  mixins: [draftCommentsMixin, glFeatureFlagsMixin()],
   props: {
     diffFile: {
       type: Object,
@@ -58,7 +59,10 @@ export default {
       );
     },
     hasCodequalityChanges() {
-      return this.codequalityDiff?.files?.[this.diffFile.file_path]?.length > 0;
+      return (
+        this.glFeatures.codequalityMrDiffAnnotations &&
+        this.codequalityDiff?.files?.[this.diffFile.file_path]?.length > 0
+      );
     },
   },
   methods: {

ee/spec/frontend/diffs/components/diff_view_spec.js

@@ -8,7 +8,7 @@ import createDiffsStore from '~/diffs/store/modules';
 
 const getReadableFile = () => JSON.parse(JSON.stringify(diffFileMockDataReadable));
 
-function createComponent({ withCodequality = true }) {
+function createComponent({ withCodequality = true, provide = {} }) {
   const diffFile = getReadableFile();
   const localVue = createLocalVue();
 
@@ -44,6 +44,7 @@ function createComponent({ withCodequality = true }) {
       diffFile,
       diffLines: [],
     },
+    provide,
   });
 
   return {
@@ -60,9 +61,12 @@ describe('EE DiffView', () => {
     wrapper.destroy();
   });
 
-  describe('when there is diff data for the file', () => {
+  describe('when there is diff data for the file and the feature flag is enabled', () => {
     beforeEach(() => {
-      ({ wrapper } = createComponent({ withCodequality: true }));
+      ({ wrapper } = createComponent({
+        withCodequality: true,
+        provide: { glFeatures: { codequalityMrDiffAnnotations: true } },
+      }));
     });
 
     it('has the with-codequality class', () => {
@@ -70,6 +74,19 @@ describe('EE DiffView', () => {
     });
   });
 
+  describe('when there is diff data for the file and the feature flag is disabled', () => {
+    beforeEach(() => {
+      ({ wrapper } = createComponent({
+        withCodequality: true,
+        provide: { glFeatures: { codequalityMrDiffAnnotations: false } },
+      }));
+    });
+
+    it('does not have the with-codequality class', () => {
+      expect(wrapper.classes('with-codequality')).toBe(false);
+    });
+  });
+
   describe('when there is no diff data for the file', () => {
     beforeEach(() => {
       ({ wrapper } = createComponent({ withCodequality: false }));