Cloud 1.2.x

.env.example

@@ -1,5 +1,6 @@
-VITE_APPWRITE_ENDPOINT=
+VITE_APPWRITE_ENDPOINT=https://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}