use regular mui Select

Signed-off-by: Kiss Miklos <miklos@roadie.io>

packages/core-components/src/components/Select/Select.tsx

@@ -128,7 +128,7 @@ export type SelectedItems = string | string[] | number | number[];
 export type SelectProps = {
   multiple?: boolean;
   items: SelectItem[];
-  label?: string;
+  label: string;
   placeholder?: string;
   selected?: SelectedItems;
   onChange: (arg: SelectedItems) => void;

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

@@ -14,18 +14,19 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { SentryIssue } from '../../api';
 import { DateTime, Duration } from 'luxon';
 import { ErrorCell } from '../ErrorCell/ErrorCell';
 import { ErrorGraph } from '../ErrorGraph/ErrorGraph';
-import {
-  Table,
-  TableColumn,
-  Select,
-  SelectedItems,
-} from '@backstage/core-components';
+import { Table, TableColumn } from '@backstage/core-components';
+import Select from '@material-ui/core/Select';
 import { Options } from '@material-table/core';
+import { FormControl, Grid, MenuItem } from '@material-ui/core';
+
+const ONE_DAY_IN_MILLIS = 86400000;
+const SEVEN_DAYS_IN_MILLIS = ONE_DAY_IN_MILLIS * 7;
+const FOURTEEN_DAYS_IN_MILLIS = ONE_DAY_IN_MILLIS * 14;
 
 const columns: TableColumn[] = [
   {
@@ -71,40 +72,52 @@ type SentryIssuesTableProps = {
 
 const SentryIssuesTable = (props: SentryIssuesTableProps) => {
   const { sentryIssues, statsFor, tableOptions } = props;
-  const [filteredIssues, setFilteredIssues] = useState(sentryIssues);
+  const [selected, setSelected] = useState(ONE_DAY_IN_MILLIS);
 
-  const handleFilterChange = (item: SelectedItems) => {
-    if (item === Number.NEGATIVE_INFINITY) {
-      setFilteredIssues(sentryIssues);
-      return;
-    }
+  const filterByDate = useCallback((issue, selectedFilter) => {
+    return (
+      DateTime.fromISO(issue.lastSeen) >
+      DateTime.now().minus(Duration.fromMillis(selectedFilter))
+    );
+  }, []);
+  const [filteredIssues, setFilteredIssues] = useState(
+    sentryIssues.filter(i => filterByDate(i, selected)),
+  );
+
+  const handleFilterChange = (
+    event: React.ChangeEvent<{ name?: string; value: unknown }>,
+  ) => {
+    const item = event.target.value;
     if (typeof item === 'number') {
-      setFilteredIssues(
-        sentryIssues.filter(
-          i =>
-            DateTime.fromISO(i.lastSeen) >
-            DateTime.now().minus(Duration.fromMillis(item)),
-        ),
-      );
+      setSelected(item);
+      if (item === Number.NEGATIVE_INFINITY) {
+        setFilteredIssues(sentryIssues);
+        return;
+      }
+      setFilteredIssues(sentryIssues.filter(i => filterByDate(i, item)));
     }
   };
   return (
     <>
-      <Select
-        selected={14 * 86400000}
-        onChange={handleFilterChange}
-        items={[
-          { label: '24H', value: 86400000 },
-          { label: '7D', value: 7 * 86400000 },
-          { label: '14D', value: 14 * 86400000 },
-          { label: 'All', value: Number.NEGATIVE_INFINITY },
-        ]}
-      />
       <Table
         columns={columns}
         options={tableOptions}
-        title="Sentry issues"
-        subtitle={statsFor ? `Stat for ${statsFor}` : undefined}
+        title={
+          <Grid container>
+            <Grid item>Sentry Issues</Grid>
+            <Grid item>
+              <FormControl variant="outlined" size="small">
+                <Select value={selected} onChange={handleFilterChange}>
+                  <MenuItem value={ONE_DAY_IN_MILLIS}>24H</MenuItem>
+                  <MenuItem value={SEVEN_DAYS_IN_MILLIS}>7D</MenuItem>
+                  <MenuItem value={FOURTEEN_DAYS_IN_MILLIS}>14D</MenuItem>
+                  <MenuItem value={Number.NEGATIVE_INFINITY}>All</MenuItem>
+                </Select>
+              </FormControl>
+            </Grid>
+          </Grid>
+        }
+        subtitle={statsFor ? `Stats for ${statsFor}` : undefined}
         data={filteredIssues}
       />
     </>