From 899b8d748fa414bbe1d0c5d1ea71cafda1a18431 Mon Sep 17 00:00:00 2001
From: Karan Shah <karan.shah@simplybusiness.co.uk>
Date: Mon, 31 Jan 2022 16:39:49 +0000
Subject: [PATCH] Connect up the production API

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>
---
 .../airbrake/dev/components/ApiBar/ApiBar.tsx |  4 +--
 .../ContextProvider/ContextProvider.tsx       |  2 +-
 plugins/airbrake/dev/index.tsx                | 34 ++++++++++++-------
 plugins/airbrake/src/api/airbrake-api.ts      |  2 +-
 plugins/airbrake/src/api/production-api.ts    | 13 +++----
 .../EntityAirbrakeWidget.tsx                  |  4 +--
 6 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx b/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
index 294e4506d1..eae00c2d32 100644
--- a/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
+++ b/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
@@ -66,7 +66,7 @@ export const ApiBar = () => {
             <TextField
               label="Project ID"
               variant="outlined"
-              value={value.projectId}
+              defaultValue={value.projectId}
               onChange={e =>
                 value.setProjectId?.(parseInt(e.target.value, 10) || undefined)
               }
@@ -74,7 +74,7 @@ export const ApiBar = () => {
             <TextField
               label="API Key"
               variant="outlined"
-              value={value.apiKey}
+              defaultValue={value.apiKey}
               onChange={e => value.setApiKey?.(e.target.value)}
             />
           </MuiThemeProvider>
diff --git a/plugins/airbrake/dev/components/ContextProvider/ContextProvider.tsx b/plugins/airbrake/dev/components/ContextProvider/ContextProvider.tsx
index bbf72f3b99..6d7fe0f7f2 100644
--- a/plugins/airbrake/dev/components/ContextProvider/ContextProvider.tsx
+++ b/plugins/airbrake/dev/components/ContextProvider/ContextProvider.tsx
@@ -23,7 +23,7 @@ import React, {
 interface ContextInterface {
   projectId?: number;
   setProjectId?: Dispatch<SetStateAction<number | undefined>>;
-  apiKey?: String;
+  apiKey?: string;
   setApiKey?: Dispatch<SetStateAction<string>>;
 }
 
diff --git a/plugins/airbrake/dev/index.tsx b/plugins/airbrake/dev/index.tsx
index c0a7c59fd9..7f32d30b4a 100644
--- a/plugins/airbrake/dev/index.tsx
+++ b/plugins/airbrake/dev/index.tsx
@@ -15,31 +15,33 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
+import { TestApiProvider } from '@backstage/test-utils';
 import { airbrakePlugin, EntityAirbrakeContent } from '../src';
-import { airbrakeApiRef, MockAirbrakeApi } from '../src/api';
+import {
+  airbrakeApiRef,
+  MockAirbrakeApi,
+  ProductionAirbrakeApi,
+} from '../src/api';
 import { ApiBar } from './components/ApiBar';
 import { Content, Header, Page } from '@backstage/core-components';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { createEntity } from '../src/api/mock/mock-entity';
 import CloudOffIcon from '@material-ui/icons/CloudOff';
 import CloudIcon from '@material-ui/icons/Cloud';
-import { ContextProvider, Context } from './components/ContextProvider';
+import { Context, ContextProvider } from './components/ContextProvider';
 
 createDevApp()
   .registerPlugin(airbrakePlugin)
-  .registerApi({
-    api: airbrakeApiRef,
-    deps: {},
-    factory: () => new MockAirbrakeApi(),
-  })
   .addPage({
     element: (
       <Page themeId="tool">
         <Header title="Airbrake demo application" subtitle="Mock API" />
         <Content>
-          <EntityProvider entity={createEntity(1234)}>
-            <EntityAirbrakeContent />
-          </EntityProvider>
+          <TestApiProvider apis={[[airbrakeApiRef, new MockAirbrakeApi()]]}>
+            <EntityProvider entity={createEntity(1234)}>
+              <EntityAirbrakeContent />
+            </EntityProvider>
+          </TestApiProvider>
         </Content>
       </Page>
     ),
@@ -57,9 +59,15 @@ createDevApp()
           <Content>
             <Context.Consumer>
               {value => (
-                <EntityProvider entity={createEntity(value.projectId)}>
-                  <EntityAirbrakeContent />
-                </EntityProvider>
+                <TestApiProvider
+                  apis={[
+                    [airbrakeApiRef, new ProductionAirbrakeApi(value.apiKey)],
+                  ]}
+                >
+                  <EntityProvider entity={createEntity(value.projectId)}>
+                    <EntityAirbrakeContent />
+                  </EntityProvider>
+                </TestApiProvider>
               )}
             </Context.Consumer>
           </Content>
diff --git a/plugins/airbrake/src/api/airbrake-api.ts b/plugins/airbrake/src/api/airbrake-api.ts
index 1a3cfa72e4..3e3fe123b9 100644
--- a/plugins/airbrake/src/api/airbrake-api.ts
+++ b/plugins/airbrake/src/api/airbrake-api.ts
@@ -22,5 +22,5 @@ export const airbrakeApiRef = createApiRef<AirbrakeApi>({
 });
 
 export interface AirbrakeApi {
-  fetchGroups(project: string): Promise<Groups>;
+  fetchGroups(projectId: string): Promise<Groups>;
 }
diff --git a/plugins/airbrake/src/api/production-api.ts b/plugins/airbrake/src/api/production-api.ts
index 37ac938752..cd8d2f95bf 100644
--- a/plugins/airbrake/src/api/production-api.ts
+++ b/plugins/airbrake/src/api/production-api.ts
@@ -16,20 +16,17 @@
 
 import { Groups } from './airbrake-groups';
 import { AirbrakeApi } from './airbrake-api';
-import { DiscoveryApi } from '@backstage/core-plugin-api';
 
 export class ProductionAirbrakeApi implements AirbrakeApi {
-  constructor(private readonly discoveryApi: DiscoveryApi) {}
+  constructor(private readonly apiKey?: string) {}
 
-  async fetchGroups(project: string): Promise<Groups> {
-    const apiUrl = `${await this.discoveryApi.getBaseUrl(
-      'proxy',
-    )}/airbrake/api`;
+  async fetchGroups(projectId: string): Promise<Groups> {
+    const apiUrl = `https://api.airbrake.io/api/v4/projects/${projectId}/groups?key=${this.apiKey}`;
 
-    const response = await fetch(`${apiUrl}/v4/projects/${project}/groups`);
+    const response = await fetch(apiUrl);
 
     if (response.status >= 400 && response.status < 600) {
-      throw new Error('Failed fetching Airbrake issues');
+      throw new Error('Failed fetching Airbrake groups');
     }
 
     return (await response.json()) as Groups;
diff --git a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx
index 4564af6079..b11116aeef 100644
--- a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx
+++ b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx
@@ -45,7 +45,7 @@ export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => {
 
   const { loading, value, error } = useAsync(
     () => airbrakeApi.fetchGroups(projectId),
-    [projectId],
+    [airbrakeApi, projectId],
   );
 
   useEffect(() => {
@@ -69,7 +69,7 @@ export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => {
           <EmptyState
             missing="info"
             title="No information to display"
-            description={`There is no Sentry project with id '${projectId}'.`}
+            description={`There is no Airbrake project with id '${projectId}' or there was an issue communicating with Airbrake.`}
           />
         )}
       </InfoCard>