render()

in source/frontend/src/components/UserListColDialog.js [82:208]
119 lines of code
14 McCabe index (conditional complexity)

  render() {
    let styles = this.state.showDialog
      ? { display: "block" }
      : { display: "none" };
    return (
      <div>
        {this.state.showDialog &&
          <div>
            <div className="block-events-full"> </div>
            <div className="modal fade show" data-backdrop="static" style={styles} id="ModalCenter" tabIndex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
          <div className="modal-dialog modal-dialog-centered" role="document">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title" id="ModalLongTitle">
                <div className="pb-4">
                <b>Show/Hide Columns</b>
                </div>
                </h5>
                    <span onClick={this.onClickCancelDialog} className="onhover float-right">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">&times;
                        </button>
                    </span>
              </div>
              <div className="modal-body">
              <div style={{height:"220px",overflow:"auto"}}>
                <div className="row">

                {this.state.type === 'wave' &&
                    <div className={this.state.type === 'both'?"col-6":"col-12"}>
                      <div>Wave Attributes</div>
                      <hr />
                      <ul style={{listStyleType: "none"}} className="p-0 m-0">
                        {this.state.schemaWave.map((item, index) => {
                          if (item.name === "wave_name" || item.name === "wave_id") {
                            return null
                          }

                          return (
                            <li key={item.name}>
                              <input
                                onChange={this.onChangeDialog}
                                type="checkbox"
                                name={item.name}
                                checked={this.state.showColumns.includes(item.name)}
                                className="mr-3"
                              />
                              {item.name}
                            </li>
                          )
                        })}
                      </ul>
                    </div>
                  }

                  {(this.state.type === 'both' || this.state.type === 'app') &&
                    <div className={this.state.type === 'both'?"col-6":"col-12"}>
                      <div>Application Attributes</div>
                      <hr />
                      <ul style={{listStyleType: "none"}} className="p-0 m-0">
                        {this.state.schemaApp.map((item, index) => {
                          if (item.name === "app_name" || item.name === "app_id") {
                            return null
                          }

                          return (
                            <li key={item.name}>
                              <input
                                onChange={this.onChangeDialog}
                                type="checkbox"
                                name={item.name}
                                checked={this.state.showColumns.includes(item.name)}
                                className="mr-3"
                              />
                              {item.name}
                            </li>
                          )
                        })}
                      </ul>
                    </div>
                  }

                  {(this.state.type === 'both' || this.state.type === 'server') &&
                    <div className={this.state.type === 'both'?"col-6":"col-12"}>
                      <div>Server Attributes</div>
                      <hr />
                      <ul style={{listStyleType: "none"}} className="p-0 m-0">
                        {this.state.schemaServer.map((item, index) => {
                          if (item.name === "server_name" || item.name === "server_id") {
                            return null
                          }

                          return (
                            <li key={item.name}>
                              <input
                                onChange={this.onChangeDialog}
                                type="checkbox"
                                name={item.name}
                                checked={this.state.showColumns.includes(item.name)}
                                className="mr-3"
                              />
                              {item.name}
                            </li>
                          )
                        })}
                      </ul>
                    </div>
                  }

                </div>

              </div>
              <hr />
              <input
                className="btn btn-primary btn-outline mt-3 mr-3 float-right"
                type="button"
                value="Update View"
                onClick={this.onClickUpdateView}
              />
              </div>
            </div>
          </div>
        </div>
          </div>
        }
    </div>
    )
  }