SER-287 Fix domain flows on console

src/lib/components/domains/cnameTable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Link } from '$lib/elements';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { getSubdomain } from '$lib/helpers/tlds';
     import {
         Badge,
         Layout,
@@ -11,10 +12,23 @@
     } from '@appwrite.io/pink-svelte';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
 
-    export let domain: string;
-    export let verified = undefined;
+    let {
+        domain,
+        verified = undefined,
+        ruleStatus = undefined
+    }: {
+        domain: string;
+        verified?: boolean | undefined;
+        ruleStatus?: string | undefined;
+    } = $props();
 
-    let subdomain = domain.split('.').slice(0, -2).join('.');
+    const subdomain = $derived(getSubdomain(domain));
+
+    const caaText = $derived(
+        $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA?.includes(' ')
+            ? $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA
+            : `0 issue "${$regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}"`
+    );
 </script>
 
 <Layout.Stack gap="xl">
@@ -23,15 +37,25 @@
             <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
                 {domain}
             </Typography.Text>
-            {#if verified === true}
+            {#if ruleStatus === 'created'}
+                <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
+            {:else if ruleStatus === 'verifying'}
+                <Badge variant="secondary" size="xs" content="Generating certificate" />
+            {:else if ruleStatus === 'unverified'}
+                <Badge
+                    variant="secondary"
+                    type="error"
+                    size="xs"
+                    content="Certificate generation failed" />
+            {:else if verified === true}
                 <Badge variant="secondary" type="success" size="xs" content="Verified" />
-            {:else if verified === false}
-                <Badge variant="secondary" type="warning" size="xs" content="Verification failed" />
             {/if}
         </Layout.Stack>
         <Typography.Text variant="m-400">
-            Add the following record on your DNS provider. Note that DNS changes may take time to
-            propagate fully.
+            Add the following {$regionalConsoleVariables._APP_DOMAIN_TARGET_CAA
+                ? 'records'
+                : 'record'} on your DNS provider. Note that DNS changes may take up to 48 hours to propagate
+            fully.
         </Typography.Text>
     </Layout.Stack>
 
@@ -43,14 +67,28 @@
         </svelte:fragment>
         <Table.Row.Base {root}>
             <Table.Cell {root}>CNAME</Table.Cell>
-            <Table.Cell {root}>{subdomain}</Table.Cell>
+            <Table.Cell {root}>{subdomain || '@'}</Table.Cell>
             <Table.Cell {root}>
                 <InteractiveText
                     variant="copy"
                     isVisible
                     text={$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME} />
             </Table.Cell>
         </Table.Row.Base>
+        {#if $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}
+            <Table.Row.Base {root}>
+                <Table.Cell {root}>
+                    <Layout.Stack gap="s" direction="row" alignItems="center">
+                        <span>CAA</span>
+                        <Badge variant="secondary" size="xs" content="Recommended" />
+                    </Layout.Stack>
+                </Table.Cell>
+                <Table.Cell {root}>@</Table.Cell>
+                <Table.Cell {root}>
+                    <InteractiveText variant="copy" isVisible text={caaText} />
+                </Table.Cell>
+            </Table.Row.Base>
+        {/if}
     </Table.Root>
     <Layout.Stack gap="s" direction="row" alignItems="center">
         <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />

src/lib/components/domains/index.ts

@@ -0,0 +1,5 @@
+export { default as ViewLogsModal } from './viewLogsModal.svelte';
+export { default as CnameTable } from './cnameTable.svelte';
+export { default as DnsRecordsAction } from './dnsRecordsAction.svelte';
+export { default as NameserverTable } from './nameserverTable.svelte';
+export { default as RecordTable } from './recordTable.svelte';

src/lib/components/domains/nameserverTable.svelte

@@ -3,8 +3,15 @@
 
     import { Badge, Layout, Typography, Table, InteractiveText } from '@appwrite.io/pink-svelte';
 
-    export let domain: string;
-    export let verified = undefined;
+    let {
+        domain,
+        verified = undefined,
+        ruleStatus = undefined
+    }: {
+        domain: string;
+        verified?: boolean | undefined;
+        ruleStatus?: string | undefined;
+    } = $props();
 
     const nameserverList = $regionalConsoleVariables?._APP_DOMAINS_NAMESERVERS
         ? $regionalConsoleVariables?._APP_DOMAINS_NAMESERVERS?.split(',')
@@ -16,10 +23,18 @@
         <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
             {domain}
         </Typography.Text>
-        {#if verified === true}
+        {#if ruleStatus === 'created'}
+            <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
+        {:else if ruleStatus === 'verifying'}
+            <Badge variant="secondary" size="xs" content="Generating certificate" />
+        {:else if ruleStatus === 'unverified'}
+            <Badge
+                variant="secondary"
+                type="error"
+                size="xs"
+                content="Certificate generation failed" />
+        {:else if verified === true}
             <Badge variant="secondary" type="success" size="xs" content="Verified" />
-        {:else if verified === false}
-            <Badge variant="secondary" type="warning" size="xs" content="Verification failed" />
         {/if}
     </Layout.Stack>
     <Typography.Text variant="m-400">

src/lib/components/domains/recordTable.svelte

@@ -9,20 +9,58 @@
         Alert
     } from '@appwrite.io/pink-svelte';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import { isCloud } from '$lib/system';
+    import { getSubdomain } from '$lib/helpers/tlds';
 
-    export let domain: string;
-    export let verified = undefined;
-    export let variant: 'cname' | 'a' | 'aaaa';
-    export let service: 'sites' | 'general' = 'general';
+    let {
+        domain,
+        verified = undefined,
+        variant,
+        service = 'general',
+        ruleStatus = undefined,
+        onNavigateToNameservers = () => {},
+        onNavigateToA = () => {},
+        onNavigateToAAAA = () => {}
+    }: {
+        domain: string;
+        verified?: boolean | undefined;
+        variant: 'cname' | 'a' | 'aaaa';
+        service?: 'sites' | 'functions' | 'general';
+        ruleStatus?: string | undefined;
+        onNavigateToNameservers?: () => void;
+        onNavigateToA?: () => void;
+        onNavigateToAAAA?: () => void;
+    } = $props();
 
-    let subdomain = domain?.split('.')?.slice(0, -2)?.join('.');
+    const subdomain = $derived(getSubdomain(domain));
+
+    const aTabVisible = $derived(
+        !isCloud &&
+            Boolean($regionalConsoleVariables._APP_DOMAIN_TARGET_A) &&
+            $regionalConsoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1'
+    );
+    const aaaaTabVisible = $derived(
+        !isCloud &&
+            Boolean($regionalConsoleVariables._APP_DOMAIN_TARGET_AAAA) &&
+            $regionalConsoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1'
+    );
+
+    const caaText = $derived(
+        $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA?.includes(' ')
+            ? $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA
+            : `0 issue "${$regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}"`
+    );
 
     function setTarget() {
         switch (variant) {
             case 'cname':
-                return service === 'general'
-                    ? $regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME
-                    : $regionalConsoleVariables._APP_DOMAIN_SITES;
+                if (service === 'sites') {
+                    return $regionalConsoleVariables._APP_DOMAIN_SITES;
+                } else if (service === 'functions') {
+                    return $regionalConsoleVariables._APP_DOMAIN_FUNCTIONS;
+                } else {
+                    return $regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME;
+                }
             case 'a':
                 return $regionalConsoleVariables._APP_DOMAIN_TARGET_A;
             case 'aaaa':
@@ -37,15 +75,25 @@
             <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
                 {domain}
             </Typography.Text>
-            {#if verified === true}
+            {#if ruleStatus === 'created'}
+                <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
+            {:else if ruleStatus === 'verifying'}
+                <Badge variant="secondary" size="xs" content="Generating certificate" />
+            {:else if ruleStatus === 'unverified'}
+                <Badge
+                    variant="secondary"
+                    type="error"
+                    size="xs"
+                    content="Certificate generation failed" />
+            {:else if verified === true}
                 <Badge variant="secondary" type="success" size="xs" content="Verified" />
-            {:else if verified === false}
-                <Badge variant="secondary" type="warning" size="xs" content="Verification failed" />
             {/if}
         </Layout.Stack>
         <Typography.Text variant="m-400">
-            Add the following record on your DNS provider. Note that DNS changes may take time to
-            propagate fully.
+            Add the following {$regionalConsoleVariables._APP_DOMAIN_TARGET_CAA
+                ? 'records'
+                : 'record'} on your DNS provider. Note that DNS changes may take up to 48 hours to propagate
+            fully.
         </Typography.Text>
     </Layout.Stack>
 
@@ -62,17 +110,45 @@
                 <InteractiveText variant="copy" isVisible text={setTarget()} />
             </Table.Cell>
         </Table.Row.Base>
+        {#if $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}
+            <Table.Row.Base {root}>
+                <Table.Cell {root}>
+                    <Layout.Stack gap="s" direction="row" alignItems="center">
+                        <span>CAA</span>
+                        <Badge variant="secondary" size="xs" content="Recommended" />
+                    </Layout.Stack>
+                </Table.Cell>
+                <Table.Cell {root}>@</Table.Cell>
+                <Table.Cell {root}>
+                    <InteractiveText variant="copy" isVisible text={caaText} />
+                </Table.Cell>
+            </Table.Row.Base>
+        {/if}
     </Table.Root>
     <Layout.Stack gap="s" direction="row" alignItems="center">
-        {#if variant === 'cname'}
-            <Alert.Inline>
-                If your domain uses CAA records, ensure certainly.com is authorized — otherwise, SSL
-                setup may fail. A list of all domain providers and their DNS setting is available <Link
-                    variant="muted"
-                    external
-                    href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
-                >.
-            </Alert.Inline>
+        {#if variant === 'cname' && !subdomain}
+            {#if isCloud}
+                <Alert.Inline>
+                    Since <Badge variant="secondary" size="s" content={domain} /> is an apex domain,
+                    CNAME record is only supported by certain providers. If yours doesn't, please verify
+                    using
+                    <Link variant="muted" on:click={onNavigateToNameservers}>nameservers</Link> instead.
+                </Alert.Inline>
+            {:else if aTabVisible || aaaaTabVisible}
+                <Alert.Inline>
+                    Since <Badge variant="secondary" size="s" content={domain} /> is an apex domain,
+                    CNAME record is only supported by certain providers. If yours doesn't, please verify
+                    using
+                    {#if aTabVisible}
+                        <Link variant="muted" on:click={onNavigateToA}>A record</Link>
+                        {#if aaaaTabVisible}
+                            or <Link variant="muted" on:click={onNavigateToAAAA}>AAAA record</Link
+                            >{/if}
+                    {:else if aaaaTabVisible}
+                        <Link variant="muted" on:click={onNavigateToAAAA}>AAAA record</Link>
+                    {/if} instead.
+                </Alert.Inline>
+            {/if}
         {:else}
             <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                 A list of all domain providers and their DNS setting is available <Link

src/lib/components/index.ts

@@ -86,4 +86,5 @@ export { default as RegionEndpoint } from './regionEndpoint.svelte';
 export { default as ExpirationInput } from './expirationInput.svelte';
 export { default as EstimatedCard } from './estimatedCard.svelte';
 export { default as SortButton, type SortDirection } from './sortButton.svelte';
+export * from './domains';
 export { default as SendVerificationEmailModal } from './account/sendVerificationEmailModal.svelte';

src/lib/helpers/date.ts

@@ -206,6 +206,21 @@ export function timeFromNow(datetime: string): string {
     return dayjs().to(dayjs(datetime));
 }
 
+export function timeFromNowShort(datetime: string): string {
+    if (!datetime) {
+        return 'unknown time';
+    }
+    if (!isValidDate(datetime)) {
+        return 'invalid date';
+    }
+
+    const timeStr = dayjs().to(dayjs(datetime));
+    return timeStr
+        .replace('second', 'sec') // seconds > secs
+        .replace('minute', 'min') // minutes > mins
+        .replace('hour', 'hr'); // hours > hrs
+}
+
 export function hoursToDays(hours: number) {
     if (hours > 24) {
         return `${Math.floor(hours / 24)} days`;

src/lib/helpers/tlds.ts

@@ -4,7 +4,7 @@ import { parse } from 'tldts';
  * Returns the apex/root domain from a full domain string.
  */
 export function getApexDomain(domain: string): string | null {
-    return parse(domain).domain;
+    return parse(domain, { allowPrivateDomains: true }).domain;
 }
 
 /**
@@ -13,8 +13,17 @@ export function getApexDomain(domain: string): string | null {
 export function isASubdomain(domain: string | null): boolean {
     if (!domain) return false;
 
-    const { domain: apex, subdomain } = parse(domain);
+    const { domain: apex, subdomain } = parse(domain, { allowPrivateDomains: true });
     if (!apex) return false;
 
     return !!subdomain;
 }
+
+/**
+ * Returns the subdomain part from a full domain string.
+ */
+export function getSubdomain(domain: string): string {
+    if (!domain) return '';
+
+    return parse(domain, { allowPrivateDomains: true }).subdomain || '';
+}

src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte

@@ -118,7 +118,7 @@
                             Navigate to your domain provider and update the nameservers to <InlineCode
                                 code="ns1.appwrite-dns.com"
                                 size="s" /> and <InlineCode code="ns2.appwrite-dns.com" size="s" />.
-                            Note that DNS changes may take time to propagate fully.
+                            Note that DNS changes may take up to 48 hours to propagate fully.
                         </span>
                         <svelte:fragment slot="actions">
                             <Button

src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+layout.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { realtime } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+
+    onMount(() => {
+        return realtime
+            .forProject(page.params.region, page.params.project)
+            .subscribe('console', (response) => {
+                if (
+                    response.events.includes('proxy.rules.*.update') ||
+                    response.events.includes('proxy.rules.*.create') ||
+                    response.events.includes('proxy.rules.*.delete')
+                ) {
+                    if ((response.payload as any)?.deploymentResourceId === page.params.function) {
+                        invalidate(Dependencies.FUNCTION_DOMAINS);
+                    }
+                }
+            });
+    });
+</script>
+
+<slot />

src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.ts

@@ -28,7 +28,7 @@ export const load: PageLoad = async ({ depends, params, url, route, parent }) =>
             Query.equal('trigger', RuleTrigger.MANUAL),
             Query.limit(limit),
             Query.offset(offset),
-            Query.orderDesc(''),
+            Query.orderDesc('$updatedAt'),
             ...parsedQueries.values()
         ],
         search: search || undefined