render()

in src/components/QueryEditor/QueryOptionGroup.tsx [89:126]

• 36 lines of code
• 5 McCabe index (conditional complexity)

  render() {
    const { title, children, collapsedInfo, queryStats } = this.props;
    const { isOpen } = this.state;
    const styles = this.getStyles();

    return (
      <div className={styles.wrapper}>
        <Collapse
          className={styles.collapse}
          collapsible
          isOpen={isOpen}
          onToggle={this.toggleOpen}
          label={
            <Stack gap={0}>
              <h6 className={styles.title}>{title}</h6>
              {!isOpen && (
                <div className={styles.description}>
                  {collapsedInfo.map((x, i) => (
                    <span key={i}>{x}</span>
                  ))}
                </div>
              )}
            </Stack>
          }
        >
          <div className={styles.body}>{children}</div>
        </Collapse>
        {/**TODO: This is Loki logic that should eventually be moved to Loki */}
        {queryStats && config.featureToggles.lokiQuerySplitting && (
          <Tooltip content="Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.">
            <Icon tabIndex={0} name="info-circle" className={styles.tooltip} size="sm" />
          </Tooltip>
        )}

        {queryStats && <p className={styles.stats}>{generateQueryStats(queryStats)}</p>}
      </div>
    );
  }