2 files changed, 23 insertions, 3 deletions

diff --git a/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue b/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue
index 84802650dad..e7696b8d31b 100644
--- a/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue
+++ b/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue
@@ -87,7 +87,7 @@ export default {
   <div>
     <header
       v-show="showHeader"
-      class="gl-display-flex gl-justify-content-space-between gl-align-items-flex-start gl-mb-3"
+      class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-mb-2"
     >
       <span class="gl-vertical-align-middle">
         <slot name="title">
@@ -97,7 +97,8 @@ export default {
       </span>
       <gl-button
         v-if="canUpdate"
-        variant="link"
+        category="tertiary"
+        size="small"
         class="gl-text-gray-900! gl-ml-5 js-sidebar-dropdown-toggle edit-link"
         data-testid="edit-button"
         @click="toggle"
diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue
index 29febd0fa51..e74463825c5 100644
--- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue
+++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue
@@ -25,6 +25,8 @@ export default {
   data() {
     return {
       loading: false,
+      oldIid: null,
+      isEditing: false,
     };
   },
   computed: {
@@ -72,6 +74,15 @@ export default {
       return this.labelsFetchPath || projectLabelsFetchPath;
     },
   },
+  watch: {
+    activeBoardItem(_, oldVal) {
+      if (this.isEditing) {
+        this.oldIid = oldVal.iid;
+      } else {
+        this.oldIid = null;
+      }
+    },
+  },
   methods: {
     ...mapActions(['setActiveBoardItemLabels', 'setError']),
     async setLabels(payload) {
@@ -84,8 +95,14 @@ export default {
           .filter((label) => !payload.find((selected) => selected.id === label.id))
           .map((label) => label.id);
 
-        const input = { addLabelIds, removeLabelIds, projectPath: this.projectPathForActiveIssue };
+        const input = {
+          addLabelIds,
+          removeLabelIds,
+          projectPath: this.projectPathForActiveIssue,
+          iid: this.oldIid,
+        };
         await this.setActiveBoardItemLabels(input);
+        this.oldIid = null;
       } catch (e) {
         this.setError({ error: e, message: __('An error occurred while updating labels.') });
       } finally {
@@ -115,6 +132,8 @@ export default {
     :title="__('Labels')"
     :loading="loading"
     data-testid="sidebar-labels"
+    @open="isEditing = true"
+    @close="isEditing = false"
   >
     <template #collapsed>
       <gl-label