Add Task details view

Allow users to find task by task ID

ui/src/components/TasksTable.tsx

@@ -1,16 +1,18 @@
-import React from "react";
+import React, { useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import Paper from "@material-ui/core/Paper";
 import Chip from "@material-ui/core/Chip";
+import InputBase from "@material-ui/core/InputBase";
+import SearchIcon from "@material-ui/icons/Search";
 import ActiveTasksTable from "./ActiveTasksTable";
 import PendingTasksTable from "./PendingTasksTable";
 import ScheduledTasksTable from "./ScheduledTasksTable";
 import RetryTasksTable from "./RetryTasksTable";
 import ArchivedTasksTable from "./ArchivedTasksTable";
 import { useHistory } from "react-router-dom";
-import { queueDetailsPath } from "../paths";
+import { queueDetailsPath, taskDetailsPath } from "../paths";
 import { QueueInfo } from "../reducers/queuesReducer";
 import { AppState } from "../store";
 import { isDarkTheme } from "../theme";
@@ -101,6 +103,38 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: "10px",
     marginLeft: "2px",
   },
+  searchbar: {
+    marginLeft: theme.spacing(4),
+  },
+  search: {
+    position: "relative",
+    width: "312px",
+    borderRadius: "18px",
+    backgroundColor: isDarkTheme(theme) ? "#303030" : theme.palette.grey[100],
+    "&:hover, &:focus": {
+      backgroundColor: isDarkTheme(theme) ? "#303030" : theme.palette.grey[200],
+    },
+  },
+  searchIcon: {
+    padding: theme.spacing(0, 2),
+    height: "100%",
+    position: "absolute",
+    pointerEvents: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  inputRoot: {
+    color: "inherit",
+    width: "100%",
+  },
+  inputInput: {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    width: "100%",
+    fontSize: "0.85rem",
+  },
 }));
 
 function TasksTable(props: Props & ReduxProps) {
@@ -115,6 +149,8 @@ function TasksTable(props: Props & ReduxProps) {
     { key: "archived", label: "Archived", count: currentStats.archived },
   ];
 
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
   return (
     <Paper variant="outlined" className={classes.container}>
       <div className={classes.header}>
@@ -137,6 +173,34 @@ function TasksTable(props: Props & ReduxProps) {
             />
           ))}
         </div>
+        <div className={classes.searchbar}>
+          <div className={classes.search}>
+            <div className={classes.searchIcon}>
+              <SearchIcon />
+            </div>
+            <InputBase
+              placeholder="Search by ID"
+              classes={{
+                root: classes.inputRoot,
+                input: classes.inputInput,
+              }}
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+              }}
+              inputProps={{
+                "aria-label": "search",
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    history.push(
+                      taskDetailsPath(props.queue, searchQuery.trim())
+                    );
+                  }
+                },
+              }}
+            />
+          </div>
+        </div>
       </div>
       <TabPanel value="active" selected={props.selected}>
         <ActiveTasksTable queue={props.queue} />