[Security Solution][Case] Fix case status dropdown on modals (#86243)
This commit is contained in:
parent
4f2fd01661
commit
21b34bcd24
|
@ -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: '&&',
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue