in public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx [295:346]
render() {
const { onCloseFlyout, policy, state } = this.props;
const { name, createAction, editAction, createTransition, editTransition, actions } = this.state;
const isEditing = !!state;
let title = `${isEditing ? "Edit" : "Create"} state`;
if (createTransition || createAction || !!editTransition || !!editAction) title = "State";
if (name) title += `: ${name}`;
// Filter out the current editing state if we are editing
const stateOptions = policy.states.map((s) => s.name);
let flyoutContent;
if (createAction || !!editAction)
flyoutContent = () => (
<CreateAction
actions={actions}
editAction={editAction}
stateName={name}
onClickCancelAction={this.onClickCancelAction}
onClickSaveAction={this.onClickSaveAction}
/>
);
if (createTransition || editTransition)
flyoutContent = () => (
<CreateTransition
stateOptions={stateOptions}
editTransition={editTransition}
onCloseCreateTransition={() => this.setState({ createTransition: false, editTransition: null })}
onClickSaveTransition={this.onClickSaveTransition}
/>
);
if (!flyoutContent)
flyoutContent = () => (
<>
<EuiFlyoutBody>{this.renderDefault()}</EuiFlyoutBody>
<EuiFlyoutFooter>{this.renderDefaultFooter()}</EuiFlyoutFooter>
</>
);
return (
<EuiPortal>
<EuiFlyout hideCloseButton ownFocus={false} onClose={onCloseFlyout} maxWidth={600} size="m" aria-labelledby="flyoutTitle">
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="flyoutTitle">{title}</h2>
</EuiTitle>
</EuiFlyoutHeader>
{flyoutContent()}
</EuiFlyout>
</EuiPortal>
);
}