Connect up the production API

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>

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>

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>>;
 }
 

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>

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>;
 }

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;

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>