diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index 3fa5aaa1..e3b7d1c1 100644 --- a/grafana-plugin/package.json +++ b/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", diff --git a/grafana-plugin/src/containers/Labels/Labels.tsx b/grafana-plugin/src/containers/Labels/Labels.tsx index 732c123b..f744e3f9 100644 --- a/grafana-plugin/src/containers/Labels/Labels.tsx +++ b/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} /> diff --git a/grafana-plugin/src/pages/integration/Integration.tsx b/grafana-plugin/src/pages/integration/Integration.tsx index 5aa62b79..02960843 100644 --- a/grafana-plugin/src/pages/integration/Integration.tsx +++ b/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 = ({ {alertReceiveChannel.labels.length ? alertReceiveChannel.labels.map((label) => ( - + )) : 'No labels attached'} diff --git a/grafana-plugin/src/pages/integrations/Integrations.tsx b/grafana-plugin/src/pages/integrations/Integrations.tsx index 64730ffa..d67af530 100644 --- a/grafana-plugin/src/pages/integrations/Integrations.tsx +++ b/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 {item.labels?.length ? item.labels.map((label) => ( - +