Merge branch '49161-disable-toggle-comments' into 'master'

Resolve "MR refactor: Disable toggle comments button when diff has no discussions"

Closes #49161

See merge request gitlab-org/gitlab-ce!20667

5 files changed, 74 insertions, 8 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 0441d9f9e42..d3ffbe0415a 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -50,7 +50,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('diffs', ['diffHasExpandedDiscussions']),
+    ...mapGetters('diffs', ['diffHasExpandedDiscussions', 'diffHasDiscussions']),
     hasExpandedDiscussions() {
       return this.diffHasExpandedDiscussions(this.diffFile);
     },
@@ -221,6 +221,7 @@ export default {
         v-if="diffFile.blob && diffFile.blob.readableText"
       >
         <button
+          :disabled="!diffHasDiscussions(diffFile)"
           :class="{ active: hasExpandedDiscussions }"
           :title="s__('MergeRequests|Toggle comments for this file')"
           class="js-btn-vue-toggle-comments btn"
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
index c7b9b1a16e6..fc1d15b8d54 100644
--- a/app/assets/javascripts/diffs/store/getters.js
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -48,6 +48,14 @@ export const diffHasExpandedDiscussions = (state, getters) => diff => {
 };
 
 /**
+ * Checks if the diff has any discussion
+ * @param {Boolean} diff
+ * @returns {Boolean}
+ */
+export const diffHasDiscussions = (state, getters) => diff =>
+  getters.getDiffFileDiscussions(diff).length > 0;
+
+/**
  * Returns an array with the discussions of the given diff
  * @param {Object} diff
  * @returns {Array}
diff --git a/changelogs/unreleased/49161-disable-toggle-comments.yml b/changelogs/unreleased/49161-disable-toggle-comments.yml
new file mode 100644
index 00000000000..5ec16191f07
--- /dev/null
+++ b/changelogs/unreleased/49161-disable-toggle-comments.yml
@@ -0,0 +1,5 @@
+---
+title: Disables toggle comments button if diff has no discussions
+merge_request:
+author:
+type: other
diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js
index 860a976e7cd..92b2004c4d7 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -11,7 +11,9 @@ const discussionFixture = 'merge_requests/diff_discussion.json';
 describe('diff_file_header', () => {
   let vm;
   let props;
+  const diffDiscussionMock = getJSONFixture(discussionFixture)[0];
   const Component = Vue.extend(DiffFileHeader);
+
   const store = new Vuex.Store({
     modules: {
       diffs: diffsModule,
@@ -20,7 +22,6 @@ describe('diff_file_header', () => {
   });
 
   beforeEach(() => {
-    const diffDiscussionMock = getJSONFixture(discussionFixture)[0];
     const diffFile = convertObjectPropsToCamelCase(diffDiscussionMock.diff_file, { deep: true });
     props = {
       diffFile,
@@ -409,7 +410,7 @@ describe('diff_file_header', () => {
     });
 
     describe('handles toggle discussions', () => {
-      it('dispatches toggleFileDiscussions when user clicks on toggle discussions button', () => {
+      it('renders a disabled button when diff has no discussions', () => {
         const propsCopy = Object.assign({}, props);
         propsCopy.diffFile.submodule = false;
         propsCopy.diffFile.blob = {
@@ -428,11 +429,44 @@ describe('diff_file_header', () => {
           store,
         });
 
-        spyOn(vm, 'toggleFileDiscussions');
-
-        vm.$el.querySelector('.js-btn-vue-toggle-comments').click();
-
-        expect(vm.toggleFileDiscussions).toHaveBeenCalled();
+        expect(
+          vm.$el.querySelector('.js-btn-vue-toggle-comments').getAttribute('disabled'),
+        ).toEqual('disabled');
+      });
+
+      describe('with discussions', () => {
+        it('dispatches toggleFileDiscussions when user clicks on toggle discussions button', () => {
+          const propsCopy = Object.assign({}, props);
+          propsCopy.diffFile.submodule = false;
+          propsCopy.diffFile.blob = {
+            id: '848ed9407c6730ff16edb3dd24485a0eea24292a',
+            path: 'lib/base.js',
+            name: 'base.js',
+            mode: '100644',
+            readableText: true,
+            icon: 'file-text-o',
+          };
+          propsCopy.addMergeRequestButtons = true;
+          propsCopy.diffFile.deletedFile = true;
+
+          const discussionGetter = () => [diffDiscussionMock];
+          notesModule.getters.discussions = discussionGetter;
+          vm = mountComponentWithStore(Component, {
+            props: propsCopy,
+            store: new Vuex.Store({
+              modules: {
+                diffs: diffsModule,
+                notes: notesModule,
+              },
+            }),
+          });
+
+          spyOn(vm, 'toggleFileDiscussions');
+
+          vm.$el.querySelector('.js-btn-vue-toggle-comments').click();
+
+          expect(vm.toggleFileDiscussions).toHaveBeenCalled();
+        });
       });
     });
   });
diff --git a/spec/javascripts/diffs/store/getters_spec.js b/spec/javascripts/diffs/store/getters_spec.js
index f5628a01a55..987c4dbcb26 100644
--- a/spec/javascripts/diffs/store/getters_spec.js
+++ b/spec/javascripts/diffs/store/getters_spec.js
@@ -167,6 +167,24 @@ describe('Diffs Module Getters', () => {
     });
   });
 
+  describe('diffHasDiscussions', () => {
+    it('returns true when getDiffFileDiscussions returns discussions', () => {
+      expect(
+        getters.diffHasDiscussions(localState, {
+          getDiffFileDiscussions: () => [discussionMock],
+        })(diffFileMock),
+      ).toEqual(true);
+    });
+
+    it('returns false when getDiffFileDiscussions returns no discussions', () => {
+      expect(
+        getters.diffHasDiscussions(localState, {
+          getDiffFileDiscussions: () => [],
+        })(diffFileMock),
+      ).toEqual(false);
+    });
+  });
+
   describe('getDiffFileDiscussions', () => {
     it('returns an array with discussions when fileHash matches and the discussion belongs to a diff', () => {
       discussionMock.diff_file.file_hash = diffFileMock.fileHash;