Skip to content

Commit

Permalink
[Security Solution] [Cases] Small UI bugfixes (elastic#96511)
Browse files Browse the repository at this point in the history
  • Loading branch information
stephmilovic committed Apr 9, 2021
1 parent 5071192 commit d63a246
Show file tree
Hide file tree
Showing 8 changed files with 33 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import {
EuiTableActionsColumnType,
EuiTableComputedColumnType,
EuiTableFieldDataColumnType,
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';
import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services';
import styled from 'styled-components';
Expand Down Expand Up @@ -73,12 +75,12 @@ export const getCasesColumns = (
return theCase.status !== CaseStatuses.closed ? (
caseDetailsLinkComponent
) : (
<>
{caseDetailsLinkComponent}
<Spacer>
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem>{caseDetailsLinkComponent}</EuiFlexItem>
<EuiFlexItem>
<MediumShadeText>{i18n.CLOSED}</MediumShadeText>
</Spacer>
</>
</EuiFlexItem>
</EuiFlexGroup>
);
}
return getEmptyTagValue();
Expand Down Expand Up @@ -132,7 +134,6 @@ export const getCasesColumns = (
align: RIGHT_ALIGNMENT,
field: 'totalAlerts',
name: ALERTS,
sortable: true,
render: (totalAlerts: Case['totalAlerts']) =>
totalAlerts != null
? renderStringField(`${totalAlerts}`, `case-table-column-alertsCount`)
Expand All @@ -142,37 +143,36 @@ export const getCasesColumns = (
align: RIGHT_ALIGNMENT,
field: 'totalComment',
name: i18n.COMMENTS,
sortable: true,
render: (totalComment: Case['totalComment']) =>
totalComment != null
? renderStringField(`${totalComment}`, `case-table-column-commentCount`)
: getEmptyTagValue(),
},
filterStatus === CaseStatuses.open
filterStatus === CaseStatuses.closed
? {
field: 'createdAt',
name: i18n.OPENED_ON,
field: 'closedAt',
name: i18n.CLOSED_ON,
sortable: true,
render: (createdAt: Case['createdAt']) => {
if (createdAt != null) {
render: (closedAt: Case['closedAt']) => {
if (closedAt != null) {
return (
<span data-test-subj={`case-table-column-createdAt`}>
<FormattedRelativePreferenceDate value={createdAt} />
<span data-test-subj={`case-table-column-closedAt`}>
<FormattedRelativePreferenceDate value={closedAt} />
</span>
);
}
return getEmptyTagValue();
},
}
: {
field: 'closedAt',
name: i18n.CLOSED_ON,
field: 'createdAt',
name: i18n.OPENED_ON,
sortable: true,
render: (closedAt: Case['closedAt']) => {
if (closedAt != null) {
render: (createdAt: Case['createdAt']) => {
if (createdAt != null) {
return (
<span data-test-subj={`case-table-column-closedAt`}>
<FormattedRelativePreferenceDate value={closedAt} />
<span data-test-subj={`case-table-column-createdAt`}>
<FormattedRelativePreferenceDate value={createdAt} />
</span>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -816,7 +816,7 @@ describe('AllCases', () => {
wrapper.find('button[data-test-subj="case-status-filter"]').simulate('click');
wrapper.find('button[data-test-subj="case-status-filter-in-progress"]').simulate('click');
expect(setQueryParams).toBeCalledWith({
sortField: 'updatedAt',
sortField: 'createdAt',
});
});
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@ export const AllCases = React.memo<AllCasesProps>(
newFilterOptions.status &&
newFilterOptions.status === CaseStatuses['in-progress']
) {
setQueryParams({ sortField: SortFieldCase.updatedAt });
setQueryParams({ sortField: SortFieldCase.createdAt });
}
setFilters(newFilterOptions);
refreshCases(false);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ describe('ConnectorsDropdown', () => {
"inputDisplay": <EuiFlexGroup
alignItems="center"
gutterSize="none"
responsive={false}
>
<EuiFlexItem
grow={false}
Expand All @@ -65,6 +66,7 @@ describe('ConnectorsDropdown', () => {
"inputDisplay": <EuiFlexGroup
alignItems="center"
gutterSize="none"
responsive={false}
>
<EuiFlexItem
grow={false}
Expand All @@ -87,6 +89,7 @@ describe('ConnectorsDropdown', () => {
"inputDisplay": <EuiFlexGroup
alignItems="center"
gutterSize="none"
responsive={false}
>
<EuiFlexItem
grow={false}
Expand All @@ -109,6 +112,7 @@ describe('ConnectorsDropdown', () => {
"inputDisplay": <EuiFlexGroup
alignItems="center"
gutterSize="none"
responsive={false}
>
<EuiFlexItem
grow={false}
Expand All @@ -131,6 +135,7 @@ describe('ConnectorsDropdown', () => {
"inputDisplay": <EuiFlexGroup
alignItems="center"
gutterSize="none"
responsive={false}
>
<EuiFlexItem
grow={false}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const EuiIconExtended = styled(EuiIcon)`
const noConnectorOption = {
value: 'none',
inputDisplay: (
<EuiFlexGroup gutterSize="none" alignItems="center">
<EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<EuiIconExtended type="minusInCircle" size={ICON_SIZE} />
</EuiFlexItem>
Expand Down Expand Up @@ -77,7 +77,7 @@ const ConnectorsDropdownComponent: React.FC<Props> = ({
{
value: connector.id,
inputDisplay: (
<EuiFlexGroup gutterSize="none" alignItems="center">
<EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<EuiIconExtended
type={connectorsConfiguration[connector.actionTypeId]?.logo ?? ''}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const FieldMappingComponent: React.FC<FieldMappingProps> = ({
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem>
{' '}
<EuiFlexGroup>
<EuiFlexGroup responsive={false}>
<EuiFlexItem>
<span className="euiFormLabel">{i18n.FIELD_MAPPING_FIRST_COL}</span>
</EuiFlexItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ const FieldMappingRowComponent: React.FC<RowProps> = ({
selectedActionType,
]);
return (
<EuiFlexGroup data-test-subj="static-mappings" alignItems="center">
<EuiFlexGroup data-test-subj="static-mappings" alignItems="center" responsive={false}>
<EuiFlexItem>
<EuiFlexGroup component="span" justifyContent="spaceBetween">
<EuiFlexGroup component="span" justifyContent="spaceBetween" responsive={false}>
<EuiFlexItem component="span" grow={false}>
<EuiCode data-test-subj="field-mapping-source">{securitySolutionField}</EuiCode>
</EuiFlexItem>
Expand All @@ -40,7 +40,7 @@ const FieldMappingRowComponent: React.FC<RowProps> = ({
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup component="span" justifyContent="spaceBetween">
<EuiFlexGroup component="span" justifyContent="spaceBetween" responsive={false}>
<EuiFlexItem component="span" grow={false}>
{isLoading ? (
<EuiLoadingSpinner size="m" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,6 @@ export interface AllCases extends CasesStatus {
export enum SortFieldCase {
createdAt = 'createdAt',
closedAt = 'closedAt',
updatedAt = 'updatedAt',
}

export interface ElasticUser {
Expand Down

0 comments on commit d63a246

Please sign in to comment.