From 1dd15b17cba2a896265064fbdb543cc706e02381 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 28 Feb 2025 11:55:01 +0100
Subject: [PATCH] domains flow, fixes to sites

---
 .../domains/+page.svelte                      | 31 ++--------
 .../domains/add-domain/+page.svelte           | 56 +++++--------------
 .../certificateInfoModal.svelte               |  0
 .../deleteCertificateModal.svelte             |  0
 .../disabledPage.svelte}                      |  0
 .../disabledPage.ts}                          |  0
 .../domains/domain-[domain]/header.svelte     | 10 ++--
 .../domains/domain-[domain]/table.svelte      | 12 +---
 .../domains/recordsCard.svelte                | 41 ++++++++++----
 .../deployments/deleteDeploymentModal.svelte  |  7 ++-
 10 files changed, 62 insertions(+), 95 deletions(-)
 rename src/routes/(console)/organization-[organization]/domains/domain-[domain]/{certificates => (certificates)}/certificateInfoModal.svelte (100%)
 rename src/routes/(console)/organization-[organization]/domains/domain-[domain]/{certificates => (certificates)}/deleteCertificateModal.svelte (100%)
 rename src/routes/(console)/organization-[organization]/domains/domain-[domain]/{certificates/+page.svelte => (certificates)/disabledPage.svelte} (100%)
 rename src/routes/(console)/organization-[organization]/domains/domain-[domain]/{certificates/+page.ts => (certificates)/disabledPage.ts} (100%)

diff --git a/src/routes/(console)/organization-[organization]/domains/+page.svelte b/src/routes/(console)/organization-[organization]/domains/+page.svelte
index ea30ac199..2eeff4d7d 100644
--- a/src/routes/(console)/organization-[organization]/domains/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/+page.svelte
@@ -7,7 +7,6 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Container from '$lib/layout/container.svelte';
     import { protocol } from '$routes/(console)/store.js';
-    import type { Models } from '@appwrite.io/console';
     import {
         IconDotsHorizontal,
         IconExternalLink,
@@ -17,7 +16,6 @@
     } from '@appwrite.io/pink-icons-svelte';
     import {
         ActionMenu,
-        Badge,
         Card,
         Empty,
         Icon,
@@ -30,20 +28,15 @@
     import { queries } from '$lib/components/filters';
     import SearchQuery from '$lib/components/searchQuery.svelte';
     import { app } from '$lib/stores/app';
+    import type { Domain } from '$lib/sdk/domains';
 
     export let data;
 
     let showDelete = false;
     let showRetry = false;
-    let selectedDomain: Models.Domain = null;
+    let selectedDomain: Domain = null;
 
     $: console.log(data.domains);
-
-    // TODO: replace status once backend is fixed
-    // created - Verification Failed
-    // verified - Verification OK , Certificate OK
-    // verifying - Verifiacitok OK
-    // unverified - Verificaiton OK , Certificate Failed
 </script>
 
 <Container>
@@ -81,24 +74,12 @@
                                     <Icon icon={IconExternalLink} size="s" />
                                 </Layout.Stack>
                             </Link>
-                            {#if !domain.verified}
-                                <Badge
-                                    size="s"
-                                    variant="secondary"
-                                    content="Verification failed"
-                                    type="error" />
-                            {:else if domain.status === 'veryfing'}
-                                <Badge
-                                    size="s"
-                                    variant="secondary"
-                                    content="Pending verification"
-                                    type="warning" />
-                            {/if}
                         </Layout.Stack>
                     </Table.Cell>
                     <Table.Cell>{domain?.registrar || '-'}</Table.Cell>
                     <Table.Cell>{domain?.nameservers || '-'}</Table.Cell>
-                    <Table.Cell>{domain?.expiry || '-'}</Table.Cell>
+                    <Table.Cell>
+                        {domain?.expiry ? toLocaleDateTime(domain.expiry) : '-'}</Table.Cell>
                     <Table.Cell>
                         {domain.renewal ? toLocaleDateTime(domain.renewal) : '-'}
                     </Table.Cell>
@@ -199,6 +180,6 @@
     <DeleteDomainModal show={showDelete} {selectedDomain} />
 {/if}
 
-{#if showRetry}
+<!-- {#if showRetry}
     <RetryDomainModal show={showRetry} {selectedDomain} />
-{/if}
+{/if} -->
diff --git a/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte b/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte
index 812ea1dca..35508e113 100644
--- a/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte
@@ -1,35 +1,27 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import Card from '$lib/components/card.svelte';
     import { Button, Form } from '$lib/elements/forms';
     import { InputDomain } from '$lib/elements/forms/index.js';
     import { Wizard } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { type Models } from '@appwrite.io/console';
-    import {
-        Badge,
-        Divider,
-        Fieldset,
-        Layout,
-        Typography,
-        Spinner
-    } from '@appwrite.io/pink-svelte';
+    import { Divider, Fieldset, Layout } from '@appwrite.io/pink-svelte';
     import RecordsCard from '../recordsCard.svelte';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import type { Domain } from '$lib/sdk/domains';
 
-    const backPage = `${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains`;
+    const backPage = `${base}/project-${$page.params.organization}/domains`;
 
     let domain = '';
-    let domainData: Models.Domain;
+    let domainData: Domain;
 
     async function addDomain() {
         try {
             domainData = await sdk.forConsole.domains.create($page.params.organization, domain);
             console.log(domainData);
-            invalidate(Dependencies.SITES_DOMAINS);
+            invalidate(Dependencies.DOMAINS);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -65,35 +57,13 @@
 
 <Wizard title="Add domain" href={backPage} column columnSize="s" hideFooter={!domainData}>
     {#if domainData}
-        {#if domainData.status === 'created'}
-            <RecordsCard domain={domainData}>
-                <Divider />
-                <Layout.Stack direction="row" justifyContent="flex-end">
-                    <Button text on:click={back}>Back</Button>
-                    <Button secondary on:click={verifyStatus}>Verify</Button>
-                </Layout.Stack>
-            </RecordsCard>
-        {:else if domainData.status === 'verifying'}
-            <Card radius="s">
-                <Layout.Stack gap="s" direction="row" alignItems="center">
-                    <Typography.Text variant="l-500">{domainData.domain}</Typography.Text>
-                    <Badge variant="secondary" type="success" content="Verified" />
-                    <Badge variant="secondary" content="Generating certificate...">
-                        <svelte:fragment slot="start">
-                            <Spinner size="s" />
-                        </svelte:fragment>
-                    </Badge>
-                </Layout.Stack>
-            </Card>
-        {:else if domainData.status === 'verified'}
-            <Card radius="s">
-                <Layout.Stack gap="s" direction="row" alignItems="center">
-                    <Typography.Text variant="l-500">{domainData.domain}</Typography.Text>
-                    <Badge variant="secondary" type="success" content="Verified" />
-                    <Badge variant="secondary" type="success" content="Generated certificate" />
-                </Layout.Stack>
-            </Card>
-        {/if}
+        <RecordsCard domain={domainData}>
+            <Divider />
+            <Layout.Stack direction="row" justifyContent="flex-end">
+                <Button text on:click={back}>Back</Button>
+                <Button secondary on:click={verifyStatus}>Verify</Button>
+            </Layout.Stack>
+        </RecordsCard>
     {:else}
         <Fieldset legend="Configuration">
             <Form onSubmit={addDomain}>
@@ -104,7 +74,7 @@
                         name="domain"
                         bind:value={domain}
                         required
-                        placeholder="appwrite.example.com" />
+                        placeholder="example.com" />
 
                     <Divider />
                     <Layout.Stack alignItems="flex-end">
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/certificateInfoModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/certificateInfoModal.svelte
similarity index 100%
rename from src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/certificateInfoModal.svelte
rename to src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/certificateInfoModal.svelte
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/deleteCertificateModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/deleteCertificateModal.svelte
similarity index 100%
rename from src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/deleteCertificateModal.svelte
rename to src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/deleteCertificateModal.svelte
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/+page.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte
similarity index 100%
rename from src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/+page.svelte
rename to src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/+page.ts b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.ts
similarity index 100%
rename from src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/+page.ts
rename to src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.ts
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/header.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/header.svelte
index 5aab35a75..f3f80bc25 100644
--- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/header.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/header.svelte
@@ -14,11 +14,11 @@
             title: 'DNS records',
             event: 'dns-records'
         },
-        {
-            href: `${path}/certificates`,
-            title: 'Certificates',
-            event: 'certificates'
-        },
+        // {
+        //     href: `${path}/certificates`,
+        //     title: 'Certificates',
+        //     event: 'certificates'
+        // },
         {
             href: `${path}/settings`,
             title: 'Settings',
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte
index 5e093cdd6..e93e56ac9 100644
--- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { PaginationWithLimit } from '$lib/components';
-
     import {
         ActionMenu,
         Button,
@@ -14,16 +13,16 @@
     import { IconDotsHorizontal, IconPencil, IconTrash } from '@appwrite.io/pink-icons-svelte';
     import { columns } from './store';
     import { timeFromNow } from '$lib/helpers/date';
-    import type { Models } from '@appwrite.io/console';
     import DeleteRecordModal from './deleteRecordModal.svelte';
     import { capitalize } from '$lib/helpers/string';
     import EditRecordModal from './editRecordModal.svelte';
+    import type { DnsRecord } from '$lib/sdk/domains';
 
     export let data;
 
     let showEdit = false;
     let showDelete = false;
-    let selectedRecord: Models.DnsRecord = null;
+    let selectedRecord: DnsRecord = null;
 </script>
 
 <Layout.Stack>
@@ -57,12 +56,7 @@
                             </Table.Cell>
                         {:else if column.id === 'value'}
                             <Table.Cell>
-                                <div>
-                                    <InteractiveText
-                                        variant="secret"
-                                        text={record.value}
-                                        isVisible />
-                                </div>
+                                <InteractiveText variant="secret" text={record.value} isVisible />
                             </Table.Cell>
                         {:else if column.id === 'ttl'}
                             <Table.Cell>
diff --git a/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte b/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
index 1831e9cc3..f1c362267 100644
--- a/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
@@ -1,11 +1,22 @@
 <script lang="ts">
     import { Copy } from '$lib/components';
     import { Link } from '$lib/elements';
-    import type { Models } from '@appwrite.io/console';
-    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import type { Domain } from '$lib/sdk/domains';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { IconDuplicate, IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { Badge, Layout, Typography, Table, Fieldset, Icon } from '@appwrite.io/pink-svelte';
 
-    export let domain: Models.ProxyRule;
+    export let domain: Domain;
+
+    $: console.log($consoleVariables._APP_DOMAINS_NAMESERVERS);
+
+    // TODO: split _APP_DOMAINS_NAMESERVERS?
+    let nameservers = $consoleVariables?._APP_DOMAINS_NAMESERVERS ?? [
+        'ns1.appwrite.io',
+        'ns2.appwrite.io'
+    ];
+
+    $: verified = domain.nameservers === nameservers;
 </script>
 
 <Fieldset legend="Verification">
@@ -14,6 +25,7 @@
             <Layout.Stack gap="s">
                 <Layout.Stack gap="s" direction="row" alignItems="center">
                     <Typography.Text variant="l-500">{domain.domain}</Typography.Text>
+
                     <Badge variant="secondary" type="warning" content="Pending verification" />
                 </Layout.Stack>
                 <Typography.Text variant="m-400">
@@ -25,17 +37,22 @@
             <Table.Root>
                 <svelte:fragment slot="header">
                     <Table.Header.Cell>Type</Table.Header.Cell>
-                    <Table.Header.Cell>Name</Table.Header.Cell>
                     <Table.Header.Cell>Value</Table.Header.Cell>
+                    <Table.Header.Cell />
                 </svelte:fragment>
-                <Table.Row>
-                    <Table.Cell>CNAME</Table.Cell>
-                    <Table.Cell>{domain.domain}</Table.Cell>
-                    <Table.Cell>
-                        <Copy value={globalThis?.location?.origin}
-                            >{globalThis?.location?.origin}</Copy>
-                    </Table.Cell>
-                </Table.Row>
+                {#each nameservers as nameserver}
+                    <Table.Row>
+                        <Table.Cell>NS</Table.Cell>
+                        <Table.Cell>{nameserver}</Table.Cell>
+                        <Table.Cell>
+                            <Layout.Stack alignItems="flex-end">
+                                <Copy value={nameserver}>
+                                    <Icon icon={IconDuplicate} />
+                                </Copy>
+                            </Layout.Stack>
+                        </Table.Cell>
+                    </Table.Row>
+                {/each}
             </Table.Root>
             <Layout.Stack gap="s" direction="row" alignItems="center">
                 <Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" />
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
index 9ac0ca240..d1651ae95 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
@@ -17,6 +19,9 @@
                 selectedDeployment.$id
             );
             await invalidate(Dependencies.SITE);
+            await goto(
+                `${base}/project-${$page.params.project}/sites/site-${$page.params.site}/deployments`
+            );
             showDelete = false;
             addNotification({
                 type: 'success',