Fix selecting scoped label in boards sidebar

app/assets/javascripts/lib/utils/common_utils.js

@@ -720,7 +720,18 @@ export const searchBy = (query = '', searchSpace = {}) => {
  * @param {Object} label
  * @returns Boolean
  */
-export const isScopedLabel = ({ title = '' }) => title.indexOf('::') !== -1;
+export const isScopedLabel = ({ title = '' } = {}) => title.indexOf('::') !== -1;
+
+/**
+ * Returns the base value of the scoped label
+ *
+ * Expected Label to be an Object with `title` as a key:
+ *   { title: 'LabelTitle', ...otherProperties };
+ *
+ * @param {Object} label
+ * @returns String
+ */
+export const scopedLabelKey = ({ title = '' }) => isScopedLabel({ title }) && title.split('::')[0];
 
 // Methods to set and get Cookie
 export const setCookie = (name, value) => Cookies.set(name, value, { expires: 365 });

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js

+import { isScopedLabel, scopedLabelKey } from '~/lib/utils/common_utils';
 import { DropdownVariant } from '../constants';
 import * as types from './mutation_types';
 
@@ -66,5 +67,16 @@ export default {
       candidateLabel.touched = true;
       candidateLabel.set = !candidateLabel.set;
     }
+
+    if (isScopedLabel(candidateLabel)) {
+      const scopedBase = scopedLabelKey(candidateLabel);
+      const currentActiveScopedLabel = state.labels.find(({ title }) => {
+        return title.startsWith(scopedBase) && title !== '' && title !== candidateLabel.title;
+      });
+
+      if (currentActiveScopedLabel) {
+        currentActiveScopedLabel.set = false;
+      }
+    }
   },
 };

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js

+import { isScopedLabel, scopedLabelKey } from '~/lib/utils/common_utils';
 import { DropdownVariant } from '../constants';
 import * as types from './mutation_types';
 
@@ -55,5 +56,16 @@ export default {
       candidateLabel.touched = true;
       candidateLabel.set = !candidateLabel.set;
     }
+
+    if (isScopedLabel(candidateLabel)) {
+      const scopedBase = scopedLabelKey(candidateLabel);
+      const currentActiveScopedLabel = state.labels.find(
+        ({ title }) => title.indexOf(scopedBase) === 0 && title !== candidateLabel.title,
+      );
+
+      if (currentActiveScopedLabel) {
+        currentActiveScopedLabel.set = false;
+      }
+    }
   },
 };

spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js

@@ -153,7 +153,16 @@ describe('LabelsSelect Mutations', () => {
   });
 
   describe(`${types.UPDATE_SELECTED_LABELS}`, () => {
-    const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+    let labels;
+
+    beforeEach(() => {
+      labels = [
+        { id: 1, title: 'scoped::test', set: true },
+        { id: 2, set: false, title: 'scoped::one' },
+        { id: 3, title: '' },
+        { id: 4, title: '' },
+      ];
+    });
 
     it('updates `state.labels` to include `touched` and `set` props based on provided `labels` param', () => {
       const updatedLabelIds = [2];
@@ -169,5 +178,23 @@ describe('LabelsSelect Mutations', () => {
         }
       });
     });
+
+    describe('when label is scoped', () => {
+      it('unsets the currently selected scoped label and sets the current label', () => {
+        const state = {
+          labels,
+        };
+        mutations[types.UPDATE_SELECTED_LABELS](state, {
+          labels: [{ id: 2, title: 'scoped::one' }],
+        });
+
+        expect(state.labels).toEqual([
+          { id: 1, title: 'scoped::test', set: false },
+          { id: 2, set: true, title: 'scoped::one', touched: true },
+          { id: 3, title: '' },
+          { id: 4, title: '' },
+        ]);
+      });
+    });
   });
 });

spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/mutations_spec.js

@@ -120,7 +120,16 @@ describe('LabelsSelect Mutations', () => {
   });
 
   describe(`${types.UPDATE_SELECTED_LABELS}`, () => {
-    const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+    let labels;
+
+    beforeEach(() => {
+      labels = [
+        { id: 1, title: 'scoped::test', set: true },
+        { id: 2, set: false, title: 'scoped::one' },
+        { id: 3, title: '' },
+        { id: 4, title: '' },
+      ];
+    });
 
     it('updates `state.labels` to include `touched` and `set` props based on provided `labels` param', () => {
       const updatedLabelIds = [2];
@@ -136,5 +145,23 @@ describe('LabelsSelect Mutations', () => {
         }
       });
     });
+
+    describe('when label is scoped', () => {
+      it('unsets the currently selected scoped label and sets the current label', () => {
+        const state = {
+          labels,
+        };
+        mutations[types.UPDATE_SELECTED_LABELS](state, {
+          labels: [{ id: 2, title: 'scoped::one' }],
+        });
+
+        expect(state.labels).toEqual([
+          { id: 1, title: 'scoped::test', set: false },
+          { id: 2, set: true, title: 'scoped::one', touched: true },
+          { id: 3, title: '' },
+          { id: 4, title: '' },
+        ]);
+      });
+    });
   });
 });