From 999ce044cb4417fd4c85d741668bba35c607905d Mon Sep 17 00:00:00 2001
From: karamvir <karamvir.singh98@gmail.com>
Date: Sat, 5 Aug 2023 22:45:17 -0700
Subject: [PATCH] add ui for extra args override

---
 frontend/src/resources/build/config.tsx | 137 +++++++++++++++---------
 1 file changed, 86 insertions(+), 51 deletions(-)

diff --git a/frontend/src/resources/build/config.tsx b/frontend/src/resources/build/config.tsx
index a3a91117b..2f87ecfca 100644
--- a/frontend/src/resources/build/config.tsx
+++ b/frontend/src/resources/build/config.tsx
@@ -3,7 +3,8 @@ import { useRead, useWrite } from "@hooks";
 import { Section } from "@layouts/page";
 import { Types } from "@monitor/client";
 import { Button } from "@ui/button";
-import { Settings, Save, History } from "lucide-react";
+import { Input } from "@ui/input";
+import { Settings, Save, History, Trash, PlusCircle } from "lucide-react";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 
@@ -13,54 +14,88 @@ export const BuildConfig = () => {
   const [update, set] = useState<Partial<Types.BuildConfig>>({});
   const { mutate, isLoading } = useWrite("UpdateBuild");
 
-  if (id && build?.config) {
-    return (
-      <Section
-        title="Config"
-        icon={<Settings className="w-4 h-4" />}
-        actions={
-          <div className="flex gap-4">
-            <Button variant="outline" intent="warning" onClick={() => set({})}>
-              <History className="w-4 h-4" />
-            </Button>
-            <Button
-              variant="outline"
-              intent="success"
-              onClick={() => mutate({ config: update, id })}
-            >
-              <Save className="w-4 h-4" />
-            </Button>
-          </div>
-        }
-      >
-        <Configuration
-          config={build.config}
-          loading={isLoading}
-          update={update}
-          set={(input) => set((update) => ({ ...update, ...input }))}
-          layout={{
-            // general: ["version"],
-            repo: ["repo", "branch", "github_account"],
-            docker: [
-              "build_path",
-              "dockerfile_path",
-              "docker_account",
-              "docker_organization",
-              "use_buildx",
-            ],
-            pre_build: ["pre_build"],
-            build_args: ["build_args"],
-            extra_args: ["extra_args"],
-          }}
-          // overrides={{
-          //   pre_build: (val, set) => {},
-          // }}
-        />
-        {/* <Config config={build?.config as any} update={update} set={set} /> */}
-      </Section>
-    );
-  } else {
-    // loading
-    return null;
-  }
+  if (!id || !build) return null;
+
+  return (
+    <Section
+      title="Config"
+      icon={<Settings className="w-4 h-4" />}
+      actions={
+        <div className="flex gap-4">
+          <Button variant="outline" intent="warning" onClick={() => set({})}>
+            <History className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="outline"
+            intent="success"
+            onClick={() => mutate({ config: update, id })}
+          >
+            <Save className="w-4 h-4" />
+          </Button>
+        </div>
+      }
+    >
+      <Configuration
+        config={build.config}
+        loading={isLoading}
+        update={update}
+        set={(input) => set((update) => ({ ...update, ...input }))}
+        layout={{
+          repo: ["repo", "branch", "github_account"],
+          docker: [
+            "build_path",
+            "dockerfile_path",
+            "docker_account",
+            "docker_organization",
+            "use_buildx",
+          ],
+          pre_build: ["pre_build"],
+          build_args: ["build_args"],
+          extra_args: ["extra_args"],
+        }}
+        overrides={{
+          extra_args: (args, set) => (
+            <div className="flex flex-col gap-4">
+              {args?.map((arg, i) => {
+                if (!args) return null;
+                return (
+                  <div className="flex gap-4">
+                    <Input
+                      value={arg}
+                      onChange={(e) => {
+                        if (args) {
+                          args[i] = e.target.value;
+                          set({ extra_args: [...args] });
+                        }
+                      }}
+                    />
+                    <Button
+                      variant="outline"
+                      intent="danger"
+                      onClick={() => {
+                        if (args) {
+                          args = args?.filter((_, ix) => ix !== i);
+                          set({ extra_args: [...args] });
+                        }
+                      }}
+                    >
+                      <Trash className="w-4 h-4" />
+                    </Button>
+                  </div>
+                );
+              })}
+              <Button
+                variant="outline"
+                intent="success"
+                onClick={() => set({ extra_args: [...(args ?? []), ""] })}
+                className="flex items-center gap-2"
+              >
+                Add Arg <PlusCircle className="w-4 h-4" />
+              </Button>
+            </div>
+          ),
+        }}
+      />
+    </Section>
+  );
 };