Change un-isolate form to use EuiForm and EuiFormRow

elastic · Jul 19, 2021 · cbd1d05 · cbd1d05
1 parent c957d26
commit cbd1d05
Showing 1 changed file with 43 additions and 44 deletions.
diff --git a/...ins/security_solution/public/common/components/endpoint/host_isolation/unisolate_form.tsx b/...ins/security_solution/public/common/components/endpoint/host_isolation/unisolate_form.tsx
@@ -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, UNISOLATE, ISOLATED } from './translations';
@@ -30,50 +30,49 @@ export const EndpointUnisolateForm = memo<EndpointIsolatedFormProps>(
     );
 
     return (
-      <>
-        <EuiText size="s">
-          <p>
-            <FormattedMessage
-              id="xpack.securitySolution.endpoint.hostIsolation.unIsolateThisHost"
-              defaultMessage="{hostName} is currently {isolated}. Are you sure you want to {unisolate} this host?"
-              values={{
-                hostName: <b>{hostName}</b>,
-                isolated: <b>{ISOLATED}</b>,
-                unisolate: <b>{UNISOLATE}</b>,
-              }}
-            />{' '}
-            {messageAppend}
-          </p>
-        </EuiText>
+      <EuiForm>
+        <EuiFormRow fullWidth>
+          <EuiText size="s">
+            <p>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.hostIsolation.unIsolateThisHost"
+                defaultMessage="{hostName} is currently {isolated}. Are you sure you want to {unisolate} this host?"
+                values={{
+                  hostName: <b>{hostName}</b>,
+                  isolated: <b>{ISOLATED}</b>,
+                  unisolate: <b>{UNISOLATE}</b>,
+                }}
+              />{' '}
+              {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}>
-              {CANCEL}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={onConfirm} disabled={isLoading} isLoading={isLoading}>
-              {CONFIRM}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </>
+        <EuiFormRow fullWidth>
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty onClick={onCancel} disabled={isLoading}>
+                {CANCEL}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton fill onClick={onConfirm} disabled={isLoading} isLoading={isLoading}>
+                {CONFIRM}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFormRow>
+      </EuiForm>
     );
   }
 );