fix: PR comments

app-config.yaml

@@ -21,8 +21,8 @@ organization:
   name: Spotify
 
 github-actions:
-  owner: CircleCITest3
-  repo: try-ssr
+  owner: spotify
+  repo: backstage
 
 techdocs:
   storageUrl: https://techdocs-mock-sites.storage.googleapis.com

plugins/github-actions/src/components/WorkflowRunDetailsPage/WorkflowRunDetailsPage.tsx

@@ -30,20 +30,30 @@ import {
   ExpansionPanelDetails,
   ExpansionPanel,
   ExpansionPanelSummary,
-  ListItem,
-  List,
   ListItemText,
   CircularProgress,
+  Grid,
 } from '@material-ui/core';
 import moment from 'moment';
 
 import React from 'react';
-import { Link, useApi, configApiRef } from '@backstage/core';
+import {
+  Link,
+  useApi,
+  configApiRef,
+  Page,
+  Header,
+  HeaderLabel,
+  Content,
+  ContentHeader,
+  SupportButton,
+  pageTheme,
+} from '@backstage/core';
 import { Job, Step, Jobs } from '../types';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { WorkflowRunStatusIndicator } from '../WorkflowRunStatusIndicator';
 import { useWorkflowRunsDetails } from './useWorkflowRunsDetails';
 import { useWorkflowRunJobs } from './useWorkflowRunJobs';
+import { WorkflowRunStatusIcon } from '../WorkflowRunStatusIcon/WorkflowRunStatusIcon';
 
 const useStyles = makeStyles<Theme>(theme => ({
   root: {
@@ -92,12 +102,18 @@ const getElapsedTime = (start: string, end: string) => {
 
 const StepView = ({ step }: { step: Step }) => {
   return (
-    <ListItem>
-      <ListItemText
-        primary={step.name}
-        secondary={getElapsedTime(step.started_at, step.completed_at)}
-      />
-    </ListItem>
+    <TableRow>
+      <TableCell>
+        <ListItemText
+          primary={step.name}
+          secondary={getElapsedTime(step.started_at, step.completed_at)}
+        />
+      </TableCell>
+      <TableCell>
+        <WorkflowRunStatusIcon status={step.status.toUpperCase()} />
+        {step.status}
+      </TableCell>
+    </TableRow>
   );
 };
 
@@ -121,11 +137,13 @@ const JobListItem = ({ job, className }: { job: Job; className: string }) => {
         </Typography>
       </ExpansionPanelSummary>
       <ExpansionPanelDetails className={classes.expansionPanelDetails}>
-        <List>
-          {job.steps.map((step: Step) => (
-            <StepView step={step} />
-          ))}
-        </List>
+        <TableContainer>
+          <Table>
+            {job.steps.map((step: Step) => (
+              <StepView step={step} />
+            ))}
+          </Table>
+        </TableContainer>
       </ExpansionPanelDetails>
     </ExpansionPanel>
   );
@@ -154,75 +172,98 @@ export const WorkflowRunDetailsPage = () => {
   }
 
   return (
-    <div className={classes.root}>
-      <Typography className={classes.title} variant="h3">
-        <Link to="/github-actions">
-          <Typography component="span" variant="h3" color="primary">
-            &lt;
-          </Typography>
-        </Link>
-        Workflow Run Details
-      </Typography>
-      <TableContainer component={Paper} className={classes.table}>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Branch</Typography>
-              </TableCell>
-              <TableCell>{details.value?.head_branch}</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Message</Typography>
-              </TableCell>
-              <TableCell>{details.value?.head_commit.message}</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Commit ID</Typography>
-              </TableCell>
-              <TableCell>{details.value?.head_commit.id}</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Status</Typography>
-              </TableCell>
-              <TableCell>
-                <WorkflowRunStatusIndicator status={details.value?.status} />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Author</Typography>
-              </TableCell>
-              <TableCell>{`${details.value?.head_commit.author.name} (${details.value?.head_commit.author.email})`}</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Links</Typography>
-              </TableCell>
-              <TableCell>
-                {details.value?.html_url && (
-                  <Button>
-                    <a href={details.value.html_url}>GitHub</a>
-                  </Button>
-                )}
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell colSpan={2}>
-                <Typography noWrap>Jobs</Typography>
-                {jobs.loading ? (
-                  <CircularProgress />
-                ) : (
-                  <JobsList jobs={jobs.value} />
-                )}
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
+    <Page theme={pageTheme.tool}>
+      <Header
+        title="GitHub Actions"
+        subtitle="See recent worflow runs and their status"
+      >
+        <HeaderLabel label="Owner" value="Spotify" />
+        <HeaderLabel label="Lifecycle" value="Alpha" />
+      </Header>
+      <Content>
+        <ContentHeader title="Workflow run details">
+          <SupportButton>
+            This plugin allows you to view and interact with your builds within
+            the GitHub Actions environment.
+          </SupportButton>
+        </ContentHeader>
+        <Grid container spacing={3} direction="column">
+          <Grid item>
+            <div className={classes.root}>
+              <Typography className={classes.title} variant="h3">
+                <Link to="/github-actions">
+                  <Typography component="span" variant="h3" color="primary">
+                    &lt; Back
+                  </Typography>
+                </Link>
+              </Typography>
+              <TableContainer component={Paper} className={classes.table}>
+                <Table>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell>
+                        <Typography noWrap>Branch</Typography>
+                      </TableCell>
+                      <TableCell>{details.value?.head_branch}</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>
+                        <Typography noWrap>Message</Typography>
+                      </TableCell>
+                      <TableCell>
+                        {details.value?.head_commit.message}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>
+                        <Typography noWrap>Commit ID</Typography>
+                      </TableCell>
+                      <TableCell>{details.value?.head_commit.id}</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>
+                        <Typography noWrap>Status</Typography>
+                      </TableCell>
+                      <TableCell>
+                        <WorkflowRunStatusIcon status={details.value?.status} />{' '}
+                        {details.value?.status.toUpperCase()}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>
+                        <Typography noWrap>Author</Typography>
+                      </TableCell>
+                      <TableCell>{`${details.value?.head_commit.author.name} (${details.value?.head_commit.author.email})`}</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>
+                        <Typography noWrap>Links</Typography>
+                      </TableCell>
+                      <TableCell>
+                        {details.value?.html_url && (
+                          <Button>
+                            <a href={details.value.html_url}>GitHub</a>
+                          </Button>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell colSpan={2}>
+                        <Typography noWrap>Jobs</Typography>
+                        {jobs.loading ? (
+                          <CircularProgress />
+                        ) : (
+                          <JobsList jobs={jobs.value} />
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </div>
+          </Grid>
+        </Grid>
+      </Content>
+    </Page>
   );
 };

plugins/github-actions/src/components/WorkflowRunStatusIcon/WorkflowRunStatusIcon.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { StatusPending, StatusRunning, StatusOK } from '@backstage/core';
+import React from 'react';
+
+export const WorkflowRunStatusIcon = ({
+  status,
+}: {
+  status: string | undefined;
+}) => {
+  if (status === undefined) return null;
+  switch (status.toLowerCase()) {
+    case 'queued':
+      return <StatusPending />;
+    case 'in_progress':
+      return <StatusRunning />;
+    case 'completed':
+      return <StatusOK />;
+    default:
+      return <StatusPending />;
+  }
+};

plugins/github-actions/src/components/WorkflowRunStatusIcon/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { WorkflowRunStatusIndicator } from './WorkflowRunStatusIndicator';
+export { WorkflowRunStatusIcon } from './WorkflowRunStatusIcon';

plugins/github-actions/src/components/WorkflowRunStatusIndicator/WorkflowRunStatusIndicator.tsx

@@ -1,79 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { IconComponent } from '@backstage/core';
-import { makeStyles, Theme, Typography } from '@material-ui/core';
-import ProgressIcon from '@material-ui/icons/Autorenew';
-import SuccessIcon from '@material-ui/icons/CheckCircle';
-import UnknownIcon from '@material-ui/icons/Help';
-import React from 'react';
-
-type Props = {
-  status?: string;
-};
-
-type StatusStyle = {
-  icon: IconComponent;
-  color: string;
-};
-
-const styles: { [key: string]: StatusStyle } = {
-  unknown: {
-    icon: UnknownIcon,
-    color: '#f49b20',
-  },
-  completed: {
-    icon: SuccessIcon,
-    color: '#1db855',
-  },
-  queued: {
-    icon: UnknownIcon,
-    color: '#5BC0DE',
-  },
-  in_progress: {
-    icon: ProgressIcon,
-    color: '#BEBEBE',
-  },
-};
-
-const getIconStyle = (status?: string): StatusStyle => {
-  return styles[status ?? 'unknown'] ?? styles.unknown;
-};
-
-const useStyles = makeStyles<Theme, StatusStyle>({
-  icon: style => ({
-    color: style.color,
-  }),
-});
-
-export const WorkflowRunStatusIndicator = ({ status }: Props) => {
-  const style = getIconStyle(status);
-  const classes = useStyles(style);
-  const Icon = style.icon;
-
-  return (
-    <Typography
-      className={classes.icon}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        textTransform: 'capitalize',
-      }}
-    >
-      <Icon /> &nbsp;{`${status}`}
-    </Typography>
-  );
-};

plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx

@@ -18,14 +18,9 @@ import { Link, Typography, Box, IconButton } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import { Link as RouterLink } from 'react-router-dom';
-import {
-  StatusOK,
-  StatusPending,
-  StatusRunning,
-  Table,
-  TableColumn,
-} from '@backstage/core';
+import { Table, TableColumn } from '@backstage/core';
 import { useWorkflowRuns } from './useWorkflowRuns';
+import { WorkflowRunStatusIcon } from '../WorkflowRunStatusIcon';
 
 export type WorkflowRun = {
   id: string;
@@ -42,20 +37,6 @@ export type WorkflowRun = {
   onReRunClick: () => void;
 };
 
-// retried, canceled, infrastructure_fail, timedout, not_run, running, failed, queued, scheduled, not_running, no_tests, fixed, success
-const getStatusComponent = (status: string | undefined = '') => {
-  switch (status.toLowerCase()) {
-    case 'queued':
-      return <StatusPending />;
-    case 'in_progress':
-      return <StatusRunning />;
-    case 'completed':
-      return <StatusOK />;
-    default:
-      return <StatusPending />;
-  }
-};
-
 const generatedColumns: TableColumn[] = [
   {
     title: 'ID',
@@ -79,19 +60,21 @@ const generatedColumns: TableColumn[] = [
   {
     title: 'Source',
     render: (row: Partial<WorkflowRun>) => (
-      <>
+      <Typography variant="body2" noWrap>
         <p>{row.source?.branchName}</p>
         <p>{row.source?.commit.hash}</p>
-      </>
+      </Typography>
     ),
   },
   {
     title: 'Status',
     render: (row: Partial<WorkflowRun>) => (
       <Box display="flex" alignItems="center">
-        {getStatusComponent(row.status)}
+        <WorkflowRunStatusIcon status={row.status} />
         <Box mr={1} />
-        <Typography variant="button">{row.status}</Typography>
+        <Typography variant="button" noWrap>
+          {row.status}
+        </Typography>
       </Box>
     ),
   },