Another set of feedback improvements

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

plugins/azure-devops/README.md

@@ -17,7 +17,8 @@ azureDevOps:
   host: dev.azure.com
   token: ${AZURE_TOKEN}
   organization: my-company
-  top: 50
+  azurePipelines:
+    top: 50
 ```
 
 Configuration Details:
@@ -25,7 +26,7 @@ Configuration Details:
 - `host` and `token` can be the same as the ones used for the `integration` section
 - `AZURE_TOKEN` environment variable must be set to a [Personal Access Token](https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&tabs=preview-page) with read access to both Code and Build
 - `organization` is your Azure DevOps Organization name or for Azure DevOps Server (on-premise) this will be your Collection name
-- `top` is strictly used by the frontend to limit the number of items returned, currently only used for Builds
+- `top` is strictly used by the frontend to limit the number of items returned, if not provided it defaults to 10. Currently only used for Builds
 
 ### Backend
 
@@ -39,7 +40,7 @@ Here's how to get the backend up and running:
    yarn add @backstage/plugin-azure-devops-backend
    ```
 
-2. Then we will create a new file named `packages/backend/src/plugins/azuredevops.ts`, and add the
+2. Then we will create a new file named `packages/backend/src/plugins/azure-devops.ts`, and add the
    following to it:
 
    ```ts
@@ -83,23 +84,23 @@ To get the frontend working you'll need to do the following two steps:
 
 2. Second we need to add the `EntityAzurePipelinesContent` extension to the entity page in your app:
 
-```tsx
-// In packages/app/src/components/catalog/EntityPage.tsx
-import {
-  EntityAzurePipelinesContent,
-  isAzureDevOpsAvailable,
-} from '@backstage/plugin-azure-devops';
+   ```tsx
+   // In packages/app/src/components/catalog/EntityPage.tsx
+   import {
+     EntityAzurePipelinesContent,
+     isAzureDevOpsAvailable,
+   } from '@backstage/plugin-azure-devops';
 
-// For example in the CI/CD section
-const cicdContent = (
-  <EntitySwitch>
-    // ...
-    <EntitySwitch.Case if={isAzureDevOpsAvailable}>
-      <EntityAzurePipelinesContent />
-    </EntitySwitch.Case>
-    // ...
-  </EntitySwitch>
-```
+   // For example in the CI/CD section
+   const cicdContent = (
+     <EntitySwitch>
+       // ...
+       <EntitySwitch.Case if={isAzureDevOpsAvailable}>
+         <EntityAzurePipelinesContent />
+       </EntitySwitch.Case>
+       // ...
+     </EntitySwitch>
+   ```
 
 ### Entity Annotation
 

plugins/azure-devops/config.d.ts

@@ -17,10 +17,12 @@
 export interface Config {
   /** Configuration options for the azure-devops-backend plugin */
   azureDevOps: {
-    /**
-     * The max number of items to return - applies to builds
-     * @visibility frontend
-     */
-    top: number;
+    azurePipelines: {
+      /**
+       * The max number of items to return - applies to builds
+       * @visibility frontend
+       */
+      top: number;
+    };
   };
 }

plugins/azure-devops/src/components/BuildTable/BuildTable.tsx

@@ -56,11 +56,12 @@ const columns: TableColumn[] = [
     title: 'ID',
     field: 'id',
     highlight: false,
-    width: '100px',
+    width: 'auto',
   },
   {
     title: 'Build',
     field: 'title',
+    width: 'auto',
     render: (row: Partial<RepoBuild>) => (
       <Link href={row.link} target="_blank">
         {row.title}
@@ -70,10 +71,12 @@ const columns: TableColumn[] = [
   {
     title: 'Source',
     field: 'source',
+    width: 'auto',
   },
   {
     title: 'Status',
     field: 'status',
+    width: 'auto',
     render: (row: Partial<RepoBuild>) => (
       <Box display="flex" alignItems="center">
         <Box mr={1} />
@@ -86,6 +89,7 @@ const columns: TableColumn[] = [
   {
     title: 'Result',
     field: 'result',
+    width: 'auto',
     render: (row: Partial<RepoBuild>) => (
       <Box display="flex" alignItems="center">
         {getBuildResultComponent(row.result)}
@@ -97,8 +101,9 @@ const columns: TableColumn[] = [
     ),
   },
   {
-    title: 'Date',
+    title: 'Age',
     field: 'queueTime',
+    width: 'auto',
     render: (row: Partial<RepoBuild>) =>
       DateTime.fromISO(
         row.queueTime ? row.queueTime.toString() : new Date().toString(),

plugins/azure-devops/src/hooks/useProjectRepoFromEntity.ts

@@ -24,5 +24,24 @@ export function useProjectRepoFromEntity(entity: Entity): {
   const [project, repo] = (
     entity.metadata.annotations?.[AZURE_DEVOPS_ANNOTATION] ?? ''
   ).split('/');
+
+  if (!project && !repo) {
+    throw new Error(
+      'Value for annotation dev.azure.com/project-repo was not in the correct format: <project-name>/<repo-name>',
+    );
+  }
+
+  if (!project) {
+    throw new Error(
+      'Project Name for annotation dev.azure.com/project-repo was not found; expected format is: <project-name>/<repo-name>',
+    );
+  }
+
+  if (!repo) {
+    throw new Error(
+      'Repo Name for annotation dev.azure.com/project-repo was not found; expected format is: <project-name>/<repo-name>',
+    );
+  }
+
   return { project, repo };
 }

plugins/azure-devops/src/hooks/useRepoBuilds.ts

@@ -29,7 +29,8 @@ export function useRepoBuilds(entity: Entity): {
 } {
   const config = useApi(configApiRef);
   const top =
-    config.getOptionalNumber('azureDevOps.top') ?? AZURE_DEVOPS_DEFAULT_TOP;
+    config.getOptionalNumber('azureDevOps.azurePipelines.top') ??
+    AZURE_DEVOPS_DEFAULT_TOP;
   const api = useApi(azureDevOpsApiRef);
   const { project, repo } = useProjectRepoFromEntity(entity);
   const { value, loading, error } = useAsync(() => {