From b6be0bd462f4157af32897d0c1c441ebc458b245 Mon Sep 17 00:00:00 2001
From: BennyKok <itechbenny@gmail.com>
Date: Tue, 16 Jan 2024 18:52:13 +0800
Subject: [PATCH] feat: refresh create new machine ui

---
 web/src/components/MachineList.tsx            |  6 ++
 .../custom-form/ModelPickerView.tsx           | 59 +++++++++++++------
 .../custom-form/SnapshotPickerView.tsx        | 53 ++++++++++-------
 .../components/custom-form/model-picker.tsx   | 10 ++--
 .../custom-form/snapshot-picker.tsx           | 10 ++--
 5 files changed, 91 insertions(+), 47 deletions(-)

diff --git a/web/src/components/MachineList.tsx b/web/src/components/MachineList.tsx
index c6c7148..ec8e72b 100644
--- a/web/src/components/MachineList.tsx
+++ b/web/src/components/MachineList.tsx
@@ -357,9 +357,15 @@ export function MachineList({
               },
               snapshot: {
                 fieldType: "snapshot",
+                inputProps: {
+                  showLabel: false,
+                },
               },
               models: {
                 fieldType: "models",
+                inputProps: {
+                  showLabel: false,
+                },
               },
               gpu: {
                 fieldType: !userMetadata.betaFeaturesAccess
diff --git a/web/src/components/custom-form/ModelPickerView.tsx b/web/src/components/custom-form/ModelPickerView.tsx
index b8bb240..b4fca11 100644
--- a/web/src/components/custom-form/ModelPickerView.tsx
+++ b/web/src/components/custom-form/ModelPickerView.tsx
@@ -2,6 +2,12 @@
 
 import type { AutoFormInputComponentProps } from "../ui/auto-form/types";
 import { LoadingIcon } from "@/components/LoadingIcon";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import {
   Command,
@@ -154,22 +160,31 @@ export function ModelPickerView({
   field,
 }: Pick<AutoFormInputComponentProps, "field">) {
   return (
-    <div className="flex gap-2 flex-col">
-      <ComfyUIManagerModelRegistry field={field} />
-      <CivitaiModelRegistry field={field} />
-      {/* <span>{field.value.length} selected</span> */}
-      {field.value && (
-        <ScrollArea className="w-full bg-gray-100 mx-auto rounded-lg mt-2">
-          <Textarea
-            className="min-h-[150px] max-h-[300px] p-2 rounded-lg text-xs w-full"
-            value={JSON.stringify(field.value, null, 2)}
-            onChange={(e) => {
-              field.onChange(JSON.parse(e.target.value));
-            }}
-          />
-        </ScrollArea>
-      )}
-    </div>
+    <Accordion type="single" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger className="text-sm">
+          Models (ComfyUI Manager & Civitai)
+        </AccordionTrigger>
+        <AccordionContent>
+          <div className="flex gap-2 flex-col px-1">
+            <ComfyUIManagerModelRegistry field={field} />
+            <CivitaiModelRegistry field={field} />
+            {/* <span>{field.value.length} selected</span> */}
+            {field.value && (
+              <ScrollArea className="w-full bg-gray-100 mx-auto rounded-lg mt-2">
+                <Textarea
+                  className="min-h-[150px] max-h-[300px] p-2 rounded-lg text-xs w-full"
+                  value={JSON.stringify(field.value, null, 2)}
+                  onChange={(e) => {
+                    field.onChange(JSON.parse(e.target.value));
+                  }}
+                />
+              </ScrollArea>
+            )}
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   );
 }
 
@@ -307,7 +322,13 @@ export function ComfyUIManagerModelRegistry({
     };
   }, []);
 
-  return <ModelSelector field={field} modelList={modelList} label="common" />;
+  return (
+    <ModelSelector
+      field={field}
+      modelList={modelList}
+      label="ComfyUI Manager"
+    />
+  );
 }
 
 export function ModelSelector({
@@ -358,7 +379,7 @@ export function ModelSelector({
             aria-expanded={open}
             className="w-full justify-between flex"
           >
-            Select {label}
+            Add from {label}
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
@@ -371,7 +392,7 @@ export function ModelSelector({
             >
               {isLoading && <LoadingIcon />}
             </CommandInput>
-            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandEmpty>No models found.</CommandEmpty>
             <CommandList className="pointer-events-auto">
               <CommandGroup>
                 {modelList?.models.map((model) => (
diff --git a/web/src/components/custom-form/SnapshotPickerView.tsx b/web/src/components/custom-form/SnapshotPickerView.tsx
index aa6849d..1f10b48 100644
--- a/web/src/components/custom-form/SnapshotPickerView.tsx
+++ b/web/src/components/custom-form/SnapshotPickerView.tsx
@@ -2,6 +2,12 @@
 
 import type { AutoFormInputComponentProps } from "../ui/auto-form/types";
 import fetcher from "@/components/fetcher";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import {
   Command,
@@ -27,22 +33,27 @@ export function SnapshotPickerView({
   field,
 }: Pick<AutoFormInputComponentProps, "field">) {
   return (
-    <div className="flex gap-2 flex-col">
-      <SnapshotPresetPicker field={field} />
-      <CustomNodesSelector field={field} />
-      {field.value && (
-        // <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg">
-        <Textarea
-          className="min-h-[150px] max-h-[300px] p-2 rounded-md text-xs w-full"
-          value={JSON.stringify(field.value, null, 2)}
-          onChange={(e) => {
-            // Update field.onChange to pass the array of selected models
-            field.onChange(JSON.parse(e.target.value));
-          }}
-        />
-        // </ScrollArea>
-      )}
-    </div>
+    <Accordion type="single" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger className="text-sm">Custom Nodes</AccordionTrigger>
+        <AccordionContent className="flex gap-2 flex-col px-1">
+          <SnapshotPresetPicker field={field} />
+          <CustomNodesSelector field={field} />
+          {field.value && (
+            // <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg">
+            <Textarea
+              className="min-h-[150px] max-h-[300px] p-2 rounded-md text-xs w-full"
+              value={JSON.stringify(field.value, null, 2)}
+              onChange={(e) => {
+                // Update field.onChange to pass the array of selected models
+                field.onChange(JSON.parse(e.target.value));
+              }}
+            />
+            // </ScrollArea>
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   );
 }
 
@@ -97,14 +108,16 @@ function SnapshotPresetPicker({
           aria-expanded={open}
           className="w-full justify-between flex"
         >
-          {selected ? findItem(selected)?.label : "Select snapshot..."}
+          {selected
+            ? findItem(selected)?.label
+            : "Select snapshot (From deployments)"}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[375px] p-0">
         <Command>
-          <CommandInput placeholder="Search framework..." className="h-9" />
-          <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandInput placeholder="Search snapshot..." className="h-9" />
+          <CommandEmpty>No snapshot found.</CommandEmpty>
           <CommandGroup>
             {frameworks?.map((framework) => (
               <CommandItem
@@ -188,7 +201,7 @@ function CustomNodesSelector({
           aria-expanded={open}
           className="w-full justify-between flex"
         >
-          Select custom nodes... {keys.length} selected
+          Add custom nodes - {keys.length} selected
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
diff --git a/web/src/components/custom-form/model-picker.tsx b/web/src/components/custom-form/model-picker.tsx
index 0d2d0fe..7155c53 100644
--- a/web/src/components/custom-form/model-picker.tsx
+++ b/web/src/components/custom-form/model-picker.tsx
@@ -21,10 +21,12 @@ export default function AutoFormModelsPicker({
 }: AutoFormInputComponentProps) {
   return (
     <FormItem>
-      <FormLabel>
-        {label}
-        {isRequired && <span className="text-destructive"> *</span>}
-      </FormLabel>
+      {fieldConfigItem.inputProps?.showLabel && (
+        <FormLabel>
+          {label}
+          {isRequired && <span className="text-destructive"> *</span>}
+        </FormLabel>
+      )}
       <FormControl>
         <Suspense fallback={<LoadingIcon />}>
           <ModelPickerView field={field} />
diff --git a/web/src/components/custom-form/snapshot-picker.tsx b/web/src/components/custom-form/snapshot-picker.tsx
index e825173..76a8301 100644
--- a/web/src/components/custom-form/snapshot-picker.tsx
+++ b/web/src/components/custom-form/snapshot-picker.tsx
@@ -21,10 +21,12 @@ export default function AutoFormSnapshotPicker({
 }: AutoFormInputComponentProps) {
   return (
     <FormItem>
-      <FormLabel>
-        {label}
-        {isRequired && <span className="text-destructive"> *</span>}
-      </FormLabel>
+      {fieldConfigItem.inputProps?.showLabel && (
+        <FormLabel>
+          {label}
+          {isRequired && <span className="text-destructive"> *</span>}
+        </FormLabel>
+      )}
       <FormControl>
         <Suspense fallback={<LoadingIcon />}>
           <SnapshotPickerView field={field} />