Incorporate the API changes to the rest of the code.

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

plugins/airbrake/dev/index.tsx

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { EntityAirbrakeContent, airbrakePlugin } from '../src/plugin';
+import { EntityAirbrakeContent, airbrakePlugin } from '../src';
 import {
   Content,
   ContentHeader,

plugins/airbrake/package.json

@@ -23,6 +23,7 @@
     "@backstage/catalog-model": "^0.9.7",
     "@backstage/core-components": "^0.8.3",
     "@backstage/core-plugin-api": "^0.4.1",
+    "@backstage/plugin-catalog-react": "^0.6.10",
     "@backstage/theme": "^0.2.14",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.test.tsx

@@ -15,13 +15,29 @@
  */
 
 import React from 'react';
-import { EntityAirbrakeContent } from './EntityAirbrakeContent';
-import exampleData from './example-data.json';
+import { EntityAirbrakeWidget } from './EntityAirbrakeWidget';
+import exampleData from '../../api/mock/airbrake-groups-api-mock.json';
 import { renderInTestApp } from '@backstage/test-utils';
+import { AIRBRAKE_PROJECT_SLUG_ANNOTATION } from '../useProjectSlug';
+import { Entity } from '@backstage/catalog-model';
 
 describe('EntityAirbrakeContent', () => {
+  const entity = (name?: string) =>
+    ({
+      apiVersion: 'backstage.io/v1alpha1',
+      kind: 'Component',
+      metadata: {
+        annotations: {
+          [AIRBRAKE_PROJECT_SLUG_ANNOTATION]: name,
+        },
+        name: name,
+      },
+    } as Entity);
+
   it('renders all errors sent from Airbrake', async () => {
-    const table = await renderInTestApp(<EntityAirbrakeContent />);
+    const table = await renderInTestApp(
+      <EntityAirbrakeWidget entity={entity('test')} />,
+    );
     expect(exampleData.groups.length).toBeGreaterThan(0);
     for (const group of exampleData.groups) {
       expect(

plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx

@@ -39,7 +39,7 @@ const useStyles = makeStyles<BackstageTheme>(() => ({
   },
 }));
 
-export const EntityAirbrakeContent = ({ entity }: { entity: Entity }) => {
+export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => {
   const classes = useStyles();
 
   const projectId = useProjectSlug(entity);

plugins/airbrake/src/components/EntityAirbrakeWidget/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { EntityAirbrakeWidget } from './EntityAirbrakeWidget';

plugins/airbrake/src/extensions.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { EntityAirbrakeContent } from './plugin';
+import { EntityAirbrakeContent } from './extensions';
 import { renderInTestApp } from '@backstage/test-utils';
 
 describe('The Airbrake entity', () => {

plugins/airbrake/src/extensions.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEntity } from '@backstage/plugin-catalog-react';
+import React from 'react';
+import { airbrakePlugin } from './plugin';
+import { createRoutableExtension } from '@backstage/core-plugin-api';
+import { rootRouteRef } from './routes';
+
+export const EntityAirbrakeContent = airbrakePlugin.provide(
+  createRoutableExtension({
+    name: 'EntityAirbrakeContent',
+    mountPoint: rootRouteRef,
+    component: () =>
+      import('./components/EntityAirbrakeWidget').then(
+        ({ EntityAirbrakeWidget }) => {
+          const AirbrakePage = () => {
+            const { entity } = useEntity();
+            return <EntityAirbrakeWidget entity={entity} />;
+          };
+          return AirbrakePage;
+        },
+      ),
+  }),
+);

plugins/airbrake/src/index.ts

@@ -13,4 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { airbrakePlugin, EntityAirbrakeContent } from './plugin';
+export { airbrakePlugin } from './plugin';
+export { EntityAirbrakeContent } from './extensions';

plugins/airbrake/src/plugin.ts

@@ -14,26 +14,30 @@
  * limitations under the License.
  */
 import {
+  configApiRef,
+  createApiFactory,
   createPlugin,
-  createRoutableExtension,
+  discoveryApiRef,
+  identityApiRef,
 } from '@backstage/core-plugin-api';
 
 import { rootRouteRef } from './routes';
+import { airbrakeApiRef, ProductionAirbrakeApi } from './api';
 
 export const airbrakePlugin = createPlugin({
   id: 'airbrake',
+  apis: [
+    createApiFactory({
+      api: airbrakeApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        identityApi: identityApiRef,
+      },
+      factory: ({ discoveryApi }) => new ProductionAirbrakeApi(discoveryApi),
+    }),
+  ],
   routes: {
     root: rootRouteRef,
   },
 });
-
-export const EntityAirbrakeContent = airbrakePlugin.provide(
-  createRoutableExtension({
-    name: 'EntityAirbrakeContent',
-    component: () =>
-      import('./components/EntityAirbrakeContent/EntityAirbrakeContent').then(
-        m => m.EntityAirbrakeContent,
-      ),
-    mountPoint: rootRouteRef,
-  }),
-);