♻️ use site selector on private resources

This commit is contained in:
Fred KISSIE
2026-03-19 01:18:27 +01:00
parent 722595c131
commit 8f33e25782
2 changed files with 24 additions and 59 deletions

View File

@@ -1,15 +1,10 @@
"use client"; "use client";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
import { StrategySelect } from "@app/components/StrategySelect";
import { Tag, TagInput } from "@app/components/tags/tag-input"; import { Tag, TagInput } from "@app/components/tags/tag-input";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from "@app/components/ui/command";
import { import {
Form, Form,
FormControl, FormControl,
@@ -32,24 +27,22 @@ import {
SelectValue SelectValue
} from "@app/components/ui/select"; } from "@app/components/ui/select";
import { Switch } from "@app/components/ui/switch"; import { Switch } from "@app/components/ui/switch";
import { getUserDisplayName } from "@app/lib/getUserDisplayName"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { usePaidStatus } from "@app/hooks/usePaidStatus";
import { cn } from "@app/lib/cn"; import { cn } from "@app/lib/cn";
import { getUserDisplayName } from "@app/lib/getUserDisplayName";
import { orgQueries, resourceQueries } from "@app/lib/queries"; import { orgQueries, resourceQueries } from "@app/lib/queries";
import { useQueries, useQuery } from "@tanstack/react-query"; import { zodResolver } from "@hookform/resolvers/zod";
import { tierMatrix } from "@server/lib/billing/tierMatrix";
import { ListSitesResponse } from "@server/routers/site"; import { ListSitesResponse } from "@server/routers/site";
import { UserType } from "@server/types/UserTypes"; import { UserType } from "@server/types/UserTypes";
import { Check, ChevronsUpDown, ExternalLink } from "lucide-react"; import { useQuery } from "@tanstack/react-query";
import { ChevronsUpDown, ExternalLink } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { SitesSelector, type Selectedsite } from "./site-selector";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { usePaidStatus } from "@app/hooks/usePaidStatus";
import { tierMatrix } from "@server/lib/billing/tierMatrix";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
import { StrategySelect } from "@app/components/StrategySelect";
// --- Helpers (shared) --- // --- Helpers (shared) ---
@@ -407,6 +400,10 @@ export function InternalResourceForm({
clients: [] clients: []
}; };
const [selectedSite, setSelectedSite] = useState<Selectedsite>(
availableSites[0]
);
const form = useForm<FormData>({ const form = useForm<FormData>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
defaultValues defaultValues
@@ -578,46 +575,14 @@ export function InternalResourceForm({
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-full p-0"> <PopoverContent className="w-full p-0">
<Command> <SitesSelector
<CommandInput orgId={orgId}
placeholder={t("searchSites")} selectedSite={selectedSite}
/> onSelectSite={(site) => {
<CommandList> setSelectedSite(site);
<CommandEmpty> field.onChange(site.siteId);
{t("noSitesFound")} }}
</CommandEmpty> />
<CommandGroup>
{availableSites.map(
(site) => (
<CommandItem
key={
site.siteId
}
value={
site.name
}
onSelect={() =>
field.onChange(
site.siteId
)
}
>
<Check
className={cn(
"mr-2 h-4 w-4",
field.value ===
site.siteId
? "opacity-100"
: "opacity-0"
)}
/>
{site.name}
</CommandItem>
)
)}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FormMessage /> <FormMessage />

View File

@@ -15,7 +15,7 @@ import { CheckIcon } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useDebounce } from "use-debounce"; import { useDebounce } from "use-debounce";
type Selectedsite = Pick< export type Selectedsite = Pick<
ListSitesResponse["sites"][number], ListSitesResponse["sites"][number],
"name" | "siteId" | "type" "name" | "siteId" | "type"
>; >;