cleanup build config

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

@@ -0,0 +1,112 @@
+import { ConfigAgain } from "@components/config/again";
+import { ResourceSelector } from "@components/config/util";
+import { useWrite, useRead } from "@hooks";
+import { ConfigLayout } from "@layouts/page";
+import { Types } from "@monitor/client";
+import { Button } from "@ui/button";
+import { Card, CardHeader, CardTitle, CardContent } from "@ui/card";
+import { useState } from "react";
+
+const BuildConfigInner = ({
+  id,
+  config,
+}: {
+  id: string;
+  config: Types.BuildConfig;
+}) => {
+  const [update, set] = useState<Partial<Types.BuildConfig>>({});
+  const [show, setShow] = useState("general");
+  const { mutate } = useWrite("UpdateBuild");
+
+  return (
+    <ConfigLayout
+      content={update}
+      onConfirm={() => mutate({ id, config: update })}
+      onReset={() => set({})}
+    >
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-4 w-[300px]">
+          {["general", "repo", "docker", "volumes"].map((item) => (
+            <Button
+              variant={show === item ? "secondary" : "outline"}
+              onClick={() => setShow(item)}
+              className="capitalize"
+            >
+              {item}
+            </Button>
+          ))}
+        </div>
+        <Card className="w-full">
+          <CardHeader className="border-b">
+            <CardTitle className="capitalize">{show}</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 mt-4">
+            {/* General Config */}
+            {show === "general" && (
+              <ConfigAgain
+                config={config}
+                update={update}
+                set={(u) => set((p) => ({ ...p, ...u }))}
+                components={{
+                  builder_id: (id, set) => (
+                    <ResourceSelector
+                      type="Builder"
+                      selected={id}
+                      onSelect={(builder_id) => set({ builder_id })}
+                    />
+                  ),
+                }}
+              />
+            )}
+
+            {/* Networking Config */}
+            {show === "repo" && (
+              <ConfigAgain
+                config={config}
+                update={update}
+                set={(u) => set((p) => ({ ...p, ...u }))}
+                components={{ repo: true, branch: true, github_account: true }}
+              />
+            )}
+
+            {/* Environment Config */}
+            {show === "docker" && (
+              <ConfigAgain
+                config={config}
+                update={update}
+                set={(u) => set((p) => ({ ...p, ...u }))}
+                components={{
+                  build_path: true,
+                  dockerfile_path: true,
+                  docker_account: true,
+                  // docker_organization,
+                  use_buildx: true,
+                }}
+              />
+            )}
+
+            {/* Environment Config
+            {show === "volumes" && (
+              <ConfigAgain
+                config={config}
+                update={update}
+                set={(u) => set((p) => ({ ...p, ...u }))}
+                components={{
+                  volumes: (value, set) => (
+                    <PortsConfig ports={value} set={set} />
+                  ),
+                }}
+              />
+            )} */}
+          </CardContent>
+        </Card>
+      </div>
+    </ConfigLayout>
+  );
+};
+
+export const BuildConfig = ({ id }: { id: string }) => {
+  const config = useRead("GetBuild", { id }).data?.config;
+  if (!config) return null;
+  return <BuildConfigInner id={id} config={config} />;
+};

frontend/src/resources/build/config.tsx

@@ -1,188 +0,0 @@
-import { useRead } from "@hooks";
-import { Types } from "@monitor/client";
-// import { ServersSelector } from "@resources/deployment/config";
-import { Button } from "@ui/button";
-import { Input } from "@ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@ui/select";
-import { Trash, PlusCircle } from "lucide-react";
-
-const ExtraArgs = ({
-  args,
-  set,
-}: {
-  args: string[] | undefined;
-  set: (input: Partial<Types.BuildConfig>) => void;
-}) => (
-  <div className="flex flex-col gap-4">
-    {args?.map((arg, i) => (
-      <div className="flex gap-4" key={i}>
-        <Input
-          value={arg}
-          onChange={(e) => {
-            if (!args) return;
-            args[i] = e.target.value;
-            set({ extra_args: [...args] });
-          }}
-        />
-        <Button
-          variant="outline"
-          intent="danger"
-          onClick={() => {
-            if (!args) return;
-            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>
-);
-
-const EnvVars = ({
-  vars,
-  set,
-}: {
-  vars: Types.EnvironmentVar[] | undefined;
-  set: (input: Partial<Types.BuildConfig>) => void;
-}) => (
-  <div className="flex flex-col gap-4 border-b pb-4">
-    {vars?.map((variable, i) => (
-      <div className="flex justify-between gap-4">
-        <Input
-          value={variable.variable}
-          placeholder="Variable Name"
-          onChange={(e) => {
-            vars[i].variable = e.target.value;
-            set({ build_args: [...vars] });
-          }}
-        />
-        =
-        <Input
-          value={variable.value}
-          placeholder="Variable Value"
-          onChange={(e) => {
-            vars[i].value = e.target.value;
-            set({ build_args: [...vars] });
-          }}
-        />
-      </div>
-    ))}
-    <Button
-      variant="outline"
-      intent="success"
-      className="flex items-center gap-2"
-      onClick={() =>
-        set({
-          build_args: [...(vars ?? []), { variable: "", value: "" }],
-        })
-      }
-    >
-      <PlusCircle className="w-4 h-4" />
-      Add
-    </Button>
-  </div>
-);
-
-export const BuilderSelector = ({
-  selected,
-  onSelect,
-}: {
-  selected: string | undefined;
-  onSelect: (serverId: string) => void;
-}) => {
-  const builders = useRead("ListBuilders", {}).data;
-  return (
-    <div className="flex justify-between items-center border-b pb-4">
-      Builder
-      <Select value={selected || undefined} onValueChange={onSelect}>
-        <SelectTrigger className="w-full lg:w-[300px]">
-          <SelectValue placeholder="Select A Server" />
-        </SelectTrigger>
-        <SelectContent>
-          {builders?.map((b) => (
-            <SelectItem key={b.id} value={b.id}>
-              {b.name}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-};
-
-// export const BuildConfig = () => {
-//   const id = useParams().buildId;
-//   const build = useRead("GetBuild", { id }).data;
-//   const [update, set] = useState<Partial<Types.BuildConfig>>({});
-//   const { mutate, isLoading } = useWrite("UpdateBuild");
-
-//   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={{
-//           general: ["builder_id"],
-//           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={{
-//           build_args: (args, set) => <EnvVars vars={args} set={set} />,
-//           extra_args: (args, set) => <ExtraArgs args={args} set={set} />,
-//           builder_id: (id, set) => (
-//             <BuilderSelector
-//               selected={id}
-//               onSelect={(builder_id) => set({ builder_id })}
-//             />
-//           ),
-//         }}
-//       />
-//     </Section>
-//   );
-// };

frontend/src/resources/build/index.tsx

@@ -1,4 +1,4 @@
-import { useAddRecentlyViewed, useWrite } from "@hooks";
+import { useAddRecentlyViewed } from "@hooks";
 import { Resource } from "@layouts/resource";
 import { BuildName, BuildVersion } from "./util";
 import { Link, useParams } from "react-router-dom";
@@ -9,13 +9,7 @@ import { BuildInfo } from "./util";
 import { Hammer } from "lucide-react";
 import { ResourceCard } from "@layouts/card";
 import { ResourceUpdates } from "@components/updates/resource";
-import { Types } from "@monitor/client";
-import { useState } from "react";
-import { ConfigLayout } from "@layouts/page";
-import { Button } from "@ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@ui/card";
-import { ConfigAgain } from "@components/config/again";
-import { BuilderSelector } from "./config";
+import { BuildConfig } from "./components/config";
 
 export const BuildCard = ({ id }: { id: string }) => {
   const builds = useRead("ListBuilds", {}).data;
@@ -35,109 +29,6 @@ export const BuildCard = ({ id }: { id: string }) => {
   );
 };
 
-const BuildConfigInner = ({
-  id,
-  config,
-}: {
-  id: string;
-  config: Types.BuildConfig;
-}) => {
-  const [update, set] = useState<Partial<Types.BuildConfig>>({});
-  const [show, setShow] = useState("general");
-  const { mutate } = useWrite("UpdateBuild");
-
-  return (
-    <ConfigLayout
-      content={update}
-      onConfirm={() => mutate({ id, config: update })}
-      onReset={() => set({})}
-    >
-      <div className="flex gap-4">
-        <div className="flex flex-col gap-4 w-[300px]">
-          {["general", "repo", "docker", "volumes"].map((item) => (
-            <Button
-              variant={show === item ? "secondary" : "outline"}
-              onClick={() => setShow(item)}
-              className="capitalize"
-            >
-              {item}
-            </Button>
-          ))}
-        </div>
-        <Card className="w-full">
-          <CardHeader className="border-b">
-            <CardTitle className="capitalize">{show}</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-col gap-4 mt-4">
-            {/* General Config */}
-            {show === "general" && (
-              <ConfigAgain
-                config={config}
-                update={update}
-                set={(u) => set((p) => ({ ...p, ...u }))}
-                components={{
-                  builder_id: (id, set) => (
-                    <BuilderSelector
-                      selected={id}
-                      onSelect={(builder_id) => set({ builder_id })}
-                    />
-                  ),
-                }}
-              />
-            )}
-
-            {/* Networking Config */}
-            {show === "repo" && (
-              <ConfigAgain
-                config={config}
-                update={update}
-                set={(u) => set((p) => ({ ...p, ...u }))}
-                components={{ repo: true, branch: true, github_account: true }}
-              />
-            )}
-
-            {/* Environment Config */}
-            {show === "docker" && (
-              <ConfigAgain
-                config={config}
-                update={update}
-                set={(u) => set((p) => ({ ...p, ...u }))}
-                components={{
-                  build_path: true,
-                  dockerfile_path: true,
-                  docker_account: true,
-                  // docker_organization,
-                  use_buildx: true,
-                }}
-              />
-            )}
-
-            {/* Environment Config
-            {show === "volumes" && (
-              <ConfigAgain
-                config={config}
-                update={update}
-                set={(u) => set((p) => ({ ...p, ...u }))}
-                components={{
-                  volumes: (value, set) => (
-                    <PortsConfig ports={value} set={set} />
-                  ),
-                }}
-              />
-            )} */}
-          </CardContent>
-        </Card>
-      </div>
-    </ConfigLayout>
-  );
-};
-
-const BuildConifig = ({ id }: { id: string }) => {
-  const config = useRead("GetBuild", { id }).data?.config;
-  if (!config) return null;
-  return <BuildConfigInner id={id} config={config} />;
-};
-
 export const BuildPage = () => {
   const id = useParams().buildId;
   if (!id) return null;
@@ -154,7 +45,7 @@ export const BuildPage = () => {
       actions={<RebuildBuild buildId={id} />}
     >
       <ResourceUpdates type="Build" id={id} />
-      <BuildConifig id={id} />
+      <BuildConfig id={id} />
     </Resource>
   );
 };