From f67155d66c707d0d87c6f1c77bd016d256306c13 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 2 Sep 2024 14:36:02 +0200 Subject: [PATCH 001/222] feat: pink v2 --- package.json | 2 + pnpm-lock.yaml | 47 +++++++ src/lib/components/pagination.svelte | 6 +- src/lib/elements/forms/button.svelte | 34 +++-- src/routes/+layout.svelte | 27 +++- src/themes/dark-cloud.json | 196 +++++++++++++++++++++++++++ src/themes/dark.json | 196 +++++++++++++++++++++++++++ src/themes/index.ts | 5 + src/themes/light-cloud.json | 196 +++++++++++++++++++++++++++ src/themes/light.json | 196 +++++++++++++++++++++++++++ svelte.config.js | 3 +- 11 files changed, 879 insertions(+), 29 deletions(-) create mode 100644 src/themes/dark-cloud.json create mode 100644 src/themes/dark.json create mode 100644 src/themes/index.ts create mode 100644 src/themes/light-cloud.json create mode 100644 src/themes/light.json diff --git a/package.json b/package.json index 76e3f287ea..48e2e0c590 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,8 @@ "@appwrite.io/console": "1.0.1", "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", + "@appwrite.io/pink-icons-svelte": "1.0.0-next.3", + "@appwrite.io/pink-svelte": "1.0.0-next.20", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.26.0", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3a8d775f6a..c9f1be35b2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,12 @@ importers: '@appwrite.io/pink-icons': specifier: 0.25.0 version: 0.25.0 + '@appwrite.io/pink-icons-svelte': + specifier: 1.0.0-next.3 + version: 1.0.0-next.3(svelte@4.2.18) + '@appwrite.io/pink-svelte': + specifier: 1.0.0-next.20 + version: 1.0.0-next.20(react-dom@18.3.1(react@18.3.1))(svelte@4.2.18) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -196,9 +202,20 @@ packages: '@appwrite.io/console@1.0.1': resolution: {integrity: sha512-9U7jG0XnRcxDhuma308z8XD/BF9cK6OpukxN87Tk0N/QGsNJBbH1it0LLCt6X7rPzNpOALT0LLTeMa0VEsQBow==} + '@appwrite.io/pink-icons-svelte@1.0.0-next.3': + resolution: {integrity: sha512-i3stfVVK8EoOQjXJNkwqUuH6DHCJas3aUK35wSMdS2j/6wLqdczEyaG4YsxqSjEuPqiz+8BCU0QHswhv33pZaw==} + peerDependencies: + svelte: ^4.0.0 + '@appwrite.io/pink-icons@0.25.0': resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==} + '@appwrite.io/pink-svelte@1.0.0-next.20': + resolution: {integrity: sha512-sSJGenQOmPK4bNgAJXVMnrP58XH1jYZb+FjBbGBCtRg91gsK/4ojn+LRRdYy/Uu0dzr71pDcg+tPI5bGnSlmNw==} + peerDependencies: + react-dom: ^18.0.0 + svelte: ^4.0.0 + '@appwrite.io/pink@0.25.0': resolution: {integrity: sha512-9z4G/iAhjvVpM7tkNqzGqrokst4hvNt3Fkf2jD4W6n8j//EJbQ3mJ0I+5dye5Sry0a33wUanq5DSztqFNYq5zw==} @@ -2906,6 +2923,11 @@ packages: queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + react-dom@18.3.1: + resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} + peerDependencies: + react: ^18.3.1 + react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} @@ -3010,6 +3032,9 @@ packages: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} + scheduler@0.23.2: + resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} + semver@6.3.1: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} hasBin: true @@ -3693,8 +3718,20 @@ snapshots: '@appwrite.io/console@1.0.1': {} + '@appwrite.io/pink-icons-svelte@1.0.0-next.3(svelte@4.2.18)': + dependencies: + svelte: 4.2.18 + '@appwrite.io/pink-icons@0.25.0': {} + '@appwrite.io/pink-svelte@1.0.0-next.20(react-dom@18.3.1(react@18.3.1))(svelte@4.2.18)': + dependencies: + '@appwrite.io/pink-icons-svelte': 1.0.0-next.3(svelte@4.2.18) + '@floating-ui/dom': 1.6.10 + '@melt-ui/svelte': 0.83.0(svelte@4.2.18) + react-dom: 18.3.1(react@18.3.1) + svelte: 4.2.18 + '@appwrite.io/pink@0.25.0': dependencies: '@appwrite.io/pink-icons': 0.25.0 @@ -6872,6 +6909,12 @@ snapshots: queue-microtask@1.2.3: {} + react-dom@18.3.1(react@18.3.1): + dependencies: + loose-envify: 1.4.0 + react: 18.3.1 + scheduler: 0.23.2 + react-is@17.0.2: {} react-is@18.3.1: {} @@ -6995,6 +7038,10 @@ snapshots: dependencies: xmlchars: 2.2.0 + scheduler@0.23.2: + dependencies: + loose-envify: 1.4.0 + semver@6.3.1: {} semver@7.6.3: {} diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte index 216455f720..3b2ca51daf 100644 --- a/src/lib/components/pagination.svelte +++ b/src/lib/components/pagination.svelte @@ -60,7 +60,7 @@ {#if typeof page === 'number'}
  • {#if currentPage === page} - {:else} @@ -78,7 +78,7 @@ {/if} {#if currentPage >= totalPages} - @@ -92,7 +92,7 @@ {/key} {:else}
    • + {/each} + + {:else if search} + +
    +
    + Sorry we couldn't find "{search}" +

    There are no repositories that match your search.

    +
    +
    + +
    +
    +     + {:else} + + {/if} + {/await} + {/if} +{:else} +
    + + + + +
    +{/if} diff --git a/src/lib/layout/wizardCover.svelte b/src/lib/layout/wizardCover.svelte index f73953fd17..4e40a3b7ba 100644 --- a/src/lib/layout/wizardCover.svelte +++ b/src/lib/layout/wizardCover.svelte @@ -1,9 +1,20 @@ + + + + + Create Function +
    +
    +
    +
    + Connect Git repository +

    + Create and deploy a function with a connected git repository. +

    +
    + +
    + {#if isSelfHosted && !isVcsEnabled} +
    +
    + + Connect your self-hosted instance to Git + +

    + Configure your self-hosted instance to connect your function to + a Git repository. + Learn more. +

    +
    +
    + {/if} +
    + +
    +
    + Quick start +

    Use a starter template.

    +
      + {#await Promise.all([$baseRuntimesList, $starterTemplate])} + {#each Array(6) as _i} +
    • + +
      • + {/each} + {:then [response, quickStart]} + {@const runtimes = new Map( + response.runtimes.map((r) => [r.$id, r]) + )} + {@const templates = quickStart.runtimes.filter((template) => + runtimes.has(template.name) + )} + {#each templates.slice(0, 6) as template} + {@const runtimeDetail = runtimes.get(template.name)} +
    • + +
      • + {/each} + + {#if templates.length < 6} +
    • + + + +
      • + {/if} + {/await} +
    +
    + + +
    +
    + Templates +

    + Find the right template for your use case. +

    + +
      + {#await $featuredTemplatesList} + {#each Array(3) as _i} +
    • + +
      • + {/each} + {:then templatesListWithoutStarter} + {#each templatesListWithoutStarter.templates as template} +
    • + +
      • + {/each} + {/await} +
    +
    + +
    +
    +

    + You can also create a function + or using the CLI. + Learn more. +

    +
    +
    + + + diff --git a/src/routes/(console)/project-[project]/functions/create-function/store.ts b/src/routes/(console)/project-[project]/functions/create-function/store.ts new file mode 100644 index 0000000000..28c7ebd57a --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/store.ts @@ -0,0 +1,56 @@ +import type { WizardStepsType } from '$lib/layout/wizard.svelte'; +import type { Models } from '@appwrite.io/console'; +import { writable, type Writable } from 'svelte/store'; + +export const template = writable(); +export const templateConfig = writable<{ + $id: string; + name: string; + runtime: string; + variables: { [key: string]: unknown }; + repositoryBehaviour: 'new' | 'existing' | 'manual'; + repositoryName?: string; + repositoryPrivate?: boolean; + repositoryId: string; + execute?: boolean; + scopes?: string[]; +}>(); + +export const choices = writable<{ + branch: string; + rootDir: string; + silentMode: boolean; +}>({ + branch: null, + rootDir: null, + silentMode: null +}); + +const initialCreateFunction: Partial = { + $id: null, + name: null, + entrypoint: null, + execute: [], + runtime: null, + commands: null +}; + +function createFunctionStore() { + const store = writable>({ + ...initialCreateFunction + }); + + const reset = () => { + store.set({ ...initialCreateFunction }); + }; + + return { + ...store, + reset + }; +} +export const createFunction = createFunctionStore(); + +export const createFunctionDeployment = writable(); + +export const templateStepsComponents: Writable = writable(new Map()); diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/connectExisting.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/connectExisting.svelte new file mode 100644 index 0000000000..067ac44091 --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/connectExisting.svelte @@ -0,0 +1,82 @@ + + + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/createGit.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/createGit.svelte new file mode 100644 index 0000000000..0aecddf564 --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/createGit.svelte @@ -0,0 +1,87 @@ + + + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/createManual.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/createManual.svelte new file mode 100644 index 0000000000..ff85a47d22 --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/createManual.svelte @@ -0,0 +1,94 @@ + + + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/createTemplate.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/createTemplate.svelte new file mode 100644 index 0000000000..8c186dce9a --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/createTemplate.svelte @@ -0,0 +1,130 @@ + + + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/createRepository.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/createRepository.svelte new file mode 100644 index 0000000000..8389ae83f4 --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/createRepository.svelte @@ -0,0 +1,173 @@ + + + + Repository + + Select a Git repository that will trigger your function deployments when updated. + + + {#if $templateConfig.repositoryBehaviour === 'existing'} + + {:else} + {#await loadInstallations()} +
    +
    +
    + {:then installations} + {#if hasInstallations} + + { + return { + label: entry.organization, + value: entry.$id + }; + })} + on:change={() => { + $installation = installations.find( + (entry) => entry.$id === selectedInstallationId + ); + }} + bind:value={selectedInstallationId} /> + + {:else} +
    + + + + +
    + {/if} + {#if $installation} + +
    +
    + +
    +
    +
    + {$installation.organization}/{$templateConfig.repositoryName} +
    +
    +
    +
    + + + + +
    +     + {/if} + {/await} + {/if} + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/executeAccess.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/executeAccess.svelte new file mode 100644 index 0000000000..5d6442f797 --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/executeAccess.svelte @@ -0,0 +1,21 @@ + + + + Permissions + + Choose who can execute this function using the client API. For more information, visit our + + Permissions guide. + + + + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/functionConfiguration.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/functionConfiguration.svelte new file mode 100644 index 0000000000..07ee93152a --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/functionConfiguration.svelte @@ -0,0 +1,119 @@ + + + + Configuration + + Set your deployment configuration and any build commands here. + + + + {#if !showCustomId} +
    + (showCustomId = !showCustomId)}> + +
    + {:else} + + {/if} + + {#if detectingRuntime} + + {:else} + + {/if} + + + + + Build commands + (optional) + + + + + +     +     diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/gitConfiguration.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/gitConfiguration.svelte new file mode 100644 index 0000000000..139c45627f --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/gitConfiguration.svelte @@ -0,0 +1,95 @@ + + + + Branch + + Choose the Git branch that will trigger your function deployments when updated. + + + +
    + +
    {$installation.organization}/{$repository.name}
    +
    + {#await loadBranches()} +
    +
    +
    + {:then branches} + {@const options = + branches + ?.map((branch) => { + return { + value: branch.name, + label: branch.name + }; + }) + ?.sort((a, b) => { + return a.label > b.label ? 1 : -1; + }) ?? []} +
    + + { + $choices.branch = event.detail.value; + }} + interactiveOutput + name="branch" + {options} /> + + + +
    + {/await} + +

    + Visit your repository on GitHub. +

    + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/manualConfiguration.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/manualConfiguration.svelte new file mode 100644 index 0000000000..2334025af1 --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/manualConfiguration.svelte @@ -0,0 +1,42 @@ + + + + Configuration + + Set your deployment configuration and any build commands here. + + + + + + + + Build commands + (optional) + + + + + + + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/manualDetails.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/manualDetails.svelte new file mode 100644 index 0000000000..30c5fdea2e --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/manualDetails.svelte @@ -0,0 +1,57 @@ + + + + Details + Create and deploy your function manually. + + + + + + {#if !showCustomId} +
    + (showCustomId = !showCustomId)}> + +
    + {:else} + + {/if} +     +     diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/selectRepository.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/selectRepository.svelte new file mode 100644 index 0000000000..24ca2f592f --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/selectRepository.svelte @@ -0,0 +1,23 @@ + + + + Repository + + Select a Git repository that will trigger your function deployments when updated. + + + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templateConfiguration.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templateConfiguration.svelte new file mode 100644 index 0000000000..63cbdbeb48 --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templateConfiguration.svelte @@ -0,0 +1,82 @@ + + + + {$template.name} + + {$template.tagline} + + + + {#await loadRuntimes()} + + {:then options} + + {/await} + + + + {#if !showCustomId} +
    + (showCustomId = !showCustomId)}> + +
    + {:else} + + {/if} +     +     diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templateDeployment.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templateDeployment.svelte new file mode 100644 index 0000000000..11203f18a1 --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templateDeployment.svelte @@ -0,0 +1,64 @@ + + + + Deployment + +

    Connect with Git Recommended

    + + + Create a new repository + Clone the template to a newly created repository in your organization. + + + Add to existing repository + Clone the template to an existing repository in your organization. + + + +

    Quick start

    +
      + + Connect later + Deploy now and continue development via CLI, or connect Git from your function settings. + +
    +     diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templatePermissions.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templatePermissions.svelte new file mode 100644 index 0000000000..2ed5a52e41 --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templatePermissions.svelte @@ -0,0 +1,88 @@ + + + + Permissions + + Enable recommended scopes and execute access for when your function is deployed. + +

    Execute permissions

    + + + + {#if templateScopes.length > 0} +

    Function scopes

    + + {#each templateScopes as scope, i} + + {#if i < templateScopes.length - 1} +
    + {/if} + {/each} +     + {/if} +     diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templateVariables.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templateVariables.svelte new file mode 100644 index 0000000000..eea61b616a --- /dev/null +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/templateVariables.svelte @@ -0,0 +1,124 @@ + + + + Variables + + Edit the values of the environment variables that will be passed to your function at + runtime. + + {#if $template?.variables?.length} + {#if requiredVariables?.length} + + + Required variables + + {requiredVariables.length} + + + + {#each requiredVariables as variable} +
    + + + {@html variable.description} + +
    + {/each} +     +     +     + {/if} + + {#if optionalVariables?.length} + + + Optional variables + + {optionalVariables.length} + + + + {#each optionalVariables as variable} +
    + + + + {@html variable.description} + +
    + {/each} +     +     +     + {/if} + {:else} + +

    There are no environment variables to configure.

    +     + {/if} +     diff --git a/src/routes/(console)/project-[project]/sites/+page.svelte b/src/routes/(console)/project-[project]/sites/+page.svelte index 0b5f854d3e..dfd9a89fd1 100644 --- a/src/routes/(console)/project-[project]/sites/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/+page.svelte @@ -6,13 +6,15 @@ // import { templatesList } from '$lib/stores/templates'; import { organization } from '$lib/stores/organization'; import { wizard } from '$lib/stores/wizard'; - import Initial from '$lib/wizards/functions/cover.svelte'; import { onMount } from 'svelte'; import { canWriteSites } from '$lib/stores/roles.js'; import { Icon, Popover } from '@appwrite.io/pink-svelte'; import { Button } from '$lib/elements/forms'; import { IconDotsHorizontal } from '@appwrite.io/pink-icons-svelte'; import SiteCard from './siteCard.svelte'; + import { goto } from '$app/navigation'; + import { base } from '$app/paths'; + import { page } from '$app/stores'; export let data; @@ -40,14 +42,14 @@ // } }); - function openWizard() { - wizard.showCover(Initial); - } + const wizardURL = `${base}/project-${$page.params.project}/sites/create-site`; $: $registerCommands([ { label: 'Create site', - callback: openWizard, + callback: () => { + goto(wizardURL); + }, keys: ['c'], disabled: $wizard.show || @@ -69,7 +71,7 @@ title="Sites" buttonText={TMPSITEROLES ? 'Create site' : ''} buttonEvent="create_site" - buttonMethod={openWizard} + buttonHref={wizardURL} total={data.siteList.total} /> {#if data.siteList.total}
    @@ -102,7 +104,7 @@ allowCreate={TMPSITEROLES} href="https://appwrite.io/docs/products/sites" target="site" - on:click={openWizard} /> + on:click={() => goto(wizardURL)} /> {/if} diff --git a/src/routes/(console)/project-[project]/sites/+page.ts b/src/routes/(console)/project-[project]/sites/+page.ts index d0ecf728ce..b7e650237a 100644 --- a/src/routes/(console)/project-[project]/sites/+page.ts +++ b/src/routes/(console)/project-[project]/sites/+page.ts @@ -2,9 +2,8 @@ import { Query } from '@appwrite.io/console'; import { sdk } from '$lib/stores/sdk'; import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; import { CARD_LIMIT, Dependencies } from '$lib/constants'; -import type { PageLoad } from './$types'; -export const load: PageLoad = async ({ url, depends, route }) => { +export const load = async ({ url, depends, route }) => { depends(Dependencies.SITES); const page = getPage(url); diff --git a/src/routes/(console)/project-[project]/sites/create-site/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/+page.svelte new file mode 100644 index 0000000000..9e72be6936 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/+page.svelte @@ -0,0 +1,159 @@ + + + + + + Create site - Appwrite + + + + Create Site +
    +
    +
    + + + Connect Git repository + + + {#if isSelfHosted && !isVcsEnabled} +
    +
    + + Connect your self-hosted instance to Git + +

    + Configure your self-hosted instance to connect your function to + a Git repository. + Learn more. +

    +
    +
    + {/if} +     + + Clone template + + + + +
    +
    +
    +     + + diff --git a/src/routes/(console)/project-[project]/sites/create-site/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/+page.ts new file mode 100644 index 0000000000..589d3bf096 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/+page.ts @@ -0,0 +1,45 @@ +import { Query } from '@appwrite.io/console'; +import { sdk } from '$lib/stores/sdk'; + +export const load = async () => { + const templates = { + templates: mockTeplates, + total: mockTeplates.length + }; + + return { + siteTemplates: templates + }; +}; + +const mockTeplates: { + preview: string; + name: string; + frameworks: string[]; + $id: string; +}[] = [ + { + preview: 'https://unsplash.it/300/200', + name: 'Template 1', + frameworks: ['react', 'vue', 'angular'], + $id: '1' + }, + { + preview: 'https://unsplash.it/301/200', + name: 'Template 2', + frameworks: ['react', 'vue'], + $id: '2' + }, + { + preview: 'https://unsplash.it/302/200', + name: 'Template 3', + frameworks: ['react', 'angular'], + $id: '3' + }, + { + preview: 'https://unsplash.it/303/200', + name: 'Template 4', + frameworks: ['vue', 'angular'], + $id: '4' + } +]; diff --git a/src/routes/(console)/project-[project]/sites/create-site/[id]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/[id]/+page.svelte new file mode 100644 index 0000000000..782ebcf02f --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/[id]/+page.svelte @@ -0,0 +1,73 @@ + + + + Create site - Appwrite + + + + Create organization + +
    + I'm wanna be a site! :) +
    + I'm an aside! :) +     + + + + + +     From dc33820018e80a1f617f538a7e759937f211997d Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 22 Oct 2024 17:31:45 +0200 Subject: [PATCH 017/222] feat: site creation --- package.json | 2 +- pnpm-lock.yaml | 10 +- src/lib/components/card.svelte | 2 +- src/lib/stores/vcs.ts | 10 + .../functions/steps/gitConfiguration.svelte | 2 +- .../create-function/wizard/createGit.svelte | 3 +- .../wizard/steps/functionConfiguration.svelte | 3 +- .../wizard/steps/gitConfiguration.svelte | 3 +- .../settings/gitConfigurationModal.svelte | 2 +- .../settings/updateConfiguration.svelte | 13 +- .../sites/create-site/+page.svelte | 34 +- .../sites/create-site/[id]/+page.svelte | 73 ----- .../sites/create-site/settings/+page.svelte | 291 ++++++++++++++++++ .../sites/create-site/settings/+page.ts | 27 ++ 14 files changed, 356 insertions(+), 119 deletions(-) delete mode 100644 src/routes/(console)/project-[project]/sites/create-site/[id]/+page.svelte create mode 100644 src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte create mode 100644 src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts diff --git a/package.json b/package.json index b3b40b0ded..d410a42de9 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "1.0.0-next.5", - "@appwrite.io/pink-svelte": "1.0.0-next.60", + "@appwrite.io/pink-svelte": "1.0.0-next.62", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.33.1", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ed939524b1..e1cedb7852 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: 1.0.0-next.5 version: 1.0.0-next.5(svelte@4.2.19) '@appwrite.io/pink-svelte': - specifier: 1.0.0-next.60 - version: 1.0.0-next.60(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: 1.0.0-next.62 + version: 1.0.0-next.62(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -213,8 +213,8 @@ packages: '@appwrite.io/pink-icons@0.25.0': resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==} - '@appwrite.io/pink-svelte@1.0.0-next.60': - resolution: {integrity: sha512-OPjOoSYqNRy3N8LUBeBWz30lEan8y8NpWbRaJICgCl3MoH/1RYk4dKxdzlXxGhDZn7A5j8DQOiooW3qHyBabLw==} + '@appwrite.io/pink-svelte@1.0.0-next.62': + resolution: {integrity: sha512-oGuLNHlJBUqLYvubIb06Vi9aYmF1i4RPJFzAPtuzn6TRcAYnzlGigFc2CXHPZg6pKOQ4ZEYMibcSNQaHAIrGGA==} peerDependencies: react-dom: ^18.0.0 svelte: ^4.0.0 @@ -3870,7 +3870,7 @@ snapshots: '@appwrite.io/pink-icons@0.25.0': {} - '@appwrite.io/pink-svelte@1.0.0-next.60(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@1.0.0-next.62(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: '@appwrite.io/pink-icons-svelte': 1.0.0-next.5(svelte@4.2.19) '@floating-ui/dom': 1.6.11 diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte index abd648731f..26ca8816f2 100644 --- a/src/lib/components/card.svelte +++ b/src/lib/components/card.svelte @@ -46,7 +46,7 @@ {:else} - + diff --git a/src/lib/stores/vcs.ts b/src/lib/stores/vcs.ts index 07918b7ee5..fd79c333f8 100644 --- a/src/lib/stores/vcs.ts +++ b/src/lib/stores/vcs.ts @@ -8,3 +8,13 @@ export const installations = derived( ); export const repository = writable(); export const installation = writable(); + +export function sortBranches(branches: Models.Branch[]) { + return branches.sort((a, b) => { + if (a.name === 'main' || a.name === 'master') { + return -1; + } + + return a.name > b.name ? 1 : -1; + }); +} diff --git a/src/lib/wizards/functions/steps/gitConfiguration.svelte b/src/lib/wizards/functions/steps/gitConfiguration.svelte index 1552b668b9..8c2c1c91ae 100644 --- a/src/lib/wizards/functions/steps/gitConfiguration.svelte +++ b/src/lib/wizards/functions/steps/gitConfiguration.svelte @@ -4,7 +4,7 @@ import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte'; import { WizardStep } from '$lib/layout'; import { sdk } from '$lib/stores/sdk'; - import { sortBranches } from '$routes/(console)/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte'; + import { sortBranches } from '$lib/stores/vcs'; import { choices, installation, repository } from '../store'; $choices.rootDir ??= ''; diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/createGit.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/createGit.svelte index 0aecddf564..f924a27ef2 100644 --- a/src/routes/(console)/project-[project]/functions/create-function/wizard/createGit.svelte +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/createGit.svelte @@ -5,7 +5,7 @@ import { sdk } from '$lib/stores/sdk'; import { wizard } from '$lib/stores/wizard'; import { goto } from '$app/navigation'; - import { choices, createFunction, installation, repository } from '../store'; + import { choices, createFunction } from '../store'; import { addNotification } from '$lib/stores/notifications'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; import { base } from '$app/paths'; @@ -14,6 +14,7 @@ import GitConfiguration from './steps/gitConfiguration.svelte'; import FunctionConfiguration from './steps/functionConfiguration.svelte'; import { isValueOfStringEnum } from '$lib/helpers/types'; + import { installation, repository } from '$lib/stores/vcs'; async function create() { try { diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/functionConfiguration.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/functionConfiguration.svelte index 07ee93152a..3ee7ee35d9 100644 --- a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/functionConfiguration.svelte +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/functionConfiguration.svelte @@ -6,8 +6,9 @@ import { WizardStep } from '$lib/layout'; import { onMount } from 'svelte'; import { sdk } from '$lib/stores/sdk'; - import { choices, createFunction, installation, repository } from '../../store'; + import { choices, createFunction } from '../../store'; import { runtimesList } from '$lib/stores/runtimes'; + import { installation, repository } from '$lib/stores/vcs'; let showCustomId = false; diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/gitConfiguration.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/gitConfiguration.svelte index 139c45627f..f0b9c9e479 100644 --- a/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/gitConfiguration.svelte +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/steps/gitConfiguration.svelte @@ -4,9 +4,8 @@ import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte'; import { WizardStep } from '$lib/layout'; import { sdk } from '$lib/stores/sdk'; - import { sortBranches } from '$routes/(console)/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte'; import { choices } from '../../store'; - import { installation, repository } from '$lib/stores/vcs'; + import { installation, repository, sortBranches } from '$lib/stores/vcs'; $choices.rootDir ??= ''; diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte index baf802e2ce..a2f6116a26 100644 --- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte +++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte @@ -12,9 +12,9 @@ import { func, repositories } from '../store'; import { invalidate } from '$app/navigation'; import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte'; - import { sortBranches } from './updateConfiguration.svelte'; import { installations } from '$lib/wizards/functions/store'; import { isValueOfStringEnum } from '$lib/helpers/types'; + import { sortBranches } from '$lib/stores/vcs'; export let show: boolean; 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 666b1e0a73..2b23a5fb5b 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 @@ -1,15 +1,3 @@ - - - - - Create site - Appwrite - - - - Create organization - -
    - I'm wanna be a site! :) -
    - I'm an aside! :) -     - - - - - -     diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte new file mode 100644 index 0000000000..fb29c120a4 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte @@ -0,0 +1,291 @@ + + + + Create site - Appwrite + + + + Create site + +
    + {#if isTemplate} + {@const options = data.template.frameworks.map((framework) => { + return { + value: framework, + label: framework + }; + })} + +
    + + + {#if showCustomId} + + {:else} +
    + (showCustomId = !showCustomId)}> + +
    + {/if} + + +     +
    +
    + + Connect to Git repository + Clone the template to a new repository or connect it to an existing one. + + + Connect later + Deploy now and continue development via CLI, or connect Git from your site + settings. + +
    + {#if connectBehaviour === 'now'} + {#if data?.installations?.length} +
    + + + + + + {#if repositoryBehaviour === 'new'} + + + + {:else}asdsaasd{/if} + +
    + {:else} + + + + + + + + {/if} + {/if} +     + {:else} + +
    + + + {#if showCustomId} + + {:else} +
    + (showCustomId = !showCustomId)}> + +
    + {/if} +     +
    + +
    + {#await loadBranches()} +
    +
    +
    + {:then branches} + {@const options = + branches + ?.map((branch) => { + return { + value: branch.name, + label: branch.name + }; + }) + ?.sort((a, b) => { + return a.label > b.label ? 1 : -1; + }) ?? []} + + { + branch = event.detail.value; + }} + interactiveOutput + name="branch" + {options} /> + + + {/await} +
    +     + {/if} +
    + I'm an aside! :) +     + + + + + +     diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts new file mode 100644 index 0000000000..b7caeb1786 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts @@ -0,0 +1,27 @@ +import { Query } from '@appwrite.io/console'; +import { sdk } from '$lib/stores/sdk'; + +export const load = async ({ url }) => { + const { installations } = await sdk.forProject.vcs.listInstallations(); + let template = null; + if (url.searchParams.has('template')) { + //Fetch the template + template = mockTeplate; + } + return { + template, + installations + }; +}; + +const mockTeplate: { + preview: string; + name: string; + frameworks: string[]; + $id: string; +} = { + preview: 'https://unsplash.it/300/200', + name: 'Template 1', + frameworks: ['react', 'vue', 'angular'], + $id: '1' +}; From 56b10584a890034827e624cd46587d7668986c32 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 23 Oct 2024 11:47:40 +0200 Subject: [PATCH 018/222] feat: more work on creation flow --- package.json | 2 +- pnpm-lock.yaml | 10 ++-- src/lib/components/card.svelte | 11 ++-- .../wizard/createManual.svelte | 9 +-- .../sites/create-site/settings/+page.svelte | 59 ++++++++++++++++--- 5 files changed, 67 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index d410a42de9..7938ce936a 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "1.0.0-next.5", - "@appwrite.io/pink-svelte": "1.0.0-next.62", + "@appwrite.io/pink-svelte": "1.0.0-next.63", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.33.1", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1cedb7852..edac5ebe8a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: 1.0.0-next.5 version: 1.0.0-next.5(svelte@4.2.19) '@appwrite.io/pink-svelte': - specifier: 1.0.0-next.62 - version: 1.0.0-next.62(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: 1.0.0-next.63 + version: 1.0.0-next.63(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -213,8 +213,8 @@ packages: '@appwrite.io/pink-icons@0.25.0': resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==} - '@appwrite.io/pink-svelte@1.0.0-next.62': - resolution: {integrity: sha512-oGuLNHlJBUqLYvubIb06Vi9aYmF1i4RPJFzAPtuzn6TRcAYnzlGigFc2CXHPZg6pKOQ4ZEYMibcSNQaHAIrGGA==} + '@appwrite.io/pink-svelte@1.0.0-next.63': + resolution: {integrity: sha512-Zrnrc1aopTZ/Fq5VVyCnBLNWtsmrw+hMtGXr4tza2x8Qhl9n+G6DkaEZefV1p1AK502cd6OapZwpg/avTfSM+w==} peerDependencies: react-dom: ^18.0.0 svelte: ^4.0.0 @@ -3870,7 +3870,7 @@ snapshots: '@appwrite.io/pink-icons@0.25.0': {} - '@appwrite.io/pink-svelte@1.0.0-next.62(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@1.0.0-next.63(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: '@appwrite.io/pink-icons-svelte': 1.0.0-next.5(svelte@4.2.19) '@floating-ui/dom': 1.6.11 diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte index 26ca8816f2..f5ea2c88d6 100644 --- a/src/lib/components/card.svelte +++ b/src/lib/components/card.svelte @@ -1,5 +1,7 @@ {#if href} - + {:else if isButton} - + {:else} - + diff --git a/src/routes/(console)/project-[project]/functions/create-function/wizard/createManual.svelte b/src/routes/(console)/project-[project]/functions/create-function/wizard/createManual.svelte index ff85a47d22..edc3e1cce0 100644 --- a/src/routes/(console)/project-[project]/functions/create-function/wizard/createManual.svelte +++ b/src/routes/(console)/project-[project]/functions/create-function/wizard/createManual.svelte @@ -5,13 +5,7 @@ import { sdk } from '$lib/stores/sdk'; import { wizard } from '$lib/stores/wizard'; import { goto } from '$app/navigation'; - import { - choices, - createFunction, - createFunctionDeployment, - installation, - repository - } from '../store'; + import { choices, createFunction, createFunctionDeployment } from '../store'; import { addNotification } from '$lib/stores/notifications'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; import { base } from '$app/paths'; @@ -20,6 +14,7 @@ import Configuration from './steps/manualConfiguration.svelte'; import ExecuteAccess from './steps/executeAccess.svelte'; import { isValueOfStringEnum } from '$lib/helpers/types'; + import { installation, repository } from '$lib/stores/vcs'; async function create() { try { diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte index fb29c120a4..145c9863c7 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte @@ -3,7 +3,7 @@ import { base } from '$app/paths'; import { page } from '$app/stores'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; - import { Card, LabelCard } from '$lib/components'; + import { Card, Heading, LabelCard } from '$lib/components'; import CustomId from '$lib/components/customId.svelte'; import { Dependencies } from '$lib/constants'; import { @@ -23,8 +23,9 @@ import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { repository, sortBranches } from '$lib/stores/vcs'; - import { consoleVariables } from '$routes/(console)/store'; - import { Fieldset, Layout, Empty } from '@appwrite.io/pink-svelte'; + // import { consoleVariables } from '$routes/(console)/store'; + import { Fieldset, Layout, Empty, Icon, Typography } from '@appwrite.io/pink-svelte'; + import { IconGitBranch } from '@appwrite.io/pink-icons-svelte'; import { onMount } from 'svelte'; import { writable } from 'svelte/store'; @@ -91,6 +92,23 @@ trackError(e, Submit.OrganizationCreate); } } + + let callbackState: Record = null; + + function connectGitHub() { + const redirect = new URL($page.url); + if (callbackState) { + Object.keys(callbackState).forEach((key) => { + redirect.searchParams.append(key, callbackState[key]); + }); + } + const target = new URL(`${sdk.forProject.client.config.endpoint}/vcs/github/authorize`); + target.searchParams.set('project', $page.params.project); + target.searchParams.set('success', redirect.toString()); + target.searchParams.set('failure', redirect.toString()); + target.searchParams.set('mode', 'admin'); + return target; + } @@ -143,8 +161,9 @@ value="now" bind:group={connectBehaviour} disabled={!isVcsEnabled}> - Connect to Git repository + + Connect to Git repository + Clone the template to a new repository or connect it to an existing one. - @@ -276,7 +300,28 @@ {/if} - I'm an aside! :) + + {#if isTemplate} + + + + + {data.template.name} + + + + + + {data.template.name} + + Framework + + + {/if} + From c00cc87fba22f4d84d5982c95678410a0c30c10a Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 23 Oct 2024 15:40:06 +0200 Subject: [PATCH 019/222] feat: site creation --- package.json | 2 +- pnpm-lock.yaml | 10 +- src/lib/components/repositories.svelte | 2 - src/lib/elements/forms/inputSearch.svelte | 2 + .../project-[project]/sites/+page.svelte | 38 ++++--- .../sites/create-site/settings/+page.svelte | 102 ++++++++++++++---- .../sites/create-site/settings/+page.ts | 2 +- .../project-[project]/sites/siteCard.svelte | 85 --------------- 8 files changed, 113 insertions(+), 130 deletions(-) delete mode 100644 src/routes/(console)/project-[project]/sites/siteCard.svelte diff --git a/package.json b/package.json index 7938ce936a..9d68aa3e39 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "1.0.0-next.5", - "@appwrite.io/pink-svelte": "1.0.0-next.63", + "@appwrite.io/pink-svelte": "1.0.0-next.65", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.33.1", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index edac5ebe8a..c7524a27a2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: 1.0.0-next.5 version: 1.0.0-next.5(svelte@4.2.19) '@appwrite.io/pink-svelte': - specifier: 1.0.0-next.63 - version: 1.0.0-next.63(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: 1.0.0-next.65 + version: 1.0.0-next.65(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -213,8 +213,8 @@ packages: '@appwrite.io/pink-icons@0.25.0': resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==} - '@appwrite.io/pink-svelte@1.0.0-next.63': - resolution: {integrity: sha512-Zrnrc1aopTZ/Fq5VVyCnBLNWtsmrw+hMtGXr4tza2x8Qhl9n+G6DkaEZefV1p1AK502cd6OapZwpg/avTfSM+w==} + '@appwrite.io/pink-svelte@1.0.0-next.65': + resolution: {integrity: sha512-7HGqSk9MMi98ecdkXYHAEFHkMzCiw71KId2Pa5PpjooKb+s87d6SmIaUtXLzeEb9kibXRWqW9ic7ykQs2JauVQ==} peerDependencies: react-dom: ^18.0.0 svelte: ^4.0.0 @@ -3870,7 +3870,7 @@ snapshots: '@appwrite.io/pink-icons@0.25.0': {} - '@appwrite.io/pink-svelte@1.0.0-next.63(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@1.0.0-next.65(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: '@appwrite.io/pink-icons-svelte': 1.0.0-next.5(svelte@4.2.19) '@floating-ui/dom': 1.6.11 diff --git a/src/lib/components/repositories.svelte b/src/lib/components/repositories.svelte index 2a1999c2eb..f105ca9751 100644 --- a/src/lib/components/repositories.svelte +++ b/src/lib/components/repositories.svelte @@ -96,8 +96,6 @@
      { return { label: entry.organization, diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte index c64eb011aa..34c6d54e2b 100644 --- a/src/lib/elements/forms/inputSearch.svelte +++ b/src/lib/elements/forms/inputSearch.svelte @@ -12,6 +12,7 @@ export let autofocus = false; export let isWithEndButton = true; export let style: string = ''; + export let label: string = ''; const dispatch = createEventDispatcher(); let element: HTMLInputElement; @@ -49,6 +50,7 @@ {disabled} {required} {autofocus} + {label} type="search" bind:value on:input={valueChange}> diff --git a/src/routes/(console)/project-[project]/sites/+page.svelte b/src/routes/(console)/project-[project]/sites/+page.svelte index dfd9a89fd1..f9b39d6755 100644 --- a/src/routes/(console)/project-[project]/sites/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/+page.svelte @@ -11,7 +11,7 @@ import { Icon, Popover } from '@appwrite.io/pink-svelte'; import { Button } from '$lib/elements/forms'; import { IconDotsHorizontal } from '@appwrite.io/pink-icons-svelte'; - import SiteCard from './siteCard.svelte'; + import { Card } from '@appwrite.io/pink-svelte'; import { goto } from '$app/navigation'; import { base } from '$app/paths'; import { page } from '$app/stores'; @@ -76,20 +76,28 @@ {#if data.siteList.total}
      {#each data.siteList.sites as site} - - - -

      Tooltip content

      -       -       + + + + +

      Tooltip content

      +       +       +       {/each}
      diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte index 145c9863c7..73ba4d29dd 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte @@ -3,12 +3,13 @@ import { base } from '$app/paths'; import { page } from '$app/stores'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; - import { Card, Heading, LabelCard } from '$lib/components'; + import { Card, LabelCard } from '$lib/components'; import CustomId from '$lib/components/customId.svelte'; import { Dependencies } from '$lib/constants'; import { Button, Form, + InputChoice, InputRadio, InputSelect, InputSelectSearch, @@ -22,12 +23,21 @@ } from '$lib/layout'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; - import { repository, sortBranches } from '$lib/stores/vcs'; + import { installation, installations, repository, sortBranches } from '$lib/stores/vcs'; // import { consoleVariables } from '$routes/(console)/store'; - import { Fieldset, Layout, Empty, Icon, Typography } from '@appwrite.io/pink-svelte'; + import { + Fieldset, + Layout, + Empty, + Icon, + Typography, + Image, + Divider + } from '@appwrite.io/pink-svelte'; import { IconGitBranch } from '@appwrite.io/pink-icons-svelte'; import { onMount } from 'svelte'; import { writable } from 'svelte/store'; + import Repositories from '$lib/components/repositories.svelte'; export let data; // const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true; @@ -40,6 +50,7 @@ }); let showExitModal = false; let isTemplate = !!data?.template; + let hasInstallations = !!data?.installations?.total; let formComponent: Form; let isSubmitting = writable(false); @@ -52,15 +63,26 @@ let framework: string; let connectBehaviour: 'now' | 'later' = 'now'; let repositoryBehaviour = 'new'; + let repositoryName = ''; + let repositoryPrivate = false; + let selectedInstallationId = ''; + let selectedRepository = ''; - onMount(() => {}); + onMount(() => { + if (isTemplate) { + name = data.template.name; + framework = data.template.frameworks[0]; + $installation = data.installations[0]; + selectedInstallationId = $installation.$id; + } + }); async function loadBranches() { - console.log(data); const { branches } = await sdk.forProject.vcs.listRepositoryBranches( - data.installations[0].$id, + data.installations.installations[0].$id, $repository.id ); + selectedInstallationId = $installation.$id; const sorted = sortBranches(branches); branch = sorted[0]?.name ?? null; @@ -71,6 +93,10 @@ return sorted; } + async function createRepo() { + selectedRepository = '1234'; + } + async function create() { try { let site; @@ -177,7 +203,7 @@
    {#if connectBehaviour === 'now'} - {#if data?.installations?.length} + {#if hasInstallations}
    @@ -195,21 +221,50 @@ name="existing" /> {#if repositoryBehaviour === 'new'} + { + return { + label: entry.organization, + value: entry.$id + }; + } + )} + on:change={() => { + $installation = + data.installations.installations.find( + (entry) => + entry.$id === selectedInstallationId + ); + }} + bind:value={selectedInstallationId} /> + id="repositoryName" + label="Repository name" + placeholder="my-repository" + bind:value={repositoryName} /> + - - {:else}asdsaasd{/if} + + + + + + {:else} + + {/if}
    {:else} @@ -232,6 +287,7 @@ {/if} {/if} + {:else}
    @@ -315,7 +371,11 @@ - {data.template.name} + {data.template.name} Framework diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts index b7caeb1786..531aa235bc 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts +++ b/src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts @@ -2,7 +2,7 @@ import { Query } from '@appwrite.io/console'; import { sdk } from '$lib/stores/sdk'; export const load = async ({ url }) => { - const { installations } = await sdk.forProject.vcs.listInstallations(); + const installations = await sdk.forProject.vcs.listInstallations(); let template = null; if (url.searchParams.has('template')) { //Fetch the template diff --git a/src/routes/(console)/project-[project]/sites/siteCard.svelte b/src/routes/(console)/project-[project]/sites/siteCard.svelte deleted file mode 100644 index 8a86710772..0000000000 --- a/src/routes/(console)/project-[project]/sites/siteCard.svelte +++ /dev/null @@ -1,85 +0,0 @@ - - -{#if site} -
    - - -
    -
    - -
    - {site.name} -
    - - - - {site.name} - - - - - - Deployed {timeFromNow(site.$updatedAt)} - - -     -     -
    -{/if} - - From d41a5e14037f54e617a0d49c16e9c38721ace502 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 23 Oct 2024 17:53:13 +0200 Subject: [PATCH 020/222] feat: creatin flow --- package.json | 2 +- pnpm-lock.yaml | 10 +- src/lib/components/repositories.svelte | 246 +++++++++-------- .../sites/create-site/settings/+page.svelte | 251 +++++++----------- .../settings/connectBehaviour.svelte | 26 ++ .../sites/create-site/settings/details.svelte | 47 ++++ .../settings/productionBranch.svelte | 33 +++ 7 files changed, 329 insertions(+), 286 deletions(-) create mode 100644 src/routes/(console)/project-[project]/sites/create-site/settings/connectBehaviour.svelte create mode 100644 src/routes/(console)/project-[project]/sites/create-site/settings/details.svelte create mode 100644 src/routes/(console)/project-[project]/sites/create-site/settings/productionBranch.svelte diff --git a/package.json b/package.json index 9d68aa3e39..6af723b6dc 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "1.0.0-next.5", - "@appwrite.io/pink-svelte": "1.0.0-next.65", + "@appwrite.io/pink-svelte": "1.0.0-next.66", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.33.1", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c7524a27a2..71444142ac 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: 1.0.0-next.5 version: 1.0.0-next.5(svelte@4.2.19) '@appwrite.io/pink-svelte': - specifier: 1.0.0-next.65 - version: 1.0.0-next.65(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: 1.0.0-next.66 + version: 1.0.0-next.66(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -213,8 +213,8 @@ packages: '@appwrite.io/pink-icons@0.25.0': resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==} - '@appwrite.io/pink-svelte@1.0.0-next.65': - resolution: {integrity: sha512-7HGqSk9MMi98ecdkXYHAEFHkMzCiw71KId2Pa5PpjooKb+s87d6SmIaUtXLzeEb9kibXRWqW9ic7ykQs2JauVQ==} + '@appwrite.io/pink-svelte@1.0.0-next.66': + resolution: {integrity: sha512-EFNfbN4Bo/3EHcx3A3GeHBz2HvjgUKuL3UQtfc9l7oCSJn4H6ky4zAEDfw9fotJeqzJDytyGr6YnU5gGadkTaA==} peerDependencies: react-dom: ^18.0.0 svelte: ^4.0.0 @@ -3870,7 +3870,7 @@ snapshots: '@appwrite.io/pink-icons@0.25.0': {} - '@appwrite.io/pink-svelte@1.0.0-next.65(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@1.0.0-next.66(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: '@appwrite.io/pink-icons-svelte': 1.0.0-next.5(svelte@4.2.19) '@floating-ui/dom': 1.6.11 diff --git a/src/lib/components/repositories.svelte b/src/lib/components/repositories.svelte index f105ca9751..ecc97adbf4 100644 --- a/src/lib/components/repositories.svelte +++ b/src/lib/components/repositories.svelte @@ -9,6 +9,7 @@ import { repositories } from '$routes/(console)/project-[project]/functions/function-[function]/store'; import { installation, installations, repository } from '$lib/stores/vcs'; import { createEventDispatcher } from 'svelte'; + import { Layout } from '@appwrite.io/pink-svelte'; const dispatch = createEventDispatcher(); @@ -71,138 +72,133 @@ {#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} -

    - Manage organization configuration in your project settings. -

    - {#if selectedInstallation} - {#await loadRepositories(selectedInstallation, search)} -
    -
    -
    - {:then response} - {#if response?.length} -
      - {#each response as repo, i} -
    • -
      -
      - {#if action === 'select'} - repository.set(repo)} - value={repo.id} /> - {/if} + + + {#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} +

      + Manage organization configuration in your project settings. +

      +       + {#if selectedInstallation} + {#await loadRepositories(selectedInstallation, search)} + +
      + + {:then response} + {#if response?.length} +
        + {#each response as repo, i} +
      • +
        - {#if repo.runtime} - {repo.name} + class="u-flex u-cross-center u-gap-8" + style="margin-block: .75rem;"> + {#if action === 'select'} + repository.set(repo)} + value={repo.id} /> {/if} -
        -
        - {repo.name} - {#if repo.private} -
        - {#if action === 'button'} -
        - -
        - {/if}
        +
        • + {/each} +
      + {:else if search} + +
      +
      + Sorry we couldn't find "{search}" +

      There are no repositories that match your search.

      +
      +
      +
      -
      • - {/each} -
    - {:else if search} - -
    -
    - Sorry we couldn't find "{search}" -

    There are no repositories that match your search.

    -
    -
    -
    -
    -     - {:else} - - {/if} - {/await} - {/if} + + {:else} + + {/if} + {/await} + {/if} + {:else}
    - - {:else} - - {/if} - -
    + +     + {:else} + { + trackEvent('click_connect_repository', { + from: 'cover' + }); + repository.set(e.detail); + selectedRepository = e.detail.id; + showSiteConfig = true; + }} /> + {/if} + + + {/if} {:else} {/if} - {/if} - + + {/if} {:else} -
    - - - {#if showCustomId} - - {:else} -
    - (showCustomId = !showCustomId)}> - -
    - {/if} -     -
    +
    {#await loadBranches()} diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/connectBehaviour.svelte b/src/routes/(console)/project-[project]/sites/create-site/settings/connectBehaviour.svelte new file mode 100644 index 0000000000..5034401751 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/settings/connectBehaviour.svelte @@ -0,0 +1,26 @@ + + +
    + + Connect to Git repository + Clone the template to a new repository or connect it to an existing one. + + + Connect later + Deploy now and continue development via CLI, or connect Git from your site settings. + +
    diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/details.svelte b/src/routes/(console)/project-[project]/sites/create-site/settings/details.svelte new file mode 100644 index 0000000000..91856950f5 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/settings/details.svelte @@ -0,0 +1,47 @@ + + +
    + + + {#if showCustomId} + + {:else} +
    + (showCustomId = !showCustomId)}> + +
    + {/if} + {#if showFramework} + + {/if} +     +
    diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/productionBranch.svelte b/src/routes/(console)/project-[project]/sites/create-site/settings/productionBranch.svelte new file mode 100644 index 0000000000..b6affa385e --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/settings/productionBranch.svelte @@ -0,0 +1,33 @@ + + +
    + + { + branch = event.detail.value; + }} + interactiveOutput + name="branch" + {options} /> + + +
    From 0495c522864909b302581fca97c2480d5763cb79 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 24 Oct 2024 09:59:02 +0200 Subject: [PATCH 021/222] feat: move to configuration folder, more work on second step --- .../sites/create-site/+page.svelte | 2 +- .../{settings => configuration}/+page.svelte | 49 ++++++++++++++----- .../{settings => configuration}/+page.ts | 0 .../configuration/configuration.svelte | 49 +++++++++++++++++++ .../connectBehaviour.svelte | 0 .../details.svelte | 0 .../productionBranch.svelte | 0 7 files changed, 86 insertions(+), 14 deletions(-) rename src/routes/(console)/project-[project]/sites/create-site/{settings => configuration}/+page.svelte (89%) rename src/routes/(console)/project-[project]/sites/create-site/{settings => configuration}/+page.ts (100%) create mode 100644 src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte rename src/routes/(console)/project-[project]/sites/create-site/{settings => configuration}/connectBehaviour.svelte (100%) rename src/routes/(console)/project-[project]/sites/create-site/{settings => configuration}/details.svelte (100%) rename src/routes/(console)/project-[project]/sites/create-site/{settings => configuration}/productionBranch.svelte (100%) diff --git a/src/routes/(console)/project-[project]/sites/create-site/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/+page.svelte index 0cebfd50ab..49bebef169 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/+page.svelte @@ -118,7 +118,7 @@ runtime: template.name }); }} - href={`${base}/project-${$page.params.project}/sites/create-site/settings?template=${template.$id}`} + href={`${base}/project-${$page.params.project}/sites/create-site/configuration?template=${template.$id}`} class="box u-width-full-line u-flex u-cross-center u-gap-8" style:--box-padding="1rem" style:--box-border-radius="var(--border-radius-small)"> diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte similarity index 89% rename from src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte rename to src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte index 737c2084ff..584d399ad2 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte @@ -39,6 +39,7 @@ import Details from './details.svelte'; import ConnectBehaviour from './connectBehaviour.svelte'; import ProductionBranch from './productionBranch.svelte'; + import Configuration from './configuration.svelte'; export let data; @@ -141,18 +142,40 @@ {#if isTemplate} - {#if selectedRepository && showSiteConfig} - - {:else} - {@const options = data.template.frameworks.map((framework) => { - return { - value: framework, - label: framework - }; - })} + + {#if selectedRepository && showSiteConfig} + + + + +

    + {$repository.name} +

    +     + +     +     + + + {:else} + {@const options = data.template.frameworks.map((framework) => { + return { + value: framework, + label: framework + }; + })} -
    - +
    {#if connectBehaviour === 'now'} {#if hasInstallations} @@ -246,8 +269,8 @@ {/if} - - {/if} + {/if} + {:else} diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.ts similarity index 100% rename from src/routes/(console)/project-[project]/sites/create-site/settings/+page.ts rename to src/routes/(console)/project-[project]/sites/create-site/configuration/+page.ts diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte new file mode 100644 index 0000000000..5b8f5fe13e --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte @@ -0,0 +1,49 @@ + + +
    + + {#if source === 'custom'} + + {/if} + + + {#if source === 'custom'} + + + Build settings Optional + + Set up how your project is built and where the output files are stored. + + {/if} + + Required environment variables + Provide the values for the required environment variables to run this application. + + + Environment variables Optional + Set up environment variables to securely manage keys and settings for your project. + + + +
    diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/connectBehaviour.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte similarity index 100% rename from src/routes/(console)/project-[project]/sites/create-site/settings/connectBehaviour.svelte rename to src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/details.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/details.svelte similarity index 100% rename from src/routes/(console)/project-[project]/sites/create-site/settings/details.svelte rename to src/routes/(console)/project-[project]/sites/create-site/configuration/details.svelte diff --git a/src/routes/(console)/project-[project]/sites/create-site/settings/productionBranch.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/productionBranch.svelte similarity index 100% rename from src/routes/(console)/project-[project]/sites/create-site/settings/productionBranch.svelte rename to src/routes/(console)/project-[project]/sites/create-site/configuration/productionBranch.svelte From f6f69c97eeb1c726649623a08f1ac0ac7a5b4ac7 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 24 Oct 2024 11:08:07 +0200 Subject: [PATCH 022/222] feat: refactor input radio, more work on conf --- src/lib/elements/forms/inputRadio.svelte | 60 ++---- .../create-site/configuration/+page.svelte | 15 +- .../sites/create-site/configuration/+page.ts | 17 +- .../configuration/configuration.svelte | 175 ++++++++++++++---- 4 files changed, 178 insertions(+), 89 deletions(-) diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte index 1355b1cb61..bf6e871304 100644 --- a/src/lib/elements/forms/inputRadio.svelte +++ b/src/lib/elements/forms/inputRadio.svelte @@ -1,5 +1,10 @@ - -
    - - - -
    - {#if error} - {error} - {/if} -     + diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte index 584d399ad2..a4f107d3e1 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte @@ -55,11 +55,11 @@ let formComponent: Form; let isSubmitting = writable(false); - let name: string; - let id: string; + let name = data?.template?.name ?? ''; + let id = data?.template?.$id ?? ''; + let framework = data?.template?.frameworks[0] ?? ''; let branch: string; let rootDir = ''; - let framework: string; let connectBehaviour: 'now' | 'later' = 'now'; let repositoryBehaviour: 'new' | 'existing' = 'new'; let repositoryName = ''; @@ -70,8 +70,6 @@ onMount(() => { if (isTemplate) { - name = data.template.name; - framework = data.template.frameworks[0]; $installation ??= data.installations[0]; selectedInstallationId = $installation?.$id; } @@ -166,7 +164,10 @@     - + {:else} {@const options = data.template.frameworks.map((framework) => { return { @@ -183,12 +184,14 @@ []; } = { preview: 'https://unsplash.it/300/200', name: 'Template 1', frameworks: ['react', 'vue', 'angular'], - $id: '1' + $id: '1', + variables: [ + { + name: 'API_KEY', + type: 'string', + default: '12345', + description: 'API Key' + }, + { + name: 'API_SECRET', + type: 'string', + default: '12345', + description: 'API Secret' + } + ] }; diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte index 5b8f5fe13e..235ad36088 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte @@ -1,49 +1,146 @@ -
    - - {#if source === 'custom'} - - {/if} + export let source: 'custom' | 'template' = 'custom'; + export let framework = FRAMEWORKS_AVAILABLE[0].id; + export let variables = []; + + let { requiredVariables, optionalVariables } = variables.reduce( + (acc, variable) => { + if (variable.required) { + acc.requiredVariables.push(variable); + } else { + acc.optionalVariables.push(variable); + } + return acc; + }, + { requiredVariables: [], optionalVariables: [] } + ); + + let installCommand = ''; + let buildCommand = ''; + let outputDirectory = ''; + - +{#if source === 'custom' || variables?.length} +
    + {#if source === 'custom'} - - - Build settings Optional - - Set up how your project is built and where the output files are stored. - + ({ + value: framework.id, + label: framework.name + }))} /> {/if} - - Required environment variables - Provide the values for the required environment variables to run this application. - - - Environment variables Optional - Set up environment variables to securely manage keys and settings for your project. - - - -
    + + + {#if source === 'custom'} + {@const frameworkData = FRAMEWORKS_AVAILABLE.find((f) => f.id === framework)} + + + Build settings Optional + + + Set up how your project is built and where the output files are stored. + + + + + + + + + + + + + + + {/if} + {#if requiredVariables?.length} + + Required environment variables + Provide the values for the required environment variables to run this application. + + {/if} + {#if optionalVariables?.length} + + Environment variables Optional + Set up environment variables to securely manage keys and settings for your project. + + {/if} + +     +
    +{/if} From a9e073993d6fc543f40e6b430a3b615afbb2379b Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 24 Oct 2024 14:51:57 +0200 Subject: [PATCH 023/222] bump icons, label cards --- package.json | 4 +- pnpm-lock.yaml | 23 ++++++++---- .../components/billing/planSelection.svelte | 6 +-- src/lib/components/labelCard.svelte | 37 +++++++++++++------ .../database-[database]/backups/table.svelte | 2 +- .../configuration/connectBehaviour.svelte | 4 +- 6 files changed, 49 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index 6af723b6dc..732a3a8778 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "@appwrite.io/console": "1.4.1", "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", - "@appwrite.io/pink-icons-svelte": "1.0.0-next.5", - "@appwrite.io/pink-svelte": "1.0.0-next.66", + "@appwrite.io/pink-icons-svelte": "1.0.0-next.6", + "@appwrite.io/pink-svelte": "1.0.0-next.67", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.33.1", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 71444142ac..57ca800fdf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,11 +18,11 @@ importers: specifier: 0.25.0 version: 0.25.0 '@appwrite.io/pink-icons-svelte': - specifier: 1.0.0-next.5 - version: 1.0.0-next.5(svelte@4.2.19) + specifier: 1.0.0-next.6 + version: 1.0.0-next.6(svelte@4.2.19) '@appwrite.io/pink-svelte': - specifier: 1.0.0-next.66 - version: 1.0.0-next.66(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: 1.0.0-next.67 + version: 1.0.0-next.67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -210,11 +210,16 @@ packages: peerDependencies: svelte: ^4.0.0 + '@appwrite.io/pink-icons-svelte@1.0.0-next.6': + resolution: {integrity: sha512-izjcvqOvqjXEIA1DoO+5qWFkiky5+Xsgj5g3LA18u3L7vaJstbGzf2plT5qhkkYhDcCPy35psnj4YyF3ztWWQA==} + peerDependencies: + svelte: ^4.0.0 + '@appwrite.io/pink-icons@0.25.0': resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==} - '@appwrite.io/pink-svelte@1.0.0-next.66': - resolution: {integrity: sha512-EFNfbN4Bo/3EHcx3A3GeHBz2HvjgUKuL3UQtfc9l7oCSJn4H6ky4zAEDfw9fotJeqzJDytyGr6YnU5gGadkTaA==} + '@appwrite.io/pink-svelte@1.0.0-next.67': + resolution: {integrity: sha512-HZKNUCkpjRsV7wYNx8AomJvU3WkJP6ehAeNDCUV2P5t2bLpN1ZdYU3o5Lhe4nmr/OkIrxDEd4eYumy0W99nAmw==} peerDependencies: react-dom: ^18.0.0 svelte: ^4.0.0 @@ -3868,9 +3873,13 @@ snapshots: dependencies: svelte: 4.2.19 + '@appwrite.io/pink-icons-svelte@1.0.0-next.6(svelte@4.2.19)': + dependencies: + svelte: 4.2.19 + '@appwrite.io/pink-icons@0.25.0': {} - '@appwrite.io/pink-svelte@1.0.0-next.66(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@1.0.0-next.67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: '@appwrite.io/pink-icons-svelte': 1.0.0-next.5(svelte@4.2.19) '@floating-ui/dom': 1.6.11 diff --git a/src/lib/components/billing/planSelection.svelte b/src/lib/components/billing/planSelection.svelte index 0d484a9b40..749261ea4a 100644 --- a/src/lib/components/billing/planSelection.svelte +++ b/src/lib/components/billing/planSelection.svelte @@ -27,7 +27,7 @@ value={BillingPlan.FREE} tooltipShow={anyOrgFree} tooltipText="You are limited to 1 Free organization per account." - padding={1.5}> + padding="medium">
    + padding="medium">
    + padding="medium">

    diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte index f0d0020d9c..947d2de3c1 100644 --- a/src/lib/components/labelCard.svelte +++ b/src/lib/components/labelCard.svelte @@ -1,13 +1,15 @@ -

    + + + + diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte index d2a0feaac2..e8a50f9d72 100644 --- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte +++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte @@ -322,7 +322,7 @@ {#each restoreOptions as restoreOption}
    diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte index 5034401751..390e8c1f90 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte @@ -11,8 +11,8 @@ name="connect-behaviour" value="now" bind:group={connectBehaviour} - disabled={!isVcsEnabled}> - Connect to Git repository + disabled={!isVcsEnabled} + title="Connect to Git repository"> Clone the template to a new repository or connect it to an existing one. Date: Thu, 24 Oct 2024 18:13:00 +0200 Subject: [PATCH 024/222] feat: creation process variables --- package.json | 2 +- pnpm-lock.yaml | 10 +- .../create-site/configuration/+page.svelte | 55 +++----- .../sites/create-site/configuration/+page.ts | 20 +-- .../create-site/configuration/aside.svelte | 72 ++++++++++ .../configuration/configuration.svelte | 133 ++++++++++++++++-- .../configuration/gitRepositoy.svelte | 0 7 files changed, 228 insertions(+), 64 deletions(-) create mode 100644 src/routes/(console)/project-[project]/sites/create-site/configuration/aside.svelte create mode 100644 src/routes/(console)/project-[project]/sites/create-site/configuration/gitRepositoy.svelte diff --git a/package.json b/package.json index 732a3a8778..451449ea5e 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@appwrite.io/console": "1.4.1", "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", - "@appwrite.io/pink-icons-svelte": "1.0.0-next.6", + "@appwrite.io/pink-icons-svelte": "1.0.0-next.7", "@appwrite.io/pink-svelte": "1.0.0-next.67", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.33.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 57ca800fdf..e48ce20eb5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ importers: specifier: 0.25.0 version: 0.25.0 '@appwrite.io/pink-icons-svelte': - specifier: 1.0.0-next.6 - version: 1.0.0-next.6(svelte@4.2.19) + specifier: 1.0.0-next.7 + version: 1.0.0-next.7(svelte@4.2.19) '@appwrite.io/pink-svelte': specifier: 1.0.0-next.67 version: 1.0.0-next.67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) @@ -210,8 +210,8 @@ packages: peerDependencies: svelte: ^4.0.0 - '@appwrite.io/pink-icons-svelte@1.0.0-next.6': - resolution: {integrity: sha512-izjcvqOvqjXEIA1DoO+5qWFkiky5+Xsgj5g3LA18u3L7vaJstbGzf2plT5qhkkYhDcCPy35psnj4YyF3ztWWQA==} + '@appwrite.io/pink-icons-svelte@1.0.0-next.7': + resolution: {integrity: sha512-Bmff3YGEliIetqc3UyjzJNLg88FIC6UXYwTzGqHm+0QLCRJxwAFpTkfTCLIqMe5PUqGshq6jM9SPyCCSVVS3aw==} peerDependencies: svelte: ^4.0.0 @@ -3873,7 +3873,7 @@ snapshots: dependencies: svelte: 4.2.19 - '@appwrite.io/pink-icons-svelte@1.0.0-next.6(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@1.0.0-next.7(svelte@4.2.19)': dependencies: svelte: 4.2.19 diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte index a4f107d3e1..9457e2b54c 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte @@ -23,16 +23,8 @@ import { sdk } from '$lib/stores/sdk'; import { installation, repository, sortBranches } from '$lib/stores/vcs'; // import { consoleVariables } from '$routes/(console)/store'; - import { - Fieldset, - Layout, - Empty, - Icon, - Typography, - Image, - Divider - } from '@appwrite.io/pink-svelte'; - import { IconGitBranch } from '@appwrite.io/pink-icons-svelte'; + import { Fieldset, Layout, Empty, Icon, Divider } from '@appwrite.io/pink-svelte'; + import { IconGithub } from '@appwrite.io/pink-icons-svelte'; import { onMount } from 'svelte'; import { writable } from 'svelte/store'; import Repositories from '$lib/components/repositories.svelte'; @@ -40,6 +32,7 @@ import ConnectBehaviour from './connectBehaviour.svelte'; import ProductionBranch from './productionBranch.svelte'; import Configuration from './configuration.svelte'; + import Aside from './aside.svelte'; export let data; @@ -67,6 +60,7 @@ let selectedInstallationId = ''; let selectedRepository = ''; let showSiteConfig = false; + let variables = []; onMount(() => { if (isTemplate) { @@ -149,7 +143,7 @@ alignItems="center" gap="xs"> - +

    {$repository.name}

    @@ -167,7 +161,8 @@ + bind:variables + templateVariables={data.template.variables} /> {:else} {@const options = data.template.frameworks.map((framework) => { return { @@ -247,6 +242,7 @@ from: 'cover' }); repository.set(e.detail); + repositoryName = e.detail.name; selectedRepository = e.detail.id; showSiteConfig = true; }} /> @@ -264,8 +260,7 @@ secondary href={connectGitHub().toString()} size="small"> - - + Connect to GitHub @@ -324,30 +319,14 @@ {/if} - {#if isTemplate} - - - - - {data.template.name} - - - - - - {data.template.name} - - Framework - - - {/if} +
    - {#if data.siteTemplates.templates?.length > 0} + {#if data.templates?.length > 0}
      - {#each data.siteTemplates.templates as template} + {#each data.templates as template} @@ -152,22 +190,9 @@ {/if}
      -

      Total templates: {data.siteTemplates.templates?.length}

      - +

      Total templates: {data.templates?.length}

      +
    - - diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts index dd33992558..ef068eb55c 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts @@ -1,59 +1,70 @@ import { Query } from '@appwrite.io/console'; import { sdk } from '$lib/stores/sdk'; -import { getPage, getSearch, getView, pageToOffset } from '$lib/helpers/load'; +import { getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load'; import { CARD_LIMIT } from '$lib/constants'; -export const load = async ({ url }) => { +export const load = async ({ url, route }) => { const limit = CARD_LIMIT; const page = getPage(url); const search = getSearch(url); + const view = getView(url, route, View.Grid); const offset = pageToOffset(page, limit); - const templates = { - templates: mockTemplates, - total: mockTemplates.length + const filter = { + useCases: url.searchParams.getAll('useCase'), + frameworks: url.searchParams.getAll('framework') }; + const siteTemplatesList = await sdk.forProject.sites.listSiteTemplates( + undefined, + undefined, + 100 + ); + + console.log(siteTemplatesList); + + const [frameworks, useCases] = siteTemplatesList.templates.reduce( + ([fr, uc], next) => { + next.useCases.forEach((useCase) => uc.add(useCase)); + // next.frameworks.forEach((framework) => fr.add(framework.name)); + return [fr, uc]; + }, + [new Set(), new Set()] + ); + + const templates = siteTemplatesList.templates.filter((template) => { + // if ( + // filter.framework.length > 0 + // && !template.frameworks.some((n) => filter.frameworks.includes(n.name)) + // ) { + // return false; + // } + + const filterLowerCases = filter.useCases.map((n) => n.toLowerCase()); + if ( + filter.useCases.length > 0 && + !template.useCases.some((n) => filterLowerCases.includes(n.toLowerCase())) + ) { + return false; + } + + if (search) { + return template.name.toLowerCase().includes(search.toLowerCase()); + } else { + return true; + } + }); + + console.log(frameworks, useCases, templates); + return { offset, limit, - search, - siteTemplates: templates + view, + filter, + frameworks, + useCases, + sum: templates.length, + templates: templates.splice(((page === 0 ? 1 : page) - 1) * limit, limit), + functions: await sdk.forProject.functions.list() }; }; - -const mockTemplates: { - $id: string; - name: string; - description: string; - preview: string; - frameworks: string[]; -}[] = [ - { - $id: '1', - name: 'Template 1', - description: 'This is a description', - preview: 'https://unsplash.it/300/200', - frameworks: ['react', 'vue', 'angular'] - }, - { - $id: '2', - name: 'Template 2', - description: 'Yet another description', - preview: 'https://unsplash.it/301/200', - frameworks: ['react', 'vue'] - }, - { - $id: '3', - name: 'Template 3', - description: 'This is a description too', - preview: 'https://unsplash.it/302/200', - frameworks: ['react', 'angular'] - }, - { - $id: '4', - name: 'Template 4', - description: 'This is a description too but it is very long', - preview: 'https://unsplash.it/303/200', - frameworks: ['vue', 'angular'] - } -]; From 179b31b30d74915764ff8cc15cd8c54ffe4df2ff Mon Sep 17 00:00:00 2001 From: Arman Date: Fri, 25 Oct 2024 15:23:02 +0200 Subject: [PATCH 029/222] feat: more methods! --- package.json | 2 +- pnpm-lock.yaml | 10 ++--- src/lib/actions/analytics.ts | 13 +++++- .../create-site/configuration/+page.svelte | 45 ++++++++++++++----- .../sites/create-site/configuration/+page.ts | 2 +- .../configuration/configuration.svelte | 7 ++- .../sites/create-site/templates/+page.ts | 6 +-- .../sites/site-[site]/+page.ts | 16 +++++++ 8 files changed, 73 insertions(+), 28 deletions(-) create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/+page.ts diff --git a/package.json b/package.json index c93a7e279c..aca6df59bb 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "e2e:ui": "playwright test tests/e2e --ui" }, "dependencies": { - "@appwrite.io/console": "npm:khushboo-console@^0.0.5", + "@appwrite.io/console": "npm:khushboo-console@^0.0.6", "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "1.0.0-next.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 07a46a429c..9a42ada87d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@appwrite.io/console': - specifier: npm:khushboo-console@^0.0.5 - version: khushboo-console@0.0.5 + specifier: npm:khushboo-console@^0.0.6 + version: khushboo-console@0.0.6 '@appwrite.io/pink': specifier: 0.25.0 version: 0.25.0 @@ -2527,8 +2527,8 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} - khushboo-console@0.0.5: - resolution: {integrity: sha512-d5lSA5KiEG/bd7VJELVrCO1BKMn5oikxTxRPCM5LJlj9LU13iiQZ/GSjlVVE1cv7DVXHWGw4TZIraqd5BsCKMg==} + khushboo-console@0.0.6: + resolution: {integrity: sha512-fu2lcV19LeXiPxnOIE/Carxtaf8m0nEZAxJpmT56KtuOsDoRlmn+BLMkNqEk5Ijr9/oq8E7cXFoOQFmJLG0OJg==} kleur@3.0.3: resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} @@ -6764,7 +6764,7 @@ snapshots: dependencies: json-buffer: 3.0.1 - khushboo-console@0.0.5: {} + khushboo-console@0.0.6: {} kleur@3.0.3: {} diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts index 29448eb58e..b97eb9fe5f 100644 --- a/src/lib/actions/analytics.ts +++ b/src/lib/actions/analytics.ts @@ -323,5 +323,16 @@ export enum Submit { MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete', ApplyQuickFilter = 'submit_apply_quick_filter', RequestBAA = 'submit_request_baa', - RequestSoc2 = 'submit_request_soc2' + RequestSoc2 = 'submit_request_soc2', + SiteCreate = 'submit_site_create', + SiteDelete = 'submit_site_delete', + SiteUpdateName = 'submit_site_update_name', + SiteUpdatePermissions = 'submit_site_update_permissions', + SiteUpdateSchedule = 'submit_site_update_schedule', + SiteUpdateConfiguration = 'submit_site_update_configuration', + SiteUpdateLogging = 'submit_site_update_logging', + SiteUpdateTimeout = 'submit_site_update_timeout', + SiteUpdateEvents = 'submit_site_update_events', + SiteUpdateScopes = 'submit_site_key_update_scopes', + SiteConnectRepo = 'submit_site_connect_repo' } diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte index 10cc91adf5..ba7dbd9c5f 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte @@ -1,5 +1,5 @@ @@ -128,7 +142,10 @@ Create site - Appwrite - + Create site
    @@ -158,6 +175,9 @@ { @@ -70,10 +73,6 @@ { requiredVariables: [], optionalVariables: [] } ); - let installCommand = ''; - let buildCommand = ''; - let outputDirectory = ''; - function selectComponent(variableType: string): typeof SvelteComponent { switch (variableType) { case 'password': diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts index ef068eb55c..83e972de7f 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts @@ -14,11 +14,7 @@ export const load = async ({ url, route }) => { frameworks: url.searchParams.getAll('framework') }; - const siteTemplatesList = await sdk.forProject.sites.listSiteTemplates( - undefined, - undefined, - 100 - ); + const siteTemplatesList = await sdk.forProject.sites.listTemplates(undefined, undefined, 100); console.log(siteTemplatesList); diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/+page.ts b/src/routes/(console)/project-[project]/sites/site-[site]/+page.ts new file mode 100644 index 0000000000..34ebff3102 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/site-[site]/+page.ts @@ -0,0 +1,16 @@ +import { sdk } from '$lib/stores/sdk'; +import { getLimit, getPage, pageToOffset } from '$lib/helpers/load'; +import { Dependencies } from '$lib/constants'; + +export const load = async ({ params }) => { + depends(Dependencies.SITE); + + + const site = + + return { + site : await sdk.forProject.sites.get([ + + ]); + }; +}; From 813737523417a687e969366b71c98e5587bb718e Mon Sep 17 00:00:00 2001 From: Arman Date: Fri, 25 Oct 2024 17:47:06 +0200 Subject: [PATCH 030/222] feat: refactor flow --- package.json | 2 +- pnpm-lock.yaml | 10 +- .../project-[project]/sites/+layout.ts | 2 +- .../project-[project]/sites/+page.svelte | 2 +- .../sites/create-site/+layout.ts | 9 + .../{configuration => }/aside.svelte | 3 +- .../{configuration => }/configuration.svelte | 0 .../create-site/configuration/+page.svelte | 2 +- .../sites/create-site/configuration/+page.ts | 41 +-- .../connectBehaviour.svelte | 0 .../{configuration => }/details.svelte | 0 .../{configuration => }/gitRepositoy.svelte | 0 .../productionBranch.svelte | 0 .../create-site/repositories/+page.svelte | 58 ++++ .../sites/create-site/repositories/+page.ts | 7 + .../repositories/configuration/+page.svelte | 230 +++++++++++++ .../sites/create-site/templates/+page.svelte | 2 +- .../sites/create-site/templates/+page.ts | 4 +- .../template-[template]/+page.svelte | 322 ++++++++++++++++++ .../templates/template-[template]/+page.ts | 13 + .../sites/createSiteModal.svelte | 10 +- .../sites/site-[site]/+layout.svelte | 9 + .../sites/site-[site]/+layout.ts | 12 + .../sites/site-[site]/+page.svelte | 11 + .../sites/site-[site]/+page.ts | 10 +- .../sites/site-[site]/breadcrumbs.svelte | 23 ++ .../sites/site-[site]/header.svelte | 64 ++++ 27 files changed, 784 insertions(+), 62 deletions(-) create mode 100644 src/routes/(console)/project-[project]/sites/create-site/+layout.ts rename src/routes/(console)/project-[project]/sites/create-site/{configuration => }/aside.svelte (96%) rename src/routes/(console)/project-[project]/sites/create-site/{configuration => }/configuration.svelte (100%) rename src/routes/(console)/project-[project]/sites/create-site/{configuration => }/connectBehaviour.svelte (100%) rename src/routes/(console)/project-[project]/sites/create-site/{configuration => }/details.svelte (100%) rename src/routes/(console)/project-[project]/sites/create-site/{configuration => }/gitRepositoy.svelte (100%) rename src/routes/(console)/project-[project]/sites/create-site/{configuration => }/productionBranch.svelte (100%) create mode 100644 src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte create mode 100644 src/routes/(console)/project-[project]/sites/create-site/repositories/+page.ts create mode 100644 src/routes/(console)/project-[project]/sites/create-site/repositories/configuration/+page.svelte create mode 100644 src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte create mode 100644 src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/+layout.ts create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/breadcrumbs.svelte create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/header.svelte diff --git a/package.json b/package.json index aca6df59bb..ed75f421ba 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "e2e:ui": "playwright test tests/e2e --ui" }, "dependencies": { - "@appwrite.io/console": "npm:khushboo-console@^0.0.6", + "@appwrite.io/console": "npm:khushboo-console@^0.0.7", "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "1.0.0-next.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9a42ada87d..5feec71827 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@appwrite.io/console': - specifier: npm:khushboo-console@^0.0.6 - version: khushboo-console@0.0.6 + specifier: npm:khushboo-console@^0.0.7 + version: khushboo-console@0.0.7 '@appwrite.io/pink': specifier: 0.25.0 version: 0.25.0 @@ -2527,8 +2527,8 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} - khushboo-console@0.0.6: - resolution: {integrity: sha512-fu2lcV19LeXiPxnOIE/Carxtaf8m0nEZAxJpmT56KtuOsDoRlmn+BLMkNqEk5Ijr9/oq8E7cXFoOQFmJLG0OJg==} + khushboo-console@0.0.7: + resolution: {integrity: sha512-+wuYRbRuABC4DhQ8ootlBKR6easgVPUeTdVpfnTZ+XAjQBTaBHZLz3nFa2rOFOaTfnLiQNUB52nf4KU77Vg2hg==} kleur@3.0.3: resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} @@ -6764,7 +6764,7 @@ snapshots: dependencies: json-buffer: 3.0.1 - khushboo-console@0.0.6: {} + khushboo-console@0.0.7: {} kleur@3.0.3: {} diff --git a/src/routes/(console)/project-[project]/sites/+layout.ts b/src/routes/(console)/project-[project]/sites/+layout.ts index 7220e77f98..571886cf87 100644 --- a/src/routes/(console)/project-[project]/sites/+layout.ts +++ b/src/routes/(console)/project-[project]/sites/+layout.ts @@ -5,7 +5,7 @@ import { Query } from '@appwrite.io/console'; import { Dependencies } from '$lib/constants'; import type { LayoutLoad } from './$types'; -export const load: LayoutLoad = async ({ depends }) => { +export const load = async ({ depends }) => { depends(Dependencies.SITES); return { diff --git a/src/routes/(console)/project-[project]/sites/+page.svelte b/src/routes/(console)/project-[project]/sites/+page.svelte index 7f18aa7a46..023371d9aa 100644 --- a/src/routes/(console)/project-[project]/sites/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/+page.svelte @@ -76,7 +76,7 @@
    {#each data.siteList.sites as site} { + const installations = await sdk.forProject.vcs.listInstallations(); + + return { + installations + }; +}; diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/aside.svelte b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte similarity index 96% rename from src/routes/(console)/project-[project]/sites/create-site/configuration/aside.svelte rename to src/routes/(console)/project-[project]/sites/create-site/aside.svelte index 4637c3ad6f..217b81c268 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration/aside.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte @@ -3,9 +3,10 @@ import { Button } from '$lib/elements/forms'; import { Icon, Image, Layout, Typography } from '@appwrite.io/pink-svelte'; import { IconGithub, IconReact, IconGitBranch } from '@appwrite.io/pink-icons-svelte'; + import type { Models } from '@appwrite.io/console'; export let isTemplate: boolean; - export let template: Record; + export let template: Models.TemplateSite; export let name: string; export let framework: string; export let repositoryName: string; diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte similarity index 100% rename from src/routes/(console)/project-[project]/sites/create-site/configuration/configuration.svelte rename to src/routes/(console)/project-[project]/sites/create-site/configuration.svelte diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte index ba7dbd9c5f..ec3faee151 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.svelte @@ -31,7 +31,7 @@ import ConnectBehaviour from './connectBehaviour.svelte'; import ProductionBranch from './productionBranch.svelte'; import Configuration from './configuration.svelte'; - import Aside from './aside.svelte'; + import Aside from '../aside.svelte'; import { ID } from '@appwrite.io/console'; export let data; diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.ts index bea0976ce9..67bf11efd7 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.ts +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/+page.ts @@ -1,46 +1,17 @@ -import { Query, type Models } from '@appwrite.io/console'; import { sdk } from '$lib/stores/sdk'; -export const load = async ({ url }) => { - const installations = await sdk.forProject.vcs.listInstallations(); +export const load = async ({ url, parent }) => { + const { installations } = await parent(); let template = null; if (url.searchParams.has('template')) { //Fetch the template - template = mockTeplate; + template = await sdk.forProject.sites.getTemplate(url.searchParams.get('template')); + console.log(template); + template.frameworks = ['sveltekit', 'nextjs']; } + return { template, installations }; }; - -const mockTeplate: { - preview: string; - name: string; - frameworks: string[]; - $id: string; - variables: Models.TemplateVariable[]; -} = { - preview: 'https://unsplash.it/300/200', - name: 'Template 1', - frameworks: ['sveltekit', 'nextje'], - $id: '1', - variables: [ - { - name: 'API_KEY', - type: 'url', - description: 'A very important API Key', - placeholder: 'elkfok430r0-i3d', - required: false, - value: '' - }, - { - name: 'API_SECRET', - type: 'password', - description: 'A very important API Secret', - placeholder: '32rd23r32t4', - required: true, - value: '' - } - ] -}; diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte b/src/routes/(console)/project-[project]/sites/create-site/connectBehaviour.svelte similarity index 100% rename from src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte rename to src/routes/(console)/project-[project]/sites/create-site/connectBehaviour.svelte diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/details.svelte b/src/routes/(console)/project-[project]/sites/create-site/details.svelte similarity index 100% rename from src/routes/(console)/project-[project]/sites/create-site/configuration/details.svelte rename to src/routes/(console)/project-[project]/sites/create-site/details.svelte diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/gitRepositoy.svelte b/src/routes/(console)/project-[project]/sites/create-site/gitRepositoy.svelte similarity index 100% rename from src/routes/(console)/project-[project]/sites/create-site/configuration/gitRepositoy.svelte rename to src/routes/(console)/project-[project]/sites/create-site/gitRepositoy.svelte diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/productionBranch.svelte b/src/routes/(console)/project-[project]/sites/create-site/productionBranch.svelte similarity index 100% rename from src/routes/(console)/project-[project]/sites/create-site/configuration/productionBranch.svelte rename to src/routes/(console)/project-[project]/sites/create-site/productionBranch.svelte diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte new file mode 100644 index 0000000000..76c504b50c --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte @@ -0,0 +1,58 @@ + + + + Create site + + { + trackEvent('click_connect_repository', { + from: 'cover' + }); + repository.set(e.detail); + goto(`${base}/project-${$page.params.project}/sites/create-site/configuration`); + }} /> + + + + + Missing a repository? +

    + Check your permissions in GitHub, your repository might be set to + private. +

    +     + + + {#if hasInstallations} + + {/if} + +     +     +     +     +     diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.ts new file mode 100644 index 0000000000..712dfc5d24 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.ts @@ -0,0 +1,7 @@ +export const load = async ({ parent }) => { + const { installations } = await parent(); + + return { + installations + }; +}; diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/configuration/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/configuration/+page.svelte new file mode 100644 index 0000000000..c5917de189 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/configuration/+page.svelte @@ -0,0 +1,230 @@ + + + + Create site - Appwrite + + + + Create site + + + + + + + +

    + {$repository.name} +

    +     + +     +     +
    + +
    + {#await loadBranches()} +
    +
    +
    + {:then branches} + {@const options = + branches + ?.map((branch) => { + return { + value: branch.name, + label: branch.name + }; + }) + ?.sort((a, b) => { + return a.label > b.label ? 1 : -1; + }) ?? []} + + { + branch = event.detail.value; + }} + interactiveOutput + name="branch" + {options} /> + + + {/await} +
    + + + +
    + + {/if} +
    +

    Total templates: {data.templates?.length}

    +
    - + diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte index 20f264cc78..536c2ebcb2 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte @@ -14,6 +14,7 @@ InputText } from '$lib/elements/forms'; import { + Wizard, WizardSecondaryContainer, WizardSecondaryContent, WizardSecondaryFooter @@ -133,181 +134,171 @@ Create site - Appwrite - - Create site - -
    - - {#if selectedRepository && showSiteConfig} - - - - -

    - {$repository.name} -

    -     - + + + {#if selectedRepository && showSiteConfig} + + + + +

    + {$repository.name} +

    -     - - {#if data.template.variables?.length} - - {/if} - {:else} - {@const options = data.template.frameworks.map((framework) => { - return { - value: framework.name, - label: framework.name - }; - })} + +     +     + + {#if data.template.variables?.length} + + {/if} + {:else} + {@const options = data.template.frameworks.map((framework) => { + return { + value: framework.name, + label: framework.name + }; + })} -
    - - {#if connectBehaviour === 'now'} - {#if hasInstallations} -
    - - - - - - {#if repositoryBehaviour === 'new'} - { - return { - label: entry.organization, - value: entry.$id - }; - } - )} - on:change={() => { - $installation = - data.installations.installations.find( - (entry) => - entry.$id === selectedInstallationId - ); - }} - bind:value={selectedInstallationId} /> - - +
    + + {#if connectBehaviour === 'now'} + {#if hasInstallations} +
    + + + + + + {#if repositoryBehaviour === 'new'} + { + return { + label: entry.organization, + value: entry.$id + }; + })} + on:change={() => { + $installation = data.installations.installations.find( + (entry) => entry.$id === selectedInstallationId + ); + }} + bind:value={selectedInstallationId} /> + + - - + + - - - {:else} - { - trackEvent('click_connect_repository', { - from: 'cover' - }); - repository.set(e.detail); - repositoryName = e.detail.name; - selectedRepository = e.detail.id; - showSiteConfig = true; - }} /> - {/if} - -
    - {:else} - - - - - - - - {/if} - {:else if data.template.variables?.length} - + + + {:else} + { + trackEvent('click_connect_repository', { + from: 'cover' + }); + repository.set(e.detail); + repositoryName = e.detail.name; + selectedRepository = e.detail.id; + showSiteConfig = true; + }} /> + {/if} + +
    + {:else} + + + + + + + {/if} + {:else if data.template.variables?.length} + {/if} - - - - + - - + + - - + + diff --git a/src/routes/(console)/project-[project]/sites/createSiteModal.svelte b/src/routes/(console)/project-[project]/sites/createSiteModal.svelte index d72163199f..4971824cdb 100644 --- a/src/routes/(console)/project-[project]/sites/createSiteModal.svelte +++ b/src/routes/(console)/project-[project]/sites/createSiteModal.svelte @@ -23,7 +23,7 @@
    Date: Sun, 27 Oct 2024 20:53:27 +0100 Subject: [PATCH 046/222] fix: create site --- .../repository-[repository]/+page.svelte | 12 +++++++++--- .../repositories/repository-[repository]/+page.ts | 5 ++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte index 360fefe0f4..791f04a62b 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte @@ -21,7 +21,7 @@ import ProductionBranch from '../../productionBranch.svelte'; import Configuration from './configuration.svelte'; import Aside from '../../aside.svelte'; - import { ID } from '@appwrite.io/console'; + import { Framework, ID } from '@appwrite.io/console'; import type { Models } from '@appwrite.io/console'; export let data; @@ -69,18 +69,24 @@ return sorted; } + function getEnumFromModel(model: Models.Framework): Framework { + return Framework[model.name]; + } + async function create() { try { let site = await sdk.forProject.sites.create( id || ID.unique(), name, - data.frameworks.frameworks.find((fr) => fr.name === framework.name), + getEnumFromModel(data.frameworks.frameworks.find((fr) => fr.name === framework.name)), true, + 30, installCommand, buildCommand, outputDirectory, undefined, undefined, + undefined, selectedInstallationId, selectedRepository, branch, @@ -164,7 +170,7 @@ bind:installCommand bind:buildCommand bind:outputDirectory - bind:framework + bind:selectedFramework={framework} bind:variables frameworks={data.frameworks.frameworks} /> diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.ts index 6a5dbb1b9c..a836513911 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.ts +++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.ts @@ -1,7 +1,7 @@ import { sdk } from '$lib/stores/sdk'; export const load = async ({ parent, params, url }) => { - const { installations, frameworks } = await parent(); + const { installations } = await parent(); const [repository] = await Promise.all([ sdk.forProject.vcs.getRepository(url.searchParams.get('installation'), params.repository) @@ -12,7 +12,6 @@ export const load = async ({ parent, params, url }) => { installation: installations.installations.find( (installation) => installation.$id === url.searchParams.get('installation') ), - repository, - frameworks + repository }; }; From 3a4ddd9367c4065680c84f2a641d2f10fa376c04 Mon Sep 17 00:00:00 2001 From: Arman Date: Sun, 27 Oct 2024 21:01:19 +0100 Subject: [PATCH 047/222] fix: template creation --- .../create-site/repositories/+page.svelte | 82 +++++++++---------- .../repository-[repository]/+page.svelte | 12 ++- .../sites/create-site/templates/+page.svelte | 5 +- .../template-[template]/+page.svelte | 54 ++++++------ .../project-[project]/sites/store.ts | 8 +- 5 files changed, 76 insertions(+), 85 deletions(-) diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte index 8637424681..7a09f401ed 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte @@ -6,7 +6,7 @@ import Card from '$lib/components/card.svelte'; import Repositories from '$lib/components/repositories.svelte'; import Button from '$lib/elements/forms/button.svelte'; - import { WizardSecondaryContainer, WizardSecondaryContent } from '$lib/layout/index.js'; + import { Wizard } from '$lib/layout'; import { installation, repository } from '$lib/stores/vcs.js'; import { Layout, Typography } from '@appwrite.io/pink-svelte'; @@ -15,46 +15,42 @@ let selectedRepository: string = null; - - Create site - - { - trackEvent('click_connect_repository', { - from: 'cover' - }); - repository.set(e.detail); - goto( - `${base}/project-${$page.params.project}/sites/create-site/repositories/repository-${e.detail.id}?installation=${$installation.$id}` - ); - }} /> - - - - - Missing a repository? -

    - Check your permissions in GitHub, your repository might be set to - private. -

    -     - - - {#if hasInstallations} - - {/if} - + + { + trackEvent('click_connect_repository', { + from: 'cover' + }); + repository.set(e.detail); + goto( + `${base}/project-${$page.params.project}/sites/create-site/repositories/repository-${e.detail.id}?installation=${$installation.$id}` + ); + }} /> + + + + + Missing a repository? +

    + Check your permissions in GitHub, your repository might be set to private. +

    -     -     -     -     + + + {#if hasInstallations} + + {/if} + + + + + diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte index 791f04a62b..13f5f99c76 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte @@ -21,8 +21,9 @@ import ProductionBranch from '../../productionBranch.svelte'; import Configuration from './configuration.svelte'; import Aside from '../../aside.svelte'; - import { Framework, ID } from '@appwrite.io/console'; + import { ID } from '@appwrite.io/console'; import type { Models } from '@appwrite.io/console'; + import { getEnumFromModel } from '../../../store'; export let data; let showExitModal = false; @@ -69,16 +70,14 @@ return sorted; } - function getEnumFromModel(model: Models.Framework): Framework { - return Framework[model.name]; - } - async function create() { try { let site = await sdk.forProject.sites.create( id || ID.unique(), name, - getEnumFromModel(data.frameworks.frameworks.find((fr) => fr.name === framework.name)), + getEnumFromModel( + data.frameworks.frameworks.find((fr) => fr.name === framework.name) + ), true, 30, installCommand, @@ -165,7 +164,6 @@ {/await} - @@ -158,11 +160,12 @@
      {#each data.templates as template} diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte index 536c2ebcb2..5ec7102a2f 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte @@ -13,12 +13,7 @@ InputSelect, InputText } from '$lib/elements/forms'; - import { - Wizard, - WizardSecondaryContainer, - WizardSecondaryContent, - WizardSecondaryFooter - } from '$lib/layout'; + import { Wizard } from '$lib/layout'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { installation, repository } from '$lib/stores/vcs'; @@ -41,11 +36,11 @@ import Configuration from './configuration.svelte'; import Aside from '../../aside.svelte'; import { ID } from '@appwrite.io/console'; + import { getEnumFromModel } from '../../../store'; export let data; let showExitModal = false; - let isTemplate = !!data?.template; let hasInstallations = !!data?.installations?.total; let formComponent: Form; @@ -66,10 +61,8 @@ let variables = []; onMount(() => { - if (isTemplate) { - $installation ??= data.installations[0]; - selectedInstallationId = $installation?.$id; - } + $installation ??= data.installations[0]; + selectedInstallationId = $installation?.$id; }); let callbackState: Record = null; @@ -94,19 +87,24 @@ let site = await sdk.forProject.sites.create( id || ID.unique(), name, - siteFramework, + getEnumFromModel( + data.frameworks.frameworks.find((fr) => fr.name === framework.name) + ), true, + undefined, framework.installCommand, framework.buildCommand, framework.outputDirectory, - framework.fallbackRedirect, + undefined, + undefined, undefined, selectedInstallationId, selectedRepository, branch, undefined, - rootDir, - framework.providerRootDirectory + framework.providerRootDirectory, + undefined, + rootDir ); trackEvent(Submit.SiteCreate, {}); @@ -126,8 +124,6 @@ trackError(e, Submit.SiteCreate); } } - - $: siteFramework = data.frameworks.frameworks.find((fr) => fr.name === framework.name); @@ -272,21 +268,19 @@ diff --git a/src/routes/(console)/project-[project]/sites/store.ts b/src/routes/(console)/project-[project]/sites/store.ts index 17fa04afa4..751e1c907a 100644 --- a/src/routes/(console)/project-[project]/sites/store.ts +++ b/src/routes/(console)/project-[project]/sites/store.ts @@ -1,5 +1,5 @@ -import { page } from '$app/stores'; -import { derived } from 'svelte/store'; -import type { Models } from '@appwrite.io/console'; +import { Framework, type Models } from '@appwrite.io/console'; -export const functionsList = derived(page, ($page) => $page.data.functions as Models.FunctionList); +export function getEnumFromModel(model: Models.Framework): Framework { + return Framework[model.name]; +} From 5991690d6e8f42a4199dee50012034c8c1af55d7 Mon Sep 17 00:00:00 2001 From: Arman Date: Sun, 27 Oct 2024 22:50:11 +0100 Subject: [PATCH 048/222] feat: domains and template creation --- package.json | 2 +- pnpm-lock.yaml | 10 +- .../sites/create-site/domain.svelte | 63 +++++++++ .../repository-[repository]/+page.svelte | 127 +++++++++--------- .../template-[template]/+page.svelte | 30 +++-- .../templates/template-[template]/+page.ts | 19 --- .../sites/site-[site]/siteCard.svelte | 22 ++- 7 files changed, 165 insertions(+), 108 deletions(-) create mode 100644 src/routes/(console)/project-[project]/sites/create-site/domain.svelte diff --git a/package.json b/package.json index 391e72dbd8..847191aa68 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "e2e:ui": "playwright test tests/e2e --ui" }, "dependencies": { - "@appwrite.io/console": "npm:khushboo-console@^0.0.8", + "@appwrite.io/console": "npm:khushboo-console@^0.0.9", "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "1.0.0-next.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 84f9b708e9..29f9c17516 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@appwrite.io/console': - specifier: npm:khushboo-console@^0.0.8 - version: khushboo-console@0.0.8 + specifier: npm:khushboo-console@^0.0.9 + version: khushboo-console@0.0.9 '@appwrite.io/pink': specifier: 0.25.0 version: 0.25.0 @@ -2524,8 +2524,8 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} - khushboo-console@0.0.8: - resolution: {integrity: sha512-BlnRKfHyq2ZE0of9x7PP3YdKbGE6wmZYvXxRkonRmzPUlJjsoKPAEW/CA0KYTkjBqPIIzmTW3aCWIlT32e663w==} + khushboo-console@0.0.9: + resolution: {integrity: sha512-igFlM6MCFvbhG0kqzH+/xP9xJMjTN3L0spyQPEmfQkZWG55vqCmdixhBff9aNn4UNp38UOL4U/STXIyF7l7MMA==} kleur@3.0.3: resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} @@ -6762,7 +6762,7 @@ snapshots: dependencies: json-buffer: 3.0.1 - khushboo-console@0.0.8: {} + khushboo-console@0.0.9: {} kleur@3.0.3: {} diff --git a/src/routes/(console)/project-[project]/sites/create-site/domain.svelte b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte new file mode 100644 index 0000000000..827ad12e5c --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte @@ -0,0 +1,63 @@ + + +{#if showConfig} +
      + + + + + + + + + + + +
      +{:else} + + +

      + + {domain}.appwrite.global +

      + +       +       +{/if} diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte index 13f5f99c76..c723ec5cef 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte @@ -6,11 +6,7 @@ import { Card } from '$lib/components'; import { Dependencies } from '$lib/constants'; import { Button, Form } from '$lib/elements/forms'; - import { - WizardSecondaryContainer, - WizardSecondaryContent, - WizardSecondaryFooter - } from '$lib/layout'; + import { Wizard } from '$lib/layout'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { sortBranches } from '$lib/stores/vcs'; @@ -24,6 +20,7 @@ import { ID } from '@appwrite.io/console'; import type { Models } from '@appwrite.io/console'; import { getEnumFromModel } from '../../../store'; + import Domain from '../../domain.svelte'; export let data; let showExitModal = false; @@ -116,75 +113,77 @@ Create site - Appwrite       - - Create site - -
      - - - - - -

      - {data.repository?.name} -

      -       - + + + + + + +

      + {data.repository?.name} +

      -       -
      + + + +
      - {#await loadBranches()} -
      -
      -
      - {:then branches} - {@const options = - branches - ?.map((branch) => { - return { - value: branch.name, - label: branch.name - }; - }) - ?.sort((a, b) => { - return a.label > b.label ? 1 : -1; - }) ?? []} - - {/await} + {#await loadBranches()} +
      +
      +
      + {:then branches} + {@const options = + branches + ?.map((branch) => { + return { + value: branch.name, + label: branch.name + }; + }) + ?.sort((a, b) => { + return a.label > b.label ? 1 : -1; + }) ?? []} + + {/await} - - - - -
    diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/siteCard.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/siteCard.svelte index 5a2e5143fd..4a1f923643 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/siteCard.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/siteCard.svelte @@ -6,7 +6,6 @@ import { calculateTime } from '$lib/helpers/timeConversion'; import type { Models } from '@appwrite.io/console'; import { Image, Layout, Typography, Popover, Tooltip } from '@appwrite.io/pink-svelte'; - import { onMount } from 'svelte'; export let deployment: Models.Deployment; export let site: Models.Site; @@ -14,15 +13,9 @@ let rule = proxyRuleList.rules[0]; - let deploymentSize; - let buildSize; - let totalSize; - - onMount(() => { - deploymentSize = humanFileSize(deployment.size); - buildSize = humanFileSize(deployment.buildSize); - totalSize = humanFileSize(deployment.buildSize + deployment.size); - }); + $: deploymentSize = humanFileSize(deployment?.size ?? 0); + $: buildSize = humanFileSize(deployment?.buildSize ?? 0); + $: totalSize = humanFileSize((deployment?.buildSize ?? 0) + (deployment?.size ?? 0)); From dff3c8f6f3df648d2a70d92c26d1fd78a02ce479 Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 28 Oct 2024 10:58:14 +0100 Subject: [PATCH 050/222] feat: fix template --- .../templates/template-[template]/+page.svelte | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte index ab2b1108be..dbd08c5a85 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte @@ -93,19 +93,22 @@ 'sveltekit', framework.buildRuntime, framework.serveRuntime, - true, + undefined, undefined, framework.installCommand, framework.buildCommand, framework.outputDirectory, - undefined, + domain, selectedInstallationId, selectedRepository, branch, - undefined, + undefined, //TODO: add checkbox + rootDir, + data.template.providerRepositoryId, + data.template.providerOwner, framework.providerRootDirectory, - undefined, - rootDir + data.template.providerVersion, + undefined //TODO: add specification ); trackEvent(Submit.SiteCreate, {}); From cdf1e733448234e2c4b27ae573e5d7708254ad79 Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 28 Oct 2024 11:30:27 +0100 Subject: [PATCH 051/222] fix: template card --- .../sites/create-site/templates/+page.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte index 35f188300a..da8d9c668f 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte @@ -159,14 +159,15 @@ {#if data.templates?.length > 0}
      {#each data.templates as template} + {@const templateFrameworks = template.frameworks.map((t) => t.name)} From 85b90b1d3ee24cfc78c24d6b5e91ca6856a9d432 Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 28 Oct 2024 12:23:00 +0100 Subject: [PATCH 052/222] fix: design --- src/lib/components/collapsibleItem.svelte | 3 +- src/lib/elements/forms/inputSearch.svelte | 7 ++- .../project-[project]/sites/+page.svelte | 9 ++-- .../sites/create-site/aside.svelte | 12 +++-- .../sites/create-site/details.svelte | 36 +++++++------ .../sites/create-site/templates/+page.svelte | 52 ++++++++++--------- .../template-[template]/+page.svelte | 7 +-- .../sites/createSiteModal.svelte | 8 ++- 8 files changed, 78 insertions(+), 56 deletions(-) diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte index a16b634608..29e5aa86c7 100644 --- a/src/lib/components/collapsibleItem.svelte +++ b/src/lib/components/collapsibleItem.svelte @@ -12,7 +12,7 @@
    • {#if noContent}
      -
      +
      @@ -21,6 +21,7 @@ - import { IconX } from '@appwrite.io/pink-icons-svelte'; - import { Input } from '@appwrite.io/pink-svelte'; + import { IconX, IconSearch } from '@appwrite.io/pink-icons-svelte'; + import { Input, Icon } from '@appwrite.io/pink-svelte'; import { createEventDispatcher } from 'svelte'; import { onDestroy } from 'svelte'; @@ -54,6 +54,9 @@ type="search" bind:value on:input={valueChange}> + + + {#if value} diff --git a/src/routes/(console)/project-[project]/sites/+page.svelte b/src/routes/(console)/project-[project]/sites/+page.svelte index c3e25f780f..8040c2da2f 100644 --- a/src/routes/(console)/project-[project]/sites/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/+page.svelte @@ -15,6 +15,8 @@ import { base } from '$app/paths'; import { page } from '$app/stores'; import CreateSiteModal from './createSiteModal.svelte'; + import { calculateTime } from '$lib/helpers/timeConversion'; + import { timeFromNow } from '$lib/helpers/date'; export let data; let show = false; @@ -77,11 +79,12 @@ {#each data.siteList.sites as site} + padding="xxs">
    -
    + {#if data.templates?.length > 0} -
      - {#each data.templates as template} - {@const templateFrameworks = template.frameworks.map((t) => t.name)} - - - - +
        + {#each new Array(3) as _} + {#each data.templates as template} + {@const templateFrameworks = template.frameworks.map((t) => t.name)} + + + + + {/each} {/each}
      {:else} @@ -186,8 +190,8 @@
    {/if} -
    + diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte index dbd08c5a85..4ed0f8e813 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte @@ -175,9 +175,10 @@ label: framework.name }; })} - -
    - + +
    + + {#if connectBehaviour === 'now'} {#if hasInstallations}
    diff --git a/src/routes/(console)/project-[project]/sites/createSiteModal.svelte b/src/routes/(console)/project-[project]/sites/createSiteModal.svelte index 4971824cdb..d7523370a4 100644 --- a/src/routes/(console)/project-[project]/sites/createSiteModal.svelte +++ b/src/routes/(console)/project-[project]/sites/createSiteModal.svelte @@ -23,7 +23,9 @@
    Date: Mon, 28 Oct 2024 12:50:49 +0100 Subject: [PATCH 053/222] feat: design review --- src/lib/components/card.svelte | 12 ++++++--- src/lib/elements/forms/inputText.svelte | 6 ++++- .../sites/create-site/domain.svelte | 27 ++++++++++++------- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte index 86758a3bb7..c0d29e3041 100644 --- a/src/lib/components/card.svelte +++ b/src/lib/components/card.svelte @@ -32,24 +32,30 @@ export { classes as class }; export let style = ''; export let padding: $$Props['padding'] = 'm'; + export let radius: $$Props['radius'] = 'm'; $: resolvedClasses = [!isTile && 'common-section', classes].filter(Boolean).join(' '); {#if href} - + {:else if isButton} - + {:else} - + diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte index 8c050168ba..dba221fa78 100644 --- a/src/lib/elements/forms/inputText.svelte +++ b/src/lib/elements/forms/inputText.svelte @@ -56,4 +56,8 @@ state={error ? 'error' : 'default'} on:invalid={handleInvalid} on:input - bind:value /> + bind:value> + + + + diff --git a/src/routes/(console)/project-[project]/sites/create-site/domain.svelte b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte index a7832cc206..2b10772be8 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/domain.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte @@ -3,7 +3,7 @@ import { Button, InputText } from '$lib/elements/forms'; import { sdk } from '$lib/stores/sdk'; import { ResourceType } from '@appwrite.io/console'; - import { Fieldset, Layout, Divider, Status } from '@appwrite.io/pink-svelte'; + import { Fieldset, Layout, Divider, Status, Typography } from '@appwrite.io/pink-svelte'; export let domain: string; const orginalDomain = domain.split('').join(''); @@ -26,8 +26,14 @@ {#if showConfig}
    - - + + + + + .appwrite.global + + + @@ -47,18 +53,21 @@
    {:else} - + -

    - - {domain}.appwrite.global -

    + + + + {domain}.appwrite.global + +     From 226e2b0f6767825a643e8c80933dc814d65a1f68 Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 28 Oct 2024 13:03:55 +0100 Subject: [PATCH 054/222] fix: deisgn --- src/lib/components/repositories.svelte | 1 + src/lib/elements/forms/inputChoice.svelte | 34 ++++++---- .../template-[template]/+page.svelte | 65 ++++++++++--------- 3 files changed, 59 insertions(+), 41 deletions(-) diff --git a/src/lib/components/repositories.svelte b/src/lib/components/repositories.svelte index ecc97adbf4..d6554f0e82 100644 --- a/src/lib/components/repositories.svelte +++ b/src/lib/components/repositories.svelte @@ -169,6 +169,7 @@ {#if action === 'button'}
    + {:else} Date: Mon, 28 Oct 2024 14:34:59 +0100 Subject: [PATCH 055/222] fix: design --- .../sites/create-site/aside.svelte | 16 ++- .../sites/create-site/productionBranch.svelte | 20 ++-- .../repository-[repository]/+page.svelte | 3 +- .../template-[template]/+page.svelte | 98 +++++++++++++------ 4 files changed, 94 insertions(+), 43 deletions(-) diff --git a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte index a3d6c550b4..0e98f03063 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte @@ -15,6 +15,8 @@ export let repositoryName: string; export let branch: string; export let rootDir: string; + export let domain: string; + export let showAfter = true; function getIcon(fr: string) { switch (true) { @@ -50,7 +52,7 @@ {/if} - {#if repositoryName} + {#if repositoryName && showAfter} Git repository @@ -61,7 +63,7 @@ {/if} - {#if branch} + {#if branch && showAfter} Branch @@ -72,7 +74,7 @@ {/if} - {#if rootDir} + {#if rootDir && showAfter} Root directory @@ -80,6 +82,14 @@ {/if} + {#if domain && showAfter} + + Domain + + https://{domain}.appwrite.global + + + {/if} diff --git a/src/routes/(console)/project-[project]/sites/create-site/productionBranch.svelte b/src/routes/(console)/project-[project]/sites/create-site/productionBranch.svelte index b6affa385e..e6fadcbc70 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/productionBranch.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/productionBranch.svelte @@ -1,20 +1,20 @@ -
    +
    - + + + + +
    diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte index c723ec5cef..86a1568121 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte @@ -50,6 +50,7 @@ secret: true } ]; + let silentMode = false; async function loadBranches() { const { branches } = await sdk.forProject.vcs.listRepositoryBranches( @@ -157,7 +158,7 @@ ?.sort((a, b) => { return a.label > b.label ? 1 : -1; }) ?? []} - + {/await} { - $installation ??= data.installations[0]; + if (!$installation?.$id) { + $installation = data.installations.installations[0]; + } selectedInstallationId = $installation?.$id; }); @@ -84,8 +87,25 @@ return target; } + async function createRepository() { + try { + const repo = await sdk.forProject.vcs.createRepository( + $installation.$id, + repositoryName, + repositoryPrivate + ); + repository.set(repo); + selectedRepository = repo.id; + showSiteConfig = true; + } catch (error) { + addNotification({ + type: 'error', + message: error.message + }); + } + } + async function create() { - console.log(framework.serveRuntime); try { let site = await sdk.forProject.sites.create( id || ID.unique(), @@ -102,7 +122,7 @@ selectedInstallationId, selectedRepository, branch, - undefined, //TODO: add checkbox + silentMode, rootDir, data.template.providerRepositoryId, data.template.providerOwner, @@ -129,6 +149,11 @@ trackError(e, Submit.SiteCreate); } } + + $: if (repositoryBehaviour === 'new') { + selectedInstallationId = $installation?.$id; + repositoryName = name.split(' ').join('-').toLowerCase(); + } @@ -143,31 +168,37 @@ {#if selectedRepository && showSiteConfig} - - - - -

    - {$repository.name} -

    + + + + + + + {$repository.name} + + + - - -     - - {#if data.template.variables?.length} - - {/if} + + + {#if data.template.variables?.length} + + {/if} + +     {:else} {@const options = data.template.frameworks.map((framework) => { return { @@ -233,7 +264,12 @@ - + {:else} -