Skip to content

Commit

Permalink
fix: properly display values in QueryBuilderTag
Browse files Browse the repository at this point in the history
  • Loading branch information
simPod committed Feb 4, 2023
1 parent e2ed098 commit 27eb427
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 5 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@
"dependencies": {
"lodash": "^4.17.21",
"react-virtualized-auto-sizer": "^1.0.7",
"rxjs": "7.5.7"
"rxjs": "7.5.7",
"ts-pattern": "^4.1.3"
},
"homepage": "https://github.com/simPod/GrafanaJsonDatasource",
"engineStrict": true,
Expand Down
7 changes: 5 additions & 2 deletions src/Component/QueryBuilder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ interface LastQuery {
metric: string;
}

type UnknownPayload = Array<{ name: string; value: unknown }>;

type EditorProps = QueryEditorProps<DataSource, GrafanaQuery, GenericOptions>;

interface Props extends EditorProps {
Expand All @@ -25,7 +27,7 @@ export const QueryBuilder: ComponentType<Props> = (props) => {
const [metric, setMetric] = React.useState<SelectableValue<string | number>>();
const [payload, setPayload] = React.useState(props.payload ?? '');

const [unknownPayload, setUnknownPayload] = React.useState<Array<{ name: string; value: any }>>([]);
const [unknownPayload, setUnknownPayload] = React.useState<UnknownPayload>([]);

const [lastQuery, setLastQuery] = React.useState<LastQuery | null>(null);
const [payloadConfig, setPayloadConfig] = React.useState<MetricPayloadConfig[]>([]);
Expand Down Expand Up @@ -82,12 +84,13 @@ export const QueryBuilder: ComponentType<Props> = (props) => {
}, [payload, metric]);

React.useEffect(() => {
const newUnknownPayload: Array<{ name: string; value: any }> = [];
const newUnknownPayload: UnknownPayload = [];
for (const key in payload) {
const foundConfig = payloadConfig.find((item) => item.name === key);
if (foundConfig === undefined) {
newUnknownPayload.push({ name: key, value: payload[key] });
}

setUnknownPayload(newUnknownPayload);
}
}, [payload, payloadConfig]);
Expand Down
19 changes: 19 additions & 0 deletions src/Component/QueryBuilderTag.jest.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import {render, screen} from '@testing-library/react'
import '@testing-library/jest-dom'
import { QueryBuilderTag } from "./QueryBuilderTag";
import React from "react";

test.each([
['key="text"', 'text'],
['key=true', true],
['key=1', 1],
['key=null', null],
['key="{"some":"object"}"', {some: 'object'}],
])('displays key-value as %s for %s', async (expectedContent, value) => {
render(<QueryBuilderTag name="key" value={value} onRemove={()=>{}} />)

const element: HTMLSpanElement = screen.getByText(/key/);

expect(element).toBeInTheDocument();
expect(element).toHaveTextContent(expectedContent);
});
12 changes: 10 additions & 2 deletions src/Component/QueryBuilderTag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { getTagColorsFromName, IconButton, stylesFactory, useTheme } from '@grafana/ui';
import React, { ComponentType } from 'react';
import { match } from "ts-pattern";

type QueryBuilderTagProps = {
name: string;
value: string;
value: unknown;
onRemove: (name: string) => void;
};

Expand Down Expand Up @@ -48,10 +49,17 @@ export const QueryBuilderTag: ComponentType<QueryBuilderTagProps> = ({ name, val
const theme = useTheme();
const styles = getStyles({ theme, name });

const formattedValue = match(typeof value)
.with('string', () => `"${value}"`)
.with('number', () => value)
.with('boolean', () => (value as boolean).toString())
.with('object', () => value === null ? 'null' : `"${JSON.stringify(value)}"`)
.otherwise(() => `"${JSON.stringify(value)}"`);

return (
<div className={styles.itemStyle}>
<span className={styles.nameStyle}>
{name}={value}
{name}={formattedValue}
</span>
<IconButton
name="times"
Expand Down
8 changes: 8 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -8069,6 +8069,7 @@ __metadata:
react-dom: ^18.2.0
react-virtualized-auto-sizer: ^1.0.7
rxjs: 7.5.7
ts-pattern: ^4.1.3
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -14085,6 +14086,13 @@ __metadata:
languageName: node
linkType: hard

"ts-pattern@npm:^4.1.3":
version: 4.1.3
resolution: "ts-pattern@npm:4.1.3"
checksum: a9462aa0e503dcf8fd1a8d648b02315276f644711bf1c7564a1185cd8b78a7b84fa9bc4f9ecdbb0fd88692c74a28f03e5af1898066d5f3b8744a87508d6a457b
languageName: node
linkType: hard

"tslib@npm:2.4.0":
version: 2.4.0
resolution: "tslib@npm:2.4.0"
Expand Down

0 comments on commit 27eb427

Please sign in to comment.