dashboard/client/src/GithubTeamTable.tsx

import React from "react";
import { Link } from "@material-ui/core";
import MUIDataTable, { MUIDataTableColumn } from "mui-datatables";
import { useGithubTeamTable } from "./data/GithubTeamTable";

function GithubTeamTableCellContainer({
  value,
  url,
  header,
}: {
  value: number;
  url: string;
  header: string | undefined;
}) {
  let style = {};
  if (
    header === "No Type" ||
    header === "No Priority" ||
    header === "Untriaged"
  ) {
    if (value >= 10) {
      style = { color: "#e53935", fontWeight: "bold" };
    }
  } else if (header === "Awaiting Review") {
    if (value >= 5) {
      style = { color: "#e53935", fontWeight: "bold" };
    }
  }
  return (
    <Link href={url} target="_blank" style={style}>
      {value}
    </Link>
  );
}

function TeamOwnerCell({ value }: { value: string }) {
  if (value === "(none)") {
    return null;
  }

  return (
    <Link href={`https://github.com/${value}`} target="_blank">
      {value}
    </Link>
  );
}

export interface GithubTeamTableContainerProps {
  owner: string;
  repo: string;
}

export default function GithubTeamTableContainer({
  owner,
  repo,
}: GithubTeamTableContainerProps) {
  const { data: table, error, loading } = useGithubTeamTable(
    owner,
    repo,
    "open-issues"
  );

  const data = React.useMemo(
    () =>
      table && table.rows
        ? table.rows.map((row, index) => {
            const data: any = {};
            for (let key of Object.keys(row.cells)) {
              data[`cells.${key}`] = row.cells[key].count;
            }
            data["team.name"] = row.team.name;
            let teamOwner = row.team.teamOwner;
            if (teamOwner === "") {
              teamOwner = "(none)";
            }
            data["team.teamOwner"] = teamOwner;
            data["index"] = index;
            return data;
          })
        : [],
    [table]
  );

  const columns: MUIDataTableColumn[] = React.useMemo(() => {
    if (!(table && table.headers)) {
      return [];
    }

    const displayTeamColumn = table.rows.length > 1;
    return [
      {
        name: "team.name",
        label: "Team",
        options: {
          filterType: "multiselect",
          viewColumns: displayTeamColumn,
          filter: displayTeamColumn,
          display: displayTeamColumn,
        },
      },
      ...table.headers.map(
        (header) =>
          ({
            name: `cells.${header.id}`,
            label: header.name,
            options: {
              filter: false,
              sortDescFirst: true,
              customBodyRender: (value, tableMeta) => {
                let url = "";

                const row = table.rows.find(
                  (row) => row.team.name === tableMeta.rowData[0]
                );
                if (row) {
                  const key = tableMeta.columnData.name.substring(
                    "cells.".length
                  );
                  url = row.cells[key].url;
                }

                return (
                  <GithubTeamTableCellContainer
                    value={value}
                    url={url}
                    header={tableMeta.columnData.label}
                  />
                );
              },
            },
          } as MUIDataTableColumn)
      ),
      {
        name: "team.teamOwner",
        label: "Owner",
        options: {
          filterType: "multiselect",
          customBodyRender: (value) => {
            return <TeamOwnerCell value={value} />;
          },
        },
      },
    ];
  }, [table]);

  if (loading) {
    return <span>Loading</span>;
  }

  if (error) {
    return <span>Error</span>;
  }

  return (
    <MUIDataTable
      title={table.name}
      columns={columns}
      data={data}
      options={{
        elevation: 1,
        selectableRows: "none",
        download: false,
        print: false,
      }}
    />
  );
}