Fix resolve button not showing for threads

**What happened?**
In [this MR][1], we wanted to hide the resolve button if
the user can't resolve some notes. Unfortunately, this
didn't take into account unresolvable notes like system
notes.

[1]: https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/32859

app/assets/javascripts/notes/components/discussion_actions.vue

@@ -36,10 +36,11 @@ export default {
     },
   },
   computed: {
+    resolvableNotes() {
+      return this.discussion.notes.filter(x => x.resolvable);
+    },
     userCanResolveDiscussion() {
-      return this.discussion.notes.every(
-        note => note.current_user && note.current_user.can_resolve,
-      );
+      return this.resolvableNotes.every(note => note.current_user && note.current_user.can_resolve);
     },
   },
 };

spec/frontend/notes/components/discussion_actions_spec.js

@@ -7,6 +7,18 @@ import ResolveDiscussionButton from '~/notes/components/discussion_resolve_butto
 import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
 import JumpToNextDiscussionButton from '~/notes/components/discussion_jump_to_next_button.vue';
 
+// NOTE: clone mock_data so that it is not accidentally mutated
+const createDiscussionMock = (props = {}) =>
+  Object.assign(JSON.parse(JSON.stringify(discussionMock)), props);
+const createNoteMock = (props = {}) =>
+  Object.assign(JSON.parse(JSON.stringify(discussionMock.notes[0])), props);
+const createResolvableNote = () =>
+  createNoteMock({ resolvable: true, current_user: { can_resolve: true } });
+const createUnresolvableNote = () =>
+  createNoteMock({ resolvable: false, current_user: { can_resolve: false } });
+const createUnallowedNote = () =>
+  createNoteMock({ resolvable: true, current_user: { can_resolve: false } });
+
 describe('DiscussionActions', () => {
   let wrapper;
   const createComponentFactory = (shallow = true) => props => {
@@ -66,13 +78,23 @@ describe('DiscussionActions', () => {
       expect(wrapper.find(JumpToNextDiscussionButton).exists()).toBe(false);
     });
 
-    it('does not renders discussion button for non-member', () => {
-      const discussion = JSON.parse(JSON.stringify(discussionMock));
-      discussion.notes[1].current_user.can_resolve = false;
-      createComponent({ discussion });
-
-      expect(wrapper.find(ResolveDiscussionButton).exists()).toBe(false);
-      expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(false);
+    describe.each`
+      desc                         | notes                                                 | shouldRender
+      ${'with no notes'}           | ${[]}                                                 | ${true}
+      ${'with resolvable notes'}   | ${[createResolvableNote(), createResolvableNote()]}   | ${true}
+      ${'with unresolvable notes'} | ${[createResolvableNote(), createUnresolvableNote()]} | ${true}
+      ${'with unallowed note'}     | ${[createResolvableNote(), createUnallowedNote()]}    | ${false}
+    `('$desc', ({ notes, shouldRender }) => {
+      beforeEach(() => {
+        createComponent({
+          discussion: createDiscussionMock({ notes }),
+        });
+      });
+
+      it(shouldRender ? 'renders resolve buttons' : 'does not render resolve buttons', () => {
+        expect(wrapper.find(ResolveDiscussionButton).exists()).toBe(shouldRender);
+        expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(shouldRender);
+      });
     });
   });