From af95852d2edc440adfc633cf41b73c3b6e74a51d Mon Sep 17 00:00:00 2001
From: Andrew Johnson <ajohnson@gocardless.com>
Date: Thu, 15 Apr 2021 22:18:59 +0100
Subject: [PATCH] suggestions

Signed-off-by: Andrew Johnson <ajohnson@gocardless.com>
---
 .../app/src/components/catalog/EntityPage.tsx   |  4 ++++
 plugins/github-deployments/package.json         |  3 +--
 .../GithubDeploymentsTable/columns.tsx          | 17 +++++++++--------
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 5dc4f4c570..e161022059 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -108,6 +108,7 @@ import {
 } from '@roadiehq/backstage-plugin-travis-ci';
 import React, { ReactNode, useMemo, useState } from 'react';
 import BadgeIcon from '@material-ui/icons/CallToAction';
+import { EntityGithubDeploymentsCard } from '@backstage/plugin-github-deployments';
 
 export const CICDSwitcher = ({ entity }: { entity: Entity }) => {
   // This component is just an example of how you can implement your company's logic in entity page.
@@ -247,6 +248,9 @@ const ComponentOverviewContent = ({ entity }: { entity: Entity }) => (
     <Grid item xs={12} md={6}>
       <EntityHasSubcomponentsCard variant="gridItem" />
     </Grid>
+    <Grid item xs={12} md={6}>
+      <EntityGithubDeploymentsCard />
+    </Grid>
   </Grid>
 );
 
diff --git a/plugins/github-deployments/package.json b/plugins/github-deployments/package.json
index 6d4e61d4eb..b8761c1385 100644
--- a/plugins/github-deployments/package.json
+++ b/plugins/github-deployments/package.json
@@ -31,8 +31,7 @@
     "luxon": "^1.26.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-use": "^15.3.3",
-    "@types/react": "^16.9"
+    "react-use": "^15.3.3"
   },
   "devDependencies": {
     "@backstage/cli": "^0.6.6",
diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx
index fe166be6e0..e1a9fc180b 100644
--- a/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx
+++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx
@@ -26,7 +26,7 @@ import { GithubDeployment } from '../../api';
 import { DateTime } from 'luxon';
 import { Box, Typography, Link } from '@material-ui/core';
 
-const statusIndicator = (value: string): React.ReactNode => {
+const statusIndicator = (value: string): JSX.Element => {
   switch (value) {
     case 'PENDING':
       return <StatusPending />;
@@ -53,7 +53,7 @@ export function createEnvironmentColumn(): TableColumn<GithubDeployment> {
 export function createStatusColumn(): TableColumn<GithubDeployment> {
   return {
     title: 'Status',
-    render: (row: GithubDeployment): React.ReactNode => (
+    render: (row: GithubDeployment): JSX.Element => (
       <Box display="flex" alignItems="center">
         {statusIndicator(row.state)}
         <Typography variant="caption">{row.state}</Typography>
@@ -65,7 +65,7 @@ export function createStatusColumn(): TableColumn<GithubDeployment> {
 export function createCommitColumn(): TableColumn<GithubDeployment> {
   return {
     title: 'Commit',
-    render: (row: GithubDeployment): React.ReactNode => (
+    render: (row: GithubDeployment): JSX.Element => (
       <Link href={row.commit.commitUrl} target="_blank" rel="noopener">
         {row.commit.abbreviatedOid}
       </Link>
@@ -83,17 +83,18 @@ export function createCreatorColumn(): TableColumn<GithubDeployment> {
 export function createLastUpdatedColumn(): TableColumn<GithubDeployment> {
   return {
     title: 'Last Updated',
-    render: (row: GithubDeployment): React.ReactNode =>
-      DateTime.fromISO(row.updatedAt).toRelative({ locale: 'en' }),
+    render: (row: GithubDeployment): JSX.Element => (
+      <Box>{DateTime.fromISO(row.updatedAt).toRelative({ locale: 'en' })}</Box>
+    ),
   };
 }
 
-export function createPayloadColumn(
+export function createCustomColumn(
   title: string,
-  render: (payload: string) => React.ReactNode,
+  render: (payload: GithubDeployment) => JSX.Element,
 ): TableColumn<GithubDeployment> {
   return {
     title: title,
-    render: (deployment: GithubDeployment) => render(deployment.payload),
+    render: (deployment: GithubDeployment) => render(deployment),
   };
 }