Initialize discussion filter after notes app

Also sets default selectedValue for discussion filter when not logged in

5 files changed, 49 insertions, 11 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
index 31164f74201..47951591e82 100644
--- a/app/assets/javascripts/notes/components/discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter.vue
@@ -22,7 +22,7 @@ export default {
     },
     selectedValue: {
       type: Number,
-      default: null,
+      default: DISCUSSION_FILTERS_DEFAULT_VALUE,
       required: false,
     },
   },
diff --git a/app/assets/javascripts/notes/discussion_filters.js b/app/assets/javascripts/notes/discussion_filters.js
index 5c5f38a3fb0..cdf9a46c5aa 100644
--- a/app/assets/javascripts/notes/discussion_filters.js
+++ b/app/assets/javascripts/notes/discussion_filters.js
@@ -6,12 +6,16 @@ export default store => {
 
   if (discussionFilterEl) {
     const { defaultFilter, notesFilters } = discussionFilterEl.dataset;
-    const selectedValue = defaultFilter ? parseInt(defaultFilter, 10) : null;
     const filterValues = notesFilters ? JSON.parse(notesFilters) : {};
     const filters = Object.keys(filterValues).map(entry => ({
       title: entry,
       value: filterValues[entry],
     }));
+    const props = { filters };
+
+    if (defaultFilter) {
+      props.selectedValue = parseInt(defaultFilter, 10);
+    }
 
     return new Vue({
       el: discussionFilterEl,
@@ -21,12 +25,7 @@ export default store => {
       },
       store,
       render(createElement) {
-        return createElement('discussion-filter', {
-          props: {
-            filters,
-            selectedValue,
-          },
-        });
+        return createElement('discussion-filter', { props });
       },
     });
   }
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index 4883266dae5..30372103590 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -6,9 +6,8 @@ import createStore from './stores';
 document.addEventListener('DOMContentLoaded', () => {
   const store = createStore();
 
-  initDiscussionFilters(store);
-
-  return new Vue({
+  // eslint-disable-next-line no-new
+  new Vue({
     el: '#js-vue-notes',
     components: {
       notesApp,
@@ -49,4 +48,6 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     },
   });
+
+  initDiscussionFilters(store);
 });
diff --git a/changelogs/unreleased/58883-fix-fetching-comments.yml b/changelogs/unreleased/58883-fix-fetching-comments.yml
new file mode 100644
index 00000000000..14c0f1687f2
--- /dev/null
+++ b/changelogs/unreleased/58883-fix-fetching-comments.yml
@@ -0,0 +1,5 @@
+---
+title: Fix error shown when loading links to specific comments
+merge_request: 26092
+author:
+type: fixed
diff --git a/spec/features/user_opens_link_to_comment.rb b/spec/features/user_opens_link_to_comment.rb
new file mode 100644
index 00000000000..f1e07e55799
--- /dev/null
+++ b/spec/features/user_opens_link_to_comment.rb
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'User opens link to comment', :js do
+  let(:project) { create(:project, :public) }
+  let(:note) { create(:note_on_issue, project: project) }
+
+  context 'authenticated user' do
+    let(:user) { create(:user) }
+
+    before do
+      sign_in(user)
+    end
+
+    it 'switches to all activity and does not show error message' do
+      create(:user_preference, user: user, issue_notes_filter: UserPreference::NOTES_FILTERS[:only_activity])
+
+      visit Gitlab::UrlBuilder.build(note)
+
+      expect(page.find('#discussion-filter-dropdown')).to have_content('Show all activity')
+      expect(page).not_to have_content('Something went wrong while fetching comments')
+    end
+  end
+
+  context 'anonymous user' do
+    it 'does not show error message' do
+      visit Gitlab::UrlBuilder.build(note)
+
+      expect(page).not_to have_content('Something went wrong while fetching comments')
+    end
+  end
+end