feat: reworking the techRadar plugin to support providing your own TechRadarApi to override how the data get's into your plugin

Signed-off-by: blam <ben@blam.sh>

plugins/tech-radar/README.md

@@ -60,7 +60,6 @@ export type TechRadarPageProps = TechRadarComponentProps & {
 export interface TechRadarPageProps {
   width: number;
   height: number;
-  getData?: () => Promise<TechRadarLoaderResponse>;
   svgProps?: object;
 }
 ```

plugins/tech-radar/src/api.ts

@@ -15,6 +15,17 @@
  */
 
 import { MovedState } from './utils/types';
+import { createApiRef } from '@backstage/core';
+
+export const techRadarApiRef = createApiRef<TechRadarApi>({
+  id: 'plugin.techradar.service',
+  description: 'Used to populate data in the TechRadar plugin',
+});
+
+export interface TechRadarApi {
+  // Loads the TechRadar response data to pass through to the TechRadar component
+  load: () => Promise<TechRadarLoaderResponse>;
+}
 
 /**
  * Types related to the Radar's visualization.
@@ -65,16 +76,5 @@ export interface TechRadarLoaderResponse {
 export interface TechRadarComponentProps {
   width: number;
   height: number;
-  getData?: () => Promise<TechRadarLoaderResponse>;
   svgProps?: object;
 }
-
-/**
- * Set up the Radar as a Backstage plugin.
- */
-
-export interface TechRadarApi extends TechRadarComponentProps {
-  title?: string;
-  subtitle?: string;
-  pageTitle?: string;
-}

plugins/tech-radar/src/components/RadarComponent.tsx

@@ -15,38 +15,35 @@
  */
 
 import React, { useEffect } from 'react';
-import { Progress, useApi, errorApiRef, ErrorApi } from '@backstage/core';
+import { Progress, useApi, errorApiRef } from '@backstage/core';
 import { useAsync } from 'react-use';
 import Radar from '../components/Radar';
-import { TechRadarComponentProps, TechRadarLoaderResponse } from '../api';
-import getSampleData from '../sampleData';
+import {
+  techRadarApiRef,
+  TechRadarComponentProps,
+  TechRadarLoaderResponse,
+} from '../api';
 import { Entry } from '../utils/types';
 
-const useTechRadarLoader = (props: TechRadarComponentProps) => {
-  const errorApi = useApi<ErrorApi>(errorApiRef);
+const useTechRadarLoader = () => {
+  const errorApi = useApi(errorApiRef);
+  const techRadarApi = useApi(techRadarApiRef);
 
-  const { getData } = props;
-
-  const state = useAsync(async () => {
-    if (getData) {
-      const response: TechRadarLoaderResponse = await getData();
-      return response;
-    }
-    return undefined;
-  }, [getData, errorApi]);
+  const { error, value, loading } = useAsync(async () => techRadarApi.load(), [
+    techRadarApi,
+  ]);
 
   useEffect(() => {
-    const { error } = state;
     if (error) {
       errorApi.post(error);
     }
-  }, [errorApi, state]);
+  }, [error, errorApi]);
 
-  return state;
+  return { loading, value, error };
 };
 
 const RadarComponent = (props: TechRadarComponentProps): JSX.Element => {
-  const { loading, error, value: data } = useTechRadarLoader(props);
+  const { loading, error, value: data } = useTechRadarLoader();
 
   const mapToEntries = (
     loaderResponse: TechRadarLoaderResponse | undefined,
@@ -89,8 +86,4 @@ const RadarComponent = (props: TechRadarComponentProps): JSX.Element => {
   );
 };
 
-RadarComponent.defaultProps = {
-  getData: getSampleData,
-};
-
 export default RadarComponent;

plugins/tech-radar/src/plugin.ts

@@ -18,8 +18,12 @@ import {
   createPlugin,
   createRouteRef,
   createRoutableExtension,
+  createApiFactory,
 } from '@backstage/core';
 
+import { techRadarApiRef } from './api';
+import { SampleTechRadarApi } from './sample';
+
 const rootRouteRef = createRouteRef({
   title: 'Tech Radar',
 });
@@ -29,6 +33,7 @@ export const techRadarPlugin = createPlugin({
   routes: {
     root: rootRouteRef,
   },
+  apis: [createApiFactory(techRadarApiRef, new SampleTechRadarApi())],
 });
 
 export const TechRadarPage = techRadarPlugin.provide(

plugins/tech-radar/src/sample.ts

@@ -19,6 +19,7 @@ import {
   RadarQuadrant,
   RadarEntry,
   TechRadarLoaderResponse,
+  TechRadarApi,
 } from './api';
 
 const rings = new Array<RadarRing>();
@@ -164,15 +165,19 @@ entries.push({
   ],
   url: '#',
   key: 'github-actions',
-  id: 'github-actions',
-  title: 'GitHub Actions',
+  id: 'github-actiosns',
+  title: 'GitHub Acssstions',
   quadrant: 'infrastructure',
 });
 
-export default function getSampleData(): Promise<TechRadarLoaderResponse> {
-  return Promise.resolve({
-    rings,
-    quadrants,
-    entries,
-  });
+export const mock: TechRadarLoaderResponse = {
+  entries,
+  quadrants,
+  rings,
+};
+
+export class SampleTechRadarApi implements TechRadarApi {
+  async load() {
+    return mock;
+  }
 }