diff --git a/src/app.html b/src/app.html index 994a0b038..f1072de6d 100644 --- a/src/app.html +++ b/src/app.html @@ -45,7 +45,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 79c3a696e..fe6e5b638 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -26,6 +26,7 @@ export enum Dependencies { FILES = 'dependency:files', FUNCTION = 'dependency:function', FUNCTION_DOMAINS = 'dependency:function_domains', + FUNCTION_INSTALLATIONS = 'dependency:function_installations', FUNCTIONS = 'dependency:functions', VARIABLES = 'dependency:variables', DEPLOYMENTS = 'dependency:deployments', diff --git a/src/lib/wizards/functions/connectExisting.svelte b/src/lib/wizards/functions/connectExisting.svelte new file mode 100644 index 000000000..7e231ca0a --- /dev/null +++ b/src/lib/wizards/functions/connectExisting.svelte @@ -0,0 +1,66 @@ + + + diff --git a/src/lib/wizards/functions/steps/executeAccess.svelte b/src/lib/wizards/functions/steps/executeAccess.svelte new file mode 100644 index 000000000..1e24fa8d1 --- /dev/null +++ b/src/lib/wizards/functions/steps/executeAccess.svelte @@ -0,0 +1,23 @@ + + + + Schedule + + Set a Cron schedule to trigger your function. Leave blank for no schedule. More details on Cron syntax here. + + + + + diff --git a/src/lib/wizards/functions/steps/functionConfiguration.svelte b/src/lib/wizards/functions/steps/functionConfiguration.svelte new file mode 100644 index 000000000..95319ec88 --- /dev/null +++ b/src/lib/wizards/functions/steps/functionConfiguration.svelte @@ -0,0 +1,68 @@ + + + + Events + + Set the events that will trigger your function. Maximum 100 events allowed. + + + {#if $createFunction?.events?.length} + + {#each $createFunction.events as event} +
  • + + {event} + + + + +
    • + {/each} +     +
    + +
    + {:else} + (showCreate = !showCreate)}>Add an event to get started + {/if} +     + +{#if showCreate} + +

    + Select events in your Appwrite project that will trigger your function. Learn more about Appwrite Events. +

    +     +{/if} diff --git a/src/lib/wizards/functions/steps/gitConfiguration.svelte b/src/lib/wizards/functions/steps/gitConfiguration.svelte new file mode 100644 index 000000000..65e563715 --- /dev/null +++ b/src/lib/wizards/functions/steps/gitConfiguration.svelte @@ -0,0 +1,84 @@ + + + + Execute access + + Choose who can execute this function using the client API. For more information, check out + the + Permissions Guide + . + + +
    +
    +
    + +
    +
    +
    {$installation.organization}/{$repository.name}
    +
    +
    + {#await loadBranches()} +
    +
    +
    + {:then branches} +
    + + { + return { + value: branch.name, + label: branch.name + }; + }) ?? []} + bind:value={$choices.branch} /> + + + +
    + {/await} +
    + diff --git a/src/lib/wizards/functions/steps/selectRepository.svelte b/src/lib/wizards/functions/steps/selectRepository.svelte new file mode 100644 index 000000000..1cae60019 --- /dev/null +++ b/src/lib/wizards/functions/steps/selectRepository.svelte @@ -0,0 +1,204 @@ + + + + Select repository + + Select a Git repository that will trigger your function deployments when updated. + + {#if hasInstallations} + {#await loadInstallations()} +
    +
    +
    + {:then installations} +
    +
    + { + return { + label: entry.organization, + value: entry.$id + }; + })} + on:change={() => { + search = ''; + installation.set( + installations.find((entry) => entry.$id === selectedInstallation) + ); + }} + bind:value={selectedInstallation} /> +
    +
    + +
    +
    + {/await} + + {#if selectedInstallation} +

    + Manage organization configuration in your project settings. +

    + {#await loadRepositories(selectedInstallation, search)} +
    +
    +
    + Loading repositories... +
    +
    + {:then response} + {#if response?.total} +
      + {#each response.repositories as repo} +
    • +
      • + {/each} +
    + {:else if search} + +
    +
    + Sorry we couldn't find "{search}" +

    There are no repositories that match your search.

    +
    +
    + + +
    +
    +     + {:else} + +
    +
    +

    You have no repositories.

    +

    + Need a hand? Learn more in our + documentation. +

    +
    +
    +     + {/if} + {/await} + {/if} + {:else} +
    + + + +
    + {/if} + diff --git a/src/lib/wizards/functions/steps/step5.svelte b/src/lib/wizards/functions/steps/step5.svelte new file mode 100644 index 000000000..aa3a25709 --- /dev/null +++ b/src/lib/wizards/functions/steps/step5.svelte @@ -0,0 +1,121 @@ + + + + Variables + + Create the environment variables or secret keys that will be passed to your function + + {#if $createFunction.vars.length} + + + Key + Value + + + + + {#each $createFunction.vars as variable, i} + + + + {variable.key} + + + + + + + + + + { + selectedVar = $createFunction.vars[i]; + showDropdown[i] = false; + showCreate = true; + }}> + Edit + + { + $createFunction.vars.splice(i, 1); + $createFunction = $createFunction; + showDropdown[i] = false; + }}> + Delete + + + + + + {/each} + +
    +
    + +
    + {:else} + (showCreate = !showCreate)}>Create a variable to get started + {/if} +     + +{#if showCreate} + +{/if} diff --git a/src/lib/wizards/functions/store.ts b/src/lib/wizards/functions/store.ts new file mode 100644 index 000000000..af2aac923 --- /dev/null +++ b/src/lib/wizards/functions/store.ts @@ -0,0 +1,20 @@ +import { page } from '$app/stores'; +import type { Models } from '@appwrite.io/console'; +import { derived, writable } from 'svelte/store'; + +export const repository = writable(); +export const installation = writable(); +export const choices = writable<{ + branch: string; + rootDir: string; + silentMode: boolean; +}>({ + branch: null, + rootDir: null, + silentMode: null +}); + +export const installations = derived( + page, + ($page) => $page.data.installations as Models.InstallationList +); diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts index c182d7cfe..b1face7f5 100644 --- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts +++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts @@ -5,6 +5,7 @@ import { Query } from '@appwrite.io/console'; export const load: PageLoad = async ({ params, depends, parent }) => { depends(Dependencies.VARIABLES); + depends(Dependencies.FUNCTION_INSTALLATIONS); const data = await parent(); diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte index e6df816c0..0e5ccd336 100644 --- a/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte +++ b/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte @@ -21,6 +21,9 @@ import { toLocaleDateTime } from '$lib/helpers/date'; import { onMount } from 'svelte'; import DisconnectRepo from './disconnectRepo.svelte'; + import { Pill } from '$lib/elements'; + import { wizard } from '$lib/stores/wizard'; + import ConnectExisting from '$lib/wizards/functions/connectExisting.svelte'; export let installations: Models.InstallationList; export let repository: Models.Repository | null; @@ -43,30 +46,34 @@ selectedBranch = $func?.vcsBranch; silentMode = $func?.vcsSilentMode ?? false; selectedDir = $func?.vcsRootDirectory; + + if ($page.url.searchParams.has('github-installed')) { + wizard.start(ConnectExisting); + } }); - function getProviderIcon(provider: string) { - if (provider === 'github') { - return `icon-github`; - } - - return ''; + enum ProviderNames { + github = 'GitHub', + gitlab = 'GitLab', + bitBucket = 'BitBucket' } - function getProviderName(provider: string) { - if (provider === 'github') { - return `GitHub`; + function getProviderIcon(provider: string) { + switch (provider) { + case 'github': + return 'icon-github'; + default: + return ''; } - - return ''; } function getRepositoryLink(repository: Models.Repository) { - if (repository.provider === 'github') { - return `https://github.com/${repository.organization}/${repository.name}`; + switch (repository.provider) { + case 'github': + return `https://github.com/${repository.organization}/${repository.name}`; + default: + return ''; } - - return ''; } async function updateConfiguration() { @@ -148,7 +155,12 @@ - Git settings + + Git settings + {#if !repository} + NOT CONNECTED + {/if} + {#if repository}
    @@ -187,7 +199,8 @@
    @@ -202,11 +215,7 @@
    -