Merge branch 'ph/fixDiffsMultipleUniqueUserCalls' into 'master'

Fixes a bug where multiple tracking calls would happen

See merge request gitlab-org/gitlab!66604

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

@@ -60,14 +60,14 @@ export default {
         <gl-button
           :class="{ selected: !renderTreeList }"
           class="gl-w-half js-list-view"
-          @click="setRenderTreeList(false)"
+          @click="setRenderTreeList({ renderTreeList: false })"
         >
           {{ __('List view') }}
         </gl-button>
         <gl-button
           :class="{ selected: renderTreeList }"
           class="gl-w-half js-tree-view"
-          @click="setRenderTreeList(true)"
+          @click="setRenderTreeList({ renderTreeList: true })"
         >
           {{ __('Tree view') }}
         </gl-button>

app/assets/javascripts/diffs/index.js

@@ -93,7 +93,7 @@ export default function initDiffsApp(store) {
       const treeListStored = localStorage.getItem(TREE_LIST_STORAGE_KEY);
       const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true;
 
-      this.setRenderTreeList(renderTreeList);
+      this.setRenderTreeList({ renderTreeList, trackClick: false });
 
       // NOTE: A "true" or "checked" value for `showWhitespace` is '0' not '1'.
       // Check for cookie and save that setting for future use.
@@ -104,6 +104,7 @@ export default function initDiffsApp(store) {
         this.setShowWhitespace({
           url: this.endpointUpdateUser,
           showWhitespace: hideWhitespace !== '1',
+          trackClick: false,
         });
         Cookies.remove(DIFF_WHITESPACE_COOKIE_NAME);
       } else {
@@ -111,6 +112,7 @@ export default function initDiffsApp(store) {
         this.setShowWhitespace({
           showWhitespace: this.showWhitespaceDefault,
           updateDatabase: false,
+          trackClick: false,
         });
       }
     },

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

@@ -560,12 +560,12 @@ export const closeDiffFileCommentForm = ({ commit }, fileHash) => {
   commit(types.CLOSE_DIFF_FILE_COMMENT_FORM, fileHash);
 };
 
-export const setRenderTreeList = ({ commit }, renderTreeList) => {
+export const setRenderTreeList = ({ commit }, { renderTreeList, trackClick = true }) => {
   commit(types.SET_RENDER_TREE_LIST, renderTreeList);
 
   localStorage.setItem(TREE_LIST_STORAGE_KEY, renderTreeList);
 
-  if (window.gon?.features?.diffSettingsUsageData) {
+  if (window.gon?.features?.diffSettingsUsageData && trackClick) {
     api.trackRedisHllUserEvent(TRACKING_CLICK_FILE_BROWSER_SETTING);
 
     if (renderTreeList) {
@@ -578,7 +578,7 @@ export const setRenderTreeList = ({ commit }, renderTreeList) => {
 
 export const setShowWhitespace = async (
   { state, commit },
-  { url, showWhitespace, updateDatabase = true },
+  { url, showWhitespace, updateDatabase = true, trackClick = true },
 ) => {
   if (updateDatabase && Boolean(window.gon?.current_user_id)) {
     await axios.put(url || state.endpointUpdateUser, { show_whitespace_in_diffs: showWhitespace });
@@ -587,7 +587,7 @@ export const setShowWhitespace = async (
   commit(types.SET_SHOW_WHITESPACE, showWhitespace);
   notesEventHub.$emit('refetchDiffData');
 
-  if (window.gon?.features?.diffSettingsUsageData) {
+  if (window.gon?.features?.diffSettingsUsageData && trackClick) {
     api.trackRedisHllUserEvent(TRACKING_CLICK_WHITESPACE_SETTING);
 
     if (showWhitespace) {

spec/frontend/diffs/components/settings_dropdown_spec.js

@@ -48,13 +48,17 @@ describe('Diff settings dropdown component', () => {
     it('list view button dispatches setRenderTreeList with false', () => {
       wrapper.find('.js-list-view').trigger('click');
 
-      expect(store.dispatch).toHaveBeenCalledWith('diffs/setRenderTreeList', false);
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/setRenderTreeList', {
+        renderTreeList: false,
+      });
     });
 
     it('tree view button dispatches setRenderTreeList with true', () => {
       wrapper.find('.js-tree-view').trigger('click');
 
-      expect(store.dispatch).toHaveBeenCalledWith('diffs/setRenderTreeList', true);
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/setRenderTreeList', {
+        renderTreeList: true,
+      });
     });
 
     it('sets list button as selected when renderTreeList is false', () => {

spec/frontend/diffs/store/actions_spec.js

@@ -1000,7 +1000,7 @@ describe('DiffsStoreActions', () => {
     it('commits SET_RENDER_TREE_LIST', (done) => {
       testAction(
         setRenderTreeList,
-        true,
+        { renderTreeList: true },
         {},
         [{ type: types.SET_RENDER_TREE_LIST, payload: true }],
         [],
@@ -1009,7 +1009,7 @@ describe('DiffsStoreActions', () => {
     });
 
     it('sets localStorage', () => {
-      setRenderTreeList({ commit() {} }, true);
+      setRenderTreeList({ commit() {} }, { renderTreeList: true });
 
       expect(localStorage.setItem).toHaveBeenCalledWith('mr_diff_tree_list', true);
     });