SER-287 Fix domain flows on console

src/lib/components/domains/cnameTable.svelte

@@ -12,7 +12,8 @@
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
 
     export let domain: string;
-    export let verified = undefined;
+    export let verified: boolean | undefined = undefined;
+    export let ruleStatus: string | undefined = undefined;
 
     let subdomain = domain.split('.').slice(0, -2).join('.');
 </script>
@@ -23,15 +24,23 @@
             <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 record on your DNS provider. Note that DNS changes may take up to 48
+            hours to propagate fully.
         </Typography.Text>
     </Layout.Stack>
 
@@ -51,6 +60,25 @@
                     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={$regionalConsoleVariables._APP_DOMAIN_TARGET_CAA.includes(' ')
+                            ? $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA
+                            : `0 issue "${$regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}"`} />
+                </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

@@ -4,7 +4,8 @@
     import { Badge, Layout, Typography, Table, InteractiveText } from '@appwrite.io/pink-svelte';
 
     export let domain: string;
-    export let verified = undefined;
+    export let verified: boolean | undefined = undefined;
+    export let ruleStatus: string | undefined = undefined;
 
     const nameserverList = $regionalConsoleVariables?._APP_DOMAINS_NAMESERVERS
         ? $regionalConsoleVariables?._APP_DOMAINS_NAMESERVERS?.split(',')
@@ -16,10 +17,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,14 +9,28 @@
         Alert
     } from '@appwrite.io/pink-svelte';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import { isCloud } from '$lib/system';
 
     export let domain: string;
-    export let verified = undefined;
+    export let verified: boolean | undefined = undefined;
     export let variant: 'cname' | 'a' | 'aaaa';
     export let service: 'sites' | 'general' = 'general';
+    export let ruleStatus: string | undefined = undefined;
+    export let onNavigateToNameservers: () => void = () => {};
+    export let onNavigateToA: () => void = () => {};
+    export let onNavigateToAAAA: () => void = () => {};
 
     let subdomain = domain?.split('.')?.slice(0, -2)?.join('.');
 
+    const aTabVisible =
+        !isCloud &&
+        !!$regionalConsoleVariables._APP_DOMAIN_TARGET_A &&
+        $regionalConsoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1';
+    const aaaaTabVisible =
+        !isCloud &&
+        !!$regionalConsoleVariables._APP_DOMAIN_TARGET_AAAA &&
+        $regionalConsoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1';
+
     function setTarget() {
         switch (variant) {
             case 'cname':
@@ -37,15 +51,23 @@
             <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 record on your DNS provider. Note that DNS changes may take up to 48
+            hours to propagate fully.
         </Typography.Text>
     </Layout.Stack>
 
@@ -62,17 +84,50 @@
                 <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={$regionalConsoleVariables._APP_DOMAIN_TARGET_CAA.includes(' ')
+                            ? $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA
+                            : `0 issue "${$regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}"`} />
+                </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

@@ -87,3 +87,4 @@ export { default as ExpirationInput } from './expirationInput.svelte';
 export { default as EstimatedCard } from './estimatedCard.svelte';
 export { default as EmailVerificationBanner } from './alerts/emailVerificationBanner.svelte';
 export { default as SortButton, type SortDirection } from './sortButton.svelte';
+export * from './domains';

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/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/add-domain/+page.svelte

@@ -48,24 +48,16 @@
 
     async function addDomain() {
         const apexDomain = getApexDomain(domainName);
-        let domain = data.domains?.domains.find((d: Models.Domain) => d.domain === apexDomain);
+        let domain: Models.Domain;
 
-        if (apexDomain && !domain && isCloud) {
+        if (isCloud && apexDomain) {
             try {
                 domain = await sdk.forConsole.domains.create({
                     teamId: $project.teamId,
                     domain: apexDomain
                 });
             } catch (error) {
-                // apex might already be added on organization level, skip.
-                const alreadyAdded = error?.type === 'domain_already_exists';
-                if (!alreadyAdded) {
-                    addNotification({
-                        type: 'error',
-                        message: error.message
-                    });
-                    return;
-                }
+                // Empty as domain creation error needs to be silent
             }
         }
 
@@ -100,10 +92,15 @@
             if (rule?.status === 'verified') {
                 await goto(routeBase);
                 await invalidate(Dependencies.FUNCTION_DOMAINS);
+                if (isCloud) {
+                    try {
+                        await sdk.forConsole.domains.updateNameservers({ domainId: domain.$id });
+                    } catch (error) {
+                        // Empty as domain update error needs to be silent
+                    }
+                }
             } else {
-                await goto(
-                    `${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}&domain=${domain.$id}`
-                );
+                await goto(`${routeBase}/add-domain/verify-${domainName}?rule=${rule.$id}`);
                 await invalidate(Dependencies.FUNCTION_DOMAINS);
             }
         } catch (error) {