DEVMENU: Use Autocomplete instead of Select in more tools (#1631)

src/DevMenu/ui/AugmentationsDev.tsx

@@ -71,7 +71,7 @@ export function AugmentationsDev(): React.ReactElement {
             </IconButton>
           </Tooltip>
           <Autocomplete
-            style={{ width: "400px" }}
+            style={{ width: "500px" }}
             options={options}
             value={augmentation}
             renderInput={(params) => <TextField {...params} style={{ height: "100%" }} />}

src/DevMenu/ui/CompaniesDev.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
@@ -6,13 +6,13 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import Select, { SelectChangeEvent } from "@mui/material/Select";
-import MenuItem from "@mui/material/MenuItem";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
 
 import { CompanyName } from "@enums";
 import { Companies } from "../../Company/Companies";
 import { Adjuster } from "./Adjuster";
-import { isMember } from "../../utils/EnumHelper";
+import { getEnumHelper } from "../../utils/EnumHelper";
 import { getRecordValues } from "../../Types/Record";
 import { MaxFavor } from "../../Faction/formulas/favor";
 
@@ -20,10 +20,10 @@ const largeAmountOfReputation = 1e12;
 
 export function CompaniesDev(): React.ReactElement {
   const [companyName, setCompanyName] = useState(CompanyName.ECorp);
-  function setCompanyDropdown(event: SelectChangeEvent): void {
-    if (!isMember("CompanyName", event.target.value)) return;
-    setCompanyName(event.target.value);
-  }
+  const companies = useMemo<CompanyName[]>(() => {
+    return getRecordValues(Companies).map((company) => company.name);
+  }, []);
+
   function resetCompanyRep(): void {
     Companies[companyName].playerReputation = 0;
   }
@@ -87,13 +87,18 @@ export function CompaniesDev(): React.ReactElement {
                 <Typography>Company:</Typography>
               </td>
               <td colSpan={3}>
-                <Select id="dev-companies-dropdown" onChange={setCompanyDropdown} value={companyName}>
-                  {Object.values(Companies).map((company) => (
-                    <MenuItem key={company.name} value={company.name}>
-                      {company.name}
-                    </MenuItem>
-                  ))}
-                </Select>
+                <Autocomplete
+                  style={{ width: "350px" }}
+                  options={companies}
+                  value={companyName}
+                  renderInput={(params) => <TextField {...params} />}
+                  onChange={(_, companyName) => {
+                    if (!companyName || !getEnumHelper("CompanyName").isMember(companyName)) {
+                      return;
+                    }
+                    setCompanyName(companyName);
+                  }}
+                ></Autocomplete>
               </td>
             </tr>
             <tr>

src/DevMenu/ui/FactionsDev.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import {
   Accordion,
   AccordionSummary,
@@ -6,14 +6,12 @@ import {
   Button,
   FormControl,
   FormControlLabel,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
   Typography,
   RadioGroup,
   Radio,
+  Box,
+  Autocomplete,
+  TextField,
 } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -35,13 +33,11 @@ const largeAmountOfReputation = 1e12;
 
 export function FactionsDev(): React.ReactElement {
   const [selectedFaction, setSelectedFaction] = useState(Factions[FactionName.Illuminati]);
+  const factions = useMemo(() => {
+    return getRecordValues(Factions).map((faction) => faction.name);
+  }, []);
   const rerender = useRerender();
 
-  function setFactionDropdown(event: SelectChangeEvent): void {
-    if (!getEnumHelper("FactionName").isMember(event.target.value)) return;
-    setSelectedFaction(Factions[event.target.value]);
-  }
-
   function receiveInvite(): void {
     Player.receiveInvite(selectedFaction.name);
     selectedFaction.alreadyInvited = true;
@@ -139,35 +135,30 @@ export function FactionsDev(): React.ReactElement {
                 <Typography>Faction:</Typography>
               </td>
               <td>
-                <FormControl>
-                  <InputLabel id="factions-select">Faction</InputLabel>
-                  <Select
-                    labelId="factions-select"
-                    id="factions-dropdown"
-                    onChange={setFactionDropdown}
+                <Box display="flex">
+                  <Tooltip title={`Hear rumor about ${selectedFaction.name}`}>
+                    <Button onClick={receiveRumor} size="large">
+                      <ChatIcon />
+                    </Button>
+                  </Tooltip>
+                  <Tooltip title={`Receive invitation to ${selectedFaction.name}`}>
+                    <Button onClick={receiveInvite} size="large">
+                      <ReplyIcon />
+                    </Button>
+                  </Tooltip>
+                  <Autocomplete
+                    style={{ marginLeft: "8px", width: "350px" }}
+                    options={factions}
                     value={selectedFaction.name}
-                    startAdornment={
-                      <>
-                        <Tooltip title={`Hear rumor about ${selectedFaction.name}`}>
-                          <IconButton onClick={receiveRumor} size="large">
-                            <ChatIcon />
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip title={`Receive invitation to ${selectedFaction.name}`}>
-                          <IconButton onClick={receiveInvite} size="large">
-                            <ReplyIcon />
-                          </IconButton>
-                        </Tooltip>
-                      </>
-                    }
-                  >
-                    {getRecordValues(Factions).map((faction) => (
-                      <MenuItem key={faction.name} value={faction.name}>
-                        {faction.name}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
+                    renderInput={(params) => <TextField {...params} style={{ height: "100%" }} />}
+                    onChange={(_, factionName) => {
+                      if (!factionName || !getEnumHelper("FactionName").isMember(factionName)) {
+                        return;
+                      }
+                      setSelectedFaction(Factions[factionName]);
+                    }}
+                  ></Autocomplete>
+                </Box>
               </td>
             </tr>
             <tr>

src/DevMenu/ui/ServersDev.tsx

@@ -7,16 +7,15 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { GetServer, GetAllServers } from "../../Server/AllServers";
 import { Server } from "../../Server/Server";
-import MenuItem from "@mui/material/MenuItem";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
 
 export function ServersDev(): React.ReactElement {
-  const [server, setServer] = useState("home");
-  function setServerDropdown(event: SelectChangeEvent): void {
-    setServer(event.target.value);
-  }
+  const [server, setServer] = useState<string>("home");
+  const servers = GetAllServers().map((server) => server.hostname);
+
   function rootServer(): void {
     const s = GetServer(server);
     if (s === null) return;
@@ -112,13 +111,18 @@ export function ServersDev(): React.ReactElement {
                 <Typography>Server:</Typography>
               </td>
               <td colSpan={2}>
-                <Select id="dev-servers-dropdown" onChange={setServerDropdown} value={server}>
-                  {GetAllServers().map((server) => (
-                    <MenuItem key={server.hostname} value={server.hostname}>
-                      {server.hostname}
-                    </MenuItem>
-                  ))}
-                </Select>
+                <Autocomplete
+                  style={{ width: "250px" }}
+                  options={servers}
+                  value={server}
+                  renderInput={(params) => <TextField {...params} />}
+                  onChange={(_, server) => {
+                    if (!server || GetServer(server) === null) {
+                      return;
+                    }
+                    setServer(server);
+                  }}
+                ></Autocomplete>
               </td>
             </tr>
             <tr>