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

@@ -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"

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

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

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) {

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}
           />
         )}
 

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] ?? '';
 };