public render()

in packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx [113:301]
185 lines of code
4 McCabe index (conditional complexity)

  public render(): JSX.Element {
    const {
      ngrokPath = '',
      useCustomId = false,
      bypassNgrokLocalhost = true,
      runNgrokAtStartup = false,
      localhost = '',
      locale = '',
      use10Tokens = false,
      useCodeValidation = false,
      userGUID = '',
      autoUpdate = false,
      usePrereleases = false,
      collectUsageData = false,
    } = this.state;

    const inputProps = {
      disabled: !useCustomId,
    };

    return (
      <GenericDocument className={styles.appSettingsEditor}>
        <Row>
          <Column className={styles.spacing}>
            <div>
              <span className={styles.legend}>Service</span>
              <p>
                <LinkButton linkRole={true} onClick={this.onNgrokDocsClick}>
                  ngrok
                </LinkButton>{' '}
                is network tunneling software. The Bot Framework Emulator works with ngrok to communicate with bots
                hosted remotely. Read the{' '}
                <LinkButton linkRole={true} onClick={this.onNgrokTunnelingDocsClick}>
                  wiki page
                </LinkButton>{' '}
                to learn more about using ngrok and how to download it.
              </p>
              <Row align={RowAlignment.Center} className={styles.marginBottomRow}>
                <TextField
                  className={styles.appSettingsInput}
                  inputContainerClassName={styles.inputContainer}
                  inputRef={this.setNgrokInputRef}
                  readOnly={false}
                  value={ngrokPath}
                  onChange={this.onInputChange}
                  name="ngrokPath"
                  label={'Path to ngrok'}
                />
                <PrimaryButton onClick={this.onClickBrowse} text="Browse" className={styles.browseButton} />
              </Row>
              <Checkbox
                className={styles.checkboxOverrides}
                checked={bypassNgrokLocalhost}
                onChange={this.onChangeCheckBox}
                id="ngrok-bypass"
                label="Bypass ngrok for local addresses"
                name="bypassNgrokLocalhost"
              />
              <Checkbox
                className={styles.checkboxOverrides}
                checked={runNgrokAtStartup}
                onChange={this.onChangeCheckBox}
                id="ngrok-startup"
                label="Run ngrok when the Emulator starts up"
                name="runNgrokAtStartup"
              />
              <Row align={RowAlignment.Center} className={styles.marginBottomRow}>
                <TextField
                  className={styles.appSettingsInput}
                  inputContainerClassName={styles.inputContainer}
                  readOnly={false}
                  value={localhost}
                  onChange={this.onInputChange}
                  name="localhost"
                  label="localhost override"
                />
              </Row>
              <Row align={RowAlignment.Center}>
                <TextField
                  className={styles.appSettingsInput}
                  inputContainerClassName={styles.inputContainer}
                  readOnly={false}
                  value={locale}
                  name="locale"
                  onChange={this.onInputChange}
                  label="Locale"
                />
              </Row>
              <div className={styles.tunnelStatus}>
                <NgrokStatusIndicator
                  tunnelStatus={this.props.ngrokTunnelStatus}
                  timeIntervalSinceLastPing={this.props.ngrokLastPingInterval}
                  header="Tunnel Status"
                />
                <LinkButton linkRole={true} onClick={this.props.onOpenNgrokStatusViewerClick}>
                  Click here to go to the Ngrok Status viewer
                </LinkButton>
              </div>
            </div>
          </Column>
          <Column className={[styles.rightColumn, styles.spacing].join(' ')}>
            <div>
              <span className={styles.legend}>User settings</span>
              <Checkbox
                className={styles.checkboxOverrides}
                checked={use10Tokens}
                onChange={this.onChangeCheckBox}
                id="auth-token-version"
                label="Use version 1.0 authentication tokens"
                name="use10Tokens"
              />
              <Checkbox
                className={styles.checkboxOverrides}
                checked={useCodeValidation}
                onChange={this.onChangeCheckBox}
                id="use-validation-code"
                label="Use a sign-in verification code for OAuthCards"
                name="useCodeValidation"
              />
              <Checkbox
                className={styles.checkboxOverrides}
                checked={useCustomId}
                onChange={this.onChangeCheckBox}
                id="use-custom-id"
                label="Use your own user ID to communicate with the bot"
                name="useCustomId"
              />

              <Row className={styles.marginBottomRow} align={RowAlignment.Top}>
                <TextField
                  {...inputProps}
                  label="User ID"
                  placeholder={useCustomId ? '' : 'There is no ID configured'}
                  className={styles.appSettingsInput}
                  inputContainerClassName={styles.inputContainer}
                  readOnly={false}
                  value={userGUID}
                  name="userGUID"
                  onChange={this.onInputChange}
                  required={useCustomId}
                  errorMessage={useCustomId && !userGUID ? 'Enter a User ID' : ''}
                />
              </Row>
            </div>

            <div>
              <span className={styles.legend}>Application Updates</span>
              <Checkbox
                className={styles.checkboxOverrides}
                checked={autoUpdate}
                onChange={this.onChangeCheckBox}
                label="Automatically download and install updates"
                name="autoUpdate"
              />
              <Checkbox
                className={styles.checkboxOverrides}
                checked={usePrereleases}
                onChange={this.onChangeCheckBox}
                label="Use pre-release versions"
                name="usePrereleases"
              />
            </div>
            <div>
              <span className={styles.legend}>Data Collection</span>
              <Checkbox
                className={styles.checkboxOverrides}
                checked={collectUsageData}
                onChange={this.onChangeCheckBox}
                label="Help improve the Emulator by allowing us to collect usage data."
                name="collectUsageData"
              />
              <LinkButton linkRole={true} onClick={this.onPrivacyStatementClick}>
                Privacy statement
              </LinkButton>
            </div>
          </Column>
        </Row>
        <Row className={[styles.buttonRow, styles.spacing].join(' ')} justify={RowJustification.Right}>
          <PrimaryButton text="Cancel" onClick={this.props.discardChanges} className={styles.cancelButton} />
          <PrimaryButton
            text="Save"
            onClick={this.onSaveClick}
            className={styles.saveButton}
            disabled={this.disableSaveButton()}
          />
        </Row>
      </GenericDocument>
    );
  }