Fix sidebar labels scoped label selection bug

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

@@ -6,6 +6,7 @@ import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/util
 import $ from 'jquery';
 import Cookies from 'js-cookie';
 import { isFunction, defer } from 'lodash';
+import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import { convertToCamelCase, convertToSnakeCase } from './text_utility';
 import { isObject } from './type_utility';
 import { getLocationHash } from './url_utility';
@@ -685,7 +686,7 @@ export const searchBy = (query = '', searchSpace = {}) => {
  * @param {Object} label
  * @returns Boolean
  */
-export const isScopedLabel = ({ title = '' } = {}) => title.indexOf('::') !== -1;
+export const isScopedLabel = ({ title = '' } = {}) => title.includes(SCOPED_LABEL_DELIMITER);
 
 /**
  * Returns the base value of the scoped label
@@ -696,7 +697,8 @@ export const isScopedLabel = ({ title = '' } = {}) => title.indexOf('::') !== -1
  * @param {Object} label
  * @returns String
  */
-export const scopedLabelKey = ({ title = '' }) => isScopedLabel({ title }) && title.split('::')[0];
+export const scopedLabelKey = ({ title = '' }) =>
+  isScopedLabel({ title }) && title.split(SCOPED_LABEL_DELIMITER)[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 { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import { DropdownVariant } from '../constants';
 import * as types from './mutation_types';
 
@@ -66,10 +67,10 @@ export default {
     }
 
     if (isScopedLabel(candidateLabel)) {
-      const scopedBase = scopedLabelKey(candidateLabel);
-      const currentActiveScopedLabel = state.labels.find(({ title }) => {
-        return title.startsWith(scopedBase) && title !== '' && title !== candidateLabel.title;
-      });
+      const scopedKeyWithDelimiter = `${scopedLabelKey(candidateLabel)}${SCOPED_LABEL_DELIMITER}`;
+      const currentActiveScopedLabel = state.labels.find(
+        ({ title }) => title.startsWith(scopedKeyWithDelimiter) && title !== candidateLabel.title,
+      );
 
       if (currentActiveScopedLabel) {
         currentActiveScopedLabel.set = false;

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js

+export const SCOPED_LABEL_DELIMITER = '::';
+
 export const DropdownVariant = {
   Sidebar: 'sidebar',
   Standalone: 'standalone',

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/list_item.vue

 <script>
 import { GlLabel, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import { DELETE_BUTTON_LABEL, EDIT_BUTTON_LABEL } from '../constants';
 
 export default {
@@ -22,7 +23,7 @@ export default {
   },
   computed: {
     isScoped() {
-      return this.framework.name.includes('::');
+      return this.framework.name.includes(SCOPED_LABEL_DELIMITER);
     },
   },
   i18n: {

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

@@ -157,9 +157,9 @@ describe('LabelsSelect Mutations', () => {
 
     beforeEach(() => {
       labels = [
-        { id: 1, title: 'scoped::test', set: true },
-        { id: 2, set: false, title: 'scoped::one' },
-        { id: 3, title: '' },
+        { id: 1, title: 'scoped' },
+        { id: 2, title: 'scoped::one', set: false },
+        { id: 3, title: 'scoped::test', set: true },
         { id: 4, title: '' },
       ];
     });
@@ -189,9 +189,9 @@ describe('LabelsSelect Mutations', () => {
         });
 
         expect(state.labels).toEqual([
-          { id: 1, title: 'scoped::test', set: false },
-          { id: 2, set: true, title: 'scoped::one', touched: true },
-          { id: 3, title: '' },
+          { id: 1, title: 'scoped' },
+          { id: 2, title: 'scoped::one', set: true, touched: true },
+          { id: 3, title: 'scoped::test', set: false },
           { id: 4, title: '' },
         ]);
       });