Cloud 1.2.x

.env.example

@@ -1,5 +1,6 @@
-VITE_APPWRITE_ENDPOINT=
+VITE_APPWRITE_ENDPOINT=http://localhost/v1
 VITE_APPWRITE_GROWTH_ENDPOINT= 
 VITE_GA_PROJECT=
 VITE_SENTRY_DSN=
-VITE_CONSOLE_MODE=self-hosted
+VITE_CONSOLE_MODE=cloud
+VITE_CONSOLE_TIER=base

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
         steps:
             - uses: actions/checkout@v3
             - name: Use Node.js
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: 18
             # - name: Audit dependencies

.gitpod.yml

@@ -0,0 +1,7 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+    - init: npm install && npm run build
+      command: npm run dev

package.json

@@ -22,7 +22,7 @@
         "@analytics/google-analytics": "^1.0.5",
         "@analytics/google-tag-manager": "^0.5.3",
         "@appwrite.io/pink": "^0.0.4",
-        "@aw-labs/appwrite-console": "^13.1.0",
+        "@aw-labs/appwrite-console": "npm:appwrite-shimon@^7.2.4",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.36.0",
         "@sentry/tracing": "^7.36.0",

src/lib/components/avatarInitials.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import Avatar from './avatar.svelte';
 
     export let name: string;
     export let size: number;
 
-    $: src = sdkForConsole.avatars.getInitials(name, size * 2, size * 2).toString();
+    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2).toString();
 </script>
 
 <Avatar {name} {size} {src} />

src/lib/components/card.svelte

@@ -1,16 +1,31 @@
 <script lang="ts">
     import { clickOnEnter } from '$lib/helpers/a11y';
 
+    type BaseProps = {
+        isTile?: boolean;
+        isDashed?: boolean;
+        danger?: boolean;
+    };
+
+    type ButtonProps = {
+        isButton: true;
+        href?: never;
+    };
+
+    type AnchorProps = {
+        href: string;
+        isButton?: never;
+    };
+
+    type $$Props = BaseProps & (ButtonProps | AnchorProps | BaseProps);
+
     export let isTile = false;
     export let isDashed = false;
     export let isButton = false;
     export let danger = false;
     export let href: string = null;
 
-    //allows to add the href attribute without throwing an error
-    let attributes = { href } as Record<string, string>;
-
-    function getElement(): string {
+    function getElement() {
         switch (true) {
             case !!href:
                 return 'a';
@@ -30,6 +45,6 @@
     class:is-danger={danger}
     on:click
     on:keyup={clickOnEnter}
-    {...attributes}>
+    {href}>
     <slot />
 </svelte:element>

src/lib/components/code.svelte

@@ -28,7 +28,7 @@
     });
 </script>
 
-<section class="box u-overflow-hidden " class:common-section={!noMargin}>
+<section class="box u-overflow-hidden" class:common-section={!noMargin}>
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}

src/lib/components/dropList.svelte

@@ -24,7 +24,7 @@
                 <section
                     class:u-overflow-y-auto={scrollable}
                     class:u-max-height-200={scrollable}
-                    class="drop-section ">
+                    class="drop-section">
                     <ul class="drop-list">
                         <slot name="list" />
                     </ul>

src/lib/components/eventModal.svelte

@@ -245,7 +245,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} size="big">
+<Modal bind:show onSubmit={create} size="big">
     <svelte:fragment slot="header">Create Event</svelte:fragment>
     <slot />
     <div>

src/lib/components/feedbackGeneral.svelte

@@ -51,7 +51,7 @@
         Your feedback is important to us. Please be honest and tell us what you think.
     </div>
 
-    <Form on:submit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
         <FormList>
             <InputText
                 label="name"

src/lib/components/feedbackNPS.svelte

@@ -49,7 +49,7 @@
         think.
     </div>
 
-    <Form on:submit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
         <Evaluation bind:value>
             How likely are you to recommend Appwrite to a friend or colleague?
         </Evaluation>

src/lib/components/modal.svelte

@@ -2,12 +2,16 @@
     import { createEventDispatcher, onDestroy, onMount } from 'svelte';
     import { Alert } from '$lib/components';
     import { trackEvent } from '$lib/actions/analytics';
+    import { Form } from '$lib/elements/forms';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
     export let warning = false;
     export let error: string = null;
     export let closable = true;
+    export let onSubmit: () => Promise<void> | void = function () {
+        return;
+    };
 
     let dialog: HTMLDialogElement;
     let alert: HTMLElement;
@@ -77,8 +81,7 @@
     class:is-big={size === 'big'}
     bind:this={dialog}>
     {#if show}
-        <!-- svelte-ignore a11y-no-redundant-roles -->
-        <form class="modal-form" role="form" on:submit|preventDefault>
+        <Form isModal {onSubmit}>
             <header class="modal-header">
                 {#if warning}
                     <div class="avatar is-warning is-medium">
@@ -127,6 +130,6 @@
                     </div>
                 </div>
             {/if}
-        </form>
+        </Form>
     {/if}
 </dialog>

src/lib/components/permissions/custom.svelte

@@ -25,7 +25,7 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal bind:show on:close={reset} on:submit={create}>
+<Modal bind:show on:close={reset} onSubmit={create}>
     <svelte:fragment slot="header">Custom permission</svelte:fragment>
     <p class="text">
         Custom permissions allow you to grant access to specific users or teams using their ID and
@@ -44,6 +44,6 @@
     </FormList>
 
     <svelte:fragment slot="footer">
-        <Button submit {disabled}>Create</Button>
+        <Button submit {disabled}>Add</Button>
     </svelte:fragment>
 </Modal>

src/lib/components/permissions/row.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { tick } from 'svelte';
     import { AvatarInitials } from '../';
@@ -18,11 +18,11 @@
         const role = permission.split(':')[0];
         const id = permission.split(':')[1].split('/')[0];
         if (role === 'user') {
-            const user = await sdkForProject.users.get(id);
+            const user = await sdk.forProject.users.get(id);
             return user;
         }
         if (role === 'team') {
-            const team = await sdkForProject.teams.get(id);
+            const team = await sdk.forProject.teams.get(id);
             return team;
         }
     }
@@ -68,13 +68,13 @@
                         {@const isAnonymous = !data.email && !data.phone && isUser}
                         <div class="user-profile">
                             {#if isAnonymous}
-                                <div class="avatar is-size-small ">
+                                <div class="avatar is-size-small">
                                     <span class="icon-anonymous" aria-hidden="true" />
                                 </div>
                             {:else if data.name}
                                 <AvatarInitials name={data.name} size={40} />
                             {:else}
-                                <div class="avatar is-size-small ">
+                                <div class="avatar is-size-small">
                                     <span class="icon-minus-sm" aria-hidden="true" />
                                 </div>
                             {/if}

src/lib/components/permissions/team.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
     import type { Writable } from 'svelte/store';
@@ -31,7 +31,7 @@
 
     async function request() {
         if (!show) return;
-        results = await sdkForProject.teams.list([Query.limit(5), Query.offset(offset)], search);
+        results = await sdk.forProject.teams.list([Query.limit(5), Query.offset(offset)], search);
     }
 
     function onSelection(event: Event, role: string) {
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} on:close={reset} size="big">
+<Modal bind:show onSubmit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select teams</svelte:fragment>
     <p class="text">
         Grant access to any member of a specific team. To grant access to team members with specific
@@ -144,6 +144,6 @@
     {/if}
 
     <svelte:fragment slot="footer">
-        <Button submit disabled={!hasSelection}>Create</Button>
+        <Button submit disabled={!hasSelection}>Add</Button>
     </svelte:fragment>
 </Modal>

src/lib/components/permissions/user.svelte

@@ -2,7 +2,7 @@
     import { Button, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
@@ -31,7 +31,7 @@
 
     async function request() {
         if (!show) return;
-        results = await sdkForProject.users.list([Query.limit(5), Query.offset(offset)], search);
+        results = await sdk.forProject.users.list([Query.limit(5), Query.offset(offset)], search);
     }
 
     function onSelection(event: Event, role: string) {
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} on:close={reset} size="big">
+<Modal bind:show onSubmit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select users</svelte:fragment>
     <p class="text">Grant access to any authenticated or anonymous user.</p>
     <InputSearch
@@ -96,7 +96,7 @@
                                                 <div class="u-x-small">{user.$id}</div>
                                             </div>
                                         {:else}
-                                            <div class="avatar is-size-small ">
+                                            <div class="avatar is-size-small">
                                                 <span class="icon-minus-sm" aria-hidden="true" />
                                             </div>
                                             <div class="u-line-height-1-5">
@@ -107,7 +107,7 @@
                                             </div>
                                         {/if}
                                     {:else}
-                                        <div class="avatar is-size-small ">
+                                        <div class="avatar is-size-small">
                                             <span class="icon-anonymous" aria-hidden="true" />
                                         </div>
                                         <div class="u-line-height-1-5">
@@ -163,6 +163,6 @@
     {/if}
 
     <svelte:fragment slot="footer">
-        <Button submit disabled={!hasSelection}>Create</Button>
+        <Button submit disabled={!hasSelection}>Add</Button>
     </svelte:fragment>
 </Modal>

src/lib/components/uploadBox.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
     import { uploader } from '$lib/stores/uploader';
     import { Pill } from '$lib/elements';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { Avatar } from '$lib/components';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
 
     let hovering = false;
 
     const getPreview = (fileId: string, bucketId: string) =>
-        sdkForProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
+        sdk.forProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
 </script>
 
 {#if $uploader?.isOpen}

src/lib/elements/forms/button.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
+    import { getContext, hasContext } from 'svelte';
+    import { readable } from 'svelte/store';
+    import type { FormContext } from './form.svelte';
 
     export let submit = false;
     export let secondary = false;
@@ -15,8 +18,14 @@
     export let noMargin = false;
     export let event: string = null;
 
+    const isSubmitting = hasContext('form')
+        ? getContext<FormContext>('form').isSubmitting
+        : readable(false);
+
+    $: internalDisabled = (submit && $isSubmitting) || disabled;
+
     //allows to add the disabled attribute to <a> tag without throwing an error
-    let attributes = { disabled } as Record<string, boolean>;
+    $: attributes = { internalDisabled } as Record<string, boolean>;
 
     function track() {
         if (!event) {
@@ -51,7 +60,7 @@
     <button
         on:click
         on:click={track}
-        {disabled}
+        disabled={internalDisabled}
         class="button"
         class:is-only-icon={round}
         class:is-secondary={secondary}