Merge pull request #5193 from anderoo/anderoo/refresh-deployments

add refresh to deployments plugin

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

@@ -24,12 +24,18 @@ import {
   OAuthApi,
 } from '@backstage/core';
 
+import { fireEvent } from '@testing-library/react';
 import { msw, renderInTestApp } 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 {
+  entityStub,
+  noDataResponseStub,
+  refreshedResponseStub,
+  responseStub,
+} from '../mocks/mocks';
 
 import { setupServer } from 'msw/node';
 import { graphql } from 'msw';
@@ -81,6 +87,9 @@ describe('github-deployments', () => {
         </ApiProvider>,
       );
 
+      expect(
+        await rendered.findByText('GitHub Deployments'),
+      ).toBeInTheDocument();
       expect(await rendered.findByText('active')).toBeInTheDocument();
       expect(await rendered.findByText('prd')).toBeInTheDocument();
       expect(await rendered.findByText('12345')).toHaveAttribute(
@@ -109,9 +118,46 @@ describe('github-deployments', () => {
         </ApiProvider>,
       );
 
+      expect(
+        await rendered.findByText('GitHub Deployments'),
+      ).toBeInTheDocument();
       expect(
         await rendered.findByText('No deployments found for this entity.'),
       ).toBeInTheDocument();
     });
+
+    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 />
+        </ApiProvider>,
+      );
+
+      expect(
+        await rendered.findByText('GitHub Deployments'),
+      ).toBeInTheDocument();
+      expect(await rendered.findByText('pending')).toBeInTheDocument();
+
+      worker.resetHandlers();
+      worker.use(
+        graphql.query('deployments', (_, res, ctx) =>
+          res(ctx.data(refreshedResponseStub)),
+        ),
+      );
+
+      const refreshButton = await rendered.findByTitle('Reload');
+      fireEvent.click(refreshButton);
+
+      expect(
+        await rendered.findByText('GitHub Deployments'),
+      ).toBeInTheDocument();
+      expect(await rendered.findByText('failure')).toBeInTheDocument();
+    });
   });
 });

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

@@ -15,13 +15,11 @@
  */
 import React from 'react';
 import {
-  InfoCard,
   MissingAnnotationEmptyState,
-  Progress,
   ResponseErrorPanel,
   useApi,
 } from '@backstage/core';
-import { useAsync } from 'react-use';
+import { useAsyncRetry } from 'react-use';
 import { githubDeploymentsApiRef } from '../api';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import {
@@ -40,22 +38,21 @@ const GithubDeploymentsComponent = ({
   const api = useApi(githubDeploymentsApiRef);
   const [owner, repo] = projectSlug.split('/');
 
-  const { loading, value, error } = useAsync(
+  const { loading, value, error, retry: reload } = useAsyncRetry(
     async () => await api.listDeployments({ owner, repo, last }),
   );
 
-  if (loading) {
-    return (
-      <InfoCard title="GitHub Deployments">
-        <Progress />
-      </InfoCard>
-    );
-  }
   if (error) {
     return <ResponseErrorPanel error={error} />;
   }
 
-  return <GithubDeploymentsTable deployments={value || []} />;
+  return (
+    <GithubDeploymentsTable
+      deployments={value || []}
+      isLoading={loading}
+      reload={reload}
+    />
+  );
 };
 
 export const GithubDeploymentsCard = ({ last }: { last?: number }) => {

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

@@ -26,6 +26,7 @@ import {
 import { GithubDeployment } from '../../api';
 import { DateTime } from 'luxon';
 import { Box, Typography, Link, makeStyles } from '@material-ui/core';
+import SyncIcon from '@material-ui/icons/Sync';
 
 const useStyles = makeStyles(theme => ({
   empty: {
@@ -83,10 +84,14 @@ const columns: TableColumn<GithubDeployment>[] = [
 
 type GithubDeploymentsTableProps = {
   deployments: GithubDeployment[];
+  isLoading: boolean;
+  reload: () => void;
 };
 
 const GithubDeploymentsTable = ({
   deployments,
+  isLoading,
+  reload,
 }: GithubDeploymentsTableProps) => {
   const classes = useStyles();
 
@@ -96,6 +101,15 @@ const GithubDeploymentsTable = ({
       options={{ padding: 'dense', paging: true, search: false, pageSize: 5 }}
       title="GitHub Deployments"
       data={deployments}
+      isLoading={isLoading}
+      actions={[
+        {
+          icon: () => <SyncIcon />,
+          tooltip: 'Reload',
+          isFreeAction: true,
+          onClick: () => reload(),
+        },
+      ]}
       emptyContent={
         <div className={classes.empty}>
           <Typography variant="body1">

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

@@ -64,4 +64,31 @@ export const responseStub: QueryResponse = {
   },
 };
 
+export const refreshedResponseStub: QueryResponse = {
+  repository: {
+    deployments: {
+      nodes: [
+        {
+          state: 'active',
+          environment: 'prd',
+          updatedAt: '2021-03-25T12:08:45Z',
+          commit: {
+            commitUrl: 'https://exampleapi.com/123456789',
+            abbreviatedOid: '12345',
+          },
+        },
+        {
+          state: 'failure',
+          environment: 'lab',
+          updatedAt: '2021-03-25T12:09:47Z',
+          commit: {
+            commitUrl: 'https://exampleapi.com/543212345',
+            abbreviatedOid: '54321',
+          },
+        },
+      ],
+    },
+  },
+};
+
 export const noDataResponseStub: QueryResponse = {};