render()

in components/base-workflow-ui/packages/base-workflow-ui/src/parts/workflow-common/drafts/edit/WorkflowCommonDraftStepsEditor.js [172:258]
86 lines of code
8 McCabe index (conditional complexity)

  render() {
    const processing = this.processing;
    const editor = this.getEditor();
    const editing = editor.stepEditorsEditing;
    const hasPrevious = editor.hasPreviousPage;
    const version = this.getVersion();
    const canRearrange = version.canRearrangeSteps;

    return (
      <>
        <Dimmer.Dimmable dimmed={processing}>
          <Dimmer active={processing} inverted>
            <Loader inverted>Processing</Loader>
          </Dimmer>
          <Header as="h3" color="grey" className="mt0">
            Steps
          </Header>
          {!canRearrange && (
            <Message warning>
              <b className="mr1">Warning</b> The workflow template used by this workflow does <b>not</b> allow for steps
              to be deleted, added or rearranged
            </Message>
          )}
          {canRearrange && (
            <DragDropContext onDragEnd={this.onDragEnd}>
              <Droppable droppableId="selected-steps">
                {(provided, snapshot) => (
                  <Observer>
                    {() => (
                      <div
                        {...provided.droppableProps}
                        ref={provided.innerRef}
                        className={c('mb3', snapshot.isDraggingOver ? 'bg-lightgreen' : '')}
                      >
                        {this.renderSelectedSteps()}
                        {provided.placeholder}
                      </div>
                    )}
                  </Observer>
                )}
              </Droppable>
            </DragDropContext>
          )}
          {!canRearrange && <div className="mb3">{this.renderSelectedSteps()}</div>}
          <AddStepDropDown className="mb3" onSelected={this.handleAddStep} disabled={!canRearrange} />
        </Dimmer.Dimmable>
        {!editing && (
          <div>
            <Button
              floated="right"
              color="teal"
              icon="right arrow"
              labelPosition="right"
              disabled={processing}
              className="ml2"
              content="Next"
              onClick={this.handleNext}
            />
            {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"
              onClick={this.handleSave}
            />
            <Button floated="left" disabled={processing} onClick={this.handleCancel}>
              Cancel
            </Button>
          </div>
        )}
      </>
    );
  }