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

[Security Solution][Endpoint] Adjust Host Isolation form to match UI mocks (#102978)

Browse source 
* Change text on form to match mocks
* Switch to using EuiForm ++ EuiFormRow
This commit is contained in:
Paul Tavares 2021-06-22 19:44:09 -04:00 committed by GitHub
parent 859b453752
commit e53da4e3eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/isolate_form.tsx
View file

@ -11,10 +11,10 @@ import {
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiForm,
EuiFormRow,
EuiText,
EuiTextArea,
EuiTitle,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { CANCEL, COMMENT, COMMENT_PLACEHOLDER, CONFIRM } from './translations';
@ -41,56 +41,62 @@ export const EndpointIsolateForm = memo<EndpointIsolatedFormProps>(
);
return (
<>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.securitySolution.endpoint.hostIsolation.isolateThisHost"
defaultMessage="Isolate host {hostName} from network."
values={{ hostName: <b>{hostName}</b> }}
/>{' '}
{messageAppend}
</p>
</EuiText>
<EuiForm>
<EuiFormRow fullWidth>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.securitySolution.endpoint.hostIsolation.isolateThisHost"
defaultMessage="Isolate host {hostName} from network."
values={{ hostName: <b>{hostName}</b> }}
/>
<br />
</p>
<p>
<FormattedMessage
id="xpack.securitySolution.endpoint.hostIsolation.isolateThisHostAbout"
defaultMessage="Isolating a host will disconnect it from the network. The host will only be able to communicate with the Kibana platform."
/>{' '}
{messageAppend}
</p>
</EuiText>
</EuiFormRow>
<EuiSpacer size="m" />
<EuiFormRow label={COMMENT} fullWidth>
<EuiTextArea
data-test-subj="host_isolation_comment"
fullWidth
placeholder={COMMENT_PLACEHOLDER}
value={comment}
onChange={handleCommentChange}
/>
</EuiFormRow>
<EuiTitle size="xs">
<h4>{COMMENT}</h4>
</EuiTitle>
<EuiTextArea
data-test-subj="host_isolation_comment"
fullWidth
placeholder={COMMENT_PLACEHOLDER}
value={comment}
onChange={handleCommentChange}
/>
<EuiSpacer size="m" />
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={onCancel}
disabled={isLoading}
data-test-subj="hostIsolateCancelButton"
>
{CANCEL}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill
onClick={onConfirm}
disabled={isLoading}
isLoading={isLoading}
data-test-subj="hostIsolateConfirmButton"
>
{CONFIRM}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</>
<EuiFormRow fullWidth>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={onCancel}
disabled={isLoading}
data-test-subj="hostIsolateCancelButton"
>
{CANCEL}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill
onClick={onConfirm}
disabled={isLoading}
isLoading={isLoading}
data-test-subj="hostIsolateConfirmButton"
>
{CONFIRM}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
</EuiForm>
);
}
);