public render()

in src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx [84:170]
86 lines of code
5 McCabe index (conditional complexity)

  public render(): JSX.Element {
    const numInProgress = this.state.allConsoleData.filter(
      (data: ConsoleData) => data.type === ConsoleDataType.InProgress,
    ).length;
    const numErroredItems = this.state.allConsoleData.filter(
      (data: ConsoleData) => data.type === ConsoleDataType.Error,
    ).length;
    const numInfoItems = this.state.allConsoleData.filter(
      (data: ConsoleData) => data.type === ConsoleDataType.Info,
    ).length;

    return (
      <div className="notificationConsoleContainer">
        <div
          className="notificationConsoleHeader"
          id="notificationConsoleHeader"
          role="button"
          aria-label="Console"
          aria-expanded={this.props.isConsoleExpanded}
          onClick={() => this.expandCollapseConsole()}
          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
          tabIndex={0}
        >
          <div className="statusBar">
            <span className="dataTypeIcons">
              <span className="notificationConsoleHeaderIconWithData">
                <img src={LoadingIcon} alt="In progress items" />
                <span className="numInProgress">{numInProgress}</span>
              </span>
              <span className="notificationConsoleHeaderIconWithData">
                <img src={ErrorBlackIcon} alt="Error items" />
                <span className="numErroredItems">{numErroredItems}</span>
              </span>
              <span className="notificationConsoleHeaderIconWithData">
                <img src={infoBubbleIcon} alt="Info items" />
                <span className="numInfoItems">{numInfoItems}</span>
              </span>
            </span>
            {userContext.features.pr && <PrPreview pr={userContext.features.pr} />}
            <span className="consoleSplitter" />
            <span className="headerStatus">
              <span className="headerStatusEllipsis" aria-live="assertive" aria-atomic="true">
                {this.state.headerStatus}
              </span>
            </span>
          </div>
          <div className="expandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton">
            <img
              src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
              alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
            />
          </div>
        </div>
        <AnimateHeight
          duration={NotificationConsoleComponent.transitionDurationMs}
          height={this.props.isConsoleExpanded ? "auto" : 0}
          onAnimationEnd={this.onConsoleWasExpanded}
        >
          <div data-test="NotificationConsole/Contents" className="notificationConsoleContents">
            <div className="notificationConsoleControls">
              <Dropdown
                label="Filter:"
                selectedKey={this.state.selectedFilter}
                options={NotificationConsoleComponent.FilterOptions}
                onChange={this.onFilterSelected.bind(this)}
              />
              <span className="consoleSplitter" />
              <span
                className="clearNotificationsButton"
                onClick={() => this.clearNotifications()}
                role="button"
                onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.onClearNotificationsKeyPress(event)}
                tabIndex={0}
                style={{ border: "1px solid black", borderRadius: "2px" }}
              >
                <img src={ClearIcon} alt="clear notifications image" />
                Clear Notifications
              </span>
            </div>
            <div className="notificationConsoleData">
              {this.renderAllFilteredConsoleData(this.getFilteredConsoleData())}
            </div>
          </div>
        </AnimateHeight>
      </div>
    );
  }