render()

in console/react/src/connect/connect-form.js [137:236]

• 100 lines of code
• 10 McCabe index (conditional complexity)

  render() {
    const {
      address,
      port,
      username,
      password,
      connecting,
      connectError,
      isValid
    } = this.state;
    return this.props.isConnectFormOpen ? (
      <div>
        <div className="connect-modal">
          <div className={this.props.connecting || connecting ? "connecting" : ""}>
            <Form isHorizontal>
              <TextContent className="connect-title">
                <Text component={TextVariants.h1}>Connect</Text>
                <Text component={TextVariants.p}>
                  Enter the address and an HTTP-enabled port of a Qpid Dispatch Router.
                </Text>
              </TextContent>
              <FormGroup
                label="Address"
                isRequired
                fieldId={`form-address-${this.props.prefix}`}
              >
                <TextInput
                  value={address}
                  isRequired
                  type="text"
                  id={`form-address-${this.props.prefix}`}
                  aria-describedby="horizontal-form-address-helper"
                  name="form-address"
                  onChange={value => this.handleTextInputChange("address", value)}
                />
              </FormGroup>
              <FormGroup
                label="Port"
                isRequired
                fieldId={`form-port-${this.props.prefix}`}
              >
                <TextInput
                  value={port}
                  onChange={value => this.handleTextInputChange("port", value)}
                  isRequired
                  type="number"
                  id={`form-port-${this.props.prefix}`}
                  name="form-port"
                />
              </FormGroup>
              <FormGroup label="User name" fieldId={`form-user-${this.props.prefix}`}>
                <TextInput
                  value={username}
                  onChange={value => this.handleTextInputChange("username", value)}
                  isRequired
                  id={`form-user-${this.props.prefix}`}
                  name="form-user"
                />
              </FormGroup>
              <FormGroup label="Password" fieldId={`form-password-${this.props.prefix}`}>
                <TextInput
                  value={password}
                  onChange={value => this.handleTextInputChange("password", value)}
                  type="password"
                  id={`form-password-${this.props.prefix}`}
                  name="form-password"
                />
              </FormGroup>
              {connectError && (
                <TextContent className="connect-error">
                  <Text component={TextVariants.p}>{connectError}</Text>
                </TextContent>
              )}
              <ActionGroup>
                <Button
                  variant={this.props.isConnected || isValid ? "primary" : "danger"}
                  isDisabled={this.props.isConnected ? false : !isValid}
                  data-testid="connect-button"
                  onClick={this.handleConnect}
                >
                  {this.props.isConnected ? "Disconnect" : "Connect"}
                </Button>
                <Button variant="secondary" onClick={this.toggleDrawerHide}>
                  Cancel
                </Button>
                <input type="submit" style={{ display: "none" }} />
              </ActionGroup>
            </Form>
          </div>
          <PleaseWait
            isOpen={this.props.connecting || connecting}
            title={this.props.connectingTitle || "Connecting"}
            message={
              this.props.connectingMessage || "Connecting to the router, please wait..."
            }
          />
        </div>
      </div>
    ) : null;
  }