function createRunContinuationConfirmationDialog()

in client/src/components/runs/actions/continue-run.js [25:180]
136 lines of code
11 McCabe index (conditional complexity)

function createRunContinuationConfirmationDialog () {
  let instance;

  @inject('preferences', 'routing')
  @observer
  class _RunContinuationConfirmation extends React.Component {
    state = {run: undefined};
    promise = undefined;
    resolve = undefined;

    @computed
    get continueRunMessage () {
      const {preferences} = this.props;
      return preferences.uiContinueRunConfirmation;
    }

    componentDidMount () {
      instance = this;
    }

    open = async (run) => {
      this.close();
      this.promise = new Promise((resolve) => {
        this.resolve = resolve;
      });
      this.setState({run});
      return this.promise;
    };

    onRunCustom = () => {
      if (this.resolve) {
        this.resolve(false);
        this.resolve = undefined;
      }
      const {run} = this.state;
      this.setState({run: undefined});
      const {routing} = this.props;
      if (run && routing) {
        const {
          pipelineId,
          version,
          id
        } = run;
        if (pipelineId && version) {
          routing.push(`/launch/${pipelineId}/${version}/default/${id}?continue=true`);
        } else {
          routing.push(`/launch/${id}?continue=true`);
        }
      }
    };

    onConfirm = () => {
      if (this.resolve) {
        this.resolve(true);
        this.resolve = undefined;
      }
      this.setState({run: undefined});
    };

    close = () => {
      if (this.resolve) {
        this.resolve(false);
        this.resolve = undefined;
      }
      this.setState({run: undefined});
    };

    render () {
      const {run} = this.state;
      const msg = this.continueRunMessage;
      return (
        <Modal
          className="ant-confirm ant-confirm-confirm"
          onCancel={this.close}
          visible={run !== undefined}
          footer={false}
        >
          {
            run && (
              <div className="ant-confirm-body-wrapper">
                <div className="ant-confirm-body">
                  <Icon type="question-circle" />
                  <span className="ant-confirm-title">
                    <div style={{display: 'flex', alignItems: 'center'}}>
                      <span>{'Continue '}</span>
                      <RunName
                        run={run}
                        editable={false}
                        style={{fontWeight: 'bold'}}
                      >
                        run #{run.id}
                      </RunName>
                      <span>?</span>
                    </div>
                  </span>
                  {
                    msg && (
                      <div className="ant-confirm-content">
                        <Markdown md={msg} />
                      </div>
                    )
                  }
                </div>
                <div
                  className="ant-confirm-btns"
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    float: 'unset',
                    paddingLeft: 40
                  }}
                >
                  <Button size="large" onClick={this.onRunCustom}>
                    Customize
                  </Button>
                  <div style={{
                    display: 'inline-flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    flexGap: 5
                  }}>
                    <Button size="large" onClick={this.close}>
                      Cancel
                    </Button>
                    <Button
                      size="large"
                      onClick={this.onConfirm}
                      type="primary"
                    >
                      Continue
                    </Button>
                  </div>
                </div>
              </div>
            )
          }
        </Modal>
      );
    }
  }

  function openConfirmation (run) {
    if (instance) {
      return instance.open(run);
    }
    return Promise.resolve(false);
  }

  return {
    RunContinuationConfirmation: _RunContinuationConfirmation,
    openConfirmation
  };
}