Merge Development (#44)

* CEC-244 Remote car commands, search, sortable tables (#42)

* Add sortable table header

* Send bulk commands page
Update table page sizes
All tables are sortable

* Update site layout
Add search to update packages

* Reenable Datadog

* remove dev stuff

* CEC-244 Add search (#43)

* Add search to car send command page
Add snapshot check

src/components/Table/HeaderSortable/index.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Checkbox,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableSortLabel,
+} from "@material-ui/core";
+
+const HeaderSortable = (props) => {
+  const {
+    classes,
+    order,
+    orderBy,
+    onSortRequest,
+    columnData,
+    multiSelect,
+    onSelectAll,
+    selectCount,
+    rowCount,
+  } = props;
+  const sortHandler = (property) => (event) => {
+    if (!onSortRequest) return;
+    onSortRequest(event, property);
+  };
+  const selectAllHandler = (event) => {
+    if (!onSelectAll) return;
+    onSelectAll(event);
+  };
+  const ColumnLabel = (column) => {
+    if (column.id) {
+      return (
+        <TableSortLabel
+          active={orderBy === column.id}
+          direction={orderBy === column.id ? order : "asc"}
+          onClick={sortHandler(column.id)}
+        >
+          {column.label}
+          {orderBy === column.id ? (
+            <span className={classes.hiddenSortSpan}>
+              {order === "desc" ? "sorted descending" : "sorted ascending"}
+            </span>
+          ) : null}
+        </TableSortLabel>
+      );
+    }
+
+    return column.label;
+  };
+
+  if (multiSelect) {
+    const errors = [];
+    if (onSelectAll === undefined) errors.push("onSelectAll required");
+    if (selectCount === undefined) errors.push("selectCount required");
+    if (rowCount === undefined) errors.push("rowCount required");
+    if (errors.length > 0) {
+      throw new Error(errors.join(". "));
+    }
+  }
+  return (
+    <TableHead>
+      <TableRow>
+        {multiSelect && (
+          <TableCell padding="checkbox">
+            <Checkbox
+              indeterminate={selectCount > 0 && selectCount < rowCount}
+              checked={rowCount > 0 && selectCount === rowCount}
+              onChange={selectAllHandler}
+              inputProps={{ "aria-label": "select all desserts" }}
+            />
+          </TableCell>
+        )}
+        {columnData.map((column) => (
+          <TableCell
+            key={column.id}
+            align={column.numeric ? "right" : "center"}
+            padding={column.disablePadding ? "none" : "default"}
+            sortDirection={orderBy === column.id ? order : false}
+          >
+            {ColumnLabel(column)}
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+};
+
+HeaderSortable.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onSortRequest: PropTypes.func.isRequired,
+  order: PropTypes.oneOf(["asc", "desc"]).isRequired,
+  orderBy: PropTypes.string.isRequired,
+  columnData: PropTypes.array.isRequired,
+  multiSelect: PropTypes.bool,
+  selectCount: PropTypes.number,
+  totalRows: PropTypes.number,
+  onSelectAll: PropTypes.func,
+};
+
+export default HeaderSortable;