github collaborators field

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

.changeset/dry-elephants-doubt.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-github-deployments': patch
+---
+
+Adds extraColumns field to GitHub Deployments card

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

@@ -24,6 +24,10 @@ export type GithubDeployment = {
     abbreviatedOid: string;
     commitUrl: string;
   };
+  creator: {
+    login: string;
+  };
+  payload: string;
 };
 
 export interface GithubDeploymentsApi {
@@ -55,6 +59,10 @@ query deployments($owner: String!, $repo: String!, $last: Int) {
           abbreviatedOid
           commitUrl
         }
+        creator {
+          login
+        }
+        payload
       }
     }
   }

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

@@ -22,11 +22,16 @@ import {
   ConfigReader,
   ConfigApi,
   OAuthApi,
+  TableColumn,
 } from '@backstage/core';
 
 import { fireEvent } from '@testing-library/react';
 import { msw, renderInTestApp } from '@backstage/test-utils';
-import { GithubDeploymentsApiClient, githubDeploymentsApiRef } from '../api';
+import {
+  GithubDeployment,
+  GithubDeploymentsApiClient,
+  githubDeploymentsApiRef,
+} from '../api';
 import { githubDeploymentsPlugin } from '../plugin';
 import { GithubDeploymentsCard } from './GithubDeploymentsCard';
 
@@ -127,12 +132,6 @@ describe('github-deployments', () => {
     });
 
     it('should shows new data on reload', async () => {
-      worker.use(
-        graphql.query('deployments', (_, res, ctx) =>
-          res(ctx.data(responseStub)),
-        ),
-      );
-
       const rendered = await renderInTestApp(
         <ApiProvider apis={apis}>
           <GithubDeploymentsCard />
@@ -160,4 +159,27 @@ describe('github-deployments', () => {
       expect(await rendered.findByText('failure')).toBeInTheDocument();
     });
   });
+
+  it('should display extra columns', async () => {
+    worker.use(
+      graphql.query('deployments', (_, res, ctx) =>
+        res(ctx.data(responseStub)),
+      ),
+    );
+
+    const extraColumns: TableColumn<GithubDeployment>[] = [
+      {
+        title: 'Creator',
+        field: 'creator.login',
+      },
+    ];
+
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <GithubDeploymentsCard extraColumns={extraColumns} />
+      </ApiProvider>,
+    );
+
+    expect(await rendered.findByText('robot-user-001')).toBeInTheDocument();
+  });
 });

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

@@ -17,10 +17,11 @@ import React from 'react';
 import {
   MissingAnnotationEmptyState,
   ResponseErrorPanel,
+  TableColumn,
   useApi,
 } from '@backstage/core';
 import { useAsyncRetry } from 'react-use';
-import { githubDeploymentsApiRef } from '../api';
+import { GithubDeployment, githubDeploymentsApiRef } from '../api';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import {
   GITHUB_PROJECT_SLUG_ANNOTATION,
@@ -31,9 +32,11 @@ import GithubDeploymentsTable from './GithubDeploymentsTable/GithubDeploymentsTa
 const GithubDeploymentsComponent = ({
   projectSlug,
   last,
+  extraColumns,
 }: {
   projectSlug: string;
   last: number;
+  extraColumns: TableColumn<GithubDeployment>[];
 }) => {
   const api = useApi(githubDeploymentsApiRef);
   const [owner, repo] = projectSlug.split('/');
@@ -51,11 +54,18 @@ const GithubDeploymentsComponent = ({
       deployments={value || []}
       isLoading={loading}
       reload={reload}
+      extraColumns={extraColumns}
     />
   );
 };
 
-export const GithubDeploymentsCard = ({ last }: { last?: number }) => {
+export const GithubDeploymentsCard = ({
+  last,
+  extraColumns,
+}: {
+  last?: number;
+  extraColumns?: TableColumn<GithubDeployment>[];
+}) => {
   const { entity } = useEntity();
 
   return !isGithubDeploymentsAvailable(entity) ? (
@@ -66,6 +76,7 @@ export const GithubDeploymentsCard = ({ last }: { last?: number }) => {
         entity?.metadata.annotations?.[GITHUB_PROJECT_SLUG_ANNOTATION] || ''
       }
       last={last || 10}
+      extraColumns={extraColumns || []}
     />
   );
 };

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

@@ -86,18 +86,20 @@ type GithubDeploymentsTableProps = {
   deployments: GithubDeployment[];
   isLoading: boolean;
   reload: () => void;
+  extraColumns: TableColumn<GithubDeployment>[];
 };
 
 const GithubDeploymentsTable = ({
   deployments,
   isLoading,
   reload,
+  extraColumns,
 }: GithubDeploymentsTableProps) => {
   const classes = useStyles();
 
   return (
     <Table
-      columns={columns}
+      columns={[...columns, ...extraColumns]}
       options={{ padding: 'dense', paging: true, search: false, pageSize: 5 }}
       title="GitHub Deployments"
       data={deployments}

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

@@ -49,6 +49,10 @@ export const responseStub: QueryResponse = {
             commitUrl: 'https://exampleapi.com/123456789',
             abbreviatedOid: '12345',
           },
+          creator: {
+            login: 'robot-user-001',
+          },
+          payload: '',
         },
         {
           state: 'pending',
@@ -58,6 +62,10 @@ export const responseStub: QueryResponse = {
             commitUrl: 'https://exampleapi.com/543212345',
             abbreviatedOid: '54321',
           },
+          creator: {
+            login: 'robot-user-001',
+          },
+          payload: '',
         },
       ],
     },
@@ -76,6 +84,10 @@ export const refreshedResponseStub: QueryResponse = {
             commitUrl: 'https://exampleapi.com/123456789',
             abbreviatedOid: '12345',
           },
+          creator: {
+            login: 'robot-user-001',
+          },
+          payload: '',
         },
         {
           state: 'failure',
@@ -85,6 +97,10 @@ export const refreshedResponseStub: QueryResponse = {
             commitUrl: 'https://exampleapi.com/543212345',
             abbreviatedOid: '54321',
           },
+          creator: {
+            login: 'robot-user-001',
+          },
+          payload: '',
         },
       ],
     },