Add latest changes from gitlab-org/gitlab@master

7 files changed, 89 insertions, 111 deletions

diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 7bb1a1a1bfe..fcf37217902 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -1,13 +1,11 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
-import { createAlert } from '~/flash';
-import { __ } from '~/locale';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import OrderedLayout from '~/vue_shared/components/ordered_layout.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
-import { getLocationHash, doesHashExistInUrl } from '~/lib/utils/url_utility';
+import { getLocationHash } from '~/lib/utils/url_utility';
 import PlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
 import PlaceholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
 import SkeletonLoadingContainer from '~/vue_shared/components/notes/skeleton_note.vue';
@@ -57,11 +55,6 @@ export default {
       default: undefined,
       required: false,
     },
-    userData: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
     shouldShow: {
       type: Boolean,
       required: false,
@@ -90,16 +83,12 @@ export default {
       'commentsDisabled',
       'getNoteableData',
       'userCanReply',
-      'discussionTabCounter',
       'sortDirection',
       'timelineEnabled',
     ]),
     sortDirDesc() {
       return this.sortDirection === constants.DESC;
     },
-    discussionTabCounterText() {
-      return this.isLoading ? '' : this.discussionTabCounter;
-    },
     noteableType() {
       return this.noteableData.noteableType;
     },
@@ -147,11 +136,6 @@ export default {
         this.renderSkeleton = !this.shouldShow;
       });
     },
-    discussionTabCounterText(val) {
-      if (this.discussionsCount) {
-        this.discussionsCount.textContent = val;
-      }
-    },
     isAppReady: {
       handler(isReady) {
         if (!isReady) return;
@@ -162,20 +146,7 @@ export default {
       immediate: true,
     },
   },
-  created() {
-    this.discussionsCount = document.querySelector('.js-discussions-count');
-
-    this.setNotesData(this.notesData);
-    this.setNoteableData(this.noteableData);
-    this.setUserData(this.userData);
-    this.setTargetNoteHash(getLocationHash());
-    eventHub.$once('fetchNotesData', this.fetchNotes);
-  },
   mounted() {
-    if (this.shouldShow) {
-      this.fetchNotes();
-    }
-
     const { parentElement } = this.$el;
     if (parentElement && parentElement.classList.contains('js-vue-notes-event')) {
       parentElement.addEventListener('toggleAward', (event) => {
@@ -200,23 +171,16 @@ export default {
   },
   methods: {
     ...mapActions([
-      'setFetchingState',
-      'setLoadingState',
-      'fetchDiscussions',
-      'poll',
       'toggleAward',
-      'setNotesData',
-      'setNoteableData',
-      'setUserData',
       'setLastFetchedAt',
       'setTargetNoteHash',
       'toggleDiscussion',
-      'setNotesFetchedState',
       'expandDiscussion',
       'startTaskList',
       'convertToDiscussion',
       'stopPolling',
       'setConfidentiality',
+      'fetchNotes',
     ]),
     discussionIsIndividualNoteAndNotConverted(discussion) {
       return discussion.individual_note && !this.convertedDisscussionIds.includes(discussion.id);
@@ -228,37 +192,6 @@ export default {
         this.setTargetNoteHash(getLocationHash());
       }
     },
-    fetchNotes() {
-      if (this.isFetching) return null;
-
-      this.setFetchingState(true);
-
-      return this.fetchDiscussions(this.getFetchDiscussionsConfig())
-        .then(this.initPolling)
-        .then(() => {
-          this.setLoadingState(false);
-          this.setNotesFetchedState(true);
-          eventHub.$emit('fetchedNotesData');
-          this.setFetchingState(false);
-        })
-        .catch(() => {
-          this.setLoadingState(false);
-          this.setNotesFetchedState(true);
-          createAlert({
-            message: __('Something went wrong while fetching comments. Please try again.'),
-          });
-        });
-    },
-    initPolling() {
-      if (this.isPollingInitialized) {
-        return;
-      }
-
-      this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));
-
-      this.poll();
-      this.isPollingInitialized = true;
-    },
     checkLocationHash() {
       const hash = getLocationHash();
       const noteId = hash && hash.replace(/^note_/, '');
@@ -278,24 +211,6 @@ export default {
         .then(this.$nextTick)
         .then(() => eventHub.$emit('startReplying', discussionId));
     },
-    getFetchDiscussionsConfig() {
-      const defaultConfig = { path: this.getNotesDataByProp('discussionsPath') };
-
-      const currentFilter =
-        this.getNotesDataByProp('notesFilter') || constants.DISCUSSION_FILTERS_DEFAULT_VALUE;
-
-      if (
-        doesHashExistInUrl(constants.NOTE_UNDERSCORE) &&
-        currentFilter !== constants.DISCUSSION_FILTERS_DEFAULT_VALUE
-      ) {
-        return {
-          ...defaultConfig,
-          filter: constants.DISCUSSION_FILTERS_DEFAULT_VALUE,
-          persistFilter: false,
-        };
-      }
-      return defaultConfig;
-    },
   },
   systemNote: constants.SYSTEM_NOTE,
 };
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index defcb0533b7..95263e666b2 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import { getLocationHash } from '~/lib/utils/url_utility';
 import NotesApp from './components/notes_app.vue';
 import { store } from './stores';
 import { getNotesFilterData } from './utils/get_notes_filter_data';
@@ -13,6 +14,34 @@ export default () => {
   const notesFilterProps = getNotesFilterData(el);
   const showTimelineViewToggle = parseBoolean(el.dataset.showTimelineViewToggle);
 
+  const notesDataset = el.dataset;
+  const parsedUserData = JSON.parse(notesDataset.currentUserData);
+  const noteableData = JSON.parse(notesDataset.noteableData);
+  let currentUserData = {};
+
+  noteableData.noteableType = notesDataset.noteableType;
+  noteableData.targetType = notesDataset.targetType;
+  noteableData.discussion_locked = parseBoolean(noteableData.discussion_locked);
+
+  if (parsedUserData) {
+    currentUserData = {
+      id: parsedUserData.id,
+      name: parsedUserData.name,
+      username: parsedUserData.username,
+      avatar_url: parsedUserData.avatar_path || parsedUserData.avatar_url,
+      path: parsedUserData.path,
+      can_add_timeline_events: parseBoolean(notesDataset.canAddTimelineEvents),
+    };
+  }
+
+  const notesData = JSON.parse(notesDataset.notesData);
+
+  store.dispatch('setNotesData', notesData);
+  store.dispatch('setNoteableData', noteableData);
+  store.dispatch('setUserData', currentUserData);
+  store.dispatch('setTargetNoteHash', getLocationHash());
+  store.dispatch('fetchNotes');
+
   // eslint-disable-next-line no-new
   new Vue({
     el,
@@ -25,30 +54,6 @@ export default () => {
       showTimelineViewToggle,
     },
     data() {
-      const notesDataset = el.dataset;
-      const parsedUserData = JSON.parse(notesDataset.currentUserData);
-      const noteableData = JSON.parse(notesDataset.noteableData);
-      let currentUserData = {};
-
-      noteableData.noteableType = notesDataset.noteableType;
-      noteableData.targetType = notesDataset.targetType;
-      if (noteableData.discussion_locked === null) {
-        // discussion_locked has never been set for this issuable.
-        // set to `false` for safety.
-        noteableData.discussion_locked = false;
-      }
-
-      if (parsedUserData) {
-        currentUserData = {
-          id: parsedUserData.id,
-          name: parsedUserData.name,
-          username: parsedUserData.username,
-          avatar_url: parsedUserData.avatar_path || parsedUserData.avatar_url,
-          path: parsedUserData.path,
-          can_add_timeline_events: parseBoolean(notesDataset.canAddTimelineEvents),
-        };
-      }
-
       return {
         noteableData,
         currentUserData,
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 962006a7ff9..d290a8ccb84 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -114,6 +114,39 @@ export const fetchDiscussions = (
   });
 };
 
+export const fetchNotes = ({ dispatch, getters }) => {
+  if (getters.isFetching) return null;
+
+  dispatch('setFetchingState', true);
+
+  return dispatch('fetchDiscussions', getters.getFetchDiscussionsConfig)
+    .then(() => dispatch('initPolling'))
+    .then(() => {
+      dispatch('setLoadingState', false);
+      dispatch('setNotesFetchedState', true);
+      notesEventHub.$emit('fetchedNotesData');
+      dispatch('setFetchingState', false);
+    })
+    .catch(() => {
+      dispatch('setLoadingState', false);
+      dispatch('setNotesFetchedState', true);
+      createAlert({
+        message: __('Something went wrong while fetching comments. Please try again.'),
+      });
+    });
+};
+
+export const initPolling = ({ state, dispatch, getters, commit }) => {
+  if (state.isPollingInitialized) {
+    return;
+  }
+
+  dispatch('setLastFetchedAt', getters.getNotesDataByProp('lastFetchedAt'));
+
+  dispatch('poll');
+  commit(types.SET_IS_POLLING_INITIALIZED, true);
+};
+
 export const fetchDiscussionsBatch = ({ commit, dispatch }, { path, config, cursor, perPage }) => {
   const params = { ...config?.params, per_page: perPage };
 
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index 5ad7a811726..f6373f24b74 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -2,6 +2,7 @@ import { flattenDeep, clone } from 'lodash';
 import { match } from '~/diffs/utils/diff_file';
 import { badgeState } from '~/issuable/components/status_box.vue';
 import { isInMRPage } from '~/lib/utils/common_utils';
+import { doesHashExistInUrl } from '~/lib/utils/url_utility';
 import * as constants from '../constants';
 import { collapseSystemNotes } from './collapse_utils';
 
@@ -314,3 +315,22 @@ export const getSuggestionsFilePaths = (state) => () =>
 
     return acc;
   }, []);
+
+export const getFetchDiscussionsConfig = (state, getters) => {
+  const defaultConfig = { path: getters.getNotesDataByProp('discussionsPath') };
+
+  const currentFilter =
+    getters.getNotesDataByProp('notesFilter') || constants.DISCUSSION_FILTERS_DEFAULT_VALUE;
+
+  if (
+    doesHashExistInUrl(constants.NOTE_UNDERSCORE) &&
+    currentFilter !== constants.DISCUSSION_FILTERS_DEFAULT_VALUE
+  ) {
+    return {
+      ...defaultConfig,
+      filter: constants.DISCUSSION_FILTERS_DEFAULT_VALUE,
+      persistFilter: false,
+    };
+  }
+  return defaultConfig;
+};
diff --git a/app/assets/javascripts/notes/stores/modules/index.js b/app/assets/javascripts/notes/stores/modules/index.js
index 7ba1f470b05..81c4c42a49a 100644
--- a/app/assets/javascripts/notes/stores/modules/index.js
+++ b/app/assets/javascripts/notes/stores/modules/index.js
@@ -50,6 +50,7 @@ export default () => ({
     descriptionVersions: {},
     isTimelineEnabled: false,
     isFetching: false,
+    isPollingInitialized: false,
   },
   actions,
   getters,
diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js
index 42df6bc0980..bc1d5b5bba4 100644
--- a/app/assets/javascripts/notes/stores/mutation_types.js
+++ b/app/assets/javascripts/notes/stores/mutation_types.js
@@ -27,6 +27,7 @@ export const CLEAR_SUGGESTION_BATCH = 'CLEAR_SUGGESTION_BATCH';
 export const CONVERT_TO_DISCUSSION = 'CONVERT_TO_DISCUSSION';
 export const REMOVE_CONVERTED_DISCUSSION = 'REMOVE_CONVERTED_DISCUSSION';
 export const UPDATE_ASSIGNEES = 'UPDATE_ASSIGNEES';
+export const SET_IS_POLLING_INITIALIZED = 'SET_IS_POLLING_INITIALIZED';
 
 // DISCUSSION
 export const COLLAPSE_DISCUSSION = 'COLLAPSE_DISCUSSION';
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index 83c15c12eac..5d532b68f1b 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -428,4 +428,7 @@ export default {
   [types.SET_PROMOTE_COMMENT_TO_TIMELINE_PROGRESS](state, value) {
     state.isPromoteCommentToTimelineEventInProgress = value;
   },
+  [types.SET_IS_POLLING_INITIALIZED](state, value) {
+    state.isPollingInitialized = value;
+  },
 };