Merge branch '33183-integrate-with-feature-flag' into 'master'

Integrate the frontend with the `single_mr_diff_view` feature flag

See merge request gitlab-org/gitlab!21366

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

@@ -177,6 +177,7 @@ export default {
       projectPath: this.projectPath,
       dismissEndpoint: this.dismissEndpoint,
       showSuggestPopover: this.showSuggestPopover,
+      useSingleDiffStyle: this.glFeatures.singleMrDiffView,
     });
 
     if (this.shouldShow) {

app/assets/javascripts/diffs/store/actions.js

@@ -46,6 +46,7 @@ export const setBaseConfig = ({ commit }, options) => {
     projectPath,
     dismissEndpoint,
     showSuggestPopover,
+    useSingleDiffStyle,
   } = options;
   commit(types.SET_BASE_CONFIG, {
     endpoint,
@@ -54,11 +55,15 @@ export const setBaseConfig = ({ commit }, options) => {
     projectPath,
     dismissEndpoint,
     showSuggestPopover,
+    useSingleDiffStyle,
   });
 };
 
 export const fetchDiffFiles = ({ state, commit }) => {
   const worker = new TreeWorker();
+  const urlParams = {
+    w: state.showWhitespace ? '0' : '1',
+  };
 
   commit(types.SET_LOADING, true);
 
@@ -69,9 +74,10 @@ export const fetchDiffFiles = ({ state, commit }) => {
   });
 
   return axios
-    .get(mergeUrlParams({ w: state.showWhitespace ? '0' : '1' }, state.endpoint))
+    .get(mergeUrlParams(urlParams, state.endpoint))
     .then(res => {
       commit(types.SET_LOADING, false);
+
       commit(types.SET_MERGE_REQUEST_DIFFS, res.data.merge_request_diffs || []);
       commit(types.SET_DIFF_DATA, res.data);
 

app/assets/javascripts/diffs/store/modules/diff_state.js

@@ -31,4 +31,5 @@ export default () => ({
   fileFinderVisible: false,
   dismissEndpoint: '',
   showSuggestPopover: true,
+  useSingleDiffStyle: false,
 });

app/assets/javascripts/diffs/store/mutations.js

@@ -19,6 +19,7 @@ export default {
       projectPath,
       dismissEndpoint,
       showSuggestPopover,
+      useSingleDiffStyle,
     } = options;
     Object.assign(state, {
       endpoint,
@@ -27,6 +28,7 @@ export default {
       projectPath,
       dismissEndpoint,
       showSuggestPopover,
+      useSingleDiffStyle,
     });
   },
 

app/controllers/projects/merge_requests_controller.rb

@@ -20,6 +20,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
   before_action :check_user_can_push_to_source_branch!, only: [:rebase]
   before_action only: [:show] do
     push_frontend_feature_flag(:diffs_batch_load, @project)
+    push_frontend_feature_flag(:single_mr_diff_view, @project)
   end
 
   before_action do

spec/javascripts/diffs/components/app_spec.js

@@ -41,6 +41,7 @@ describe('diffs/components/app', () => {
         changesEmptyStateIllustration: '',
         dismissEndpoint: '',
         showSuggestPopover: true,
+        useSingleDiffStyle: false,
         ...props,
       },
       store,

spec/javascripts/diffs/store/actions_spec.js

@@ -75,6 +75,7 @@ describe('DiffsStoreActions', () => {
       const projectPath = '/root/project';
       const dismissEndpoint = '/-/user_callouts';
       const showSuggestPopover = false;
+      const useSingleDiffStyle = false;
 
       testAction(
         setBaseConfig,
@@ -85,6 +86,7 @@ describe('DiffsStoreActions', () => {
           projectPath,
           dismissEndpoint,
           showSuggestPopover,
+          useSingleDiffStyle,
         },
         {
           endpoint: '',
@@ -93,6 +95,7 @@ describe('DiffsStoreActions', () => {
           projectPath: '',
           dismissEndpoint: '',
           showSuggestPopover: true,
+          useSingleDiffStyle: true,
         },
         [
           {
@@ -104,6 +107,7 @@ describe('DiffsStoreActions', () => {
               projectPath,
               dismissEndpoint,
               showSuggestPopover,
+              useSingleDiffStyle,
             },
           },
         ],

spec/javascripts/diffs/store/mutations_spec.js

@@ -10,11 +10,13 @@ describe('DiffsStoreMutations', () => {
       const state = {};
       const endpoint = '/diffs/endpoint';
       const projectPath = '/root/project';
+      const useSingleDiffStyle = false;
 
-      mutations[types.SET_BASE_CONFIG](state, { endpoint, projectPath });
+      mutations[types.SET_BASE_CONFIG](state, { endpoint, projectPath, useSingleDiffStyle });
 
       expect(state.endpoint).toEqual(endpoint);
       expect(state.projectPath).toEqual(projectPath);
+      expect(state.useSingleDiffStyle).toEqual(useSingleDiffStyle);
     });
   });