Table component with filter and search (#600)

* Initial table component with storybook example

* Moved dependencies to package/core

* Removed dependency to @backstage/core from base package.json

* Clean up some examples and remove type from columns, replacing with property align instead

* Removed more unused stuff and added toggle for filter input

* Fixed some lint issues

* Added example with material-table

* Convert column array passed into MaterialTable Backstage component into MT column array. Allow multiple values in one cell

* Removed subheader from MT

* Nicer double value cell

* Added custom sorting to example

* Cleaned up stories a bit

* Setting field instead of customSort

* Improve styling. Still needs better theme integration

* Using more colors from theme

* Fixed typing issue

* Removed react-table implementation and cleaned up material-table implementation

* Fixed some type issues

* Fixed lint issues

plugins/lighthouse/src/components/Audit/AuditRow.tsx

@@ -14,17 +14,16 @@
  * limitations under the License.
  */
 import React, { FC } from 'react';
-import {
-  Link,
-  TableCell,
-  TableRow,
-} from '@material-ui/core';
+import { Link, TableCell, TableRow } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { TrendLine } from '@backstage/core';
+import { Website } from '../../api';
 import {
-  Website,
-} from '../../api';
-import { formatTime, CATEGORIES, CATEGORY_LABELS, SparklinesDataByCategory } from '../../utils';
+  formatTime,
+  CATEGORIES,
+  CATEGORY_LABELS,
+  SparklinesDataByCategory,
+} from '../../utils';
 import AuditStatusIcon from '../AuditStatusIcon';
 
 const useStyles = makeStyles(theme => ({
@@ -76,9 +75,7 @@ export const AuditRow: FC<{
           {website.lastAudit.status.toLowerCase()}
         </span>
       </TableCell>
-      <TableCell>
-        {formatTime(website.lastAudit.timeCreated)}
-      </TableCell>
+      <TableCell>{formatTime(website.lastAudit.timeCreated)}</TableCell>
     </TableRow>
   );
 };

plugins/lighthouse/src/components/AuditList/AuditListTable.tsx

@@ -23,11 +23,14 @@ import {
   TableRow,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { Website } from '../../api';
 import {
-  Website,
-} from '../../api';
-import { CATEGORIES, CATEGORY_LABELS, SparklinesDataByCategory, buildSparklinesDataForItem } from '../../utils';
-import Audit from '../Audit'
+  CATEGORIES,
+  CATEGORY_LABELS,
+  SparklinesDataByCategory,
+  buildSparklinesDataForItem,
+} from '../../utils';
+import Audit from '../Audit';
 
 const useStyles = makeStyles(theme => ({
   table: {
@@ -51,7 +54,7 @@ export const AuditListTable: FC<{ items: Website[] }> = ({ items }) => {
     () =>
       items.reduce(
         (res, item) => ({
-           ...res,
+          ...res,
           [item.url]: buildSparklinesDataForItem(item),
         }),
         {},

plugins/lighthouse/src/components/CreateAudit/index.tsx

@@ -84,7 +84,14 @@ const CreateAudit: FC<{}> = () => {
     } finally {
       setSubmitting(false);
     }
-  }, [url, emulatedFormFactor, lighthouseApi, setSubmitting, errorApi, history]);
+  }, [
+    url,
+    emulatedFormFactor,
+    lighthouseApi,
+    setSubmitting,
+    errorApi,
+    history,
+  ]);
 
   return (
     <Page theme={pageTheme.tool}>

plugins/lighthouse/src/utils.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { useLocation } from 'react-router-dom';
-import {Website, Audit, LighthouseCategoryId, AuditCompleted} from './api'
+import { Website, Audit, LighthouseCategoryId, AuditCompleted } from './api';
 export function useQuery(): URLSearchParams {
   return new URLSearchParams(useLocation().search);
 }
@@ -45,7 +45,9 @@ export const CATEGORY_LABELS: Record<LighthouseCategoryId, string> = {
 };
 
 export type SparklinesDataByCategory = Record<LighthouseCategoryId, number[]>;
-export function buildSparklinesDataForItem(item: Website): SparklinesDataByCategory {
+export function buildSparklinesDataForItem(
+  item: Website,
+): SparklinesDataByCategory {
   return item.audits
     .filter(
       (audit: Audit): audit is AuditCompleted => audit.status === 'COMPLETED',
@@ -63,4 +65,4 @@ export function buildSparklinesDataForItem(item: Website): SparklinesDataByCateg
 
       return scores;
     }, {} as SparklinesDataByCategory);
-}
+}