diff --git a/src/lib/stores/domains.ts b/src/lib/stores/domains.ts index 348e10c9b7..3c776b486a 100644 --- a/src/lib/stores/domains.ts +++ b/src/lib/stores/domains.ts @@ -1,5 +1,8 @@ +import { writable } from 'svelte/store'; import { StatusCode } from '@appwrite.io/console'; +export const hideTypes = writable(false); + export const statusCodeOptions = [ { label: '301 Moved permanently', diff --git a/src/lib/studio/domainsTable.svelte b/src/lib/studio/domainsTable.svelte new file mode 100644 index 0000000000..c546518d76 --- /dev/null +++ b/src/lib/studio/domainsTable.svelte @@ -0,0 +1,224 @@ + + + + + Domain + + + {#if loading} + {#each Array(2) as _} + + + + + + + + + + + + + {/each} + {:else if proxyRules && proxyRules.total > 0} + {#each proxyRules.rules as rule} + + + + + + + {rule.domain} + + + + + + {#if rule.status === 'verifying'} + + {:else if rule.status !== 'verified'} + + {/if} + + + + + + + + {@render domainActions(rule, toggle)} + + + + + {/each} + {/if} + + + + + + +{#if showDelete} + +{/if} + +{#if showRetry} + +{/if} + +{#snippet domainActions(rule: Models.ProxyRule, toggle: () => void)} + + + Open domain + + {#if rule.status !== 'verified' && rule.status !== 'verifying'} + { + selectedProxyRule = rule; + showRetry = true; + toggle(); + }}> + Retry + + +
+ +
+ {/if} + + { + selectedProxyRule = rule; + showDelete = true; + toggle(); + trackEvent(Click.DomainDeleteClick, { + source: 'studio_manage_domains' + }); + }}> + Delete + + +{/snippet} + + diff --git a/src/lib/studio/studio-widget.ts b/src/lib/studio/studio-widget.ts index 3271400d7d..79495883a0 100644 --- a/src/lib/studio/studio-widget.ts +++ b/src/lib/studio/studio-widget.ts @@ -278,7 +278,11 @@ export function hideStudio() { export async function initImagine( region: string, projectId: string, - callbacks?: { onProjectNameChange?: (name: string) => void } + callbacks?: { + onProjectNameChange: () => void; + onAddDomain: () => void | Promise; + onManageDomains: (primaryDomain?: string) => void | Promise; + } ) { try { const { initImagineConfig, initImagineRouting } = await getWebComponents(); diff --git a/src/lib/studio/studio.svelte b/src/lib/studio/studio.svelte index ddc65d5c88..69b891bb5b 100644 --- a/src/lib/studio/studio.svelte +++ b/src/lib/studio/studio.svelte @@ -5,12 +5,28 @@ + + + + + Active domain + + + + + {primaryDomainForSite} + + + + + + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte index f0b6df34a3..ed408f97dd 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte @@ -6,7 +6,7 @@ import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { Fieldset, Layout, Tooltip, Icon, Input, Alert } from '@appwrite.io/pink-svelte'; - import { goto, invalidate } from '$app/navigation'; + import { afterNavigate, goto, invalidate } from '$app/navigation'; import { Dependencies } from '$lib/constants'; import { sortBranches } from '$lib/stores/vcs'; import { IconInfo } from '@appwrite.io/pink-icons-svelte'; @@ -19,7 +19,7 @@ ProxyResourceType, StatusCode } from '@appwrite.io/console'; - import { statusCodeOptions } from '$lib/stores/domains'; + import { statusCodeOptions, hideTypes } from '$lib/stores/domains'; import { writable } from 'svelte/store'; import { onMount } from 'svelte'; import { ConnectRepoModal } from '$lib/components/git/index.js'; @@ -29,10 +29,9 @@ } from '$routes/(console)/project-[region]-[project]/store'; import { isCloud } from '$lib/system'; import { getApexDomain } from '$lib/helpers/tlds'; + import type { PageProps } from './$types'; - const routeBase = `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains`; - - let { data } = $props(); + let { data, params }: PageProps = $props(); let formComponent: Form; let isSubmitting = $state(writable(false)); @@ -43,7 +42,18 @@ let branch: string = $state(null); let statusCode = $state(StatusCode.TemporaryRedirect307); + let routeBase = `${base}/project-${params.region}-${params.project}/sites/site-${params.site}/domains`; + let previousPage = $state(routeBase); + + afterNavigate(({ from }) => { + if ($hideTypes) { + previousPage = from?.url?.pathname || routeBase; + } + }); + onMount(() => { + hideTypes.set(page.url.searchParams.get('types') === 'false'); + if ( page.url.searchParams.has('connectRepo') && page.url.searchParams.get('connectRepo') === 'true' @@ -83,32 +93,30 @@ try { let rule: Models.ProxyRule; if (behaviour === 'BRANCH') { - rule = await sdk - .forProject(page.params.region, page.params.project) - .proxy.createSiteRule({ - domain: domainName, - siteId: page.params.site, - branch - }); + rule = await sdk.forProject(params.region, params.project).proxy.createSiteRule({ + domain: domainName, + siteId: params.site, + branch + }); } else if (behaviour === 'REDIRECT') { rule = await sdk - .forProject(page.params.region, page.params.project) + .forProject(params.region, params.project) .proxy.createRedirectRule({ domain: domainName, url: redirect, statusCode, - resourceId: page.params.site, + resourceId: params.site, resourceType: ProxyResourceType.Site }); } else if (behaviour === 'ACTIVE') { - rule = await sdk - .forProject(page.params.region, page.params.project) - .proxy.createSiteRule({ - domain: domainName, - siteId: page.params.site - }); + rule = await sdk.forProject(params.region, params.project).proxy.createSiteRule({ + domain: domainName, + siteId: params.site + }); } if (rule?.status === 'verified') { + hideTypes.set(false); + await goto(routeBase); await invalidate(Dependencies.SITES_DOMAINS); } else { @@ -125,7 +133,7 @@ async function connect(selectedInstallationId: string, selectedRepository: string) { try { - await sdk.forProject(page.params.region, page.params.project).sites.update({ + await sdk.forProject(params.region, params.project).sites.update({ siteId: data.site.$id, name: data.site.name, framework: data.site.framework as Framework, @@ -143,14 +151,14 @@ providerBranch: 'main' }); - invalidate(Dependencies.SITE); + await invalidate(Dependencies.SITE); } catch { return; } } - +
@@ -173,93 +181,98 @@ placeholder="appwrite.example.com" />
- - - Point this domain to the latest deployed version. - - - Point this domain to a specific branch in your repository. - - - Forward all traffic from this domain to another URL. - - + {#if !$hideTypes} + + + Point this domain to the latest deployed version. + + + Point this domain to a specific branch in your repository. + + + Forward all traffic from this domain to another URL. + + - {#if behaviour === 'BRANCH'} -
- - {#if data.site?.providerRepositoryId} - {@const sortedBranches = sortBranches(data.branches.branches)} - {@const options = sortedBranches.map((branch) => ({ - label: branch.name, - value: branch.name - }))} - - + + {#if data.site?.providerRepositoryId} + {@const sortedBranches = sortBranches(data.branches.branches)} + {@const options = sortedBranches.map((branch) => ({ + label: branch.name, + value: branch.name + }))} + + { + branch = event.detail.value; + }} + {options} /> + {#if !data.branches?.total} + + No branches found in the selected repository. Create a + branch to see it here. + + {/if} + + {:else} + { - branch = event.detail.value; - }} - {options} /> - {#if !data.branches?.total} - - No branches found in the selected repository. Create a - branch to see it here. - - {/if} - - {:else} + id="branch" + required + value="main" + placeholder="Select branch" /> + + +

+ The domain will be connected to your active deployment. + Connect your Git repository to link a production branch. +

+
+ +
+ + + {/if} + +
+ {:else if behaviour === 'REDIRECT'} +
+ + + + + Redirect your domain to this URL. + + - - -

- The domain will be connected to your active deployment. - Connect your Git repository to link a production branch. -

-
- -
- - - {/if} - -
- {:else if behaviour === 'REDIRECT'} -
- - - - - Redirect your domain to this URL. - - - - -
+ bind:value={statusCode} + placeholder="Select status code" /> + + + {/if} {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte index 8422d783a0..41e6dfad42 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte @@ -13,6 +13,7 @@ import { sdk } from '$lib/stores/sdk'; import { organization } from '$lib/stores/organization'; import { addNotification } from '$lib/stores/notifications'; + import { hideTypes } from '$lib/stores/domains'; import { goto, invalidate } from '$app/navigation'; import { Dependencies } from '$lib/constants'; import { isCloud } from '$lib/system'; @@ -24,6 +25,7 @@ import RecordTable from '$lib/components/domains/recordTable.svelte'; import NameserverTable from '$lib/components/domains/nameserverTable.svelte'; import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store'; + import { onDestroy } from 'svelte'; let { data } = $props(); @@ -76,6 +78,7 @@ type: 'success', message: 'Domain added successfully' }); + await goto(routeBase); await invalidate(Dependencies.DOMAINS); await invalidate(Dependencies.SITES_DOMAINS); @@ -95,8 +98,12 @@ .forProject(page.params.region, page.params.project) .proxy.deleteRule({ ruleId }); } - await goto(`${routeBase}/add-domain?domain=${page.params.domain}`); + + const typesParam = $hideTypes ? '&types=false' : ''; + await goto(`${routeBase}/add-domain?domain=${page.params.domain}${typesParam}`); } + + onDestroy(() => hideTypes.set(false));