♻️ use site label filter column

src/components/PrivateResourcesTable.tsx

@@ -54,6 +54,7 @@ import { ColumnFilterButton } from "./ColumnFilterButton";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 import { LabelsTableCell } from "./LabelsTableCell";
 import { ControlledDataTable } from "./ui/controlled-data-table";
+import { SitesColumnFilterButton } from "./SitesColumnFilterButton";
 
 export type InternalResourceSiteRow = ResourceSiteRow;
 
@@ -146,7 +147,6 @@ export default function PrivateResourcesTable({
     const [editingResource, setEditingResource] =
         useState<InternalResourceRow | null>();
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-    const [siteFilterOpen, setSiteFilterOpen] = useState(false);
 
     const [isRefreshing, startRefreshTransition] = useTransition();
 
@@ -160,22 +160,6 @@ export default function PrivateResourcesTable({
     //     return () => clearInterval(interval);
     // }, [router]);
 
-    const siteIdQ = searchParams.get("siteId");
-    const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
-    const selectedSite: Selectedsite | null = useMemo(() => {
-        if (!siteIdQ || !Number.isInteger(siteIdNum) || siteIdNum <= 0) {
-            return null;
-        }
-        if (initialFilterSite && initialFilterSite.siteId === siteIdNum) {
-            return initialFilterSite;
-        }
-        return {
-            siteId: siteIdNum,
-            name: t("standaloneHcFilterSiteIdFallback", { id: siteIdNum }),
-            type: "newt"
-        };
-    }, [initialFilterSite, siteIdQ, siteIdNum, t]);
-
     const refreshData = () => {
         startRefreshTransition(() => {
             try {
@@ -269,58 +253,27 @@ export default function PrivateResourcesTable({
                 accessorFn: (row) =>
                     row.sites.map((s) => s.siteName).join(", "),
                 friendlyName: t("sites"),
-                header: () => (
+                header: () => {
-                    <Popover
+                    const siteIdQ = searchParams.get("siteId");
-                        open={siteFilterOpen}
+                    const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
-                        onOpenChange={setSiteFilterOpen}
+
-                    >
+                    const selectedSiteId =
-                        <PopoverTrigger asChild>
+                        !siteIdQ ||
-                            <Button
+                        !Number.isInteger(siteIdNum) ||
-                                type="button"
+                        siteIdNum <= 0
-                                variant="ghost"
+                            ? null
-                                role="combobox"
+                            : siteIdNum;
-                                className={cn(
+
-                                    "justify-between text-sm h-8 px-2 w-full p-3",
+                    return (
-                                    !selectedSite && "text-muted-foreground"
+                        <SitesColumnFilterButton
-                                )}
+                            selectedSiteId={selectedSiteId}
-                            >
+                            onValueChange={(value) =>
-                                <div className="flex items-center gap-2 min-w-0">
+                                handleFilterChange("siteId", value?.toString())
-                                    {t("sites")}
+                            }
-                                    <Funnel className="size-4 flex-none" />
+                            orgId={orgId}
-                                    {selectedSite && (
+                        />
-                                        <Badge
+                    );
-                                            className="truncate max-w-[10rem]"
+                },
-                                            variant="secondary"
-                                        >
-                                            {selectedSite.name}
-                                        </Badge>
-                                    )}
-                                </div>
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent
-                            className={dataTableFilterPopoverContentClassName}
-                            align="start"
-                        >
-                            <div className="border-b p-1">
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-8 w-full justify-start font-normal"
-                                    onClick={clearSiteFilter}
-                                >
-                                    {t("standaloneHcFilterAnySite")}
-                                </Button>
-                            </div>
-                            <SitesSelector
-                                orgId={orgId}
-                                selectedSite={selectedSite}
-                                onSelectSite={onPickSite}
-                            />
-                        </PopoverContent>
-                    </Popover>
-                ),
                 cell: ({ row }) => {
                     const resourceRow = row.original;
                     return (
@@ -570,16 +523,6 @@ export default function PrivateResourcesTable({
         });
     }
 
-    const clearSiteFilter = () => {
-        handleFilterChange("siteId", undefined);
-        setSiteFilterOpen(false);
-    };
-
-    const onPickSite = (site: Selectedsite) => {
-        handleFilterChange("siteId", String(site.siteId));
-        setSiteFilterOpen(false);
-    };
-
     function toggleSort(column: string) {
         const newSearch = getNextSortOrder(column, searchParams);