Conditionally add Sentry widget to component page

This adds the Sentry widget back to the component page (from which it
was removed in #2246) if the component declares its own Sentry project
ID in the annotation named backstage.io/sentry-project-id. The widget
is hidden otherwise.

Previous to #2246, the widget was just displaying an empty list because
it was trying to load data for a hardcoded project name of
sample-sentry-project-id.

Fixes #2257

plugins/catalog/package.json

@@ -27,6 +27,7 @@
     "@backstage/plugin-github-actions": "^0.1.1-alpha.21",
     "@backstage/plugin-jenkins": "^0.1.1-alpha.21",
     "@backstage/plugin-scaffolder": "^0.1.1-alpha.21",
+    "@backstage/plugin-sentry": "^0.1.1-alpha.21",
     "@backstage/plugin-techdocs": "^0.1.1-alpha.21",
     "@backstage/theme": "^0.1.1-alpha.21",
     "@material-ui/core": "^4.9.1",

plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx

@@ -17,6 +17,7 @@
 // TODO(shmidt-i): move to the app
 import { Entity } from '@backstage/catalog-model';
 import { Content } from '@backstage/core';
+import { SentryIssuesWidget } from '@backstage/plugin-sentry';
 import { LatestWorkflowRunCard } from '@backstage/plugin-github-actions';
 import {
   JenkinsBuildsWidget,
@@ -52,6 +53,16 @@ export const EntityPageOverview: FC<{ entity: Entity }> = ({ entity }) => {
             <LatestWorkflowRunCard entity={entity} branch="master" />
           </Grid>
         )}
+        {entity.metadata?.annotations?.['backstage.io/sentry-project-id'] && (
+          <Grid item sm={8}>
+            <SentryIssuesWidget
+              sentryProjectId={
+                entity.metadata?.annotations?.['backstage.io/sentry-project-id']
+              }
+              statsFor="24h"
+            />
+          </Grid>
+        )}
       </Grid>
     </Content>
   );