render()

in public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx [507:645]
137 lines of code
6 McCabe index (conditional complexity)

  render() {
    const {
      transformId,
      transformIdError,
      submitError,
      isSubmitting,
      hasSubmitted,
      description,
      sourceIndex,
      sourceIndexError,
      sourceIndexFilter,
      sourceIndexFilterError,
      targetIndex,
      targetIndexError,
      currentStep,
      previewTransform,
      fields,
      fieldSelectedOption,
      selectedGroupField,
      selectedAggregations,
      aggList,
      jobEnabledByDefault,
      interval,
      intervalTimeunit,
      intervalError,
      pageSize,

      beenWarned,
      isLoading,
    } = this.state;
    return (
      <div style={{ width: "100%" }}>
        <SetUpIndices
          {...this.props}
          transformId={transformId}
          transformIdError={transformIdError}
          submitError={submitError}
          isSubmitting={isSubmitting}
          hasSubmitted={hasSubmitted}
          description={description}
          sourceIndexFilter={sourceIndexFilter}
          sourceIndexFilterError={sourceIndexFilterError}
          sourceIndex={sourceIndex}
          sourceIndexError={sourceIndexError}
          targetIndex={targetIndex}
          targetIndexError={targetIndexError}
          onChangeName={this.onChangeName}
          onChangeDescription={this.onChangeDescription}
          onChangeSourceIndex={this.onChangeSourceIndex}
          onChangeSourceIndexFilter={this.onChangeSourceIndexFilter}
          onChangeTargetIndex={this.onChangeTargetIndex}
          currentStep={this.state.currentStep}
          hasAggregation={selectedGroupField.length != 0 || Object.keys(selectedAggregations).length != 0 || aggList.length != 0}
          fields={fields}
          fieldSelectedOption={fieldSelectedOption}
          beenWarned={beenWarned}
        />
        <DefineTransformsStep
          {...this.props}
          currentStep={this.state.currentStep}
          sourceIndex={sourceIndex[0] ? sourceIndex[0].label : ""}
          sourceIndexFilter={sourceIndexFilter}
          fields={fields}
          aggList={aggList}
          selectedGroupField={selectedGroupField}
          selectedAggregations={selectedAggregations}
          onGroupSelectionChange={this.onGroupSelectionChange}
          onAggregationSelectionChange={this.onAggregationSelectionChange}
          onEditTransformation={this.onEditTransformation}
          onRemoveTransformation={this.onRemoveTransformation}
          previewTransform={previewTransform}
        />
        <SpecifyScheduleStep
          {...this.props}
          currentStep={this.state.currentStep}
          jobEnabledByDefault={jobEnabledByDefault}
          interval={interval}
          intervalTimeunit={intervalTimeunit}
          intervalError={intervalError}
          pageSize={pageSize}
          onChangeJobEnabledByDefault={this.onChangeJobEnabledByDefault}
          onChangeIntervalTime={this.onChangeIntervalTime}
          onChangePage={this.onChangePage}
          onChangeIntervalTimeunit={this.onChangeIntervalTimeunit}
        />
        <ReviewAndCreateStep
          {...this.props}
          transformId={transformId}
          description={description}
          sourceIndex={sourceIndex}
          targetIndex={targetIndex}
          sourceIndexFilter={sourceIndexFilter}
          fields={fields}
          selectedGroupField={selectedGroupField}
          onGroupSelectionChange={this.onGroupSelectionChange}
          selectedAggregations={selectedAggregations}
          aggList={aggList}
          onAggregationSelectionChange={this.onAggregationSelectionChange}
          onRemoveTransformation={this.onRemoveTransformation}
          previewTransform={previewTransform}
          jobEnabledByDefault={jobEnabledByDefault}
          interval={interval}
          intervalTimeunit={intervalTimeunit}
          pageSize={pageSize}
          currentStep={this.state.currentStep}
          onChangeStep={this.onChangeStep}
          submitError={submitError}
        />
        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={{ padding: "5px 50px" }}>
          <EuiFlexItem grow={false}>
            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createTransformCancelButton">
              Cancel
            </EuiButtonEmpty>
          </EuiFlexItem>
          {currentStep != 1 && (
            <EuiFlexItem grow={false}>
              <EuiButton onClick={this._prev} data-test-subj="createTransformPreviousButton">
                Previous
              </EuiButton>
            </EuiFlexItem>
          )}

          {currentStep == 4 ? (
            <EuiFlexItem grow={false}>
              <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createTransformSubmitButton">
                Create
              </EuiButton>
            </EuiFlexItem>
          ) : (
            <EuiFlexItem grow={false}>
              <EuiButton fill onClick={this._next} isLoading={isLoading} data-test-subj="createTransformNextButton">
                Next
              </EuiButton>
            </EuiFlexItem>
          )}
        </EuiFlexGroup>
      </div>
    );
  }