Improvements from review feedback

Signed-off-by: Andre Wanlin <awanlin@rapidrtc.com>

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 };
   }
 

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

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>

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,

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',
 });