Add Sentry widget to component page

plugins/catalog/package.json

@@ -22,6 +22,7 @@
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
+    "@backstage/plugin-sentry": "^0.1.1-alpha.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-use": "^14.2.0"

plugins/catalog/src/components/ComponentMetadataCard/ComponentMetadataCard.tsx

@@ -26,7 +26,11 @@ const ComponentMetadataCard: FC<ComponentMetadataCardProps> = ({
   component,
 }) => {
   if (loading) {
-    return <Progress />;
+    return (
+      <InfoCard title="Metadata">
+        <Progress />
+      </InfoCard>
+    );
   }
   if (!component) {
     return null;

plugins/catalog/src/components/ComponentPage/ComponentPage.tsx

@@ -28,6 +28,8 @@ import {
 } from '@backstage/core';
 import ComponentContextMenu from '../ComponentContextMenu/ComponentContextMenu';
 import ComponentRemovalDialog from '../ComponentRemovalDialog/ComponentRemovalDialog';
+import { SentryIssuesWidget } from '@backstage/plugin-sentry';
+import { Grid } from '@material-ui/core';
 
 const REDIRECT_DELAY = 1000;
 
@@ -94,10 +96,20 @@ const ComponentPage: FC<ComponentPageProps> = ({
         />
       )}
       <Content>
-        <ComponentMetadataCard
-          loading={catalogRequest.loading || removingPending}
-          component={catalogRequest.value}
-        />
+        <Grid container spacing={3} direction="column">
+          <Grid item>
+            <ComponentMetadataCard
+              loading={catalogRequest.loading || removingPending}
+              component={catalogRequest.value}
+            />
+          </Grid>
+          <Grid item>
+            <SentryIssuesWidget
+              sentryProjectId="sample-sentry-project-id"
+              statsFor="24h"
+            />
+          </Grid>
+        </Grid>
       </Content>
     </Page>
   );