update for comments

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

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: {