appwrite · ArmanNik · Aug 22, 2023 · May 31, 2023 · Jun 2, 2023 · Jun 5, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,14 +19,16 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "npm:christy-console@^0.4.0",
-        "@appwrite.io/pink": "^0.0.6-rc.14",
+        "@appwrite.io/console": "npm:[email protected]",
+        "@appwrite.io/pink": "0.0.7-next.0",
+        "@appwrite.io/pink-icons": "0.0.7-next.0",
         "@analytics/google-tag-manager": "^0.5.3",
         "@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,20 @@ 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',
+    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 +228,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/components/alert.svelte b/src/lib/components/alert.svelte
@@ -2,6 +2,7 @@
     import { createEventDispatcher } from 'svelte';
     import type { Buttons } from '../stores/notifications';
 
+    export let isInline = false;
     export let dismissible = false;
     export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
     export let standalone = false;
@@ -19,7 +20,8 @@
     class:is-success={type === 'success'}
     class:is-warning={type === 'warning'}
     class:is-danger={type === 'error'}
-    class:is-info={type === 'info'}>
+    class:is-info={type === 'info'}
+    class:is-inline={isInline}>
     <div class="alert-grid">
         {#if dismissible}
             <button
@@ -65,3 +67,9 @@
         {/if}
     </div>
 </section>
+
+<style lang="scss">
+    .is-inline {
+        background-color: white;
+    }
+</style>
diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
@@ -2,6 +2,7 @@
     import AvatarInitials from './avatarInitials.svelte';
 
     export let avatars: string[] = [];
+    export let icons: string[] = [];
     export let total = avatars.length;
     export let size = 40;
 </script>
@@ -14,6 +15,13 @@
             </li>
         {/if}
     {/each}
+
+    {#each icons as icon}
+        <li class="avatars-group-item">
+            <span class="avatar"><span class={`icon-${icon}`} /></span>
+        </li>
+    {/each}
+
     {#if total > 2}
         <li class="avatars-group-item">
             <div class="avatar">+{total - 2}</div>

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
@@ -52,6 +52,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/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,3 @@
+<li class="numeric-list-item">
+    <p class="text u-margin-block-start-8"><slot /></p>
+</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);

diff --git a/src/lib/components/permissions/roles.svelte b/src/lib/components/permissions/roles.svelte
@@ -10,8 +10,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 type { Permission } from './permissions.svelte';
     import Row from './row.svelte';
@@ -22,26 +22,19 @@
     let showTeam = false;
     let showCustom = false;
     let showDropdown = false;
-    let unsubscribe: Unsubscriber;
 
     const groups = writable<Map<string, Permission>>(new Map());
 
     onMount(() => {
         roles.forEach(addRole);
-        unsubscribe = groups.subscribe((n) => {
+        return groups.subscribe((n) => {
             const current = Array.from(n.keys());
             if (symmetricDifference(current, roles).length) {
                 roles = current;
             }
         });
     });
 
-    onDestroy(() => {
-        if (unsubscribe) {
-            unsubscribe();
-        }
-    });
-
     function create(event: CustomEvent<string[]>) {
         for (const role of event.detail) {
             addRole(role);

diff --git a/src/lib/components/secondaryTabs.svelte b/src/lib/components/secondaryTabs.svelte
@@ -1,3 +1,9 @@
-<ul class="secondary-tabs">
+<script lang="ts">
+    export let large = false;
+    let classes: string = undefined;
+    export { classes as class };
+</script>
+
+<ul class="secondary-tabs {classes}" class:is-large={large}>
     <slot />
 </ul>
diff --git a/src/lib/components/secondaryTabsItem.svelte b/src/lib/components/secondaryTabsItem.svelte
@@ -1,21 +1,37 @@
 <script lang="ts">
-    export let href: string;
+    export let href: string = null;
     export let disabled = false;
+    export let stretch = false;
+    export let fullWidth = false;
+    export let center = false;
 </script>
 
-<li class="secondary-tabs-item">
+<li class="secondary-tabs-item" class:u-stretch={stretch}>
     {#if href}
         {#if disabled}
-            <button class="secondary-tabs-button" disabled>
+            <button
+                class="secondary-tabs-button"
+                class:u-width-full-line={fullWidth}
+                class:u-text-center={center}
+                disabled>
                 <span class="text"><slot /></span>
             </button>
         {:else}
-            <a class="secondary-tabs-button" {href}>
+            <a
+                class="secondary-tabs-button"
+                class:u-width-full-line={fullWidth}
+                class:u-text-center={center}
+                {href}>
                 <span class="text"><slot /></span>
             </a>
         {/if}
     {:else}
-        <button class="secondary-tabs-button" {disabled} on:click>
+        <button
+            class="secondary-tabs-button"
+            class:u-width-full-line={fullWidth}
+            class:u-text-center={center}
+            {disabled}
+            on:click>
             <span class="text"><slot /></span>
         </button>
     {/if}

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -5,6 +5,8 @@ export const INTERVAL = 5 * 60000; // default interval to check for feedback
 export enum Dependencies {
     ORGANIZATION = 'dependency:organization',
     PROJECT = 'dependency:project',
+    PROJECT_VARIABLES = 'dependency:project_variables',
+    PROJECT_INSTALLATIONS = 'dependency:project_installations',
     PROJECTS = 'dependency:projects',
     ACCOUNT = 'dependency:account',
     ACCOUNT_SESSIONS = 'dependency:account_sessions',
@@ -23,8 +25,11 @@ export enum Dependencies {
     FILE = 'dependency:file',
     FILES = 'dependency:files',
     FUNCTION = 'dependency:function',
+    FUNCTION_DOMAINS = 'dependency:function_domains',
+    FUNCTION_INSTALLATIONS = 'dependency:function_installations',
     FUNCTIONS = 'dependency:functions',
     VARIABLES = 'dependency:variables',
+    DEPLOYMENT = 'dependency:deployment',
     DEPLOYMENTS = 'dependency:deployments',
     EXECUTIONS = 'dependency:executions',
     PLATFORM = 'dependency:platform',

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
@@ -3,6 +3,7 @@
 
     export let label: string | undefined = undefined;
     export let optionalText: string | undefined = undefined;
+    export let tooltip: string = null;
     export let showLabel = true;
     export let id: string;
     export let value = false;
@@ -29,7 +30,7 @@
 
 <FormItem>
     {#if label}
-        <Label {required} {optionalText} hide={!showLabel} for={id}>
+        <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
             {label}
         </Label>
     {/if}

diff --git a/src/lib/elements/forms/inputChoice.svelte b/src/lib/elements/forms/inputChoice.svelte
@@ -8,6 +8,7 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
+    export let tooltip: string = null;
 
     let element: HTMLInputElement;
     let error: string;
@@ -39,7 +40,22 @@
             on:invalid={handleInvalid} />
 
         <div class="choice-item-content">
-            <div class:u-hide={!showLabel} class="choice-item-title">{label}</div>
+            <div class:u-hide={!showLabel} class="choice-item-title u-flex u-cross-center u-gap-4">
+                {label}
+                {#if tooltip}
+                    <button class="tooltip" aria-label="variables info">
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style="font-size: var(--icon-size-small)" />
+                        <span class="tooltip-popup" role="tooltip">
+                            <p class="text">
+                                {tooltip}
+                            </p>
+                        </span>
+                    </button>
+                {/if}
+            </div>
             {#if $$slots}
                 <p class="choice-item-paragraph"><slot /></p>
             {/if}

diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
@@ -43,6 +43,7 @@
         </div>
         <div class="choice-item-content">
             <div class="choice-item-title">{label}</div>
+            <slot name="description" />
         </div>
     </label>
     {#if error}

diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
@@ -1,3 +1,11 @@
+import { browser } from '$app/environment';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+if (browser) {
+    dayjs.extend(relativeTime);
+}
+
 export const toLocaleDate = (datetime: string) => {
     const date = new Date(datetime);
 
@@ -49,3 +57,7 @@ export const diffDays = (date1: Date, date2: Date) => {
     const diffTime = Math.abs(date2.getTime() - date1.getTime());
     return Math.floor(diffTime / (1000 * 60 * 60 * 24));
 };
+
+export function timeFromNow(datetime: string): string {
+    return dayjs().to(dayjs(datetime));
+}