Allow multiple descriptionVersions

Also updated naming

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

@@ -515,7 +515,7 @@ export const removeConvertedDiscussion = ({ commit }, noteId) =>
 export const setCurrentDiscussionId = ({ commit }, discussionId) =>
   commit(types.SET_CURRENT_DISCUSSION_ID, discussionId);
 
-export const fetchDescriptionVersion = ({ dispatch }, { endpoint, startingVersion }) => {
+export const fetchDescriptionVersion = ({ dispatch }, { endpoint, startingVersion, versionId }) => {
   let requestUrl = endpoint;
 
   if (startingVersion) {
@@ -526,7 +526,7 @@ export const fetchDescriptionVersion = ({ dispatch }, { endpoint, startingVersio
   return axios
     .get(requestUrl)
     .then(res => {
-      dispatch('receiveDescriptionVersion', res.data);
+      dispatch('receiveDescriptionVersion', { descriptionVersion: res.data, versionId });
     })
     .catch(error => {
       dispatch('receiveDescriptionVersionError', error);

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

@@ -28,7 +28,7 @@ export const getUserData = state => state.userData || {};
 
 export const getUserDataByProp = state => prop => state.userData && state.userData[prop];
 
-export const descriptionVersion = state => state.descriptionVersion;
+export const descriptionVersions = state => state.descriptionVersions;
 
 export const notesById = state =>
   state.discussions.reduce((acc, note) => {

app/assets/javascripts/notes/stores/modules/index.js

@@ -28,7 +28,7 @@ export default () => ({
     commentsDisabled: false,
     resolvableDiscussionsCount: 0,
     unresolvedDiscussionsCount: 0,
-    descriptionVersion: null,
+    descriptionVersions: {},
   },
   actions,
   getters,

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

@@ -288,9 +288,9 @@ export default {
   [types.REQUEST_DESCRIPTION_VERSION](state) {
     state.isLoadingDescriptionVersion = true;
   },
-  [types.RECEIVE_DESCRIPTION_VERSION](state, descriptionVersion) {
-    state.isLoadingDescriptionVersion = false;
-    state.descriptionVersion = descriptionVersion;
+  [types.RECEIVE_DESCRIPTION_VERSION](state, { descriptionVersion, versionId }) {
+    const descriptionVersions = { ...state.descriptionVersions, [versionId]: descriptionVersion };
+    Object.assign(state, { descriptionVersions, isLoadingDescriptionVersion: false });
   },
   [types.RECEIVE_DESCRIPTION_VERSION_ERROR](state) {
     state.isLoadingDescriptionVersion = false;

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -54,7 +54,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['targetNoteHash', 'descriptionVersion']),
+    ...mapGetters(['targetNoteHash', 'descriptionVersions']),
     ...mapState(['isLoadingDescriptionVersion']),
     noteAnchorId() {
       return `note_${this.note.id}`;
@@ -81,6 +81,9 @@ export default {
           .children().length > MAX_VISIBLE_COMMIT_LIST_COUNT
       );
     },
+    descriptionVersion() {
+      return this.descriptionVersions[this.note.description_version_id];
+    },
   },
   mounted() {
     initMRPopovers(this.$el.querySelectorAll('.gfm-merge_request'));
@@ -104,7 +107,11 @@ export default {
           <span v-html="actionTextHtml"></span>
           <template v-if="canSeeDescriptionVersion" slot="extra-controls">
             &middot;
-            <button type="button" class="btn-blank btn-link" @click="toggleDescriptionVersion">
+            <button
+              type="button"
+              class="btn-blank btn-link"
+              @click="toggleDescriptionVersion(note.description_version_id)"
+            >
               {{ __('Compare with previous version') }}
               <icon :name="descriptionVersionToggleIcon" :size="12" class="append-left-5" />
             </button>

ee/app/assets/javascripts/notes/mixins/description_version_history.js

@@ -25,15 +25,16 @@ export default {
   methods: {
     toggleDescriptionVersion() {
       this.isDescriptionVersionExpanded = !this.isDescriptionVersionExpanded;
+      const versionId = this.note.description_version_id;
 
-      if (this.descriptionVersion) {
+      if (this.descriptionVersions?.[versionId]) {
         return false;
       }
 
       const endpoint = this.note.description_diff_path;
       const startingVersion = this.note.start_description_version_id;
 
-      return this.fetchDescriptionVersion({ endpoint, startingVersion });
+      return this.fetchDescriptionVersion({ endpoint, startingVersion, versionId });
     },
     deleteDescriptionVersion() {
       const endpoint = this.note.delete_description_version_path;