Handle empty values for range formatters (#129572)

This commit is contained in:
Joe Reuter 2022-04-11 17:54:57 +02:00 committed by GitHub
parent 980a97f145
commit b239151646
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 27 deletions

View file

@ -49,6 +49,13 @@ describe('getAggsFormats', () => {
expect(getFormat).toHaveBeenCalledTimes(3);
});
test('date_range does not crash on empty value', () => {
const mapping = { id: 'date_range', params: {} };
const format = getAggFormat(mapping, getFormat);
expect(format.convert(undefined)).toBe('');
});
test('creates custom format for ip_range', () => {
const mapping = { id: 'ip_range', params: {} };
const format = getAggFormat(mapping, getFormat);
@ -62,6 +69,13 @@ describe('getAggsFormats', () => {
expect(getFormat).toHaveBeenCalledTimes(4);
});
test('ip_range does not crash on empty value', () => {
const mapping = { id: 'ip_range', params: {} };
const format = getAggFormat(mapping, getFormat);
expect(format.convert(undefined)).toBe('');
});
test('creates custom format for range', () => {
const mapping = { id: 'range', params: {} };
const format = getAggFormat(mapping, getFormat);
@ -70,6 +84,13 @@ describe('getAggsFormats', () => {
expect(getFormat).toHaveBeenCalledTimes(1);
});
test('range does not crash on empty value', () => {
const mapping = { id: 'range', params: {} };
const format = getAggFormat(mapping, getFormat);
expect(format.convert(undefined)).toBe('');
});
test('creates alternative format for range using the template parameter', () => {
const mapping = { id: 'range', params: { template: 'arrow_right' } };
const format = getAggFormat(mapping, getFormat);

View file

@ -44,6 +44,10 @@ export function getAggsFormats(getFieldFormat: GetFieldFormat): FieldFormatInsta
textConvert = (range: any) => {
const params = this._params;
if (range == null) {
return '';
}
if (range.label) {
return range.label;
}
@ -90,6 +94,10 @@ export function getAggsFormats(getFieldFormat: GetFieldFormat): FieldFormatInsta
static hidden = true;
textConvert = (range: DateRange) => {
if (range == null) {
return '';
}
const nestedFormatter = this._params as SerializedFieldFormat;
const format = getFieldFormat({
id: nestedFormatter.id,
@ -103,6 +111,10 @@ export function getAggsFormats(getFieldFormat: GetFieldFormat): FieldFormatInsta
static hidden = true;
textConvert = (range: IpRangeKey) => {
if (range == null) {
return '';
}
const nestedFormatter = this._params as SerializedFieldFormat;
const format = getFieldFormat({
id: nestedFormatter.id,

View file

@ -57,7 +57,7 @@ export const createGridColumns = (
? [
({ rowIndex, columnId, Component, closePopover }: EuiDataGridColumnCellActionProps) => {
const rowValue = rows[rowIndex][columnId];
const contentsIsDefined = rowValue !== null && rowValue !== undefined;
if (rowValue == null) return null;
const cellContent = formattedColumn.formatter.convert(rowValue);
const filterForText = i18n.translate(
@ -77,24 +77,22 @@ export const createGridColumns = (
);
return (
contentsIsDefined && (
<Component
aria-label={filterForAriaLabel}
data-test-subj="tbvChartCell__filterForCellValue"
onClick={() => {
onFilterClick({ row: rowIndex, column: colIndex, value: rowValue }, false);
closePopover?.();
}}
iconType="plusInCircle"
>
{filterForText}
</Component>
)
<Component
aria-label={filterForAriaLabel}
data-test-subj="tbvChartCell__filterForCellValue"
onClick={() => {
onFilterClick({ row: rowIndex, column: colIndex, value: rowValue }, false);
closePopover?.();
}}
iconType="plusInCircle"
>
{filterForText}
</Component>
);
},
({ rowIndex, columnId, Component, closePopover }: EuiDataGridColumnCellActionProps) => {
const rowValue = rows[rowIndex][columnId];
const contentsIsDefined = rowValue !== null && rowValue !== undefined;
if (rowValue == null) return null;
const cellContent = formattedColumn.formatter.convert(rowValue);
const filterOutText = i18n.translate(
@ -114,18 +112,16 @@ export const createGridColumns = (
);
return (
contentsIsDefined && (
<Component
aria-label={filterOutAriaLabel}
onClick={() => {
onFilterClick({ row: rowIndex, column: colIndex, value: rowValue }, true);
closePopover?.();
}}
iconType="minusInCircle"
>
{filterOutText}
</Component>
)
<Component
aria-label={filterOutAriaLabel}
onClick={() => {
onFilterClick({ row: rowIndex, column: colIndex, value: rowValue }, true);
closePopover?.();
}}
iconType="minusInCircle"
>
{filterOutText}
</Component>
);
},
]