public render()

in packages/app/client/src/ui/dialogs/openBotDialog/openBotDialog.tsx [129:262]
133 lines of code
5 McCabe index (conditional complexity)

  public render(): ReactNode {
    const { savedBotUrls = [] } = this.props;
    const {
      botUrl,
      appId,
      appPassword,
      mode,
      isDebug,
      isAzureGov,
      randomSeed,
      randomValue,
      speechKey,
      speechRegion,
    } = this.state;
    const validationResult = OpenBotDialog.validateEndpoint(botUrl);
    const errorMessage = OpenBotDialog.getErrorMessage(validationResult);
    const shouldBeDisabled =
      validationResult === ValidationResult.Invalid || validationResult === ValidationResult.Empty;

    return (
      <Dialog cancel={this.props.onDialogCancel} className={openBotStyles.themeOverrides} title="Open a bot">
        <form id="open-bot-dialog" role="presentation" onSubmit={this.onSubmit}>
          <div className={openBotStyles.autoCompleteBar}>
            <AutoComplete
              autoFocus={true}
              errorMessage={errorMessage}
              label={'Bot URL'}
              items={savedBotUrls.map(elem => elem.url).slice(0, 9)}
              onChange={this.onBotUrlChange}
              placeholder={'Enter your bot URL'}
              value={this.state.botUrl}
            />
            {this.browseButton}
          </div>
          <Row className={openBotStyles.multiInputRow}>
            <TextField
              inputContainerClassName={openBotStyles.inputContainerRow}
              name="appId"
              label="Microsoft App ID"
              onChange={this.onInputChange}
              placeholder="Optional"
              value={appId}
            />
            <TextField
              inputContainerClassName={openBotStyles.inputContainerRow}
              label="Microsoft App password"
              ariaLabel={isLinux() ? 'Microsoft App' : null}
              name="appPassword"
              onChange={this.onInputChange}
              placeholder="Optional"
              type="password"
              value={appPassword}
            />
          </Row>
          {!isDebug && (
            <Row className={openBotStyles.multiInputRow}>
              <TextField
                inputContainerClassName={openBotStyles.inputContainerRow}
                name="speechRegion"
                label="Direct Line Speech Region"
                onChange={this.onInputChange}
                placeholder="Optional"
                value={speechRegion}
              />
              <TextField
                inputContainerClassName={openBotStyles.inputContainerRow}
                label="Direct Line Speech Key"
                name="speechKey"
                onChange={this.onInputChange}
                placeholder="Optional"
                type="password"
                value={speechKey}
              />
            </Row>
          )}
          <Row className={openBotStyles.multiInputRow}>
            <TextField
              inputContainerClassName={openBotStyles.inputContainerRow}
              name="randomSeed"
              label="Test Options - Random Seed"
              onChange={this.onInputChange}
              placeholder="Optional"
              type="number"
              value={randomSeed}
              min="0"
              max="9999"
            />
            <TextField
              inputContainerClassName={openBotStyles.inputContainerRow}
              label="Test Options - Random Value"
              name="randomValue"
              onChange={this.onInputChange}
              placeholder="Optional"
              type="number"
              value={randomValue}
              min="0"
              max="9999"
            />
          </Row>
          <Row className={openBotStyles.rowOverride}>
            <Checkbox
              label="Open in debug mode"
              checked={isDebug && mode === 'debug'}
              onClick={this.onDebugCheckboxClick}
            />
          </Row>
          <Row className={openBotStyles.rowOverride}>
            <Checkbox
              label="Azure for US Government"
              checked={isAzureGov}
              onClick={this.onChannelServiceCheckboxClick}
            />
            <LinkButton
              ariaLabel="Learn more about Azure for US Government"
              className={dialogStyles.dialogLink}
              linkRole={true}
              onClick={this.onEmulatorAzureGovDocsClick}
              type="button"
            >
              &nbsp;Learn more.
            </LinkButton>
          </Row>
          <DialogFooter>
            <DefaultButton type="button" onClick={this.props.onDialogCancel}>
              Cancel
            </DefaultButton>
            <PrimaryButton type="submit" disabled={shouldBeDisabled} id={'connect-open-bot'}>
              Connect
            </PrimaryButton>
          </DialogFooter>
        </form>
      </Dialog>
    );
  }