From 7ae80d2cadae4b7e024adec0b067cd818ebcb0f2 Mon Sep 17 00:00:00 2001 From: Fred KISSIE Date: Thu, 18 Dec 2025 00:20:19 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20apply=20domain=20picker=20?= =?UTF-8?q?from=20dev?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DomainPicker.tsx | 242 ++++++++++++++++++-------------- 1 file changed, 137 insertions(+), 105 deletions(-) diff --git a/src/components/DomainPicker.tsx b/src/components/DomainPicker.tsx index 8fc6d583..071bc1af 100644 --- a/src/components/DomainPicker.tsx +++ b/src/components/DomainPicker.tsx @@ -64,18 +64,21 @@ type DomainOption = { interface DomainPickerProps { orgId: string; - onDomainChange?: (domainInfo: { - domainId: string; - domainNamespaceId?: string; - type: "organization" | "provided"; - subdomain?: string; - fullDomain: string; - baseDomain: string; - }) => void; + onDomainChange?: ( + domainInfo: { + domainId: string; + domainNamespaceId?: string; + type: "organization" | "provided"; + subdomain?: string; + fullDomain: string; + baseDomain: string; + } | null + ) => void; cols?: number; hideFreeDomain?: boolean; - defaultSubdomain?: string; - defaultBaseDomain?: string; + defaultFullDomain?: string | null; + defaultSubdomain?: string | null; + defaultDomainId?: string | null; } export default function DomainPicker({ @@ -84,7 +87,8 @@ export default function DomainPicker({ cols = 2, hideFreeDomain = false, defaultSubdomain, - defaultBaseDomain + defaultFullDomain, + defaultDomainId }: DomainPickerProps) { const { env } = useEnvContext(); const api = createApiClient({ env }); @@ -94,8 +98,6 @@ export default function DomainPicker({ orgQueries.domains({ orgId }) ); - console.log({ defaultSubdomain, defaultBaseDomain }); - if (!env.flags.usePangolinDns) { hideFreeDomain = true; } @@ -103,6 +105,7 @@ export default function DomainPicker({ const [subdomainInput, setSubdomainInput] = useState( defaultSubdomain ?? "" ); + const [selectedBaseDomain, setSelectedBaseDomain] = useState(null); const [availableOptions, setAvailableOptions] = useState( @@ -129,7 +132,7 @@ export default function DomainPicker({ const [open, setOpen] = useState(false); // Provided domain search states - const [userInput, setUserInput] = useState(""); + const [userInput, setUserInput] = useState(defaultSubdomain ?? ""); const [isChecking, setIsChecking] = useState(false); const [providedDomainsShown, setProvidedDomainsShown] = useState(3); const [selectedProvidedDomain, setSelectedProvidedDomain] = @@ -137,51 +140,67 @@ 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.baseDomain === defaultBaseDomain - ) ?? 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); + let firstOrExistingDomain = organizationDomains.find( + (domain) => domain.domainId === defaultDomainId + ); + // if no default Domain + if (!defaultDomainId) { + firstOrExistingDomain = organizationDomains[0]; + } - onDomainChange?.({ - domainId: firstOrgDomain.domainId, - type: "organization", - subdomain: undefined, - fullDomain: firstOrgDomain.baseDomain, - baseDomain: firstOrgDomain.baseDomain - }); - } else if ( - (build === "saas" || build === "enterprise") && - !hideFreeDomain + if (firstOrExistingDomain) { + domainOptionToSelect = { + id: `org-${firstOrExistingDomain.domainId}`, + domain: firstOrExistingDomain.baseDomain, + type: "organization", + verified: firstOrExistingDomain.verified, + domainType: firstOrExistingDomain.type, + domainId: firstOrExistingDomain.domainId + }; + + 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); } }, [ - hideFreeDomain, loadingDomains, organizationDomains, - defaultBaseDomain + defaultSubdomain, + hideFreeDomain, + defaultDomainId ]); const checkAvailability = useCallback( @@ -344,6 +363,9 @@ export default function DomainPicker({ setSelectedProvidedDomain(null); } + console.log({ + setSelectedBaseDomain: option + }); setSelectedBaseDomain(option); setOpen(false); @@ -354,15 +376,21 @@ export default function DomainPicker({ const fullDomain = sub ? `${sub}.${option.domain}` : option.domain; - onDomainChange?.({ - domainId: option.domainId || "", - domainNamespaceId: option.domainNamespaceId, - type: - option.type === "provided-search" ? "provided" : "organization", - subdomain: sub || undefined, - fullDomain, - baseDomain: option.domain - }); + if (option.type === "provided-search") { + onDomainChange?.(null); // prevent the modal from closing with `.Free Provided domain` + } else { + onDomainChange?.({ + domainId: option.domainId || "", + domainNamespaceId: option.domainNamespaceId, + type: "organization", + subdomain: + option.domainType !== "cname" + ? sub || undefined + : undefined, + fullDomain, + baseDomain: option.domain + }); + } }; const handleProvidedDomainSelect = (option: AvailableOption) => { @@ -408,6 +436,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; @@ -455,16 +492,6 @@ export default function DomainPicker({ {t("domainPickerInvalidSubdomainStructure")}

)} - {showSubdomainInput && !subdomainInput && ( -

- {t("domainPickerEnterSubdomainOrLeaveBlank")} -

- )} - {showProvidedDomainSearch && !userInput && ( -

- {t("domainPickerEnterSubdomainToSearch")} -

- )}
@@ -693,10 +720,8 @@ export default function DomainPicker({ {!isChecking && sortedAvailableOptions.length > 0 && (
{ const option = displayedProvidedOptions.find( @@ -707,49 +732,56 @@ export default function DomainPicker({ 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) => ( -