appwrite · ArmanNik · Aug 22, 2023 · May 31, 2023 · Jun 2, 2023 · Jun 5, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -24,5 +24,8 @@ module.exports = {
  browser: true,
  es2017: true,
  node: true
+ },
+ globals: {
+ globalThis: false // false means it is not writeable
  }
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,15 +19,16 @@
  },
  "dependencies": {
  "@analytics/google-analytics": "^1.0.5",
- "@appwrite.io/console": "npm:christy-console@^0.4.0",
- "@appwrite.io/pink": "0.1.0-next.3",
- "@appwrite.io/pink-icons": "^0.1.0-next.3",
  "@analytics/google-tag-manager": "^0.5.3",
+ "@appwrite.io/console": "npm:matej-appwrite-console@7.1.126",
+ "@appwrite.io/pink": "0.1.0-next.4",
+ "@appwrite.io/pink-icons": "^0.1.0-next.4",
  "@popperjs/core": "^2.11.6",
  "@sentry/svelte": "^7.44.2",
  "@sentry/tracing": "^7.44.2",
  "ai": "^2.1.15",
  "analytics": "^0.8.1",
+ "dayjs": "^1.11.9",
  "dotenv": "^16.0.3",
  "echarts": "^5.4.1",
  "logrocket": "^3.0.1",

diff --git a/src/app.html b/src/app.html
@@ -47,7 +47,7 @@
 
  %sveltekit.head%
  </head>
- <body>
+ <body data-sveltekit-preload-data="hover">
  <div id="svelte">%sveltekit.body%</div>
  </body>
 </html>
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -183,15 +183,21 @@ export enum Submit {
  FunctionUpdateName = 'submit_function_update_name',
  FunctionUpdatePermissions = 'submit_function_update_permissions',
  FunctionUpdateSchedule = 'submit_function_update_schedule',
+ FunctionUpdateConfiguration = 'submit_function_update_configuration',
+ FunctionUpdateLogging = 'submit_function_update_logging',
  FunctionUpdateTimeout = 'submit_function_update_timeout',
  FunctionUpdateEvents = 'submit_function_update_events',
+ FunctionConnectRepo = 'submit_function_disconnect_repo',
+ FunctionDisconnectRepo = 'submit_function_disconnect_repo',
+ FunctionRedeploy = 'submit_function_redeploy',
  DeploymentCreate = 'submit_deployment_create',
  DeploymentDelete = 'submit_deployment_delete',
  DeploymentUpdate = 'submit_deployment_update',
  ExecutionCreate = 'submit_execution_create',
  VariableCreate = 'submit_variable_create',
  VariableDelete = 'submit_variable_delete',
  VariableUpdate = 'submit_variable_update',
+ VariableEditor = 'submit_variable_editor',
  KeyCreate = 'submit_key_create',
  KeyDelete = 'submit_key_delete',
  KeyUpdateName = 'submit_key_update_name',
@@ -223,6 +229,8 @@ export enum Submit {
  FileCreate = 'submit_file_create',
  FileDelete = 'submit_file_delete',
  FileUpdatePermissions = 'submit_file_update_permissions',
+ InstallationCreate = 'submit_installation_create',
+ InstallationDelete = 'submit_installation_delete',
  EmailChangeLocale = 'submit_email_change_locale',
  EmailResetTemplate = 'submit_email_reset_template',
  EmailUpdateInviteTemplate = 'submit_email_update_invite_template',

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
@@ -10,8 +10,13 @@
  import CoolerAppwrite from '$lib/images/appwrite-cooler.svg';
  import { VARS } from '$lib/system';
 
+ const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
+
  const { input, handleSubmit, completion, isLoading, complete } = useCompletion({
- api: VARS.ASSISTANT_ENDPOINT
+ api: endpoint + '/console/assistant',
+ headers: {
+ 'content-type': 'application/json'
+ }
  });
 
  const examples = [

diff --git a/src/lib/commandCenter/searchers/functions.ts b/src/lib/commandCenter/searchers/functions.ts
@@ -5,7 +5,7 @@ import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
 import { page } from '$app/stores';
-import { showCreateDeployment } from '$routes/console/project-[project]/functions/function-[function]/+page.svelte';
+import { showCreateDeployment } from '$routes/console/project-[project]/functions/function-[function]/store';
 
 const getFunctionCommand = (fn: Models.Function, projectId: string) => {
  return {
@@ -37,7 +37,7 @@ export const functionsSearcher = (async (query: string) => {
  if (!$page.url.pathname.endsWith(func.$id)) {
  await goto(`/console/project-${projectId}/functions/function-${func.$id}`);
  }
- showCreateDeployment();
+ showCreateDeployment.set(true);
  },
  group: 'functions',
  icon: 'plus'

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
@@ -4,7 +4,6 @@
 
  export let dismissible = false;
  export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
- export let standalone = false;
  export let buttons: Buttons[] = [];
  export let isAction = false;
  export let isStandalone = false;

diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
@@ -2,21 +2,39 @@
  import AvatarInitials from './avatarInitials.svelte';
 
  export let avatars: string[] = [];
+ export let icons: string[] = [];
  export let total = avatars.length;
  export let size = 40;
+ export let avatarSize: keyof typeof Sizes = 'medium';
+ export let bordered = false;
+
+ enum Sizes {
+ xsmall = 'is-size-x-small',
+ small = 'is-size-small',
+ medium = '',
+ large = 'is-size-large',
+ xlarge = 'is-size-x-large'
+ }
 </script>
 
-<ul class="avatars-group">
+<ul class="avatars-group" class:is-with-border={bordered}>
  {#each avatars as name, index}
  {#if index < 2}
  <li class="avatars-group-item">
  <AvatarInitials {size} {name} />
  </li>
  {/if}
  {/each}
+
+ {#each icons as icon}
+ <li class="avatars-group-item">
+ <span class="avatar {Sizes[avatarSize]}"><span class={`icon-${icon}`} /></span>
+ </li>
+ {/each}
+
  {#if total > 2}
  <li class="avatars-group-item">
- <div class="avatar">+{total - 2}</div>
+ <div class="avatar {Sizes[avatarSize]}">+{total - 2}</div>
  </li>
  {/if}
 </ul>
diff --git a/src/lib/components/box.svelte b/src/lib/components/box.svelte
@@ -1,9 +1,20 @@
-<div class="box">
- <div class="u-flex u-gap-16">
- <slot name="image" />
- <div class="u-cross-child-center u-line-height-1-5">
- <slot name="title" />
- <slot />
- </div>
- </div>
+<script lang="ts">
+ export let radius: keyof typeof radiuses = 'small';
+ export let padding = 24;
+ let classes = '';
+ export { classes as class };
+
+ enum radiuses {
+ xsmall = '--border-radius-extra-large',
+ small = '--border-radius-small',
+ medium = '--border-radius-medium',
+ large = '--border-radius-large'
+ }
+</script>
+
+<div
+ class="box {classes}"
+ style:--box-border-radius={`var(${radiuses[radius]})`}
+ style:--box-padding={`${padding / 16}rem`}>
+ <slot />
 </div>
diff --git a/src/lib/components/boxAvatar.svelte b/src/lib/components/boxAvatar.svelte
@@ -0,0 +1,9 @@
+<div class="box">
+ <div class="u-flex u-gap-16">
+ <slot name="image" />
+ <div class="u-cross-child-center u-line-height-1-5">
+ <slot name="title" />
+ <slot />
+ </div>
+ </div>
+</div>
diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
@@ -11,7 +11,9 @@
  <slot name="beforetitle" />
  <div>
  <span class="text"><slot name="title" /></span>
- <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+ {#if $$slots.subtitle}
+ <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+ {/if}
  </div>
  <div class="icon">
  <span class="icon-cheveron-down" aria-hidden="true" />

diff --git a/src/lib/components/customId.svelte b/src/lib/components/customId.svelte
@@ -7,6 +7,7 @@
  export let name: string;
  export let id: string;
  export let autofocus = true;
+ export let fullWidth = false;
 
  $: if (!show) {
  id = null;
@@ -21,7 +22,7 @@
  }
 </script>
 
-<InnerModal bind:show>
+<InnerModal bind:show {fullWidth}>
  <svelte:fragment slot="title">{name} ID</svelte:fragment>
  <svelte:fragment slot="subtitle">
  Enter a custom {name} ID. Leave blank for a randomly generated one.

diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
@@ -4,10 +4,16 @@
  export let href: string;
  export let icon: string = null;
  export let disabled = false;
+ export let external = false;
 </script>
 
 <li class="drop-list-item" on:click on:keyup={clickOnEnter}>
- <a {href} class="drop-button" class:is-disabled={disabled}>
+ <a
+ {href}
+ class="drop-button"
+ class:is-disabled={disabled}
+ target={external ? '_blank' : ''}
+ rel={external ? 'noopener noreferrer' : ''}>
  <span class="text"><slot /></span>
  {#if icon}
  <span class={`icon-${icon}`} aria-hidden="true" />

diff --git a/src/lib/components/emptySearch.svelte b/src/lib/components/emptySearch.svelte
@@ -4,6 +4,7 @@
  import Dark from '$lib/images/search-dark.svg';
  import PaginationInline from './paginationInline.svelte';
 
+ export let hidePagination = false;
  export let hidePages = false;
 </script>
 
@@ -18,7 +19,9 @@
  </div>
 </article>
 
-<div class="u-flex u-margin-block-start-32 u-main-space-between">
- <p class="text">Total results: 0</p>
- <PaginationInline limit={1} offset={0} sum={0} {hidePages} />
-</div>
+{#if !hidePagination}
+ <div class="u-flex u-margin-block-start-32 u-main-space-between">
+ <p class="text">Total results: 0</p>
+ <PaginationInline limit={1} offset={0} sum={0} {hidePages} />
+ </div>
+{/if}
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
@@ -246,7 +246,7 @@
 </script>
 
 <Modal bind:show onSubmit={create} size="big">
- <svelte:fragment slot="header">Create Event</svelte:fragment>
+ <svelte:fragment slot="header">Create event</svelte:fragment>
  <slot />
  <div>
  <p class="u-text">Choose a service</p>

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
@@ -29,6 +29,7 @@ export { default as AvatarInitials } from './avatarInitials.svelte';
 export { default as AvatarGroup } from './avatarGroup.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
+export { default as BoxAvatar } from './boxAvatar.svelte';
 export { default as Search } from './search.svelte';
 export { default as SearchQuery } from './searchQuery.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';
@@ -52,6 +53,8 @@ export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
 export { default as ClickableList } from './clickableList.svelte';
 export { default as ClickableListItem } from './clickableListItem.svelte';
 export { default as Id } from './id.svelte';
+export { default as NumericList } from './numericList.svelte';
+export { default as NumericListItem } from './numericListItem.svelte';
 export { default as EyebrowHeading } from './eyebrowHeading.svelte';
 export { default as SvgIcon } from './svgIcon.svelte';
 export { default as MigrationBox } from './migrationBox.svelte';

diff --git a/src/lib/components/innerModal.svelte b/src/lib/components/innerModal.svelte
@@ -3,11 +3,12 @@
 
  export let show = false;
  export let closable = true;
+ export let fullWidth = false;
 </script>
 
 {#if show}
  <FormItem>
- <section class="modal is-inner-modal">
+ <section class="modal is-inner-modal" class:u-width-full-line={fullWidth}>
  <div class="modal-form">
  <header class="modal-header">
  <div class="u-flex u-main-space-between u-cross-center u-gap-16">

diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
@@ -31,10 +31,14 @@
  bind:group
  on:click />
  <div class="u-flex u-flex-vertical u-gap-4">
- <h4 class="body-text-2 u-bold"><slot name="title" /></h4>
- <p class="u-color-text-gray u-small">
- <slot />
- </p>
+ {#if $$slots.title}
+ <h4 class="body-text-2 u-bold"><slot name="title" /></h4>
+ {/if}
+ {#if $$slots.default}
+ <p class="u-color-text-gray u-small">
+ <slot />
+ </p>
+ {/if}
  </div>
  {#if icon}
  <span class={`icon-${icon} u-margin-inline-start-auto`} aria-hidden="true" />

diff --git a/src/lib/components/numericList.svelte b/src/lib/components/numericList.svelte
@@ -0,0 +1,3 @@
+<ol class="numeric-list">
+ <slot />
+</ol>
diff --git a/src/lib/components/numericListItem.svelte b/src/lib/components/numericListItem.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+ export let fullWidth = false;
+</script>
+
+<li class="numeric-list-item">
+ <div class="u-margin-block-start-8" class:u-width-full-line={fullWidth}><slot /></div>
+</li>
diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
@@ -19,8 +19,8 @@
  TableRow
  } from '$lib/elements/table';
  import { symmetricDifference } from '$lib/helpers/array';
- import { onDestroy, onMount } from 'svelte';
- import { writable, type Unsubscriber } from 'svelte/store';
+ import { onMount } from 'svelte';
+ import { writable } from 'svelte/store';
  import Actions from './actions.svelte';
  import Row from './row.svelte';
  import Table from '$lib/elements/table/table.svelte';
@@ -32,26 +32,19 @@
  let showTeam = false;
  let showCustom = false;
  let showDropdown = false;
- let unsubscribe: Unsubscriber;
 
  const groups = writable<Map<string, Permission>>(new Map());
 
  onMount(() => {
  permissions.forEach(fromPermissionString);
-unsubscribe = groups.subscribe(() => {
+return groups.subscribe(() => {
  const current = exportRoles();
  if (symmetricDifference(current, permissions).length) {
  permissions = current;
  }
  });
  });
 
- onDestroy(() => {
- if (unsubscribe) {
- unsubscribe();
- }
- });
-
  function create(event: CustomEvent<string[]>) {
  for (const role of event.detail) {
  addRole(role);