pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-06 18:56:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

🚸 now the domain picker is deterministic

Browse Source
This commit is contained in:
Fred KISSIE
2025-12-17 04:57:16 +01:00
parent c98d61a8fb
commit b133593ea2
2 changed files with 109 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx
View File

@@ -91,8 +91,14 @@ export default function GeneralForm() {
`${resource.ssl ? "https" : "http"}://${toUnicode(resource.fullDomain || "")}` `${resource.ssl ? "https" : "http"}://${toUnicode(resource.fullDomain || "")}`
); );
const resourceFullDomainName = useMemo(() => {
const url = new URL(resourceFullDomain);
return url.hostname;
}, [resourceFullDomain]);
const [selectedDomain, setSelectedDomain] = useState<{ const [selectedDomain, setSelectedDomain] = useState<{
domainId: string; domainId: string;
domainNamespaceId?: string;
subdomain?: string; subdomain?: string;
fullDomain: string; fullDomain: string;
baseDomain: string; baseDomain: string;
@@ -491,19 +497,21 @@ export default function GeneralForm() {
orgId={orgId as string} orgId={orgId as string}
cols={1} cols={1}
defaultSubdomain={ defaultSubdomain={
selectedDomain?.subdomain ?? form.getValues("subdomain") ??
resource.subdomain resource.subdomain
} }
defaultDomainId={ defaultDomainId={
selectedDomain?.domainId ?? form.getValues("domainId") ??
resource.domainId resource.domainId
} }
defaultFullDomain={resourceFullDomainName}
onDomainChange={(res) => { onDomainChange={(res) => {
const selected = { const selected = {
domainId: res.domainId, domainId: res.domainId,
subdomain: res.subdomain, subdomain: res.subdomain,
fullDomain: res.fullDomain, fullDomain: res.fullDomain,
baseDomain: res.baseDomain baseDomain: res.baseDomain,
domainNamespaceId: res.domainNamespaceId
}; };
setSelectedDomain(selected); setSelectedDomain(selected);
}} }}

171
src/components/DomainPicker.tsx
View File

@@ -103,6 +103,7 @@ export default function DomainPicker({
const [subdomainInput, setSubdomainInput] = useState( const [subdomainInput, setSubdomainInput] = useState(
defaultSubdomain ?? "" defaultSubdomain ?? ""
); );
const [selectedBaseDomain, setSelectedBaseDomain] = const [selectedBaseDomain, setSelectedBaseDomain] =
useState<DomainOption | null>(null); useState<DomainOption | null>(null);
const [availableOptions, setAvailableOptions] = useState<AvailableOption[]>( const [availableOptions, setAvailableOptions] = useState<AvailableOption[]>(
@@ -129,7 +130,7 @@ export default function DomainPicker({
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
// Provided domain search states // Provided domain search states
const [userInput, setUserInput] = useState<string>(""); const [userInput, setUserInput] = useState<string>(defaultSubdomain ?? "");
const [isChecking, setIsChecking] = useState(false); const [isChecking, setIsChecking] = useState(false);
const [providedDomainsShown, setProvidedDomainsShown] = useState(3); const [providedDomainsShown, setProvidedDomainsShown] = useState(3);
const [selectedProvidedDomain, setSelectedProvidedDomain] = const [selectedProvidedDomain, setSelectedProvidedDomain] =
@@ -137,49 +138,60 @@ export default function DomainPicker({
useEffect(() => { useEffect(() => {
if (!loadingDomains) { if (!loadingDomains) {
let domainOptionToSelect: DomainOption | null = null;
if (organizationDomains.length > 0) { if (organizationDomains.length > 0) {
// Select the first organization domain or the one provided from props // Select the first organization domain or the one provided from props
const firstOrgDomain = let firstOrExistingDomain = organizationDomains.find(
organizationDomains.find( (domain) => domain.domainId === defaultDomainId
(domain) => domain.domainId === defaultDomainId );
) ?? organizationDomains[0]; // if no default Domain
if (!defaultDomainId) {
firstOrExistingDomain = organizationDomains[0];
}
const domainOption: DomainOption = { if (firstOrExistingDomain) {
id: `org-${firstOrgDomain.domainId}`, domainOptionToSelect = {
domain: firstOrgDomain.baseDomain, id: `org-${firstOrExistingDomain.domainId}`,
type: "organization", domain: firstOrExistingDomain.baseDomain,
verified: firstOrgDomain.verified, type: "organization",
domainType: firstOrgDomain.type, verified: firstOrExistingDomain.verified,
domainId: firstOrgDomain.domainId domainType: firstOrExistingDomain.type,
}; domainId: firstOrExistingDomain.domainId
setSelectedBaseDomain(domainOption); };
onDomainChange?.({ onDomainChange?.({
domainId: firstOrgDomain.domainId, domainId: firstOrExistingDomain.domainId,
type: "organization", type: "organization",
subdomain: subdomain:
firstOrgDomain.type !== "cname" firstOrExistingDomain.type !== "cname"
? defaultSubdomain || undefined ? defaultSubdomain || undefined
: undefined, : undefined,
fullDomain: firstOrgDomain.baseDomain, fullDomain: firstOrExistingDomain.baseDomain,
baseDomain: firstOrgDomain.baseDomain baseDomain: firstOrExistingDomain.baseDomain
}); });
} else if ( }
(build === "saas" || build === "enterprise") && }
!hideFreeDomain
if (
!domainOptionToSelect &&
build !== "oss" &&
!hideFreeDomain &&
defaultDomainId !== undefined
) { ) {
// If no organization domains, select the provided domain option // If no organization domains, select the provided domain option
const domainOptionText = const domainOptionText =
build === "enterprise" build === "enterprise"
? t("domainPickerProvidedDomain") ? t("domainPickerProvidedDomain")
: t("domainPickerFreeProvidedDomain"); : t("domainPickerFreeProvidedDomain");
const freeDomainOption: DomainOption = { // free domain option
domainOptionToSelect = {
id: "provided-search", id: "provided-search",
domain: domainOptionText, domain: domainOptionText,
type: "provided-search" type: "provided-search"
}; };
setSelectedBaseDomain(freeDomainOption);
} }
setSelectedBaseDomain(domainOptionToSelect);
} }
}, [ }, [
loadingDomains, loadingDomains,
@@ -349,6 +361,9 @@ export default function DomainPicker({
setSelectedProvidedDomain(null); setSelectedProvidedDomain(null);
} }
console.log({
setSelectedBaseDomain: option
});
setSelectedBaseDomain(option); setSelectedBaseDomain(option);
setOpen(false); setOpen(false);
@@ -414,6 +429,15 @@ export default function DomainPicker({
0, 0,
providedDomainsShown providedDomainsShown
); );
console.log({
displayedProvidedOptions
});
const selectedDomainNamespaceId =
selectedProvidedDomain?.domainNamespaceId ??
displayedProvidedOptions.find(
(opt) => opt.fullDomain === defaultFullDomain
)?.domainNamespaceId;
const hasMoreProvided = const hasMoreProvided =
sortedAvailableOptions.length > providedDomainsShown; sortedAvailableOptions.length > providedDomainsShown;
@@ -699,10 +723,8 @@ export default function DomainPicker({
{!isChecking && sortedAvailableOptions.length > 0 && ( {!isChecking && sortedAvailableOptions.length > 0 && (
<div className="space-y-3"> <div className="space-y-3">
<RadioGroup <RadioGroup
value={ value={selectedDomainNamespaceId || ""}
selectedProvidedDomain?.domainNamespaceId || defaultValue={selectedDomainNamespaceId}
""
}
onValueChange={(value) => { onValueChange={(value) => {
const option = const option =
displayedProvidedOptions.find( displayedProvidedOptions.find(
@@ -715,47 +737,50 @@ export default function DomainPicker({
}} }}
className={`grid gap-2 grid-cols-1 sm:grid-cols-${cols}`} className={`grid gap-2 grid-cols-1 sm:grid-cols-${cols}`}
> >
{displayedProvidedOptions.map((option) => ( {displayedProvidedOptions.map((option) => {
<label const isSelected =
key={option.domainNamespaceId} selectedDomainNamespaceId ===
htmlFor={option.domainNamespaceId} option.domainNamespaceId;
data-state={ return (
selectedProvidedDomain?.domainNamespaceId === <label
option.domainNamespaceId key={option.domainNamespaceId}
? "checked" htmlFor={option.domainNamespaceId}
: "unchecked" data-state={
} isSelected
className={cn( ? "checked"
"relative flex rounded-lg border p-3 transition-colors cursor-pointer", : "unchecked"
selectedProvidedDomain?.domainNamespaceId === }
option.domainNamespaceId className={cn(
? "border-primary bg-primary/10" "relative flex rounded-lg border p-3 transition-colors cursor-pointer",
: "border-input hover:bg-accent" isSelected
)} ? "border-primary bg-primary/10"
> : "border-input hover:bg-accent"
<RadioGroupItem )}
value={option.domainNamespaceId} >
id={option.domainNamespaceId} <RadioGroupItem
className="absolute left-3 top-3 h-4 w-4 border-primary text-primary" value={option.domainNamespaceId}
/> id={option.domainNamespaceId}
<div className="flex items-center justify-between pl-7 flex-1"> className="absolute left-3 top-3 h-4 w-4 border-primary text-primary"
<div> />
<p className="font-mono text-sm"> <div className="flex items-center justify-between pl-7 flex-1">
{option.fullDomain} <div>
</p> <p className="font-mono text-sm">
<p className="text-xs text-muted-foreground"> {option.fullDomain}
{t( </p>
"domainPickerNamespace", <p className="text-xs text-muted-foreground">
{ {t(
namespace: "domainPickerNamespace",
option.domainNamespaceId {
} namespace:
)} option.domainNamespaceId
</p> }
)}
</p>
</div>
</div> </div>
</div> </label>
</label> );
))} })}
</RadioGroup> </RadioGroup>
{hasMoreProvided && ( {hasMoreProvided && (
<Button <Button