Further refactoring based on feedback

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

plugins/azure-devops/README.md

@@ -81,12 +81,12 @@ To get the frontend working you'll need to do the following two steps:
    yarn add @backstage/plugin-azure-devops
    ```
 
-2. Second we need to add the `EntityAzureDevOpsContent` extension to the entity page in your app:
+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 {
-  EntityAzureDevOpsContent,
+  EntityAzurePipelinesContent,
   isAzureDevOpsAvailable,
 } from '@backstage/plugin-azure-devops';
 
@@ -95,7 +95,7 @@ const cicdContent = (
   <EntitySwitch>
     // ...
     <EntitySwitch.Case if={isAzureDevOpsAvailable}>
-      <EntityAzureDevOpsContent />
+      <EntityAzurePipelinesContent />
     </EntitySwitch.Case>
     // ...
   </EntitySwitch>

plugins/azure-devops/package.json

@@ -35,7 +35,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
     "azure-devops-node-api": "^11.0.1",
-    "moment": "^2.29.1",
+    "luxon": "^2.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "6.0.0-beta.0",

plugins/azure-devops/src/api/AzureDevOpsClient.ts

@@ -36,15 +36,15 @@ export class AzureDevOpsClient implements AzureDevOpsApi {
     repoName: string,
     top: number,
   ): Promise<RepoBuild[]> {
-    return await this.get(`/repo-builds/${projectName}/${repoName}?top=${top}`);
+    return await this.get(`repo-builds/${projectName}/${repoName}?top=${top}`);
   }
 
   private async get(path: string): Promise<any> {
-    const baseUrl = await this.discoveryApi.getBaseUrl('azure-devops');
-    const url = `${baseUrl}/${path}`;
+    const baseUrl = `${await this.discoveryApi.getBaseUrl('azure-devops')}/`;
+    const url = new URL(path, baseUrl);
 
     const idToken = await this.identityApi.getIdToken();
-    const response = await fetch(url, {
+    const response = await fetch(url.toString(), {
       headers: idToken ? { Authorization: `Bearer ${idToken}` } : {},
     });
 

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

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 import {
   Table,
   TableColumn,
@@ -56,7 +56,7 @@ const columns: TableColumn[] = [
     title: 'ID',
     field: 'id',
     highlight: false,
-    width: '80px',
+    width: '100px',
   },
   {
     title: 'Build',
@@ -99,7 +99,10 @@ const columns: TableColumn[] = [
   {
     title: 'Date',
     field: 'queueTime',
-    render: (row: Partial<RepoBuild>) => moment(row.queueTime).fromNow(),
+    render: (row: Partial<RepoBuild>) =>
+      DateTime.fromISO(
+        row.queueTime ? row.queueTime.toString() : new Date().toString(),
+      ).toRelative(),
   },
 ];
 

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

@@ -25,7 +25,7 @@ type Props = {
   entity?: Entity;
 };
 
-export const EntityPageAzureDevOps = (_props: Props) => {
+export const EntityPageAzurePipelines = (_props: Props) => {
   const { entity } = useEntity();
   const { items, loading, error } = useRepoBuilds(entity);
 

plugins/azure-devops/src/components/EntityPageAzurePipelines/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { EntityPageAzureDevOps } from './EntityPageAzureDevOps';
+export { EntityPageAzurePipelines } from './EntityPageAzurePipelines';

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

@@ -16,7 +16,7 @@
 import React from 'react';
 import { Routes, Route } from 'react-router';
 import { azureDevOpsRouteRef } from '../routes';
-import { EntityPageAzureDevOps } from './EntityPageAzureDevOps';
+import { EntityPageAzurePipelines } from './EntityPageAzurePipelines';
 import { AZURE_DEVOPS_ANNOTATION } from '../constants';
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
@@ -41,7 +41,7 @@ export const Router = (_props: Props) => {
     <Routes>
       <Route
         path={`/${azureDevOpsRouteRef.path}`}
-        element={<EntityPageAzureDevOps />}
+        element={<EntityPageAzurePipelines />}
       />
     </Routes>
   );

plugins/azure-devops/src/plugin.ts

@@ -42,7 +42,7 @@ export const azureDevOpsPlugin = createPlugin({
 
 export const EntityAzurePipelinesContent = azureDevOpsPlugin.provide(
   createRoutableExtension({
-    name: 'EntityAzureDevOpsContent',
+    name: 'EntityAzurePipelinesContent',
     component: () => import('./components/Router').then(m => m.Router),
     mountPoint: azureDevOpsRouteRef,
   }),