mirror of
https://github.com/fosrl/pangolin.git
synced 2026-01-28 22:00:51 +00:00
🚸 now the domain picker is deterministic
This commit is contained in:
Fred KISSIE
@@ -91,8 +91,14 @@ export default function GeneralForm() {
|
||||
`${resource.ssl ? "https" : "http"}://${toUnicode(resource.fullDomain || "")}`
|
||||
);
|
||||
|
||||
const resourceFullDomainName = useMemo(() => {
|
||||
const url = new URL(resourceFullDomain);
|
||||
return url.hostname;
|
||||
}, [resourceFullDomain]);
|
||||
|
||||
const [selectedDomain, setSelectedDomain] = useState<{
|
||||
domainId: string;
|
||||
domainNamespaceId?: string;
|
||||
subdomain?: string;
|
||||
fullDomain: string;
|
||||
baseDomain: string;
|
||||
@@ -491,19 +497,21 @@ export default function GeneralForm() {
|
||||
orgId={orgId as string}
|
||||
cols={1}
|
||||
defaultSubdomain={
|
||||
selectedDomain?.subdomain ??
|
||||
form.getValues("subdomain") ??
|
||||
resource.subdomain
|
||||
}
|
||||
defaultDomainId={
|
||||
selectedDomain?.domainId ??
|
||||
form.getValues("domainId") ??
|
||||
resource.domainId
|
||||
}
|
||||
defaultFullDomain={resourceFullDomainName}
|
||||
onDomainChange={(res) => {
|
||||
const selected = {
|
||||
domainId: res.domainId,
|
||||
subdomain: res.subdomain,
|
||||
fullDomain: res.fullDomain,
|
||||
baseDomain: res.baseDomain
|
||||
baseDomain: res.baseDomain,
|
||||
domainNamespaceId: res.domainNamespaceId
|
||||
};
|
||||
setSelectedDomain(selected);
|
||||
}}
|
||||
|
||||
@@ -103,6 +103,7 @@ export default function DomainPicker({
|
||||
const [subdomainInput, setSubdomainInput] = useState(
|
||||
defaultSubdomain ?? ""
|
||||
);
|
||||
|
||||
const [selectedBaseDomain, setSelectedBaseDomain] =
|
||||
useState<DomainOption | null>(null);
|
||||
const [availableOptions, setAvailableOptions] = useState<AvailableOption[]>(
|
||||
@@ -129,7 +130,7 @@ export default function DomainPicker({
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
// Provided domain search states
|
||||
const [userInput, setUserInput] = useState<string>("");
|
||||
const [userInput, setUserInput] = useState<string>(defaultSubdomain ?? "");
|
||||
const [isChecking, setIsChecking] = useState(false);
|
||||
const [providedDomainsShown, setProvidedDomainsShown] = useState(3);
|
||||
const [selectedProvidedDomain, setSelectedProvidedDomain] =
|
||||
@@ -137,49 +138,60 @@ export default function DomainPicker({
|
||||
|
||||
useEffect(() => {
|
||||
if (!loadingDomains) {
|
||||
let domainOptionToSelect: DomainOption | null = null;
|
||||
if (organizationDomains.length > 0) {
|
||||
// Select the first organization domain or the one provided from props
|
||||
const firstOrgDomain =
|
||||
organizationDomains.find(
|
||||
(domain) => domain.domainId === defaultDomainId
|
||||
) ?? organizationDomains[0];
|
||||
let firstOrExistingDomain = organizationDomains.find(
|
||||
(domain) => domain.domainId === defaultDomainId
|
||||
);
|
||||
// if no default Domain
|
||||
if (!defaultDomainId) {
|
||||
firstOrExistingDomain = organizationDomains[0];
|
||||
}
|
||||
|
||||
const domainOption: DomainOption = {
|
||||
id: `org-${firstOrgDomain.domainId}`,
|
||||
domain: firstOrgDomain.baseDomain,
|
||||
type: "organization",
|
||||
verified: firstOrgDomain.verified,
|
||||
domainType: firstOrgDomain.type,
|
||||
domainId: firstOrgDomain.domainId
|
||||
};
|
||||
setSelectedBaseDomain(domainOption);
|
||||
if (firstOrExistingDomain) {
|
||||
domainOptionToSelect = {
|
||||
id: `org-${firstOrExistingDomain.domainId}`,
|
||||
domain: firstOrExistingDomain.baseDomain,
|
||||
type: "organization",
|
||||
verified: firstOrExistingDomain.verified,
|
||||
domainType: firstOrExistingDomain.type,
|
||||
domainId: firstOrExistingDomain.domainId
|
||||
};
|
||||
|
||||
onDomainChange?.({
|
||||
domainId: firstOrgDomain.domainId,
|
||||
type: "organization",
|
||||
subdomain:
|
||||
firstOrgDomain.type !== "cname"
|
||||
? defaultSubdomain || undefined
|
||||
: undefined,
|
||||
fullDomain: firstOrgDomain.baseDomain,
|
||||
baseDomain: firstOrgDomain.baseDomain
|
||||
});
|
||||
} else if (
|
||||
(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
|
||||
const domainOptionText =
|
||||
build === "enterprise"
|
||||
? t("domainPickerProvidedDomain")
|
||||
: t("domainPickerFreeProvidedDomain");
|
||||
const freeDomainOption: DomainOption = {
|
||||
// free domain option
|
||||
domainOptionToSelect = {
|
||||
id: "provided-search",
|
||||
domain: domainOptionText,
|
||||
type: "provided-search"
|
||||
};
|
||||
setSelectedBaseDomain(freeDomainOption);
|
||||
}
|
||||
|
||||
setSelectedBaseDomain(domainOptionToSelect);
|
||||
}
|
||||
}, [
|
||||
loadingDomains,
|
||||
@@ -349,6 +361,9 @@ export default function DomainPicker({
|
||||
setSelectedProvidedDomain(null);
|
||||
}
|
||||
|
||||
console.log({
|
||||
setSelectedBaseDomain: option
|
||||
});
|
||||
setSelectedBaseDomain(option);
|
||||
setOpen(false);
|
||||
|
||||
@@ -414,6 +429,15 @@ export default function DomainPicker({
|
||||
0,
|
||||
providedDomainsShown
|
||||
);
|
||||
console.log({
|
||||
displayedProvidedOptions
|
||||
});
|
||||
|
||||
const selectedDomainNamespaceId =
|
||||
selectedProvidedDomain?.domainNamespaceId ??
|
||||
displayedProvidedOptions.find(
|
||||
(opt) => opt.fullDomain === defaultFullDomain
|
||||
)?.domainNamespaceId;
|
||||
const hasMoreProvided =
|
||||
sortedAvailableOptions.length > providedDomainsShown;
|
||||
|
||||
@@ -699,10 +723,8 @@ export default function DomainPicker({
|
||||
{!isChecking && sortedAvailableOptions.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<RadioGroup
|
||||
value={
|
||||
selectedProvidedDomain?.domainNamespaceId ||
|
||||
""
|
||||
}
|
||||
value={selectedDomainNamespaceId || ""}
|
||||
defaultValue={selectedDomainNamespaceId}
|
||||
onValueChange={(value) => {
|
||||
const option =
|
||||
displayedProvidedOptions.find(
|
||||
@@ -715,47 +737,50 @@ export default function DomainPicker({
|
||||
}}
|
||||
className={`grid gap-2 grid-cols-1 sm:grid-cols-${cols}`}
|
||||
>
|
||||
{displayedProvidedOptions.map((option) => (
|
||||
<label
|
||||
key={option.domainNamespaceId}
|
||||
htmlFor={option.domainNamespaceId}
|
||||
data-state={
|
||||
selectedProvidedDomain?.domainNamespaceId ===
|
||||
option.domainNamespaceId
|
||||
? "checked"
|
||||
: "unchecked"
|
||||
}
|
||||
className={cn(
|
||||
"relative flex rounded-lg border p-3 transition-colors cursor-pointer",
|
||||
selectedProvidedDomain?.domainNamespaceId ===
|
||||
option.domainNamespaceId
|
||||
? "border-primary bg-primary/10"
|
||||
: "border-input hover:bg-accent"
|
||||
)}
|
||||
>
|
||||
<RadioGroupItem
|
||||
value={option.domainNamespaceId}
|
||||
id={option.domainNamespaceId}
|
||||
className="absolute left-3 top-3 h-4 w-4 border-primary text-primary"
|
||||
/>
|
||||
<div className="flex items-center justify-between pl-7 flex-1">
|
||||
<div>
|
||||
<p className="font-mono text-sm">
|
||||
{option.fullDomain}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t(
|
||||
"domainPickerNamespace",
|
||||
{
|
||||
namespace:
|
||||
option.domainNamespaceId
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
{displayedProvidedOptions.map((option) => {
|
||||
const isSelected =
|
||||
selectedDomainNamespaceId ===
|
||||
option.domainNamespaceId;
|
||||
return (
|
||||
<label
|
||||
key={option.domainNamespaceId}
|
||||
htmlFor={option.domainNamespaceId}
|
||||
data-state={
|
||||
isSelected
|
||||
? "checked"
|
||||
: "unchecked"
|
||||
}
|
||||
className={cn(
|
||||
"relative flex rounded-lg border p-3 transition-colors cursor-pointer",
|
||||
isSelected
|
||||
? "border-primary bg-primary/10"
|
||||
: "border-input hover:bg-accent"
|
||||
)}
|
||||
>
|
||||
<RadioGroupItem
|
||||
value={option.domainNamespaceId}
|
||||
id={option.domainNamespaceId}
|
||||
className="absolute left-3 top-3 h-4 w-4 border-primary text-primary"
|
||||
/>
|
||||
<div className="flex items-center justify-between pl-7 flex-1">
|
||||
<div>
|
||||
<p className="font-mono text-sm">
|
||||
{option.fullDomain}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t(
|
||||
"domainPickerNamespace",
|
||||
{
|
||||
namespace:
|
||||
option.domainNamespaceId
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
{hasMoreProvided && (
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user