From f3238a1a6c69f04a778bd9aef445c5eedf022ef9 Mon Sep 17 00:00:00 2001
From: Karan Shah <karan.shah@simplybusiness.co.uk>
Date: Thu, 27 Jan 2022 11:07:21 +0000
Subject: [PATCH] Make the project slug into a project ID

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>
---
 plugins/airbrake/dev/components/ApiBar/ApiBar.tsx |  4 +++-
 plugins/airbrake/dev/index.tsx                    |  6 ++----
 plugins/airbrake/src/api/mock/mock-entity.ts      | 15 +++++++++------
 .../EntityAirbrakeWidget.test.tsx                 |  2 +-
 .../EntityAirbrakeWidget/EntityAirbrakeWidget.tsx |  4 ++--
 plugins/airbrake/src/components/useProjectSlug.ts |  4 ++--
 6 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx b/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
index bd8079420f..8437559baf 100644
--- a/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
+++ b/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
@@ -35,7 +35,9 @@ export const ApiBar = () => {
           <TextField
             label="Project ID"
             value={value.projectId}
-            onChange={e => value.setProjectId?.(parseInt(e.target.value, 10))}
+            onChange={e =>
+              value.setProjectId?.(parseInt(e.target.value, 10) || undefined)
+            }
           />
           <TextField
             label="API Key"
diff --git a/plugins/airbrake/dev/index.tsx b/plugins/airbrake/dev/index.tsx
index 37b1810142..c0a7c59fd9 100644
--- a/plugins/airbrake/dev/index.tsx
+++ b/plugins/airbrake/dev/index.tsx
@@ -37,7 +37,7 @@ createDevApp()
       <Page themeId="tool">
         <Header title="Airbrake demo application" subtitle="Mock API" />
         <Content>
-          <EntityProvider entity={createEntity('demo')}>
+          <EntityProvider entity={createEntity(1234)}>
             <EntityAirbrakeContent />
           </EntityProvider>
         </Content>
@@ -57,9 +57,7 @@ createDevApp()
           <Content>
             <Context.Consumer>
               {value => (
-                <EntityProvider
-                  entity={createEntity(value.projectId?.toString())}
-                >
+                <EntityProvider entity={createEntity(value.projectId)}>
                   <EntityAirbrakeContent />
                 </EntityProvider>
               )}
diff --git a/plugins/airbrake/src/api/mock/mock-entity.ts b/plugins/airbrake/src/api/mock/mock-entity.ts
index b169938004..7891478f51 100644
--- a/plugins/airbrake/src/api/mock/mock-entity.ts
+++ b/plugins/airbrake/src/api/mock/mock-entity.ts
@@ -13,17 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AIRBRAKE_PROJECT_SLUG_ANNOTATION } from '../../components/useProjectSlug';
+import { AIRBRAKE_PROJECT_ID_ANNOTATION } from '../../components/useProjectSlug';
 import { Entity } from '@backstage/catalog-model';
 
-export const createEntity = (name?: string) =>
-  ({
+export const createEntity = (projectId?: number) => {
+  const projectIdString = projectId?.toString();
+
+  return {
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'Component',
     metadata: {
       annotations: {
-        [AIRBRAKE_PROJECT_SLUG_ANNOTATION]: name,
+        [AIRBRAKE_PROJECT_ID_ANNOTATION]: projectIdString,
       },
-      name: name,
+      name: projectIdString,
     },
-  } as Entity);
+  } as Entity;
+};
diff --git a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.test.tsx b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.test.tsx
index 3c63f84f19..5fd1aa9bf5 100644
--- a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.test.tsx
+++ b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.test.tsx
@@ -23,7 +23,7 @@ import { createEntity } from '../../api/mock/mock-entity';
 describe('EntityAirbrakeContent', () => {
   it('renders all errors sent from Airbrake', async () => {
     const table = await renderInTestApp(
-      <EntityAirbrakeWidget entity={createEntity('test')} />,
+      <EntityAirbrakeWidget entity={createEntity(123)} />,
     );
     expect(exampleData.groups.length).toBeGreaterThan(0);
     for (const group of exampleData.groups) {
diff --git a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx
index 53f7d63f13..543ebbefc0 100644
--- a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx
+++ b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx
@@ -29,7 +29,7 @@ import { ErrorApi, errorApiRef, useApi } from '@backstage/core-plugin-api';
 import { airbrakeApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
 import {
-  AIRBRAKE_PROJECT_SLUG_ANNOTATION,
+  AIRBRAKE_PROJECT_ID_ANNOTATION,
   useProjectSlug,
 } from '../useProjectSlug';
 
@@ -64,7 +64,7 @@ export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => {
 
         {!loading && !projectId && (
           <MissingAnnotationEmptyState
-            annotation={AIRBRAKE_PROJECT_SLUG_ANNOTATION}
+            annotation={AIRBRAKE_PROJECT_ID_ANNOTATION}
           />
         )}
 
diff --git a/plugins/airbrake/src/components/useProjectSlug.ts b/plugins/airbrake/src/components/useProjectSlug.ts
index 4c6337b49e..07ba527c00 100644
--- a/plugins/airbrake/src/components/useProjectSlug.ts
+++ b/plugins/airbrake/src/components/useProjectSlug.ts
@@ -16,8 +16,8 @@
 
 import { Entity } from '@backstage/catalog-model';
 
-export const AIRBRAKE_PROJECT_SLUG_ANNOTATION = 'airbrake.io/project-slug';
+export const AIRBRAKE_PROJECT_ID_ANNOTATION = 'airbrake.io/project-id';
 
 export const useProjectSlug = (entity: Entity) => {
-  return entity?.metadata.annotations?.[AIRBRAKE_PROJECT_SLUG_ANNOTATION] ?? '';
+  return entity?.metadata.annotations?.[AIRBRAKE_PROJECT_ID_ANNOTATION] ?? '';
 };