feat: make it work

packages/app/package.json

@@ -19,13 +19,14 @@
   "dependencies": {
     "@backstage/cli": "^0.1.1-alpha.4",
     "@backstage/core": "^0.1.1-alpha.4",
-    "@backstage/plugin-explore": "^0.1.1-alpha.4",
     "@backstage/plugin-circleci": "^0.1.1-alpha.4",
+    "@backstage/plugin-explore": "^0.1.1-alpha.4",
     "@backstage/plugin-home-page": "^0.1.1-alpha.4",
     "@backstage/plugin-inventory": "^0.1.1-alpha.4",
     "@backstage/plugin-lighthouse": "^0.1.1-alpha.4",
     "@backstage/plugin-scaffolder": "^0.1.1-alpha.4",
     "@backstage/plugin-tech-radar": "^0.1.1-alpha.4",
+    "@backstage/plugin-test": "^0.1.1-alpha.4",
     "@backstage/plugin-welcome": "^0.1.1-alpha.4",
     "@backstage/theme": "^0.1.1-alpha.4",
     "@material-ui/core": "^4.9.1",

packages/app/src/setupProxy.js

@@ -1,7 +1,18 @@
-const { proxySettings } = require('@backstage/plugin-circleci');
-const { createProxyMiddleware } = require('http-proxy-middleware');
+const createProxyMiddleware = require('http-proxy-middleware');
+
+// FIXME: somehow get it from within the plugin itself?
+const circleCIProxySettings = {
+  '/circleci/api': {
+    target: 'https://circleci.com/api/v1.1',
+    changeOrigin: true,
+    logLevel: 'debug',
+    pathRewrite: {
+      '^/circleci/api/': '/',
+    },
+  },
+};
 
 module.exports = (/** @type {import('express').Application} */ app) =>
-  Object.entries(proxySettings).forEach(([url, settings]) =>
+  Object.entries(circleCIProxySettings).forEach(([url, settings]) =>
     app.use(url, createProxyMiddleware(settings)),
   );

plugins/circleci/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@backstage/plugin-circleci",
   "version": "0.1.1-alpha.4",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.esm.js",
+  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "private": true,

plugins/circleci/src/components/CITable/CITable.tsx

@@ -1,35 +1,27 @@
 // Idea for this component to be somehow reusable representation of CI table view
 import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import {
-  Button,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableContainer,
-  TableRow,
-  CircularProgress,
-} from '@material-ui/core';
+// import { makeStyles } from '@material-ui/core/styles';
+import { Link, CircularProgress, Button } from '@material-ui/core';
 import { Replay as RetryIcon } from '@material-ui/icons';
-import { Link } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import {
   StatusFailed,
   StatusOK,
   StatusPending,
   StatusNA,
+  Table,
 } from '@backstage/core';
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-  avatar: {
-    height: 32,
-    width: 32,
-    borderRadius: '50%',
-  },
-});
+import type { TableColumn } from '@backstage/core/src/components/Table';
+// const useStyles = makeStyles({
+//   table: {
+//     minWidth: 650,
+//   },
+//   avatar: {
+//     height: 32,
+//     width: 32,
+//     borderRadius: '50%',
+//   },
+// });
 
 export type CITableBuildInfo = {
   id: string;
@@ -54,7 +46,7 @@ export type CITableBuildInfo = {
 };
 
 // :retried, :canceled, :infrastructure_fail, :timedout, :not_run, :running, :failed, :queued, :scheduled, :not_running, :no_tests, :fixed, :success
-const getStatusComponent = (status: string) => {
+const getStatusComponent = (status: string | undefined = '') => {
   switch (status.toLowerCase()) {
     case 'queued':
     case 'scheduled':
@@ -71,63 +63,101 @@ const getStatusComponent = (status: string) => {
   }
 };
 
-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>
-    </TableCell>
-    <TableCell>
-      {build.source.branchName}
-      <br />
-      {build.source.commit.hash}
-    </TableCell>
-    <TableCell align="center">{getStatusComponent(build.status)}</TableCell>
-    {build.tests && (
-      <TableCell>
-        {
-          <>
-            {build.tests.passed}/{build.tests.total} (
-            {build.tests.failed ? build.tests.failed + ', ' : ''}
-            {build.tests.skipped ? build.tests.skipped : ''})
-          </>
-        }
-      </TableCell>
-    )}
-    <TableCell align="center">
-      <Button onClick={build.onRetryClick}>
+// 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>
+//     </TableCell>
+//     <TableCell>
+//       {build.source.branchName}
+//       <br />
+//       {build.source.commit.hash}
+//     </TableCell>
+//     <TableCell align="center">{getStatusComponent(build.status)}</TableCell>
+//     {build.tests && (
+//       <TableCell>
+//         {
+//           <>
+//             {build.tests.passed}/{build.tests.total} (
+//             {build.tests.failed ? build.tests.failed + ', ' : ''}
+//             {build.tests.skipped ? build.tests.skipped : ''})
+//           </>
+//         }
+//       </TableCell>
+//     )}
+//     <TableCell align="center">
+//       <Button onClick={build.onRetryClick}>
+//         <RetryIcon />
+//       </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>
+// );
+
+const generatedColumns: TableColumn[] = [
+  {
+    title: 'ID',
+    field: 'id',
+    type: 'numeric',
+  },
+  {
+    title: 'Build',
+    field: 'buildName',
+    highlight: true,
+    render: (row: Partial<CITableBuildInfo>) => (
+      <Link component={RouterLink} to={`/circleci/build/${row.id}`}>
+        {row.buildName}
+      </Link>
+    ),
+  },
+  {
+    title: 'Source',
+    render: (row: Partial<CITableBuildInfo>) => (
+      <>
+        {row.source?.branchName}
+        <br />
+        {row.source?.commit.hash}
+      </>
+    ),
+  },
+  {
+    title: 'Status',
+    render: (row: Partial<CITableBuildInfo>) => (
+      <>
+        {getStatusComponent(row.status)} {row.status}
+      </>
+    ),
+  },
+  {
+    title: 'Actions',
+    render: (row: Partial<CITableBuildInfo>) => (
+      <Button onClick={row.onRetryClick}>
         <RetryIcon />
       </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);
+}> = React.memo(({ 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>
-    </TableContainer>
+    <Table
+      options={{ paging: false }}
+      data={builds}
+      columns={generatedColumns}
+    />
   );
-};
+});

plugins/circleci/src/components/CircleCIFetch/CirleCIFetch.tsx

@@ -51,7 +51,7 @@ const transform = (
   buildsData: BuildSummary[],
   api: typeof circleCIApiRef.T,
 ): CITableBuildInfo[] => {
-  return buildsData.map(buildData => {
+  return buildsData.map((buildData) => {
     const tableBuildInfo: CITableBuildInfo = {
       id: String(buildData.build_num),
       buildName: buildData.subject

plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx

@@ -26,7 +26,7 @@ export const BuildsPage: FC<{}> = () => (
       </ContentHeader>
       <Grid container spacing={3} direction="column">
         <Grid item>
-          <InfoCard title="Pipelines">
+          <InfoCard>
             <CircleCIFetch />
           </InfoCard>
         </Grid>

plugins/circleci/src/proxy.ts

@@ -1,6 +1,4 @@
-import type {Options} from 'http-proxy-middleware';
-
-export const proxySettings: Record<string, Options> = {
+export const proxySettings = {
   '/circleci/api': {
     target: 'https://circleci.com/api/v1.1',
     changeOrigin: true,