Feature: Add a WarningPanel as an alternative to the EntityIncidentCard

.gitignore

@@ -1 +1,3 @@
-.idea
+.idea
+
+app-config.local.yaml

incident/app-config.yaml

@@ -0,0 +1,19 @@
+app:
+  title: Incident.io Plugins
+  baseUrl: http://localhost:3000
+
+backend:
+  baseUrl: http://localhost:7007
+
+proxy:
+  "/incident/api":
+    target: https://api.incident.io
+    headers:
+      Authorization: Bearer ${INCIDENT_API_KEY}
+
+incident:
+  fields:
+    api: "<id-of-api-custom-field>"
+    component: "<id-of-component-custom-field>"
+    system: "<id-of-system-custom-field>"
+    domain: "<id-of-domain-custom-field>"

incident/dev/index.tsx

@@ -0,0 +1,82 @@
+import { createDevApp } from "@backstage/dev-utils";
+import React from "react";
+import { EntityIncidentCard, incidentPlugin, HomePageIncidentCard, EntityIncidentWarningPanel } from "../src";
+import { fakeEntity, incidentIOHandler } from "./test-utils";
+import {
+  EntityProvider,
+  catalogApiRef,
+  CatalogApi,
+} from "@backstage/plugin-catalog-react";
+import { CatalogEntityPage } from "@backstage/plugin-catalog";
+import { setupWorker } from "msw/browser";
+import {Content, Header, Page} from "@backstage/core-components";
+import {Grid} from "@material-ui/core";
+
+const mockEntity = fakeEntity();
+const mockApiOrigin = "http://localhost:7007/api/proxy/incident/api";
+
+const worker = setupWorker(...incidentIOHandler(mockApiOrigin));
+
+await worker.start();
+
+createDevApp()
+  .registerPlugin(incidentPlugin)
+  // Mock Catalog API
+  .registerApi({
+    api: catalogApiRef,
+    deps: {},
+    factory: () =>
+      ({
+        getEntities: async () => {
+          await new Promise((r) => setTimeout(r, 1000));
+
+          return {
+            items: [mockEntity],
+          };
+        },
+        getEntityByRef: async () => {
+          return mockEntity;
+        },
+      }) as Partial<CatalogApi> as any,
+  })
+  .addPage({
+    path: "/catalog/:namespace/:kind/:name",
+    title: "EntityIncidentCard",
+    element: <CatalogEntityPage />,
+    children: (
+      <EntityProvider entity={mockEntity}>
+        <EntityIncidentCard />
+      </EntityProvider>
+    ),
+  })
+  .addPage({
+    path: "/incidents",
+    title: "HomePageIncidentCardContent",
+    element: (
+      <Page themeId="home">
+        <Content>
+          <HomePageIncidentCard />
+        </Content>
+      </Page>
+    ),
+  })
+  .addPage({
+    path: "/catalog-2/:namespace/:kind/:name",
+    title: "EntityIncidentWarningPanel",
+    element: <CatalogEntityPage />,
+    children: (
+        <>
+            <Header title="Entity Page"/>
+            <Content>
+                <Grid container>
+                    <Grid item xs={12}>
+                        <EntityProvider entity={mockEntity}>
+                            <EntityIncidentWarningPanel/>
+                        </EntityProvider>
+                    </Grid>
+                </Grid>
+            </Content>
+        </>
+    ),
+  })
+  .render();

incident/dev/test-utils/index.ts

@@ -0,0 +1,90 @@
+import { Entity } from "@backstage/catalog-model";
+import { definitions } from "../../src/api/types";
+import { faker } from "@faker-js/faker";
+import { http, HttpResponse, RequestHandler } from "msw";
+
+export function fakeEntity(): Entity {
+  return {
+    apiVersion: "backstage.io/v1alpha1",
+    kind: "Component",
+    metadata: {
+      name: "backstage",
+      description: "backstage.io",
+      annotations: {
+        "backstage.io/kubernetes-id": "dice-roller",
+      },
+    },
+    spec: {
+      lifecycle: "production",
+      type: "service",
+      owner: "user:guest",
+    },
+  };
+}
+
+export function incidentIOHandler(mockApiOrigin: string): RequestHandler[] {
+  return [
+    http.get(`${mockApiOrigin}/v1/identity`, () => {
+      return HttpResponse.json(fakeIdentity());
+    }),
+
+    http.get(`${mockApiOrigin}/v2/incidents`, () => {
+      return HttpResponse.json(fakeIncidents());
+    }),
+  ];
+}
+
+export function fakeIncident(): definitions["IncidentV2ResponseBody"] {
+  return {
+    call_url: faker.internet.url(),
+    created_at: faker.date.past().toISOString(),
+    name: faker.company.buzzPhrase(),
+    creator: {},
+    custom_field_entries: [],
+    id: faker.string.uuid(),
+    incident_role_assignments: [],
+    incident_status: {
+      id: faker.string.uuid(),
+      category: "active",
+      created_at: faker.date.past().toISOString(),
+      description: faker.lorem.paragraph(),
+      name: faker.company.buzzPhrase(),
+      rank: faker.number.int(),
+      updated_at: faker.date.past().toISOString(),
+    },
+    mode: "standard",
+    reference: faker.company.buzzVerb(),
+    slack_channel_id: faker.string.uuid(),
+    slack_channel_name: faker.word.noun(),
+    slack_team_id: faker.string.uuid(),
+    updated_at: faker.date.past().toISOString(),
+    visibility: "public",
+    external_id: "unknown",
+    idempotency_key: "unknown",
+    organisation_id: "unknown",
+    last_activity_at: "unknown",
+    active_participants: "unknown",
+    passive_participants: "unknown",
+    reported_at: "unknown",
+  };
+}
+
+export function fakeIncidents(): definitions["IncidentsV2ListResponseBody"] {
+  return {
+    incidents: [fakeIncident(), fakeIncident()],
+    pagination_meta: {
+      page_size: 100,
+      total_record_count: 100,
+    },
+  };
+}
+
+export function fakeIdentity(): definitions["UtilitiesV1IdentityResponseBody"] {
+  return {
+    identity: {
+      dashboard_url: faker.internet.url(),
+      name: faker.person.firstName(),
+      roles: ["catalog_editor"],
+    },
+  };
+}

incident/package.json

@@ -33,6 +33,7 @@
     "@backstage/plugin-home-react": "^0.1.4",
     "@backstage/plugin-search-react": "^1.7.1",
     "@backstage/theme": "^0.4.3",
+    "@faker-js/faker": "^9.0.3",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -51,13 +52,14 @@
     "@backstage/cli": "^0.23.1",
     "@backstage/core-app-api": "^1.11.0",
     "@backstage/dev-utils": "^1.0.22",
+    "@backstage/plugin-catalog": "^1.23.0",
     "@backstage/test-utils": "^1.4.4",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^14.0.0",
     "@types/node": "*",
     "cross-fetch": "^3.1.5",
-    "msw": "^1.0.0",
+    "msw": "^2.4.9",
     "prettier": "3.2.5",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
@@ -72,5 +74,10 @@
     "type": "git",
     "url": "https://github.com/incident-io/backstage-plugins.git",
     "directory": "incident"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }