feat: add tabs to retry domain

2026-06-06 19:27:48 +00:00 · 2025-04-10 16:02:14 +02:00
parent dfa5376496
commit fbc4ded1c9
6 changed files with 98 additions and 83 deletions
@@ -7,7 +7,7 @@
    export let verified = false;

    const nameserverList = $consoleVariables?._APP_DOMAINS_NAMESERVERS
-        ? $consoleVariables?._APP_DOMAINS_NAMESERVERS.split(',')
+        ? $consoleVariables?._APP_DOMAINS_NAMESERVERS?.split(',')
        : ['ns1.appwrite.io', 'ns2.appwrite.io'];
 </script>

@@ -15,7 +15,7 @@
    export let verified = false;
    export let variant: 'cname' | 'a' | 'aaaa';

-    let subdomain = domain.split('.').slice(0, -2).join('.');
+    let subdomain = domain?.split('.')?.slice(0, -2)?.join('.');

    function setTarget() {
        switch (variant) {
@@ -9,7 +9,6 @@
        Tabs,
        Typography
    } from '@appwrite.io/pink-svelte';
-    import VerificationFieldset from './verificationFieldset.svelte';
    import { Button, Form } from '$lib/elements/forms';
    import { sdk } from '$lib/stores/sdk';
    import { organization } from '$lib/stores/organization';
@@ -28,8 +27,10 @@
    let { data } = $props();

    const ruleId = page.url.searchParams.get('rule');
+    let isSubDomain = $derived(page.params.domain?.split('.')?.length >= 3);
+
    let selectedTab: 'cname' | 'nameserver' | 'a' | 'aaaa' = $state(
-        !!$consoleVariables._APP_DOMAIN_TARGET_CNAME
+        !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain
            ? 'cname'
            : !!$consoleVariables._APP_DOMAIN_TARGET_A
              ? 'a'
@@ -41,7 +42,6 @@

    let routeBase = `${base}/project-${page.params.project}/sites/site-${page.params.site}/domains`;
    let isSubmitting = $state(writable(false));
-    let isSubDomain = $derived(page.params.domain?.split('.')?.length >= 3);

    async function verify() {
        const isNewDomain =
@@ -1,63 +0,0 @@
-<script lang="ts">
-    import CnameTable from '$lib/components/domains/cnameTable.svelte';
-    import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
-    import RecordTable from '$lib/components/domains/recordTable.svelte';
-    import { isCloud, isSelfHosted } from '$lib/system';
-    import { consoleVariables } from '$routes/(console)/store';
-    import { Divider, Fieldset, Layout, Tabs } from '@appwrite.io/pink-svelte';
-
-    export let domain: string;
-    export let verified: boolean;
-
-    $: isSubDomain = domain?.split('.')?.length >= 3;
-    export let selectedTab: 'cname' | 'nameserver' | 'a' | 'aaaa' =
-        isSubDomain || isSelfHosted ? 'cname' : 'nameserver';
-</script>
-
-<Fieldset legend="Verification">
-    <Layout.Stack gap="xl">
-        <div>
-            <Tabs.Root variant="secondary" let:root>
-                {#if isSubDomain}
-                    <Tabs.Item.Button
-                        {root}
-                        on:click={() => (selectedTab = 'cname')}
-                        active={selectedTab === 'cname'}>
-                        CNAME
-                    </Tabs.Item.Button>
-                {/if}
-                {#if isCloud}
-                    <Tabs.Item.Button
-                        {root}
-                        on:click={() => (selectedTab = 'nameserver')}
-                        active={selectedTab === 'nameserver'}>
-                        Nameservers
-                    </Tabs.Item.Button>
-                {/if}
-                {#if !!$consoleVariables._APP_DOMAIN_TARGET_A && $consoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1'}
-                    <Tabs.Item.Button
-                        {root}
-                        on:click={() => (selectedTab = 'a')}
-                        active={selectedTab === 'a'}>
-                        A
-                    </Tabs.Item.Button>
-                {/if}
-                {#if !!$consoleVariables._APP_DOMAIN_TARGET_AAAA && $consoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1'}
-                    <Tabs.Item.Button
-                        {root}
-                        on:click={() => (selectedTab = 'aaaa')}
-                        active={selectedTab === 'aaaa'}>
-                        AAAA
-                    </Tabs.Item.Button>
-                {/if}
-            </Tabs.Root>
-            <Divider />
-        </div>
-        {#if selectedTab === 'nameserver'}
-            <NameserverTable {domain} {verified} />
-        {:else}
-            <RecordTable {domain} {verified} variant={selectedTab} />
-        {/if}
-        <slot />
-    </Layout.Stack>
-</Fieldset>
@@ -7,16 +7,42 @@
    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
    import { Dependencies } from '$lib/constants';
    import type { Models } from '@appwrite.io/console';
-    import CnameTable from '$lib/components/domains/cnameTable.svelte';
+    import { Divider, Tabs } from '@appwrite.io/pink-svelte';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { isCloud } from '$lib/system';
+    import { page } from '$app/state';
+    import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
+    import RecordTable from '$lib/components/domains/recordTable.svelte';

-    export let show = false;
-    export let selectedDomain: Models.ProxyRule;
+    let {
+        show = $bindable(false),
+        selectedDomain
+    }: {
+        show: boolean;
+        selectedDomain: Models.ProxyRule;
+    } = $props();

-    let error = null;
+    let isSubDomain = $derived.by(() =>
+        selectedDomain?.domain?.length ? selectedDomain?.domain?.split('.')?.length >= 3 : false
+    );
+    let selectedTab: 'cname' | 'nameserver' | 'a' | 'aaaa' = $state(
+        !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain
+            ? 'cname'
+            : !!$consoleVariables._APP_DOMAIN_TARGET_A
+              ? 'a'
+              : !!$consoleVariables._APP_DOMAIN_TARGET_AAAA
+                ? 'aaaa'
+                : 'nameserver'
+    );
+
+    let verified = $state(false);
+
+    let error = $state(null);
    async function retryDomain() {
        try {
-            await sdk.forProject.proxy.updateRuleVerification(selectedDomain.$id);
+            const domain = await sdk.forProject.proxy.updateRuleVerification(selectedDomain.$id);
            await invalidate(Dependencies.SITES_DOMAINS);
+            verified = domain.status === 'verified';
            show = false;
            addNotification({
                type: 'success',
@@ -29,16 +55,55 @@
        }
    }

-    $: if (!show) {
-        error = null;
-    }
+    $effect(() => {
+        if (!show) {
+            error = null;
+        }
+    });
 </script>

 <Modal title="Retry verification" bind:show onSubmit={retryDomain} bind:error>
-    {#if selectedDomain}
-        <CnameTable
-            domain={selectedDomain.domain}
-            verified={selectedDomain.status === 'verified'} />
+    <div>
+        <Tabs.Root variant="secondary" let:root>
+            {#if isSubDomain && !!$consoleVariables._APP_DOMAIN_TARGET_CNAME && $consoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
+                <Tabs.Item.Button
+                    {root}
+                    on:click={() => (selectedTab = 'cname')}
+                    active={selectedTab === 'cname'}>
+                    CNAME
+                </Tabs.Item.Button>
+            {/if}
+            {#if isCloud}
+                <Tabs.Item.Button
+                    {root}
+                    on:click={() => (selectedTab = 'nameserver')}
+                    active={selectedTab === 'nameserver'}>
+                    Nameservers
+                </Tabs.Item.Button>
+            {/if}
+            {#if !!$consoleVariables._APP_DOMAIN_TARGET_A && $consoleVariables._APP_DOMAIN_TARGET_A !== '127.0.0.1'}
+                <Tabs.Item.Button
+                    {root}
+                    on:click={() => (selectedTab = 'a')}
+                    active={selectedTab === 'a'}>
+                    A
+                </Tabs.Item.Button>
+            {/if}
+            {#if !!$consoleVariables._APP_DOMAIN_TARGET_AAAA && $consoleVariables._APP_DOMAIN_TARGET_AAAA !== '::1'}
+                <Tabs.Item.Button
+                    {root}
+                    on:click={() => (selectedTab = 'aaaa')}
+                    active={selectedTab === 'aaaa'}>
+                    AAAA
+                </Tabs.Item.Button>
+            {/if}
+        </Tabs.Root>
+        <Divider />
+    </div>
+    {#if selectedTab === 'nameserver'}
+        <NameserverTable domain={selectedDomain.domain} {verified} />
+    {:else}
+        <RecordTable domain={selectedDomain.domain} {verified} variant={selectedTab} />
    {/if}

    <svelte:fragment slot="footer">
@@ -5,7 +5,15 @@
    import { protocol } from '$routes/(console)/store';
    import type { Models } from '@appwrite.io/console';
    import { IconDotsHorizontal, IconRefresh, IconTrash } from '@appwrite.io/pink-icons-svelte';
-    import { ActionMenu, Icon, Layout, Popover, Table, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        ActionMenu,
+        Badge,
+        Icon,
+        Layout,
+        Popover,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
    import DeleteDomainModal from './deleteDomainModal.svelte';
    import RetryDomainModal from './retryDomainModal.svelte';
    import { columns } from './store';
@@ -34,6 +42,13 @@
                        <Link external href={`${$protocol}${domain.domain}`} variant="quiet" icon>
                            <Typography.Text truncate>
                                {domain.domain}
+                                {#if domain.status !== 'verified'}
+                                    <Badge
+                                        variant="secondary"
+                                        type="error"
+                                        content="Verification failed"
+                                        size="s" />
+                                {/if}
                            </Typography.Text>
                        </Link>
                    {:else if column.id === 'target'}
@@ -64,7 +79,6 @@
                                    <ActionMenu.Item.Button
                                        leadingIcon={IconRefresh}
                                        on:click={(e) => {
-                                            e.preventDefault();
                                            selectedDomain = domain;
                                            showRetry = true;
                                            toggle(e);
@@ -76,7 +90,6 @@
                                    status="danger"
                                    leadingIcon={IconTrash}
                                    on:click={(e) => {
-                                        e.preventDefault();
                                        selectedDomain = domain;
                                        showDelete = true;
                                        toggle(e);