feat: custom load tech radar

packages/app/src/apis.ts

@@ -8,6 +8,8 @@ import {
   configApiRef,
   createApiFactory,
 } from '@backstage/core-plugin-api';
+import { RemoteJSONTechRadarClient } from './lib/TechRadarClient.ts';
+import { techRadarApiRef } from '@backstage/plugin-tech-radar';
 
 export const apis: AnyApiFactory[] = [
   createApiFactory({
@@ -16,4 +18,5 @@ export const apis: AnyApiFactory[] = [
     factory: ({ configApi }) => ScmIntegrationsApi.fromConfig(configApi),
   }),
   ScmAuth.createDefaultApiFactory(),
+  createApiFactory(techRadarApiRef, new RemoteJSONTechRadarClient()),
 ];

packages/app/src/lib/TechRadarClient.ts

@@ -0,0 +1,26 @@
+import {
+  TechRadarApi,
+  TechRadarLoaderResponse,
+} from '@backstage/plugin-tech-radar';
+
+export class RemoteJSONTechRadarClient implements TechRadarApi {
+  async load(id: string | undefined): Promise<TechRadarLoaderResponse> {
+    // if needed id prop can be used to fetch the correct data
+    // This file lives in the same repo at the top level.  It will be loaded when Backstage starts
+    // It's possible that the running version will be on a different version of main than the catalog
+    // file it is running
+    const data = await fetch('https://raw.githubusercontent.com/openedx/openedx-backstage/main/tech-radar.json').then(res => res.json());
+
+    // For example, this converts the timeline dates into date objects
+    return {
+      ...data,
+      entries: data.entries.map(entry => ({
+        ...entry,
+        timeline: entry.timeline.map(timeline => ({
+          ...timeline,
+          date: new Date(timeline.date),
+        })),
+      })),
+    };
+  }
+}

tech-radar.json

@@ -46,7 +46,21 @@
       "description": "Promise-based HTTP client to make asynchronous HTTP requests to REST endpoints to perform CRUD operations.  This library is used as the basis for the 'auth' module in Blip: frontend-platform and handles all our API communication between micro-frontends and our backend services.  We use its concept of \"interceptors\" to add request and response handling.  Axios is an integral part of our micro-frontend platform today, and we plan to continue to use it.",
       "id": "axios",
       "key": "axios",
-      "title": "axios"
+      "title": "axios",
+      "timeline": [
+                {
+                    "moved": 0,
+                    "ringId": "trial",
+                    "date": "2022-02-06",
+                    "description": "Long description for trial"
+                },
+                {
+                    "moved": 1,
+                    "ringId": "adopt",
+                    "date": "2022-02-08",
+                    "description": "Long description for adopt"
+                }
+            ]
     },
     {
       "quadrant": "1",