render()

in app/addons/databases/components.js [401:453]

• 51 lines of code
• 1 McCabe index (conditional complexity)

  render() {
    const classNames = classnames('new-database-tray', {
      'new-database-tray--expanded': this.props.showPartitionedOption
    });

    return (
      <div>
        <ToggleHeaderButton
          selected={this.state.isPromptVisible}
          toggleCallback={this.onTrayToggle}
          containerClasses='header-control-box add-new-database-btn'
          title="Create Database"
          fonticon="fonticon-new-database"
          text="Create Database" />

        <TrayContents
          className={classNames}
          contentVisible={this.state.isPromptVisible}
          closeTray={this.closeTray}
          onEnter={this.focusInput} >
          <div className='tray-contents'>
            <div className='tray-header'>
              <h3 >Create Database</h3>
            </div>
            <div className='tray-body'>
              <Form>
                <Form.Group className="mb-3">
                  <Form.Label htmlFor="js-new-database-name">Database name</Form.Label>
                  <Form.Control
                    id="js-new-database-name"
                    ref={node => this.newDbName = node}
                    type="text"
                    value={this.state.databaseName}
                    onChange={this.onChange}
                    onKeyUp={this.onKeyUpInInput}
                    placeholder="database-name"/>
                </Form.Group>
                {this.partitionedOption()}
              </Form>
            </div>
            <ButtonGroup bsPrefix="tray-footer" >
              <Button variant='cf-cancel' id="js-cancel-create-database" onClick={this.closeTray}>
               Cancel
              </Button>
              <Button variant='cf-primary' id="js-create-database" onClick={this.onAddDatabase}>
                Create
              </Button>
            </ButtonGroup>
          </div>
        </TrayContents>
      </div>
    );
  }