add image config, confirm update, etc

frontend/src/resources/deployment/config.tsx

@@ -1,4 +1,5 @@
 import { Configuration } from "@components/config";
+import { ConfirmUpdate } from "@components/config/confirm-update";
 import { useRead, useWrite } from "@hooks";
 import { Section } from "@layouts/page";
 import { Types } from "@monitor/client";
@@ -23,9 +24,9 @@ const ImageTypeSelector = ({
   selected: Types.DeploymentImage["type"] | undefined;
   onSelect: (type: Types.DeploymentImage["type"]) => void;
 }) => (
-  <Select value={selected} onValueChange={onSelect}>
+  <Select value={selected || undefined} onValueChange={onSelect}>
     <SelectTrigger className="max-w-[150px]">
-      <SelectValue placeholder="Select A Server" />
+      <SelectValue placeholder="Select Type" />
     </SelectTrigger>
     <SelectContent>
       <SelectItem value={"Image"}>Image</SelectItem>
@@ -43,7 +44,7 @@ const ServersSelector = ({
 }) => {
   const servers = useRead("ListServers", {}).data;
   return (
-    <Select value={selected} onValueChange={onSelect}>
+    <Select value={selected || undefined} onValueChange={onSelect}>
       <SelectTrigger className="w-full lg:w-[300px]">
         <SelectValue placeholder="Select A Server" />
       </SelectTrigger>
@@ -67,9 +68,9 @@ const BuildsSelector = ({
 }) => {
   const builds = useRead("ListBuilds", {}).data;
   return (
-    <Select value={selected ?? undefined} onValueChange={onSelect}>
+    <Select value={selected || undefined} onValueChange={onSelect}>
       <SelectTrigger className="w-full lg:w-[300px]">
-        <SelectValue placeholder="Select A Build" />
+        <SelectValue placeholder="Select Build" />
       </SelectTrigger>
       <SelectContent>
         {builds?.map((b) => (
@@ -93,12 +94,14 @@ const BuildVersionSelector = ({
 }) => {
   const versions = useRead("GetBuildVersions", { id: buildId }).data;
   return (
-    <Select value={selected ?? undefined} onValueChange={onSelect}>
-      <SelectTrigger className="w-full lg:w-[300px]">
-        <SelectValue placeholder="Select A Build" />
+    <Select value={selected || undefined} onValueChange={onSelect}>
+      <SelectTrigger className="w-full lg:w-[150px]">
+        <SelectValue placeholder="Select Version" />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem value={"latest"}>latest</SelectItem>
+        <SelectItem value={JSON.stringify({ major: 0, minor: 0, patch: 0 })}>
+          latest
+        </SelectItem>
         {versions?.map((v) => (
           <SelectItem key={JSON.stringify(v)} value={JSON.stringify(v)}>
             {readableVersion(v.version)}
@@ -118,7 +121,7 @@ const EnvVars = ({
 }) => (
   <div className="flex flex-col gap-4 border-b pb-4">
     {vars?.map((variable, i) => (
-      <div className="flex justify-between gap-4">
+      <div className="flex justify-between gap-4" key={i}>
         <Input
           value={variable.variable}
           placeholder="Variable Name"
@@ -154,54 +157,13 @@ const EnvVars = ({
   </div>
 );
 
-export const DeploymentConfig = () => {
-  const id = useParams().deploymentId;
-  const deployment = useRead("GetDeployment", { id }).data;
-  const [update, set] = useState<Partial<Types.DeploymentConfig>>({});
-  const { mutate, isLoading } = useWrite("UpdateDeployment");
-
-  if (!id || !deployment?.config) 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={deployment.config}
-        loading={isLoading}
-        update={update}
-        set={(input) => set((update) => ({ ...update, ...input }))}
-        layout={{
-          general: ["server_id", "image", "restart"],
-          networking: ["network", "ports"],
-          environment: ["environment", "skip_secret_interp"],
-        }}
-        overrides={{
-          server_id: (value, set) => (
-            <div className="flex items-center justify-between border-b pb-4">
-              Server
-              <ServersSelector
-                selected={value}
-                onSelect={(server_id) => set({ server_id })}
-              />
-            </div>
-          ),
-          image: (image, set) => (
+const ImageConfig = ({
+  image,
+  set,
+}: {
+  image: Types.DeploymentImage | undefined;
+  set: (input: Partial<Types.DeploymentConfig>) => void;
+}) => (
   <div className="flex justify-between items-center border-b pb-4 min-h-[40px]">
     <div>Image</div>
     <div className="flex gap-4 w-full justify-end">
@@ -237,7 +199,7 @@ export const DeploymentConfig = () => {
           />
           <BuildVersionSelector
             buildId={image.params.build_id}
-                      selected={image.params.build_id}
+            selected={JSON.stringify(image.params.version)}
             onSelect={(version) =>
               set({
                 image: {
@@ -271,7 +233,53 @@ export const DeploymentConfig = () => {
       )}
     </div>
   </div>
+);
+
+export const DeploymentConfig = () => {
+  const id = useParams().deploymentId;
+  const deployment = useRead("GetDeployment", { id }).data;
+  const [update, set] = useState<Partial<Types.DeploymentConfig>>({});
+  const { mutate, isLoading } = useWrite("UpdateDeployment");
+
+  if (!id || !deployment?.config) 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>
+          <ConfirmUpdate
+            content={JSON.stringify(update, null, 2)}
+            onConfirm={() => mutate({ config: update, id })}
+          />
+        </div>
+      }
+    >
+      <Configuration
+        config={deployment.config}
+        loading={isLoading}
+        update={update}
+        set={(input) => set((update) => ({ ...update, ...input }))}
+        layout={{
+          general: ["server_id", "image", "restart"],
+          networking: ["network", "ports"],
+          environment: ["environment", "skip_secret_interp"],
+        }}
+        overrides={{
+          server_id: (value, set) => (
+            <div className="flex items-center justify-between border-b pb-4">
+              Server
+              <ServersSelector
+                selected={value}
+                onSelect={(server_id) => set({ server_id })}
+              />
+            </div>
           ),
+          image: (image, set) => <ImageConfig image={image} set={set} />,
           environment: (vars, set) => <EnvVars vars={vars} set={set} />,
         }}
       />