add docker accounts and github accounts to builder config

frontend/src/resources/builder/config.tsx

@@ -14,6 +14,8 @@ 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";
+import { DockerAccounts } from "./config/docker-accounts";
+import { GithubAccounts } from "./config/github-accounts";
 
 const BuilderTypeSelector = ({
   selected,
@@ -123,6 +125,12 @@ const BuilderConfigInner = ({
                   security_group_ids: (ids, set) => (
                     <SecurityGroupIds ids={ids} set={set} />
                   ),
+                  docker_accounts: (accounts, set) => (
+                    <DockerAccounts ids={accounts ?? []} set={set} />
+                  ),
+                  github_accounts: (accounts, set) => (
+                    <GithubAccounts ids={accounts ?? []} set={set} />
+                  ),
                 }}
               />
             )}

frontend/src/resources/builder/config/docker-accounts.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 DockerAccounts = ({
+  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({ docker_accounts: [...ids] });
+              }}
+            />
+            <Button
+              variant="outline"
+              intent="warning"
+              onClick={() =>
+                set({
+                  docker_accounts: [...ids.filter((_, idx) => idx !== i)],
+                })
+              }
+            >
+              <MinusCircle className="w-4 h-4" />
+            </Button>
+          </div>
+        ))}
+
+        <Button
+          variant="outline"
+          intent="success"
+          onClick={() => set({ docker_accounts: [...ids, ""] })}
+        >
+          Add Docker Account
+        </Button>
+      </div>
+    </ConfigItem>
+  );
+};

frontend/src/resources/builder/config/github-accounts.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 GithubAccounts = ({
+  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({ github_accounts: [...ids] });
+              }}
+            />
+            <Button
+              variant="outline"
+              intent="warning"
+              onClick={() =>
+                set({
+                  github_accounts: [...ids.filter((_, idx) => idx !== i)],
+                })
+              }
+            >
+              <MinusCircle className="w-4 h-4" />
+            </Button>
+          </div>
+        ))}
+
+        <Button
+          variant="outline"
+          intent="success"
+          onClick={() => set({ github_accounts: [...ids, ""] })}
+        >
+          Add Github Account
+        </Button>
+      </div>
+    </ConfigItem>
+  );
+};