From 947acdf8b3346eaa9e99a35c5383e46e004174dd Mon Sep 17 00:00:00 2001
From: Marley Powell <Marley.Powell@exclaimer.com>
Date: Tue, 30 Nov 2021 08:58:32 +0000
Subject: [PATCH] feat: Added polling for pull requests and other small
 improvements.

Signed-off-by: Marley Powell <Marley.Powell@exclaimer.com>
---
 .../PullRequestsPage/PullRequestsPage.tsx     | 57 ++++++++++++++-----
 .../lib/PullRequestCard/PullRequestCard.tsx   |  2 +-
 .../PullRequestCard/PullRequestCardPolicy.tsx |  1 +
 .../src/hooks/useDashboardPullRequests.ts     | 42 ++++++++++++--
 4 files changed, 81 insertions(+), 21 deletions(-)

diff --git a/plugins/azure-devops/src/components/PullRequestsPage/PullRequestsPage.tsx b/plugins/azure-devops/src/components/PullRequestsPage/PullRequestsPage.tsx
index c3f0536749..9f21c4b81b 100644
--- a/plugins/azure-devops/src/components/PullRequestsPage/PullRequestsPage.tsx
+++ b/plugins/azure-devops/src/components/PullRequestsPage/PullRequestsPage.tsx
@@ -18,6 +18,7 @@ import {
   Content,
   Header,
   Page,
+  Progress,
   ResponseErrorPanel,
 } from '@backstage/core-components';
 import { PullRequestGroup, PullRequestGroupConfig } from './lib/types';
@@ -28,11 +29,6 @@ import { useDashboardPullRequests, useUserEmail } from '../../hooks';
 import { DashboardPullRequest } from '@backstage/plugin-azure-devops-common';
 import { PullRequestGrid } from './lib/PullRequestGrid';
 
-/**
- * @deprecated TEMPORARY - This will be configurable in a follow up PR.
- */
-const PROJECT_NAME = 'projectName';
-
 function usePullRequestGroupConfigs(
   userEmail: string | undefined,
 ): PullRequestGroupConfig[] {
@@ -73,8 +69,41 @@ function usePullRequestGroups(
   return pullRequestGroups;
 }
 
-export const PullRequestsPage = () => {
-  const { pullRequests, error } = useDashboardPullRequests(PROJECT_NAME);
+type PullRequestsPageContentProps = {
+  pullRequestGroups: PullRequestGroup[];
+  loading: boolean;
+  error?: Error;
+};
+
+const PullRequestsPageContent = ({
+  pullRequestGroups,
+  loading,
+  error,
+}: PullRequestsPageContentProps) => {
+  if (loading && pullRequestGroups.length <= 0) {
+    return <Progress />;
+  }
+
+  if (error) {
+    return <ResponseErrorPanel error={error} />;
+  }
+
+  return <PullRequestGrid pullRequestGroups={pullRequestGroups} />;
+};
+
+type PullRequestsPageProps = {
+  projectName?: string;
+  pollingInterval?: number;
+};
+
+export const PullRequestsPage = ({
+  projectName,
+  pollingInterval,
+}: PullRequestsPageProps) => {
+  const { pullRequests, loading, error } = useDashboardPullRequests(
+    projectName,
+    pollingInterval,
+  );
   const userEmail = useUserEmail();
   const pullRequestGroupConfigs = usePullRequestGroupConfigs(userEmail);
   const pullRequestGroups = usePullRequestGroups(
@@ -82,16 +111,16 @@ export const PullRequestsPage = () => {
     pullRequestGroupConfigs,
   );
 
-  const pullRequestsContent = error ? (
-    <ResponseErrorPanel error={error} />
-  ) : (
-    <PullRequestGrid pullRequestGroups={pullRequestGroups} />
-  );
-
   return (
     <Page themeId="tool">
       <Header title="Azure Pull Requests" />
-      <Content>{pullRequestsContent}</Content>
+      <Content>
+        <PullRequestsPageContent
+          pullRequestGroups={pullRequestGroups}
+          loading={loading}
+          error={error}
+        />
+      </Content>
     </Page>
   );
 };
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
index b8b052425c..4b2823814e 100644
--- a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
@@ -79,7 +79,7 @@ export const PullRequestCard = ({
 
   const subheader = (
     <span>
-      {repoLink}·{creationDate}
+      {repoLink} · {creationDate}
     </span>
   );
 
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx
index 42343a8b27..580f8c571f 100644
--- a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx
@@ -67,6 +67,7 @@ function getPolicyIcon(policy: Policy): JSX.Element | null {
           return null;
       }
     case PolicyType.MinimumReviewers:
+    case PolicyType.RequiredReviewers:
       return <PolicyRequiredIcon />;
     case PolicyType.Status:
     case PolicyType.Comments:
diff --git a/plugins/azure-devops/src/hooks/useDashboardPullRequests.ts b/plugins/azure-devops/src/hooks/useDashboardPullRequests.ts
index 977f3d4c0c..1b2333ba1c 100644
--- a/plugins/azure-devops/src/hooks/useDashboardPullRequests.ts
+++ b/plugins/azure-devops/src/hooks/useDashboardPullRequests.ts
@@ -14,25 +14,55 @@
  * limitations under the License.
  */
 
+import { errorApiRef, useApi } from '@backstage/core-plugin-api';
+import { useAsyncRetry, useInterval } from 'react-use';
+
 import { DashboardPullRequest } from '@backstage/plugin-azure-devops-common';
 import { azureDevOpsApiRef } from '../api';
-import { useApi } from '@backstage/core-plugin-api';
-import { useAsync } from 'react-use';
+import { useCallback } from 'react';
 
-export function useDashboardPullRequests(project: string): {
+const POLLING_INTERVAL = 10000;
+
+export function useDashboardPullRequests(
+  project?: string,
+  pollingInterval: number = POLLING_INTERVAL,
+): {
   pullRequests?: DashboardPullRequest[];
   loading: boolean;
   error?: Error;
 } {
   const api = useApi(azureDevOpsApiRef);
+  const errorApi = useApi(errorApiRef);
+
+  const getDashboardPullRequests = useCallback(async (): Promise<
+    DashboardPullRequest[]
+  > => {
+    if (!project) {
+      return Promise.reject(new Error('Missing project name'));
+    }
+
+    try {
+      return await api.getDashboardPullRequests(project);
+    } catch (error) {
+      if (error instanceof Error) {
+        errorApi.post(error);
+      }
+
+      return Promise.reject(error);
+    }
+  }, [project, api, errorApi]);
 
   const {
     value: pullRequests,
     loading,
     error,
-  } = useAsync(() => {
-    return api.getDashboardPullRequests(project);
-  }, [api, project]);
+    retry,
+  } = useAsyncRetry(
+    () => getDashboardPullRequests(),
+    [getDashboardPullRequests],
+  );
+
+  useInterval(() => retry(), pollingInterval);
 
   return {
     pullRequests,