render()

in public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx [54:124]
61 lines of code
5 McCabe index (conditional complexity)

  render() {
    const { action } = this.state;
    const { editAction } = this.props;

    const actionOptions = actionRepoSingleton.getAllActionTypes().map((key) => {
      return {
        value: key,
        text: key
          .split("_")
          .map((str) => capitalizeFirstLetter(str))
          .join(" "),
      };
    });

    let bodyTitle = "Add action";
    if (!!editAction) bodyTitle = "Edit action";

    return (
      <>
        <EuiFlyoutBody>
          <EuiTitle size="s">
            <h3>{bodyTitle}</h3>
          </EuiTitle>

          <EuiText size="xs" style={{ fontWeight: 200 }}>
            Actions are the operations ISM performs when an index is in a certain state.{" "}
            <EuiLink href={ACTIONS_DOCUMENTATION_URL} target="_blank">
              Learn more <EuiIcon type="popout" size="s" />
            </EuiLink>
          </EuiText>

          <EuiSpacer />

          <EuiFormCustomLabel title="Action type" helpText="Select the action you want to add to this state." />
          <EuiFormRow fullWidth isInvalid={false} error={null}>
            <EuiSelect
              fullWidth
              placeholder="Select action type"
              id="action-type"
              hasNoInitialSelection
              options={actionOptions}
              value={action?.type}
              style={{ textTransform: "capitalize" }}
              // This one below is for resetting to a new UIAction
              onChange={this.onChangeSelectedAction}
              data-test-subj="create-state-action-type"
            />
          </EuiFormRow>

          <EuiSpacer />

          {/*Below is for when the specific action renders have updated their config and want to update the UIAction*/}
          {/* So we should not be changing the id because it'll break the UI */}
          {action?.render(action, this.onChangeAction)}

          <EuiSpacer />

          {action && <TimeoutRetrySettings editAction={!!editAction} action={action} onChangeAction={this.onChangeAction} />}
        </EuiFlyoutBody>
        <EuiFlyoutFooter>
          <FlyoutFooter
            edit={!!editAction}
            action="action"
            disabledAction={!action || !action.isValid()}
            onClickCancel={this.props.onClickCancelAction}
            onClickAction={this.onClickSaveAction}
          />
        </EuiFlyoutFooter>
      </>
    );
  }