From ea123bb5564723c4f9fc3a08aace4fe83de46ac7 Mon Sep 17 00:00:00 2001
From: Geoffrey Yu <geoffxy@mit.edu>
Date: Thu, 23 Jan 2025 18:21:51 -0500
Subject: [PATCH] Add table fields

---
 ui/src/components/CreateEditVdbeForm.jsx | 80 ++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/ui/src/components/CreateEditVdbeForm.jsx b/ui/src/components/CreateEditVdbeForm.jsx
index 8c58fefe..da53ba55 100644
--- a/ui/src/components/CreateEditVdbeForm.jsx
+++ b/ui/src/components/CreateEditVdbeForm.jsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useTheme } from "@mui/material/styles";
 import InsetPanel from "./InsetPanel";
 import CheckCircleOutlineRoundedIcon from "@mui/icons-material/CheckCircleOutlineRounded";
 import FormControl from "@mui/material/FormControl";
@@ -10,9 +11,85 @@ import Button from "@mui/material/Button";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import EditRoundedIcon from "@mui/icons-material/EditRounded";
 import Select from "@mui/material/Select";
+import Chip from "@mui/material/Chip";
+import Box from "@mui/material/Box";
+import OutlinedInput from "@mui/material/OutlinedInput";
 import VdbeView from "./VdbeView";
 import "./styles/CreateEditVdbeForm.css";
 
+const ITEM_HEIGHT = 47;
+const ITEM_PADDING_TOP = 7;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 3.5 + ITEM_PADDING_TOP,
+      width: 249,
+    },
+  },
+};
+
+function getStyles(name, selectedTables, theme) {
+  return {
+    fontWeight: selectedTables.includes(name)
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
+  };
+}
+
+function TableSelector({ tables }) {
+  const theme = useTheme();
+  const [selectedTables, setSelectedTables] = useState([]);
+
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedTables(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : value,
+    );
+  };
+
+  return (
+    <div>
+      <FormControl fullWidth>
+        <InputLabel id="cev-table-selector-label">Tables</InputLabel>
+        <Select
+          labelId="cev-table-selector-label"
+          label="Tables"
+          id="cev-table-selector"
+          multiple
+          value={selectedTables}
+          onChange={handleChange}
+          input={<OutlinedInput id="cev-table-selector-field" label="Tables" />}
+          renderValue={(selected) => (
+            <Box sx={{ display: "flex", flexWrap: "wrap", gap: -1.5 }}>
+              {selected.map((value) => (
+                <Chip
+                  key={value}
+                  label={value}
+                  style={{ marginRight: "8px" }}
+                />
+              ))}
+            </Box>
+          )}
+          MenuProps={MenuProps}
+        >
+          {tables.map((name) => (
+            <MenuItem
+              key={name}
+              value={name}
+              style={getStyles(name, selectedTables, theme)}
+            >
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
+
 function CreateEditFormFields({ vdbe, setVdbe }) {
   const onStalenessChange = (event) => {
     const maxStalenessMins = parseInt(event.target.value);
@@ -32,6 +109,8 @@ function CreateEditFormFields({ vdbe, setVdbe }) {
     setVdbe({ ...vdbe, p90_latency_slo_ms: sloMs });
   };
 
+  const tables = ["tickets", "theatres", "movies"];
+
   return (
     <div className="cev-form-fields">
       <TextField
@@ -87,6 +166,7 @@ function CreateEditFormFields({ vdbe, setVdbe }) {
           <MenuItem value="postgresql">PostgreSQL SQL</MenuItem>
           <MenuItem value="athena">Athena SQL</MenuItem>
         </Select>
+        <TableSelector tables={tables} />
       </FormControl>
     </div>
   );