Resolve "Lock issue dropdown opens in sidebar for users without permission"

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/26324

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -63,7 +63,9 @@ export default {
 
   methods: {
     toggleForm() {
-      this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
+      if (this.isEditable) {
+        this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
+      }
     },
     updateLockedAttribute(locked) {
       this.mediator.service

changelogs/unreleased/207464-prevent-unauthorized-user-to-lock-an-issue-when-the-sidebar-is-col.yml

+---
+title: Prevent unauthorized users to lock an issue from the collapsed sidebar.
+merge_request: 26324
+author: Gilang Gumilar
+type: fixed

spec/features/issues/issue_sidebar_spec.rb

@@ -225,6 +225,29 @@ describe 'Issue Sidebar' do
     it 'does not have a option to edit labels' do
       expect(page).not_to have_selector('.block.labels .edit-link')
     end
+
+    context 'interacting with collapsed sidebar', :js do
+      collapsed_sidebar_selector = 'aside.right-sidebar.right-sidebar-collapsed'
+      expanded_sidebar_selector = 'aside.right-sidebar.right-sidebar-expanded'
+      lock_sidebar_block = '.block.lock'
+      lock_button = '.block.lock .btn-close'
+      collapsed_sidebar_block_icon = '.sidebar-collapsed-icon'
+
+      before do
+        resize_screen_sm
+      end
+
+      it 'expands then does not show the lock dialog form' do
+        expect(page).to have_css(collapsed_sidebar_selector)
+
+        page.within(lock_sidebar_block) do
+          find(collapsed_sidebar_block_icon).click
+        end
+
+        expect(page).to have_css(expanded_sidebar_selector)
+        expect(page).not_to have_selector(lock_button)
+      end
+    end
   end
 
   def visit_issue(project, issue)

spec/javascripts/sidebar/lock/lock_issue_sidebar_spec.js

@@ -83,4 +83,17 @@ describe('LockIssueSidebar', () => {
       done();
     });
   });
+
+  it('does not display the edit form when opened from collapsed state if not editable', done => {
+    expect(vm2.isLockDialogOpen).toBe(false);
+
+    vm2.$el.querySelector('.sidebar-collapsed-icon').click();
+
+    Vue.nextTick()
+      .then(() => {
+        expect(vm2.isLockDialogOpen).toBe(false);
+      })
+      .then(done)
+      .catch(done.fail);
+  });
 });