Adds Sorting to Data Table

ui/components/CommitsTable.tsx

@@ -81,7 +81,6 @@ function CommitsTable({
     <div className={className}>
       <DataTable
         sortFields={["date"]}
-        reverseSort
         fields={[
           {
             label: "SHA",

ui/components/DataTable.tsx

@@ -9,6 +9,10 @@ import {
 import _ from "lodash";
 import * as React from "react";
 import styled from "styled-components";
+import Button from "./Button";
+import Flex from "./Flex";
+import Icon, { IconType } from "./Icon";
+import Spacer from "./Spacer";
 import Text from "./Text";
 
 /** DataTable Properties  */
@@ -24,8 +28,6 @@ export interface Props {
   rows: any[];
   /** A list of strings representing the sortable columns of the table, passed into lodash's `_.sortBy`. */
   sortFields: string[];
-  /** Indicates whether to reverse the sorted array. */
-  reverseSort?: boolean;
   /** an optional list of string widths for each field/column. */
   widths?: string[];
 }
@@ -37,21 +39,68 @@ const EmptyRow = styled(TableRow)<{ colSpan: number }>`
   }
 `;
 
+const TableButton = styled(Button)`
+  &.MuiButton-root {
+    padding: 0;
+    margin: 0;
+    text-transform: none;
+  }
+  &.MuiButton-text {
+    color: ${(props) => props.theme.colors.neutral30};
+    min-width: 0px;
+  }
+  &.arrow {
+    min-width: 0px;
+  }
+  &.selected {
+    color: ${(props) => props.theme.colors.neutral40};
+  }
+`;
+
 /** Form DataTable */
 function UnstyledDataTable({
   className,
   fields,
   rows,
   sortFields,
-  reverseSort,
   widths,
 }: Props) {
-  const sorted = _.sortBy(rows, sortFields);
+  const [sort, setSort] = React.useState(sortFields[0]);
+  const [reverseSort, setReverseSort] = React.useState(false);
+  const sorted = _.sortBy(rows, sort);
 
   if (reverseSort) {
     sorted.reverse();
   }
 
+  type labelProps = { label: string };
+  function SortableLabel({ label }: labelProps) {
+    return (
+      <Flex align start>
+        <TableButton
+          color="inherit"
+          variant="text"
+          onClick={() => {
+            setReverseSort(sort === label.toLowerCase() ? !reverseSort : false);
+            setSort(label.toLowerCase());
+          }}
+        >
+          <h2>{label}</h2>
+        </TableButton>
+        <Spacer padding="xxs" />
+        {sort === label.toLowerCase() ? (
+          <Icon
+            type={IconType.ArrowUpwardIcon}
+            size="base"
+            className={reverseSort ? "upward" : "downward"}
+          />
+        ) : (
+          <div style={{ width: "16px" }} />
+        )}
+      </Flex>
+    );
+  }
+
   const r = _.map(sorted, (r, i) => (
     <TableRow key={i}>
       {_.map(fields, (f, i) => (
@@ -70,7 +119,11 @@ function UnstyledDataTable({
             <TableRow>
               {_.map(fields, (f, i) => (
                 <TableCell style={widths && { width: widths[i] }} key={f.label}>
-                  {f.label}
+                  {sortFields.includes(f.label.toLowerCase()) ? (
+                    <SortableLabel label={f.label} />
+                  ) : (
+                    <h2 className="thead">{f.label}</h2>
+                  )}
                 </TableCell>
               ))}
             </TableRow>
@@ -93,7 +146,11 @@ function UnstyledDataTable({
 }
 
 export const DataTable = styled(UnstyledDataTable)`
-  .MuiTableCell-head {
+  h2 {
+    margin: 0px;
+  }
+  .thead {
+    color: ${(props) => props.theme.colors.neutral30};
     font-weight: 800;
   }
 `;

ui/components/Icon.tsx

@@ -1,13 +1,13 @@
 import AccountCircleIcon from "@material-ui/icons/AccountCircle";
 import AddIcon from "@material-ui/icons/Add";
-import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 import DeleteIcon from "@material-ui/icons/Delete";
-import NavigateNextIcon from "@material-ui/icons/NavigateNext";
-import SaveAltIcon from "@material-ui/icons/SaveAlt";
 import ErrorIcon from "@material-ui/icons/Error";
 import HourglassFullIcon from "@material-ui/icons/HourglassFull";
 import LaunchIcon from "@material-ui/icons/Launch";
+import NavigateNextIcon from "@material-ui/icons/NavigateNext";
+import SaveAltIcon from "@material-ui/icons/SaveAlt";
 import * as React from "react";
 import styled from "styled-components";
 import { colors, spacing } from "../typedefs/styled";
@@ -95,7 +95,12 @@ export default styled(Icon)`
     height: ${(props) => props.theme.spacing[props.size as any]};
     width: ${(props) => props.theme.spacing[props.size as any]};
   }
-
+  &.downward {
+    transform: rotate(180deg);
+  }
+  &.upward {
+    transform: initial;
+  }
   ${Text} {
     margin-left: 4px;
     color: ${(props) => props.theme.colors[props.color as any]};

ui/components/__tests__/DataTable.test.tsx

@@ -1,45 +1,93 @@
+import { fireEvent, render, screen } from "@testing-library/react";
 import "jest-styled-components";
 import React from "react";
 import renderer from "react-test-renderer";
 import { withTheme } from "../../lib/test-utils";
 import DataTable from "../DataTable";
 
 describe("DataTable", () => {
-  describe("snapshots", () => {
-    it("renders", () => {
-      const rows = [
-        {
-          name: "my-cool-app",
-          status: "Ready",
-          lastUpdate: "2006-01-02T15:04:05-0700",
-        },
-        {
-          name: "podinfo",
-          status: "Ready",
-          lastUpdate: "2006-01-02T15:04:05-0700",
-        },
-        {
-          name: "nginx",
-          status: "Ready",
-          lastUpdate: "2006-01-02T15:04:05-0700",
-        },
-      ];
+  const rows = [
+    {
+      name: "the-cool-app",
+      status: "Ready",
+      lastUpdate: "2006-01-02T15:04:05-0700",
+    },
+    {
+      name: "podinfo",
+      status: "Failed",
+      lastUpdate: "2006-01-02T15:04:05-0700",
+    },
+    {
+      name: "nginx",
+      status: "Ready",
+      lastUpdate: "2006-01-02T15:04:05-0700",
+    },
+  ];
 
-      const fields = [
-        {
-          label: "Name",
-          value: ({ name }) => <a href="/some_url">{name}</a>,
-        },
-        {
-          label: "Status",
-          value: (v) => v.status,
-        },
-        {
-          label: "Last Updated",
-          value: "lastUpdate",
-        },
-      ];
+  const fields = [
+    {
+      label: "Name",
+      value: ({ name }) => <a href="/some_url">{name}</a>,
+    },
+    {
+      label: "Status",
+      value: (v) => v.status,
+    },
+    {
+      label: "Last Updated",
+      value: "lastUpdate",
+    },
+  ];
+  describe("sorting", () => {
+    it("initially sorts based on sortFields[0]", () => {
+      render(
+        withTheme(
+          <DataTable
+            sortFields={["name", "status"]}
+            fields={fields}
+            rows={rows}
+          />
+        )
+      );
+      const firstRow = screen.getAllByRole("row")[1];
+      expect(firstRow.innerHTML).toMatch(/nginx/);
+    });
+    it("reverses sort on thead click", () => {
+      render(
+        withTheme(
+          <DataTable
+            sortFields={["name", "status"]}
+            fields={fields}
+            rows={rows}
+          />
+        )
+      );
 
+      const nameButton = screen.getByText("Name");
+      fireEvent.click(nameButton);
+      const firstRow = screen.getAllByRole("row")[1];
+      expect(firstRow.innerHTML).toMatch(/the-cool-app/);
+    });
+    it("resets reverseSort and switches sort column on different thead click", () => {
+      render(
+        withTheme(
+          <DataTable
+            sortFields={["name", "status"]}
+            fields={fields}
+            rows={rows}
+          />
+        )
+      );
+      const nameButton = screen.getByText("Name");
+      fireEvent.click(nameButton);
+      const statusButton = screen.getByText("Status");
+      fireEvent.click(statusButton);
+      const firstRow = screen.getAllByRole("row")[1];
+      expect(firstRow.innerHTML).toMatch(/podinfo/);
+    });
+  });
+  describe("snapshots", () => {
+    it("renders", () => {
       const tree = renderer
         .create(
           withTheme(