github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Actions] Fix create flyout buttons (#137063)

Browse source 
* Fix bug

* Improve prop
This commit is contained in:
Christos Nasikas 2022-07-25 17:54:17 +03:00 • committed by GitHub
parent 277201e7e2
commit a1e33569f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

64
x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/create_connector_flyout/footer.tsx
View file

@ -19,7 +19,7 @@ import { i18n } from '@kbn/i18n';
interface Props {
isSaving: boolean;
disabled: boolean;
buttonType: 'back' | 'cancel';
hasConnectorTypeSelected: boolean;
onSubmit: () => Promise<void>;
onTestConnector?: () => void;
onBack: () => void;
@ -29,7 +29,7 @@ interface Props {
const FlyoutFooterComponent: React.FC<Props> = ({
isSaving,
disabled,
buttonType,
hasConnectorTypeSelected,
onCancel,
onBack,
onTestConnector,
@ -39,7 +39,7 @@ const FlyoutFooterComponent: React.FC<Props> = ({
<EuiFlyoutFooter data-test-subj="create-connector-flyout-footer">
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
{buttonType === 'back' ? (
{hasConnectorTypeSelected ? (
<EuiButtonEmpty onClick={onBack} data-test-subj="create-connector-flyout-back-btn">
{i18n.translate(
'xpack.triggersActionsUI.sections.actionConnectorAdd.backButtonLabel',
@ -59,45 +59,47 @@ const FlyoutFooterComponent: React.FC<Props> = ({
</EuiButtonEmpty>
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup justifyContent="spaceBetween">
<>
{onTestConnector && (
{hasConnectorTypeSelected ? (
<EuiFlexItem grow={false}>
<EuiFlexGroup justifyContent="spaceBetween">
<>
{onTestConnector && (
<EuiFlexItem grow={false}>
<EuiButton
color="success"
data-test-subj="create-connector-flyout-save-test-btn"
type="submit"
isLoading={isSaving}
disabled={disabled}
onClick={onTestConnector}
>
<FormattedMessage
id="xpack.triggersActionsUI.sections.actionConnectorAdd.saveAndTestButtonLabel"
defaultMessage="Save & test"
/>
</EuiButton>
</EuiFlexItem>
)}
<EuiFlexItem grow={false}>
<EuiButton
fill
color="success"
data-test-subj="create-connector-flyout-save-test-btn"
data-test-subj="create-connector-flyout-save-btn"
type="submit"
isLoading={isSaving}
disabled={disabled}
onClick={onTestConnector}
onClick={onSubmit}
>
<FormattedMessage
id="xpack.triggersActionsUI.sections.actionConnectorAdd.saveAndTestButtonLabel"
defaultMessage="Save & test"
id="xpack.triggersActionsUI.sections.actionConnectorAdd.saveButtonLabel"
defaultMessage="Save"
/>
</EuiButton>
</EuiFlexItem>
)}
<EuiFlexItem grow={false}>
<EuiButton
fill
color="success"
data-test-subj="create-connector-flyout-save-btn"
type="submit"
isLoading={isSaving}
disabled={disabled}
onClick={onSubmit}
>
<FormattedMessage
id="xpack.triggersActionsUI.sections.actionConnectorAdd.saveButtonLabel"
defaultMessage="Save"
/>
</EuiButton>
</EuiFlexItem>
</>
</EuiFlexGroup>
</EuiFlexItem>
</>
</EuiFlexGroup>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</EuiFlyoutFooter>
);

14
x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/create_connector_flyout/index.test.tsx
View file

@ -467,8 +467,8 @@ describe('CreateConnectorFlyout', () => {
});
describe('Footer', () => {
it('shows the buttons', async () => {
const { getByTestId } = appMockRenderer.render(
it('shows the correct buttons without an action type selected', async () => {
const { getByTestId, queryByTestId } = appMockRenderer.render(
<CreateConnectorFlyout
actionTypeRegistry={actionTypeRegistry}
onClose={onClose}
@ -479,11 +479,11 @@ describe('CreateConnectorFlyout', () => {
await act(() => Promise.resolve());
expect(getByTestId('create-connector-flyout-cancel-btn')).toBeInTheDocument();
expect(getByTestId('create-connector-flyout-save-test-btn')).toBeInTheDocument();
expect(getByTestId('create-connector-flyout-save-btn')).toBeInTheDocument();
expect(queryByTestId('create-connector-flyout-save-test-btn')).toBe(null);
expect(queryByTestId('create-connector-flyout-save-btn')).toBe(null);
});
it('shows the back button when selecting an action type', async () => {
it('shows the correct buttons when selecting an action type', async () => {
const { getByTestId } = appMockRenderer.render(
<CreateConnectorFlyout
actionTypeRegistry={actionTypeRegistry}
@ -500,6 +500,8 @@ describe('CreateConnectorFlyout', () => {
await waitFor(() => {
expect(getByTestId('create-connector-flyout-back-btn')).toBeInTheDocument();
expect(getByTestId('create-connector-flyout-save-test-btn')).toBeInTheDocument();
expect(getByTestId('create-connector-flyout-save-btn')).toBeInTheDocument();
});
});
@ -580,8 +582,6 @@ describe('CreateConnectorFlyout', () => {
await act(() => Promise.resolve());
expect(getByTestId('create-connector-flyout-cancel-btn')).not.toBeDisabled();
expect(getByTestId('create-connector-flyout-save-test-btn')).toBeDisabled();
expect(getByTestId('create-connector-flyout-save-btn')).toBeDisabled();
});
it('disables the buttons when there are error on the form', async () => {

4
x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx
View file

@ -72,7 +72,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
const hasErrors = isFormValid === false;
const isSaving = isSavingConnector || isSubmitting;
const footerButtonType = actionType != null ? 'back' : 'cancel';
const hasConnectorTypeSelected = actionType != null;
const actionTypeModel: ActionTypeModel | null =
actionType != null ? actionTypeRegistry.get(actionType.id) : null;
@ -182,7 +182,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
) : null}
</EuiFlyoutBody>
<FlyoutFooter
buttonType={footerButtonType}
hasConnectorTypeSelected={hasConnectorTypeSelected}
onBack={resetActionType}
onCancel={onClose}
disabled={hasErrors || !canSave}