From 67f5225e189f70d7d0344a02f691c180e174c358 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 5 Dec 2022 16:31:43 +0000
Subject: [PATCH 01/21] feat: notification transitions

---
 src/lib/layout/notification.svelte  |  5 ++++-
 src/lib/layout/notifications.svelte | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index 877283cc1..8d386c59e 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+    import { fly } from 'svelte/transition';
+    import { flip } from 'svelte/animate';
     import type { Notification } from '../stores/notifications';
 
     export let type: Notification['type'] = 'info';
@@ -14,7 +16,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'}
+    transition:fly={{ x: 50 }}>
     <button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
         <span class="icon-x" aria-hidden="true" />
     </button>
diff --git a/src/lib/layout/notifications.svelte b/src/lib/layout/notifications.svelte
index 202702799..9357a4a4e 100644
--- a/src/lib/layout/notifications.svelte
+++ b/src/lib/layout/notifications.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
     import Notification from './notification.svelte';
     import { dismissNotification, notifications } from '../stores/notifications';
+    import { flip } from 'svelte/animate';
 </script>
 
 {#if $notifications}
     <section>
         <ul class="u-flex u-flex-vertical u-gap-16">
             {#each $notifications as notification (notification.id)}
-                <Notification
-                    type={notification.type}
-                    title={notification.title}
-                    on:dismiss={() => dismissNotification(notification.id)}
-                    buttons={notification?.buttons}>
-                    {notification.message}
-                </Notification>
+                <div animate:flip={{ duration: 500 }}>
+                    <Notification
+                        type={notification.type}
+                        title={notification.title}
+                        on:dismiss={() => dismissNotification(notification.id)}
+                        buttons={notification?.buttons}>
+                        {notification.message}
+                    </Notification>
+                </div>
             {/each}
         </ul>
     </section>

From d3f4cb2deaf0cfd7d736c926b69ae8adf1a1835e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 14 Mar 2023 16:07:06 +0000
Subject: [PATCH 02/21] refactor: edit html structure

---
 src/lib/layout/notification.svelte  | 4 ++--
 src/lib/layout/notifications.svelte | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index baae131a8..71c3b8edc 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -10,7 +10,7 @@
     const dispatch = createEventDispatcher();
 </script>
 
-<li
+<div
     class="alert-sticky"
     class:is-success={type === 'success'}
     class:is-warning={type === 'warning'}
@@ -47,4 +47,4 @@
             {/each}
         </div>
     {/if}
-</li>
+</div>
diff --git a/src/lib/layout/notifications.svelte b/src/lib/layout/notifications.svelte
index 9357a4a4e..da64f62d1 100644
--- a/src/lib/layout/notifications.svelte
+++ b/src/lib/layout/notifications.svelte
@@ -8,7 +8,7 @@
     <section>
         <ul class="u-flex u-flex-vertical u-gap-16">
             {#each $notifications as notification (notification.id)}
-                <div animate:flip={{ duration: 500 }}>
+                <li animate:flip={{ duration: 500 }}>
                     <Notification
                         type={notification.type}
                         title={notification.title}
@@ -16,7 +16,7 @@
                         buttons={notification?.buttons}>
                         {notification.message}
                     </Notification>
-                </div>
+                </li>
             {/each}
         </ul>
     </section>

From 5c0cec6ed7494f3347fa8e8a1a46122872b2f6bc Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 17 Mar 2023 19:28:05 +0000
Subject: [PATCH 03/21] feat: input count dynamic color

---
 src/lib/elements/forms/inputTextarea.svelte   | 29 ++++++++++++++++-
 .../attributes/string.svelte                  | 31 +++++++++++++------
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 7285b6f24..51feff2e2 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -12,6 +12,8 @@
     export let readonly = false;
     export let autofocus = false;
     export let maxlength: number = null;
+    export let optionalText: string | undefined = undefined;
+    export let tooltip: string = null;
 
     let element: HTMLTextAreaElement;
     let error: string;
@@ -37,7 +39,7 @@
 </script>
 
 <FormItem>
-    <Label {required} hide={!showLabel} for={id}>
+    <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
         {label}
     </Label>
 
@@ -53,8 +55,33 @@
             bind:value
             bind:this={element}
             on:invalid={handleInvalid} />
+        {#if maxlength}
+            <span class="text-counter" data-active={!!value}>
+                <span class="text-counter-count">{value?.length ?? 0}</span>
+                <span class="text-counter-separator" />
+                <span class="text-counter-max">{maxlength}</span>
+            </span>
+        {/if}
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
+
+<style class="scss">
+    .text-counter {
+        --p-text-counter-color: var(--color-neutral-50);
+    }
+
+    .text-counter[data-active='true'] {
+        --p-text-counter-color: var(--color-neutral-70);
+    }
+
+    :global(.theme-dark) .text-counter {
+        --p-text-counter-color: var(--color-neutral-70);
+    }
+
+    :global(.theme-dark) .text-counter[data-active='true'] {
+        --p-text-counter-color: var(--color-neutral-50);
+    }
+</style>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
index e6655f95e..49750c8ea 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import InputText from '$lib/elements/forms/inputText.svelte';
+    import InputTextarea from '$lib/elements/forms/inputTextarea.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
@@ -9,12 +10,24 @@
     export let optionalText: string | undefined = undefined;
 </script>
 
-<InputText
-    {id}
-    {label}
-    {optionalText}
-    placeholder="Enter string"
-    showLabel={!!label?.length}
-    required={attribute.required}
-    maxlength={attribute.size}
-    bind:value />
+{#if attribute.size > 64}
+    <InputTextarea
+        {id}
+        {label}
+        {optionalText}
+        placeholder="Enter string"
+        showLabel={!!label?.length}
+        required={attribute.required}
+        maxlength={attribute.size}
+        bind:value />
+{:else}
+    <InputText
+        {id}
+        {label}
+        {optionalText}
+        placeholder="Enter string"
+        showLabel={!!label?.length}
+        required={attribute.required}
+        maxlength={attribute.size}
+        bind:value />
+{/if}

From 25d5ab173fb1276ba3ba199a04e181dacc13c050 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 20 Mar 2023 19:09:57 +0000
Subject: [PATCH 04/21] refactor: paddinginline end on input text

---
 src/lib/elements/forms/inputText.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 333f17369..dfc83a7da 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -58,6 +58,7 @@
             type="text"
             class="input-text"
             bind:value
+            class:u-padding-inline-end-56={typeof maxlength === 'number'}
             bind:this={element}
             on:invalid={handleInvalid} />
         {#if maxlength}

From a160506a7400b34feb33d03cb77f3bdf98e22bc8 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 20 Mar 2023 19:22:55 +0000
Subject: [PATCH 05/21] fix: input text missing text counter

---
 src/lib/elements/forms/inputText.svelte     |  7 ++----
 src/lib/elements/forms/inputTextarea.svelte | 25 ++----------------
 src/lib/elements/forms/textCounter.svelte   | 28 +++++++++++++++++++++
 3 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/elements/forms/textCounter.svelte

diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index dfc83a7da..f56963788 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
+    import TextCounter from './textCounter.svelte';
 
     export let label: string;
     export let optionalText: string | undefined = undefined;
@@ -62,11 +63,7 @@
             bind:this={element}
             on:invalid={handleInvalid} />
         {#if maxlength}
-            <span class="text-counter">
-                <span class="text-counter-count">{value?.length ?? 0}</span>
-                <span class="text-counter-separator" />
-                <span class="text-counter-max">{maxlength}</span>
-            </span>
+            <TextCounter max={maxlength} count={value?.length ?? 0} />
         {/if}
     </div>
     {#if error}
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 51feff2e2..f7cb270c1 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
+    import TextCounter from './textCounter.svelte';
 
     export let label: string;
     export let showLabel = true;
@@ -56,32 +57,10 @@
             bind:this={element}
             on:invalid={handleInvalid} />
         {#if maxlength}
-            <span class="text-counter" data-active={!!value}>
-                <span class="text-counter-count">{value?.length ?? 0}</span>
-                <span class="text-counter-separator" />
-                <span class="text-counter-max">{maxlength}</span>
-            </span>
+            <TextCounter max={maxlength} count={value?.length ?? 0} />
         {/if}
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
-
-<style class="scss">
-    .text-counter {
-        --p-text-counter-color: var(--color-neutral-50);
-    }
-
-    .text-counter[data-active='true'] {
-        --p-text-counter-color: var(--color-neutral-70);
-    }
-
-    :global(.theme-dark) .text-counter {
-        --p-text-counter-color: var(--color-neutral-70);
-    }
-
-    :global(.theme-dark) .text-counter[data-active='true'] {
-        --p-text-counter-color: var(--color-neutral-50);
-    }
-</style>
diff --git a/src/lib/elements/forms/textCounter.svelte b/src/lib/elements/forms/textCounter.svelte
new file mode 100644
index 000000000..14e707720
--- /dev/null
+++ b/src/lib/elements/forms/textCounter.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    export let count: number;
+    export let max: number;
+</script>
+
+<span class="text-counter" class:active={count > 0}>
+    <span class="text-counter-count">{count}</span>
+    <span class="text-counter-separator" />
+    <span class="text-counter-max">{max}</span>
+</span>
+
+<style lang="scss">
+    .text-counter {
+        --p-text-counter-color: var(--color-neutral-50);
+
+        &.active {
+            --p-text-counter-color: var(--color-neutral-70);
+        }
+    }
+
+    :global(.theme-dark) .text-counter {
+        --p-text-counter-color: var(--color-neutral-70);
+
+        &.active {
+            --p-text-counter-color: var(--color-neutral-50);
+        }
+    }
+</style>

From 505cfe2cb4856dfa679a3d189088a5f1f8645998 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 20 Mar 2023 19:24:21 +0000
Subject: [PATCH 06/21] refactor: modularize text counter

---
 src/lib/elements/forms/inputId.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
index b11c7b7a3..93aaecc55 100644
--- a/src/lib/elements/forms/inputId.svelte
+++ b/src/lib/elements/forms/inputId.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { FormItem } from '.';
+    import TextCounter from './textCounter.svelte';
 
     export let value = '';
 
@@ -42,11 +43,7 @@
             bind:value
             bind:this={element}
             on:invalid={handleInvalid} />
-        <span class="text-counter">
-            <span class="text-counter-count">{value?.length ?? 0}</span>
-            <span class="text-counter-separator" />
-            <span class="text-counter-max">36</span>
-        </span>
+        <TextCounter count={value?.length ?? 0} max={36} />
     </div>
 </FormItem>
 <div

From e2d2c43a82c57e81186b355d69d21a6b9b2ef67f Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 21 Mar 2023 12:43:33 +0000
Subject: [PATCH 07/21] refactor: simplify notifications update

---
 src/lib/stores/notifications.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/lib/stores/notifications.ts b/src/lib/stores/notifications.ts
index 397b578e4..26fa69a28 100644
--- a/src/lib/stores/notifications.ts
+++ b/src/lib/stores/notifications.ts
@@ -33,11 +33,7 @@ export const addNotification = (notification: Omit<Notification, 'id'>) => {
 
     const n = { ...defaults, ...notification };
     notifications.update((all) => {
-        if (all.length < 3) {
-            return [n, ...all];
-        } else {
-            return [n, ...all.slice(0, 2)];
-        }
+        return [n, ...all.slice(0, 2)];
     });
 
     if (n.timeout) setTimeout(() => dismissNotification(n.id), n.timeout);

From 1b12910fb8cf97cc146ace4e5b3f8aef357640f5 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 21 Mar 2023 13:52:02 +0100
Subject: [PATCH 08/21] feat: upload env variables

---
 package-lock.json                             |  9 ++
 package.json                                  |  1 +
 .../function-[function]/settings/+page.svelte | 16 ++--
 .../function-[function]/settings/store.ts     |  8 ++
 .../settings/uploadVariables.svelte           | 83 +++++++++----------
 5 files changed, 68 insertions(+), 49 deletions(-)
 create mode 100644 src/routes/console/project-[project]/functions/function-[function]/settings/store.ts

diff --git a/package-lock.json b/package-lock.json
index 83761e17f..020704b73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
                 "@sentry/svelte": "^7.36.0",
                 "@sentry/tracing": "^7.36.0",
                 "analytics": "^0.8.1",
+                "dotenv": "^16.0.3",
                 "echarts": "^5.4.1",
                 "logrocket": "^3.0.1",
                 "pretty-bytes": "^6.1.0",
@@ -3613,6 +3614,14 @@
                 "node": ">=12"
             }
         },
+        "node_modules/dotenv": {
+            "version": "16.0.3",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+            "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/eastasianwidth": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
diff --git a/package.json b/package.json
index 0d0865856..bb39c6b4f 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
         "@sentry/svelte": "^7.36.0",
         "@sentry/tracing": "^7.36.0",
         "analytics": "^0.8.1",
+        "dotenv": "^16.0.3",
         "echarts": "^5.4.1",
         "logrocket": "^3.0.1",
         "pretty-bytes": "^6.1.0",
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
index 475de53f1..09a4ea17d 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -18,7 +18,7 @@
     import { onMount } from 'svelte';
     import Variable from '../../createVariable.svelte';
     import { execute, func } from '../store';
-    // import Upload from './uploadVariables.svelte';
+    import UploadVariables from './uploadVariables.svelte';
     import {
         Table,
         TableBody,
@@ -36,7 +36,7 @@
     const functionId = $page.params.function;
     let showDelete = false;
     let selectedVar: Models.Variable = null;
-    // let showVariablesUpload = false;
+    let showVariablesUpload = false;
     let showVariablesModal = false;
     let showVariablesDropdown = [];
     let timeout: number = null;
@@ -369,10 +369,10 @@
                     <span class="icon-download" />
                     <span class="text">Download .env file</span>
                 </Button>
-                <!-- <Button secondary on:click={() => (showVariablesUpload = true)}>
+                <Button secondary on:click={() => (showVariablesUpload = true)}>
                     <span class="icon-upload" />
                     <span class="text">Import .env file</span>
-                </Button> -->
+                </Button>
             </div>
             {#if data.variables.total}
                 <div class="u-flex u-flex-vertical u-gap-16">
@@ -446,8 +446,9 @@
                     </Button>
                 </div>
             {:else}
-                <Empty on:click={() => (showVariablesModal = !showVariablesModal)}
-                    >Create a variable to get started</Empty>
+                <Empty on:click={() => (showVariablesModal = !showVariablesModal)}>
+                    Create a variable to get started
+                </Empty>
             {/if}
         </svelte:fragment>
     </CardGrid>
@@ -505,3 +506,6 @@
         on:created={handleVariableCreated}
         on:updated={handleVariableUpdated} />
 {/if}
+{#if showVariablesUpload}
+    <UploadVariables bind:show={showVariablesUpload} />
+{/if}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/store.ts b/src/routes/console/project-[project]/functions/function-[function]/settings/store.ts
new file mode 100644
index 000000000..3f8cf0cea
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/store.ts
@@ -0,0 +1,8 @@
+import { page } from '$app/stores';
+import { derived } from 'svelte/store';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export const variables = derived(
+    page,
+    ($page) => $page.data.variables.variables as Models.Variable[]
+);
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
index 617f40b46..d5caa07e7 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
@@ -6,69 +6,66 @@
     import { Button, InputFile } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
+    import { parse } from 'dotenv';
+    import { variables } from './store';
 
     export let show = false;
 
-    const dispatch = createEventDispatcher();
-
     const functionId = $page.params.function;
+
     let files: FileList;
+    let error: string;
 
-    const handleSubmit = async () => {
-        if (files?.length) {
-            const variables = await parseFile(files[0]);
-            for (const variable of variables) {
-                try {
-                    await sdk.forProject.functions.createVariable(
-                        functionId,
-                        variable.key,
-                        variable.value
-                    );
-                    invalidate(Dependencies.VARIABLES);
-                    addNotification({
-                        type: 'success',
-                        message: 'Variable uploaded'
-                    });
-                } catch (error) {
-                    addNotification({
-                        type: 'error',
-                        message: error.message
-                    });
-                }
+    async function handleSubmit() {
+        try {
+            if (!files?.length) {
+                throw new Error('No file selected');
             }
-            dispatch('uploaded', variables);
-        } else {
-            addNotification({
-                type: 'error',
-                message: 'No file uploaded'
-            });
-        }
-    };
 
-    async function parseFile(file: File) {
-        if (file) {
-            let variables = [];
-            let text = await file.text();
-            text.split('\n').forEach((line) => {
-                const [key, value] = line.split('=');
-                variables.push({ key, value });
+            const uploaded = parse(await files[0].text());
+
+            if (!Object.keys(uploaded).length) {
+                throw new Error('No variables found');
+            }
+
+            await Promise.all(
+                Object.entries(uploaded)
+                    .filter(([, value]) => !!value)
+                    .map(([key, value]) => {
+                        const found = $variables.find((variable) => variable.key === key);
+                        return found
+                            ? sdk.forProject.functions.updateVariable(
+                                  functionId,
+                                  found.$id,
+                                  key,
+                                  value
+                              )
+                            : sdk.forProject.functions.createVariable(functionId, key, value);
+                    })
+            );
+
+            invalidate(Dependencies.VARIABLES);
+            addNotification({
+                type: 'success',
+                message: 'Variables uploaded'
             });
-            return variables;
+            show = false;
+        } catch (e) {
+            error = e.message;
         }
     }
 </script>
 
-<Modal bind:show onSubmit={handleSubmit}>
+<Modal bind:show onSubmit={handleSubmit} bind:error>
     <svelte:fragment slot="header">Upload Variables</svelte:fragment>
     <p>
         Upload multiple variables via a .env file that will be passed to your function at runtime.
     </p>
 
-    <InputFile bind:files label="Attach a file" />
+    <InputFile maxSize={100000} bind:files label="Attach a file" />
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button submit>Create</Button>
+        <Button submit>Upload</Button>
     </svelte:fragment>
 </Modal>

From b16b8e0a718904d6c15d3dea3e4e39a98dc558d0 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 21 Mar 2023 14:58:21 +0100
Subject: [PATCH 09/21] fix: variables upload with more than 8192 chars

---
 .../settings/uploadVariables.svelte                    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
index d5caa07e7..acec944d7 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
@@ -28,8 +28,16 @@
                 throw new Error('No variables found');
             }
 
+            const entries = Object.entries(uploaded);
+
+            for (const [key, value] of entries) {
+                if (value.length > 8192) {
+                    throw new Error(`Variable ${key} is longer than 8192 allowed characters`);
+                }
+            }
+
             await Promise.all(
-                Object.entries(uploaded)
+                entries
                     .filter(([, value]) => !!value)
                     .map(([key, value]) => {
                         const found = $variables.find((variable) => variable.key === key);

From dffe268dbf95d0e5256f6fda979701ecc0b7ff9c Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 21 Mar 2023 15:17:12 +0100
Subject: [PATCH 10/21] remove max-size

---
 .../function-[function]/settings/uploadVariables.svelte         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
index acec944d7..3da9fbf52 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
@@ -70,7 +70,7 @@
         Upload multiple variables via a .env file that will be passed to your function at runtime.
     </p>
 
-    <InputFile maxSize={100000} bind:files label="Attach a file" />
+    <InputFile bind:files label="Attach a file" />
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>

From 9a9e8747e32565d044de4fb0eca94bb2bc9c850c Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 21 Mar 2023 15:29:04 +0100
Subject: [PATCH 11/21] fix: force pointer cursor on copy

---
 src/lib/components/copy.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index c6cc8fe7d..33050e82e 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -33,6 +33,8 @@
 </script>
 
 <span
+    style:display="inline-block"
+    style:cursor="pointer"
     on:click|preventDefault={handleClick}
     on:keyup={clickOnEnter}
     on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}

From b0cc129834d418f4c2898276f79b3d8f12e60ff7 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 21 Mar 2023 19:21:15 +0000
Subject: [PATCH 12/21] refactor: change notification limit

---
 src/lib/stores/notifications.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/stores/notifications.ts b/src/lib/stores/notifications.ts
index 26fa69a28..25ba01968 100644
--- a/src/lib/stores/notifications.ts
+++ b/src/lib/stores/notifications.ts
@@ -33,7 +33,7 @@ export const addNotification = (notification: Omit<Notification, 'id'>) => {
 
     const n = { ...defaults, ...notification };
     notifications.update((all) => {
-        return [n, ...all.slice(0, 2)];
+        return [n, ...all.slice(0, 4)];
     });
 
     if (n.timeout) setTimeout(() => dismissNotification(n.id), n.timeout);

From a0b617284424a31021a7bb5a47e79d67173093e0 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 22 Mar 2023 12:30:12 +0100
Subject: [PATCH 13/21] feat: pagination for func vars

---
 src/lib/components/output.svelte              | 16 +++++----
 .../function-[function]/settings/+page.svelte | 33 ++++++++++++-------
 .../settings/uploadVariables.svelte           |  2 +-
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/output.svelte b/src/lib/components/output.svelte
index e8830076c..ff658d7d5 100644
--- a/src/lib/components/output.svelte
+++ b/src/lib/components/output.svelte
@@ -2,16 +2,18 @@
     import Copy from './copy.svelte';
 
     export let value: string;
+    export let hideCopyIcon = false;
 </script>
 
 <Copy {value}>
-    <div class="interactive-text-output is-textarea">
+    <div class="interactive-text-output is-textarea" style:min-inline-size="0">
         <span class="text u-line-height-1-5 u-break-all"><slot /></span>
-
-        <div class="u-flex u-cross-child-start u-gap-8">
-            <button class="interactive-text-output-button" aria-label="copy text">
-                <span class="icon-duplicate" aria-hidden="true" />
-            </button>
-        </div>
+        {#if !hideCopyIcon}
+            <div class="u-flex u-cross-child-start u-gap-8">
+                <button class="interactive-text-output-button" aria-label="copy text">
+                    <span class="icon-duplicate" aria-hidden="true" />
+                </button>
+            </div>
+        {/if}
     </div>
 </Copy>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
index 09a4ea17d..dc2f755b2 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -3,7 +3,16 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Box, CardGrid, DropList, DropListItem, Empty, Output, Secret } from '$lib/components';
+    import {
+        Box,
+        CardGrid,
+        DropList,
+        DropListItem,
+        Empty,
+        Output,
+        PaginationInline,
+        Secret
+    } from '$lib/components';
     import Heading from '$lib/components/heading.svelte';
     import { Roles } from '$lib/components/permissions';
     import { Dependencies } from '$lib/constants';
@@ -44,6 +53,7 @@
     let functionSchedule: string = null;
     let permissions: string[] = [];
     let arePermsDisabled = true;
+    let offset = 0;
 
     onMount(async () => {
         timeout ??= $func.timeout;
@@ -374,19 +384,21 @@
                     <span class="text">Import .env file</span>
                 </Button>
             </div>
-            {#if data.variables.total}
+            {@const limit = 10}
+            {@const sum = data.variables.total}
+            {#if sum}
                 <div class="u-flex u-flex-vertical u-gap-16">
                     <Table noMargin noStyles>
                         <TableHeader>
                             <TableCellHead>Key</TableCellHead>
-                            <TableCellHead>Value</TableCellHead>
+                            <TableCellHead width={180}>Value</TableCellHead>
                             <TableCellHead width={30} />
                         </TableHeader>
                         <TableBody>
-                            {#each data.variables.variables as variable, i}
+                            {#each data.variables.variables.slice(offset, offset + limit) as variable, i}
                                 <TableRow>
                                     <TableCell title="key">
-                                        <Output value={variable.key}>
+                                        <Output value={variable.key} hideCopyIcon>
                                             {variable.key}
                                         </Output>
                                     </TableCell>
@@ -435,15 +447,14 @@
                             {/each}
                         </TableBody>
                     </Table>
-                    <Button
-                        text
-                        noMargin
-                        on:click={() => {
-                            showVariablesModal = true;
-                        }}>
+                    <Button text noMargin on:click={() => (showVariablesModal = true)}>
                         <span class="icon-plus" aria-hidden="true" />
                         <span class="text">Create variable</span>
                     </Button>
+                    <div class="u-flex u-main-space-between">
+                        <p class="text">Total variables: {sum}</p>
+                        <PaginationInline {sum} {limit} bind:offset hidePages />
+                    </div>
                 </div>
             {:else}
                 <Empty on:click={() => (showVariablesModal = !showVariablesModal)}>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
index 3da9fbf52..974932a16 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
@@ -70,7 +70,7 @@
         Upload multiple variables via a .env file that will be passed to your function at runtime.
     </p>
 
-    <InputFile bind:files label="Attach a file" />
+    <InputFile bind:files />
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>

From e098db6f9dc65d11e364604e2f3f97afb197ddd2 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 22 Mar 2023 13:11:04 +0000
Subject: [PATCH 14/21] refactor: improve notifications mobile styling

---
 src/lib/layout/notifications.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/notifications.svelte b/src/lib/layout/notifications.svelte
index da64f62d1..3200a1280 100644
--- a/src/lib/layout/notifications.svelte
+++ b/src/lib/layout/notifications.svelte
@@ -25,8 +25,15 @@
 <style lang="scss">
     section {
         position: fixed;
-        top: calc(var(--main-header-height) + 24px);
-        right: 24px;
+        top: calc(var(--main-header-height) + 12px);
+        right: 12px;
         z-index: 1000;
     }
+
+    @media (min-width: 768px) {
+        section {
+            top: calc(var(--main-header-height) + 24px);
+            right: 24px;
+        }
+    }
 </style>

From 01fad2db341e9547e63e227aba27519d08dd4a9b Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 22 Mar 2023 15:46:11 +0000
Subject: [PATCH 15/21] feat: input text area on big string attributes

---
 .../attributes/string.svelte                  | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 9ecc9c513..747e2d10a 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -22,6 +22,7 @@
 
 <script lang="ts">
     import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
+    import InputTextarea from '$lib/elements/forms/inputTextarea.svelte';
 
     export let selectedAttribute: Models.AttributeString;
     export let data: Partial<Models.AttributeString> = {
@@ -50,13 +51,23 @@
     bind:value={data.size}
     required
     readonly={!!selectedAttribute} />
-<InputText
-    id="default"
-    label="Default value"
-    bind:value={data.default}
-    maxlength={data.size}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
+{#if data.size > 64}
+    <InputTextarea
+        id="default"
+        label="Default value"
+        bind:value={data.default}
+        maxlength={data.size}
+        disabled={data.required || data.array}
+        readonly={!!selectedAttribute} />
+{:else}
+    <InputText
+        id="default"
+        label="Default value"
+        bind:value={data.default}
+        maxlength={data.size}
+        disabled={data.required || data.array}
+        readonly={!!selectedAttribute} />
+{/if}
 <InputChoice
     id="required"
     label="Required"

From 78ab543f5dea7167db5491b7c23ecb39c8820851 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 22 Mar 2023 16:12:00 +0000
Subject: [PATCH 16/21] fix: x button spacing

---
 .../collection-[collection]/indexes/createIndex.svelte           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
index c1c21e6d1..5528ddee2 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -133,6 +133,7 @@
 
                 <div class="form-item-part u-cross-child-end">
                     <Button
+                        noMargin
                         text
                         disabled={attributeList.length <= 1}
                         on:click={() => {

From ff43fec7dfbffd9cf9b3c70dfa6dff3c9d29a9e6 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 22 Mar 2023 20:21:50 +0000
Subject: [PATCH 17/21] fix: function x button spacing

---
 src/lib/components/permissions/roles.svelte                     | 2 +-
 .../functions/function-[function]/settings/+page.svelte         | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/permissions/roles.svelte b/src/lib/components/permissions/roles.svelte
index 1f8ebaf03..7f2b32454 100644
--- a/src/lib/components/permissions/roles.svelte
+++ b/src/lib/components/permissions/roles.svelte
@@ -104,7 +104,7 @@
                         <Row {role} />
                     </TableCell>
                     <TableCellText title="Remove">
-                        <div class="u-flex">
+                        <div class="u-flex u-main-end">
                             <button
                                 class="button is-text is-only-icon"
                                 type="button"
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
index 475de53f1..a790a04d3 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -18,7 +18,6 @@
     import { onMount } from 'svelte';
     import Variable from '../../createVariable.svelte';
     import { execute, func } from '../store';
-    // import Upload from './uploadVariables.svelte';
     import {
         Table,
         TableBody,

From 9febc89cf86589bc085b7f02f41c61fa66f0d5ff Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 22 Mar 2023 20:23:52 +0000
Subject: [PATCH 18/21] fix: footer links

---
 src/lib/layout/footer.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index e7ecd1b6e..6ca938a4c 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -11,13 +11,13 @@
         <ul class="inline-links is-no-padding-first-and-last u-x-small">
             <li class="inline-links-item">
                 <div class="u-flex u-cross-center u-gap-8">
-                    {#if MODE === Mode.CLOUD}
+                    {#if MODE !== Mode.CLOUD}
                         <span class="icon-cloud" />
                     {/if}
                     {#if $version}
                         <a
                             class="text"
-                            href="https://github.com/appwrite/appwrite/blob/master/CHANGES.md"
+                            href="https://github.com/appwrite/appwrite/releases"
                             target="_blank"
                             rel="noreferrer">
                             Version {$version}
@@ -62,7 +62,7 @@
         margin-block-start: auto;
     }
 
-    [class^='icon-']:not(:hover) {
+    [class^='icon-']:not(.icon-cloud):not(:hover) {
         color: hsl(var(--color-neutral-50));
     }
 </style>

From 3e236d561904d3a9f0315dce425f43f743e09526 Mon Sep 17 00:00:00 2001
From: Tushar Dave <imtushardave@gmail.com>
Date: Thu, 23 Mar 2023 14:12:23 +0530
Subject: [PATCH 19/21] Fix document id reversed in console

---
 .../collection-[collection]/[[page]]/+page.svelte             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
index 3fe33f0bd..0b6063e25 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
@@ -102,9 +102,9 @@
                             href={`${base}/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$collection.$id}/document-${document.$id}`}>
                             <TableCell width={230}>
                                 <Copy value={document.$id}>
-                                    <Pill button>
+                                    <Pill button trim>
                                         <span class="icon-duplicate" aria-hidden="true" />
-                                        <span class="text u-trim-start">{document.$id}</span>
+                                        <span class="text">{document.$id}</span>
                                     </Pill>
                                 </Copy>
                             </TableCell>

From 12afcba1ec2edd2705f381450a6ccaea3e75ede8 Mon Sep 17 00:00:00 2001
From: Christy Jacob <christyjacob4@gmail.com>
Date: Thu, 23 Mar 2023 12:39:02 +0000
Subject: [PATCH 20/21] fix: status code check on feedback submit

---
 .gitpod.yml           | 9 +++++++++
 src/lib/stores/app.ts | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 .gitpod.yml

diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 000000000..3c1848749
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+    - init: npm install && npm run build
+      command: npm run dev
diff --git a/src/lib/stores/app.ts b/src/lib/stores/app.ts
index 4ddd2e08a..66946f3f1 100644
--- a/src/lib/stores/app.ts
+++ b/src/lib/stores/app.ts
@@ -74,7 +74,7 @@ function createFeedbackStore() {
                     customFields: value ? [{ id: '40655', value }] : undefined
                 })
             });
-            if (response.status !== 200) {
+            if (response.status >= 400) {
                 throw new Error('Failed to submit feedback');
             }
         }

From 7201a9e899500800e9658973e96e28d9eb66291c Mon Sep 17 00:00:00 2001
From: Christy Jacob <christyjacob4@gmail.com>
Date: Thu, 23 Mar 2023 12:40:10 +0000
Subject: [PATCH 21/21] fix: status code check on feedback submit

---
 .gitpod.yml | 9 ---------
 1 file changed, 9 deletions(-)
 delete mode 100644 .gitpod.yml

diff --git a/.gitpod.yml b/.gitpod.yml
deleted file mode 100644
index 3c1848749..000000000
--- a/.gitpod.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-# This configuration file was automatically generated by Gitpod.
-# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
-# and commit this file to your remote git repository to share the goodness with others.
-
-# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
-
-tasks:
-    - init: npm install && npm run build
-      command: npm run dev