diff --git a/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte b/src/lib/components/git/connectRepoModal.svelte similarity index 68% rename from src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte rename to src/lib/components/git/connectRepoModal.svelte index f3076c282..17397c8f6 100644 --- a/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte +++ b/src/lib/components/git/connectRepoModal.svelte @@ -4,32 +4,38 @@ import { Icon, Layout } from '@appwrite.io/pink-svelte'; import { installation, repository } from '$lib/stores/vcs'; import { sdk } from '$lib/stores/sdk'; - import { createEventDispatcher, onMount } from 'svelte'; + import { onMount } from 'svelte'; import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte'; import { Link } from '$lib/elements'; import { NewRepository, Repositories } from '$lib/components/git'; import ConnectGit from '$lib/components/git/connectGit.svelte'; - import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console'; import { addNotification } from '$lib/stores/notifications'; import { Click, trackEvent } from '$lib/actions/analytics'; - import { invalidate } from '$app/navigation'; - import { Dependencies } from '$lib/constants'; import RepositoryBehaviour from '$lib/components/git/repositoryBehaviour.svelte'; - const dispatch = createEventDispatcher(); + let { + show = $bindable(false), + product, + callbackState = null, + onlyExisting = false, + connect = async () => {} + }: { + show?: boolean; + product: 'functions' | 'sites'; + callbackState?: Record; + onlyExisting?: boolean; + connect?: (installationId: string, repositoryId: string) => Promise; + } = $props(); - export let show = false; - export let site: Models.Site; - export let callbackState: Record = null; - export let onlyExisting = false; - - let repositoryBehaviour: 'new' | 'existing' | undefined = onlyExisting ? 'existing' : undefined; - let repositoryName = ''; - let repositoryPrivate = true; - let selectedInstallationId = ''; - let selectedRepository = ''; - let installations = { installations: [], total: 0 }; - let error = ''; + let repositoryBehaviour: 'new' | 'existing' | undefined = $state( + onlyExisting ? 'existing' : undefined + ); + let repositoryName = $state(''); + let repositoryPrivate = $state(true); + let selectedInstallationId = $state(''); + let selectedRepository = $state(''); + let installations = $state({ installations: [], total: 0 }); + let error = $state(''); onMount(async () => { installations = await sdk.forProject.vcs.listInstallations(); @@ -40,7 +46,6 @@ if (!!installations?.total) { repositoryBehaviour = 'existing'; } - console.log(selectedInstallationId); }); async function connectRepo() { @@ -55,29 +60,8 @@ selectedRepository = repo.id; } - const s = await sdk.forProject.sites.update( - site.$id, - site.name, - site.framework as Framework, - site.enabled, - site.logging || undefined, - site.timeout, - site.installCommand, - site.buildCommand, - site.outputDirectory, - site.buildRuntime as BuildRuntime, - site.adapter as Adapter, - site.fallbackFile, - selectedInstallationId, - selectedRepository, - 'main', - undefined, - undefined, - undefined - ); - invalidate(Dependencies.SITE); + await connect(selectedInstallationId, selectedRepository); show = false; - dispatch('connect', s); addNotification({ type: 'success', message: 'Repository connected successfully' @@ -95,7 +79,8 @@ onSubmit={connectRepo} bind:error> - Connect your site to an existing repository or create a new one. + Connect your {product === 'functions' ? 'function' : 'site'} to an existing repository or create + a new one. {#if !!installations?.total} @@ -111,12 +96,12 @@ {:else} { trackEvent(Click.ConnectRepositoryClick, { - from: 'sites' + from: product }); repository.set(e); repositoryName = e.name; diff --git a/src/lib/components/git/index.ts b/src/lib/components/git/index.ts index 50028158f..a5cab5eed 100644 --- a/src/lib/components/git/index.ts +++ b/src/lib/components/git/index.ts @@ -8,3 +8,4 @@ export { default as DeploymentDomains } from './deploymentDomains.svelte'; export { default as ConnectBehaviour } from './connectBehaviour.svelte'; export { default as ProductionBranchFieldset } from './productionBranchFieldset.svelte'; export { default as RepositoryCard } from './repositoryCard.svelte'; +export { default as ConnectRepoModal } from './connectRepoModal.svelte'; diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte index 07f1f51ec..ef4d65d48 100644 --- a/src/lib/components/git/repositories.svelte +++ b/src/lib/components/git/repositories.svelte @@ -20,7 +20,6 @@ import { VCSDetectionType, type Models } from '@appwrite.io/console'; import { getFrameworkIcon } from '$lib/stores/sites'; import { connectGitHub } from '$lib/stores/git'; - import { debounce } from '$lib/helpers/debounce'; let { action = $bindable('select'), diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/connectRepoModal.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/connectRepoModal.svelte deleted file mode 100644 index d6982ca0e..000000000 --- a/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/connectRepoModal.svelte +++ /dev/null @@ -1,145 +0,0 @@ - - - - - Connect your function to an existing repository or create a new one. - - {#if !!installations?.total} - - - {#if repositoryBehaviour === 'new'} - - {:else} - { - trackEvent(Click.ConnectRepositoryClick, { - from: 'functions' - }); - repository.set(e); - repositoryName = e.name; - selectedRepository = e.id; - connectRepo(); - }} /> - {/if} - - {:else} - - {/if} - - {#if repositoryBehaviour === 'existing'} - - - - Missing a repository? check your permissions - - - - {:else if repositoryBehaviour === 'new'} - - - {/if} - - diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/domains/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/domains/+page.svelte index fc9cbe02f..467edc314 100644 --- a/src/routes/(console)/project-[project]/functions/function-[function]/domains/+page.svelte +++ b/src/routes/(console)/project-[project]/functions/function-[function]/domains/+page.svelte @@ -3,148 +3,40 @@ import { page } from '$app/state'; 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 { IconPlus } from '@appwrite.io/pink-icons-svelte'; + import { Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte'; import DeleteDomainModal from './deleteDomainModal.svelte'; import RetryDomainModal from './retryDomainModal.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 { data } = $props(); - let showDelete = false; - let showRetry = false; + let showDelete = $state(false); + let showRetry = $state(false); let selectedDomain: Models.ProxyRule = null; - let showPreviewDomainModal = false; - - - - - - - Custom domain - - (showPreviewDomainModal = true)}> - Preview domain - - - - + + - {#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: 'functions_domain_overview' - }); - }}> - Delete - - - - - - - {/each} - + {/if} - -{#if showPreviewDomainModal} - -{/if} diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/domains/add-domain/+page.svelte index 962006783..86af873df 100644 --- a/src/routes/(console)/project-[project]/functions/function-[function]/domains/add-domain/+page.svelte +++ b/src/routes/(console)/project-[project]/functions/function-[function]/domains/add-domain/+page.svelte @@ -1,26 +1,25 @@ - +
-
+
{:else if behaviour === 'REDIRECT'} -
+
- - - Redirect this domain. Domains added to your project will be - listed here. - + Redirect your domain to this URL. - + + - + @@ -291,6 +238,8 @@ {#if showConnectRepo} {/if} diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/domains/createPreviewDomainModal.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/domains/createPreviewDomainModal.svelte deleted file mode 100644 index af7c37ee9..000000000 --- a/src/routes/(console)/project-[project]/functions/function-[function]/domains/createPreviewDomainModal.svelte +++ /dev/null @@ -1,104 +0,0 @@ - - - - - Get an auto-generated domain to quickly access your project. You can customize its prefix. - - - - - - - - .{$consoleVariables._APP_DOMAIN_FUNCTIONS} - - - - - - - - - - - - diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/domains/store.ts b/src/routes/(console)/project-[project]/functions/function-[function]/domains/store.ts new file mode 100644 index 000000000..902fb3e3e --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/function-[function]/domains/store.ts @@ -0,0 +1,19 @@ +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: 200 } + }, + + { + id: 'target', + title: 'Target', + type: 'string', + width: { min: 120, max: 400 } + } +]); diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/domains/table.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/domains/table.svelte new file mode 100644 index 000000000..4fe75d81a --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/function-[function]/domains/table.svelte @@ -0,0 +1,121 @@ + + + + + {#each $columns as { id, title }} + + {title} + + {/each} + + + {#each domains.rules as domain} + + {#each $columns as column} + + {#if column.id === 'domain'} + + + {domain.domain} + {#if domain.status !== 'verified'} + + {/if} + + + {:else if column.id === 'target'} + {domain?.redirectUrl + ? 'Redirect to ' + domain.redirectUrl + : domain?.deploymentVcsProviderBranch + ? 'Deployed from' + domain.deploymentVcsProviderBranch + : '-'} + {/if} + + {/each} + + + + + + + + {#if domain.status !== 'verified'} + { + selectedDomain = domain; + showRetry = true; + toggle(e); + }}> + Retry + + {/if} + { + selectedDomain = domain; + showDelete = true; + toggle(e); + trackEvent(Click.DomainDeleteClick, { + source: 'sites_domain_overview' + }); + }}> + Delete + + + + + + + + {/each} + + +{#if showDelete} + +{/if} + +{#if showRetry} + +{/if} diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateRepository.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateRepository.svelte index e851f0a73..5e3240fa0 100644 --- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateRepository.svelte @@ -22,9 +22,8 @@ } from '@appwrite.io/pink-svelte'; import Card from '$lib/components/card.svelte'; import { IconGithub } from '@appwrite.io/pink-icons-svelte'; - import { ConnectGit, RepositoryCard } from '$lib/components/git'; + import { ConnectGit, ConnectRepoModal, RepositoryCard } from '$lib/components/git'; import { isValueOfStringEnum } from '$lib/helpers/types'; - import ConnectRepoModal from '../(modals)/connectRepoModal.svelte'; export let func: Models.Function; export let installations: Models.InstallationList; @@ -114,6 +113,37 @@ selectedBranch !== func?.providerBranch || silentMode !== func?.providerSilentMode || selectedDir !== func?.providerRootDirectory; + + async function connect(selectedInstallationId: string, selectedRepository: string) { + try { + if (!isValueOfStringEnum(Runtime, func.runtime)) { + throw new Error(`Invalid runtime: ${func.runtime}`); + } + await sdk.forProject.functions.update( + func.$id, + func.name, + func.runtime as Runtime, + func.execute || undefined, + func.events || undefined, + func.schedule || undefined, + func.timeout || undefined, + func.enabled || undefined, + func.logging || undefined, + func.entrypoint, + func.commands || undefined, + func.scopes || undefined, + selectedInstallationId, + selectedRepository, + 'main', + undefined, + undefined, + undefined + ); + await invalidate(Dependencies.FUNCTION); + } catch (error) { + console.log(error); + } + }
@@ -224,7 +254,7 @@ {#if showConnectRepo} - + {/if} {#if showDisconnect} diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte index 94283dbf1..debe1a5d9 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte @@ -8,11 +8,15 @@ import Button from '$lib/elements/forms/button.svelte'; import OpenOnMobileModal from '../../(components)/openOnMobileModal.svelte'; import SiteCard from '../../(components)/siteCard.svelte'; - import ConnectRepoModal from '../../(components)/connectRepoModal.svelte'; import { onMount } from 'svelte'; import AddCollaboratorModal from '../../(components)/addCollaboratorModal.svelte'; import { protocol } from '$routes/(console)/store'; import { Click, trackEvent } from '$lib/actions/analytics'; + import { invalidate } from '$app/navigation'; + import { sdk } from '$lib/stores/sdk'; + import type { Adapter, BuildRuntime, Framework } from '@appwrite.io/console'; + import { Dependencies } from '$lib/constants'; + import { ConnectRepoModal } from '$lib/components/git'; export let data; @@ -30,6 +34,34 @@ showConnectRepositry = true; } }); + + async function connect(selectedInstallationId: string, selectedRepository: string) { + try { + await sdk.forProject.sites.update( + data.site.$id, + data.site.name, + data.site.framework as Framework, + data.site.enabled, + data.site.logging || undefined, + data.site.timeout, + data.site.installCommand, + data.site.buildCommand, + data.site.outputDirectory, + data.site.buildRuntime as BuildRuntime, + data.site.adapter as Adapter, + data.site.fallbackFile, + selectedInstallationId, + selectedRepository, + 'main', + undefined, + undefined, + undefined + ); + invalidate(Dependencies.SITE); + } catch (error) { + console.log(error); + } + } @@ -173,9 +205,11 @@ {#if showConnectRepositry} {/if} + {#if showOpenOnMobile} {/if} diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte index 6b1800ec0..7e14e16c1 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte @@ -2,13 +2,12 @@ import { PaginationWithLimit, ViewSelector, EmptyFilter, Empty } from '$lib/components'; import { Button } from '$lib/elements/forms'; import { Container } from '$lib/layout'; - import { type Models } from '@appwrite.io/console'; + import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console'; import { View } from '$lib/helpers/load'; import { ActionMenu, Icon, Layout, Popover } from '@appwrite.io/pink-svelte'; import Table from './table.svelte'; import RedeployModal from '../../redeployModal.svelte'; import CreateGitDeploymentModal from './createGitDeploymentModal.svelte'; - import ConnectRepoModal from '../../(components)/connectRepoModal.svelte'; import { columns } from './store'; import CreateManualDeploymentModal from './createManualDeploymentModal.svelte'; // import DeploymentMetrics from './deploymentMetrics.svelte'; @@ -20,6 +19,7 @@ import CreateCliModal from './createCliModal.svelte'; import { ParsedTagList, QuickFilters } from '$lib/components/filters'; import { page } from '$app/state'; + import { ConnectRepoModal } from '$lib/components/git'; export let data; @@ -42,6 +42,34 @@ } }); }); + + async function connect(selectedInstallationId: string, selectedRepository: string) { + try { + await sdk.forProject.sites.update( + data.site.$id, + data.site.name, + data.site.framework as Framework, + data.site.enabled, + data.site.logging || undefined, + data.site.timeout, + data.site.installCommand, + data.site.buildCommand, + data.site.outputDirectory, + data.site.buildRuntime as BuildRuntime, + data.site.adapter as Adapter, + data.site.fallbackFile, + selectedInstallationId, + selectedRepository, + 'main', + undefined, + undefined, + undefined + ); + invalidate(Dependencies.SITE); + } catch (error) { + console.log(error); + } + } @@ -137,7 +165,8 @@ {#if showConnectRepo} {/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 d3b0f3b8a..234d7eb12 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 @@ -12,11 +12,17 @@ import { protocol } from '$routes/(console)/store'; import { IconInfo } from '@appwrite.io/pink-icons-svelte'; import { LabelCard } from '$lib/components'; - import { StatusCode, type Models } from '@appwrite.io/console'; + import { + Adapter, + BuildRuntime, + Framework, + StatusCode, + type Models + } from '@appwrite.io/console'; import { statusCodeOptions } from '$lib/stores/domains'; - import ConnectRepoModal from '../../../(components)/connectRepoModal.svelte'; import { writable } from 'svelte/store'; import { onMount } from 'svelte'; + import { ConnectRepoModal } from '$lib/components/git/index.js'; const routeBase = `${base}/project-${page.params.project}/sites/site-${page.params.site}/domains`; @@ -78,6 +84,34 @@ }); } } + + async function connect(selectedInstallationId: string, selectedRepository: string) { + try { + await sdk.forProject.sites.update( + data.site.$id, + data.site.name, + data.site.framework as Framework, + data.site.enabled, + data.site.logging || undefined, + data.site.timeout, + data.site.installCommand, + data.site.buildCommand, + data.site.outputDirectory, + data.site.buildRuntime as BuildRuntime, + data.site.adapter as Adapter, + data.site.fallbackFile, + selectedInstallationId, + selectedRepository, + 'main', + undefined, + undefined, + undefined + ); + invalidate(Dependencies.SITE); + } catch (error) { + console.log(error); + } + } @@ -202,7 +236,8 @@ {#if showConnectRepo} {/if} 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 index 272458929..4fe75d81a 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte @@ -18,11 +18,15 @@ import RetryDomainModal from './retryDomainModal.svelte'; import { columns } from './store'; - export let domains: Models.ProxyRuleList; + let { + domains + }: { + domains: Models.ProxyRuleList; + } = $props(); - let showDelete = false; - let showRetry = false; - let selectedDomain: Models.ProxyRule = null; + let showDelete = $state(false); + let showRetry = $state(false); + let selectedDomain: Models.ProxyRule = $state(null); diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte index f16906bed..fe7841343 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte @@ -22,8 +22,7 @@ } from '@appwrite.io/pink-svelte'; import Card from '$lib/components/card.svelte'; import { IconGithub } from '@appwrite.io/pink-icons-svelte'; - import { ConnectGit, RepositoryCard } from '$lib/components/git'; - import ConnectRepoModal from '../../(components)/connectRepoModal.svelte'; + import { ConnectGit, ConnectRepoModal, RepositoryCard } from '$lib/components/git'; import { showConnectRepo } from './store'; export let site: Models.Site; @@ -104,6 +103,34 @@ selectedBranch = site?.providerBranch ?? branchesList.branches[0].name; } + async function connect(selectedInstallationId: string, selectedRepository: string) { + try { + await sdk.forProject.sites.update( + site.$id, + site.name, + site.framework as Framework, + site.enabled, + site.logging || undefined, + site.timeout, + site.installCommand, + site.buildCommand, + site.outputDirectory, + site.buildRuntime as BuildRuntime, + site.adapter as Adapter, + site.fallbackFile, + selectedInstallationId, + selectedRepository, + 'main', + undefined, + undefined, + undefined + ); + invalidate(Dependencies.SITE); + } catch (error) { + console.log(error); + } + } + $: if (site?.installationId && site?.providerRepositoryId) { getBranches(site.installationId, site.providerRepositoryId); } @@ -223,7 +250,7 @@ {#if $showConnectRepo} - + {/if} {#if showDisconnect}