From 315be1b61dcb7aa2df4ffc94fcf74570090f94df Mon Sep 17 00:00:00 2001
From: karamvir <karamvir.singh98@gmail.com>
Date: Thu, 3 Aug 2023 15:58:42 -0700
Subject: [PATCH] update config pages

---
 .../dashboard/components/create-resource.tsx  |  3 +-
 frontend/src/resources/alerter/config.tsx     | 48 +++++++++++++++++++
 frontend/src/resources/build/config.tsx       | 36 ++++++++++----
 frontend/src/resources/builder/config.tsx     | 48 +++++++++++++++++++
 frontend/src/resources/deployment/config.tsx  | 31 +++++-------
 frontend/src/resources/deployment/index.tsx   |  1 -
 frontend/src/resources/repo/config.tsx        | 43 +++++++++++++++++
 frontend/src/resources/server/config.tsx      | 35 ++++++--------
 frontend/src/util/config.ts                   | 10 ++++
 9 files changed, 205 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/resources/alerter/config.tsx
 create mode 100644 frontend/src/resources/builder/config.tsx
 create mode 100644 frontend/src/resources/repo/config.tsx
 create mode 100644 frontend/src/util/config.ts

diff --git a/frontend/src/pages/dashboard/components/create-resource.tsx b/frontend/src/pages/dashboard/components/create-resource.tsx
index 72ed9fb2c..e1faa85ba 100644
--- a/frontend/src/pages/dashboard/components/create-resource.tsx
+++ b/frontend/src/pages/dashboard/components/create-resource.tsx
@@ -15,6 +15,7 @@ import { NewBuilder } from "@resources/builder/new";
 import { NewDeployment } from "@resources/deployment/new";
 import { PlusCircle, ChevronDown } from "lucide-react";
 import { useState } from "react";
+import { RESOURCE_TYPES } from "@util/config";
 
 export const CreateResource = () => {
   const [open, set] = useState<Types.ResourceTarget["type"] | false>(false);
@@ -40,7 +41,7 @@ export const CreateResource = () => {
           </DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuGroup>
-            {["Deployment", "Build", "Server", "Builder"].map((target) => (
+            {RESOURCE_TYPES.map((target) => (
               <DropdownMenuItem
                 className="cursor-pointer"
                 onClick={() => set(target as ResourceTarget["type"])}
diff --git a/frontend/src/resources/alerter/config.tsx b/frontend/src/resources/alerter/config.tsx
new file mode 100644
index 000000000..05f56291b
--- /dev/null
+++ b/frontend/src/resources/alerter/config.tsx
@@ -0,0 +1,48 @@
+import { Config } from "@components/config/Config";
+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 { useState } from "react";
+import { useParams } from "react-router-dom";
+
+export const AlerterConfig = () => {
+  const id = useParams().builderId;
+  const alerter = useRead("GetAlerter", { id }).data;
+  const [update, set] = useState<Partial<Types.AlerterConfig>>({});
+  const { mutate } = useWrite("UpdateAlerter");
+
+  if (id && alerter?.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: { type: "Slack", params: { ...update.params } }, // typecheck angry unless do this
+                  id,
+                })
+              }
+            >
+              <Save className="w-4 h-4" />
+            </Button>
+          </div>
+        }
+      >
+        <Config config={alerter?.config as any} update={update} set={set} />
+      </Section>
+    );
+  } else {
+    // loading
+    return null;
+  }
+};
diff --git a/frontend/src/resources/build/config.tsx b/frontend/src/resources/build/config.tsx
index e60403462..2000834bf 100644
--- a/frontend/src/resources/build/config.tsx
+++ b/frontend/src/resources/build/config.tsx
@@ -1,20 +1,40 @@
 import { Config } from "@components/config/Config";
-import { useRead } from "@hooks";
+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 { useState } from "react";
 import { useParams } from "react-router-dom";
 
 export const BuildConfig = () => {
   const id = useParams().buildId;
-  const build = useRead("GetBuild", { id });
+  const build = useRead("GetBuild", { id }).data;
   const [update, set] = useState<Partial<Types.BuildConfig>>({});
-  if (build.data?.config) {
+  const { mutate } = useWrite("UpdateBuild");
+
+  if (id && build?.config) {
     return (
-      <Config
-        config={build.data?.config as any}
-        update={update}
-        set={set}
-      />
+      <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>
+        }
+      >
+        <Config config={build?.config as any} update={update} set={set} />
+      </Section>
     );
   } else {
     // loading
diff --git a/frontend/src/resources/builder/config.tsx b/frontend/src/resources/builder/config.tsx
new file mode 100644
index 000000000..b8e84e8bf
--- /dev/null
+++ b/frontend/src/resources/builder/config.tsx
@@ -0,0 +1,48 @@
+import { Config } from "@components/config/Config";
+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 { useState } from "react";
+import { useParams } from "react-router-dom";
+
+export const BuilderConfig = () => {
+  const id = useParams().builderId;
+  const deployment = useRead("GetBuilder", { id }).data;
+  const [update, set] = useState<Partial<Types.BuilderConfig>>({});
+  const { mutate } = useWrite("UpdateBuilder");
+
+  if (id && deployment?.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: { type: "Aws", params: { ...update.params } }, // typecheck angry unless do this
+                  id,
+                })
+              }
+            >
+              <Save className="w-4 h-4" />
+            </Button>
+          </div>
+        }
+      >
+        <Config config={deployment?.config as any} update={update} set={set} />
+      </Section>
+    );
+  } else {
+    // loading
+    return null;
+  }
+};
diff --git a/frontend/src/resources/deployment/config.tsx b/frontend/src/resources/deployment/config.tsx
index 1af4dad8d..4086d8168 100644
--- a/frontend/src/resources/deployment/config.tsx
+++ b/frontend/src/resources/deployment/config.tsx
@@ -1,5 +1,6 @@
 import { Config } from "@components/config/Config";
 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";
@@ -9,39 +10,31 @@ import { useParams } from "react-router-dom";
 export const DeploymentConfig = () => {
   const id = useParams().deploymentId;
   const deployment = useRead("GetDeployment", { id }).data;
-  const [config, set] = useState<Partial<Types.DeploymentConfig>>({});
-
+  const [update, set] = useState<Partial<Types.DeploymentConfig>>({});
   const { mutate } = useWrite("UpdateDeployment");
 
   if (id && deployment?.config) {
     return (
-      <div className="flex flex-col">
-        <div className="flex justify-between">
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <Settings className="w-4 h-4" />
-            <h2 className="text-xl">Config</h2>
-          </div>
+      <Section
+        title="Config"
+        icon={<Settings className="w-4 h-4" />}
+        actions={
           <div className="flex gap-4">
-            <Button variant="outline" intent="warning">
+            <Button variant="outline" intent="warning" onClick={() => set({})}>
               <History className="w-4 h-4" />
             </Button>
             <Button
               variant="outline"
               intent="success"
-              onClick={() => mutate({ config, id })}
+              onClick={() => mutate({ config: update, id })}
             >
               <Save className="w-4 h-4" />
             </Button>
           </div>
-        </div>
-        <div className="mt-2">
-          <Config
-            config={deployment?.config as any}
-            update={config}
-            set={set}
-          />
-        </div>
-      </div>
+        }
+      >
+        <Config config={deployment?.config as any} update={update} set={set} />
+      </Section>
     );
   } else {
     // loading
diff --git a/frontend/src/resources/deployment/index.tsx b/frontend/src/resources/deployment/index.tsx
index ef1d9c543..e5de430f7 100644
--- a/frontend/src/resources/deployment/index.tsx
+++ b/frontend/src/resources/deployment/index.tsx
@@ -21,7 +21,6 @@ import { Link, useParams } from "react-router-dom";
 
 export const DeploymentPage = () => {
   const id = useParams().deploymentId;
-
   if (!id) return null;
   useAddRecentlyViewed("Deployment", id);
 
diff --git a/frontend/src/resources/repo/config.tsx b/frontend/src/resources/repo/config.tsx
new file mode 100644
index 000000000..4a5c92959
--- /dev/null
+++ b/frontend/src/resources/repo/config.tsx
@@ -0,0 +1,43 @@
+import { Config } from "@components/config/Config";
+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 { useState } from "react";
+import { useParams } from "react-router-dom";
+
+export const RepoConfig = () => {
+  const id = useParams().repoId;
+  const repo = useRead("GetRepo", { id }).data;
+  const [update, set] = useState<Partial<Types.RepoConfig>>({});
+  const { mutate } = useWrite("UpdateRepo");
+
+  if (id && repo?.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>
+        }
+      >
+        <Config config={repo?.config as any} update={update} set={set} />
+      </Section>
+    );
+  } else {
+    // loading
+    return null;
+  }
+};
diff --git a/frontend/src/resources/server/config.tsx b/frontend/src/resources/server/config.tsx
index da2e9fa08..0a29b66fc 100644
--- a/frontend/src/resources/server/config.tsx
+++ b/frontend/src/resources/server/config.tsx
@@ -1,5 +1,6 @@
 import { Config } from "@components/config/Config";
 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";
@@ -8,40 +9,32 @@ import { useParams } from "react-router-dom";
 
 export const ServerConfig = () => {
   const id = useParams().serverId;
-  const server = useRead("GetServer", { id });
-  const [config, set] = useState<Partial<Types.ServerConfig>>({});
-
+  const server = useRead("GetServer", { id }).data;
+  const [update, set] = useState<Partial<Types.ServerConfig>>({});
   const { mutate } = useWrite("UpdateServer");
 
-  if (id && server.data?.config) {
+  if (id && server?.config) {
     return (
-      <div className="flex flex-col">
-        <div className="flex justify-between">
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <Settings className="w-4 h-4" />
-            <h2 className="text-xl">Config</h2>
-          </div>
+      <Section
+        title="Config"
+        icon={<Settings className="w-4 h-4" />}
+        actions={
           <div className="flex gap-4">
-            <Button variant="outline" intent="warning">
+            <Button variant="outline" intent="warning" onClick={() => set({})}>
               <History className="w-4 h-4" />
             </Button>
             <Button
               variant="outline"
               intent="success"
-              onClick={() => mutate({ config, id })}
+              onClick={() => mutate({ config: update, id })}
             >
               <Save className="w-4 h-4" />
             </Button>
           </div>
-        </div>
-        <div className="mt-2">
-          <Config
-            config={server.data?.config as any}
-            update={config}
-            set={set}
-          />
-        </div>
-      </div>
+        }
+      >
+        <Config config={server?.config as any} update={update} set={set} />
+      </Section>
     );
   } else {
     // loading
diff --git a/frontend/src/util/config.ts b/frontend/src/util/config.ts
new file mode 100644
index 000000000..322f78ed0
--- /dev/null
+++ b/frontend/src/util/config.ts
@@ -0,0 +1,10 @@
+import { Types } from "@monitor/client";
+
+export const RESOURCE_TYPES: Types.ResourceTarget["type"][] = [
+  "Alerter",
+  "Build",
+  "Builder",
+  "Deployment",
+  "Repo",
+  "Server",
+];