message: Extract CITable rows into components
diff: @@ -71,41 +71,18 @@ const getStatusComponent = (status: string) => {
  }
  };
  -export const CITable: FC<{
  - builds: CITableBuildInfo[];
  -}> = ({ builds }) => {
  - const classes = useStyles();
  - const isTestDataAvailable = builds.some(build => build.tests);
  - return (
  - <TableContainer>
  - <Table className={classes.table} size="small" aria-label="a dense table">
  - <TableHead>
  - <TableRow>
  - <TableCell>ID</TableCell>
  - <TableCell>Build</TableCell>
  - <TableCell>Source</TableCell>
  - <TableCell align="center">Status</TableCell>
  - {isTestDataAvailable && <TableCell>Tests</TableCell>}
  - <TableCell align="center">Actions</TableCell>
  - </TableRow>
  - </TableHead>
  - <TableBody>
  - {builds.map(build => (
  +export const CITableBuildRow: FC<{ build: CITableBuildInfo }> = ({ build }) => (
  <TableRow key={build.id}>
  <TableCell>{build.id}</TableCell>
  <TableCell>
  - <Link to={`/circleci/build/${build.id}`}>
  - {build.buildName}
  - </Link>
  + <Link to={`/circleci/build/${build.id}`}>{build.buildName}</Link>
  </TableCell>
  <TableCell>
  {build.source.branchName}
  <br />
  {build.source.commit.hash}
  </TableCell>
  - <TableCell align="center">
  - {getStatusComponent(build.status)}
  - </TableCell>
  + <TableCell align="center">{getStatusComponent(build.status)}</TableCell>
  {build.tests && (
  <TableCell>
  {
  @@ -123,6 +100,31 @@ export const CITable: FC<{
  </Button>
  </TableCell>
  </TableRow>
  +);
  +
  +export const CITableBuildHeadRow:FC<{isTestDataAvailable: boolean}> = ({isTestDataAvailable}) => (
  + <TableRow>
  + <TableCell>ID</TableCell>
  + <TableCell>Build</TableCell>
  + <TableCell>Source</TableCell>
  + <TableCell align="center">Status</TableCell>
  + {isTestDataAvailable && <TableCell>Tests</TableCell>}
  + <TableCell align="center">Actions</TableCell>
  + </TableRow>
  +);
  +
  +export const CITable: FC<{
  + builds: CITableBuildInfo[];
  +}> = ({ builds }) => {
  + const classes = useStyles();
  + const isTestDataAvailable = builds.some(build => build.tests);
  + return (
  + <TableContainer>
  + <Table className={classes.table} size="small" aria-label="a dense table">
  + <TableHead><CITableBuildHeadRow isTestDataAvailable={isTestDataAvailable}/></TableHead>
  + <TableBody>
  + {builds.map(build => (
  + <CITableBuildRow build={build} />
  ))}
  </TableBody>
  </Table>
  