From 7bb97dadf4ed595259fed94142b57f82d84bf0d7 Mon Sep 17 00:00:00 2001
From: karamvir <karamvir.singh98@gmail.com>
Date: Fri, 11 Aug 2023 01:38:56 -0700
Subject: [PATCH] move config etc

---
 frontend/src/resources/builder/config.tsx     | 136 +++++++++++++++++
 frontend/src/resources/builder/index.tsx      | 139 +-----------------
 .../deployment/{ => components}/config.tsx    |   2 +-
 frontend/src/resources/deployment/index.tsx   |   2 +-
 4 files changed, 141 insertions(+), 138 deletions(-)
 create mode 100644 frontend/src/resources/builder/config.tsx
 rename frontend/src/resources/deployment/{ => components}/config.tsx (99%)

diff --git a/frontend/src/resources/builder/config.tsx b/frontend/src/resources/builder/config.tsx
new file mode 100644
index 000000000..6c5b72cba
--- /dev/null
+++ b/frontend/src/resources/builder/config.tsx
@@ -0,0 +1,136 @@
+import { ConfigAgain } from "@components/config/again";
+import { useWrite, useRead } from "@hooks";
+import { ConfigLayout } from "@layouts/page";
+import { Types } from "@monitor/client";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@ui/select";
+import { Button } from "@ui/button";
+import { Card, CardHeader, CardTitle, CardContent } from "@ui/card";
+import { useState } from "react";
+import { ResourceSelector } from "@components/config/util";
+
+const BuilderTypeSelector = ({
+  selected,
+  onSelect,
+}: {
+  selected: Types.BuilderConfig["type"] | undefined;
+  onSelect: (type: Types.BuilderConfig["type"]) => void;
+}) => (
+  <div className="flex justify-between items-center border-b pb-4">
+    Builder Type
+    <Select value={selected || undefined} onValueChange={onSelect}>
+      <SelectTrigger className="max-w-[150px]">
+        <SelectValue placeholder="Select Type" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value={"Aws"}>Aws</SelectItem>
+        <SelectItem value={"Server"}>Server</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+);
+
+const default_aws_config: Types.AwsBuilderConfig = {
+  ami_id: "",
+  assign_public_ip: false,
+  instance_type: "",
+  key_pair_name: "",
+  region: "",
+  subnet_id: "",
+  volume_gb: 0,
+  security_group_ids: [],
+};
+
+const BuilderConfigInner = ({
+  id,
+  config,
+}: {
+  id: string;
+  config: Types.BuilderConfig;
+}) => {
+  const [update, setUpdate] = useState({ type: config.type, params: {} });
+  const { mutate } = useWrite("UpdateBuilder");
+  return (
+    <ConfigLayout
+      content={update}
+      onConfirm={() => mutate({ id, config: update })}
+      onReset={() => setUpdate({ type: config.type, params: {} })}
+    >
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-4 w-[300px]">
+          <Button>General</Button>
+        </div>
+        <Card className="w-full">
+          <CardHeader className="border-b">
+            <CardTitle>General</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 mt-6">
+            <BuilderTypeSelector
+              selected={update.type}
+              onSelect={(type) =>
+                setUpdate({
+                  type,
+                  params: type === "Aws" ? default_aws_config : { id: "" },
+                })
+              }
+            />
+
+            {/* Server Builder */}
+            {update.type === "Server" && (
+              <ConfigAgain
+                config={config.params as Types.ServerBuilderConfig}
+                update={update.params}
+                set={(u) =>
+                  setUpdate((p) => ({ ...p, params: { ...p.params, ...u } }))
+                }
+                components={{
+                  id: (id, set) => (
+                    <div className="flex justify-between items-center border-b pb-4">
+                      Select Server
+                      <ResourceSelector
+                        type="Server"
+                        selected={id}
+                        onSelect={(id) => set({ id })}
+                      />
+                    </div>
+                  ),
+                }}
+              />
+            )}
+
+            {/* Aws Builder */}
+            {update.type === "Aws" && (
+              <ConfigAgain
+                config={config.params as Types.AwsBuilderConfig}
+                update={update.params}
+                set={(u) =>
+                  setUpdate((p) => ({ ...p, params: { ...p.params, ...u } }))
+                }
+                components={{
+                  region: true,
+                  instance_type: true,
+                  volume_gb: true,
+                  ami_id: true,
+                  subnet_id: true,
+                  key_pair_name: true,
+                  assign_public_ip: true,
+                }}
+              />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </ConfigLayout>
+  );
+};
+
+export const BuilderConfig = ({ id }: { id: string }) => {
+  const config = useRead("GetBuilder", { id }).data?.config;
+  if (!config) return null;
+  return <BuilderConfigInner id={id} config={config} />;
+};
diff --git a/frontend/src/resources/builder/index.tsx b/frontend/src/resources/builder/index.tsx
index 1fe6682d2..da867eb1f 100644
--- a/frontend/src/resources/builder/index.tsx
+++ b/frontend/src/resources/builder/index.tsx
@@ -1,23 +1,10 @@
 import { ResourceCard } from "@layouts/card";
 import { Bot, Cloud, Factory } from "lucide-react";
 import { ResourceUpdates } from "@components/updates/resource";
-import { useAddRecentlyViewed, useRead, useWrite } from "@hooks";
+import { useAddRecentlyViewed, useRead } from "@hooks";
 import { Resource } from "@layouts/resource";
 import { Link, useParams } from "react-router-dom";
-import { Types } from "@monitor/client";
-import { useState } from "react";
-import { ConfigLayout } from "@layouts/page";
-import { ConfigAgain } from "@components/config/again";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@ui/select";
-import { ServersSelector } from "@resources/deployment/config";
-import { Card, CardContent, CardHeader, CardTitle } from "@ui/card";
-import { Button } from "@ui/button";
+import { BuilderConfig } from "./config";
 
 export const BuilderName = ({ id }: { id: string }) => {
   const builders = useRead("ListBuilders", {}).data;
@@ -51,126 +38,6 @@ export const BuilderCard = ({ id }: { id: string }) => {
   );
 };
 
-const BuilderTypeSelector = ({
-  selected,
-  onSelect,
-}: {
-  selected: Types.BuilderConfig["type"] | undefined;
-  onSelect: (type: Types.BuilderConfig["type"]) => void;
-}) => (
-  <div className="flex justify-between items-center border-b pb-4">
-    Builder Type
-    <Select value={selected || undefined} onValueChange={onSelect}>
-      <SelectTrigger className="max-w-[150px]">
-        <SelectValue placeholder="Select Type" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value={"Aws"}>Aws</SelectItem>
-        <SelectItem value={"Server"}>Server</SelectItem>
-      </SelectContent>
-    </Select>
-  </div>
-);
-
-const default_aws_config: Types.AwsBuilderConfig = {
-  ami_id: "",
-  assign_public_ip: false,
-  instance_type: "",
-  key_pair_name: "",
-  region: "",
-  subnet_id: "",
-  volume_gb: 0,
-  security_group_ids: [],
-};
-
-const BuilderConfig = ({
-  id,
-  config,
-}: {
-  id: string;
-  config: Types.BuilderConfig;
-}) => {
-  const [update, setUpdate] = useState({ type: config.type, params: {} });
-  const { mutate } = useWrite("UpdateBuilder");
-  return (
-    <ConfigLayout
-      content={update}
-      onConfirm={() => mutate({ id, config: update })}
-      onReset={() => setUpdate({ type: config.type, params: {} })}
-    >
-      <div className="flex gap-4">
-        <div className="flex flex-col gap-4 w-[300px]">
-          <Button>General</Button>
-        </div>
-        <Card className="w-full">
-          <CardHeader className="border-b">
-            <CardTitle>General</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-col gap-4 mt-6">
-            <BuilderTypeSelector
-              selected={update.type}
-              onSelect={(type) =>
-                setUpdate({
-                  type,
-                  params: type === "Aws" ? default_aws_config : { id: "" },
-                })
-              }
-            />
-
-            {/* Server Builder */}
-            {update.type === "Server" && (
-              <ConfigAgain
-                config={config.params as Types.ServerBuilderConfig}
-                update={update.params}
-                set={(u) =>
-                  setUpdate((p) => ({ ...p, params: { ...p.params, ...u } }))
-                }
-                components={{
-                  id: (id, set) => (
-                    <div className="flex justify-between items-center border-b pb-4">
-                      Select Server
-                      <ServersSelector
-                        selected={id}
-                        onSelect={(id) => set({ id })}
-                      />
-                    </div>
-                  ),
-                }}
-              />
-            )}
-
-            {/* Aws Builder */}
-            {update.type === "Aws" && (
-              <ConfigAgain
-                config={config.params as Types.AwsBuilderConfig}
-                update={update.params}
-                set={(u) =>
-                  setUpdate((p) => ({ ...p, params: { ...p.params, ...u } }))
-                }
-                components={{
-                  region: true,
-                  instance_type: true,
-                  volume_gb: true,
-                  ami_id: true,
-                  subnet_id: true,
-                  key_pair_name: true,
-                  assign_public_ip: true,
-                }}
-              />
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </ConfigLayout>
-  );
-};
-
-const BCWrapper = ({ id }: { id: string }) => {
-  const config = useRead("GetBuilder", { id }).data?.config;
-  if (!config) return null;
-  return <BuilderConfig id={id} config={config} />;
-};
-
 export const BuilderPage = () => {
   const id = useParams().builderId;
 
@@ -180,7 +47,7 @@ export const BuilderPage = () => {
   return (
     <Resource title={<BuilderName id={id} />} info={<></>} actions={<></>}>
       <ResourceUpdates type="Builder" id={id} />
-      <BCWrapper id={id} />
+      <BuilderConfig id={id} />
     </Resource>
   );
 };
diff --git a/frontend/src/resources/deployment/config.tsx b/frontend/src/resources/deployment/components/config.tsx
similarity index 99%
rename from frontend/src/resources/deployment/config.tsx
rename to frontend/src/resources/deployment/components/config.tsx
index e89bca8a6..ad8b5ee34 100644
--- a/frontend/src/resources/deployment/config.tsx
+++ b/frontend/src/resources/deployment/components/config.tsx
@@ -20,7 +20,7 @@ import {
   DeploymentStatusIcon,
   DeploymentServer,
   DeploymentBuild,
-} from "./util";
+} from "../util";
 import { DoubleInput, ResourceSelector } from "@components/config/util";
 
 const ImageTypeSelector = ({
diff --git a/frontend/src/resources/deployment/index.tsx b/frontend/src/resources/deployment/index.tsx
index 34d6e72a5..fe176aa7b 100644
--- a/frontend/src/resources/deployment/index.tsx
+++ b/frontend/src/resources/deployment/index.tsx
@@ -16,7 +16,7 @@ import {
 } from "@resources/deployment/util";
 import { CardDescription } from "@ui/card";
 import { useParams } from "react-router-dom";
-import { DeploymentConfig } from "./config";
+import { DeploymentConfig } from "./components/config";
 
 export const DeploymentPage = () => {
   const id = useParams().deploymentId;