[Security Solution] UX fixes for Policy page and Case Host Isolation comment (#106027)
* [Security Solution] UX fixes for Policy page and Case Host Isolation comment
This commit is contained in:
parent
ebc02741b3
commit
7101c42bec
|
@ -5,9 +5,17 @@
|
||||||
* 2.0.
|
* 2.0.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiCommentProps } from '@elastic/eui';
|
import {
|
||||||
import React from 'react';
|
EuiFlexGroup,
|
||||||
|
EuiFlexItem,
|
||||||
|
EuiIcon,
|
||||||
|
EuiLink,
|
||||||
|
EuiCommentProps,
|
||||||
|
EuiToken,
|
||||||
|
} from '@elastic/eui';
|
||||||
|
import React, { useContext } from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
import { ThemeContext } from 'styled-components';
|
||||||
import {
|
import {
|
||||||
CaseFullExternalService,
|
CaseFullExternalService,
|
||||||
ActionConnector,
|
ActionConnector,
|
||||||
|
@ -37,6 +45,7 @@ interface LabelTitle {
|
||||||
action: CaseUserActions;
|
action: CaseUserActions;
|
||||||
field: string;
|
field: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type RuleDetailsNavigation = CasesNavigation<string | null | undefined, 'configurable'>;
|
export type RuleDetailsNavigation = CasesNavigation<string | null | undefined, 'configurable'>;
|
||||||
|
|
||||||
export type ActionsNavigation = CasesNavigation<string, 'configurable'>;
|
export type ActionsNavigation = CasesNavigation<string, 'configurable'>;
|
||||||
|
@ -365,6 +374,22 @@ export const getGeneratedAlertsAttachment = ({
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const ActionIcon = React.memo<{
|
||||||
|
actionType: string;
|
||||||
|
}>(({ actionType }) => {
|
||||||
|
const theme = useContext(ThemeContext);
|
||||||
|
return (
|
||||||
|
<EuiToken
|
||||||
|
style={{ marginTop: '8px' }}
|
||||||
|
iconType={actionType === 'isolate' ? 'lock' : 'lockOpen'}
|
||||||
|
size="m"
|
||||||
|
shape="circle"
|
||||||
|
color={theme.eui.euiColorLightestShade}
|
||||||
|
data-test-subj="endpoint-action-icon"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
export const getActionAttachment = ({
|
export const getActionAttachment = ({
|
||||||
comment,
|
comment,
|
||||||
userCanCrud,
|
userCanCrud,
|
||||||
|
@ -397,7 +422,7 @@ export const getActionAttachment = ({
|
||||||
),
|
),
|
||||||
'data-test-subj': 'endpoint-action',
|
'data-test-subj': 'endpoint-action',
|
||||||
timestamp: <UserActionTimestamp createdAt={action.actionAt} />,
|
timestamp: <UserActionTimestamp createdAt={action.actionAt} />,
|
||||||
timelineIcon: comment.actions.type === 'isolate' ? 'lock' : 'lockOpen',
|
timelineIcon: <ActionIcon actionType={comment.actions.type} />,
|
||||||
actions: (
|
actions: (
|
||||||
<UserActionCopyLink
|
<UserActionCopyLink
|
||||||
id={comment.id}
|
id={comment.id}
|
||||||
|
|
|
@ -429,7 +429,7 @@ describe(`UserActionTree`, () => {
|
||||||
);
|
);
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(
|
expect(
|
||||||
wrapper.find(`[data-test-subj="endpoint-action"]`).first().prop('timelineIcon')
|
wrapper.find(`[data-test-subj="endpoint-action-icon"]`).first().prop('iconType')
|
||||||
).toBe('lock');
|
).toBe('lock');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -448,7 +448,7 @@ describe(`UserActionTree`, () => {
|
||||||
);
|
);
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(
|
expect(
|
||||||
wrapper.find(`[data-test-subj="endpoint-action"]`).first().prop('timelineIcon')
|
wrapper.find(`[data-test-subj="endpoint-action-icon"]`).first().prop('iconType')
|
||||||
).toBe('lockOpen');
|
).toBe('lockOpen');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -48,7 +48,6 @@ import { PolicyDetailsForm } from './policy_details_form';
|
||||||
const maxFormWidth = '770px';
|
const maxFormWidth = '770px';
|
||||||
const PolicyDetailsHeader = styled.div`
|
const PolicyDetailsHeader = styled.div`
|
||||||
padding: ${(props) => props.theme.eui.paddingSizes.xl} 0;
|
padding: ${(props) => props.theme.eui.paddingSizes.xl} 0;
|
||||||
background-color: #fafbfd;
|
|
||||||
border-bottom: 1px solid #d3dae6;
|
border-bottom: 1px solid #d3dae6;
|
||||||
.securitySolutionHeaderPage {
|
.securitySolutionHeaderPage {
|
||||||
max-width: ${maxFormWidth};
|
max-width: ${maxFormWidth};
|
||||||
|
|
Loading…
Reference in a new issue