useEntity and more tests

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

plugins/github-deployments/README.md

@@ -1,12 +1,12 @@
-# Github Deployments Plugin
+# GitHub Deployments Plugin
 
-The Github Deployments Plugin displays recent deployments from Github.
+The GitHub Deployments Plugin displays recent deployments from GitHub.
 
 ![github-deployments-card](./docs/github-deployments-card.png)
 
 ## Getting Started
 
-1. Install the Github Deployments Plugin
+1. Install the GitHub Deployments Plugin
 
 ```bash
 # packages/app
@@ -14,7 +14,7 @@ The Github Deployments Plugin displays recent deployments from Github.
 yarn add @backstage/plugin-github-deployments
 ```
 
-2. Add proxy and auth token for Github
+2. Add proxy and auth token for GitHub
 
 ```yaml
 # app-config.yaml
@@ -57,7 +57,7 @@ const OverviewContent = ({ entity }: { entity: Entity }) => (
 );
 ```
 
-5. Add the github.com/project-slug annotation to your catalog-info.yaml file:
+5. Add the `github.com/project-slug` annotation to your `catalog-info.yaml` file:
 
 ```yaml
 apiVersion: backstage.io/v1alpha1

plugins/github-deployments/package.json

@@ -22,13 +22,13 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.4",
     "@backstage/core": "^0.7.2",
+    "@backstage/plugin-catalog-react": "^0.1.3",
     "@backstage/theme": "^0.2.4",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
     "@octokit/graphql": "^4.6.1",
     "moment": "^2.29.1",
-    "nock": "^13.0.11",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-use": "^15.3.3"

plugins/github-deployments/src/api/index.ts

@@ -36,7 +36,7 @@ export interface GithubDeploymentsApi {
 
 export const githubDeploymentsApiRef = createApiRef<GithubDeploymentsApi>({
   id: 'plugin.github-deployments.service',
-  description: 'Used by the Github Deployments plugin to make requests',
+  description: 'Used by the GitHub Deployments plugin to make requests',
 });
 
 export type Options = {

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

@@ -30,7 +30,14 @@ import { GithubDeploymentsApiClient, githubDeploymentsApiRef } from '../api';
 import { githubDeploymentsPlugin } from '../plugin';
 import { GithubDeploymentsCard } from './GithubDeploymentsCard';
 
-import { entityStub, responseStub } from '../mocks/mocks';
+import { entityStub, noDataResponseStub, responseStub } from '../mocks/mocks';
+import { wrapInTestApp } from '@backstage/test-utils';
+
+jest.mock('@backstage/plugin-catalog-react', () => ({
+  useEntity: () => {
+    return entityStub;
+  },
+}));
 
 const discoveryApi = UrlPatternDiscovery.compile('http://exampleapi.com');
 const errorApiMock = { post: jest.fn(), error$: jest.fn() };
@@ -62,9 +69,11 @@ describe('github-deployments', () => {
       worker.use(rest.post('*', (_, res, ctx) => res(ctx.json(responseStub))));
 
       const rendered = render(
-        <ApiProvider apis={apis}>
-          <GithubDeploymentsCard entity={entityStub} />
-        </ApiProvider>,
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <GithubDeploymentsCard />
+          </ApiProvider>,
+        ),
       );
 
       expect(await rendered.findByText('active')).toBeInTheDocument();
@@ -81,5 +90,23 @@ describe('github-deployments', () => {
         'https://exampleapi.com/543212345',
       );
     });
+
+    it('should display empty state when no data', async () => {
+      worker.use(
+        rest.post('*', (_, res, ctx) => res(ctx.json(noDataResponseStub))),
+      );
+
+      const rendered = render(
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <GithubDeploymentsCard />
+          </ApiProvider>,
+        ),
+      );
+
+      expect(
+        await rendered.findByText('No GitHub deployments available.'),
+      ).toBeInTheDocument();
+    });
   });
 });

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

@@ -16,10 +16,16 @@
 import React from 'react';
 import { LinearProgress } from '@material-ui/core';
 import { Entity } from '@backstage/catalog-model';
-import { InfoCard, MissingAnnotationEmptyState, useApi } from '@backstage/core';
+import {
+  EmptyState,
+  InfoCard,
+  MissingAnnotationEmptyState,
+  useApi,
+} from '@backstage/core';
 import { useAsync } from 'react-use';
 import { githubDeploymentsApiRef } from '../api';
 import GithubDeploymentsTable from './GithubDeploymentsTable/GithubDeploymentsTable';
+import { useEntity } from '@backstage/plugin-catalog-react';
 
 export const GITHUB_PROJECT_SLUG_ANNOTATION = 'github.com/project-slug';
 
@@ -27,16 +33,14 @@ export const isGithubDeploymentsAvailable = (entity: Entity) =>
   Boolean(entity?.metadata.annotations?.[GITHUB_PROJECT_SLUG_ANNOTATION]);
 
 const GithubDeploymentsComponent = ({
-  entity,
+  projectSlug,
   last,
 }: {
-  entity: Entity;
+  projectSlug: string;
   last: number;
 }) => {
   const api = useApi(githubDeploymentsApiRef);
-  const annotation =
-    entity.metadata.annotations?.[GITHUB_PROJECT_SLUG_ANNOTATION] ?? '';
-  const [owner, repo] = annotation.split('/');
+  const [owner, repo] = projectSlug.split('/');
 
   const { loading, value, error } = useAsync(
     async () => await api.listDeployments({ owner, repo, last }),
@@ -44,32 +48,38 @@ const GithubDeploymentsComponent = ({
 
   if (loading) {
     return (
-      <InfoCard title="Github Deployments">
+      <InfoCard title="GitHub Deployments">
         <LinearProgress />
       </InfoCard>
     );
   }
   if (error) {
     return (
-      <InfoCard title="Github Deployments">
-        Error occurred while fetching data.
+      <InfoCard title="GitHub Deployments">
+        Error occured while fetching Data
       </InfoCard>
     );
   }
+  if (!value || value.length === 0) {
+    return (
+      <EmptyState title="No GitHub deployments available." missing="info" />
+    );
+  }
 
   return <GithubDeploymentsTable deployments={value || []} />;
 };
 
-export const GithubDeploymentsCard = ({
-  entity,
-  last,
-}: {
-  entity: Entity;
-  last?: number;
-}) => {
+export const GithubDeploymentsCard = ({ last }: { last?: number }) => {
+  const { entity } = useEntity();
+
   return !isGithubDeploymentsAvailable(entity) ? (
     <MissingAnnotationEmptyState annotation={GITHUB_PROJECT_SLUG_ANNOTATION} />
   ) : (
-    <GithubDeploymentsComponent entity={entity} last={last || 10} />
+    <GithubDeploymentsComponent
+      projectSlug={
+        entity?.metadata.annotations?.[GITHUB_PROJECT_SLUG_ANNOTATION] || ''
+      }
+      last={last || 10}
+    />
   );
 };

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

@@ -53,7 +53,6 @@ const columns: TableColumn[] = [
   },
   {
     title: 'Status',
-    field: 'environment',
     render: (row: any): React.ReactNode => <State value={row.state} />,
   },
   {
@@ -81,7 +80,7 @@ const GithubDeploymentsTable = ({
     <Table
       columns={columns}
       options={{ padding: 'dense', paging: true, search: false, pageSize: 5 }}
-      title="Github Deployments"
+      title="GitHub Deployments"
       data={deployments}
     />
   );

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

@@ -14,23 +14,25 @@
  * limitations under the License.
  */
 export const entityStub = {
-  metadata: {
-    namespace: 'default',
-    annotations: {
-      'github.com/project-slug': 'org/repo',
+  entity: {
+    metadata: {
+      namespace: 'default',
+      annotations: {
+        'github.com/project-slug': 'org/repo',
+      },
+      name: 'sample-service',
+      description: 'Sample service',
+      uid: 'g0h33dd9-56h7-835b-b63v-7x5da3j64851',
+      generation: 1,
     },
-    name: 'sample-service',
-    description: 'Sample service',
-    uid: 'g0h33dd9-56h7-835b-b63v-7x5da3j64851',
-    generation: 1,
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    spec: {
+      type: 'service',
+      lifecycle: 'experimental',
+    },
+    relations: [],
   },
-  apiVersion: 'backstage.io/v1alpha1',
-  kind: 'Component',
-  spec: {
-    type: 'service',
-    lifecycle: 'experimental',
-  },
-  relations: [],
 };
 
 export const responseStub = {