Fix sidebar labels scoped label selection bug

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

@@ -688,17 +688,20 @@ export const searchBy = (query = '', searchSpace = {}) => {
  */
 export const isScopedLabel = ({ title = '' } = {}) => title.includes(SCOPED_LABEL_DELIMITER);
 
+const scopedLabelRegex = new RegExp(`(.*)${SCOPED_LABEL_DELIMITER}.*`);
+
 /**
- * Returns the base value of the scoped label
- *
- * Expected Label to be an Object with `title` as a key:
- *   { title: 'LabelTitle', ...otherProperties };
+ * Returns the key of a scoped label.
+ * For example:
+ * - returns `scoped` if the label is `scoped::value`.
+ * - returns `scoped::label` if the label is `scoped::label::value`.
  *
- * @param {Object} label
- * @returns String
+ * @param {Object} label object containing `title` property
+ * @returns String scoped label key, or full label if it is not a scoped label
  */
-export const scopedLabelKey = ({ title = '' }) =>
-  isScopedLabel({ title }) && title.split(SCOPED_LABEL_DELIMITER)[0];
+export const scopedLabelKey = ({ title = '' }) => {
+  return title.replace(scopedLabelRegex, '$1');
+};
 
 // 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 { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import { DropdownVariant } from '../constants';
 import * as types from './mutation_types';
 
@@ -67,9 +66,11 @@ export default {
     }
 
     if (isScopedLabel(candidateLabel)) {
-      const scopedKeyWithDelimiter = `${scopedLabelKey(candidateLabel)}${SCOPED_LABEL_DELIMITER}`;
       const currentActiveScopedLabel = state.labels.find(
-        ({ title }) => title.startsWith(scopedKeyWithDelimiter) && title !== candidateLabel.title,
+        ({ set, title }) =>
+          set &&
+          title !== candidateLabel.title &&
+          scopedLabelKey({ title }) === scopedLabelKey(candidateLabel),
       );
 
       if (currentActiveScopedLabel) {

spec/frontend/lib/utils/common_utils_spec.js

@@ -1008,6 +1008,21 @@ describe('common_utils', () => {
     });
   });
 
+  describe('scopedLabelKey', () => {
+    it.each`
+      label                           | expectedLabelKey
+      ${undefined}                    | ${''}
+      ${''}                           | ${''}
+      ${'title'}                      | ${'title'}
+      ${'scoped::value'}              | ${'scoped'}
+      ${'scoped::label::value'}       | ${'scoped::label'}
+      ${'scoped::label-some::value'}  | ${'scoped::label-some'}
+      ${'scoped::label::some::value'} | ${'scoped::label::some'}
+    `('returns "$expectedLabelKey" when label is "$label"', ({ label, expectedLabelKey }) => {
+      expect(commonUtils.scopedLabelKey({ title: label })).toBe(expectedLabelKey);
+    });
+  });
+
   describe('getDashPath', () => {
     it('returns the path following /-/', () => {
       expect(commonUtils.getDashPath('/some/-/url-with-dashes-/')).toEqual('url-with-dashes-/');

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

+import { cloneDeep } from 'lodash';
 import * as types from '~/vue_shared/components/sidebar/labels_select_vue/store/mutation_types';
 import mutations from '~/vue_shared/components/sidebar/labels_select_vue/store/mutations';
 
@@ -153,47 +154,40 @@ describe('LabelsSelect Mutations', () => {
   });
 
   describe(`${types.UPDATE_SELECTED_LABELS}`, () => {
-    let labels;
-
-    beforeEach(() => {
-      labels = [
+    const labels = [
       { id: 1, title: 'scoped' },
-        { id: 2, title: 'scoped::one', set: false },
-        { id: 3, title: 'scoped::test', set: true },
-        { id: 4, title: '' },
+      { id: 2, title: 'scoped::label::one', set: false },
+      { id: 3, title: 'scoped::label::two', set: false },
+      { id: 4, title: 'scoped::label::three', set: true },
+      { id: 5, title: 'scoped::one', set: false },
+      { id: 6, title: 'scoped::two', set: false },
+      { id: 7, title: 'scoped::three', set: true },
+      { id: 8, title: '' },
     ];
-    });
-
-    it('updates `state.labels` to include `touched` and `set` props based on provided `labels` param', () => {
-      const updatedLabelIds = [2];
-      const state = {
-        labels,
-      };
-      mutations[types.UPDATE_SELECTED_LABELS](state, { labels: [{ id: 2 }] });
-
-      state.labels.forEach((label) => {
-        if (updatedLabelIds.includes(label.id)) {
-          expect(label.touched).toBe(true);
-          expect(label.set).toBe(true);
-        }
-      });
-    });
-
-    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' },
-          { id: 2, title: 'scoped::one', set: true, touched: true },
-          { id: 3, title: 'scoped::test', set: false },
-          { id: 4, title: '' },
-        ]);
+    it.each`
+      label        | labelGroupIds
+      ${labels[0]} | ${[]}
+      ${labels[1]} | ${[labels[2], labels[3]]}
+      ${labels[2]} | ${[labels[1], labels[3]]}
+      ${labels[3]} | ${[labels[1], labels[2]]}
+      ${labels[4]} | ${[labels[5], labels[6]]}
+      ${labels[5]} | ${[labels[4], labels[6]]}
+      ${labels[6]} | ${[labels[4], labels[5]]}
+      ${labels[7]} | ${[]}
+    `('updates `touched` and `set` props for $label.title', ({ label, labelGroupIds }) => {
+      const state = { labels: cloneDeep(labels) };
+
+      mutations[types.UPDATE_SELECTED_LABELS](state, { labels: [{ id: label.id }] });
+
+      expect(state.labels[label.id - 1]).toMatchObject({
+        touched: true,
+        set: !labels[label.id - 1].set,
+      });
+
+      labelGroupIds.forEach((l) => {
+        expect(state.labels[l.id - 1].touched).toBeFalsy();
+        expect(state.labels[l.id - 1].set).toBe(false);
       });
     });
   });