fix: better styling for mod action search (#2586)

Author: Golbolco

react_main/src/pages/Policy/Moderation/ModActions.jsx

@@ -19,6 +19,9 @@ export function ModActions(props) {
   const [page, setPage] = useState(1);
   const [actions, setActions] = useState([]);
   const [staffNameFilter, setStaffNameFilter] = useState("");
+  const [staffNameQuery, setStaffNameQuery] = useState("");
+  const [staffNameOptions, setStaffNameOptions] = useState([]);
+  const [staffIdMap, setStaffIdMap] = useState({});
   const [actionTypeFilter, setActionTypeFilter] = useState("");
 
   const modCommands = useModCommands({}, () => {}, props.setResults);
@@ -30,6 +33,25 @@ export function ModActions(props) {
     loadActions(1);
   }, [staffNameFilter, actionTypeFilter]);
 
+  useEffect(() => {
+    if (staffNameQuery.length === 0) {
+      setStaffNameOptions([]);
+      return;
+    }
+
+    axios
+      .get(`/api/user/searchName?query=${staffNameQuery}`)
+      .then((res) => {
+        const newIdMap = {};
+        for (let userData of res.data) {
+          newIdMap[userData.name] = userData.id;
+        }
+        setStaffIdMap(newIdMap);
+        setStaffNameOptions(res.data.map((user) => user.name));
+      })
+      .catch(errorAlert);
+  }, [staffNameQuery]);
+
   function loadActions(_page) {
     const params = new URLSearchParams();
 
@@ -161,20 +183,31 @@ export function ModActions(props) {
       <Typography variant="h3">Mod Actions</Typography>
       <Stack direction="column" spacing={2}>
         <Stack
-          direction={{ xs: "column", sm: "row" }}
+          direction="column"
           spacing={2}
           sx={{ mb: 1 }}
         >
-          <TextField
-            label="Search by Staff Name"
-            variant="outlined"
-            size="small"
-            value={staffNameFilter}
-            onChange={(e) => {
-              setStaffNameFilter(e.target.value);
+          <Autocomplete
+            options={staffNameOptions}
+            inputValue={staffNameQuery}
+            onInputChange={(e, newValue) => {
+              setStaffNameQuery(newValue);
+            }}
+            onChange={(e, newValue) => {
+              setStaffNameFilter(newValue || "");
               setPage(1);
             }}
-            sx={{ minWidth: 200 }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                label="Staff Name"
+                variant="outlined"
+                size="small"
+              />
+            )}
+            sx={{ width: 290 }}
+            freeSolo
+            clearOnEscape
           />
           <Autocomplete
             options={actionTypeOptions}
@@ -186,12 +219,12 @@ export function ModActions(props) {
             renderInput={(params) => (
               <TextField
                 {...params}
-                label="Filter by Action Type"
+                label="Action Type"
                 variant="outlined"
                 size="small"
               />
             )}
-            sx={{ minWidth: 250 }}
+            sx={{ width: 290 }}
             clearOnEscape
           />
         </Stack>

react_main/src/pages/Policy/Reports.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useContext } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import axios from "axios";
 import {
+  Autocomplete,
   Box,
   Button,
   Card,
@@ -37,7 +38,13 @@ export default function Reports({ basePath = "/policy" }) {
   const [totalPages, setTotalPages] = useState(1);
   const [statusFilter, setStatusFilter] = useState("");
   const [assigneeFilter, setAssigneeFilter] = useState("");
+  const [assigneeQuery, setAssigneeQuery] = useState("");
+  const [assigneeOptions, setAssigneeOptions] = useState([]);
+  const [assigneeIdMap, setAssigneeIdMap] = useState({});
   const [reportedUserFilter, setReportedUserFilter] = useState("");
+  const [reportedUserQuery, setReportedUserQuery] = useState("");
+  const [reportedUserOptions, setReportedUserOptions] = useState([]);
+  const [reportedUserIdMap, setReportedUserIdMap] = useState({});
   const [selectedReport, setSelectedReport] = useState(null);
   const [showDetail, setShowDetail] = useState(false);
 
@@ -56,6 +63,44 @@ export default function Reports({ basePath = "/policy" }) {
     }
   }, [page, statusFilter, assigneeFilter, reportedUserFilter, reportId]);
 
+  useEffect(() => {
+    if (assigneeQuery.length === 0) {
+      setAssigneeOptions([]);
+      return;
+    }
+
+    axios
+      .get(`/api/user/searchName?query=${assigneeQuery}`)
+      .then((res) => {
+        const newIdMap = {};
+        for (let userData of res.data) {
+          newIdMap[userData.name] = userData.id;
+        }
+        setAssigneeIdMap(newIdMap);
+        setAssigneeOptions(res.data.map((user) => user.name));
+      })
+      .catch(errorAlert);
+  }, [assigneeQuery]);
+
+  useEffect(() => {
+    if (reportedUserQuery.length === 0) {
+      setReportedUserOptions([]);
+      return;
+    }
+
+    axios
+      .get(`/api/user/searchName?query=${reportedUserQuery}`)
+      .then((res) => {
+        const newIdMap = {};
+        for (let userData of res.data) {
+          newIdMap[userData.name] = userData.id;
+        }
+        setReportedUserIdMap(newIdMap);
+        setReportedUserOptions(res.data.map((user) => user.name));
+      })
+      .catch(errorAlert);
+  }, [reportedUserQuery]);
+
   const loadReports = async () => {
     try {
       setLoading(true);
@@ -160,25 +205,47 @@ export default function Reports({ basePath = "/policy" }) {
             </FormControl>
           </Grid>
           <Grid item xs={12} sm={4}>
-            <TextField
-              fullWidth
-              label="Assignee User ID"
-              value={assigneeFilter}
-              onChange={(e) => {
-                setAssigneeFilter(e.target.value);
+            <Autocomplete
+              options={assigneeOptions}
+              inputValue={assigneeQuery}
+              onInputChange={(e, newValue) => {
+                setAssigneeQuery(newValue);
+              }}
+              onChange={(e, newValue) => {
+                setAssigneeFilter(newValue ? assigneeIdMap[newValue] || "" : "");
                 setPage(1);
               }}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  fullWidth
+                  label="Assignee"
+                />
+              )}
+              freeSolo
+              clearOnEscape
             />
           </Grid>
           <Grid item xs={12} sm={4}>
-            <TextField
-              fullWidth
-              label="Reported User ID"
-              value={reportedUserFilter}
-              onChange={(e) => {
-                setReportedUserFilter(e.target.value);
+            <Autocomplete
+              options={reportedUserOptions}
+              inputValue={reportedUserQuery}
+              onInputChange={(e, newValue) => {
+                setReportedUserQuery(newValue);
+              }}
+              onChange={(e, newValue) => {
+                setReportedUserFilter(newValue ? reportedUserIdMap[newValue] || "" : "");
                 setPage(1);
               }}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  fullWidth
+                  label="Reported User"
+                />
+              )}
+              freeSolo
+              clearOnEscape
             />
           </Grid>
         </Grid>