From 76d03398fd5e69f306f51bbdc87e354fa0ec4f11 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:29:12 -0400
Subject: [PATCH] [8.11] Fix API Key flyout double submit (#167468) (#168483)

# Backport

This will backport the following commits from `main` to `8.11`:
- [Fix API Key flyout double submit
(#167468)](https://github.com/elastic/kibana/pull/167468)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Sid","email":"siddharthmantri1@gmail.com"},"sourceCommit":{"committedDate":"2023-10-10T14:12:45Z","message":"Fix
API Key flyout double submit (#167468)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/163314\r\n\r\n\r\n##
Fixes\r\n\r\n- Removed an extra EuiPortal that was not needed as
EuiFlyout adds a\r\nPortal\r\n- Inverted control of the form by wrapping
the flyout content in the\r\nform. Prevents multiple submits by using
traditional form controls and\r\nbutton type as submit.\r\n\r\n\r\n##
Release Notes:\r\n\r\n- Fixes issue with multiple API keys being created
if the form is\r\nsubmitted using the enter key fired multiple times in
quick
succession.\r\nhttps://github.com/elastic/kibana/issues/163314\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"e3d9f3d62e403f56b9d3a553338a3c5201edc021","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Security","backport:prev-minor","v8.12.0"],"number":167468,"url":"https://github.com/elastic/kibana/pull/167468","mergeCommit":{"message":"Fix
API Key flyout double submit (#167468)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/163314\r\n\r\n\r\n##
Fixes\r\n\r\n- Removed an extra EuiPortal that was not needed as
EuiFlyout adds a\r\nPortal\r\n- Inverted control of the form by wrapping
the flyout content in the\r\nform. Prevents multiple submits by using
traditional form controls and\r\nbutton type as submit.\r\n\r\n\r\n##
Release Notes:\r\n\r\n- Fixes issue with multiple API keys being created
if the form is\r\nsubmitted using the enter key fired multiple times in
quick
succession.\r\nhttps://github.com/elastic/kibana/issues/163314\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"e3d9f3d62e403f56b9d3a553338a3c5201edc021"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/167468","number":167468,"mergeCommit":{"message":"Fix
API Key flyout double submit (#167468)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/163314\r\n\r\n\r\n##
Fixes\r\n\r\n- Removed an extra EuiPortal that was not needed as
EuiFlyout adds a\r\nPortal\r\n- Inverted control of the form by wrapping
the flyout content in the\r\nform. Prevents multiple submits by using
traditional form controls and\r\nbutton type as submit.\r\n\r\n\r\n##
Release Notes:\r\n\r\n- Fixes issue with multiple API keys being created
if the form is\r\nsubmitted using the enter key fired multiple times in
quick
succession.\r\nhttps://github.com/elastic/kibana/issues/163314\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"e3d9f3d62e403f56b9d3a553338a3c5201edc021"}}]}]
BACKPORT-->

Co-authored-by: Sid <siddharthmantri1@gmail.com>
---
 .../public/components/form_flyout.tsx         | 104 ---
 .../api_keys/api_keys_grid/api_key_flyout.tsx | 851 +++++++++---------
 2 files changed, 444 insertions(+), 511 deletions(-)
 delete mode 100644 x-pack/plugins/security/public/components/form_flyout.tsx

diff --git a/x-pack/plugins/security/public/components/form_flyout.tsx b/x-pack/plugins/security/public/components/form_flyout.tsx
deleted file mode 100644
index 51ab56a11d225..0000000000000
--- a/x-pack/plugins/security/public/components/form_flyout.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import type { EuiButtonProps, EuiFlyoutProps } from '@elastic/eui';
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiFlyoutHeader,
-  EuiPortal,
-  EuiTitle,
-} from '@elastic/eui';
-import type { FunctionComponent, RefObject } from 'react';
-import React, { useEffect } from 'react';
-
-import { FormattedMessage } from '@kbn/i18n-react';
-
-import { useHtmlId } from './use_html_id';
-
-export interface FormFlyoutProps extends Omit<EuiFlyoutProps, 'onClose'> {
-  title: string;
-  initialFocus?: RefObject<HTMLElement>;
-  onCancel(): void;
-  onSubmit(): void;
-  submitButtonText: string;
-  submitButtonColor?: EuiButtonProps['color'];
-  isLoading?: EuiButtonProps['isLoading'];
-  isDisabled?: EuiButtonProps['isDisabled'];
-  isSubmitButtonHidden?: boolean;
-}
-
-export const FormFlyout: FunctionComponent<FormFlyoutProps> = ({
-  title,
-  submitButtonText,
-  submitButtonColor,
-  onCancel,
-  onSubmit,
-  isLoading,
-  isDisabled,
-  isSubmitButtonHidden,
-  children,
-  initialFocus,
-  ...rest
-}) => {
-  useEffect(() => {
-    if (initialFocus && initialFocus.current) {
-      initialFocus.current.focus();
-    }
-  }, [initialFocus]);
-
-  const titleId = useHtmlId('formFlyout', 'title');
-
-  return (
-    <EuiPortal>
-      <EuiFlyout onClose={onCancel} aria-labelledby={titleId} {...rest}>
-        <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="m">
-            <h2 id={titleId}>{title}</h2>
-          </EuiTitle>
-        </EuiFlyoutHeader>
-        <EuiFlyoutBody>{children}</EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                data-test-subj="formFlyoutCancelButton"
-                flush="right"
-                isDisabled={isLoading}
-                onClick={onCancel}
-              >
-                <FormattedMessage
-                  id="xpack.security.formFlyout.cancelButton"
-                  defaultMessage="Cancel"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            {!isSubmitButtonHidden && (
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  data-test-subj="formFlyoutSubmitButton"
-                  isLoading={isLoading}
-                  isDisabled={isDisabled}
-                  color={submitButtonColor}
-                  fill
-                  onClick={onSubmit}
-                >
-                  {submitButtonText}
-                </EuiButton>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        </EuiFlyoutFooter>
-      </EuiFlyout>
-    </EuiPortal>
-  );
-};
diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
index 6d100f2a8261e..b3792941fc6d0 100644
--- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
+++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
@@ -7,11 +7,17 @@
 
 import type { ExclusiveUnion } from '@elastic/eui';
 import {
+  EuiButton,
+  EuiButtonEmpty,
   EuiCallOut,
   EuiCheckableCard,
   EuiFieldNumber,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
   EuiFormFieldset,
   EuiFormRow,
   EuiHorizontalRule,
@@ -36,10 +42,9 @@ import { ApiKeyBadge, ApiKeyStatus, TimeToolTip, UsernameWithIcon } from './api_
 import type { ApiKeyRoleDescriptors } from '../../../../common/model';
 import { DocLink } from '../../../components/doc_link';
 import { FormField } from '../../../components/form_field';
-import type { FormFlyoutProps } from '../../../components/form_flyout';
-import { FormFlyout } from '../../../components/form_flyout';
 import { FormRow } from '../../../components/form_row';
 import { useCurrentUser } from '../../../components/use_current_user';
+import { useHtmlId } from '../../../components/use_html_id';
 import { useInitialFocus } from '../../../components/use_initial_focus';
 import { RolesAPIClient } from '../../roles/roles_api_client';
 import { APIKeysAPIClient } from '../api_keys_api_client';
@@ -64,7 +69,7 @@ export interface ApiKeyFormValues {
 
 interface CommonApiKeyFlyoutProps {
   initialValues?: ApiKeyFormValues;
-  onCancel: FormFlyoutProps['onCancel'];
+  onCancel(): void;
   canManageCrossClusterApiKeys?: boolean;
   readOnly?: boolean;
 }
@@ -175,337 +180,466 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
 
   const firstFieldRef = useInitialFocus<HTMLInputElement>([isLoading]);
 
+  const titleId = useHtmlId('formFlyout', 'title');
+  const isSubmitButtonHidden = readOnly || (apiKey && !canEdit);
+
+  const isSubmitDisabled =
+    isLoading || (formik.submitCount > 0 && !formik.isValid) || readOnly || (apiKey && !canEdit);
+
+  const title = apiKey
+    ? readOnly || !canEdit
+      ? i18n.translate('xpack.security.accountManagement.apiKeyFlyout.viewTitle', {
+          defaultMessage: `API key details`,
+        })
+      : i18n.translate('xpack.security.accountManagement.apiKeyFlyout.updateTitle', {
+          defaultMessage: `Update API key`,
+        })
+    : i18n.translate('xpack.security.accountManagement.apiKeyFlyout.createTitle', {
+        defaultMessage: `Create API key`,
+      });
+
+  const submitButtonText = apiKey
+    ? i18n.translate('xpack.security.accountManagement.apiKeyFlyout.updateSubmitButton', {
+        defaultMessage: `{isSubmitting, select, true{Updating API key…} other{Update API key}}`,
+        values: { isSubmitting: formik.isSubmitting },
+      })
+    : i18n.translate('xpack.security.accountManagement.apiKeyFlyout.createSubmitButton', {
+        defaultMessage: `{isSubmitting, select, true{Creating API key…} other{Create API key}}`,
+        values: { isSubmitting: formik.isSubmitting },
+      });
+
   return (
     <FormikProvider value={formik}>
-      <FormFlyout
-        title={
-          apiKey
-            ? readOnly || !canEdit
-              ? i18n.translate('xpack.security.accountManagement.apiKeyFlyout.viewTitle', {
-                  defaultMessage: `API key details`,
-                })
-              : i18n.translate('xpack.security.accountManagement.apiKeyFlyout.updateTitle', {
-                  defaultMessage: `Update API key`,
-                })
-            : i18n.translate('xpack.security.accountManagement.apiKeyFlyout.createTitle', {
-                defaultMessage: `Create API key`,
-              })
-        }
-        onCancel={onCancel}
-        onSubmit={formik.submitForm}
-        submitButtonText={
-          apiKey
-            ? i18n.translate('xpack.security.accountManagement.apiKeyFlyout.updateSubmitButton', {
-                defaultMessage: `{isSubmitting, select, true{Updating API key…} other{Update API key}}`,
-                values: { isSubmitting: formik.isSubmitting },
-              })
-            : i18n.translate('xpack.security.accountManagement.apiKeyFlyout.createSubmitButton', {
-                defaultMessage: `{isSubmitting, select, true{Creating API key…} other{Create API key}}`,
-                values: { isSubmitting: formik.isSubmitting },
-              })
-        }
-        isLoading={formik.isSubmitting}
-        isDisabled={
-          isLoading ||
-          (formik.submitCount > 0 && !formik.isValid) ||
-          readOnly ||
-          (apiKey && !canEdit)
-        }
-        isSubmitButtonHidden={readOnly || (apiKey && !canEdit)}
-        size="m"
-        ownFocus
-      >
-        <EuiSkeletonText isLoading={isLoading}>
-          {apiKey && !readOnly ? (
-            !isOwner ? (
-              <>
-                <EuiCallOut
-                  iconType="lock"
-                  title={
-                    <FormattedMessage
-                      id="xpack.security.accountManagement.apiKeyFlyout.readonlyOwnedByOtherUserWarning"
-                      defaultMessage="You cannot update this API key, since it is owned by another user."
-                    />
-                  }
-                />
-                <EuiSpacer />
-              </>
-            ) : hasExpired ? (
-              <>
-                <EuiCallOut
-                  iconType="lock"
-                  title={
-                    <FormattedMessage
-                      id="xpack.security.accountManagement.apiKeyFlyout.readonlyExpiredWarning"
-                      defaultMessage="You cannot update this API key, since it has already expired."
-                    />
-                  }
-                />
-                <EuiSpacer />
-              </>
-            ) : null
-          ) : null}
-
-          <Form>
-            <FormRow
-              label={
-                <FormattedMessage
-                  id="xpack.security.accountManagement.apiKeyFlyout.nameLabel"
-                  defaultMessage="Name"
-                />
-              }
-              fullWidth
-            >
-              <FormField
-                name="name"
-                inputRef={firstFieldRef}
-                data-test-subj="apiKeyNameInput"
-                disabled={readOnly || !!apiKey}
-                validate={{
-                  required: i18n.translate(
-                    'xpack.security.management.apiKeys.apiKeyFlyout.nameRequired',
-                    {
-                      defaultMessage: 'Enter a name.',
-                    }
-                  ),
-                }}
-                fullWidth
-              />
-            </FormRow>
-
-            {apiKey ? (
-              <>
-                <EuiSpacer />
-                <EuiFlexGroup gutterSize="xl">
-                  <EuiFlexItem grow={false}>
-                    <EuiFormRow
-                      label={
-                        <FormattedMessage
-                          id="xpack.security.accountManagement.apiKeyFlyout.typeLabel"
-                          defaultMessage="Type"
-                        />
-                      }
-                    >
-                      <ApiKeyBadge type={apiKey.type} />
-                    </EuiFormRow>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiFormRow
-                      label={
-                        <FormattedMessage
-                          id="xpack.security.accountManagement.apiKeyFlyout.ownerLabel"
-                          defaultMessage="Owner"
-                        />
-                      }
-                    >
-                      <UsernameWithIcon username={apiKey.username} />
-                    </EuiFormRow>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiFormRow
-                      label={
+      <EuiFlyout onClose={onCancel} aria-labelledby={titleId} size="m" ownFocus>
+        <Form
+          onSubmit={formik.handleSubmit}
+          style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
+        >
+          <EuiFlyoutHeader hasBorder>
+            <EuiTitle size="m">
+              <h2 id={titleId}>{title}</h2>
+            </EuiTitle>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+            <EuiSkeletonText isLoading={isLoading}>
+              {apiKey && !readOnly ? (
+                !isOwner ? (
+                  <>
+                    <EuiCallOut
+                      iconType="lock"
+                      title={
                         <FormattedMessage
-                          id="xpack.security.accountManagement.apiKeyFlyout.createdLabel"
-                          defaultMessage="Created"
+                          id="xpack.security.accountManagement.apiKeyFlyout.readonlyOwnedByOtherUserWarning"
+                          defaultMessage="You cannot update this API key, since it is owned by another user."
                         />
                       }
-                    >
-                      <TimeToolTip timestamp={apiKey.creation} />
-                    </EuiFormRow>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiFormRow
-                      label={
+                    />
+                    <EuiSpacer />
+                  </>
+                ) : hasExpired ? (
+                  <>
+                    <EuiCallOut
+                      iconType="lock"
+                      title={
                         <FormattedMessage
-                          id="xpack.security.accountManagement.apiKeyFlyout.statusLabel"
-                          defaultMessage="Status"
+                          id="xpack.security.accountManagement.apiKeyFlyout.readonlyExpiredWarning"
+                          defaultMessage="You cannot update this API key, since it has already expired."
                         />
                       }
-                    >
-                      <ApiKeyStatus expiration={apiKey.expiration} />
-                    </EuiFormRow>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </>
-            ) : canManageCrossClusterApiKeys ? (
+                    />
+                    <EuiSpacer />
+                  </>
+                ) : null
+              ) : null}
+
               <FormRow
-                name="type"
                 label={
                   <FormattedMessage
-                    id="xpack.security.accountManagement.apiKeyFlyout.typeLabel"
-                    defaultMessage="Type"
+                    id="xpack.security.accountManagement.apiKeyFlyout.nameLabel"
+                    defaultMessage="Name"
                   />
                 }
                 fullWidth
               >
-                <EuiFlexGroup gutterSize="m">
-                  <EuiFlexItem>
-                    <EuiCheckableCard
-                      id="rest"
-                      label={
-                        <>
-                          <EuiTitle size="xxs">
-                            <h2>
-                              <FormattedMessage
-                                id="xpack.security.accountManagement.apiKeyFlyout.restTypeLabel"
-                                defaultMessage="Personal API key"
-                              />
-                            </h2>
-                          </EuiTitle>
-                          <EuiSpacer size="xs" />
-                          <EuiText size="s">
-                            <FormattedMessage
-                              id="xpack.security.accountManagement.apiKeyFlyout.restTypeDescription"
-                              defaultMessage="Allow external services to access the Elastic Stack on your behalf."
-                            />
-                          </EuiText>
-                        </>
+                <FormField
+                  name="name"
+                  inputRef={firstFieldRef}
+                  data-test-subj="apiKeyNameInput"
+                  disabled={readOnly || !!apiKey}
+                  validate={{
+                    required: i18n.translate(
+                      'xpack.security.management.apiKeys.apiKeyFlyout.nameRequired',
+                      {
+                        defaultMessage: 'Enter a name.',
                       }
-                      onChange={() => formik.setFieldValue('type', 'rest')}
-                      checked={formik.values.type === 'rest'}
+                    ),
+                  }}
+                  fullWidth
+                />
+              </FormRow>
+
+              {apiKey ? (
+                <>
+                  <EuiSpacer />
+                  <EuiFlexGroup gutterSize="xl">
+                    <EuiFlexItem grow={false}>
+                      <EuiFormRow
+                        label={
+                          <FormattedMessage
+                            id="xpack.security.accountManagement.apiKeyFlyout.typeLabel"
+                            defaultMessage="Type"
+                          />
+                        }
+                      >
+                        <ApiKeyBadge type={apiKey.type} />
+                      </EuiFormRow>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiFormRow
+                        label={
+                          <FormattedMessage
+                            id="xpack.security.accountManagement.apiKeyFlyout.ownerLabel"
+                            defaultMessage="Owner"
+                          />
+                        }
+                      >
+                        <UsernameWithIcon username={apiKey.username} />
+                      </EuiFormRow>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiFormRow
+                        label={
+                          <FormattedMessage
+                            id="xpack.security.accountManagement.apiKeyFlyout.createdLabel"
+                            defaultMessage="Created"
+                          />
+                        }
+                      >
+                        <TimeToolTip timestamp={apiKey.creation} />
+                      </EuiFormRow>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiFormRow
+                        label={
+                          <FormattedMessage
+                            id="xpack.security.accountManagement.apiKeyFlyout.statusLabel"
+                            defaultMessage="Status"
+                          />
+                        }
+                      >
+                        <ApiKeyStatus expiration={apiKey.expiration} />
+                      </EuiFormRow>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </>
+              ) : canManageCrossClusterApiKeys ? (
+                <FormRow
+                  name="type"
+                  label={
+                    <FormattedMessage
+                      id="xpack.security.accountManagement.apiKeyFlyout.typeLabel"
+                      defaultMessage="Type"
                     />
-                  </EuiFlexItem>
-                  <EuiFlexItem>
-                    <EuiCheckableCard
-                      id="cross_cluster"
-                      label={
-                        <>
-                          <EuiTitle size="xxs">
-                            <h2>
+                  }
+                  fullWidth
+                >
+                  <EuiFlexGroup gutterSize="m">
+                    <EuiFlexItem>
+                      <EuiCheckableCard
+                        id="rest"
+                        label={
+                          <>
+                            <EuiTitle size="xxs">
+                              <h2>
+                                <FormattedMessage
+                                  id="xpack.security.accountManagement.apiKeyFlyout.restTypeLabel"
+                                  defaultMessage="Personal API key"
+                                />
+                              </h2>
+                            </EuiTitle>
+                            <EuiSpacer size="xs" />
+                            <EuiText size="s">
                               <FormattedMessage
-                                id="xpack.security.accountManagement.apiKeyFlyout.crossClusterTypeLabel"
-                                defaultMessage="Cross-Cluster API key"
+                                id="xpack.security.accountManagement.apiKeyFlyout.restTypeDescription"
+                                defaultMessage="Allow external services to access the Elastic Stack on your behalf."
                               />
-                            </h2>
-                          </EuiTitle>
-                          <EuiSpacer size="xs" />
-                          <EuiText size="s">
-                            <FormattedMessage
-                              id="xpack.security.accountManagement.apiKeyFlyout.crossClusterTypeDescription"
-                              defaultMessage="Allow remote clusters to connect to your local cluster."
-                            />
-                          </EuiText>
-                        </>
-                      }
-                      onChange={() => formik.setFieldValue('type', 'cross_cluster')}
-                      checked={formik.values.type === 'cross_cluster'}
+                            </EuiText>
+                          </>
+                        }
+                        onChange={() => formik.setFieldValue('type', 'rest')}
+                        checked={formik.values.type === 'rest'}
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <EuiCheckableCard
+                        id="cross_cluster"
+                        label={
+                          <>
+                            <EuiTitle size="xxs">
+                              <h2>
+                                <FormattedMessage
+                                  id="xpack.security.accountManagement.apiKeyFlyout.crossClusterTypeLabel"
+                                  defaultMessage="Cross-Cluster API key"
+                                />
+                              </h2>
+                            </EuiTitle>
+                            <EuiSpacer size="xs" />
+                            <EuiText size="s">
+                              <FormattedMessage
+                                id="xpack.security.accountManagement.apiKeyFlyout.crossClusterTypeDescription"
+                                defaultMessage="Allow remote clusters to connect to your local cluster."
+                              />
+                            </EuiText>
+                          </>
+                        }
+                        onChange={() => formik.setFieldValue('type', 'cross_cluster')}
+                        checked={formik.values.type === 'cross_cluster'}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </FormRow>
+              ) : (
+                <EuiFormRow
+                  label={
+                    <FormattedMessage
+                      id="xpack.security.accountManagement.apiKeyFlyout.typeLabel"
+                      defaultMessage="Type"
                     />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </FormRow>
-            ) : (
-              <EuiFormRow
-                label={
-                  <FormattedMessage
-                    id="xpack.security.accountManagement.apiKeyFlyout.typeLabel"
-                    defaultMessage="Type"
-                  />
-                }
-              >
-                <ApiKeyBadge type="rest" />
-              </EuiFormRow>
-            )}
-            <EuiHorizontalRule />
+                  }
+                >
+                  <ApiKeyBadge type="rest" />
+                </EuiFormRow>
+              )}
+              <EuiHorizontalRule />
 
-            {formik.values.type === 'cross_cluster' ? (
-              <FormRow
-                data-test-subj="apiKeysAccessCodeEditor"
-                label={
-                  <FormattedMessage
-                    id="xpack.security.accountManagement.apiKeyFlyout.accessLabel"
-                    defaultMessage="Access"
-                  />
-                }
-                helpText={
-                  <DocLink
-                    app="elasticsearch"
-                    doc="security-api-create-cross-cluster-api-key.html#security-api-create-cross-cluster-api-key-request-body"
-                  >
+              {formik.values.type === 'cross_cluster' ? (
+                <FormRow
+                  data-test-subj="apiKeysAccessCodeEditor"
+                  label={
                     <FormattedMessage
-                      id="xpack.security.accountManagement.apiKeyFlyout.accessHelpText"
-                      defaultMessage="Learn how to structure access permissions."
+                      id="xpack.security.accountManagement.apiKeyFlyout.accessLabel"
+                      defaultMessage="Access"
                     />
-                  </DocLink>
-                }
-                fullWidth
-              >
-                <FormField
-                  as={CodeEditorField}
-                  name="access"
-                  value={formik.values.access}
-                  options={{ readOnly: readOnly || (apiKey && !canEdit) }}
-                  onChange={(value: string) => formik.setFieldValue('access', value)}
-                  validate={(value: string) => {
-                    if (!value) {
-                      return i18n.translate(
-                        'xpack.security.management.apiKeys.apiKeyFlyout.accessRequired',
-                        {
-                          defaultMessage: 'Enter access permissions or disable this option.',
-                        }
-                      );
+                  }
+                  helpText={
+                    <DocLink
+                      app="elasticsearch"
+                      doc="security-api-create-cross-cluster-api-key.html#security-api-create-cross-cluster-api-key-request-body"
+                    >
+                      <FormattedMessage
+                        id="xpack.security.accountManagement.apiKeyFlyout.accessHelpText"
+                        defaultMessage="Learn how to structure access permissions."
+                      />
+                    </DocLink>
+                  }
+                  fullWidth
+                >
+                  <FormField
+                    as={CodeEditorField}
+                    name="access"
+                    value={formik.values.access}
+                    options={{ readOnly: readOnly || (apiKey && !canEdit) }}
+                    onChange={(value: string) => formik.setFieldValue('access', value)}
+                    validate={(value: string) => {
+                      if (!value) {
+                        return i18n.translate(
+                          'xpack.security.management.apiKeys.apiKeyFlyout.accessRequired',
+                          {
+                            defaultMessage: 'Enter access permissions or disable this option.',
+                          }
+                        );
+                      }
+                      try {
+                        JSON.parse(value);
+                      } catch (e) {
+                        return i18n.translate(
+                          'xpack.security.management.apiKeys.apiKeyFlyout.invalidJsonError',
+                          {
+                            defaultMessage: 'Enter valid JSON.',
+                          }
+                        );
+                      }
+                    }}
+                    fullWidth
+                    languageId="xjson"
+                    height={200}
+                  />
+                </FormRow>
+              ) : (
+                <EuiFormFieldset>
+                  <EuiSwitch
+                    label={
+                      <FormattedMessage
+                        id="xpack.security.accountManagement.apiKeyFlyout.customPrivilegesLabel"
+                        defaultMessage="Restrict privileges"
+                      />
                     }
-                    try {
-                      JSON.parse(value);
-                    } catch (e) {
-                      return i18n.translate(
-                        'xpack.security.management.apiKeys.apiKeyFlyout.invalidJsonError',
-                        {
-                          defaultMessage: 'Enter valid JSON.',
+                    checked={formik.values.customPrivileges}
+                    data-test-subj="apiKeysRoleDescriptorsSwitch"
+                    onChange={(e) => formik.setFieldValue('customPrivileges', e.target.checked)}
+                    disabled={readOnly || (apiKey && !canEdit)}
+                  />
+                  {formik.values.customPrivileges && (
+                    <>
+                      <EuiSpacer size="m" />
+                      <FormRow
+                        helpText={
+                          <DocLink
+                            app="elasticsearch"
+                            doc="security-api-create-api-key.html#security-api-create-api-key-request-body"
+                          >
+                            <FormattedMessage
+                              id="xpack.security.accountManagement.apiKeyFlyout.roleDescriptorsHelpText"
+                              defaultMessage="Learn how to structure role descriptors."
+                            />
+                          </DocLink>
                         }
-                      );
-                    }
-                  }}
-                  fullWidth
-                  languageId="xjson"
-                  height={200}
-                />
-              </FormRow>
-            ) : (
+                        fullWidth
+                        data-test-subj="apiKeysRoleDescriptorsCodeEditor"
+                      >
+                        <FormField
+                          as={CodeEditorField}
+                          name="role_descriptors"
+                          value={formik.values.role_descriptors}
+                          options={{ readOnly: readOnly || (apiKey && !canEdit) }}
+                          onChange={(value: string) =>
+                            formik.setFieldValue('role_descriptors', value)
+                          }
+                          validate={(value: string) => {
+                            if (!value) {
+                              return i18n.translate(
+                                'xpack.security.management.apiKeys.apiKeyFlyout.roleDescriptorsRequired',
+                                {
+                                  defaultMessage: 'Enter role descriptors or disable this option.',
+                                }
+                              );
+                            }
+                            try {
+                              JSON.parse(value);
+                            } catch (e) {
+                              return i18n.translate(
+                                'xpack.security.management.apiKeys.apiKeyFlyout.invalidJsonError',
+                                {
+                                  defaultMessage: 'Enter valid JSON.',
+                                }
+                              );
+                            }
+                          }}
+                          fullWidth
+                          languageId="xjson"
+                          height={200}
+                        />
+                      </FormRow>
+                      <EuiSpacer size="s" />
+                    </>
+                  )}
+                </EuiFormFieldset>
+              )}
+
+              {!apiKey && (
+                <>
+                  <EuiSpacer />
+                  <EuiFormFieldset>
+                    <EuiSwitch
+                      label={
+                        <FormattedMessage
+                          id="xpack.security.accountManagement.apiKeyFlyout.customExpirationLabel"
+                          defaultMessage="Expire after time"
+                        />
+                      }
+                      checked={formik.values.customExpiration}
+                      onChange={(e) => formik.setFieldValue('customExpiration', e.target.checked)}
+                      disabled={readOnly || !!apiKey}
+                      data-test-subj="apiKeyCustomExpirationSwitch"
+                    />
+                    {formik.values.customExpiration && (
+                      <>
+                        <EuiSpacer size="m" />
+                        <FormRow
+                          label={
+                            <FormattedMessage
+                              id="xpack.security.accountManagement.apiKeyFlyout.customExpirationInputLabel"
+                              defaultMessage="Lifetime"
+                            />
+                          }
+                          fullWidth
+                        >
+                          <FormField
+                            as={EuiFieldNumber}
+                            name="expiration"
+                            min={0}
+                            append={i18n.translate(
+                              'xpack.security.accountManagement.apiKeyFlyout.expirationUnit',
+                              {
+                                defaultMessage: 'days',
+                              }
+                            )}
+                            validate={{
+                              min: {
+                                value: 1,
+                                message: i18n.translate(
+                                  'xpack.security.management.apiKeys.apiKeyFlyout.expirationRequired',
+                                  {
+                                    defaultMessage:
+                                      'Enter a valid duration or disable this option.',
+                                  }
+                                ),
+                              },
+                            }}
+                            disabled={readOnly || !!apiKey}
+                            data-test-subj="apiKeyCustomExpirationInput"
+                          />
+                        </FormRow>
+                        <EuiSpacer size="s" />
+                      </>
+                    )}
+                  </EuiFormFieldset>
+                </>
+              )}
+              <EuiSpacer />
               <EuiFormFieldset>
                 <EuiSwitch
                   label={
                     <FormattedMessage
-                      id="xpack.security.accountManagement.apiKeyFlyout.customPrivilegesLabel"
-                      defaultMessage="Restrict privileges"
+                      id="xpack.security.accountManagement.apiKeyFlyout.includeMetadataLabel"
+                      defaultMessage="Include metadata"
                     />
                   }
-                  checked={formik.values.customPrivileges}
-                  data-test-subj="apiKeysRoleDescriptorsSwitch"
-                  onChange={(e) => formik.setFieldValue('customPrivileges', e.target.checked)}
+                  data-test-subj="apiKeysMetadataSwitch"
+                  checked={formik.values.includeMetadata}
                   disabled={readOnly || (apiKey && !canEdit)}
+                  onChange={(e) => formik.setFieldValue('includeMetadata', e.target.checked)}
                 />
-                {formik.values.customPrivileges && (
+                {formik.values.includeMetadata && (
                   <>
                     <EuiSpacer size="m" />
                     <FormRow
+                      data-test-subj="apiKeysMetadataCodeEditor"
                       helpText={
                         <DocLink
                           app="elasticsearch"
                           doc="security-api-create-api-key.html#security-api-create-api-key-request-body"
                         >
                           <FormattedMessage
-                            id="xpack.security.accountManagement.apiKeyFlyout.roleDescriptorsHelpText"
-                            defaultMessage="Learn how to structure role descriptors."
+                            id="xpack.security.accountManagement.apiKeyFlyout.metadataHelpText"
+                            defaultMessage="Learn how to structure metadata."
                           />
                         </DocLink>
                       }
                       fullWidth
-                      data-test-subj="apiKeysRoleDescriptorsCodeEditor"
                     >
                       <FormField
                         as={CodeEditorField}
-                        name="role_descriptors"
-                        value={formik.values.role_descriptors}
+                        name="metadata"
                         options={{ readOnly: readOnly || (apiKey && !canEdit) }}
-                        onChange={(value: string) =>
-                          formik.setFieldValue('role_descriptors', value)
-                        }
+                        value={formik.values.metadata}
+                        onChange={(value: string) => formik.setFieldValue('metadata', value)}
                         validate={(value: string) => {
                           if (!value) {
                             return i18n.translate(
-                              'xpack.security.management.apiKeys.apiKeyFlyout.roleDescriptorsRequired',
+                              'xpack.security.management.apiKeys.apiKeyFlyout.metadataRequired',
                               {
-                                defaultMessage: 'Enter role descriptors or disable this option.',
+                                defaultMessage: 'Enter metadata or disable this option.',
                               }
                             );
                           }
@@ -529,137 +663,40 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                   </>
                 )}
               </EuiFormFieldset>
-            )}
-
-            {!apiKey && (
-              <>
-                <EuiSpacer />
-                <EuiFormFieldset>
-                  <EuiSwitch
-                    label={
-                      <FormattedMessage
-                        id="xpack.security.accountManagement.apiKeyFlyout.customExpirationLabel"
-                        defaultMessage="Expire after time"
-                      />
-                    }
-                    checked={formik.values.customExpiration}
-                    onChange={(e) => formik.setFieldValue('customExpiration', e.target.checked)}
-                    disabled={readOnly || !!apiKey}
-                    data-test-subj="apiKeyCustomExpirationSwitch"
-                  />
-                  {formik.values.customExpiration && (
-                    <>
-                      <EuiSpacer size="m" />
-                      <FormRow
-                        label={
-                          <FormattedMessage
-                            id="xpack.security.accountManagement.apiKeyFlyout.customExpirationInputLabel"
-                            defaultMessage="Lifetime"
-                          />
-                        }
-                        fullWidth
-                      >
-                        <FormField
-                          as={EuiFieldNumber}
-                          name="expiration"
-                          min={0}
-                          append={i18n.translate(
-                            'xpack.security.accountManagement.apiKeyFlyout.expirationUnit',
-                            {
-                              defaultMessage: 'days',
-                            }
-                          )}
-                          validate={{
-                            min: {
-                              value: 1,
-                              message: i18n.translate(
-                                'xpack.security.management.apiKeys.apiKeyFlyout.expirationRequired',
-                                {
-                                  defaultMessage: 'Enter a valid duration or disable this option.',
-                                }
-                              ),
-                            },
-                          }}
-                          disabled={readOnly || !!apiKey}
-                          data-test-subj="apiKeyCustomExpirationInput"
-                        />
-                      </FormRow>
-                      <EuiSpacer size="s" />
-                    </>
-                  )}
-                </EuiFormFieldset>
-              </>
-            )}
-            <EuiSpacer />
-            <EuiFormFieldset>
-              <EuiSwitch
-                label={
+            </EuiSkeletonText>
+          </EuiFlyoutBody>
+          <EuiFlyoutFooter>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  data-test-subj="formFlyoutCancelButton"
+                  flush="right"
+                  isDisabled={isLoading}
+                  onClick={onCancel}
+                >
                   <FormattedMessage
-                    id="xpack.security.accountManagement.apiKeyFlyout.includeMetadataLabel"
-                    defaultMessage="Include metadata"
+                    id="xpack.security.formFlyout.cancelButton"
+                    defaultMessage="Cancel"
                   />
-                }
-                data-test-subj="apiKeysMetadataSwitch"
-                checked={formik.values.includeMetadata}
-                disabled={readOnly || (apiKey && !canEdit)}
-                onChange={(e) => formik.setFieldValue('includeMetadata', e.target.checked)}
-              />
-              {formik.values.includeMetadata && (
-                <>
-                  <EuiSpacer size="m" />
-                  <FormRow
-                    data-test-subj="apiKeysMetadataCodeEditor"
-                    helpText={
-                      <DocLink
-                        app="elasticsearch"
-                        doc="security-api-create-api-key.html#security-api-create-api-key-request-body"
-                      >
-                        <FormattedMessage
-                          id="xpack.security.accountManagement.apiKeyFlyout.metadataHelpText"
-                          defaultMessage="Learn how to structure metadata."
-                        />
-                      </DocLink>
-                    }
-                    fullWidth
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              {!isSubmitButtonHidden && (
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    data-test-subj="formFlyoutSubmitButton"
+                    isLoading={formik.isSubmitting}
+                    isDisabled={isSubmitDisabled}
+                    fill
+                    type="submit"
                   >
-                    <FormField
-                      as={CodeEditorField}
-                      name="metadata"
-                      options={{ readOnly: readOnly || (apiKey && !canEdit) }}
-                      value={formik.values.metadata}
-                      onChange={(value: string) => formik.setFieldValue('metadata', value)}
-                      validate={(value: string) => {
-                        if (!value) {
-                          return i18n.translate(
-                            'xpack.security.management.apiKeys.apiKeyFlyout.metadataRequired',
-                            {
-                              defaultMessage: 'Enter metadata or disable this option.',
-                            }
-                          );
-                        }
-                        try {
-                          JSON.parse(value);
-                        } catch (e) {
-                          return i18n.translate(
-                            'xpack.security.management.apiKeys.apiKeyFlyout.invalidJsonError',
-                            {
-                              defaultMessage: 'Enter valid JSON.',
-                            }
-                          );
-                        }
-                      }}
-                      fullWidth
-                      languageId="xjson"
-                      height={200}
-                    />
-                  </FormRow>
-                  <EuiSpacer size="s" />
-                </>
+                    {submitButtonText}
+                  </EuiButton>
+                </EuiFlexItem>
               )}
-            </EuiFormFieldset>
-          </Form>
-        </EuiSkeletonText>
-      </FormFlyout>
+            </EuiFlexGroup>
+          </EuiFlyoutFooter>
+        </Form>
+      </EuiFlyout>
     </FormikProvider>
   );
 };