public render()

in packages/app/client/src/ui/shell/explorer/endpointExplorer/endpointEditor/endpointEditor.tsx [112:235]
124 lines of code
8 McCabe index (conditional complexity)

  public render(): JSX.Element {
    const {
      appIdError,
      appPasswordError,
      endpointError,
      endpointService,
      endpointWarning,
      nameError,
      botService = {} as IBotService,
    } = this.state;
    const { name = '', endpoint = '', appId = '', appPassword = '' } = endpointService;
    const { tenantId = '', subscriptionId = '', resourceGroup = '', serviceName = '' } = botService;
    const hasBotService = !!(tenantId || subscriptionId || resourceGroup || serviceName);
    const valid = !!endpoint && !!name;
    const isUsGov = EndpointEditor.isUsGov((endpointService as any).channelService);
    return (
      <Dialog title={title} detailedDescription={detailedDescription} cancel={this.onCancelClick}>
        <TextField
          placeholder="https://"
          errorMessage={endpointError}
          value={endpoint}
          data-prop="endpoint"
          onChange={this.onEndpointInputChange}
          label="Endpoint url"
          required={true}
        />
        {!endpointError && endpointWarning && <span className={styles.endpointWarning}>{endpointWarning}</span>}
        <TextField
          placeholder="Create name for your endpoint"
          errorMessage={nameError}
          value={name}
          data-prop="name"
          onChange={this.onEndpointInputChange}
          label="Name"
          required={true}
        />
        <TextField
          placeholder="Optional"
          errorMessage={appIdError}
          value={appId}
          data-prop="appId"
          onChange={this.onEndpointInputChange}
          label="Application Id"
          required={false}
        />
        <TextField
          placeholder="Optional. For Microsoft Apps"
          errorMessage={appPasswordError}
          value={appPassword}
          data-prop="appPassword"
          onChange={this.onEndpointInputChange}
          label="Application Password"
          required={false}
        />
        <Row align={RowAlignment.Center}>
          <Checkbox label="Azure for US Government" checked={isUsGov} onChange={this.onChannelServiceChange} />
          &nbsp;
          <LinkButton
            ariaLabel="Learn more about Azure for US Government"
            className={styles.endpointLink}
            linkRole={true}
            onClick={this.onAzureGovDocClick}
          >
            Learn more.
          </LinkButton>
        </Row>
        <button
          className={`${styles.absContentToggle} ${hasBotService ? styles.arrowExpanded : ''}`}
          onClick={this.onABSLinkClick}
          aria-controls="abs-config-content"
          aria-expanded={hasBotService}
        >
          Azure Bot Service configuration
          <span role="presentation"></span>
        </button>
        <div
          id="abs-config-content"
          className={styles.absContent}
          ref={this.absContentRef}
          role="region"
          aria-hidden={true}
        >
          <div>
            <Row className={styles.absTextFieldRow}>
              <TextField
                onChange={this.onBotInputChange}
                data-prop="serviceName"
                value={serviceName}
                label="Azure BotId"
                tabIndex={-1}
              />
              <TextField
                onChange={this.onBotInputChange}
                data-prop="tenantId"
                value={tenantId}
                label="Azure Directory ID"
                tabIndex={-1}
              />
            </Row>
            <Row className={styles.absTextFieldRow}>
              <TextField
                onChange={this.onBotInputChange}
                value={subscriptionId}
                data-prop="subscriptionId"
                label="Azure Subscription ID"
                tabIndex={-1}
              />
              <TextField
                data-prop="resourceGroup"
                onChange={this.onBotInputChange}
                value={resourceGroup}
                label="Azure Resource Group"
                tabIndex={-1}
              />
            </Row>
          </div>
        </div>
        <DialogFooter>
          <DefaultButton text="Cancel" onClick={this.onCancelClick} />
          <PrimaryButton disabled={!this.isDirty || !valid} text="Save" onClick={this.onSaveClick} />
        </DialogFooter>
      </Dialog>
    );
  }