finish build config

Cargo.lock

@@ -2679,9 +2679,9 @@ dependencies = [
 
 [[package]]
 name = "resolver_api"
-version = "0.1.6"
+version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d5e2d7561b561784a2dd7b18f98dbf7e5617f540f97cea6db3e118d57d7237d7"
+checksum = "684baae9c42f4211b0b50bd2cde688c3c8681e6a1cb0f081bf82728c27ee017d"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -2692,9 +2692,9 @@ dependencies = [
 
 [[package]]
 name = "resolver_api_derive"
-version = "0.1.6"
+version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6e1f7c7d2230fd8ab03239e20f32f99d85c8a1273bb159e1368cbda9fc2ff2ac"
+checksum = "262ba3c249c4af73f901ca50707a9bc9b63465111310be6253e2179ef86f5df8"
 dependencies = [
  "proc-macro2",
  "quote",

Cargo.toml

@@ -26,7 +26,7 @@ termination_signal = "0.1.3"
 async_timing_util = "0.1.14"
 partial_derive2 = "0.2.2"
 derive_variants = "0.1.3"
-resolver_api = "0.1.6"
+resolver_api = "0.1.7"
 parse_csl = "0.1.0"
 mungos = "0.5.4"
 mongo_indexed = "0.2.2"

frontend/src/components/resources/build/config.tsx

@@ -7,12 +7,22 @@ import {
 import { useRead, useWrite } from "@lib/hooks";
 import { env_to_text, text_to_env } from "@lib/utils";
 import { Types } from "@monitor/client";
+import { Button } from "@ui/button";
+import { Input } from "@ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ui/select";
 import { Textarea } from "@ui/textarea";
+import { MinusCircle, PlusCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 
 export const BuildConfig = ({ id }: { id: string }) => {
   const config = useRead("GetBuild", { build: id }).data?.config;
-  // const orgs = useRead("GetAccounts")
+  const docker_organizations = useRead("ListDockerOrganizations", {}).data;
   const [update, set] = useState<Partial<Types.BuildConfig>>({});
   const { mutate } = useWrite("UpdateBuild");
 
@@ -63,8 +73,19 @@ export const BuildConfig = ({ id }: { id: string }) => {
                 onSelect={(docker_account) => set({ docker_account })}
               />
             ),
+            docker_organization:
+              docker_organizations === undefined ||
+              docker_organizations.length === 0
+                ? undefined
+                : (value, set) => <DockerOrganizations value={value} set={set} />,
             use_buildx: true,
             // docker_organization,
+            extra_args: (value, set) => (
+              <ExtraArgs args={value ?? []} set={set} />
+            ),
+          },
+          pre_build: {
+            pre_build: (value, set) => <PreBuild value={value} set={set} />,
           },
         },
         "Build Args": {
@@ -103,3 +124,115 @@ const BuildArgs = ({
     </ConfigItem>
   );
 };
+
+const ExtraArgs = ({
+  args,
+  set,
+}: {
+  args: string[];
+  set: (update: Partial<Types.BuildConfig>) => void;
+}) => {
+  return (
+    <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"
+              onClick={() =>
+                set({ extra_args: [...args.filter((_, idx) => idx !== i)] })
+              }
+            >
+              <MinusCircle className="w-4 h-4" />
+            </Button>
+          </div>
+        ))}
+
+        <Button
+          variant="outline"
+          className="flex items-center gap-2 w-[200px] place-self-end"
+          onClick={() => set({ extra_args: [...args, ""] })}
+        >
+          <PlusCircle className="w-4 h-4" /> Add Extra Arg
+        </Button>
+      </div>
+    </ConfigItem>
+  );
+};
+
+const PreBuild = ({
+  value,
+  set,
+}: {
+  value?: Types.SystemCommand;
+  set: (input: Partial<Types.BuildConfig>) => void;
+}) => {
+  return (
+    <ConfigItem label="Pre Build" className="items-start">
+      <div className="grid gap-2">
+        <div className="flex gap-4 items-center justify-end">
+          Path:
+          <Input
+            placeholder="command working directory"
+            value={value?.path}
+            className="w-[300px]"
+            onChange={(e) =>
+              set({ pre_build: { ...(value || {}), path: e.target.value } })
+            }
+          />
+        </div>
+        <div className="flex gap-4 items-center justify-end">
+          Command:
+          <Input
+            placeholder="shell command"
+            value={value?.command}
+            className="w-[300px]"
+            onChange={(e) =>
+              set({ pre_build: { ...(value || {}), command: e.target.value } })
+            }
+          />
+        </div>
+      </div>
+    </ConfigItem>
+  );
+};
+
+const DockerOrganizations = ({
+  value,
+  set,
+}: {
+  value?: string;
+  set: (input: Partial<Types.BuildConfig>) => void;
+}) => {
+  const docker_organizations = useRead("ListDockerOrganizations", {}).data;
+  return (
+    <ConfigItem label="Docker Organization">
+      <Select
+        value={value}
+        onValueChange={(value) => set({ docker_organization: value })}
+      >
+        <SelectTrigger
+          className="w-full lg:w-[300px] max-w-[50%]"
+        >
+          <SelectValue placeholder="Select Organization" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={""}>None</SelectItem>
+          {docker_organizations?.map((org) => (
+            <SelectItem key={org} value={org}>
+              {org}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </ConfigItem>
+  );
+};