Moves locking of merge request to dropdown

Changelog: changed

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

 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { mapGetters } from 'vuex';
-import { __ } from '~/locale';
+import { mapGetters, mapActions } from 'vuex';
+import { __, sprintf } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import createFlash from '~/flash';
 import eventHub from '~/sidebar/event_hub';
 import editForm from './edit_form.vue';
 
@@ -23,11 +25,11 @@ export default {
     editForm,
     GlIcon,
   },
-
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-
+  mixins: [glFeatureFlagMixin()],
+  inject: ['fullPath'],
   props: {
     isEditable: {
       required: true,
@@ -41,6 +43,9 @@ export default {
   },
   computed: {
     ...mapGetters(['getNoteableData']),
+    isMergeRequest() {
+      return this.getNoteableData.targetType === 'merge_request' && this.glFeatures.movedMrSidebar;
+    },
     issuableDisplayName() {
       const isInIssuePage = this.getNoteableData.targetType === this.$options.issue;
       return isInIssuePage ? __('issue') : __('merge request');
@@ -66,17 +71,49 @@ export default {
   },
 
   methods: {
+    ...mapActions(['updateLockedAttribute']),
     toggleForm() {
       if (this.isEditable) {
         this.isLockDialogOpen = !this.isLockDialogOpen;
       }
     },
+    toggleLocked() {
+      this.isLoading = true;
+
+      this.updateLockedAttribute({
+        locked: !this.isLocked,
+        fullPath: this.fullPath,
+      })
+        .catch(() => {
+          const flashMessage = __(
+            'Something went wrong trying to change the locked state of this %{issuableDisplayName}',
+          );
+          createFlash({
+            message: sprintf(flashMessage, { issuableDisplayName: this.issuableDisplayName }),
+          });
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
   },
 };
 </script>
 
 <template>
-  <div class="block issuable-sidebar-item lock">
+  <li v-if="isMergeRequest" class="gl-new-dropdown-item">
+    <button type="button" class="dropdown-item" @click="toggleLocked">
+      <span class="gl-new-dropdown-item-text-wrapper">
+        <template v-if="isLocked">
+          {{ __('Unlock merge request') }}
+        </template>
+        <template v-else>
+          {{ __('Lock merge request') }}
+        </template>
+      </span>
+    </button>
+  </li>
+  <div v-else class="block issuable-sidebar-item lock">
     <div
       v-gl-tooltip.left.viewport="{ title: tooltipLabel }"
       class="sidebar-collapsed-icon"

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -431,10 +431,7 @@ function mountLockComponent(store) {
     return;
   }
 
-  const { fullPath } = getSidebarOptions();
-
-  const dataNode = document.getElementById('js-lock-issue-data');
-  const initialData = JSON.parse(dataNode.innerHTML);
+  const { fullPath, editable } = getSidebarOptions();
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -447,7 +444,7 @@ function mountLockComponent(store) {
     render: (createElement) =>
       createElement(IssuableLockForm, {
         props: {
-          isEditable: initialData.is_editable,
+          isEditable: editable,
         },
       }),
   });

app/assets/stylesheets/pages/issuable.scss

@@ -125,6 +125,7 @@
   background-color: $white;
   z-index: 200;
   overflow: hidden;
+
 }
 
 .right-sidebar {
@@ -196,7 +197,6 @@
   .issuable-sidebar-header {
     @include clearfix;
     padding: $gl-padding 0;
-    border-bottom: 1px solid $border-gray-normal;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $gutter-inner-width;

app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml

@@ -33,12 +33,14 @@
                   = _('Reopen')
                   = display_issuable_type
 
+          - if current_user && moved_mr_sidebar_enabled?
+            %li.gl-new-dropdown-divider
+              %hr.dropdown-divider
+            %li.gl-new-dropdown-item.js-sidebar-subscriptions-entry-point
           - unless issuable_author_is_current_user(@merge_request)
             %li.gl-new-dropdown-item
               = link_to new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'dropdown-item' do
                 .gl-new-dropdown-item-text-wrapper
                   = _('Report abuse')
-          - if current_user && moved_mr_sidebar_enabled?
-            %li.gl-new-dropdown-divider
-              %hr.dropdown-divider
-            %li.gl-new-dropdown-item.js-sidebar-subscriptions-entry-point
+          - if moved_mr_sidebar_enabled?
+            %li.gl-new-dropdown-item#js-lock-entry-point

app/views/shared/issuable/_sidebar.html.haml

@@ -73,12 +73,10 @@
 
         = render_if_exists 'shared/issuable/sidebar_cve_id_request', issuable_sidebar: issuable_sidebar
 
-      -# haml-lint:disable InlineJavaScript
-      %script#js-lock-issue-data{ type: "application/json" }= { is_locked: !!issuable_sidebar[:discussion_locked], is_editable: can_edit_issuable }.to_json.html_safe
-      #js-lock-entry-point
-
-      - if signed_in && !moved_sidebar_enabled
-        .js-sidebar-subscriptions-entry-point
+      - if !moved_sidebar_enabled
+        #js-lock-entry-point
+        - if signed_in
+          .js-sidebar-subscriptions-entry-point
 
       .js-sidebar-participants-entry-point
 

locale/gitlab.pot

@@ -23036,6 +23036,9 @@ msgstr ""
 msgid "Lock memberships to LDAP synchronization"
 msgstr ""
+msgid "Lock merge request"
+msgstr ""
+
 msgid "Lock not found"
 msgstr ""
@@ -40375,6 +40378,9 @@ msgstr ""
 msgid "Unlock account"
 msgstr ""
+msgid "Unlock merge request"
+msgstr ""
+
 msgid "Unlock more features with GitLab Ultimate"
 msgstr ""

spec/features/merge_request/merge_request_discussion_lock_spec.rb

@@ -8,59 +8,91 @@
   let(:user) { create(:user) }
   let(:project) { create(:project, :public, :repository) }
   let(:merge_request) { create(:merge_request, source_project: project, author: user) }
+  let(:moved_mr_sidebar_enabled) { false }
 
   before do
+    stub_feature_flags(moved_mr_sidebar: moved_mr_sidebar_enabled)
     sign_in(user)
   end
 
-  context 'when a user is a team member' do
-    before do
-      project.add_developer(user)
-    end
+  context 'moved sidebar flag disabled' do
+    context 'when a user is a team member' do
+      before do
+        project.add_developer(user)
+      end
 
-    context 'when the discussion is unlocked' do
-      it 'the user can lock the merge_request' do
-        visit project_merge_request_path(merge_request.project, merge_request)
+      context 'when the discussion is unlocked' do
+        it 'the user can lock the merge_request' do
+          visit project_merge_request_path(merge_request.project, merge_request)
+
+          expect(find('.issuable-sidebar')).to have_content('Unlocked')
 
-        expect(find('.issuable-sidebar')).to have_content('Unlocked')
+          page.within('.issuable-sidebar') do
+            find('.lock-edit').click
+            click_button('Lock')
+          end
 
-        page.within('.issuable-sidebar') do
-          find('.lock-edit').click
-          click_button('Lock')
+          expect(find('[data-testid="lock-status"]')).to have_content('Locked')
         end
+      end
+
+      context 'when the discussion is locked' do
+        before do
+          merge_request.update_attribute(:discussion_locked, true)
+          visit project_merge_request_path(merge_request.project, merge_request)
+        end
+
+        it 'the user can unlock the merge_request' do
+          expect(find('.issuable-sidebar')).to have_content('Locked')
 
-        expect(find('[data-testid="lock-status"]')).to have_content('Locked')
+          page.within('.issuable-sidebar') do
+            find('.lock-edit').click
+            click_button('Unlock')
+          end
+
+          expect(find('[data-testid="lock-status"]')).to have_content('Unlocked')
+        end
       end
     end
 
-    context 'when the discussion is locked' do
-      before do
-        merge_request.update_attribute(:discussion_locked, true)
-        visit project_merge_request_path(merge_request.project, merge_request)
-      end
+    context 'when a user is not a team member' do
+      context 'when the discussion is unlocked' do
+        before do
+          visit project_merge_request_path(merge_request.project, merge_request)
+        end
 
-      it 'the user can unlock the merge_request' do
-        expect(find('.issuable-sidebar')).to have_content('Locked')
+        it 'the user can not lock the merge_request' do
+          expect(find('.issuable-sidebar')).to have_content('Unlocked')
+          expect(find('.issuable-sidebar')).not_to have_selector('.lock-edit')
+        end
+      end
 
-        page.within('.issuable-sidebar') do
-          find('.lock-edit').click
-          click_button('Unlock')
+      context 'when the discussion is locked' do
+        before do
+          merge_request.update_attribute(:discussion_locked, true)
+          visit project_merge_request_path(merge_request.project, merge_request)
         end
 
-        expect(find('[data-testid="lock-status"]')).to have_content('Unlocked')
+        it 'the user can not unlock the merge_request' do
+          expect(find('.issuable-sidebar')).to have_content('Locked')
+          expect(find('.issuable-sidebar')).not_to have_selector('.lock-edit')
+        end
       end
     end
   end
 
-  context 'when a user is not a team member' do
+  context 'moved sidebar flag enabled' do
+    let(:moved_mr_sidebar_enabled) { true }
+
     context 'when the discussion is unlocked' do
       before do
         visit project_merge_request_path(merge_request.project, merge_request)
       end
 
-      it 'the user can not lock the merge_request' do
-        expect(find('.issuable-sidebar')).to have_content('Unlocked')
-        expect(find('.issuable-sidebar')).not_to have_selector('.lock-edit')
+      it 'the user can lock the merge_request' do
+        click_button 'Toggle dropdown'
+
+        expect(page).to have_content('Lock merge request')
       end
     end
 
@@ -70,9 +102,10 @@
         visit project_merge_request_path(merge_request.project, merge_request)
       end
 
-      it 'the user can not unlock the merge_request' do
-        expect(find('.issuable-sidebar')).to have_content('Locked')
-        expect(find('.issuable-sidebar')).not_to have_selector('.lock-edit')
+      it 'the user can unlock the merge_request' do
+        click_button 'Toggle dropdown'
+
+        expect(page).to have_content('Unlock merge request')
       end
     end
   end

spec/frontend/sidebar/lock/issuable_lock_form_spec.js

@@ -37,6 +37,9 @@ describe('IssuableLockForm', () => {
   const createComponent = ({ props = {} }) => {
     wrapper = shallowMount(IssuableLockForm, {
       store,
+      provide: {
+        fullPath: '',
+      },
       propsData: {
         isEditable: true,
         ...props,