From dcc8d89de4a60366c82d0e5ba95c15d5b9ac332d Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 19 Mar 2025 14:04:49 +0100 Subject: [PATCH] feat: add domain flow sites --- src/lib/stores/domains.ts | 22 ++ .../sites/site-[site]/domains/+page.svelte | 117 +---------- .../domains/add-domain/+page.svelte | 197 ++++++------------ .../site-[site]/domains/add-domain/+page.ts | 4 +- .../add-domain/verificationFieldset.svelte | 136 ++++++++++++ .../domains/add-domain/verify/+page.svelte | 182 ---------------- .../domains/add-domain/verify/+page.ts | 16 -- .../sites/site-[site]/domains/store.ts | 25 +++ .../sites/site-[site]/domains/table.svelte | 110 ++++++++++ .../sites/site-[site]/domainsOverview.svelte | 3 +- 10 files changed, 361 insertions(+), 451 deletions(-) create mode 100644 src/lib/stores/domains.ts create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verificationFieldset.svelte delete mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify/+page.svelte delete mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify/+page.ts create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/domains/store.ts create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte diff --git a/src/lib/stores/domains.ts b/src/lib/stores/domains.ts new file mode 100644 index 000000000..82f716700 --- /dev/null +++ b/src/lib/stores/domains.ts @@ -0,0 +1,22 @@ +export const statusCodeOptions = [ + { + label: '301 Moved permanently', + value: 301 + }, + { + label: '302 Found', + value: 302 + }, + { + label: '303 See other', + value: 303 + }, + { + label: '307 Temporary redirect', + value: 307 + }, + { + label: '308 Permanent redirect', + value: 308 + } +]; diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte index 28b425ca9..202c8040a 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte @@ -3,40 +3,16 @@ import { page } from '$app/stores'; import { EmptySearch, PaginationWithLimit } from '$lib/components/index.js'; import { Button } from '$lib/elements/forms'; - import Link from '$lib/elements/link.svelte'; import Container from '$lib/layout/container.svelte'; - import { protocol } from '$routes/(console)/store.js'; - import type { Models } from '@appwrite.io/console'; - import { - IconDotsHorizontal, - IconExternalLink, - IconPlus, - IconRefresh, - IconTrash - } from '@appwrite.io/pink-icons-svelte'; - import { - ActionMenu, - Card, - Empty, - Icon, - Layout, - Popover, - Table - } from '@appwrite.io/pink-svelte'; - import DeleteDomainModal from './deleteDomainModal.svelte'; - import RetryDomainModal from './retryDomainModal.svelte'; + import { IconPlus } from '@appwrite.io/pink-icons-svelte'; + import { Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte'; import SearchQuery from '$lib/components/searchQuery.svelte'; import { app } from '$lib/stores/app'; import { Click, trackEvent } from '$lib/actions/analytics'; - import CreatePreviewDomainModal from './createPreviewDomainModal.svelte'; + import Table from './table.svelte'; export let data; - let showDelete = false; - let showRetry = false; - let selectedDomain: Models.ProxyRule = null; - let showPreviewDomainModal = false; - $: console.log(data.domains); @@ -56,80 +32,7 @@ {#if data.domains.total} - - - Domain - Redirect to - Production branch - - - {#each data.domains.rules as domain} - - - - - {domain.domain} - - - - - - - {domain?.redirectUrl || 'No redirect'} - {domain?.redirectStatusCode ? `(${domain.redirectStatusCode})` : ''} - - - {domain.deploymentVcsProviderBranch || '-'} - - - - - - - - - {#if domain.status !== 'verified'} - { - e.preventDefault(); - selectedDomain = domain; - showRetry = true; - toggle(e); - }}> - Retry - - {/if} - { - e.preventDefault(); - selectedDomain = domain; - showDelete = true; - toggle(e); - trackEvent(Click.DomainDeleteClick, { - source: 'sites_domain_overview' - }); - }}> - Delete - - - - - - - - {/each} - + {/if} - -{#if showDelete} - -{/if} - -{#if showRetry} - -{/if} - -{#if showPreviewDomainModal} - -{/if} diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/+page.svelte index bdc498a7a..62d8db83d 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/+page.svelte @@ -1,7 +1,7 @@ -
+ (step = 'verify')}> {#if step === 'add'} @@ -201,7 +132,7 @@ @@ -254,47 +185,37 @@ {/if} - + {:else if step === 'verify'} - - - - + + + + + - - {domain} - + + {domainName} + + + - - - + + + + {/if} - + - -{#if showConnectRepo} - -{/if} diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/+page.ts b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/+page.ts index 1105f8445..8f61acd19 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/+page.ts +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/+page.ts @@ -1,9 +1,11 @@ import { Query } from '@appwrite.io/console'; import { sdk } from '$lib/stores/sdk'; import { RuleTrigger, RuleType } from '$lib/stores/sdk'; +import { Dependencies } from '$lib/constants.js'; -export const load = async ({ parent }) => { +export const load = async ({ parent, depends }) => { const { site } = await parent(); + depends(Dependencies.DOMAINS); const [domains, installations] = await Promise.all([ sdk.forProject.proxy.listRules([ diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verificationFieldset.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verificationFieldset.svelte new file mode 100644 index 000000000..163e4b089 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verificationFieldset.svelte @@ -0,0 +1,136 @@ + + +
+ +
+ + {#if isSubDomain} + (selectedTab = 'cname')} + active={selectedTab === 'cname'}> + CNAME + + {/if} + + (selectedTab = 'nameserver')} + active={selectedTab === 'nameserver'}> + Nameservers + + + +
+ {#if selectedTab === 'cname' && isSubDomain} + + + + {domain} + + {#if verified} + + {:else if verified === false} + + {:else} + + {/if} + + + Add the following record on your DNS provider. Note that DNS changes may take + time to propagate fully. + + + + + + Type + Name + Value + + + CNAME + {domain} + + + {globalThis?.location?.origin} + + + + + + + A list of all domain providers and their DNS setting is available here. + + + {:else} + + + {domain} + + + + Add the following nameservers on your DNS provider. Note that DNS changes may + take time to propagate fully. + + + + + + Type + Value + + {#each nameserverList as nameserver} + + NS + + + {nameserver} + + + {/each} + + {/if} + +
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify/+page.svelte deleted file mode 100644 index 1c90b2e00..000000000 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify/+page.svelte +++ /dev/null @@ -1,182 +0,0 @@ - - - - {#if isVerified} - - - {data.domain.domain} - - - - {:else} -
- -
- - (selectedTab = 'cname')} - active={selectedTab === 'cname'}> - CNAME - - (selectedTab = 'nameserver')} - active={selectedTab === 'nameserver'}> - Nameservers - - - -
- {#if selectedTab === 'cname'} - - - {data.domain?.domain} - {#if isVerified} - - {:else} - - {/if} - - - Add the following record on your DNS provider. Note that DNS changes may - take time to propagate fully. - - - - - - Type - Name - Value - - - CNAME - {data.domain?.domain} - - - {globalThis?.location?.origin} - - - - - - - A list of all domain providers and their DNS setting is available here. - - - - - - - - {:else} - - - {data.domain?.domain} - - - - Add the following nameservers on your DNS provider. Note that DNS - changes may take time to propagate fully. - - - - - - Type - Value - - {#each nameservers as nameserver} - - NS - - - {nameserver} - - - {/each} - - - - - - - - {/if} - -
- {/if} - diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify/+page.ts b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify/+page.ts deleted file mode 100644 index eab359a42..000000000 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verify/+page.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { sdk } from '$lib/stores/sdk'; -import { isCloud } from '$lib/system'; - -export const load = async ({ params }) => { - if (isCloud) { - // if (params?.id) { - // return { - // domain: await sdk.forConsole.domains.get(params.id) - // }; - // } - } else { - return { - domain: undefined - }; - } -}; diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/store.ts b/src/routes/(console)/project-[project]/sites/site-[site]/domains/store.ts new file mode 100644 index 000000000..a31c0f7fd --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/store.ts @@ -0,0 +1,25 @@ +import type { Column } from '$lib/helpers/types'; +import { writable } from 'svelte/store'; + +export const columns = writable([ + { + id: 'domain', + title: 'Domain', + type: 'string', + format: 'string', + width: { min: 120, max: 400 } + }, + + { + id: 'redirectUrl', + title: 'Redirect to', + type: 'string', + width: { min: 120, max: 200 } + }, + { + id: 'deploymentVcsProviderBranch', + title: 'Production branch', + type: 'string', + width: { min: 70, max: 150 } + } +]); diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte new file mode 100644 index 000000000..f70b3e0bf --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte @@ -0,0 +1,110 @@ + + + + + {#each $columns as { id, title }} + + {title} + + {/each} + + + {#each domains.rules as domain} + + {#each $columns as column} + + {#if column.id === 'domain'} + + + {domain.domain} + + + {:else if column.id === 'redirectUrl'} + + {domain?.redirectUrl || 'No redirect'} + {domain?.redirectStatusCode ? `(${domain.redirectStatusCode})` : ''} + {:else if column.id === 'deploymentVcsProviderBranch'} + {domain.deploymentVcsProviderBranch || '-'} + {/if} + + {/each} + + + + + + + + {#if domain.status !== 'verified'} + { + e.preventDefault(); + selectedDomain = domain; + showRetry = true; + toggle(e); + }}> + Retry + + {/if} + { + e.preventDefault(); + selectedDomain = domain; + showDelete = true; + toggle(e); + trackEvent(Click.DomainDeleteClick, { + source: 'sites_domain_overview' + }); + }}> + Delete + + + + + + + + {/each} + + +{#if showDelete} + +{/if} + +{#if showRetry} + +{/if} + +{#if showPreviewDomainModal} + +{/if} diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte index ceed79b06..df0f19c39 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte @@ -11,13 +11,14 @@ import { Button } from '$lib/elements/forms'; import { Card, Trim } from '$lib/components'; import { Click, trackEvent } from '$lib/actions/analytics'; + import { RuleTrigger } from '$lib/stores/sdk'; export let proxyRuleList: Models.ProxyRuleList; let showDomainQR = false; let selectedDomainURL: string; - $: rules = proxyRuleList?.rules?.filter((rule) => rule.trigger === 'manual') ?? []; + $: rules = proxyRuleList?.rules?.filter((rule) => rule.trigger === RuleTrigger.MANUAL) ?? [];