Fix AsyncCommandDropdown check icon

Author: yekta

src/components/service/panel/content/deployed/settings/sections/networking-section.tsx

@@ -18,6 +18,7 @@ import { validateDomain } from "@/lib/helpers/validate-domain";
 import { validatePort } from "@/lib/helpers/validate-port";
 import { useAppForm } from "@/lib/hooks/use-app-form";
 import { TServiceShallow } from "@/server/trpc/api/services/types";
+import { useStore } from "@tanstack/react-form";
 import { GlobeIcon, GlobeLockIcon, NetworkIcon, PenIcon, PlusIcon, Trash2Icon } from "lucide-react";
 
 type TProps = {
@@ -77,6 +78,19 @@ function AllServiceTypesSection({ service }: { service: TServiceShallow }) {
     },
   });
 
+  const changeCount = useStore(form.store, (s) => {
+    let count = 0;
+    s.values.externalEndpoints.forEach((endpoint, index) => {
+      if (endpoint.host !== endpointsData?.endpoints.external[index]?.host) {
+        count++;
+      }
+      if (endpoint.port !== endpointsData?.endpoints.external[index]?.port.port.toString()) {
+        count++;
+      }
+    });
+    return count;
+  });
+
   return (
     <SettingsSection title="Networking" id="networking" Icon={NetworkIcon}>
       {(service.type === "github" || service.type === "docker-image") && (
@@ -268,20 +282,19 @@ function AllServiceTypesSection({ service }: { service: TServiceShallow }) {
                                             variant="outline-process"
                                             className="text-foreground has-hover:hover:text-foreground active:text-foreground w-full"
                                             onClick={() => {
-                                              field.state.value.forEach((_, i) =>
-                                                form.setFieldValue(
-                                                  `externalEndpoints[${i}].isEditing`,
-                                                  false,
-                                                ),
-                                              );
+                                              form.reset();
                                             }}
                                           >
                                             Cancel
                                           </Button>
                                         </div>
                                         <div className="w-1/2 pl-1.5">
-                                          <Button variant="process" className="w-full">
-                                            Save
+                                          <Button
+                                            disabled={changeCount < 1}
+                                            variant="process"
+                                            className="w-full"
+                                          >
+                                            Apply{changeCount > 0 ? ` (${changeCount})` : ""}
                                           </Button>
                                         </div>
                                       </div>

src/components/settings/settings-section.tsx

@@ -9,7 +9,6 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { cn } from "@/components/ui/utils";
-import { CheckIcon, RotateCcwIcon } from "lucide-react";
 import { FC, HTMLAttributes, ReactNode } from "react";
 
 export function SettingsSection({
@@ -59,7 +58,7 @@ export function SettingsSection({
             {title}
           </h3>
         </div>
-        {changeCount !== undefined && changeCount > 0 && (
+        {/* {changeCount !== undefined && changeCount > 0 && (
           <div className="-mr-2.25 flex shrink-0 items-center justify-end gap-1.25 py-1.25 sm:-mr-2.75">
             <ResetTrigger changeCount={changeCount} onClickResetChanges={onClickResetChanges}>
               <Button
@@ -78,7 +77,7 @@ export function SettingsSection({
               </SubmitButtonElement>
             </SubmitTriggerElement>
           </div>
-        )}
+        )} */}
       </div>
       <div
         className={cn(
@@ -98,16 +97,14 @@ export function SettingsSection({
                 aria-label="Reset changes"
                 variant="outline-process"
               >
-                <RotateCcwIcon className="size-5 scale-90" />
-                <p className="min-w-0 shrink truncate">Revert</p>
+                Cancel
               </Button>
             </ResetTrigger>
           </div>
           <div className="w-1/2 p-1.5">
             <SubmitTriggerElement>
               <SubmitButtonElement className="w-full" variant="process">
-                <CheckIcon className="size-5" />
-                <p className="min-w-0 shrink truncate">Apply ({changeCount})</p>
+                Apply ({changeCount})
               </SubmitButtonElement>
             </SubmitTriggerElement>
           </div>

src/lib/hooks/use-app-form.tsx

@@ -413,7 +413,7 @@ function AsyncCommandDropdown({
                           value={item.value}
                           key={item.value}
                           className="group/item px-3"
-                          data-checked={field.state.value === item ? true : undefined}
+                          data-checked={field.state.value === item.value ? true : undefined}
                         >
                           {CommandItemElement ? (
                             <CommandItemElement item={item} />