more ui/ux enhancements around labels and tables

src/components/ProxyResourcesTable.tsx

@@ -70,10 +70,10 @@ import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
 import { ControlledDataTable } from "./ui/controlled-data-table";
 import UptimeMiniBar from "./UptimeMiniBar";
-import { LabelsSelector, type SelectedLabel } from "./labels-selector";
-import { LabelBadge } from "./label-badge";
-import { LabelOverflowBadge } from "./label-overflow-badge";
+import { type SelectedLabel } from "./labels-selector";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
+import { useLocalLabels } from "@app/hooks/useLocalLabels";
+import { TableLabelsCell } from "./TableLabelsCell";
 
 export type TargetHealth = {
     targetId: number;
@@ -171,12 +171,12 @@ export default function ProxyResourcesTable({
         };
     }, [initialFilterSite, siteIdQ, siteIdNum, t]);
 
-    useEffect(() => {
-        const interval = setInterval(() => {
-            router.refresh();
-        }, 30_000);
-        return () => clearInterval(interval);
-    }, [router]);
+    // useEffect(() => {
+    //     const interval = setInterval(() => {
+    //         router.refresh();
+    //     }, 30_000);
+    //     return () => clearInterval(interval);
+    // }, [router]);
 
     const refreshData = () => {
         startTransition(() => {
@@ -766,29 +766,29 @@ function ResourceLabelCell({ resource, orgId }: ResourceLabelCellProps) {
 
     const api = createApiClient(useEnvContext());
 
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-    const router = useRouter();
-
-    const labels = resource.labels ?? [];
-    const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
+    const [localLabels, setLocalLabels] = useLocalLabels(
+        resource.labels,
+        resource.id
+    );
 
     function toggleSiteLabel(
         label: SelectedLabel,
         action: "attach" | "detach"
     ) {
-        startTransition(async () => {
+        const previousLabels = localLabels;
+
+        void (async () => {
             try {
                 if (action === "attach") {
-                    setOptimisticLabels([...optimisticLabels, label]);
+                    setLocalLabels([...previousLabels, label]);
 
                     await api.put(
                         `/org/${orgId}/label/${label.labelId}/attach`,
                         { resourceId: resource.id }
                     );
                 } else {
-                    setOptimisticLabels(
-                        optimisticLabels.filter(
+                    setLocalLabels(
+                        previousLabels.filter(
                             (lb) => lb.labelId !== label.labelId
                         )
                     );
@@ -798,55 +798,22 @@ function ResourceLabelCell({ resource, orgId }: ResourceLabelCellProps) {
                     );
                 }
             } catch (e) {
+                setLocalLabels(previousLabels);
                 toast({
                     title: t("error"),
                     description: formatAxiosError(e, t("errorOccurred")),
                     variant: "destructive"
                 });
-            } finally {
-                router.refresh();
             }
-        });
+        })();
     }
 
-    const visibleLabels = optimisticLabels.slice(0, 3);
-    const overflowLabels = optimisticLabels.slice(3);
-
     return (
-        <div className="inline-flex w-full min-w-0 flex-nowrap items-center gap-1 overflow-hidden">
-            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        size="icon"
-                        variant="outline"
-                        className="size-auto shrink-0 rounded-full p-1"
-                        title={t("addLabels")}
-                    >
-                        <span className="sr-only">{t("addLabels")}</span>
-                        <PlusIcon className="size-3" />
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent align="center" className="p-0 w-full">
-                    <LabelsSelector
-                        orgId={orgId}
-                        selectedLabels={optimisticLabels}
-                        toggleLabel={toggleSiteLabel}
-                    />
-                </PopoverContent>
-            </Popover>
-            {visibleLabels.map((label) => (
-                <LabelBadge
-                    key={label.labelId}
-                    className="shrink-0"
-                    onClick={() => setIsPopoverOpen(true)}
-                    {...label}
-                />
-            ))}
-            <LabelOverflowBadge
-                labels={overflowLabels}
-                onClick={() => setIsPopoverOpen(true)}
-            />
-        </div>
+        <TableLabelsCell
+            orgId={orgId}
+            localLabels={localLabels}
+            toggleLabel={toggleSiteLabel}
+        />
     );
 }