update for comments

Signed-off-by: Andrew Johnson <ajohnson@gocardless.com>

plugins/github-deployments/README.md

@@ -4,18 +4,13 @@ The GitHub Deployments Plugin displays recent deployments from GitHub.
 
 ![github-deployments-card](./docs/github-deployments-card.png)
 
+## Prerequisites
+
+- [GitHub Authentication Provider](https://backstage.io/docs/auth/github/provider)
+
 ## Getting Started
 
-1. Provide OAuth credentials:
-
-- Create an [OAuth App](https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/) and set env variables for ID and Secret.
-
-```bash
-export AUTH_GITHUB_CLIENT_ID={{YOUR_CLIENT_ID}}
-export AUTH_CLIENT_SECRET={{YOUR_CLIENT_SECRET}}
-```
-
-2. Install the GitHub Deployments Plugin.
+1. Install the GitHub Deployments Plugin.
 
 ```bash
 # packages/app
@@ -23,7 +18,7 @@ export AUTH_CLIENT_SECRET={{YOUR_CLIENT_SECRET}}
 yarn add @backstage/plugin-github-deployments
 ```
 
-3. Add the plugin to the app
+2. Add the plugin to the app
 
 ```typescript
 // packages/app/src/plugins.ts
@@ -31,7 +26,7 @@ yarn add @backstage/plugin-github-deployments
 export { plugin as GithubDeployments } from '@backstage/plugin-github-deployments';
 ```
 
-4. Add the `EntityGithubDeploymentsCard` to the EntityPage:
+3. Add the `EntityGithubDeploymentsCard` to the EntityPage:
 
 ```typescript
 // packages/app/src/components/catalog/EntityPage.tsx
@@ -49,7 +44,7 @@ const OverviewContent = () => (
 );
 ```
 
-5. Add the `github.com/project-slug` annotation to your `catalog-info.yaml` file:
+4. Add the `github.com/project-slug` annotation to your `catalog-info.yaml` file:
 
 ```yaml
 apiVersion: backstage.io/v1alpha1

plugins/github-deployments/package.json

@@ -28,7 +28,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
     "@octokit/graphql": "^4.6.1",
-    "moment": "^2.29.1",
+    "luxon": "^1.26.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-use": "^15.3.3"

plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx

@@ -24,14 +24,14 @@ import {
   OAuthApi,
 } from '@backstage/core';
 
-import { render } from '@testing-library/react';
-import { setupServer } from 'msw/node';
+import { msw } from '@backstage/test-utils'
 import { GithubDeploymentsApiClient, githubDeploymentsApiRef } from '../api';
 import { githubDeploymentsPlugin } from '../plugin';
 import { GithubDeploymentsCard } from './GithubDeploymentsCard';
 
 import { entityStub, noDataResponseStub, responseStub } from '../mocks/mocks';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
+import { setupServer } from 'msw/node';
 import { graphql } from 'msw';
 
 jest.mock('@backstage/plugin-catalog-react', () => ({
@@ -55,9 +55,7 @@ const apis = ApiRegistry.from([
 
 describe('github-deployments', () => {
   const worker = setupServer();
-  beforeAll(() => worker.listen());
-  afterAll(() => worker.close());
-  afterEach(() => worker.resetHandlers());
+  msw.setupDefaultHandlers(worker);
 
   beforeEach(() => {
     jest.resetAllMocks();
@@ -77,12 +75,10 @@ describe('github-deployments', () => {
         ),
       );
 
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <GithubDeploymentsCard />
-          </ApiProvider>,
-        ),
+      const rendered = await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <GithubDeploymentsCard />
+        </ApiProvider>,
       );
 
       expect(await rendered.findByText('active')).toBeInTheDocument();
@@ -107,12 +103,10 @@ describe('github-deployments', () => {
         ),
       );
 
-      const rendered = render(
-        wrapInTestApp(
-          <ApiProvider apis={apis}>
-            <GithubDeploymentsCard />
-          </ApiProvider>,
-        ),
+      const rendered = await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <GithubDeploymentsCard />
+        </ApiProvider>,
       );
 
       expect(

plugins/github-deployments/src/components/GithubDeploymentsCard.tsx

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { LinearProgress } from '@material-ui/core';
-import { InfoCard, MissingAnnotationEmptyState, useApi } from '@backstage/core';
+import { InfoCard, MissingAnnotationEmptyState, Progress, ResponseErrorPanel, useApi } from '@backstage/core';
 import { useAsync } from 'react-use';
 import { githubDeploymentsApiRef } from '../api';
 import { useEntity } from '@backstage/plugin-catalog-react';
@@ -42,15 +41,13 @@ const GithubDeploymentsComponent = ({
   if (loading) {
     return (
       <InfoCard title="GitHub Deployments">
-        <LinearProgress />
+        <Progress />
       </InfoCard>
     );
   }
   if (error) {
     return (
-      <InfoCard title="GitHub Deployments">
-        Error occured while fetching Data
-      </InfoCard>
+      <ResponseErrorPanel error={error} />
     );
   }
 

plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Table, TableColumn } from '@backstage/core';
+import { StatusPending, StatusRunning, StatusOK, Table, TableColumn, StatusAborted, StatusError } from '@backstage/core';
 import { GithubDeployment } from '../../api';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 import { Box, Typography, Link, makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
@@ -27,31 +27,21 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const lastUpdated = (start: string): string => moment(start).fromNow();
-
-const State = ({ value }: { value: string }) => {
-  const colorMap: Record<string, string> = {
-    PENDING: 'orange',
-    IN_PROGRESS: 'orange',
-    ACTIVE: 'green',
-  };
-
-  return (
-    <Box display="flex" alignItems="center">
-      <span
-        style={{
-          display: 'block',
-          width: '8px',
-          height: '8px',
-          borderRadius: '50%',
-          backgroundColor: colorMap[value] || 'grey',
-          marginRight: '5px',
-        }}
-      />
-      <Typography variant="caption">{value}</Typography>
-    </Box>
-  );
-};
+const statusIndicator = (value: string): React.ReactNode => {
+  switch (value) {
+    case 'PENDING':
+      return <StatusPending />;
+    case 'IN_PROGRESS':
+      return <StatusRunning />;
+    case 'ACTIVE':
+      return <StatusOK />;
+    case 'ERROR':
+    case 'FAILURE':
+      return <StatusError />;
+    default:
+      return <StatusAborted />;
+  }
+}
 
 const columns: TableColumn<GithubDeployment>[] = [
   {
@@ -62,7 +52,10 @@ const columns: TableColumn<GithubDeployment>[] = [
   {
     title: 'Status',
     render: (row: GithubDeployment): React.ReactNode => (
-      <State value={row.state} />
+      <Box display="flex" alignItems="center">
+        { statusIndicator(row.state)}
+        <Typography variant="caption">{row.state}</Typography>
+      </Box>
     ),
   },
   {
@@ -76,7 +69,7 @@ const columns: TableColumn<GithubDeployment>[] = [
   {
     title: 'Last Updated',
     render: (row: GithubDeployment): React.ReactNode =>
-      lastUpdated(row.updatedAt),
+      DateTime.fromISO(row.updatedAt).toRelative({ locale: 'en' }),
   },
 ];
 

plugins/github-deployments/src/index.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 export {
-  githubDeploymentsPlugin as plugin,
+  githubDeploymentsPlugin,
   EntityGithubDeploymentsCard,
 } from './plugin';
-export { isGithubDeploymentsAvailable as isPluginApplicableToEntity } from './Router';
+export { isGithubDeploymentsAvailable } from './Router';

plugins/github-deployments/src/mocks/mocks.ts

@@ -1,5 +1,3 @@
-import { QueryResponse } from '../api';
-
 /*
  * Copyright 2021 Spotify AB
  *
@@ -15,6 +13,8 @@ import { QueryResponse } from '../api';
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { QueryResponse } from '../api';
+
 export const entityStub = {
   entity: {
     metadata: {