render()

in packages/issue-dashboard-widgets/widgets/due-dates-calendar/app/edit-form.js [497:600]
101 lines of code
12 McCabe index (conditional complexity)

  render() {
    const {
      youTracks,
      selectedYouTrack,
      noConnection,
      errorMessage,
      allContexts
    } = this.state;

    const youTrackServiceToSelectItem = it => it && {
      key: it.id,
      label: it.name,
      description: it.homeUrl,
      model: it
    };


    return (
      <ConfigurationForm
        warning={errorMessage}
        isInvalid={!!errorMessage || !this.state.scheduleField}
        isLoading={this.state.isLoading}
        panelControls={this.renderRefreshPeriod()}
        onSave={this.submitForm}
        onCancel={this.props.onCancel}
      >
        <Input
          className="ring-form__group"
          label={i18n('Optional title')}
          size={InputSize.FULL}
          value={this.state.title}
          placeholder={i18n('Set optional title')}
          onClear={this.clearTitle}
          onChange={this.changeTitle}
        />
        {
          youTracks.length > 1 && (
            <Select
              className="ring-form__group"
              size={InputSize.FULL}
              maxHeight={300}
              selectedLabel="YouTrack service"
              data={youTracks.map(youTrackServiceToSelectItem)}
              selected={youTrackServiceToSelectItem(selectedYouTrack)}
              onSelect={this.changeYouTrack}
              filter
            />
          )}
        {
          !errorMessage && (
            <Select
              className="ring-form__group"
              label={i18n('Select an available date type field')}
              selectedLabel={i18n('Field for scheduling start dates')}
              size={InputSize.FULL}
              data={this.state.availableScheduleFields}
              selected={{label: this.state.scheduleField}}
              onSelect={this.changeScheduleField}
              filter
              maxHeight={300}
              renderOptimization={false}
            />
          )}
        {
          !errorMessage && (
            <Select
              className="ring-form__group"
              label={i18n('Select an available end date field')}
              selectedLabel={i18n('Field for scheduling end dates')}
              size={InputSize.FULL}
              data={this.state.availableScheduleFields.filter(
                field => field.isDateAndTime === this.state.isDateAndTime)}
              selected={{label: this.state.eventEndField}}
              onSelect={this.changeEventEndField}
              filter
              maxHeight={300}
              renderOptimization={false}
            />
          )}
        {
          !errorMessage && (
            <Select
              className="ring-form__group"
              selectedLabel={i18n('Field for applying color scheme')}
              size={InputSize.FULL}
              data={this.state.availableEventFields}
              selected={{label: this.state.colorField}}
              onSelect={this.changeColorField}
              filter
              maxHeight={300}
              renderOptimization={false}
            />
          )}
        <div className="ring-form__group">
          {
            !noConnection && allContexts && this.renderFilteringSettings()
          }
          {
            !noConnection && !allContexts && !errorMessage && <LoaderInline/>
          }
        </div>
      </ConfigurationForm>
    );
  }