build extra arg suggestions

frontend/src/components/config/util.tsx

@@ -11,7 +11,13 @@ import {
 import { Button } from "@ui/button";
 import { Input } from "@ui/input";
 import { Switch } from "@ui/switch";
-import { CheckCircle, MinusCircle, Save } from "lucide-react";
+import {
+  CheckCircle,
+  MinusCircle,
+  PlusCircle,
+  Save,
+  SearchX,
+} from "lucide-react";
 import { ReactNode, useState } from "react";
 import { cn } from "@lib/utils";
 import {
@@ -24,6 +30,15 @@ import {
 } from "@ui/dialog";
 import { snake_case_to_upper_space_case } from "@lib/formatting";
 import { ConfirmButton, TextUpdateMenu } from "@components/util";
+import { Popover, PopoverContent, PopoverTrigger } from "@ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@ui/command";
 
 export const ConfigItem = ({
   label,
@@ -344,3 +359,68 @@ export const SystemCommand = ({
     </div>
   );
 };
+
+export const AddExtraArgMenu = ({
+  onSelect,
+  type,
+}: {
+  onSelect: (suggestion: string) => void;
+  type: "Deployment" | "Build";
+}) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const suggestions = useRead(`ListCommon${type}ExtraArgs`, {}).data;
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="secondary"
+          className="flex items-center gap-2 w-[200px]"
+        >
+          <PlusCircle className="w-4 h-4" /> Add Extra Arg
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] max-h-[400px] p-0" align="end">
+        <Command>
+          <CommandInput
+            placeholder="Search suggestions"
+            className="h-9"
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandList>
+            <CommandEmpty className="flex justify-evenly items-center">
+              No Suggestions Found
+              <SearchX className="w-3 h-3" />
+            </CommandEmpty>
+
+            <CommandGroup>
+              <CommandItem
+                onSelect={() => {
+                  onSelect("");
+                  setOpen(false);
+                }}
+                className="w-full cursor-pointer"
+              >
+                Empty Extra Arg
+              </CommandItem>
+
+              {suggestions?.map((suggestion) => (
+                <CommandItem
+                  key={suggestion}
+                  onSelect={() => {
+                    onSelect(suggestion);
+                    setOpen(false);
+                  }}
+                  className="w-full overflow-hidden overflow-ellipsis cursor-pointer"
+                >
+                  {suggestion}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};