root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 142 Packages Projects Releases Wiki Activity

Table: Allow FieldType.other containing arrays to use Pills (#111205)

This commit is contained in:
Paul Marbach 2025-10-07 11:21:56 -04:00 committed by GitHub
parent 5438df01a1
commit ed2cecf36e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 53 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.test.tsx
View File

@ -102,6 +102,52 @@ describe('PillCell', () => {
);
});
it('FieldType.other with array', () => {
const field = fieldWithValues([['value1', 'value2', 'value3']]);
field.type = FieldType.other;
expectHTML(
render(
<PillCell getTextColorForBackground={getTextColorForBackground} field={field} rowIdx={0} theme={theme} />
),
`
<span style="background-color: rgb(63, 43, 91); color: rgb(247, 248, 250);">value1</span>
<span style="background-color: rgb(252, 226, 222); color: rgb(32, 34, 38);">value2</span>
<span style="background-color: rgb(81, 149, 206); color: rgb(247, 248, 250);">value3</span>
`
);
});
it('FieldType.other with array with some null values', () => {
const field = fieldWithValues([['value1', null, 'value2', undefined, 'value3']]);
field.type = FieldType.other;
expectHTML(
render(
<PillCell getTextColorForBackground={getTextColorForBackground} field={field} rowIdx={0} theme={theme} />
),
`
<span style="background-color: rgb(63, 43, 91); color: rgb(247, 248, 250);">value1</span>
<span style="background-color: rgb(252, 226, 222); color: rgb(32, 34, 38);">value2</span>
<span style="background-color: rgb(81, 149, 206); color: rgb(247, 248, 250);">value3</span>
`
);
});
it('FieldType.other with non-array', () => {
const field = fieldWithValues([{ value1: true, value2: false, value3: 42 }]);
field.type = FieldType.other;
expectHTML(
render(
<PillCell
getTextColorForBackground={getTextColorForBackground}
field={fieldWithValues([])}
rowIdx={0}
theme={theme}
/>
),
''
);
});
it('non-string values', () => {
expectHTML(
render(

4
packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.tsx
View File

@ -65,6 +65,10 @@ export function inferPills(rawValue: TableCellValue): unknown[] {
return [];
}
if (Array.isArray(rawValue)) {
return rawValue.filter((v) => v != null).map((v) => String(v).trim());
}
const value = String(rawValue);
if (value[0] === '[') {

4
packages/grafana-ui/src/components/Table/TableNG/Cells/renderers.tsx
View File

@ -118,7 +118,9 @@ const CELL_REGISTRY: Record<TableCellOptions['type'], CellRegistryEntry> = {
/>
)),
getStyles: getPillStyles,
testField: (field: Field) => field.type === FieldType.string,
testField: (field: Field) =>
field.type === FieldType.string ||
(field.type === FieldType.other && field.values.some((val) => Array.isArray(val))),
},
[TableCellDisplayMode.Markdown]: {
// eslint-disable-next-line react/display-name