pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-28 07:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ apply domain picker from dev

Browse Source
This commit is contained in:
Fred KISSIE
2025-12-18 00:20:19 +01:00
parent 9ef7faace7
commit 7ae80d2cad
1 changed files with 137 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
src/components/DomainPicker.tsx
View File

@@ -64,18 +64,21 @@ type DomainOption = {
interface DomainPickerProps { interface DomainPickerProps {
orgId: string; orgId: string;
onDomainChange?: (domainInfo: { onDomainChange?: (
domainId: string; domainInfo: {
domainNamespaceId?: string; domainId: string;
type: "organization" | "provided"; domainNamespaceId?: string;
subdomain?: string; type: "organization" | "provided";
fullDomain: string; subdomain?: string;
baseDomain: string; fullDomain: string;
}) => void; baseDomain: string;
} | null
) => void;
cols?: number; cols?: number;
hideFreeDomain?: boolean; hideFreeDomain?: boolean;
defaultSubdomain?: string; defaultFullDomain?: string | null;
defaultBaseDomain?: string; defaultSubdomain?: string | null;
defaultDomainId?: string | null;
} }
export default function DomainPicker({ export default function DomainPicker({
@@ -84,7 +87,8 @@ export default function DomainPicker({
cols = 2, cols = 2,
hideFreeDomain = false, hideFreeDomain = false,
defaultSubdomain, defaultSubdomain,
defaultBaseDomain defaultFullDomain,
defaultDomainId
}: DomainPickerProps) { }: DomainPickerProps) {
const { env } = useEnvContext(); const { env } = useEnvContext();
const api = createApiClient({ env }); const api = createApiClient({ env });
@@ -94,8 +98,6 @@ export default function DomainPicker({
orgQueries.domains({ orgId }) orgQueries.domains({ orgId })
); );
console.log({ defaultSubdomain, defaultBaseDomain });
if (!env.flags.usePangolinDns) { if (!env.flags.usePangolinDns) {
hideFreeDomain = true; hideFreeDomain = true;
} }
@@ -103,6 +105,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 +132,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,51 +140,67 @@ 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.baseDomain === defaultBaseDomain );
) ?? organizationDomains[0]; // if no default Domain
const domainOption: DomainOption = { if (!defaultDomainId) {
id: `org-${firstOrgDomain.domainId}`, firstOrExistingDomain = organizationDomains[0];
domain: firstOrgDomain.baseDomain, }
type: "organization",
verified: firstOrgDomain.verified,
domainType: firstOrgDomain.type,
domainId: firstOrgDomain.domainId
};
setSelectedBaseDomain(domainOption);
onDomainChange?.({ if (firstOrExistingDomain) {
domainId: firstOrgDomain.domainId, domainOptionToSelect = {
type: "organization", id: `org-${firstOrExistingDomain.domainId}`,
subdomain: undefined, domain: firstOrExistingDomain.baseDomain,
fullDomain: firstOrgDomain.baseDomain, type: "organization",
baseDomain: firstOrgDomain.baseDomain verified: firstOrExistingDomain.verified,
}); domainType: firstOrExistingDomain.type,
} else if ( domainId: firstOrExistingDomain.domainId
(build === "saas" || build === "enterprise") && };
!hideFreeDomain
onDomainChange?.({
domainId: firstOrExistingDomain.domainId,
type: "organization",
subdomain:
firstOrExistingDomain.type !== "cname"
? defaultSubdomain || undefined
: undefined,
fullDomain: firstOrExistingDomain.baseDomain,
baseDomain: firstOrExistingDomain.baseDomain
});
}
}
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);
} }
}, [ }, [
hideFreeDomain,
loadingDomains, loadingDomains,
organizationDomains, organizationDomains,
defaultBaseDomain defaultSubdomain,
hideFreeDomain,
defaultDomainId
]); ]);
const checkAvailability = useCallback( const checkAvailability = useCallback(
@@ -344,6 +363,9 @@ export default function DomainPicker({
setSelectedProvidedDomain(null); setSelectedProvidedDomain(null);
} }
console.log({
setSelectedBaseDomain: option
});
setSelectedBaseDomain(option); setSelectedBaseDomain(option);
setOpen(false); setOpen(false);
@@ -354,15 +376,21 @@ export default function DomainPicker({
const fullDomain = sub ? `${sub}.${option.domain}` : option.domain; const fullDomain = sub ? `${sub}.${option.domain}` : option.domain;
onDomainChange?.({ if (option.type === "provided-search") {
domainId: option.domainId || "", onDomainChange?.(null); // prevent the modal from closing with `<subdomain>.Free Provided domain`
domainNamespaceId: option.domainNamespaceId, } else {
type: onDomainChange?.({
option.type === "provided-search" ? "provided" : "organization", domainId: option.domainId || "",
subdomain: sub || undefined, domainNamespaceId: option.domainNamespaceId,
fullDomain, type: "organization",
baseDomain: option.domain subdomain:
}); option.domainType !== "cname"
? sub || undefined
: undefined,
fullDomain,
baseDomain: option.domain
});
}
}; };
const handleProvidedDomainSelect = (option: AvailableOption) => { const handleProvidedDomainSelect = (option: AvailableOption) => {
@@ -408,6 +436,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;
@@ -455,16 +492,6 @@ export default function DomainPicker({
{t("domainPickerInvalidSubdomainStructure")} {t("domainPickerInvalidSubdomainStructure")}
</p> </p>
)} )}
{showSubdomainInput && !subdomainInput && (
<p className="text-sm text-muted-foreground">
{t("domainPickerEnterSubdomainOrLeaveBlank")}
</p>
)}
{showProvidedDomainSearch && !userInput && (
<p className="text-sm text-muted-foreground">
{t("domainPickerEnterSubdomainToSearch")}
</p>
)}
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -693,10 +720,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(
@@ -707,49 +732,56 @@ export default function DomainPicker({
handleProvidedDomainSelect(option); handleProvidedDomainSelect(option);
} }
}} }}
className={`grid gap-2 grid-cols-1 sm:grid-cols-${cols}`} style={{
// @ts-expect-error CSS variable
"--cols": `repeat(${cols}, minmax(0, 1fr))`
}}
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