From d8aaf069390bb31dadc253aed4c5901af0c70599 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 13 Dec 2022 17:34:20 +0000
Subject: [PATCH 01/16] refactor(WIP): refactor event modal

---
 src/lib/components/eventModal.svelte | 312 +++++++++++++++++----------
 src/lib/helpers/array.ts             |  12 ++
 2 files changed, 215 insertions(+), 109 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 72b4e8d36b..c4f6b980d7 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { Modal, Copy } from '$lib/components';
+    import { Modal } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { createEventDispatcher } from 'svelte';
+    import { empty } from '$lib/helpers/array';
+    import Copy from './copy.svelte';
 
+    // Props
     export let show = false;
 
+    // Types & Constants
     type Service = {
         name: string;
         resources: Resource[];
@@ -15,7 +19,6 @@
     type Resource = {
         name: string;
         actions?: Action[];
-        attributes?: string[];
     };
 
     type Action = {
@@ -23,48 +26,55 @@
         attributes?: string[];
     };
 
-    let selectedService: Service = null;
-    let selectedResource: Resource = null;
-    let selectedAction: Action = null;
-    let selectedAttribute: string = null;
-    let helper: string = null;
-    let inputData: string = null;
-    let showInput = false;
-
-    const dispatch = createEventDispatcher();
+    type FieldType = 'service' | 'resource' | 'action' | 'attribute';
 
-    function create() {
-        show = false;
-        dispatch('created', copyValue);
-    }
-
-    const actions = [{ name: 'create' }, { name: 'update' }, { name: 'delete' }];
-
-    const services = [
+    const services: Array<Service> = [
         {
             name: 'buckets',
-            resources: [{ name: 'files', actions }],
-            actions
+            resources: [
+                {
+                    name: 'files',
+                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+                }
+            ],
+            actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
         },
         {
             name: 'databases',
             resources: [
-                { name: 'collections', actions },
-                { name: 'documents', actions }
+                {
+                    name: 'collections',
+                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+                },
+                {
+                    name: 'documents',
+                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+                }
             ],
-            actions
+            actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
         },
         {
             name: 'functions',
             resources: [
-                { name: 'deployments', actions },
-                { name: 'executions', actions }
+                {
+                    name: 'deployments',
+                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+                },
+                {
+                    name: 'executions',
+                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+                }
             ],
-            actions
+            actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
         },
         {
             name: 'teams',
-            resources: [{ name: 'memberships', actions }],
+            resources: [
+                {
+                    name: 'memberships',
+                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+                }
+            ],
             actions: [
                 { name: 'create' },
                 { name: 'update', attributes: ['status'] },
@@ -86,23 +96,127 @@
         }
     ];
 
-    function createEventString(
-        service: Service,
-        resource: Resource,
-        action: Action,
-        attribute: string
-    ) {
+    // Helpers
+    const dispatch = createEventDispatcher();
+
+    function create() {
+        show = false;
+        dispatch('created', copyValue);
+    }
+
+    function select(field: FieldType, value: string) {
+        selected[field] = selected[field] === value ? null : value;
+
+        switch (field) {
+            case 'service': {
+                selected.resource = null;
+                selected.action = null;
+                selected.attribute = null;
+                break;
+            }
+            case 'resource': {
+                const selectedService = services.find((d) => d.name === selected.service);
+                const selectedResource = selected.resource
+                    ? selectedService.resources.find((d) => d.name === selected.resource)
+                    : null;
+
+                const availableActions = selectedResource
+                    ? selectedResource.actions
+                    : selectedService.actions;
+
+                if (!availableActions.map((a) => a.name).includes(selected.action)) {
+                    selected.action = null;
+                    selected.attribute = null;
+                } else {
+                    const selectedAction = availableActions.find((d) => d.name === selected.action);
+
+                    if (!selectedAction.attributes.includes(selected.attribute)) {
+                        selected.attribute = null;
+                    }
+                }
+                break;
+            }
+            case 'action': {
+                selected.attribute = null;
+                break;
+            }
+        }
+    }
+
+    // State & Reactive Declarations
+    let selected: Record<FieldType, string | null> = {
+        service: null,
+        resource: null,
+        action: null,
+        attribute: null
+    };
+    let helper: string = null;
+    let inputData: string = null;
+    let showInput = false;
+
+    $: available = (function getAvailable() {
+        const available: Record<`${FieldType}s`, Array<string>> = {
+            services: services.map((d) => d.name),
+            resources: [],
+            actions: [],
+            attributes: []
+        };
+
+        if (selected.service) {
+            const selectedService = services.find((d) => d.name === selected.service);
+            available.resources = selectedService.resources.map((d) => d.name);
+
+            if (!selected.resource) {
+                available.actions = selectedService.actions.map((d) => d.name);
+
+                if (selected.action) {
+                    available.attributes = selectedService.actions.find(
+                        (d) => d.name === selected.action
+                    ).attributes;
+                }
+            } else {
+                const selectedResource = selectedService.resources.find(
+                    (d) => d.name === selected.resource
+                );
+                available.actions = selectedResource.actions.map((d) => d.name);
+
+                if (selected.action) {
+                    available.attributes = selectedResource.actions.find(
+                        (d) => d.name === selected.action
+                    ).attributes;
+                }
+            }
+        }
+
+        return available;
+    })();
+
+    $: eventString = (function createEventString() {
         const data = new Map();
-        if (service) {
-            data.set('service', { value: service.name, description: 'service' });
+
+        let selectedAction: Action | null = null;
+        if (selected.action) {
+            const selectedService = services.find((d) => d.name === selected.service);
+            if (selected.resource) {
+                const selectedResource = selectedService.resources.find(
+                    (d) => d.name === selected.resource
+                );
+                selectedAction = selectedResource.actions.find((d) => d.name === selected.action);
+            } else {
+                selectedAction = selectedService.actions.find((d) => d.name === selected.action);
+            }
+        }
+
+        if (selected.service) {
+            data.set('service', { value: selected.service, description: 'service' });
             data.set('serviceId', {
                 value: '*',
-                description: `ID of ${service?.name.slice(0, -1)}`
+                description: `ID of ${selected.service.slice(0, -1)}`
             });
         }
 
-        if (resource) {
-            if (resource.name === 'documents') {
+        if (selected.resource) {
+            if (selected.resource === 'documents') {
                 data.set('resource', {
                     value: 'collections',
                     description: 'resource'
@@ -121,60 +235,43 @@
                 });
             } else {
                 data.set('resource', {
-                    value: resource.name,
+                    value: selected.resource,
                     description: `resource`
                 });
                 data.set('resourceId', {
                     value: '*',
-                    description: `ID of ${resource?.name.slice(0, -1)}`
+                    description: `ID of ${selected.resource.slice(0, -1)}`
                 });
             }
         }
 
-        if (action) {
-            data.set('action', { value: action.name, description: 'action' });
+        if (selected.action) {
+            data.set('action', { value: selected.action, description: 'action' });
         }
 
-        if (attribute && !resource) {
-            data.set('attribute', { value: attribute, description: 'attribute' });
-        } else if (action?.attributes && !resource) {
+        if (selected.attribute && !selected.resource) {
+            data.set('attribute', { value: selected.attribute, description: 'attribute' });
+        } else if (selectedAction?.attributes && !selected.resource) {
             data.set('attribute', { value: '*', description: `attribute` });
         }
         return data;
-    }
+    })();
 
-    $: eventString = createEventString(
-        selectedService,
-        selectedResource,
-        selectedAction,
-        selectedAttribute
-    );
     $: copyValue =
         inputData ??
         Array.from(eventString.values())
             .map((d) => d.value)
             .join('.');
 
-    $: if (selectedService) {
-        selectedResource = null;
-        selectedAction = null;
-        selectedAttribute = null;
-        helper = null;
-    }
-
-    $: if (!selectedAction?.attributes) {
-        selectedAttribute = null;
-    }
-
     $: if (!showInput) {
         helper = null;
     }
 
     $: if (!show) {
-        selectedService = null;
-        selectedResource = null;
-        selectedAction = null;
-        selectedAttribute = null;
+        selected.service = null;
+        selected.resource = null;
+        selected.action = null;
+        selected.attribute = null;
         helper = null;
         inputData = null;
         showInput = false;
@@ -187,73 +284,70 @@
     <div>
         <p class="u-text">Choose a service</p>
         <div class="u-flex u-gap-8 u-margin-block-start-8">
-            {#each services as service}
+            {#each available.services as service}
                 <Pill
                     disabled={showInput}
-                    selected={service.name === selectedService?.name}
+                    selected={selected.service === service}
                     button
-                    on:click={() => {
-                        selectedService = service;
-                        inputData = null;
-                    }}>{service.name}</Pill>
+                    on:click={() => select('service', service)}>
+                    {service}
+                </Pill>
             {/each}
         </div>
     </div>
-    {#if selectedService}
+    {#if !empty(available.resources)}
         <div>
             <p class="u-text">Choose a resource (optional)</p>
             <div class="u-flex u-gap-8 u-margin-block-start-8">
-                {#each selectedService.resources as resource}
+                {#each available.resources as resource}
                     <Pill
                         disabled={showInput}
-                        selected={resource.name === selectedResource?.name}
+                        selected={selected.resource === resource}
                         button
-                        on:click={() => {
-                            selectedResource === resource
-                                ? (selectedResource = null)
-                                : (selectedResource = resource);
-                            inputData = null;
-                        }}>{resource.name}</Pill>
+                        on:click={() => select('resource', resource)}>
+                        {resource}
+                    </Pill>
                 {/each}
             </div>
         </div>
+    {/if}
+
+    {#if !empty(available.actions)}
         <div>
             <p class="u-text">Choose an action (optional)</p>
             <div class="u-flex u-gap-8 u-margin-block-start-8">
-                {#each selectedResource?.actions ?? selectedService?.actions as action}
+                {#each available.actions as action}
                     <Pill
                         disabled={showInput}
-                        selected={selectedAction === action}
+                        selected={selected.action === action}
                         button
-                        on:click={() => {
-                            selectedAction === action
-                                ? (selectedAction = null)
-                                : (selectedAction = action);
-                            inputData = null;
-                        }}>{action.name}</Pill>
+                        on:click={() => select('action', action)}>
+                        {action}
+                    </Pill>
                 {/each}
             </div>
         </div>
-        {#if selectedAction?.attributes}
-            <div>
-                <p class="u-text">Choose an attribute (optional)</p>
-                <div class="u-flex u-gap-8 u-margin-block-start-8">
-                    {#each selectedAction.attributes as attribute}
-                        <Pill
-                            disabled={showInput}
-                            selected={selectedAttribute === attribute}
-                            button
-                            on:click={() => {
-                                selectedAttribute === attribute
-                                    ? (selectedAttribute = null)
-                                    : (selectedAttribute = attribute);
-                                inputData = null;
-                            }}>{attribute}</Pill>
-                    {/each}
-                </div>
+    {/if}
+
+    {#if !empty(available.attributes)}
+        <div>
+            <p class="u-text">Choose an attribute (optional)</p>
+            <div class="u-flex u-gap-8 u-margin-block-start-8">
+                {#each available.attributes as attribute}
+                    <Pill
+                        disabled={showInput}
+                        selected={selected.attribute === attribute}
+                        button
+                        on:click={() => select('attribute', attribute)}>
+                        {attribute}
+                    </Pill>
+                {/each}
             </div>
-        {/if}
+        </div>
     {/if}
+    <div>
+        {JSON.stringify(selected, null, 2)}
+    </div>
     {#if showInput}
         <div class="input-text-wrapper" style="--amount-of-buttons:2">
             <input type="text" placeholder="Enter custom event" bind:value={inputData} />
diff --git a/src/lib/helpers/array.ts b/src/lib/helpers/array.ts
index 12cde8c4b8..3556be5a72 100644
--- a/src/lib/helpers/array.ts
+++ b/src/lib/helpers/array.ts
@@ -27,3 +27,15 @@ export function remove<T>(arr: T[], index: number): T[] {
     // Remove the element at the given index, return a new array
     return [...arr.slice(0, index), ...arr.slice(index + 1)];
 }
+
+/**
+ * Returns true if the array is empty, false otherwise.
+ *
+ * @export
+ * @param {unknown[]} arr
+ * @returns {boolean}
+ */
+export function empty(arr: unknown[]): boolean {
+    if (!arr) return true;
+    return arr.length === 0;
+}

From afd1f8ba1a6cb7e40768b0465001d8d1d49eacb9 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 13 Dec 2022 18:44:27 +0000
Subject: [PATCH 02/16] refactor: refactor event modal & fix copy

---
 .eslintrc.cjs                        |  10 +-
 src/lib/components/copy.svelte       |   4 +-
 src/lib/components/eventModal.svelte | 202 +++++++++------------------
 3 files changed, 76 insertions(+), 140 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 0fb44f62bf..82300969ce 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -4,7 +4,15 @@ module.exports = {
     extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
     plugins: ['svelte3', '@typescript-eslint'],
     ignorePatterns: ['*.cjs'],
-    overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+    overrides: [
+        {
+            files: ['*.svelte'],
+            processor: 'svelte3/svelte3',
+            rules: {
+                'no-redeclare': 'off'
+            }
+        }
+    ],
     settings: {
         'svelte3/typescript': () => require('typescript')
     },
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 1f0e5dfd80..7fd1cb18bb 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -6,6 +6,7 @@
 
     export let value: string;
     export let event: string = null;
+    export let appendTo: any | undefined = undefined;
 
     let content = 'Click to copy';
 
@@ -34,7 +35,8 @@
     on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
     use:tooltip={{
         content,
-        hideOnClick: false
+        hideOnClick: false,
+        appendTo
     }}>
     <slot />
 </span>
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index c4f6b980d7..e3c0e1dbce 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -104,8 +104,16 @@
         dispatch('created', copyValue);
     }
 
-    function select(field: FieldType, value: string) {
-        selected[field] = selected[field] === value ? null : value;
+    function select(field: 'service', value: Service);
+    function select(field: 'resource', value: Resource);
+    function select(field: 'action', value: Action);
+    function select(field: 'attribute', value: string);
+    function select(field: FieldType, value: string | Service | Resource | Action) {
+        if (typeof value === 'string') {
+            selected[field as 'attribute'] = selected[field] === value ? null : value;
+        } else {
+            selected[field as any] = (selected[field] as any)?.name === value.name ? null : value;
+        }
 
         switch (field) {
             case 'service': {
@@ -115,24 +123,15 @@
                 break;
             }
             case 'resource': {
-                const selectedService = services.find((d) => d.name === selected.service);
-                const selectedResource = selected.resource
-                    ? selectedService.resources.find((d) => d.name === selected.resource)
-                    : null;
-
-                const availableActions = selectedResource
-                    ? selectedResource.actions
-                    : selectedService.actions;
+                const availableActions = selected.resource
+                    ? selected.resource?.actions
+                    : selected.service?.actions;
 
-                if (!availableActions.map((a) => a.name).includes(selected.action)) {
+                if (!availableActions.map((a) => a.name).includes(selected.action?.name)) {
                     selected.action = null;
                     selected.attribute = null;
-                } else {
-                    const selectedAction = availableActions.find((d) => d.name === selected.action);
-
-                    if (!selectedAction.attributes.includes(selected.attribute)) {
-                        selected.attribute = null;
-                    }
+                } else if (!selected?.action?.attributes.includes(selected.attribute)) {
+                    selected.attribute = null;
                 }
                 break;
             }
@@ -144,134 +143,64 @@
     }
 
     // State & Reactive Declarations
-    let selected: Record<FieldType, string | null> = {
-        service: null,
-        resource: null,
-        action: null,
-        attribute: null
+    let selected = {
+        service: null as Service | null,
+        resource: null as Resource | null,
+        action: null as Action | null,
+        attribute: null as string | null
     };
     let helper: string = null;
     let inputData: string = null;
     let showInput = false;
+    let copyParent: HTMLElement;
 
-    $: available = (function getAvailable() {
-        const available: Record<`${FieldType}s`, Array<string>> = {
-            services: services.map((d) => d.name),
-            resources: [],
-            actions: [],
-            attributes: []
-        };
-
-        if (selected.service) {
-            const selectedService = services.find((d) => d.name === selected.service);
-            available.resources = selectedService.resources.map((d) => d.name);
-
-            if (!selected.resource) {
-                available.actions = selectedService.actions.map((d) => d.name);
-
-                if (selected.action) {
-                    available.attributes = selectedService.actions.find(
-                        (d) => d.name === selected.action
-                    ).attributes;
-                }
-            } else {
-                const selectedResource = selectedService.resources.find(
-                    (d) => d.name === selected.resource
-                );
-                available.actions = selectedResource.actions.map((d) => d.name);
-
-                if (selected.action) {
-                    available.attributes = selectedResource.actions.find(
-                        (d) => d.name === selected.action
-                    ).attributes;
-                }
-            }
-        }
-
-        return available;
-    })();
+    $: available = {
+        services: services,
+        resources: selected.service?.resources || [],
+        actions: (selected.resource ? selected.resource?.actions : selected.service?.actions) || [],
+        attributes: selected.action?.attributes || []
+    };
 
     $: eventString = (function createEventString() {
-        const data = new Map();
-
-        let selectedAction: Action | null = null;
-        if (selected.action) {
-            const selectedService = services.find((d) => d.name === selected.service);
-            if (selected.resource) {
-                const selectedResource = selectedService.resources.find(
-                    (d) => d.name === selected.resource
-                );
-                selectedAction = selectedResource.actions.find((d) => d.name === selected.action);
-            } else {
-                selectedAction = selectedService.actions.find((d) => d.name === selected.action);
-            }
-        }
+        const data: Array<{ value: string; description: string }> = [];
 
         if (selected.service) {
-            data.set('service', { value: selected.service, description: 'service' });
-            data.set('serviceId', {
-                value: '*',
-                description: `ID of ${selected.service.slice(0, -1)}`
-            });
+            data.push({ value: selected.service?.name, description: 'service' });
+            data.push({ value: '*', description: `ID of ${selected.service?.name.slice(0, -1)}` });
         }
 
         if (selected.resource) {
-            if (selected.resource === 'documents') {
-                data.set('resource', {
-                    value: 'collections',
-                    description: 'resource'
-                });
-                data.set('resourceId', {
-                    value: '*',
-                    description: `ID of collection`
-                });
-                data.set('secondaryResource', {
-                    value: 'documents',
-                    description: 'secondary resource'
-                });
-                data.set('secondaryResourceId', {
-                    value: '*',
-                    description: `ID of document`
-                });
+            if (selected.resource.name === 'documents') {
+                data.push({ value: 'collections', description: 'resource' });
+                data.push({ value: '*', description: `ID of collection` });
+                data.push({ value: selected.resource.name, description: 'secondary resource' });
             } else {
-                data.set('resource', {
-                    value: selected.resource,
-                    description: `resource`
-                });
-                data.set('resourceId', {
-                    value: '*',
-                    description: `ID of ${selected.resource.slice(0, -1)}`
-                });
+                data.push({ value: selected.resource.name, description: 'resource' });
             }
+
+            data.push({ value: '*', description: `ID of ${selected.resource.name.slice(0, -1)}` });
         }
 
         if (selected.action) {
-            data.set('action', { value: selected.action, description: 'action' });
+            data.push({ value: selected.action.name, description: 'action' });
         }
 
         if (selected.attribute && !selected.resource) {
-            data.set('attribute', { value: selected.attribute, description: 'attribute' });
-        } else if (selectedAction?.attributes && !selected.resource) {
-            data.set('attribute', { value: '*', description: `attribute` });
+            data.push({ value: selected.attribute, description: 'attribute' });
+        } else if (selected.action?.attributes && !selected.resource) {
+            data.push({ value: '*', description: `attribute` });
         }
         return data;
     })();
 
-    $: copyValue =
-        inputData ??
-        Array.from(eventString.values())
-            .map((d) => d.value)
-            .join('.');
+    $: copyValue = inputData ?? eventString.map((d) => d.value).join('.');
 
     $: if (!showInput) {
         helper = null;
     }
 
     $: if (!show) {
-        selected.service = null;
-        selected.resource = null;
-        selected.action = null;
-        selected.attribute = null;
+        Object.keys(selected).forEach((key) => (selected[key] = null));
         helper = null;
         inputData = null;
         showInput = false;
@@ -287,14 +216,15 @@
             {#each available.services as service}
                 <Pill
                     disabled={showInput}
-                    selected={selected.service === service}
+                    selected={selected.service?.name === service.name}
                     button
                     on:click={() => select('service', service)}>
-                    {service}
+                    {service.name}
                 </Pill>
             {/each}
         </div>
     </div>
+
     {#if !empty(available.resources)}
         <div>
             <p class="u-text">Choose a resource (optional)</p>
@@ -302,10 +232,10 @@
                 {#each available.resources as resource}
                     <Pill
                         disabled={showInput}
-                        selected={selected.resource === resource}
+                        selected={selected.resource?.name === resource.name}
                         button
                         on:click={() => select('resource', resource)}>
-                        {resource}
+                        {resource.name}
                     </Pill>
                 {/each}
             </div>
@@ -319,10 +249,10 @@
                 {#each available.actions as action}
                     <Pill
                         disabled={showInput}
-                        selected={selected.action === action}
+                        selected={selected.action?.name === action.name}
                         button
                         on:click={() => select('action', action)}>
-                        {action}
+                        {action.name}
                     </Pill>
                 {/each}
             </div>
@@ -345,9 +275,7 @@
             </div>
         </div>
     {/if}
-    <div>
-        {JSON.stringify(selected, null, 2)}
-    </div>
+
     {#if showInput}
         <div class="input-text-wrapper" style="--amount-of-buttons:2">
             <input type="text" placeholder="Enter custom event" bind:value={inputData} />
@@ -372,24 +300,20 @@
             </div>
         </div>
     {:else}
-        <div class="input-text-wrapper" style="--amount-of-buttons:2">
+        <div class="input-text-wrapper" style="--amount-of-buttons:2" bind:this={copyParent}>
             <div type="text" readonly style="min-height: 2.5rem;">
                 {#if inputData}
                     <span>{inputData}</span>
                 {:else}
-                    {#each Array.from(eventString.values()) as route, i}
-                        <button
+                    {#each eventString as route, i}
+                        <span
                             class:u-opacity-0-5={helper !== route.description}
-                            on:mouseenter={() => {
-                                helper = route.description;
-                            }}
-                            on:mouseleave={() => {
-                                helper = null;
-                            }}>
+                            on:mouseenter={() => (helper = route.description)}
+                            on:mouseleave={() => (helper = null)}>
                             {route.value}
-                        </button>
+                        </span>
                         <span class="u-opacity-0-5">
-                            {i + 1 < eventString?.size ? '.' : ''}
+                            {i + 1 < eventString?.length ? '.' : ''}
                         </span>
                     {/each}
                 {/if}
@@ -405,9 +329,11 @@
                     <span class="icon-pencil" aria-hidden="true" />
                 </button>
                 <button disabled={!copyValue} class="options-list-button" aria-label="copy text">
-                    <Copy value={copyValue}>
-                        <span class="icon-duplicate" aria-hidden="true" />
-                    </Copy>
+                    {#key copyParent}
+                        <Copy value={copyValue} appendTo={copyParent}>
+                            <span class="icon-duplicate" aria-hidden="true" />
+                        </Copy>
+                    {/key}
                 </button>
             </div>
             <p style="height: 2rem;">{helper ?? ''}</p>

From 0e5e1132ec0acaeb2295ab14690260da5dbc9c93 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 14 Dec 2022 16:17:06 +0000
Subject: [PATCH 03/16] fix: eventModal wrong event string

---
 src/lib/components/eventModal.svelte | 30 ++++++++++++++++++----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index e3c0e1dbce..51553ecd7d 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -72,14 +72,14 @@
             resources: [
                 {
                     name: 'memberships',
-                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+                    actions: [
+                        { name: 'create' },
+                        { name: 'update', attributes: ['status'] },
+                        { name: 'delete' }
+                    ]
                 }
             ],
-            actions: [
-                { name: 'create' },
-                { name: 'update', attributes: ['status'] },
-                { name: 'delete' }
-            ]
+            actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
         },
         {
             name: 'users',
@@ -114,6 +114,7 @@
         } else {
             selected[field as any] = (selected[field] as any)?.name === value.name ? null : value;
         }
+        console.log(field, value, selected);
 
         switch (field) {
             case 'service': {
@@ -127,11 +128,18 @@
                     ? selected.resource?.actions
                     : selected.service?.actions;
 
-                if (!availableActions.map((a) => a.name).includes(selected.action?.name)) {
+                const resourceAction = availableActions.find(
+                    (a) => a.name === selected.action?.name
+                );
+                if (!resourceAction) {
                     selected.action = null;
                     selected.attribute = null;
-                } else if (!selected?.action?.attributes.includes(selected.attribute)) {
-                    selected.attribute = null;
+                } else {
+                    selected.action = resourceAction;
+                    console.log(selected.action);
+                    if (!selected?.action?.attributes?.includes(selected.attribute)) {
+                        selected.attribute = null;
+                    }
                 }
                 break;
             }
@@ -185,9 +193,9 @@
             data.push({ value: selected.action.name, description: 'action' });
         }
 
-        if (selected.attribute && !selected.resource) {
+        if (selected.attribute) {
             data.push({ value: selected.attribute, description: 'attribute' });
-        } else if (selected.action?.attributes && !selected.resource) {
+        } else if (selected.action?.attributes) {
             data.push({ value: '*', description: `attribute` });
         }
         return data;

From 27923ca26466323792f14ec936d31a1eaa4c4ff0 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 14 Dec 2022 16:19:38 +0000
Subject: [PATCH 04/16] refactor: code documentation

---
 src/lib/components/eventModal.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 51553ecd7d..98d90c5734 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -128,14 +128,18 @@
                     ? selected.resource?.actions
                     : selected.service?.actions;
 
-                const resourceAction = availableActions.find(
+                // We need to check if the selected action is still
+                // on the available list, and if so, change it to the
+                // new one, as it may contain different attributes
+                const availableAction = availableActions.find(
                     (a) => a.name === selected.action?.name
                 );
-                if (!resourceAction) {
+
+                if (!availableAction) {
                     selected.action = null;
                     selected.attribute = null;
                 } else {
-                    selected.action = resourceAction;
+                    selected.action = availableAction;
                     console.log(selected.action);
                     if (!selected?.action?.attributes?.includes(selected.attribute)) {
                         selected.attribute = null;

From b83526f39191bd84f8478f66ac1cfcdf67e8226b Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 14 Dec 2022 17:41:45 +0000
Subject: [PATCH 05/16] feat: show eventString on custom inputs

---
 src/lib/components/eventModal.svelte | 134 +++++++++++++++++----------
 1 file changed, 84 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 98d90c5734..5c4cc80245 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -101,7 +101,7 @@
 
     function create() {
         show = false;
-        dispatch('created', copyValue);
+        dispatch('created', inputValue);
     }
 
     function select(field: 'service', value: Service);
@@ -114,7 +114,7 @@
         } else {
             selected[field as any] = (selected[field] as any)?.name === value.name ? null : value;
         }
-        console.log(field, value, selected);
+        customInput = null;
 
         switch (field) {
             case 'service': {
@@ -162,7 +162,7 @@
         attribute: null as string | null
     };
     let helper: string = null;
-    let inputData: string = null;
+    let customInput: string = null;
     let showInput = false;
     let copyParent: HTMLElement;
 
@@ -173,39 +173,78 @@
         attributes: selected.action?.attributes || []
     };
 
-    $: eventString = (function createEventString() {
-        const data: Array<{ value: string; description: string }> = [];
+    // Event string helpers
+    const serviceNames = services.map((s) => s.name);
+    const isService = (s: string) => serviceNames.includes(s);
+    const resourceNames = services.flatMap((s) => s.resources.map((r) => r.name));
+    const isResource = (s: string) => resourceNames.includes(s);
+    const actionNames = [
+        ...services.flatMap((s) => s.actions.map((a) => a.name)),
+        ...services.flatMap((s) => s.resources.flatMap((r) => r.actions.map((a) => a.name)))
+    ];
+    const isAction = (s: string) => actionNames.includes(s);
+    const attributeNames = [
+        ...services.flatMap((s) => s.actions.flatMap((a) => a.attributes ?? [])),
+        ...services.flatMap((s) =>
+            s.resources.flatMap((r) => r.actions.flatMap((a) => a.attributes ?? []))
+        )
+    ];
+    const isAttribute = (s: string) => attributeNames.includes(s);
+    const isField = (s: string) => isService(s) || isResource(s) || isAction(s) || isAttribute(s);
 
-        if (selected.service) {
-            data.push({ value: selected.service?.name, description: 'service' });
-            data.push({ value: '*', description: `ID of ${selected.service?.name.slice(0, -1)}` });
-        }
+    $: eventString = (function createEventString(): Array<{ value: string; description: string }> {
+        let fields: string[] = [];
 
-        if (selected.resource) {
-            if (selected.resource.name === 'documents') {
-                data.push({ value: 'collections', description: 'resource' });
-                data.push({ value: '*', description: `ID of collection` });
-                data.push({ value: selected.resource.name, description: 'secondary resource' });
-            } else {
-                data.push({ value: selected.resource.name, description: 'resource' });
-            }
+        // Avoid calculating the event string if the user is typing, as it is not shown
+        if (showInput) return [];
 
-            data.push({ value: '*', description: `ID of ${selected.resource.name.slice(0, -1)}` });
+        if (customInput) {
+            fields = customInput.split('.');
+        } else {
+            if (selected.service) {
+                fields.push(selected.service.name, '*');
+            }
+            if (selected.resource?.name === 'documents') {
+                fields.push('collections', '*');
+            }
+            if (selected.resource) {
+                fields.push(selected.resource.name, '*');
+            }
+            if (selected.action) {
+                fields.push(selected.action.name);
+            }
+            if (selected.attribute) {
+                fields.push(selected.attribute);
+            } else if (selected.action?.attributes) {
+                fields.push('*');
+            }
         }
 
-        if (selected.action) {
-            data.push({ value: selected.action.name, description: 'action' });
-        }
+        return fields.map((value, i, arr) => {
+            let description = value;
 
-        if (selected.attribute) {
-            data.push({ value: selected.attribute, description: 'attribute' });
-        } else if (selected.action?.attributes) {
-            data.push({ value: '*', description: `attribute` });
-        }
-        return data;
+            if (isService(value)) {
+                description = 'service';
+            } else if (isResource(value)) {
+                description = 'resource';
+            } else if (isAction(value)) {
+                description = 'action';
+            } else if (isAttribute(value)) {
+                description = 'attribute';
+            } else if (i > 0) {
+                const prev = arr[i - 1];
+                if (isAction(prev)) {
+                    description = 'attribute';
+                } else if (isField(prev)) {
+                    description = `ID of ${prev.slice(0, -1)}`;
+                }
+            }
+
+            return { value, description };
+        });
     })();
 
-    $: copyValue = inputData ?? eventString.map((d) => d.value).join('.');
+    $: inputValue = eventString.map((d) => d.value).join('.');
 
     $: if (!showInput) {
         helper = null;
@@ -214,7 +253,7 @@
     $: if (!show) {
         Object.keys(selected).forEach((key) => (selected[key] = null));
         helper = null;
-        inputData = null;
+        customInput = null;
         showInput = false;
     }
 </script>
@@ -290,7 +329,7 @@
 
     {#if showInput}
         <div class="input-text-wrapper" style="--amount-of-buttons:2">
-            <input type="text" placeholder="Enter custom event" bind:value={inputData} />
+            <input type="text" placeholder="Enter custom event" bind:value={customInput} />
             <div class="options-list">
                 <button
                     on:click|preventDefault={() => {
@@ -302,7 +341,6 @@
                 </button>
                 <button
                     on:click|preventDefault={() => {
-                        inputData = null;
                         showInput = false;
                     }}
                     class="options-list-button"
@@ -314,35 +352,31 @@
     {:else}
         <div class="input-text-wrapper" style="--amount-of-buttons:2" bind:this={copyParent}>
             <div type="text" readonly style="min-height: 2.5rem;">
-                {#if inputData}
-                    <span>{inputData}</span>
-                {:else}
-                    {#each eventString as route, i}
-                        <span
-                            class:u-opacity-0-5={helper !== route.description}
-                            on:mouseenter={() => (helper = route.description)}
-                            on:mouseleave={() => (helper = null)}>
-                            {route.value}
-                        </span>
-                        <span class="u-opacity-0-5">
-                            {i + 1 < eventString?.length ? '.' : ''}
-                        </span>
-                    {/each}
-                {/if}
+                {#each eventString as route, i}
+                    <span
+                        class:u-opacity-0-5={helper !== route.description}
+                        on:mouseenter={() => (helper = route.description)}
+                        on:mouseleave={() => (helper = null)}>
+                        {route.value}
+                    </span>
+                    <span class="u-opacity-0-5">
+                        {i + 1 < eventString?.length ? '.' : ''}
+                    </span>
+                {/each}
             </div>
             <div class="options-list">
                 <button
                     on:click|preventDefault={() => {
-                        inputData = copyValue;
+                        customInput = inputValue;
                         showInput = true;
                     }}
                     class="options-list-button"
                     aria-label="edit event">
                     <span class="icon-pencil" aria-hidden="true" />
                 </button>
-                <button disabled={!copyValue} class="options-list-button" aria-label="copy text">
+                <button disabled={!inputValue} class="options-list-button" aria-label="copy text">
                     {#key copyParent}
-                        <Copy value={copyValue} appendTo={copyParent}>
+                        <Copy value={inputValue} appendTo={copyParent}>
                             <span class="icon-duplicate" aria-hidden="true" />
                         </Copy>
                     {/key}
@@ -354,6 +388,6 @@
 
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
-        <Button disabled={showInput || !copyValue} submit>Create</Button>
+        <Button disabled={showInput || !inputValue} submit>Create</Button>
     </svelte:fragment>
 </Modal>

From 107a3e3150525b8b30cb1dc54466c0dd3e41db8d Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 14 Dec 2022 18:04:29 +0000
Subject: [PATCH 06/16] refactor: code organization

---
 src/lib/components/eventModal.svelte | 54 ++++++++++++++--------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 5c4cc80245..b91ba051c6 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -154,35 +154,19 @@
         }
     }
 
-    // State & Reactive Declarations
-    let selected = {
-        service: null as Service | null,
-        resource: null as Resource | null,
-        action: null as Action | null,
-        attribute: null as string | null
-    };
-    let helper: string = null;
-    let customInput: string = null;
-    let showInput = false;
-    let copyParent: HTMLElement;
-
-    $: available = {
-        services: services,
-        resources: selected.service?.resources || [],
-        actions: (selected.resource ? selected.resource?.actions : selected.service?.actions) || [],
-        attributes: selected.action?.attributes || []
-    };
-
     // Event string helpers
     const serviceNames = services.map((s) => s.name);
     const isService = (s: string) => serviceNames.includes(s);
+
     const resourceNames = services.flatMap((s) => s.resources.map((r) => r.name));
     const isResource = (s: string) => resourceNames.includes(s);
+
     const actionNames = [
         ...services.flatMap((s) => s.actions.map((a) => a.name)),
         ...services.flatMap((s) => s.resources.flatMap((r) => r.actions.map((a) => a.name)))
     ];
     const isAction = (s: string) => actionNames.includes(s);
+
     const attributeNames = [
         ...services.flatMap((s) => s.actions.flatMap((a) => a.attributes ?? [])),
         ...services.flatMap((s) =>
@@ -190,8 +174,28 @@
         )
     ];
     const isAttribute = (s: string) => attributeNames.includes(s);
+
     const isField = (s: string) => isService(s) || isResource(s) || isAction(s) || isAttribute(s);
 
+    // State & Reactive Declarations
+    let selected = {
+        service: null as Service | null,
+        resource: null as Resource | null,
+        action: null as Action | null,
+        attribute: null as string | null
+    };
+    let helper: string = null;
+    let customInput: string = null;
+    let showInput = false;
+    let copyParent: HTMLElement;
+
+    $: available = {
+        services: services,
+        resources: selected.service?.resources || [],
+        actions: (selected.resource ? selected.resource?.actions : selected.service?.actions) || [],
+        attributes: selected.action?.attributes || []
+    };
+
     $: eventString = (function createEventString(): Array<{ value: string; description: string }> {
         let fields: string[] = [];
 
@@ -221,6 +225,7 @@
         }
 
         return fields.map((value, i, arr) => {
+            const prev = arr[i - 1];
             let description = value;
 
             if (isService(value)) {
@@ -229,15 +234,10 @@
                 description = 'resource';
             } else if (isAction(value)) {
                 description = 'action';
-            } else if (isAttribute(value)) {
+            } else if (isAttribute(value) || isAction(prev)) {
                 description = 'attribute';
-            } else if (i > 0) {
-                const prev = arr[i - 1];
-                if (isAction(prev)) {
-                    description = 'attribute';
-                } else if (isField(prev)) {
-                    description = `ID of ${prev.slice(0, -1)}`;
-                }
+            } else if (isField(prev)) {
+                description = `ID of ${prev.slice(0, -1)}`;
             }
 
             return { value, description };

From df29f3e28f2b07d01e1a46674bb60f8197dee1a9 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 14 Dec 2022 18:57:47 +0000
Subject: [PATCH 07/16] feat: custom input helper

---
 src/lib/components/eventModal.svelte | 79 +++++++++++++++++++++-------
 src/lib/helpers/array.ts             | 34 ++++++++++++
 2 files changed, 94 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index b91ba051c6..3686b8fad5 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -3,7 +3,7 @@
     import { Modal } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { createEventDispatcher } from 'svelte';
-    import { empty } from '$lib/helpers/array';
+    import { at, empty, last } from '$lib/helpers/array';
     import Copy from './copy.svelte';
 
     // Props
@@ -154,6 +154,56 @@
         }
     }
 
+    function resetSelected() {
+        Object.keys(selected).forEach((key) => (selected[key] = null));
+    }
+
+    function toggleShowInput(e?: Event) {
+        e?.preventDefault();
+
+        showInput = !showInput;
+        if (showInput) return;
+
+        helper = null;
+
+        resetSelected();
+
+        for (const field of customInput.split('.')) {
+            if (isService(field)) {
+                selected.service = services.find((s) => s.name === field);
+            } else if (isResource(field)) {
+                const resource = selected.service?.resources.find((r) => r.name === field);
+                selected.resource = resource;
+            } else if (isAction(field)) {
+                const action =
+                    selected.resource?.actions.find((a) => a.name === field) ||
+                    selected.service?.actions.find((a) => a.name === field);
+                selected.action = action;
+            } else if (isAttribute(field)) {
+                const attribute = selected.action?.attributes?.find((a) => a === field);
+                selected.attribute = attribute;
+            }
+        }
+    }
+
+    function getHelperStr(input: string): string {
+        const fields = input.split('.');
+        const secondToLastField = at(fields, -3);
+        const prevField = at(fields, -2);
+        const currField = last(fields);
+
+        if (fields.length === 1) return 'service';
+        if (isAttribute(currField) || isAction(prevField)) return 'attribute';
+        if (isAction(currField)) return 'action';
+        if (isResource(currField)) return 'resource';
+        if (isService(currField)) return 'service';
+        if (isService(prevField) || isResource(prevField)) return `ID of ${prevField}`;
+        if (isService(secondToLastField)) return 'resource or action';
+        if (isResource(secondToLastField)) return 'action';
+
+        return '';
+    }
+
     // Event string helpers
     const serviceNames = services.map((s) => s.name);
     const isService = (s: string) => serviceNames.includes(s);
@@ -246,16 +296,16 @@
 
     $: inputValue = eventString.map((d) => d.value).join('.');
 
-    $: if (!showInput) {
-        helper = null;
-    }
-
     $: if (!show) {
-        Object.keys(selected).forEach((key) => (selected[key] = null));
+        resetSelected();
         helper = null;
         customInput = null;
         showInput = false;
     }
+
+    $: if (showInput) {
+        helper = getHelperStr(customInput);
+    }
 </script>
 
 <Modal bind:show on:submit={create} size="big">
@@ -331,23 +381,14 @@
         <div class="input-text-wrapper" style="--amount-of-buttons:2">
             <input type="text" placeholder="Enter custom event" bind:value={customInput} />
             <div class="options-list">
-                <button
-                    on:click|preventDefault={() => {
-                        showInput = false;
-                    }}
-                    class="options-list-button"
-                    aria-label="confirm">
+                <button on:click={toggleShowInput} class="options-list-button" aria-label="confirm">
                     <span class="icon-check" aria-hidden="true" />
                 </button>
-                <button
-                    on:click|preventDefault={() => {
-                        showInput = false;
-                    }}
-                    class="options-list-button"
-                    aria-label="cancel">
+                <button on:click={toggleShowInput} class="options-list-button" aria-label="cancel">
                     <span class="icon-x" aria-hidden="true" />
                 </button>
             </div>
+            <p style="height: 2rem;">{helper ?? ''}</p>
         </div>
     {:else}
         <div class="input-text-wrapper" style="--amount-of-buttons:2" bind:this={copyParent}>
@@ -368,7 +409,7 @@
                 <button
                     on:click|preventDefault={() => {
                         customInput = inputValue;
-                        showInput = true;
+                        toggleShowInput();
                     }}
                     class="options-list-button"
                     aria-label="edit event">
diff --git a/src/lib/helpers/array.ts b/src/lib/helpers/array.ts
index 3556be5a72..67a50a180b 100644
--- a/src/lib/helpers/array.ts
+++ b/src/lib/helpers/array.ts
@@ -39,3 +39,37 @@ export function empty(arr: unknown[]): boolean {
     if (!arr) return true;
     return arr.length === 0;
 }
+
+/**
+ * Get nth item of Array. Negative for backward
+ *
+ * @export
+ * @template T
+ * @param {(readonly T[] | [])} array
+ * @param {number} index
+ * @returns {(T | undefined)}
+ */
+export function at(array: readonly [], index: number): undefined;
+export function at<T>(array: readonly T[], index: number): T;
+export function at<T>(array: readonly T[] | [], index: number): T | undefined {
+    const len = array.length;
+    if (!len) return undefined;
+
+    if (index < 0) index += len;
+
+    return array[index];
+}
+
+/**
+ * Get last item
+ *
+ * @export
+ * @template T
+ * @param {readonly T[]} array
+ * @returns {(T | undefined)}
+ */
+export function last(array: readonly []): undefined;
+export function last<T>(array: readonly T[]): T;
+export function last<T>(array: readonly T[]): T | undefined {
+    return at(array, -1);
+}

From cdcd79c0fd0744520de817b458d3092b96583b64 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 14 Dec 2022 22:41:44 +0000
Subject: [PATCH 08/16] feat: eventModal customInput cursor helper

---
 src/lib/actions/selectionStart.ts    | 28 ++++++++++++++++++++
 src/lib/components/eventModal.svelte | 38 +++++++++++++++++++++++-----
 2 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/actions/selectionStart.ts

diff --git a/src/lib/actions/selectionStart.ts b/src/lib/actions/selectionStart.ts
new file mode 100644
index 0000000000..bd42999279
--- /dev/null
+++ b/src/lib/actions/selectionStart.ts
@@ -0,0 +1,28 @@
+import type { Action } from 'svelte/action';
+
+type Props = {
+    onChange: (selectionStart: number) => void;
+};
+
+export const selectionStart: Action<HTMLInputElement, Props> = (node, { onChange }) => {
+    const handler = () => {
+        onChange(node.selectionStart);
+    };
+    node.addEventListener('click', handler);
+    node.addEventListener('keydown', handler);
+    node.addEventListener('keyup', handler);
+
+    return {
+        update({ onChange }) {
+            const handler = () => {
+                onChange(node.selectionStart);
+            };
+            node.addEventListener('click', handler);
+            node.addEventListener('keydown', handler);
+            node.addEventListener('keyup', handler);
+        },
+        destroy() {
+            onChange(-1);
+        }
+    };
+};
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 3686b8fad5..8f01d32e58 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -3,8 +3,9 @@
     import { Modal } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { createEventDispatcher } from 'svelte';
-    import { at, empty, last } from '$lib/helpers/array';
+    import { at, empty } from '$lib/helpers/array';
     import Copy from './copy.svelte';
+    import { selectionStart } from '$lib/actions/selectionStart';
 
     // Props
     export let show = false;
@@ -186,11 +187,28 @@
         }
     }
 
-    function getHelperStr(input: string): string {
+    function getHelperStr(input: string, selectionStart?: number): string {
         const fields = input.split('.');
-        const secondToLastField = at(fields, -3);
-        const prevField = at(fields, -2);
-        const currField = last(fields);
+        let fieldIndex = -1;
+
+        if (selectionStart > -1) {
+            let currentIndex = 0;
+            let arrayIndex = 0;
+
+            for (const item of fields) {
+                currentIndex += item.length + 1;
+                if (currentIndex > selectionStart) {
+                    fieldIndex = arrayIndex;
+                    break;
+                }
+                arrayIndex++;
+            }
+        }
+        console.log(selectionStart, fieldIndex);
+
+        const currField = at(fields, fieldIndex);
+        const prevField = at(fields, fieldIndex - 1);
+        const secondToLastField = at(fields, fieldIndex - 2);
 
         if (fields.length === 1) return 'service';
         if (isAttribute(currField) || isAction(prevField)) return 'attribute';
@@ -304,8 +322,10 @@
     }
 
     $: if (showInput) {
-        helper = getHelperStr(customInput);
+        helper = getHelperStr(customInput, customInputCursor);
     }
+
+    let customInputCursor = -1;
 </script>
 
 <Modal bind:show on:submit={create} size="big">
@@ -379,7 +399,11 @@
 
     {#if showInput}
         <div class="input-text-wrapper" style="--amount-of-buttons:2">
-            <input type="text" placeholder="Enter custom event" bind:value={customInput} />
+            <input
+                type="text"
+                placeholder="Enter custom event"
+                bind:value={customInput}
+                use:selectionStart={{ onChange: (newValue) => (customInputCursor = newValue) }} />
             <div class="options-list">
                 <button on:click={toggleShowInput} class="options-list-button" aria-label="confirm">
                     <span class="icon-check" aria-hidden="true" />

From 6718168594d2287a7ba85444ee7fdd9e62c903bc Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 14 Dec 2022 23:00:57 +0000
Subject: [PATCH 09/16] refactor: eventModal code organization

---
 src/lib/components/eventModal.svelte | 112 +++++++++++----------------
 src/lib/helpers/string.ts            |  11 +++
 2 files changed, 56 insertions(+), 67 deletions(-)
 create mode 100644 src/lib/helpers/string.ts

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 8f01d32e58..0683a3d164 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -6,6 +6,7 @@
     import { at, empty } from '$lib/helpers/array';
     import Copy from './copy.svelte';
     import { selectionStart } from '$lib/actions/selectionStart';
+    import { singular } from '$lib/helpers/string';
 
     // Props
     export let show = false;
@@ -27,8 +28,6 @@
         attributes?: string[];
     };
 
-    type FieldType = 'service' | 'resource' | 'action' | 'attribute';
-
     const services: Array<Service> = [
         {
             name: 'buckets',
@@ -97,7 +96,25 @@
         }
     ];
 
+    const serviceNames = services.map((s) => s.name);
+    const resourceNames = services.flatMap((s) => s.resources.map((r) => r.name));
+    const actionNames = [
+        ...services.flatMap((s) => s.actions.map((a) => a.name)),
+        ...services.flatMap((s) => s.resources.flatMap((r) => r.actions.map((a) => a.name)))
+    ];
+    const attributeNames = [
+        ...services.flatMap((s) => s.actions.flatMap((a) => a.attributes ?? [])),
+        ...services.flatMap((s) =>
+            s.resources.flatMap((r) => r.actions.flatMap((a) => a.attributes ?? []))
+        )
+    ];
+
     // Helpers
+    const isService = (s: string) => serviceNames.includes(s);
+    const isResource = (s: string) => resourceNames.includes(s);
+    const isAction = (s: string) => actionNames.includes(s);
+    const isAttribute = (s: string) => attributeNames.includes(s);
+
     const dispatch = createEventDispatcher();
 
     function create() {
@@ -109,12 +126,13 @@
     function select(field: 'resource', value: Resource);
     function select(field: 'action', value: Action);
     function select(field: 'attribute', value: string);
-    function select(field: FieldType, value: string | Service | Resource | Action) {
+    function select(field: string, value: string | Service | Resource | Action) {
         if (typeof value === 'string') {
             selected[field as 'attribute'] = selected[field] === value ? null : value;
         } else {
             selected[field as any] = (selected[field] as any)?.name === value.name ? null : value;
         }
+
         customInput = null;
 
         switch (field) {
@@ -129,9 +147,9 @@
                     ? selected.resource?.actions
                     : selected.service?.actions;
 
-                // We need to check if the selected action is still
-                // on the available list, and if so, change it to the
-                // new one, as it may contain different attributes
+                // We need to check if the selected action name is still
+                // on the available list, and if so, change tje action to the
+                // appropriate one, as it may contain different attributes
                 const availableAction = availableActions.find(
                     (a) => a.name === selected.action?.name
                 );
@@ -166,7 +184,6 @@
         if (showInput) return;
 
         helper = null;
-
         resetSelected();
 
         for (const field of customInput.split('.')) {
@@ -187,7 +204,23 @@
         }
     }
 
-    function getHelperStr(input: string, selectionStart?: number): string {
+    function getHelperStr(fields: string[], index: number) {
+        const currField = at(fields, index);
+        const prevField = at(fields, index - 1);
+        const secondToLastField = at(fields, index - 2);
+
+        if (fields.length === 1 || isService(currField)) return 'service';
+        if (isAttribute(currField) || isAction(prevField)) return 'attribute';
+        if (isAction(currField)) return 'action';
+        if (isResource(currField)) return 'resource';
+        if (isService(prevField) || isResource(prevField)) return `ID of ${singular(prevField)}`;
+        if (isService(secondToLastField)) return 'resource or action';
+        if (isResource(secondToLastField)) return 'action';
+
+        return '';
+    }
+
+    function getCustomInputHelperStr(input: string, selectionStart?: number): string {
         const fields = input.split('.');
         let fieldIndex = -1;
 
@@ -204,47 +237,10 @@
                 arrayIndex++;
             }
         }
-        console.log(selectionStart, fieldIndex);
 
-        const currField = at(fields, fieldIndex);
-        const prevField = at(fields, fieldIndex - 1);
-        const secondToLastField = at(fields, fieldIndex - 2);
-
-        if (fields.length === 1) return 'service';
-        if (isAttribute(currField) || isAction(prevField)) return 'attribute';
-        if (isAction(currField)) return 'action';
-        if (isResource(currField)) return 'resource';
-        if (isService(currField)) return 'service';
-        if (isService(prevField) || isResource(prevField)) return `ID of ${prevField}`;
-        if (isService(secondToLastField)) return 'resource or action';
-        if (isResource(secondToLastField)) return 'action';
-
-        return '';
+        return getHelperStr(fields, fieldIndex);
     }
 
-    // Event string helpers
-    const serviceNames = services.map((s) => s.name);
-    const isService = (s: string) => serviceNames.includes(s);
-
-    const resourceNames = services.flatMap((s) => s.resources.map((r) => r.name));
-    const isResource = (s: string) => resourceNames.includes(s);
-
-    const actionNames = [
-        ...services.flatMap((s) => s.actions.map((a) => a.name)),
-        ...services.flatMap((s) => s.resources.flatMap((r) => r.actions.map((a) => a.name)))
-    ];
-    const isAction = (s: string) => actionNames.includes(s);
-
-    const attributeNames = [
-        ...services.flatMap((s) => s.actions.flatMap((a) => a.attributes ?? [])),
-        ...services.flatMap((s) =>
-            s.resources.flatMap((r) => r.actions.flatMap((a) => a.attributes ?? []))
-        )
-    ];
-    const isAttribute = (s: string) => attributeNames.includes(s);
-
-    const isField = (s: string) => isService(s) || isResource(s) || isAction(s) || isAttribute(s);
-
     // State & Reactive Declarations
     let selected = {
         service: null as Service | null,
@@ -254,6 +250,7 @@
     };
     let helper: string = null;
     let customInput: string = null;
+    let customInputCursor = -1;
     let showInput = false;
     let copyParent: HTMLElement;
 
@@ -292,24 +289,7 @@
             }
         }
 
-        return fields.map((value, i, arr) => {
-            const prev = arr[i - 1];
-            let description = value;
-
-            if (isService(value)) {
-                description = 'service';
-            } else if (isResource(value)) {
-                description = 'resource';
-            } else if (isAction(value)) {
-                description = 'action';
-            } else if (isAttribute(value) || isAction(prev)) {
-                description = 'attribute';
-            } else if (isField(prev)) {
-                description = `ID of ${prev.slice(0, -1)}`;
-            }
-
-            return { value, description };
-        });
+        return fields.map((value, i, arr) => ({ value, description: getHelperStr(arr, i) }));
     })();
 
     $: inputValue = eventString.map((d) => d.value).join('.');
@@ -322,10 +302,8 @@
     }
 
     $: if (showInput) {
-        helper = getHelperStr(customInput, customInputCursor);
+        helper = getCustomInputHelperStr(customInput, customInputCursor);
     }
-
-    let customInputCursor = -1;
 </script>
 
 <Modal bind:show on:submit={create} size="big">
diff --git a/src/lib/helpers/string.ts b/src/lib/helpers/string.ts
new file mode 100644
index 0000000000..564b286091
--- /dev/null
+++ b/src/lib/helpers/string.ts
@@ -0,0 +1,11 @@
+/**
+ * Given a string, returns the singular version of it,
+ * by removing the trailing 's'.
+ *
+ * @export
+ * @param {string} str
+ * @returns {string}
+ */
+export function singular(str: string): string {
+    return str.replace(/s$/, '');
+}

From a8c69f22a134914597ffe64edf0bb5cc01b3a31d Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 14 Dec 2022 23:03:29 +0000
Subject: [PATCH 10/16] chore: remove console log

---
 src/lib/components/eventModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 0683a3d164..3c5368cb85 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -159,7 +159,7 @@
                     selected.attribute = null;
                 } else {
                     selected.action = availableAction;
-                    console.log(selected.action);
+
                     if (!selected?.action?.attributes?.includes(selected.attribute)) {
                         selected.attribute = null;
                     }

From 20297da4af4417ad935970065ad8aae2d762ec3e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 14 Dec 2022 23:25:26 +0000
Subject: [PATCH 11/16] feat: allow event editing

---
 src/lib/components/eventModal.svelte          | 37 ++++++++++-----
 .../function-[function]/settings/+page.svelte | 47 ++++++++++++++-----
 2 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 3c5368cb85..46902b663c 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -10,6 +10,7 @@
 
     // Props
     export let show = false;
+    export let initialValue = '';
 
     // Types & Constants
     type Service = {
@@ -177,15 +178,8 @@
         Object.keys(selected).forEach((key) => (selected[key] = null));
     }
 
-    function toggleShowInput(e?: Event) {
-        e?.preventDefault();
-
-        showInput = !showInput;
-        if (showInput) return;
-
-        helper = null;
+    function inferSelectedFromCustomInput() {
         resetSelected();
-
         for (const field of customInput.split('.')) {
             if (isService(field)) {
                 selected.service = services.find((s) => s.name === field);
@@ -204,17 +198,29 @@
         }
     }
 
+    function toggleShowInput(e?: Event) {
+        e?.preventDefault();
+
+        showInput = !showInput;
+        if (showInput) return;
+
+        helper = null;
+        inferSelectedFromCustomInput();
+    }
+
     function getHelperStr(fields: string[], index: number) {
         const currField = at(fields, index);
         const prevField = at(fields, index - 1);
         const secondToLastField = at(fields, index - 2);
 
-        if (fields.length === 1 || isService(currField)) return 'service';
+        if (index === 0 || isService(currField)) return 'service';
         if (isAttribute(currField) || isAction(prevField)) return 'attribute';
         if (isAction(currField)) return 'action';
         if (isResource(currField)) return 'resource';
-        if (isService(prevField) || isResource(prevField)) return `ID of ${singular(prevField)}`;
-        if (isService(secondToLastField)) return 'resource or action';
+        if (isService(prevField) || isResource(prevField) || index === 1) {
+            return `ID of ${singular(prevField)}`;
+        }
+        if (isService(secondToLastField) || index === 2) return 'resource or action';
         if (isResource(secondToLastField)) return 'action';
 
         return '';
@@ -254,6 +260,11 @@
     let showInput = false;
     let copyParent: HTMLElement;
 
+    $: if (show && initialValue) {
+        customInput = initialValue;
+        inferSelectedFromCustomInput();
+    }
+
     $: available = {
         services: services,
         resources: selected.service?.resources || [],
@@ -266,7 +277,6 @@
 
         // Avoid calculating the event string if the user is typing, as it is not shown
         if (showInput) return [];
-
         if (customInput) {
             fields = customInput.split('.');
         } else {
@@ -431,6 +441,7 @@
 
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
-        <Button disabled={showInput || !inputValue} submit>Create</Button>
+        <Button disabled={showInput || !inputValue} submit
+            >{initialValue ? 'Update' : 'Create'}</Button>
     </svelte:fragment>
 </Modal>
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 9313c97a00..ab6af3c11f 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
@@ -50,6 +50,10 @@
 
     const eventSet: Writable<Set<string>> = writable(new Set());
     let showEvents = false;
+    let eventValue: string;
+    $: if (!showEvents) {
+        eventValue = undefined;
+    }
     let areEventsDisabled = true;
 
     onMount(async () => {
@@ -271,7 +275,15 @@
     }
 
     function handleEvent(event: CustomEvent) {
-        eventSet.set($eventSet.add(event.detail));
+        if (eventValue) {
+            const newSet = new Set(
+                [...$eventSet].map((e) => (e === eventValue ? event.detail : e))
+            );
+            eventSet.set(newSet);
+        } else {
+            eventSet.set($eventSet.add(event.detail));
+        }
+        eventValue = null;
     }
 
     $: if (permissions) {
@@ -370,16 +382,27 @@
                                 <TableCellText title="id">
                                     {event}
                                 </TableCellText>
-                                <TableCell showOverflow title="options" width={40}>
-                                    <button
-                                        class="button is-text is-only-icon"
-                                        aria-label="delete id"
-                                        on:click|preventDefault={() => {
-                                            $eventSet.delete(event);
-                                            eventSet.set($eventSet);
-                                        }}>
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </button>
+                                <TableCell showOverflow title="options" width={80}>
+                                    <div class="u-flex">
+                                        <button
+                                            class="button is-text is-only-icon"
+                                            aria-label="edit id"
+                                            on:click|preventDefault={() => {
+                                                showEvents = true;
+                                                eventValue = event;
+                                            }}>
+                                            <span class="icon-pencil" aria-hidden="true" />
+                                        </button>
+                                        <button
+                                            class="button is-text is-only-icon"
+                                            aria-label="delete id"
+                                            on:click|preventDefault={() => {
+                                                $eventSet.delete(event);
+                                                eventSet.set($eventSet);
+                                            }}>
+                                            <span class="icon-x" aria-hidden="true" />
+                                        </button>
+                                    </div>
                                 </TableCell>
                             </li>
                         {/each}
@@ -600,4 +623,4 @@
         on:updated={handleVariableUpdated} />
 {/if}
 <!-- <Upload bind:show={showVariablesUpload} on:uploaded={handleVariableCreated} /> -->
-<EventModal bind:show={showEvents} on:created={handleEvent} />
+<EventModal bind:show={showEvents} initialValue={eventValue} on:created={handleEvent} />

From 6e8748095b44646ab90fa79030b29bd9bee74d91 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 15 Dec 2022 13:46:01 +0000
Subject: [PATCH 12/16] refactor: move eventModal constants

---
 src/lib/components/eventModal.svelte | 138 +++++++--------------------
 src/lib/constants.ts                 |  84 ++++++++++++++++
 2 files changed, 117 insertions(+), 105 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 46902b663c..d4207ad9e3 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -7,96 +7,19 @@
     import Copy from './copy.svelte';
     import { selectionStart } from '$lib/actions/selectionStart';
     import { singular } from '$lib/helpers/string';
+    import {
+        eventServices as services,
+        type EventAction,
+        type EventResource,
+        type EventService
+    } from '$lib/constants';
+    import { tooltip } from '$lib/actions/tooltip';
 
     // Props
     export let show = false;
     export let initialValue = '';
 
-    // Types & Constants
-    type Service = {
-        name: string;
-        resources: Resource[];
-        actions?: Action[];
-    };
-
-    type Resource = {
-        name: string;
-        actions?: Action[];
-    };
-
-    type Action = {
-        name: string;
-        attributes?: string[];
-    };
-
-    const services: Array<Service> = [
-        {
-            name: 'buckets',
-            resources: [
-                {
-                    name: 'files',
-                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
-                }
-            ],
-            actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
-        },
-        {
-            name: 'databases',
-            resources: [
-                {
-                    name: 'collections',
-                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
-                },
-                {
-                    name: 'documents',
-                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
-                }
-            ],
-            actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
-        },
-        {
-            name: 'functions',
-            resources: [
-                {
-                    name: 'deployments',
-                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
-                },
-                {
-                    name: 'executions',
-                    actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
-                }
-            ],
-            actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
-        },
-        {
-            name: 'teams',
-            resources: [
-                {
-                    name: 'memberships',
-                    actions: [
-                        { name: 'create' },
-                        { name: 'update', attributes: ['status'] },
-                        { name: 'delete' }
-                    ]
-                }
-            ],
-            actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
-        },
-        {
-            name: 'users',
-            resources: [
-                { name: 'recovery', actions: [{ name: 'create' }, { name: 'delete' }] },
-                { name: 'sessions', actions: [{ name: 'create' }, { name: 'delete' }] },
-                { name: 'verifications', actions: [{ name: 'create' }, { name: 'delete' }] }
-            ],
-            actions: [
-                { name: 'create' },
-                { name: 'update', attributes: ['email', 'name', 'password', 'status', 'prefs'] },
-                { name: 'delete' }
-            ]
-        }
-    ];
-
+    // Constants
     const serviceNames = services.map((s) => s.name);
     const resourceNames = services.flatMap((s) => s.resources.map((r) => r.name));
     const actionNames = [
@@ -123,11 +46,11 @@
         dispatch('created', inputValue);
     }
 
-    function select(field: 'service', value: Service);
-    function select(field: 'resource', value: Resource);
-    function select(field: 'action', value: Action);
+    function select(field: 'service', value: EventService);
+    function select(field: 'resource', value: EventResource);
+    function select(field: 'action', value: EventAction);
     function select(field: 'attribute', value: string);
-    function select(field: string, value: string | Service | Resource | Action) {
+    function select(field: string, value: string | EventService | EventResource | EventAction) {
         if (typeof value === 'string') {
             selected[field as 'attribute'] = selected[field] === value ? null : value;
         } else {
@@ -220,6 +143,7 @@
         if (isService(prevField) || isResource(prevField) || index === 1) {
             return `ID of ${singular(prevField)}`;
         }
+        // TODO: Find better name for 'resource or action'
         if (isService(secondToLastField) || index === 2) return 'resource or action';
         if (isResource(secondToLastField)) return 'action';
 
@@ -249,9 +173,9 @@
 
     // State & Reactive Declarations
     let selected = {
-        service: null as Service | null,
-        resource: null as Resource | null,
-        action: null as Action | null,
+        service: null as EventService | null,
+        resource: null as EventResource | null,
+        action: null as EventAction | null,
         attribute: null as string | null
     };
     let helper: string = null;
@@ -418,22 +342,26 @@
                 {/each}
             </div>
             <div class="options-list">
-                <button
-                    on:click|preventDefault={() => {
-                        customInput = inputValue;
-                        toggleShowInput();
-                    }}
-                    class="options-list-button"
-                    aria-label="edit event">
-                    <span class="icon-pencil" aria-hidden="true" />
-                </button>
-                <button disabled={!inputValue} class="options-list-button" aria-label="copy text">
-                    {#key copyParent}
+                {#key copyParent}
+                    <button
+                        on:click|preventDefault={() => {
+                            customInput = inputValue;
+                            toggleShowInput();
+                        }}
+                        use:tooltip={{ content: 'Edit event', appendTo: copyParent }}
+                        class="options-list-button"
+                        aria-label="edit event">
+                        <span class="icon-pencil" aria-hidden="true" />
+                    </button>
+                    <button
+                        disabled={!inputValue}
+                        class="options-list-button"
+                        aria-label="copy text">
                         <Copy value={inputValue} appendTo={copyParent}>
                             <span class="icon-duplicate" aria-hidden="true" />
                         </Copy>
-                    {/key}
-                </button>
+                    </button>
+                {/key}
             </div>
             <p style="height: 2rem;">{helper ?? ''}</p>
         </div>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 721c3db12a..a27a1c21de 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -174,3 +174,87 @@ export const scopes: {
         category: 'Other'
     }
 ];
+
+export type EventService = {
+    name: string;
+    resources: EventResource[];
+    actions?: EventAction[];
+};
+
+export type EventResource = {
+    name: string;
+    actions?: EventAction[];
+};
+
+export type EventAction = {
+    name: string;
+    attributes?: string[];
+};
+
+export const eventServices: Array<EventService> = [
+    {
+        name: 'buckets',
+        resources: [
+            {
+                name: 'files',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            }
+        ],
+        actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+    },
+    {
+        name: 'databases',
+        resources: [
+            {
+                name: 'collections',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            },
+            {
+                name: 'documents',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            }
+        ],
+        actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+    },
+    {
+        name: 'functions',
+        resources: [
+            {
+                name: 'deployments',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            },
+            {
+                name: 'executions',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            }
+        ],
+        actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+    },
+    {
+        name: 'teams',
+        resources: [
+            {
+                name: 'memberships',
+                actions: [
+                    { name: 'create' },
+                    { name: 'update', attributes: ['status'] },
+                    { name: 'delete' }
+                ]
+            }
+        ],
+        actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+    },
+    {
+        name: 'users',
+        resources: [
+            { name: 'recovery', actions: [{ name: 'create' }, { name: 'delete' }] },
+            { name: 'sessions', actions: [{ name: 'create' }, { name: 'delete' }] },
+            { name: 'verifications', actions: [{ name: 'create' }, { name: 'delete' }] }
+        ],
+        actions: [
+            { name: 'create' },
+            { name: 'update', attributes: ['email', 'name', 'password', 'status', 'prefs'] },
+            { name: 'delete' }
+        ]
+    }
+];

From df3544e1033022c1843d226f0f81120e32a25f0d Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 15 Dec 2022 19:19:52 +0000
Subject: [PATCH 13/16] refactor: separate updateEvents & use droplist for
 event options

---
 .../function-[function]/settings/+page.svelte | 154 ++----------------
 .../settings/updateEvents.svelte              | 144 ++++++++++++++++
 2 files changed, 160 insertions(+), 138 deletions(-)
 create mode 100644 src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte

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 ab6af3c11f..23dea10c9a 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
@@ -1,37 +1,26 @@
 <script lang="ts">
-    import {
-        CardGrid,
-        Box,
-        DropList,
-        DropListItem,
-        Copy,
-        Empty,
-        EventModal
-    } from '$lib/components';
-    import { Container } from '$lib/layout';
-    import { Button, InputNumber, InputText, InputCron, Form, FormList } from '$lib/elements/forms';
+    import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { Box, CardGrid, Copy, DropList, DropListItem } from '$lib/components';
+    import Heading from '$lib/components/heading.svelte';
+    import { Roles } from '$lib/components/permissions';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, FormList, InputCron, InputNumber, InputText } from '$lib/elements/forms';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Container } from '$lib/layout';
     import { app } from '$lib/stores/app';
-    import { execute, func } from '../store';
-    import Delete from './delete.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { onMount } from 'svelte';
     import Variable from '../../createVariable.svelte';
-    // import Upload from './uploadVariables.svelte';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Roles } from '$lib/components/permissions';
-    import { symmetricDifference } from '$lib/helpers/array';
-    import TableList from '$lib/elements/table/tableList.svelte';
-    import { TableCell, TableCellText } from '$lib/elements/table';
-    import Heading from '$lib/components/heading.svelte';
-    import { writable, type Writable } from 'svelte/store';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
+    import { execute, func } from '../store';
     import type { PageData } from './$types';
-    import { trackEvent } from '$lib/actions/analytics';
+    import Delete from './delete.svelte';
+    import UpdateEvents from './updateEvents.svelte';
 
     export let data: PageData;
 
@@ -48,20 +37,11 @@
     let permissions: string[] = [];
     let arePermsDisabled = true;
 
-    const eventSet: Writable<Set<string>> = writable(new Set());
-    let showEvents = false;
-    let eventValue: string;
-    $: if (!showEvents) {
-        eventValue = undefined;
-    }
-    let areEventsDisabled = true;
-
     onMount(async () => {
         timeout ??= $func.timeout;
         functionName ??= $func.name;
         functionSchedule ??= $func.schedule;
         permissions = $func.execute;
-        $eventSet = new Set($func.events);
     });
 
     async function updateName() {
@@ -114,31 +94,6 @@
         }
     }
 
-    async function updateEvents() {
-        try {
-            await sdkForProject.functions.update(
-                functionId,
-                $func.name,
-                $func.execute,
-                Array.from($eventSet),
-                $func.schedule,
-                $func.timeout,
-                $func.enabled
-            );
-            invalidate(Dependencies.FUNCTION);
-            addNotification({
-                message: 'Permissions have been updated',
-                type: 'success'
-            });
-            trackEvent('submit_function_update_events');
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    }
-
     async function updateSchedule() {
         try {
             await sdkForProject.functions.update(
@@ -274,29 +229,11 @@
         }
     }
 
-    function handleEvent(event: CustomEvent) {
-        if (eventValue) {
-            const newSet = new Set(
-                [...$eventSet].map((e) => (e === eventValue ? event.detail : e))
-            );
-            eventSet.set(newSet);
-        } else {
-            eventSet.set($eventSet.add(event.detail));
-        }
-        eventValue = null;
-    }
-
     $: if (permissions) {
         if (symmetricDifference(permissions, $func.execute).length) {
             arePermsDisabled = false;
         } else arePermsDisabled = true;
     }
-
-    $: if ($eventSet) {
-        if (symmetricDifference(Array.from($eventSet), $func.events).length) {
-            areEventsDisabled = false;
-        } else areEventsDisabled = true;
-    }
 </script>
 
 <Container>
@@ -370,60 +307,7 @@
         </CardGrid>
     </Form>
 
-    <Form on:submit={updateEvents}>
-        <CardGrid>
-            <Heading tag="h6" size="7">Update Events</Heading>
-            <p>Set the events that will trigger your function. Maximum 100 events allowed.</p>
-            <svelte:fragment slot="aside">
-                {#if $eventSet.size}
-                    <TableList>
-                        {#each Array.from($eventSet) as event}
-                            <li class="table-row">
-                                <TableCellText title="id">
-                                    {event}
-                                </TableCellText>
-                                <TableCell showOverflow title="options" width={80}>
-                                    <div class="u-flex">
-                                        <button
-                                            class="button is-text is-only-icon"
-                                            aria-label="edit id"
-                                            on:click|preventDefault={() => {
-                                                showEvents = true;
-                                                eventValue = event;
-                                            }}>
-                                            <span class="icon-pencil" aria-hidden="true" />
-                                        </button>
-                                        <button
-                                            class="button is-text is-only-icon"
-                                            aria-label="delete id"
-                                            on:click|preventDefault={() => {
-                                                $eventSet.delete(event);
-                                                eventSet.set($eventSet);
-                                            }}>
-                                            <span class="icon-x" aria-hidden="true" />
-                                        </button>
-                                    </div>
-                                </TableCell>
-                            </li>
-                        {/each}
-                    </TableList>
-
-                    <div class="u-flex u-margin-block-start-16">
-                        <Button text noMargin on:click={() => (showEvents = true)}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="u-text">Add event</span>
-                        </Button>
-                    </div>
-                {:else}
-                    <Empty on:click={() => (showEvents = true)}>Add an event to get started</Empty>
-                {/if}
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button disabled={areEventsDisabled} submit>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-    </Form>
+    <UpdateEvents />
 
     <Form on:submit={updateSchedule}>
         <CardGrid>
@@ -484,10 +368,6 @@
                     <span class="icon-download" />
                     <span class="text">Download .env file</span>
                 </Button>
-                <!-- <Button secondary on:click={() => (showVariablesUpload = true)}>
-                    <span class="icon-upload" />
-                    <span class="text">Import .env file</span>
-                </Button> -->
             </div>
             <table class="table is-remove-outer-styles">
                 <thead class="table-thead">
@@ -622,5 +502,3 @@
         on:created={handleVariableCreated}
         on:updated={handleVariableUpdated} />
 {/if}
-<!-- <Upload bind:show={showVariablesUpload} on:uploaded={handleVariableCreated} /> -->
-<EventModal bind:show={showEvents} initialValue={eventValue} on:created={handleEvent} />
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte
new file mode 100644
index 0000000000..901b53c731
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+    import CardGrid from '$lib/components/cardGrid.svelte';
+    import Empty from '$lib/components/empty.svelte';
+    import Heading from '$lib/components/heading.svelte';
+
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { TableCell, TableCellText } from '$lib/elements/table';
+    import TableList from '$lib/elements/table/tableList.svelte';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { writable, type Writable } from 'svelte/store';
+    import { func } from '../store';
+    import { EventModal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import DropList from '$lib/components/dropList.svelte';
+    import DropListItem from '$lib/components/dropListItem.svelte';
+
+    const functionId = $page.params.function;
+    const eventSet: Writable<Set<string>> = writable(new Set($func.events));
+    let showEvents = false;
+    let eventValue: string;
+    let isDisabled = true;
+    let showDropdown: boolean[] = [];
+
+    async function updateEvents() {
+        try {
+            await sdkForProject.functions.update(
+                functionId,
+                $func.name,
+                $func.execute,
+                Array.from($eventSet),
+                $func.schedule,
+                $func.timeout,
+                $func.enabled
+            );
+            invalidate(Dependencies.FUNCTION);
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+            trackEvent('submit_function_update_events');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+
+    function handleEvent(event: CustomEvent) {
+        if (eventValue) {
+            const newSet = new Set(
+                [...$eventSet].map((e) => (e === eventValue ? event.detail : e))
+            );
+            eventSet.set(newSet);
+        } else {
+            eventSet.set($eventSet.add(event.detail));
+        }
+        eventValue = null;
+    }
+
+    $: if ($eventSet) {
+        if (symmetricDifference(Array.from($eventSet), $func.events).length) {
+            isDisabled = false;
+        } else isDisabled = true;
+    }
+
+    $: if (!showEvents) {
+        eventValue = undefined;
+    }
+</script>
+
+<Form on:submit={updateEvents}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Events</Heading>
+        <p>Set the events that will trigger your function. Maximum 100 events allowed.</p>
+        <svelte:fragment slot="aside">
+            {#if $eventSet.size}
+                <TableList>
+                    {#each Array.from($eventSet) as event, i}
+                        <li class="table-row">
+                            <TableCellText title="id">
+                                {event}
+                            </TableCellText>
+                            <TableCell showOverflow title="options" width={40}>
+                                <DropList
+                                    bind:show={showDropdown[i]}
+                                    placement="bottom-start"
+                                    noArrow>
+                                    <button
+                                        class="button is-text is-only-icon"
+                                        aria-label="more options"
+                                        on:click|preventDefault={() =>
+                                            (showDropdown[i] = !showDropdown[i])}>
+                                        <span class="icon-dots-horizontal" aria-hidden="true" />
+                                    </button>
+                                    <svelte:fragment slot="list">
+                                        <DropListItem
+                                            icon="pencil"
+                                            on:click={() => {
+                                                showDropdown[i] = false;
+                                                showEvents = true;
+                                                eventValue = event;
+                                            }}>
+                                            Edit
+                                        </DropListItem>
+                                        <DropListItem
+                                            icon="trash"
+                                            on:click={async () => {
+                                                $eventSet.delete(event);
+                                                eventSet.set($eventSet);
+                                            }}>
+                                            Delete
+                                        </DropListItem>
+                                    </svelte:fragment>
+                                </DropList>
+                            </TableCell>
+                        </li>
+                    {/each}
+                </TableList>
+
+                <div class="u-flex u-margin-block-start-16">
+                    <Button text noMargin on:click={() => (showEvents = true)}>
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="u-text">Add event</span>
+                    </Button>
+                </div>
+            {:else}
+                <Empty on:click={() => (showEvents = true)}>Add an event to get started</Empty>
+            {/if}
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={isDisabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+<EventModal bind:show={showEvents} initialValue={eventValue} on:created={handleEvent} />

From bb2f10e84520fa0034801a1a68ea55d419780234 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 15 Dec 2022 19:21:52 +0000
Subject: [PATCH 14/16] fix: event action naming convetions

---
 src/lib/components/eventModal.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index d4207ad9e3..9aadc6828c 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -218,8 +218,6 @@
             }
             if (selected.attribute) {
                 fields.push(selected.attribute);
-            } else if (selected.action?.attributes) {
-                fields.push('*');
             }
         }
 

From bf14907540e44ab69e84e80b8f5d892f9dbdb606 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 23 Jan 2023 17:00:54 +0000
Subject: [PATCH 15/16] refactor: pr reviews

---
 src/lib/components/copy.svelte       |  2 +-
 src/lib/components/eventModal.svelte | 12 ++++++------
 tsconfig.json                        |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 7fd1cb18bb..f1690ce8cb 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -6,7 +6,7 @@
 
     export let value: string;
     export let event: string = null;
-    export let appendTo: any | undefined = undefined;
+    export let appendTo: Parameters<typeof tooltip>['1']['appendTo'] = undefined;
 
     let content = 'Click to copy';
 
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 9aadc6828c..09d07e93c1 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -54,7 +54,7 @@
         if (typeof value === 'string') {
             selected[field as 'attribute'] = selected[field] === value ? null : value;
         } else {
-            selected[field as any] = (selected[field] as any)?.name === value.name ? null : value;
+            selected[field] = selected[field]?.name === value.name ? null : value;
         }
 
         customInput = null;
@@ -121,8 +121,8 @@
         }
     }
 
-    function toggleShowInput(e?: Event) {
-        e?.preventDefault();
+    function toggleShowInput(e: Event) {
+        e.preventDefault();
 
         showInput = !showInput;
         if (showInput) return;
@@ -326,7 +326,7 @@
         </div>
     {:else}
         <div class="input-text-wrapper" style="--amount-of-buttons:2" bind:this={copyParent}>
-            <div type="text" readonly style="min-height: 2.5rem;">
+            <div style="min-height: 2.5rem;">
                 {#each eventString as route, i}
                     <span
                         class:u-opacity-0-5={helper !== route.description}
@@ -342,9 +342,9 @@
             <div class="options-list">
                 {#key copyParent}
                     <button
-                        on:click|preventDefault={() => {
+                        on:click={(e) => {
                             customInput = inputValue;
-                            toggleShowInput();
+                            toggleShowInput(e);
                         }}
                         use:tooltip={{ content: 'Edit event', appendTo: copyParent }}
                         class="options-list-button"
diff --git a/tsconfig.json b/tsconfig.json
index d164d251ec..5987c9cb1d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
     "extends": "./.svelte-kit/tsconfig.json",
     "compilerOptions": {
-        "lib": ["webworker"],
+        "lib": ["webworker", "ES2016", "DOM"],
         "module": "ESNext",
         "moduleResolution": "Node",
         "importsNotUsedAsValues": "error",

From 020a08df127f199c8b183732b2b56f9736175f9d Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 30 Jan 2023 18:25:31 +0000
Subject: [PATCH 16/16] fix: event modal input styles

---
 src/lib/components/eventModal.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 09d07e93c1..38835eaf16 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -326,7 +326,11 @@
         </div>
     {:else}
         <div class="input-text-wrapper" style="--amount-of-buttons:2" bind:this={copyParent}>
-            <div style="min-height: 2.5rem;">
+            <!-- 
+                This object syntax avoids TS erroring because 'type' isn't a valid HTMLDivElement attribute
+                (we need to set it to 'text' to add styling)
+             -->
+            <div {...{ type: 'text' }} style="min-height: 2.5rem;">
                 {#each eventString as route, i}
                     <span
                         class:u-opacity-0-5={helper !== route.description}