Hide close MR button after merge without reloading page

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

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);

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();

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'

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

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)
 

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);