Apply label color to tokens

- Add background color and
text color to selected
label tokens.

ee/app/assets/javascripts/analytics/shared/components/tokens/label_token.vue

 <script>
 import {
+  GlToken,
   GlFilteredSearchToken,
   GlFilteredSearchSuggestion,
   GlDropdownDivider,
@@ -11,6 +12,7 @@ import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/cons
 
 export default {
   components: {
+    GlToken,
     GlFilteredSearchToken,
     GlFilteredSearchSuggestion,
     GlDropdownDivider,
@@ -26,11 +28,40 @@ export default {
       type: Object,
       required: true,
     },
+    active: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      activeLabel: null,
+    };
   },
   computed: {
     labels() {
       return this.config.labels;
     },
+    containerStyle() {
+      if (this.activeLabel) {
+        const { color, text_color } = this.activeLabel;
+
+        return { backgroundColor: color, color: text_color };
+      }
+
+      return {};
+    },
+  },
+  watch: {
+    active: {
+      immediate: true,
+      handler(newValue) {
+        if (!newValue && this.labels) {
+          this.activeLabel = this.labels.find(l => l.title === this.value?.data);
+        }
+      },
+    },
   },
   created() {
     this.searchLabels(this.value);
@@ -56,9 +87,17 @@ export default {
     v-on="$listeners"
     @input="searchLabels"
   >
-    <template #view="{ inputValue }">
-      <template v-if="config.symbol">{{ config.symbol }}</template
-      >{{ inputValue }}
+    <template #view-token="{ inputValue, cssClasses, listeners }">
+      <gl-token
+        variant="search-value"
+        :class="cssClasses"
+        :style="containerStyle"
+        data-testid="selected-label"
+        v-on="listeners"
+      >
+        <template v-if="config.symbol">{{ config.symbol }}</template>
+        {{ activeLabel ? activeLabel.title : inputValue }}
+      </gl-token>
     </template>
     <template #suggestions>
       <gl-loading-icon v-if="config.isLoading" />

ee/changelogs/unreleased/223063-glfilteredsearch-apply-label-color-to-token-in-analytics-space.yml

+---
+title: Apply label color to shared Analytics label token
+merge_request: 36205
+author:
+type: other

ee/spec/frontend/analytics/shared/components/tokens/label_token_spec.js

@@ -16,9 +16,10 @@ describe('LabelToken', () => {
     isLoading: false,
     fetchData: jest.fn(),
   };
+
   const stubs = {
     GlFilteredSearchToken: {
-      template: `<div><slot name="suggestions"></slot></div>`,
+      template: `<div><slot name="view-token"></slot><slot name="suggestions"></slot></div>`,
     },
   };
 
@@ -38,6 +39,7 @@ describe('LabelToken', () => {
   const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
   const findAllLabelSuggestions = () => wrapper.findAll({ ref: 'labelItem' });
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findSelectedLabelToken = () => wrapper.find('[data-testid="selected-label"]');
 
   it('renders a loading icon', () => {
     createComponent({ config: { ...defaultConfig, isLoading: true }, value: {} }, { stubs });
@@ -45,6 +47,22 @@ describe('LabelToken', () => {
     expect(findLoadingIcon().exists()).toBe(true);
   });
 
+  it('renders the selected label', () => {
+    const selectedLabel = mockLabels[0];
+    createComponent({ value: { data: selectedLabel.title } });
+
+    expect(findSelectedLabelToken().text()).toContain(selectedLabel.title);
+  });
+
+  it("sets the label's background and text color on the gl-token component", () => {
+    const selectedLabel = mockLabels[0];
+    createComponent({ value: { data: selectedLabel.title } });
+
+    expect(findSelectedLabelToken().attributes('style')).toEqual(
+      'background-color: rgb(98, 53, 242); color: rgb(255, 255, 255);',
+    );
+  });
+
   describe('suggestions', () => {
     it('renders a suggestion for each item', () => {
       createComponent();