render()

in components/base-workflow-ui/packages/base-workflow-ui/src/parts/workflow-templates/drafts/edit/WorkflowTemplateDraftMetaEditor.js [128:208]
80 lines of code
3 McCabe index (conditional complexity)

  render() {
    const editor = this.getEditor();
    const hasPrevious = editor.hasPreviousPage;
    const form = this.getMetaForm();
    const templateTitleField = form.$('templateTitle');
    const templateDescField = form.$('templateDesc');
    const instanceTtlField = form.$('instanceTtl');
    const runSpecSizeField = form.$('runSpecSize');
    const runSpecTargetField = form.$('runSpecTarget');
    const rows = this.getWorkflowTemplate().propertyOverrideSummaryRows || [];
    const fields = _.map(rows, item => form.$(`propsOverride_${item.name}`));

    return (
      <Form
        form={form}
        onCancel={this.handleCancel}
        onSuccess={this.handleFormSubmission}
        onError={this.handleFormErrors}
      >
        {({ processing, onSubmit, onCancel }) => (
          <>
            <Input field={templateTitleField} disabled={processing} />
            <TextArea field={templateDescField} rows={6} disabled={processing} />
            <Divider horizontal className="mb3">
              <Header as="h4" className="color-grey">
                <Icon name="list alternate outline" className="color-grey" />
                Properties
              </Header>
            </Divider>
            <Input field={instanceTtlField} disabled={processing} />
            <DropDown field={runSpecSizeField} disabled={processing} fluid={false} selection />
            <DropDown field={runSpecTargetField} disabled={processing} fluid={false} selection />
            <Divider horizontal className="mb3">
              <Header as="h4" className="color-grey">
                <Icon name="list alternate outline" className="color-grey" />
                Properties Override
              </Header>
            </Divider>
            <Segment padded>
              <PropsOverrideTable rows={fields} editable processing={processing} />
            </Segment>
            <div className="mt4">
              <Button
                floated="right"
                color="teal"
                icon="right arrow"
                labelPosition="right"
                disabled={processing}
                className="ml2"
                content="Next"
                onClick={e => this.handleOnSubmitNext(e, onSubmit)}
              />
              {hasPrevious && (
                <Button
                  floated="right"
                  icon="left arrow"
                  labelPosition="left"
                  disabled={processing}
                  className="ml3"
                  content="previous"
                  onClick={this.handlePrevious}
                />
              )}
              <Button
                floated="right"
                color="blue"
                icon="save"
                labelPosition="left"
                disabled={processing}
                className="ml2"
                content="Save"
              />
              <Button floated="left" disabled={processing} onClick={onCancel}>
                Cancel
              </Button>
            </div>
          </>
        )}
      </Form>
    );
  }