pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-04-11 20:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ make site selector popover its own component

Browse Source
This commit is contained in:
Fred KISSIE
2026-03-19 00:35:26 +01:00
parent c9be84a8a8
commit 722595c131
2 changed files with 104 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/resource-target-address-item.tsx
View File

@@ -23,6 +23,7 @@ import {
import { Input } from "./ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
import { SitesSelector } from "./site-selector";
type SiteWithUpdateAvailable = ListSitesResponse["sites"][number];
@@ -54,16 +55,6 @@ export function ResourceTargetAddressItem({
}: ResourceTargetAddressItemProps) {
const t = useTranslations();
const [siteSearchQuery, setSiteSearchQuery] = useState("");
const { data: sites = [] } = useQuery(
orgQueries.sites({
orgId,
query: siteSearchQuery,
perPage: 10
})
);
const [selectedSite, setSelectedSite] = useState<Pick<
SiteWithUpdateAvailable,
"name" | "siteId" | "type"
@@ -82,22 +73,6 @@ export function ResourceTargetAddressItem({
return null;
});
const sitesShown = useMemo(() => {
const allSites: Array<
Pick<SiteWithUpdateAvailable, "name" | "siteId" | "type">
> = [...sites];
if (
selectedSite !== null &&
!(
allSites.find((site) => site.siteId)?.siteId ===
selectedSite?.siteId
)
) {
allSites.unshift(selectedSite);
}
return allSites;
}, [sites, selectedSite]);
const handleContainerSelectForTarget = (
hostname: string,
port?: number
@@ -150,47 +125,18 @@ export function ResourceTargetAddressItem({
</Button>
</PopoverTrigger>
<PopoverContent className="p-0 w-45">
<Command shouldFilter={false}>
<CommandInput
placeholder={t("siteSearch")}
value={siteSearchQuery}
onValueChange={(v) => setSiteSearchQuery(v)}
/>
<CommandList>
<CommandEmpty>{t("siteNotFound")}</CommandEmpty>
<CommandGroup>
{sitesShown.map((site) => (
<CommandItem
key={site.siteId}
value={`${site.siteId}:${site.name}`}
onSelect={() => {
updateTarget(
proxyTarget.targetId,
{
siteId: site.siteId,
siteType: site.type,
siteName: site.name
}
);
setSelectedSite(site);
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
site.siteId ===
proxyTarget.siteId
? "opacity-100"
: "opacity-0"
)}
/>
{site.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
<SitesSelector
orgId={orgId}
selectedSite={selectedSite}
onSelectSite={(site) => {
updateTarget(proxyTarget.targetId, {
siteId: site.siteId,
siteType: site.type,
siteName: site.name
});
setSelectedSite(site);
}}
/>
</PopoverContent>
</Popover>