Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix API Key flyout double submit #167468

Merged
merged 18 commits into from
Oct 10, 2023
Merged

Fix API Key flyout double submit #167468

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
096e58e
experiment with eui focus trap
SiddharthMantri Sep 27, 2023
df84d09
add prop to manage custom onBlur behavior
SiddharthMantri Sep 28, 2023
b78ddd1
Merge branch 'main' into bug-fix-api-key-tabbing
SiddharthMantri Sep 28, 2023
21ac5ce
Merge branch 'main' into bug-fix-api-key-tabbing
SiddharthMantri Sep 28, 2023
b738ab3
hacky fix for multiple enters on api key name input
SiddharthMantri Sep 28, 2023
7ad56a1
Merge branch 'main' into bug-fix-api-key-tabbing
SiddharthMantri Sep 28, 2023
bedbf64
use form onSubmit and isSubmitting instead of onKeyDown
SiddharthMantri Sep 28, 2023
d21c2cc
Merge branch 'main' into bug-fix-api-key-tabbing
SiddharthMantri Sep 29, 2023
8d471db
Merge branch 'main' into bug-fix-api-key-tabbing
SiddharthMantri Oct 2, 2023
400a957
remove unused code
SiddharthMantri Oct 2, 2023
1d6ec5e
remove whitespace
SiddharthMantri Oct 2, 2023
a4603e4
Merge branch 'main' into bug-fix-api-key-tabbing
SiddharthMantri Oct 5, 2023
60a33d1
revert formfield changes and invert form control and EUI flyout
SiddharthMantri Oct 6, 2023
a602ec7
[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…
kibanamachine Oct 6, 2023
61405ae
Fix form wrapper css for Flyout
SiddharthMantri Oct 6, 2023
92c35ec
Merge branch 'main' into bug-fix-api-key-tabbing
SiddharthMantri Oct 6, 2023
cc0901c
Merge branch 'main' into bug-fix-api-key-tabbing
SiddharthMantri Oct 6, 2023
0007558
remove unused FormFlyout component
SiddharthMantri Oct 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 36 additions & 39 deletions x-pack/plugins/security/public/components/form_flyout.tsx
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think there's another consumer of the FormFlyout component anymore so it would be best to remove it from the codebase

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thomheymann Thanks for confirming, Thom!

@SiddharthMantri Looks like it's used in the 7.17 branch. So if we have the double submit issue in 7.17 and it's worth fixing, we can open a PR against that branch with the changes to FormFlyout.

Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
EuiFlyoutBody,
EuiFlyoutFooter,
EuiFlyoutHeader,
EuiPortal,
EuiTitle,
} from '@elastic/eui';
import type { FunctionComponent, RefObject } from 'react';
Expand Down Expand Up @@ -59,46 +58,44 @@ export const FormFlyout: FunctionComponent<FormFlyoutProps> = ({
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">
<EuiFlyout onClose={onCancel} aria-labelledby={titleId} {...rest}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these changes necessary? Does api_key_flyout use FormFlyout? Or is this to just keep things consistent?
Note: I couldn't find any uses of FormFlyout.

<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}>
<EuiButtonEmpty
data-test-subj="formFlyoutCancelButton"
flush="right"
isDisabled={isLoading}
onClick={onCancel}
<EuiButton
data-test-subj="formFlyoutSubmitButton"
isLoading={isLoading}
isDisabled={isDisabled}
color={submitButtonColor}
fill
onClick={onSubmit}
>
<FormattedMessage
id="xpack.security.formFlyout.cancelButton"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
{submitButtonText}
</EuiButton>
</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>
)}
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
);
};
Loading