Fixes toggle discussion button not expanding collapsed discussions

Discussions were being toggled by jquery DOM querying them and toggling
visibility but in vue, only the open discussions will be in the DOM
Fix includes:
 - Adds a getter to the store to get the expanded discussions
 - Adds an action to collapse a discussion
 - When the user clicks the button, all data needed is now accessible
   through a getter and we can dispatch an action to toggle the discussion
   within the state, instead of showing/hiding with jQuery
 - Removes hardcoded properties

Resolves #48237

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

 <script>
 import _ from 'underscore';
+import { mapActions, mapGetters } from 'vuex';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -54,6 +55,10 @@ export default {
     };
   },
   computed: {
+    ...mapGetters('diffs', ['diffHasExpandedDiscussions']),
+    hasExpandedDiscussions() {
+      return this.diffHasExpandedDiscussions(this.diffFile);
+    },
     icon() {
       if (this.diffFile.submodule) {
         return 'archive';
@@ -88,9 +93,6 @@ export default {
     collapseIcon() {
       return this.expanded ? 'chevron-down' : 'chevron-right';
     },
-    isDiscussionsExpanded() {
-      return this.discussionsExpanded && this.expanded;
-    },
     viewFileButtonText() {
       const truncatedContentSha = _.escape(truncateSha(this.diffFile.contentSha));
       return sprintf(
@@ -113,6 +115,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions('diffs', ['toggleFileDiscussions']),
     handleToggle(e, checkTarget) {
       if (
         !checkTarget ||
@@ -125,6 +128,9 @@ export default {
     showForkMessage() {
       this.$emit('showForkMessage');
     },
+    handleToggleDiscussions(){
+      this.toggleFileDiscussions(this.diffFile);
+    },
   },
 };
 </script>
@@ -216,9 +222,10 @@ export default {
         v-if="diffFile.blob && diffFile.blob.readableText"
       >
         <button
-          :class="{ active: isDiscussionsExpanded }"
+          :class="{ active: hasExpandedDiscussions }"
           :title="s__('MergeRequests|Toggle comments for this file')"
-          class="btn js-toggle-diff-comments"
+          @click="handleToggleDiscussions"
+          class="btn"
           type="button"
         >
           <icon name="comment" />

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

@@ -82,6 +82,36 @@ export const expandAllFiles = ({ commit }) => {
   commit(types.EXPAND_ALL_FILES);
 };
 
+/**
+ * Toggles the file discussions after user clicked on the toggle discussions button.
+ *
+ * Gets the discussions for the provided diff.
+ *
+ * If all discussions are expanded, it will collapse all of them
+ * If all discussions are collapsed, it will expand all of them
+ * If some discussions are open and others closed, it will expand the closed ones.
+ *
+ * @param {Object} diff
+ */
+export const toggleFileDiscussions = ({ getters, dispatch }, diff) => {
+  const discussions = getters.getDiffFileDiscussions(diff);
+
+  const shouldCloseAll = getters.diffHasAllExpandedDiscussions(diff);
+  const shouldExpandAll = getters.diffHasAllCollpasedDiscussions(diff);
+
+  discussions.forEach(discussion => {
+    const data = { discussionId: discussion.id };
+
+    if (shouldCloseAll) {
+      dispatch('collapseDiscussion', data, { root: true });
+    } else if (shouldExpandAll) {
+      dispatch('expandDiscussion', data, { root: true });
+    } else if (!shouldCloseAll && !shouldExpandAll && !discussion.expanded) {
+      dispatch('expandDiscussion', data, { root: true });
+    }
+  });
+};
+
 export default {
   setBaseConfig,
   fetchDiffFiles,
@@ -92,4 +122,5 @@ export default {
   loadMoreLines,
   loadCollapsedDiff,
   expandAllFiles,
+  toggleFileDiscussions,
 };

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

+import _ from 'underscore';
 import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '../constants';
 
 export const isParallelView = state => state.diffViewType === PARALLEL_DIFF_VIEW_TYPE;
@@ -8,5 +9,38 @@ export const areAllFilesCollapsed = state => state.diffFiles.every(file => file.
 
 export const commitId = state => (state.commit && state.commit.id ? state.commit.id : null);
 
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
+/**
+ * Checks if the diff has all discussions expanded
+ * @param {Object} diff
+ * @returns {Boolean}
+ */
+export const diffHasAllExpandedDiscussions = (state, getters) => diff => {
+  const discussions = getters.getDiffFileDiscussions(diff);
+
+  return (discussions.length && discussions.every(discussion => discussion.expanded)) || false;
+};
+
+/**
+ * Checks if the diff has all discussions collpased
+ * @param {Object} diff
+ * @returns {Boolean}
+ */
+export const diffHasAllCollpasedDiscussions = (state, getters) => diff => {
+  const discussions = getters.getDiffFileDiscussions(diff);
+
+  return (discussions.length && discussions.every(discussion => !discussion.expanded)) || false;
+};
+
+/**
+ * Returns an array with the discussions of the given diff
+ * @param {Object} diff
+ * @returns {Array}
+ */
+export const getDiffFileDiscussions = (state, getters, rootState, rootGetters) => diff =>
+  rootGetters.discussions.filter(
+    discussion =>
+      discussion.diff_discussion && _.isEqual(discussion.diff_file.file_hash, diff.fileHash),
+  ) || [];
+
+// prevent babel-plugin-rewire from generating an invalid default during karma∂ tests
 export default () => {};

app/assets/javascripts/notes/stores/actions.js

@@ -15,6 +15,8 @@ let eTagPoll;
 
 export const expandDiscussion = ({ commit }, data) => commit(types.EXPAND_DISCUSSION, data);
 
+export const collapseDiscussion = ({ commit }, data) => commit(types.COLLAPSE_DISCUSSION, data);
+
 export const setNotesData = ({ commit }, data) => commit(types.SET_NOTES_DATA, data);
 
 export const setNoteableData = ({ commit }, data) => commit(types.SET_NOTEABLE_DATA, data);

app/assets/javascripts/notes/stores/mutation_types.js

@@ -17,6 +17,10 @@ export const UPDATE_DISCUSSION = 'UPDATE_DISCUSSION';
 export const SET_DISCUSSION_DIFF_LINES = 'SET_DISCUSSION_DIFF_LINES';
 export const SET_NOTES_FETCHED_STATE = 'SET_NOTES_FETCHED_STATE';
 
+// DISCUSSION
+
+export const COLLAPSE_DISCUSSION = 'COLLAPSE_DISCUSSION';
+
 // Issue
 export const CLOSE_ISSUE = 'CLOSE_ISSUE';
 export const REOPEN_ISSUE = 'REOPEN_ISSUE';

app/assets/javascripts/notes/stores/mutations.js

@@ -58,6 +58,11 @@ export default {
     discussion.expanded = true;
   },
 
+  [types.COLLAPSE_DISCUSSION](state, { discussionId }) {
+    const discussion = utils.findNoteObjectById(state.discussions, discussionId);
+    discussion.expanded = false;
+  },
+
   [types.REMOVE_PLACEHOLDER_NOTES](state) {
     const { discussions } = state;
 

changelogs/unreleased/48237-toggle-file-comments.yml

+---
+title: Fixes toggle discussion button not expanding collapsed discussions
+merge_request:
+author:
+type: fixed