Merge branch '30281-report-abusive-content-from-an-issue-or-merge-request' into 'master'

Resolve "Report abusive content from an issue or merge request"

Closes #30281

See merge request !11786

3 files changed, 348 insertions, 20 deletions

diff --git a/spec/javascripts/close_reopen_report_toggle_spec.js b/spec/javascripts/close_reopen_report_toggle_spec.js
new file mode 100644
index 00000000000..925e959c85a
--- /dev/null
+++ b/spec/javascripts/close_reopen_report_toggle_spec.js
@@ -0,0 +1,270 @@
+import CloseReopenReportToggle from '~/close_reopen_report_toggle';
+import DropLab from '~/droplab/drop_lab';
+
+describe('CloseReopenReportToggle', () => {
+  describe('class constructor', () => {
+    const dropdownTrigger = {};
+    const dropdownList = {};
+    const button = {};
+    let commentTypeToggle;
+
+    beforeEach(function () {
+      commentTypeToggle = new CloseReopenReportToggle({
+        dropdownTrigger,
+        dropdownList,
+        button,
+      });
+    });
+
+    it('sets .dropdownTrigger', function () {
+      expect(commentTypeToggle.dropdownTrigger).toBe(dropdownTrigger);
+    });
+
+    it('sets .dropdownList', function () {
+      expect(commentTypeToggle.dropdownList).toBe(dropdownList);
+    });
+
+    it('sets .button', function () {
+      expect(commentTypeToggle.button).toBe(button);
+    });
+  });
+
+  describe('initDroplab', () => {
+    let closeReopenReportToggle;
+    const dropdownList = jasmine.createSpyObj('dropdownList', ['querySelector']);
+    const dropdownTrigger = {};
+    const button = {};
+    const reopenItem = {};
+    const closeItem = {};
+    const config = {};
+
+    beforeEach(() => {
+      spyOn(DropLab.prototype, 'init');
+      dropdownList.querySelector.and.returnValues(reopenItem, closeItem);
+
+      closeReopenReportToggle = new CloseReopenReportToggle({
+        dropdownTrigger,
+        dropdownList,
+        button,
+      });
+
+      spyOn(closeReopenReportToggle, 'setConfig').and.returnValue(config);
+
+      closeReopenReportToggle.initDroplab();
+    });
+
+    it('sets .reopenItem and .closeItem', () => {
+      expect(dropdownList.querySelector).toHaveBeenCalledWith('.reopen-item');
+      expect(dropdownList.querySelector).toHaveBeenCalledWith('.close-item');
+      expect(closeReopenReportToggle.reopenItem).toBe(reopenItem);
+      expect(closeReopenReportToggle.closeItem).toBe(closeItem);
+    });
+
+    it('sets .droplab', () => {
+      expect(closeReopenReportToggle.droplab).toEqual(jasmine.any(Object));
+    });
+
+    it('calls .setConfig', () => {
+      expect(closeReopenReportToggle.setConfig).toHaveBeenCalled();
+    });
+
+    it('calls droplab.init', () => {
+      expect(DropLab.prototype.init).toHaveBeenCalledWith(
+        dropdownTrigger,
+        dropdownList,
+        jasmine.any(Array),
+        config,
+      );
+    });
+  });
+
+  describe('updateButton', () => {
+    let closeReopenReportToggle;
+    const dropdownList = {};
+    const dropdownTrigger = {};
+    const button = jasmine.createSpyObj('button', ['blur']);
+    const isClosed = true;
+
+    beforeEach(() => {
+      closeReopenReportToggle = new CloseReopenReportToggle({
+        dropdownTrigger,
+        dropdownList,
+        button,
+      });
+
+      spyOn(closeReopenReportToggle, 'toggleButtonType');
+
+      closeReopenReportToggle.updateButton(isClosed);
+    });
+
+    it('calls .toggleButtonType', () => {
+      expect(closeReopenReportToggle.toggleButtonType).toHaveBeenCalledWith(isClosed);
+    });
+
+    it('calls .button.blur', () => {
+      expect(closeReopenReportToggle.button.blur).toHaveBeenCalled();
+    });
+  });
+
+  describe('toggleButtonType', () => {
+    let closeReopenReportToggle;
+    const dropdownList = {};
+    const dropdownTrigger = {};
+    const button = {};
+    const isClosed = true;
+    const showItem = jasmine.createSpyObj('showItem', ['click']);
+    const hideItem = {};
+    showItem.classList = jasmine.createSpyObj('classList', ['add', 'remove']);
+    hideItem.classList = jasmine.createSpyObj('classList', ['add', 'remove']);
+
+    beforeEach(() => {
+      closeReopenReportToggle = new CloseReopenReportToggle({
+        dropdownTrigger,
+        dropdownList,
+        button,
+      });
+
+      spyOn(closeReopenReportToggle, 'getButtonTypes').and.returnValue([showItem, hideItem]);
+
+      closeReopenReportToggle.toggleButtonType(isClosed);
+    });
+
+    it('calls .getButtonTypes', () => {
+      expect(closeReopenReportToggle.getButtonTypes).toHaveBeenCalledWith(isClosed);
+    });
+
+    it('removes hide class and add selected class to showItem, opposite for hideItem', () => {
+      expect(showItem.classList.remove).toHaveBeenCalledWith('hidden');
+      expect(showItem.classList.add).toHaveBeenCalledWith('droplab-item-selected');
+      expect(hideItem.classList.add).toHaveBeenCalledWith('hidden');
+      expect(hideItem.classList.remove).toHaveBeenCalledWith('droplab-item-selected');
+    });
+
+    it('clicks the showItem', () => {
+      expect(showItem.click).toHaveBeenCalled();
+    });
+  });
+
+  describe('getButtonTypes', () => {
+    let closeReopenReportToggle;
+    const dropdownList = {};
+    const dropdownTrigger = {};
+    const button = {};
+    const reopenItem = {};
+    const closeItem = {};
+
+    beforeEach(() => {
+      closeReopenReportToggle = new CloseReopenReportToggle({
+        dropdownTrigger,
+        dropdownList,
+        button,
+      });
+
+      closeReopenReportToggle.reopenItem = reopenItem;
+      closeReopenReportToggle.closeItem = closeItem;
+    });
+
+    it('returns reopenItem, closeItem if isClosed is true', () => {
+      const buttonTypes = closeReopenReportToggle.getButtonTypes(true);
+
+      expect(buttonTypes).toEqual([reopenItem, closeItem]);
+    });
+
+    it('returns closeItem, reopenItem if isClosed is false', () => {
+      const buttonTypes = closeReopenReportToggle.getButtonTypes(false);
+
+      expect(buttonTypes).toEqual([closeItem, reopenItem]);
+    });
+  });
+
+  describe('setDisable', () => {
+    let closeReopenReportToggle;
+    const dropdownList = {};
+    const dropdownTrigger = jasmine.createSpyObj('button', ['setAttribute', 'removeAttribute']);
+    const button = jasmine.createSpyObj('button', ['setAttribute', 'removeAttribute']);
+
+    beforeEach(() => {
+      closeReopenReportToggle = new CloseReopenReportToggle({
+        dropdownTrigger,
+        dropdownList,
+        button,
+      });
+    });
+
+    it('disable .button and .dropdownTrigger if shouldDisable is true', () => {
+      closeReopenReportToggle.setDisable(true);
+
+      expect(button.setAttribute).toHaveBeenCalledWith('disabled', 'true');
+      expect(dropdownTrigger.setAttribute).toHaveBeenCalledWith('disabled', 'true');
+    });
+
+    it('disable .button and .dropdownTrigger if shouldDisable is undefined', () => {
+      closeReopenReportToggle.setDisable();
+
+      expect(button.setAttribute).toHaveBeenCalledWith('disabled', 'true');
+      expect(dropdownTrigger.setAttribute).toHaveBeenCalledWith('disabled', 'true');
+    });
+
+    it('enable .button and .dropdownTrigger if shouldDisable is false', () => {
+      closeReopenReportToggle.setDisable(false);
+
+      expect(button.removeAttribute).toHaveBeenCalledWith('disabled');
+      expect(dropdownTrigger.removeAttribute).toHaveBeenCalledWith('disabled');
+    });
+  });
+
+  describe('setConfig', () => {
+    let closeReopenReportToggle;
+    const dropdownList = {};
+    const dropdownTrigger = {};
+    const button = {};
+    let config;
+
+    beforeEach(() => {
+      closeReopenReportToggle = new CloseReopenReportToggle({
+        dropdownTrigger,
+        dropdownList,
+        button,
+      });
+
+      config = closeReopenReportToggle.setConfig();
+    });
+
+    it('returns a config object', () => {
+      expect(config).toEqual({
+        InputSetter: [
+          {
+            input: button,
+            valueAttribute: 'data-text',
+            inputAttribute: 'data-value',
+          },
+          {
+            input: button,
+            valueAttribute: 'data-text',
+            inputAttribute: 'title',
+          },
+          {
+            input: button,
+            valueAttribute: 'data-button-class',
+            inputAttribute: 'class',
+          },
+          {
+            input: dropdownTrigger,
+            valueAttribute: 'data-toggle-class',
+            inputAttribute: 'class',
+          },
+          {
+            input: button,
+            valueAttribute: 'data-url',
+            inputAttribute: 'href',
+          },
+          {
+            input: button,
+            valueAttribute: 'data-method',
+            inputAttribute: 'data-method',
+          },
+        ],
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index df97a100b0d..0c8c4d2cea6 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -1,10 +1,10 @@
 /* eslint-disable space-before-function-paren, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */
 import Issue from '~/issue';
-
+import CloseReopenReportToggle from '~/close_reopen_report_toggle';
 import '~/lib/utils/text_utility';
 
 describe('Issue', function() {
-  let $boxClosed, $boxOpen, $btnClose, $btnReopen;
+  let $boxClosed, $boxOpen, $btn;
 
   preloadFixtures('issues/closed-issue.html.raw');
   preloadFixtures('issues/issue-with-task-list.html.raw');
@@ -20,9 +20,7 @@ describe('Issue', function() {
   function expectIssueState(isIssueOpen) {
     expectVisibility($boxClosed, !isIssueOpen);
     expectVisibility($boxOpen, isIssueOpen);
-
-    expectVisibility($btnClose, isIssueOpen);
-    expectVisibility($btnReopen, !isIssueOpen);
+    expect($btn).toHaveText(isIssueOpen ? 'Close issue' : 'Reopen issue');
   }
 
   function expectNewBranchButtonState(isPending, canCreate) {
@@ -57,7 +55,7 @@ describe('Issue', function() {
     }
   }
 
-  function findElements() {
+  function findElements(isIssueInitiallyOpen) {
     $boxClosed = $('div.status-box-closed');
     expect($boxClosed).toExist();
     expect($boxClosed).toHaveText('Closed');
@@ -66,13 +64,9 @@ describe('Issue', function() {
     expect($boxOpen).toExist();
     expect($boxOpen).toHaveText('Open');
 
-    $btnClose = $('.btn-close.btn-grouped');
-    expect($btnClose).toExist();
-    expect($btnClose).toHaveText('Close issue');
-
-    $btnReopen = $('.btn-reopen.btn-grouped');
-    expect($btnReopen).toExist();
-    expect($btnReopen).toHaveText('Reopen issue');
+    $btn = $('.js-issuable-close-button');
+    expect($btn).toExist();
+    expect($btn).toHaveText(isIssueInitiallyOpen ? 'Close issue' : 'Reopen issue');
   }
 
   describe('task lists', function() {
@@ -99,7 +93,6 @@ describe('Issue', function() {
       function ajaxSpy(req) {
         if (req.url === this.$triggeredButton.attr('href')) {
           expect(req.type).toBe('PUT');
-          expect(this.$triggeredButton).toHaveProp('disabled', true);
           expectNewBranchButtonState(true, false);
           return this.issueStateDeferred;
         } else if (req.url === Issue.createMrDropdownWrap.dataset.canCreatePath) {
@@ -119,10 +112,11 @@ describe('Issue', function() {
           loadFixtures('issues/closed-issue.html.raw');
         }
 
-        findElements();
+        findElements(isIssueInitiallyOpen);
         this.issue = new Issue();
         expectIssueState(isIssueInitiallyOpen);
-        this.$triggeredButton = isIssueInitiallyOpen ? $btnClose : $btnReopen;
+
+        this.$triggeredButton = $btn;
 
         this.$projectIssuesCounter = $('.issue_counter');
         this.$projectIssuesCounter.text('1,001');
@@ -143,7 +137,7 @@ describe('Issue', function() {
         });
 
         expectIssueState(!isIssueInitiallyOpen);
-        expect(this.$triggeredButton).toHaveProp('disabled', false);
+        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
         expect(this.$projectIssuesCounter.text()).toBe(isIssueInitiallyOpen ? '1,000' : '1,002');
         expectNewBranchButtonState(false, !isIssueInitiallyOpen);
       });
@@ -158,7 +152,7 @@ describe('Issue', function() {
         });
 
         expectIssueState(isIssueInitiallyOpen);
-        expect(this.$triggeredButton).toHaveProp('disabled', false);
+        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
         expectErrorMessage();
         expect(this.$projectIssuesCounter.text()).toBe('1,001');
         expectNewBranchButtonState(false, isIssueInitiallyOpen);
@@ -172,7 +166,7 @@ describe('Issue', function() {
         });
 
         expectIssueState(isIssueInitiallyOpen);
-        expect(this.$triggeredButton).toHaveProp('disabled', true);
+        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
         expectErrorMessage();
         expect(this.$projectIssuesCounter.text()).toBe('1,001');
         expectNewBranchButtonState(false, isIssueInitiallyOpen);
@@ -195,4 +189,37 @@ describe('Issue', function() {
       });
     });
   });
+
+  describe('units', () => {
+    describe('class constructor', () => {
+      it('calls .initCloseReopenReport', () => {
+        spyOn(Issue.prototype, 'initCloseReopenReport');
+
+        new Issue(); // eslint-disable-line no-new
+
+        expect(Issue.prototype.initCloseReopenReport).toHaveBeenCalled();
+      });
+    });
+
+    describe('initCloseReopenReport', () => {
+      it('calls .initDroplab', () => {
+        const container = jasmine.createSpyObj('container', ['querySelector']);
+        const dropdownTrigger = {};
+        const dropdownList = {};
+        const button = {};
+
+        spyOn(document, 'querySelector').and.returnValue(container);
+        spyOn(CloseReopenReportToggle.prototype, 'initDroplab');
+        container.querySelector.and.returnValues(dropdownTrigger, dropdownList, button);
+
+        Issue.prototype.initCloseReopenReport();
+
+        expect(document.querySelector).toHaveBeenCalledWith('.js-issuable-close-dropdown');
+        expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-toggle');
+        expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-menu');
+        expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-button');
+        expect(CloseReopenReportToggle.prototype.initDroplab).toHaveBeenCalled();
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index f444bcaf847..6ff42e2378d 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -2,10 +2,12 @@
 /* global MergeRequest */
 
 import '~/merge_request';
+import CloseReopenReportToggle from '~/close_reopen_report_toggle';
+import IssuablesHelper from '~/helpers/issuables_helper';
 
 (function() {
   describe('MergeRequest', function() {
-    return describe('task lists', function() {
+    describe('task lists', function() {
       preloadFixtures('merge_requests/merge_request_with_task_list.html.raw');
       beforeEach(function() {
         loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
@@ -27,5 +29,34 @@ import '~/merge_request';
         return $('.js-task-list-field').trigger('tasklist:changed');
       });
     });
+
+    describe('class constructor', () => {
+      it('calls .initCloseReopenReport', () => {
+        spyOn(IssuablesHelper, 'initCloseReopenReport');
+
+        new MergeRequest(); // eslint-disable-line no-new
+
+        expect(IssuablesHelper.initCloseReopenReport).toHaveBeenCalled();
+      });
+
+      it('calls .initDroplab', () => {
+        const container = jasmine.createSpyObj('container', ['querySelector']);
+        const dropdownTrigger = {};
+        const dropdownList = {};
+        const button = {};
+
+        spyOn(CloseReopenReportToggle.prototype, 'initDroplab');
+        spyOn(document, 'querySelector').and.returnValue(container);
+        container.querySelector.and.returnValues(dropdownTrigger, dropdownList, button);
+
+        new MergeRequest(); // eslint-disable-line no-new
+
+        expect(document.querySelector).toHaveBeenCalledWith('.js-issuable-close-dropdown');
+        expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-toggle');
+        expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-menu');
+        expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-button');
+        expect(CloseReopenReportToggle.prototype.initDroplab).toHaveBeenCalled();
+      });
+    });
   });
 }).call(window);