function TableHeader()

in src/components/CompareResults/TableHeader.tsx [269:411]

• 30 lines of code
• 1 McCabe index (conditional complexity)

function TableHeader({
  columnsConfiguration,
  filters,
  onToggleFilter,
  onClearFilter,
  sortColumn,
  sortDirection,
  onToggleSort,
}: TableHeaderProps) {
  const themeMode = useAppSelector((state) => state.theme.mode);
  const styles = {
    tableHeader: style({
      display: 'grid',
      // Should be kept in sync with the gridTemplateColumns from RevisionRow
      gridTemplateColumns: columnsConfiguration
        .map((config) => config.gridWidth)
        .join(' '),
      background:
        themeMode == 'light' ? Colors.Background100 : Colors.Background300Dark,
      borderRadius: '4px',
      paddingBlock: Spacing.Small,
      marginTop: Spacing.Medium,
      marginBottom: Spacing.Large,
      $nest: {
        '.cell': {
          borderBottom: 'none',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 0,
          margin: 0,
          fontWeight: 700,
        },
        '.subtests-header': {
          justifySelf: 'start',
          paddingInlineStart: Spacing.Medium, // Synchronize with the subtests row
        },
        '.platform-header': {
          justifySelf: 'start',
          paddingInlineStart: Spacing.xLarge, // Synchronize with the platform row
        },
      },
    }),

    typography: style({
      fontFamily: 'SF Pro',
      fontStyle: 'normal',
      fontWeight: 590,
      fontSize: '16px',
      lineHeight: '1.5',
    }),
  };

  function renderColumnHeader(header: CompareResultsTableColumn) {
    let content: ReactNode = header.name;

    if ('sortFunction' in header && 'filter' in header) {
      content = (
        <ButtonGroup
          variant='contained'
          color='tableHeaderButton'
          disableElevation
        >
          <SortableColumnHeader
            name={header.name}
            displayLabel={false}
            sortDirection={header.key === sortColumn ? sortDirection : null}
            onToggle={(newSortDirection) =>
              onToggleSort(header.key, newSortDirection)
            }
          />
          <FilterableColumnHeader
            possibleValues={header.possibleValues}
            name={header.name}
            columnId={header.key}
            checkedValues={filters.get(header.key)}
            onClearFilter={() => onClearFilter(header.key)}
            onToggleFilter={(checkedValues) =>
              onToggleFilter(header.key, checkedValues)
            }
            tooltip={header.tooltip}
          />
        </ButtonGroup>
      );
    } else if ('sortFunction' in header) {
      content = (
        <SortableColumnHeader
          name={header.name}
          displayLabel={true}
          sortDirection={header.key === sortColumn ? sortDirection : null}
          onToggle={(newSortDirection) =>
            onToggleSort(header.key, newSortDirection)
          }
        />
      );
    } else if ('filter' in header) {
      content = (
        <FilterableColumnHeader
          possibleValues={header.possibleValues}
          name={header.name}
          columnId={header.key}
          checkedValues={filters.get(header.key)}
          onClearFilter={() => onClearFilter(header.key)}
          onToggleFilter={(checkedValues) =>
            onToggleFilter(header.key, checkedValues)
          }
          tooltip={header.tooltip}
        />
      );
    }
    // we don't want to show tooltip in filterable columns again
    if (header.tooltip && !('filter' in header)) {
      return (
        <Tooltip title={header.tooltip} placement='top' arrow>
          {/* Box is used because tooltip expects a single valid element but sometimes content is a string */}
          <Box component='span' sx={{ cursor: 'pointer' }}>
            {content}
          </Box>
        </Tooltip>
      );
    }

    return content;
  }

  return (
    <div
      className={`${styles.tableHeader} ${styles.typography}`}
      data-testid='table-header'
      role='row'
    >
      {columnsConfiguration.map((header) => (
        <div
          key={`${header.key}`}
          className={`cell ${header.key}-header`}
          role='columnheader'
        >
          {renderColumnHeader(header)}
        </div>
      ))}
    </div>
  );
}