Fixed editing labels on the swimlanes sidebar

app/assets/javascripts/boards/components/sidebar/board_editable_item.vue

@@ -64,9 +64,9 @@ export default {
       <gl-button
         v-if="canUpdate"
         variant="link"
-        class="gl-text-gray-900!"
+        class="gl-text-gray-900! js-sidebar-dropdown-toggle"
         data-testid="edit-button"
-        @click="expand()"
+        @click="expand"
       >
         {{ __('Edit') }}
       </gl-button>
@@ -75,7 +75,7 @@ export default {
       <slot name="collapsed">{{ __('None') }}</slot>
     </div>
     <div v-show="edit" data-testid="expanded-content">
-      <slot></slot>
+      <slot :edit="edit"></slot>
     </div>
   </div>
 </template>

app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue

@@ -92,7 +92,7 @@ export default {
         @close="removeLabel(label.id)"
       />
     </template>
-    <template>
+    <template #default="{ edit }">
       <labels-select
         ref="labelsSelect"
         :allow-label-edit="false"
@@ -105,6 +105,7 @@ export default {
         :labels-filter-base-path="labelsFilterBasePath"
         :labels-list-title="__('Select label')"
         :dropdown-button-text="__('Choose labels')"
+        :is-editing="edit"
         variant="embedded"
         class="gl-display-block labels gl-w-full"
         @updateSelectedLabels="setLabels"

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue

@@ -105,6 +105,11 @@ export default {
       required: false,
       default: __('Manage group labels'),
     },
+    isEditing: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -131,6 +136,11 @@ export default {
     showDropdownContents(showDropdownContents) {
       this.setContentIsOnViewport(showDropdownContents);
     },
+    isEditing(newVal) {
+      if (newVal) {
+        this.toggleDropdownContents();
+      }
+    },
   },
   mounted() {
     this.setInitialState({

changelogs/unreleased/ntepluhina-fix-swimlanes-on-edit-board.yml

+---
+title: Fixed editing labels on the swimlanes sidebar
+merge_request: 47946
+author:
+type: fixed

spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js

@@ -20,22 +20,24 @@ jest.mock('~/lib/utils/common_utils', () => ({
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-const createComponent = (config = mockConfig, slots = {}) =>
-  shallowMount(LabelsSelectRoot, {
-    localVue,
-    slots,
-    store: new Vuex.Store(labelsSelectModule()),
-    propsData: config,
-    stubs: {
-      'dropdown-contents': DropdownContents,
-    },
-  });
-
 describe('LabelsSelectRoot', () => {
   let wrapper;
+  let store;
+
+  const createComponent = (config = mockConfig, slots = {}) => {
+    wrapper = shallowMount(LabelsSelectRoot, {
+      localVue,
+      slots,
+      store,
+      propsData: config,
+      stubs: {
+        'dropdown-contents': DropdownContents,
+      },
+    });
+  };
 
   beforeEach(() => {
-    wrapper = createComponent();
+    store = new Vuex.Store(labelsSelectModule());
   });
 
   afterEach(() => {
@@ -45,6 +47,7 @@ describe('LabelsSelectRoot', () => {
   describe('methods', () => {
     describe('handleVuexActionDispatch', () => {
       it('calls `handleDropdownClose` when params `action.type` is `toggleDropdownContents` and state has `showDropdownButton` & `showDropdownContents` props `false`', () => {
+        createComponent();
         jest.spyOn(wrapper.vm, 'handleDropdownClose').mockImplementation();
 
         wrapper.vm.handleVuexActionDispatch(
@@ -67,7 +70,7 @@ describe('LabelsSelectRoot', () => {
       });
 
       it('calls `handleDropdownClose` with state.labels filterd using `set` prop when dropdown variant is `embedded`', () => {
-        wrapper = createComponent({
+        createComponent({
           ...mockConfig,
           variant: 'embedded',
         });
@@ -95,6 +98,10 @@ describe('LabelsSelectRoot', () => {
     });
 
     describe('handleDropdownClose', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
       it('emits `updateSelectedLabels` & `onDropdownClose` events on component when provided `labels` param is not empty', () => {
         wrapper.vm.handleDropdownClose([{ id: 1 }, { id: 2 }]);
 
@@ -112,6 +119,7 @@ describe('LabelsSelectRoot', () => {
 
     describe('handleCollapsedValueClick', () => {
       it('emits `toggleCollapse` event on component', () => {
+        createComponent();
         wrapper.vm.handleCollapsedValueClick();
 
         expect(wrapper.emitted().toggleCollapse).toBeTruthy();
@@ -121,6 +129,7 @@ describe('LabelsSelectRoot', () => {
 
   describe('template', () => {
     it('renders component with classes `labels-select-wrapper position-relative`', () => {
+      createComponent();
       expect(wrapper.attributes('class')).toContain('labels-select-wrapper position-relative');
     });
 
@@ -131,7 +140,7 @@ describe('LabelsSelectRoot', () => {
     `(
       'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"',
       ({ variant, cssClass }) => {
-        wrapper = createComponent({
+        createComponent({
           ...mockConfig,
           variant,
         });
@@ -142,57 +151,58 @@ describe('LabelsSelectRoot', () => {
       },
     );
 
-    it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', () => {
+    it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', async () => {
+      createComponent();
+      await wrapper.vm.$nextTick;
       expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
     });
 
-    it('renders `dropdown-title` component', () => {
+    it('renders `dropdown-title` component', async () => {
+      createComponent();
+      await wrapper.vm.$nextTick;
       expect(wrapper.find(DropdownTitle).exists()).toBe(true);
     });
 
-    it('renders `dropdown-value` component', () => {
-      const wrapperDropdownValue = createComponent(mockConfig, {
+    it('renders `dropdown-value` component', async () => {
+      createComponent(mockConfig, {
         default: 'None',
       });
+      await wrapper.vm.$nextTick;
 
-      return wrapperDropdownValue.vm.$nextTick(() => {
-        const valueComp = wrapperDropdownValue.find(DropdownValue);
+      const valueComp = wrapper.find(DropdownValue);
 
-        expect(valueComp.exists()).toBe(true);
-        expect(valueComp.text()).toBe('None');
-
-        wrapperDropdownValue.destroy();
-      });
+      expect(valueComp.exists()).toBe(true);
+      expect(valueComp.text()).toBe('None');
     });
 
-    it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', () => {
+    it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', async () => {
+      createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownButton');
-
+      await wrapper.vm.$nextTick;
       expect(wrapper.find(DropdownButton).exists()).toBe(true);
     });
 
-    it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', () => {
+    it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', async () => {
+      createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownContents');
-
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find(DropdownContents).exists()).toBe(true);
-      });
+      await wrapper.vm.$nextTick;
+      expect(wrapper.find(DropdownContents).exists()).toBe(true);
     });
 
     describe('sets content direction based on viewport', () => {
-      it('does not set direction when `state.variant` is not "embedded"', () => {
-        wrapper.vm.$store.dispatch('toggleDropdownContents');
+      it('does not set direction when `state.variant` is not "embedded"', async () => {
+        createComponent();
 
+        wrapper.vm.$store.dispatch('toggleDropdownContents');
         wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
+        await wrapper.vm.$nextTick;
 
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
-        });
+        expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
       });
 
       describe('when `state.variant` is "embedded"', () => {
         beforeEach(() => {
-          wrapper = createComponent({ ...mockConfig, variant: 'embedded' });
+          createComponent({ ...mockConfig, variant: 'embedded' });
           wrapper.vm.$store.dispatch('toggleDropdownContents');
         });
 
@@ -216,4 +226,22 @@ describe('LabelsSelectRoot', () => {
       });
     });
   });
+
+  it('calls toggleDropdownContents action when isEditing prop is changing to true', async () => {
+    createComponent();
+
+    jest.spyOn(store, 'dispatch').mockResolvedValue();
+    await wrapper.setProps({ isEditing: true });
+
+    expect(store.dispatch).toHaveBeenCalledWith('toggleDropdownContents');
+  });
+
+  it('does not call toggleDropdownContents action when isEditing prop is changing to false', async () => {
+    createComponent();
+
+    jest.spyOn(store, 'dispatch').mockResolvedValue();
+    await wrapper.setProps({ isEditing: false });
+
+    expect(store.dispatch).not.toHaveBeenCalled();
+  });
 });