Rares/bump labels 1.2.X (#3227)

# What this PR does

- Bumps `@grafana/labels` to `1.2.1`
- Use `LabelTag` from the shared library to display label colorization

grafana-plugin/package.json

@@ -113,7 +113,7 @@
     "@grafana/data": "^9.2.4",
     "@grafana/faro-web-sdk": "^1.0.0-beta4",
     "@grafana/faro-web-tracing": "^1.0.0-beta4",
-    "@grafana/labels": "^1.1.0",
+    "@grafana/labels": "~1.2.1",
     "@grafana/runtime": "9.3.0-beta1",
     "@grafana/ui": "^9.4.7",
     "@opentelemetry/api": "^1.3.0",

grafana-plugin/src/containers/Labels/Labels.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
 
-import '@grafana/labels/dist/theme.css';
 import ServiceLabels from '@grafana/labels';
 import { Field } from '@grafana/ui';
 import cn from 'classnames/bind';
+import { isEmpty } from 'lodash-es';
 import { observer } from 'mobx-react';
 
 import { LabelKeyValue } from 'models/label/label.types';
@@ -57,6 +57,31 @@ const Labels = observer(
       };
     }, []);
 
+    const isValid = () => {
+      return (
+        (propsErrors || [])
+          .map((error: LabelKeyValue, index) => {
+            // error object is empty => Valid
+            if (isEmpty(error)) {
+              return undefined;
+            }
+            const matchingValue = value[index]?.value;
+            // We have a name for the value => Valid
+            if (error.value && matchingValue?.name) {
+              return undefined;
+            }
+            const matchingKey = value[index]?.key;
+            // We have a name for the key => Valid
+            if (error.key && matchingKey?.name) {
+              return undefined;
+            }
+            // Invalid
+            return error;
+          })
+          .filter((er: LabelKeyValue) => er).length === 0
+      );
+    };
+
     const cachedOnLoadValuesForKey = useCallback(() => {
       let result = undefined;
       return async (key: string, search?: string) => {
@@ -87,7 +112,7 @@ const Labels = observer(
             onUpdateValue={labelsStore.updateKeyValue.bind(labelsStore)}
             onRowItemRemoval={(_pair, _index) => {}}
             onUpdateError={onUpdateError}
-            errors={{ ...propsErrors }}
+            errors={isValid() ? {} : { ...propsErrors }}
             onDataUpdate={setValue}
           />
         </Field>

grafana-plugin/src/pages/integration/Integration.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { LabelTag } from '@grafana/labels';
 import {
   Button,
   HorizontalGroup,
@@ -11,7 +12,6 @@ import {
   ConfirmModal,
   Drawer,
   Alert,
-  Tag as GrafanaTag,
 } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { get } from 'lodash-es';
@@ -1072,7 +1072,7 @@ const IntegrationHeader: React.FC<IntegrationHeaderProps> = ({
             <VerticalGroup spacing="sm">
               {alertReceiveChannel.labels.length
                 ? alertReceiveChannel.labels.map((label) => (
-                    <GrafanaTag name={`${label.key.name}:${label.value.name}`} key={label.key.id} />
+                    <LabelTag label={label.key.name} value={label.value.name} key={label.key.id} />
                   ))
                 : 'No labels attached'}
             </VerticalGroup>

grafana-plugin/src/pages/integrations/Integrations.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { HorizontalGroup, Button, VerticalGroup, Icon, ConfirmModal, Tooltip, Tag } from '@grafana/ui';
+import { LabelTag } from '@grafana/labels';
+import { HorizontalGroup, Button, VerticalGroup, Icon, ConfirmModal, Tooltip } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { debounce } from 'lodash-es';
 import { observer } from 'mobx-react';
@@ -366,7 +367,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
             {item.labels?.length
               ? item.labels.map((label) => (
                   <HorizontalGroup spacing="sm" key={label.key.id}>
-                    <Tag name={`${label.key.name}:${label.value.name}`} />
+                    <LabelTag label={label.key.name} value={label.value.name} key={label.key.id} />
                     <Button
                       size="sm"
                       icon="filter"

grafana-plugin/yarn.lock

@@ -1454,7 +1454,7 @@
     "@emotion/sheet" "^1.2.1"
     "@emotion/utils" "^1.2.0"
 
-"@emotion/css@11.11.2":
+"@emotion/css@11.11.2", "@emotion/css@^11.11.2":
   version "11.11.2"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.11.2.tgz#e5fa081d0c6e335352e1bc2b05953b61832dca5a"
   integrity sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==
@@ -1966,15 +1966,17 @@
     "@opentelemetry/sdk-trace-web" "^1.8.0"
     "@opentelemetry/semantic-conventions" "^1.8.0"
 
-"@grafana/labels@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@grafana/labels/-/labels-1.1.0.tgz#d41f10d2cfdb7a83a0e86a49009505744574f784"
-  integrity sha512-LQHJ8KwHReDj6UxHmVsfDO3J128hebow2nmxSXSoc8j1KDeM847Q0FCibOnrcubQi/hI13ahwBDEWST7UBc7og==
+"@grafana/labels@~1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@grafana/labels/-/labels-1.2.1.tgz#4113d584bf5cd826d011f957cb69c90bd0416ea8"
+  integrity sha512-Nlqqvjwh0MjWsqnfpYbKdYwByeKSmEpiit5mKd6Mnnbc5Hxb8ORIruMr40lTxxWLEnDfhENcAs6pvlBuIMG7tQ==
   dependencies:
+    "@emotion/css" "^11.11.2"
     "@grafana/ui" "^10.0.0"
     change-case "^4.1.2"
     react "^18.0.0"
     react-dom "^18.0.0"
+    tinycolor2 "1.6.0"
 
 "@grafana/runtime@9.3.0-beta1":
   version "9.3.0-beta1"