From bafa085a2aa9ad4905c27a47451f74a89f47e1f3 Mon Sep 17 00:00:00 2001
From: Andre Wanlin <awanlin@rapidrtc.com>
Date: Wed, 17 Nov 2021 07:37:36 -0600
Subject: [PATCH] Improvements from review feedback

Signed-off-by: Andre Wanlin <awanlin@rapidrtc.com>
---
 .../azure-devops/src/api/AzureDevOpsClient.ts | 27 ++++++++++++----
 .../PullRequestStatusButtonGroup.tsx          | 32 ++++++-------------
 .../PullRequestTable/PullRequestTable.tsx     |  4 +--
 .../azure-devops/src/hooks/usePullRequests.ts |  6 ++--
 plugins/azure-devops/src/routes.ts            |  4 +--
 5 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/plugins/azure-devops/src/api/AzureDevOpsClient.ts b/plugins/azure-devops/src/api/AzureDevOpsClient.ts
index ec727f4973..cbcc496725 100644
--- a/plugins/azure-devops/src/api/AzureDevOpsClient.ts
+++ b/plugins/azure-devops/src/api/AzureDevOpsClient.ts
@@ -42,9 +42,15 @@ export class AzureDevOpsClient implements AzureDevOpsApi {
     repoName: string,
     options?: RepoBuildOptions,
   ): Promise<{ items: RepoBuild[] }> {
-    const items = await this.get<RepoBuild[]>(
-      `repo-builds/${projectName}/${repoName}?top=${options?.top}`,
-    );
+    const queryString = new URLSearchParams();
+    if (options?.top) {
+      queryString.append('top', options.top.toString());
+    }
+    const urlSegment = `repo-builds/${encodeURIComponent(
+      projectName,
+    )}/${encodeURIComponent(repoName)}?${queryString}`;
+
+    const items = await this.get<RepoBuild[]>(urlSegment);
     return { items };
   }
 
@@ -53,9 +59,18 @@ export class AzureDevOpsClient implements AzureDevOpsApi {
     repoName: string,
     options?: PullRequestOptions,
   ): Promise<{ items: PullRequest[] }> {
-    const items = await this.get<PullRequest[]>(
-      `pull-requests/${projectName}/${repoName}?top=${options?.top}&status=${options?.status}`,
-    );
+    const queryString = new URLSearchParams();
+    if (options?.top) {
+      queryString.append('top', options.top.toString());
+    }
+    if (options?.status) {
+      queryString.append('status', options.status.toString());
+    }
+    const urlSegment = `pull-requests/${encodeURIComponent(
+      projectName,
+    )}/${encodeURIComponent(repoName)}?${queryString}`;
+
+    const items = await this.get<PullRequest[]>(urlSegment);
     return { items };
   }
 
diff --git a/plugins/azure-devops/src/components/PullRequestStatusButtonGroup/PullRequestStatusButtonGroup.tsx b/plugins/azure-devops/src/components/PullRequestStatusButtonGroup/PullRequestStatusButtonGroup.tsx
index 23a8738adc..f516bfb0e5 100644
--- a/plugins/azure-devops/src/components/PullRequestStatusButtonGroup/PullRequestStatusButtonGroup.tsx
+++ b/plugins/azure-devops/src/components/PullRequestStatusButtonGroup/PullRequestStatusButtonGroup.tsx
@@ -20,46 +20,34 @@ import { PullRequestStatus } from '@backstage/plugin-azure-devops-common';
 import React from 'react';
 
 export const PullRequestStatusButtonGroup = ({
-  pullRequestStatusState,
-  setPullRequestsStatusState,
+  status,
+  setStatus,
 }: {
-  pullRequestStatusState: PullRequestStatus;
-  setPullRequestsStatusState: (pullRequestStatus: PullRequestStatus) => void;
+  status: PullRequestStatus;
+  setStatus: (pullRequestStatus: PullRequestStatus) => void;
 }) => {
   return (
     <ButtonGroup aria-label="outlined button group">
       <Button
-        color={
-          pullRequestStatusState === PullRequestStatus.Active
-            ? 'primary'
-            : 'default'
-        }
+        color={status === PullRequestStatus.Active ? 'primary' : 'default'}
         onClick={() => {
-          setPullRequestsStatusState(PullRequestStatus.Active);
+          setStatus(PullRequestStatus.Active);
         }}
       >
         Active
       </Button>
       <Button
-        color={
-          pullRequestStatusState === PullRequestStatus.Completed
-            ? 'primary'
-            : 'default'
-        }
+        color={status === PullRequestStatus.Completed ? 'primary' : 'default'}
         onClick={() => {
-          setPullRequestsStatusState(PullRequestStatus.Completed);
+          setStatus(PullRequestStatus.Completed);
         }}
       >
         Completed
       </Button>
       <Button
-        color={
-          pullRequestStatusState === PullRequestStatus.Abandoned
-            ? 'primary'
-            : 'default'
-        }
+        color={status === PullRequestStatus.Abandoned ? 'primary' : 'default'}
         onClick={() => {
-          setPullRequestsStatusState(PullRequestStatus.Abandoned);
+          setStatus(PullRequestStatus.Abandoned);
         }}
       >
         Abandoned
diff --git a/plugins/azure-devops/src/components/PullRequestTable/PullRequestTable.tsx b/plugins/azure-devops/src/components/PullRequestTable/PullRequestTable.tsx
index 90e5f55b04..4365b796bc 100644
--- a/plugins/azure-devops/src/components/PullRequestTable/PullRequestTable.tsx
+++ b/plugins/azure-devops/src/components/PullRequestTable/PullRequestTable.tsx
@@ -127,8 +127,8 @@ export const PullRequestTable = ({ defaultLimit }: PullRequestTableProps) => {
           Azure Repos - Pull Requests ({items ? items.length : 0})
           <Box position="absolute" right={320} top={20}>
             <PullRequestStatusButtonGroup
-              pullRequestStatusState={pullRequestStatusState}
-              setPullRequestsStatusState={setPullRequestStatusState}
+              status={pullRequestStatusState}
+              setStatus={setPullRequestStatusState}
             />
           </Box>
         </Box>
diff --git a/plugins/azure-devops/src/hooks/usePullRequests.ts b/plugins/azure-devops/src/hooks/usePullRequests.ts
index 687478453e..178bf0495f 100644
--- a/plugins/azure-devops/src/hooks/usePullRequests.ts
+++ b/plugins/azure-devops/src/hooks/usePullRequests.ts
@@ -39,8 +39,8 @@ export function usePullRequests(
   const top = defaultLimit ?? AZURE_DEVOPS_DEFAULT_TOP;
   const status = requestedStatus ?? PullRequestStatus.Active;
   const options: PullRequestOptions = {
-    top: top,
-    status: status,
+    top,
+    status,
   };
 
   const api = useApi(azureDevOpsApiRef);
@@ -48,7 +48,7 @@ export function usePullRequests(
 
   const { value, loading, error } = useAsync(() => {
     return api.getPullRequests(project, repo, options);
-  }, [api, project, repo, entity, requestedStatus]);
+  }, [api, project, repo, top, status]);
 
   return {
     items: value?.items,
diff --git a/plugins/azure-devops/src/routes.ts b/plugins/azure-devops/src/routes.ts
index 7aaca416fa..7a4adea33e 100644
--- a/plugins/azure-devops/src/routes.ts
+++ b/plugins/azure-devops/src/routes.ts
@@ -17,9 +17,9 @@
 import { createRouteRef } from '@backstage/core-plugin-api';
 
 export const azurePipelinesEntityContentRouteRef = createRouteRef({
-  title: 'Azure Pipelines Entity Content',
+  id: 'azure-pipelines-entity-content',
 });
 
 export const azurePullRequestsEntityContentRouteRef = createRouteRef({
-  title: 'Azure Pull Requests Entity Content',
+  id: 'azure-pull-requests-entity-content',
 });