render()

in src/custom-header/custom-headers.tsx [101:144]

• 33 lines of code
• 2 McCabe index (conditional complexity)

  render() {
    const { readOnly, theme } = this.props;
    const { headers } = this.state;
    const { spacing } = theme;

    const styles = {
      container: css({
        marginTop: spacing(3),
      }),
      addHeaderButton: css({
        marginTop: spacing(1.5),
      }),
    };

    return (
      <div className={styles.container}>
        <ConfigSection
          title="HTTP headers"
          description="Pass along additional context and metadata about the request/response for Metricstore(PromQL)"
          isCollapsible={false}
          isInitiallyOpen
          kind="sub-section"
        >
          <div>
            {headers.map((header) => (
              <CustomHeader
                key={header.id}
                header={header}
                onChange={(header) => this.onHeaderChange(header.id, header)}
                onDelete={() => this.onHeaderDelete(header.id)}
                onBlur={this.onBlur}
                readOnly={readOnly}
              />
            ))}
          </div>
          <div className={styles.addHeaderButton}>
            <Button icon="plus" variant="secondary" fill="outline" onClick={this.onHeaderAdd} disabled={readOnly}>
              {headers.length === 0 ? 'Add header' : 'Add another header'}
            </Button>
          </div>
        </ConfigSection>
      </div>
    );
  }