From 313071b974ca70056e149684a6e531cbbd8394b3 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Thu, 3 Jun 2021 10:54:06 +0200
Subject: [PATCH] chore: adding documentation for loading data

Signed-off-by: blam <ben@blam.sh>
---
 packages/app/src/apis.ts         |  9 ++++++
 plugins/tech-radar/README.md     | 53 ++++++++++++++++----------------
 plugins/tech-radar/src/sample.ts |  4 +--
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/packages/app/src/apis.ts b/packages/app/src/apis.ts
index ccc576e727..1b303a8aa3 100644
--- a/packages/app/src/apis.ts
+++ b/packages/app/src/apis.ts
@@ -34,6 +34,13 @@ import {
   GraphQLEndpoints,
 } from '@backstage/plugin-graphiql';
 
+import { techRadarApiRef, TechRadarApi } from '@backstage/plugin-tech-radar';
+
+class MyOwnClient implements TechRadarApi {
+  async load() {
+    throw new Error('blah');
+  }
+}
 export const apis: AnyApiFactory[] = [
   createApiFactory({
     api: scmIntegrationsApiRef,
@@ -61,4 +68,6 @@ export const apis: AnyApiFactory[] = [
   }),
 
   createApiFactory(costInsightsApiRef, new ExampleCostInsightsClient()),
+
+  createApiFactory(),
 ];
diff --git a/plugins/tech-radar/README.md b/plugins/tech-radar/README.md
index 149ab54840..2781acabd9 100644
--- a/plugins/tech-radar/README.md
+++ b/plugins/tech-radar/README.md
@@ -72,36 +72,35 @@ export interface TechRadarPageProps {
 
 ### How do I load in my own data?
 
-It's simple, you can pass through a `getData` prop which expects a `Promise<TechRadarLoaderResponse>` signature.
+The `TechRadar` plugin uses the `TechRadarApiRef` to get a client which implements the `TechRadarApi` interface. The default sample one is located here: https://github.com/backstage/backstage/blob/master/plugins/tech-radar/src/sample.ts. To load your own data, you'll need to provide a class that implements the `TechRadarApi` and override the `TechRadarApiRef` in the `app/src/apis.ts`.
 
-Here's an example:
+```ts
+// app/src/lib/MyClient.ts
+import {
+  TechRadarApi,
+  TechRadarLoaderResponse,
+} from '@backstage/plugin-tech-radar';
 
-```tsx
-const getHardCodedData = () =>
-  Promise.resolve({
-    quadrants: [{ id: 'infrastructure', name: 'Infrastructure' }],
-    rings: [{ id: 'use', name: 'USE', color: '#93c47d' }],
-    entries: [
-      {
-        url: '#',
-        key: 'github-actions',
-        id: 'github-actions',
-        title: 'GitHub Actions',
-        quadrant: 'infrastructure',
-        timeline: [
-          {
-            moved: 0,
-            ringId: 'use',
-            date: new Date('2020-08-06'),
-            description:
-              'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat',
-          },
-        ],
-      },
-    ],
-  });
+class MyOwnClient implements TechRadarApi {
+  async load(): Promise<TechRadarLoaderResponse> {
+    const data = await fetch('https://mydata.json').then(res => res.json());
 
-<TechRadarComponent width={1400} height={800} getData={getHardCodedData} />;
+    // maybe you'll need to do some data transformation here to make it look like TechRadarLoaderResponse
+
+    return data;
+  }
+}
+
+// app/src/apis.ts
+import { MyOwnClient } from './lib/MyClient';
+import { techRadarApiRef } from '@backstage/plugin-tech-radar';
+
+export const apis: AnyApiFactory[] = [
+  /*
+  ...
+  */
+  createApiFactory(techRadarApiRef, new MyOwnClient()),
+];
 ```
 
 ### How do I write tests?
diff --git a/plugins/tech-radar/src/sample.ts b/plugins/tech-radar/src/sample.ts
index ff895bcdb7..1e924d85d0 100644
--- a/plugins/tech-radar/src/sample.ts
+++ b/plugins/tech-radar/src/sample.ts
@@ -165,8 +165,8 @@ entries.push({
   ],
   url: '#',
   key: 'github-actions',
-  id: 'github-actiosns',
-  title: 'GitHub Acssstions',
+  id: 'github-actions',
+  title: 'GitHub Actions',
   quadrant: 'infrastructure',
 });