Render the statsFor property in sentry issues table

Signed-off-by: Miguel Alexandre <m.alexandrex@gmail.com>

.changeset/three-brooms-sell.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-sentry': patch
+---
+
+Render the statsFor property in sentry issues table

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();
+  });
 });

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}
     />
   );

plugins/sentry/src/components/SentryIssuesWidget/SentryIssuesWidget.tsx

@@ -81,5 +81,5 @@ export const SentryIssuesWidget = ({
     );
   }
 
-  return <SentryIssuesTable sentryIssues={value || []} />;
+  return <SentryIssuesTable sentryIssues={value || []} statsFor={statsFor} />;
 };