feat(SentryPlugin): Exposed Material table Options

Signed-off-by: Frank Cycan <frank@hqo.co>

plugins/sentry/src/components/Router.tsx

@@ -24,7 +24,18 @@ export const Router = ({ entity }: { entity: Entity }) => {
     <Routes>
       <Route
         path="/"
-        element={<SentryIssuesWidget entity={entity} statsFor="24h" />}
+        element={
+          <SentryIssuesWidget
+            entity={entity}
+            statsFor="24h"
+            tableOptions={{
+              padding: 'dense',
+              paging: true,
+              search: false,
+              pageSize: 5,
+            }}
+          />
+        }
       />
       )
     </Routes>

plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx

@@ -37,7 +37,16 @@ describe('SentryIssuesTable', () => {
     ];
     const table = await render(
       <ThemeProvider theme={lightTheme}>
-        <SentryIssuesTable sentryIssues={issues} />
+        <SentryIssuesTable
+          sentryIssues={issues}
+          statsFor="24h"
+          tableOptions={{
+            padding: 'dense',
+            paging: true,
+            search: false,
+            pageSize: 5,
+          }}
+        />
       </ThemeProvider>,
     );
     expect(await table.findByText('Error')).toBeInTheDocument();
@@ -61,7 +70,16 @@ describe('SentryIssuesTable', () => {
     ];
     const table = await render(
       <ThemeProvider theme={lightTheme}>
-        <SentryIssuesTable sentryIssues={issues} />
+        <SentryIssuesTable
+          sentryIssues={issues}
+          statsFor="24h"
+          tableOptions={{
+            padding: 'dense',
+            paging: true,
+            search: false,
+            pageSize: 5,
+          }}
+        />
       </ThemeProvider>,
     );
     expect(await table.findByText('Exception')).toBeInTheDocument();
@@ -83,7 +101,16 @@ describe('SentryIssuesTable', () => {
     ];
     const table = await render(
       <ThemeProvider theme={lightTheme}>
-        <SentryIssuesTable sentryIssues={issues} statsFor="24h" />
+        <SentryIssuesTable
+          sentryIssues={issues}
+          statsFor="24h"
+          tableOptions={{
+            padding: 'dense',
+            paging: true,
+            search: false,
+            pageSize: 5,
+          }}
+        />
       </ThemeProvider>,
     );
     expect(await table.findByText('Last 24h')).toBeInTheDocument();

plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx

@@ -20,6 +20,7 @@ import { DateTime } from 'luxon';
 import { ErrorCell } from '../ErrorCell/ErrorCell';
 import { ErrorGraph } from '../ErrorGraph/ErrorGraph';
 import { Table, TableColumn } from '@backstage/core-components';
+import { Options } from '@material-table/core';
 
 const columns: TableColumn[] = [
   {
@@ -59,17 +60,19 @@ const columns: TableColumn[] = [
 
 type SentryIssuesTableProps = {
   sentryIssues: SentryIssue[];
-  statsFor?: '24h' | '14d' | '';
+  statsFor: '24h' | '14d' | '';
+  tableOptions: Options<never>;
 };
 
 const SentryIssuesTable = ({
   sentryIssues,
   statsFor,
+  tableOptions,
 }: SentryIssuesTableProps) => {
   return (
     <Table
       columns={columns}
-      options={{ padding: 'dense', paging: true, search: false, pageSize: 5 }}
+      options={tableOptions}
       title="Sentry issues"
       subtitle={statsFor ? `Last ${statsFor}` : undefined}
       data={sentryIssues}

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

@@ -33,15 +33,18 @@ import {
 } from '@backstage/core-components';
 
 import { ErrorApi, errorApiRef, useApi } from '@backstage/core-plugin-api';
+import { Options } from '@material-table/core';
 
 export const SentryIssuesWidget = ({
   entity,
-  statsFor = '24h',
+  statsFor,
+  tableOptions,
   variant = 'gridItem',
   query = '',
 }: {
   entity: Entity;
-  statsFor?: '24h' | '14d' | '';
+  statsFor: '24h' | '14d' | '';
+  tableOptions: Options<never>;
   variant?: InfoCardVariants;
   query?: string;
 }) => {
@@ -83,5 +86,11 @@ export const SentryIssuesWidget = ({
     );
   }
 
-  return <SentryIssuesTable sentryIssues={value || []} statsFor={statsFor} />;
+  return (
+    <SentryIssuesTable
+      sentryIssues={value || []}
+      statsFor={statsFor}
+      tableOptions={tableOptions}
+    />
+  );
 };

plugins/sentry/src/extensions.tsx

@@ -21,6 +21,12 @@ import {
   createComponentExtension,
   createRoutableExtension,
 } from '@backstage/core-plugin-api';
+import { Options } from '@material-table/core';
+
+type SentryPageProps = {
+  statsFor?: '24h' | '14d' | '';
+  tableOptions?: Options<never>;
+};
 
 export const EntitySentryContent = sentryPlugin.provide(
   createRoutableExtension({
@@ -29,9 +35,21 @@ export const EntitySentryContent = sentryPlugin.provide(
     component: () =>
       import('./components/SentryIssuesWidget').then(
         ({ SentryIssuesWidget }) => {
-          const SentryPage = () => {
+          const SentryPage = ({ statsFor, tableOptions }: SentryPageProps) => {
             const { entity } = useEntity();
-            return <SentryIssuesWidget entity={entity} statsFor="24h" />;
+            const defaultOptions: Options<never> = {
+              padding: 'dense',
+              paging: true,
+              search: false,
+              pageSize: 5,
+            };
+            return (
+              <SentryIssuesWidget
+                entity={entity}
+                statsFor={statsFor || '24h'}
+                tableOptions={{ ...defaultOptions, ...tableOptions }}
+              />
+            );
           };
           return SentryPage;
         },
@@ -46,9 +64,25 @@ export const EntitySentryCard = sentryPlugin.provide(
       lazy: () =>
         import('./components/SentryIssuesWidget').then(
           ({ SentryIssuesWidget }) => {
-            const SentryCard = () => {
+            const SentryCard = ({
+              statsFor,
+              tableOptions,
+            }: SentryPageProps) => {
               const { entity } = useEntity();
-              return <SentryIssuesWidget entity={entity} />;
+              return (
+                <SentryIssuesWidget
+                  entity={entity}
+                  statsFor={statsFor || '24h'}
+                  tableOptions={
+                    tableOptions || {
+                      padding: 'dense',
+                      paging: true,
+                      search: false,
+                      pageSize: 5,
+                    }
+                  }
+                />
+              );
             };
             return SentryCard;
           },