Fix Host risk classification filter sort order changes when option is clicked (#142207) (#142233)

(cherry picked from commit c56d738d6f)

Co-authored-by: Pablo Machado <pablo.nevesmachado@elastic.co>
This commit is contained in:
Kibana Machine 2022-09-29 10:17:46 -06:00 committed by GitHub
parent b883d2cae7
commit b247f298d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 4 deletions

View file

@ -105,3 +105,11 @@ export const EMPTY_SEVERITY_COUNT = {
[RiskSeverity.moderate]: 0,
[RiskSeverity.unknown]: 0,
};
export const SEVERITY_UI_SORT_ORDER = [
RiskSeverity.unknown,
RiskSeverity.low,
RiskSeverity.moderate,
RiskSeverity.high,
RiskSeverity.critical,
];

View file

@ -0,0 +1,42 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { SeverityFilterGroup } from './severity_filter_group';
import { RiskSeverity } from '../../../../common/search_strategy';
import { TestProviders } from '../../mock';
describe('SeverityFilterGroup', () => {
it('preserves sort order when severityCount is out of order', () => {
const { getByTestId, getAllByTestId } = render(
<TestProviders>
<SeverityFilterGroup
selectedSeverities={[]}
severityCount={{
[RiskSeverity.high]: 0,
[RiskSeverity.low]: 0,
[RiskSeverity.critical]: 0,
[RiskSeverity.moderate]: 0,
[RiskSeverity.unknown]: 0,
}}
title={'test title'}
onSelect={jest.fn()}
/>
</TestProviders>
);
fireEvent.click(getByTestId('risk-filter-button'));
expect(getAllByTestId('risk-score').map((ele) => ele.textContent)).toEqual([
'Unknown',
'Low',
'Moderate',
'High',
'Critical',
]);
});
});

View file

@ -16,6 +16,7 @@ import {
} from '@elastic/eui';
import type { RiskSeverity } from '../../../../common/search_strategy';
import { SEVERITY_UI_SORT_ORDER } from '../../../../common/search_strategy';
import type { SeverityCount } from './types';
import { RiskScore } from './common';
@ -46,10 +47,10 @@ export const SeverityFilterGroup: React.FC<{
const items: SeverityItems[] = useMemo(() => {
const checked: FilterChecked = 'on';
return (Object.keys(severityCount) as RiskSeverity[]).map((k) => ({
risk: k,
count: severityCount[k],
checked: selectedSeverities.includes(k) ? checked : undefined,
return SEVERITY_UI_SORT_ORDER.map((severity) => ({
risk: severity,
count: severityCount[severity],
checked: selectedSeverities.includes(severity) ? checked : undefined,
}));
}, [severityCount, selectedSeverities]);