From d8e4afc620bf06f4c79bc38b4e7b43c2f8fcc21e Mon Sep 17 00:00:00 2001
From: Miguel Alexandre <m.alexandrex@gmail.com>
Date: Fri, 13 Aug 2021 13:15:33 +0200
Subject: [PATCH] Render the statsFor property in sentry issues table

Signed-off-by: Miguel Alexandre <m.alexandrex@gmail.com>
---
 .changeset/three-brooms-sell.md               |  5 +++++
 .../SentryIssuesTable.test.tsx                | 19 +++++++++++++++++++
 .../SentryIssuesTable/SentryIssuesTable.tsx   |  7 ++++++-
 .../SentryIssuesWidget/SentryIssuesWidget.tsx |  2 +-
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/three-brooms-sell.md

diff --git a/.changeset/three-brooms-sell.md b/.changeset/three-brooms-sell.md
new file mode 100644
index 0000000000..f399fd2fcd
--- /dev/null
+++ b/.changeset/three-brooms-sell.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-sentry': patch
+---
+
+Render the statsFor property in sentry issues table
diff --git a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx
index b1ac7daad6..a438394388 100644
--- a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx
+++ b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx
@@ -69,4 +69,23 @@ describe('SentryIssuesTable', () => {
     expect(await table.findByText('101')).toBeInTheDocument();
     expect(await table.findByText('202')).toBeInTheDocument();
   });
+  it('should render statsFor in table subtitle', async () => {
+    const issues: SentryIssue[] = [
+      {
+        ...mockIssue,
+        metadata: {
+          type: 'Exception',
+          value: 'exception was thrown',
+        },
+        count: '101',
+        userCount: 202,
+      },
+    ];
+    const table = await render(
+      <ThemeProvider theme={lightTheme}>
+        <SentryIssuesTable sentryIssues={issues} statsFor="24h" />
+      </ThemeProvider>,
+    );
+    expect(await table.findByText('For 24h')).toBeInTheDocument();
+  });
 });
diff --git a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
index 67cd354d93..1ea53a938e 100644
--- a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
+++ b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
@@ -59,14 +59,19 @@ const columns: TableColumn[] = [
 
 type SentryIssuesTableProps = {
   sentryIssues: SentryIssue[];
+  statsFor?: '24h' | '12h';
 };
 
-const SentryIssuesTable = ({ sentryIssues }: SentryIssuesTableProps) => {
+const SentryIssuesTable = ({
+  sentryIssues,
+  statsFor,
+}: SentryIssuesTableProps) => {
   return (
     <Table
       columns={columns}
       options={{ padding: 'dense', paging: true, search: false, pageSize: 5 }}
       title="Sentry issues"
+      subtitle={statsFor ? `For ${statsFor}` : undefined}
       data={sentryIssues}
     />
   );
diff --git a/plugins/sentry/src/components/SentryIssuesWidget/SentryIssuesWidget.tsx b/plugins/sentry/src/components/SentryIssuesWidget/SentryIssuesWidget.tsx
index 01a2b8be1b..46198e4b93 100644
--- a/plugins/sentry/src/components/SentryIssuesWidget/SentryIssuesWidget.tsx
+++ b/plugins/sentry/src/components/SentryIssuesWidget/SentryIssuesWidget.tsx
@@ -81,5 +81,5 @@ export const SentryIssuesWidget = ({
     );
   }
 
-  return <SentryIssuesTable sentryIssues={value || []} />;
+  return <SentryIssuesTable sentryIssues={value || []} statsFor={statsFor} />;
 };