feat: react-router links, some ui edits

plugins/circleci/package.json

@@ -30,6 +30,7 @@
     "circleci-api": "^4.0.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-router": "^5.1.2",
     "react-use": "^13.0.0"
   },
   "files": [

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

@@ -1,15 +1,22 @@
 // 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 Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Button from '@material-ui/core/Button';
 import {
-  StatusRunning,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableContainer,
+  TableRow,
+  Link,
+  CircularProgress,
+  List,
+  ListItem,
+  ListItemText,
+} from '@material-ui/core';
+import { Replay as RetryIcon } from '@material-ui/icons';
+import {
   StatusFailed,
   StatusOK,
   StatusPending,
@@ -30,6 +37,7 @@ const useStyles = makeStyles({
 export type CITableBuildInfo = {
   id: string;
   buildName: string;
+  buildUrl?: string;
   source: {
     branchName: string;
     commit: {
@@ -55,7 +63,7 @@ const getStatusComponent = (status: string) => {
     case 'scheduled':
       return <StatusPending />;
     case 'running':
-      return <StatusRunning />;
+      return <CircularProgress size={12} />;
     case 'failed':
       return <StatusFailed />;
     case 'success':
@@ -79,7 +87,7 @@ export const CITable: FC<{
             <TableCell>ID</TableCell>
             <TableCell>Build</TableCell>
             <TableCell>Source</TableCell>
-            <TableCell>Status</TableCell>
+            <TableCell align="center">Status</TableCell>
             <TableCell>Tests</TableCell>
             <TableCell>Actions</TableCell>
           </TableRow>
@@ -88,14 +96,24 @@ export const CITable: FC<{
           {builds.map(build => (
             <TableRow key={build.id}>
               <TableCell>{build.id}</TableCell>
-              <TableCell>{build.buildName}</TableCell>
               <TableCell>
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                  <div>{build.source.branchName}</div>
-                  <div>{build.source.commit.hash}</div>
-                </div>
+                <Link href={build.buildUrl} target="_blank">
+                  {build.buildName}
+                </Link>
+              </TableCell>
+              <TableCell>
+                <List dense>
+                  <ListItem>
+                    <ListItemText primary={build.source.branchName} />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText primary={build.source.commit.hash} />
+                  </ListItem>
+                </List>
+              </TableCell>
+              <TableCell align="center">
+                {getStatusComponent(build.status)}
               </TableCell>
-              <TableCell>{getStatusComponent(build.status)}</TableCell>
               <TableCell>
                 {build.tests && (
                   <>
@@ -106,7 +124,9 @@ export const CITable: FC<{
                 )}
               </TableCell>
               <TableCell>
-                <Button onClick={build.onRetryClick}>Retry</Button>
+                <Button onClick={build.onRetryClick}>
+                  <RetryIcon />
+                </Button>
               </TableCell>
             </TableRow>
           ))}

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

@@ -54,7 +54,10 @@ const transform = (
   return buildsData.map(buildData => {
     const tableBuildInfo: CITableBuildInfo = {
       id: String(buildData.build_num),
-      buildName: buildData.subject ? String(buildData.subject) : '',
+      buildName: buildData.subject
+        ? buildData.subject +
+          (buildData.retry_of ? ` (retry of #${buildData.retry_of})` : '')
+        : '',
       onRetryClick: () => api.retry(String(buildData.build_num)),
       source: {
         branchName: String(buildData.branch),
@@ -64,6 +67,7 @@ const transform = (
         },
       },
       status: makeReadableStatus(buildData.status),
+      buildUrl: buildData.build_url,
       tests: {
         failed: 0,
         passed: 10,

plugins/circleci/src/components/CircleCIPage/CircleCIPage.tsx

@@ -15,7 +15,10 @@
  */
 
 import React, { FC } from 'react';
+import { Route } from 'react-router';
+import { Link as RouterLink } from 'react-router-dom';
 import { Grid, Button } from '@material-ui/core';
+import { Settings as SettingsIcon } from '@material-ui/icons';
 import {
   InfoCard,
   Header,
@@ -27,28 +30,39 @@ import {
   SupportButton,
 } from '@backstage/core';
 import { CircleCIFetch } from '../CircleCIFetch';
-
+import { SettingsPage } from '../SettingsPage';
 export const CircleCIPage: FC<{}> = () => {
   return (
-    <Page theme={pageTheme.tool}>
-      <Header title="Welcome to circleci!" subtitle="Optional subtitle">
-        <HeaderLabel label="Owner" value="Team X" />
-        <HeaderLabel label="Lifecycle" value="Alpha" />
-      </Header>
-      <Content>
-        <ContentHeader title="Circle CI">
-          <Button href="/circleci/settings">Settings</Button>
-          <SupportButton>A description of your plugin goes here.</SupportButton>
-        </ContentHeader>
-        <Grid container spacing={3} direction="column">
-          <Grid item>
-            <InfoCard title="Pipelines">
-              <CircleCIFetch />
-            </InfoCard>
+    <>
+      <Route path="/circleci/settings" component={SettingsPage} />
+      <Page theme={pageTheme.tool}>
+        <Header title="Welcome to circleci!" subtitle="Optional subtitle">
+          <HeaderLabel label="Owner" value="Team X" />
+          <HeaderLabel label="Lifecycle" value="Alpha" />
+        </Header>
+        <Content>
+          <ContentHeader title="Circle CI">
+            <Button
+              component={RouterLink}
+              to="/circleci/settings"
+              startIcon={<SettingsIcon />}
+            >
+              Settings
+            </Button>
+            <SupportButton>
+              A description of your plugin goes here.
+            </SupportButton>
+          </ContentHeader>
+          <Grid container spacing={3} direction="column">
+            <Grid item>
+              <InfoCard title="Pipelines">
+                <CircleCIFetch />
+              </InfoCard>
+            </Grid>
           </Grid>
-        </Grid>
-      </Content>
-    </Page>
+        </Content>
+      </Page>
+    </>
   );
 };
 

plugins/circleci/src/components/SettingsPage/SettingsPage.tsx

@@ -13,12 +13,12 @@ import {
   SupportButton,
 } from '@backstage/core';
 import { ProjectInput } from 'components/ProjectInput/ProjectInput';
+import { Link as RouterLink } from 'react-router-dom';
 
 export const SettingsPage = () => {
-  const [authed, setAuthed] = React.useState(false);
-  const [token, setToken] = React.useState('');
-
   const api = useApi(circleCIApiRef);
+  const [authed, setAuthed] = React.useState(api.authed);
+  const [token, setToken] = React.useState('');
 
   React.useEffect(() => {
     api
@@ -36,7 +36,9 @@ export const SettingsPage = () => {
       </Header>
       <Content>
         <ContentHeader title="Settings">
-          <Button href="/circleci">Back</Button>
+          <Button component={RouterLink} to="/circleci">
+            Back
+          </Button>
           <SupportButton>A description of your plugin goes here.</SupportButton>
         </ContentHeader>
         <Grid container spacing={3} direction="column">
@@ -77,8 +79,7 @@ export const SettingsPage = () => {
                 )}
               </List>
             </InfoCard>
-            <ProjectInput setGitInfo={(info) => 
-            api.setVCSOptions(info)}/>
+            <ProjectInput setGitInfo={info => api.setVCSOptions(info)} />
           </Grid>
         </Grid>
       </Content>

plugins/circleci/src/plugin.ts

@@ -15,12 +15,10 @@
  */
 import { createPlugin } from '@backstage/core';
 import { CircleCIPage } from './components/CircleCIPage';
-import { SettingsPage } from './components/SettingsPage';
 
 export const plugin = createPlugin({
   id: 'circleci',
   register({ router }) {
-    router.registerRoute('/circleci', CircleCIPage);
-    router.registerRoute('/circleci/settings', SettingsPage);
+    router.registerRoute('/circleci', CircleCIPage, { exact: false });
   },
 });