Hide close MR button after merge without reloading page

After merging a MR the close button is hidden, without reloading the page.

6 files changed, 67 insertions, 1 deletions

diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index 0db2abe507d..af0658eb668 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -127,6 +127,21 @@ import IssuablesHelper from './helpers/issuables_helper';
       $el.text(gl.text.addDelimiter(count));
     };
 
+    MergeRequest.prototype.hideCloseButton = function() {
+      const el = document.querySelector('.merge-request .issuable-actions');
+      const closeDropdownItem = el.querySelector('li.close-item');
+      if (closeDropdownItem) {
+        closeDropdownItem.classList.add('hidden');
+        // Selects the next dropdown item
+        el.querySelector('li.report-item').click();
+      } else {
+        // No dropdown just hide the Close button
+        el.querySelector('.btn-close').classList.add('hidden');
+      }
+      // Dropdown for mobile screen
+      el.querySelector('li.js-close-item').classList.add('hidden');
+    };
+
     return MergeRequest;
   })();
 }).call(window);
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index ad709da51ee..ea0e3a45d34 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -156,6 +156,7 @@ export default {
             eventHub.$emit('FetchActionsContent');
             if (window.mergeRequest) {
               window.mergeRequest.updateStatusText('status-box-open', 'status-box-merged', 'Merged');
+              window.mergeRequest.hideCloseButton();
               window.mergeRequest.decreaseCounter();
             }
             stopPolling();
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index f3c44c94a5c..9ff85c2ee4c 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -29,7 +29,7 @@
           - unless current_user == @merge_request.author
             %li= link_to 'Report abuse', new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request))
           - if can_update_merge_request
-            %li{ class: merge_request_button_visibility(@merge_request, true) }
+            %li{ class: [merge_request_button_visibility(@merge_request, true), 'js-close-item'] }
               = link_to 'Close', merge_request_path(@merge_request, merge_request: { state_event: :close }), method: :put, title: 'Close merge request'
             %li{ class: merge_request_button_visibility(@merge_request, false) }
               = link_to 'Reopen', merge_request_path(@merge_request, merge_request: {state_event: :reopen }), method: :put, class: 'reopen-mr-link', title: 'Reopen merge request'
diff --git a/changelogs/unreleased/36742-hide-close-mr-button-on-merge.yml b/changelogs/unreleased/36742-hide-close-mr-button-on-merge.yml
new file mode 100644
index 00000000000..3d3efcdbcc6
--- /dev/null
+++ b/changelogs/unreleased/36742-hide-close-mr-button-on-merge.yml
@@ -0,0 +1,5 @@
+---
+title: Hide close MR button after merge without reloading page
+merge_request: 14122
+author: Jacopo Beschi @jacopo-beschi
+type: added
diff --git a/spec/javascripts/fixtures/merge_requests.rb b/spec/javascripts/fixtures/merge_requests.rb
index 4bc2205e642..3fd16d76f51 100644
--- a/spec/javascripts/fixtures/merge_requests.rb
+++ b/spec/javascripts/fixtures/merge_requests.rb
@@ -41,6 +41,12 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
     remove_repository(project)
   end
 
+  it 'merge_requests/merge_request_of_current_user.html.raw' do |example|
+    merge_request.update(author: admin)
+
+    render_merge_request(example.description, merge_request)
+  end
+
   it 'merge_requests/merge_request_with_task_list.html.raw' do |example|
     create(:ci_build, :pending, pipeline: pipeline)
 
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index 6ff42e2378d..3ab901da6b6 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -58,5 +58,44 @@ import IssuablesHelper from '~/helpers/issuables_helper';
         expect(CloseReopenReportToggle.prototype.initDroplab).toHaveBeenCalled();
       });
     });
+
+    describe('hideCloseButton', () => {
+      describe('merge request of another user', () => {
+        beforeEach(() => {
+          loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
+          this.el = document.querySelector('.merge-request .issuable-actions');
+          const merge = new MergeRequest();
+          merge.hideCloseButton();
+        });
+
+        it('hides the dropdown close item and selects the next item', () => {
+          const closeItem = this.el.querySelector('li.close-item');
+          const smallCloseItem = this.el.querySelector('.js-close-item');
+          const reportItem = this.el.querySelector('li.report-item');
+
+          expect(closeItem).toHaveClass('hidden');
+          expect(smallCloseItem).toHaveClass('hidden');
+          expect(reportItem).toHaveClass('droplab-item-selected');
+          expect(reportItem).not.toHaveClass('hidden');
+        });
+      });
+
+      describe('merge request of current_user', () => {
+        beforeEach(() => {
+          loadFixtures('merge_requests/merge_request_of_current_user.html.raw');
+          this.el = document.querySelector('.merge-request .issuable-actions');
+          const merge = new MergeRequest();
+          merge.hideCloseButton();
+        });
+
+        it('hides the close button', () => {
+          const closeButton = this.el.querySelector('.btn-close');
+          const smallCloseItem = this.el.querySelector('.js-close-item');
+
+          expect(closeButton).toHaveClass('hidden');
+          expect(smallCloseItem).toHaveClass('hidden');
+        });
+      });
+    });
   });
 }).call(window);