maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Security Solution][Case] Fix case status dropdown on modals (#86243)

Browse source
This commit is contained in:
Christos Nasikas 2020-12-23 09:36:38 +02:00 committed by GitHub
parent 4f2fd01661
commit 21b34bcd24
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
x-pack/plugins/security_solution/public/cases/components/all_cases/table_filters.test.tsx
View file

@ -8,11 +8,11 @@ import React from 'react';
import { mount } from 'enzyme';
import { CaseStatuses } from '../../../../../case/common/api';
import { CasesTableFilters } from './table_filters';
import { TestProviders } from '../../../common/mock';
import { useGetTags } from '../../containers/use_get_tags';
import { useGetReporters } from '../../containers/use_get_reporters';
import { DEFAULT_FILTER_OPTIONS } from '../../containers/use_get_cases';
import { CasesTableFilters } from './table_filters';
jest.mock('../../containers/use_get_reporters');
jest.mock('../../containers/use_get_tags');
@ -151,4 +151,20 @@ describe('CasesTableFilters ', () => {
);
expect(onFilterChanged).toHaveBeenCalledWith({ reporters: [{ username: 'casetester' }] });
});
it('StatusFilterWrapper should have a fixed width of 180px', () => {
const wrapper = mount(
<TestProviders>
<CasesTableFilters {...props} />
</TestProviders>
);
expect(wrapper.find('[data-test-subj="status-filter-wrapper"]').first()).toHaveStyleRule(
'flex-basis',
'180px',
{
modifier: '&&',
}
);
});
});

46
x-pack/plugins/security_solution/public/cases/components/all_cases/table_filters.tsx
View file

@ -6,6 +6,7 @@
import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { isEqual } from 'lodash/fp';
import styled from 'styled-components';
import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiFilterGroup } from '@elastic/eui';
import { CaseStatuses } from '../../../../../case/common/api';
@ -25,6 +26,13 @@ interface CasesTableFiltersProps {
setFilterRefetch: (val: () => void) => void;
}
// Fix the width of the status dropdown to prevent hiding long text items
const StatusFilterWrapper = styled(EuiFlexItem)`
&& {
flex-basis: 180px;
}
`;
/**
* Collection of filters for filtering data within the CasesTable. Contains search bar,
* and tag selection
@ -131,23 +139,27 @@ const CasesTableFiltersComponent = ({
);
return (
<EuiFlexGroup gutterSize="m" justifyContent="flexEnd">
<EuiFlexItem grow={8}>
<EuiFieldSearch
aria-label={i18n.SEARCH_CASES}
data-test-subj="search-cases"
fullWidth
incremental={false}
placeholder={i18n.SEARCH_PLACEHOLDER}
onSearch={handleOnSearch}
/>
</EuiFlexItem>
<EuiFlexItem grow={2}>
<StatusFilter
selectedStatus={initial.status}
onStatusChanged={onStatusChanged}
stats={stats}
/>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexItem>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<EuiFieldSearch
aria-label={i18n.SEARCH_CASES}
data-test-subj="search-cases"
fullWidth
incremental={false}
placeholder={i18n.SEARCH_PLACEHOLDER}
onSearch={handleOnSearch}
/>
</EuiFlexItem>
<StatusFilterWrapper grow={false} data-test-subj="status-filter-wrapper">
<StatusFilter
selectedStatus={initial.status}
onStatusChanged={onStatusChanged}
stats={stats}
/>
</StatusFilterWrapper>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFilterGroup>