add security group ids

frontend/src/components/config/util.tsx

@@ -14,6 +14,7 @@ import { Switch } from "@ui/switch";
 import { MinusCircle, PlusCircle } from "lucide-react";
 import { ReactNode } from "react";
 import { cn } from "@util/helpers";
+import { Resource } from "@monitor/client/dist/types";
 
 export const ConfigItem = ({
   label,

frontend/src/resources/builder/config.tsx

@@ -13,6 +13,7 @@ import { Button } from "@ui/button";
 import { Card, CardHeader, CardTitle, CardContent } from "@ui/card";
 import { useState } from "react";
 import { ResourceSelector } from "@components/config/util";
+import { SecurityGroupIds } from "./config/security-group-ids";
 
 const BuilderTypeSelector = ({
   selected,
@@ -119,6 +120,9 @@ const BuilderConfigInner = ({
                   subnet_id: true,
                   key_pair_name: true,
                   assign_public_ip: true,
+                  security_group_ids: (ids, set) => (
+                    <SecurityGroupIds ids={ids} set={set} />
+                  ),
                 }}
               />
             )}

frontend/src/resources/builder/config/security-group-ids.tsx

@@ -0,0 +1,51 @@
+import { ConfigItem } from "@components/config/util";
+import { Types } from "@monitor/client";
+import { Button } from "@ui/button";
+import { Input } from "@ui/input";
+import { MinusCircle } from "lucide-react";
+
+export const SecurityGroupIds = ({
+  ids,
+  set,
+}: {
+  ids: string[];
+  set: (update: Partial<Types.AwsBuilderConfig>) => void;
+}) => {
+  return (
+    <ConfigItem label="Security Group Ids" className="items-start">
+      <div className="flex flex-col gap-4 w-full max-w-[400px]">
+        {ids.map((arg, i) => (
+          <div className="w-full flex gap-4" key={i}>
+            <Input
+              // placeholder="--extra-arg=value"
+              value={arg}
+              onChange={(e) => {
+                ids[i] = e.target.value;
+                set({ security_group_ids: [...ids] });
+              }}
+            />
+            <Button
+              variant="outline"
+              intent="warning"
+              onClick={() =>
+                set({
+                  security_group_ids: [...ids.filter((_, idx) => idx !== i)],
+                })
+              }
+            >
+              <MinusCircle className="w-4 h-4" />
+            </Button>
+          </div>
+        ))}
+
+        <Button
+          variant="outline"
+          intent="success"
+          onClick={() => set({ security_group_ids: [...ids, ""] })}
+        >
+          Add Security Group
+        </Button>
+      </div>
+    </ConfigItem>
+  );
+};

frontend/src/resources/deployment/config/components/extra-args.tsx

@@ -1,3 +1,4 @@
+import { ConfigItem } from "@components/config/util";
 import { DeploymentConfig } from "@monitor/client/dist/types";
 import { Button } from "@ui/button";
 import { Input } from "@ui/input";
@@ -11,36 +12,38 @@ export const ExtraArgs = ({
   set: (update: Partial<DeploymentConfig>) => void;
 }) => {
   return (
-    <div className="flex flex-col gap-4 border-b pb-4">
-      {args.map((arg, i) => (
-        <div className="flex items-center justify-between gap-4" key={i}>
-          <Input
-            value={arg}
-            placeholder="--extra-arg=value"
-            onChange={(e) => {
-              args[i] = e.target.value;
-              set({ extra_args: [...args] });
-            }}
-          />
-          <Button
-            variant="outline"
-            intent="warning"
-            onClick={() =>
-              set({ extra_args: [...args.filter((_, idx) => idx !== i)] })
-            }
-          >
-            <MinusCircle className="w-4 h-4" />
-          </Button>
-        </div>
-      ))}
+    <ConfigItem label="Extra Args" className="items-start">
+      <div className="flex flex-col gap-4 w-full max-w-[400px]">
+        {args.map((arg, i) => (
+          <div className="w-full flex gap-4" key={i}>
+            <Input
+              value={arg}
+              placeholder="--extra-arg=value"
+              onChange={(e) => {
+                args[i] = e.target.value;
+                set({ extra_args: [...args] });
+              }}
+            />
+            <Button
+              variant="outline"
+              intent="warning"
+              onClick={() =>
+                set({ extra_args: [...args.filter((_, idx) => idx !== i)] })
+              }
+            >
+              <MinusCircle className="w-4 h-4" />
+            </Button>
+          </div>
+        ))}
 
-      <Button
-        variant="outline"
-        intent="success"
-        onClick={() => set({ extra_args: [...args, ""] })}
-      >
-        Add Extra Arg
-      </Button>
-    </div>
+        <Button
+          variant="outline"
+          intent="success"
+          onClick={() => set({ extra_args: [...args, ""] })}
+        >
+          Add Extra Arg
+        </Button>
+      </div>
+    </ConfigItem>
   );
 };