From 35dec7dc7cda58d830ffc23043afc127c00f2efc Mon Sep 17 00:00:00 2001
From: Wojciech Adaszynski <wojciecha@spotify.com>
Date: Mon, 18 May 2020 11:31:20 +0200
Subject: [PATCH] Add Sentry widget to component page

---
 plugins/catalog/package.json                  |  1 +
 .../ComponentMetadataCard.tsx                 |  6 +++++-
 .../ComponentPage/ComponentPage.tsx           | 20 +++++++++++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json
index 9a99704da1..fe70b8cc44 100644
--- a/plugins/catalog/package.json
+++ b/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"
diff --git a/plugins/catalog/src/components/ComponentMetadataCard/ComponentMetadataCard.tsx b/plugins/catalog/src/components/ComponentMetadataCard/ComponentMetadataCard.tsx
index 9d606c5839..7059709992 100644
--- a/plugins/catalog/src/components/ComponentMetadataCard/ComponentMetadataCard.tsx
+++ b/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;
diff --git a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
index 6348e88c4f..0cf7017173 100644
--- a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
+++ b/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>
   );