Merge branch 'main' of https://github.com/appwrite/console into 1.4.x

appwrite · Aug 9, 2023 · 2a7c57e · 2a7c57e
2 parents 2a074e4 + ae9e67f
commit 2a7c57e
Show file tree

Hide file tree

Showing 57 changed files with 333 additions and 214 deletions.
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+    - init: npm install && npm run build
+      command: npm run dev
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@appwrite.io/console": "npm:christy-console@^0.3.0",
-        "@appwrite.io/pink": "^0.0.6-rc.10",
+        "@appwrite.io/pink": "^0.0.6-rc.14",
         "@analytics/google-tag-manager": "^0.5.3",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",

diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
@@ -19,3 +19,10 @@
         </div>
     {/if}
 </Card>
+
+<style lang="scss">
+    .grid-1-2 > * {
+        width: 100%;
+        overflow: hidden;
+    }
+</style>
diff --git a/src/lib/components/clickableListItem.svelte b/src/lib/components/clickableListItem.svelte
@@ -4,11 +4,15 @@
 
 <li class="clickable-list-item">
     <a {href} class="clickable-list-button" on:click>
-        <h5 class="clickable-list-title u-trim-1">
-            <slot />
-        </h5>
-        <div class="clickable-list-desc">
-            <p class="text u-margin-block-start-8"><slot name="desc" /></p>
-        </div>
+        {#if $$slots.default}
+            <h5 class="clickable-list-title u-trim-1">
+                <slot />
+            </h5>
+        {/if}
+        {#if $$slots.desc}
+            <div class="clickable-list-desc">
+                <p class="text u-margin-block-start-8"><slot name="desc" /></p>
+            </div>
+        {/if}
     </a>
 </li>
diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
@@ -14,7 +14,9 @@
     export let fullWidth = false;
     export let fixed = false;
 
-    const dispatch = createEventDispatcher();
+    const dispatch = createEventDispatcher<{
+        blur: undefined;
+    }>();
 
     let element: HTMLDivElement;
     let tooltip: HTMLDivElement;

diff --git a/src/lib/components/permissions/actions.svelte b/src/lib/components/permissions/actions.svelte
@@ -20,7 +20,7 @@
     }
 </script>
 
-<DropList bind:show={showDropdown} placement="bottom-end">
+<DropList bind:show={showDropdown} placement="bottom-end" fixed>
     <slot />
     <svelte:fragment slot="list">
         <DropListItem disabled={$groups.has('any')} on:click={() => dispatch('create', ['any'])}>

diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
@@ -12,7 +12,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import {
-        Table,
         TableBody,
         TableCell,
         TableCellHead,
@@ -24,6 +23,7 @@
     import { writable, type Unsubscriber } from 'svelte/store';
     import Actions from './actions.svelte';
     import Row from './row.svelte';
+    import Table from '$lib/elements/table/table.svelte';
 
     export let withCreate = false;
     export let permissions: string[] = [];
@@ -142,74 +142,76 @@
 </script>
 
 {#if [...$groups]?.length}
-    <Table noMargin noStyles>
-        <TableHeader>
-            <TableCellHead width={70}>Role</TableCellHead>
-            {#if withCreate}
-                <TableCellHead width={70}>Create</TableCellHead>
-            {/if}
-            <TableCellHead width={70}>Read</TableCellHead>
-            <TableCellHead width={70}>Update</TableCellHead>
-            <TableCellHead width={70}>Delete</TableCellHead>
-            <TableCellHead width={40} />
-        </TableHeader>
-        <TableBody>
-            {#each [...$groups].sort(sortRoles) as [role, permission] (role)}
-                <TableRow>
-                    <TableCell title="Role">
-                        <Row {role} />
-                    </TableCell>
-
-                    {#if withCreate}
-                        <TableCell title="Create">
+    <div class="table-wrapper">
+        <Table noMargin noStyles>
+            <TableHeader>
+                <TableCellHead width={140}>Role</TableCellHead>
+                {#if withCreate}
+                    <TableCellHead width={60}>Create</TableCellHead>
+                {/if}
+                <TableCellHead width={50}>Read</TableCellHead>
+                <TableCellHead width={60}>Update</TableCellHead>
+                <TableCellHead width={60}>Delete</TableCellHead>
+                <TableCellHead width={32} />
+            </TableHeader>
+            <TableBody>
+                {#each [...$groups].sort(sortRoles) as [role, permission] (role)}
+                    <TableRow>
+                        <TableCell title="Role">
+                            <Row {role} />
+                        </TableCell>
+
+                        {#if withCreate}
+                            <TableCell title="Create">
+                                <input
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={permission.create}
+                                    on:change={() => togglePermission(role, 'create')} />
+                            </TableCell>
+                        {/if}
+                        <TableCell title="Read">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Read"
+                                checked={permission.read}
+                                on:change={() => togglePermission(role, 'read')} />
+                        </TableCell>
+                        <TableCell title="Update">
                             <input
                                 type="checkbox"
                                 class="icon-check"
-                                aria-label="Create"
-                                checked={permission.create}
-                                on:change={() => togglePermission(role, 'create')} />
+                                aria-label="Update"
+                                checked={permission.update}
+                                on:change={() => togglePermission(role, 'update')} />
+                        </TableCell>
+                        <TableCell title="Delete">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Delete"
+                                checked={permission.delete}
+                                on:change={() => togglePermission(role, 'delete')} />
+                        </TableCell>
+
+                        <TableCell title="Remove" width={40}>
+                            <div class="u-flex">
+                                <button
+                                    class="button is-text is-only-icon"
+                                    type="button"
+                                    aria-label="delete"
+                                    on:click={() => deleteRole(role)}>
+                                    <span class="icon-x" aria-hidden="true" />
+                                </button>
+                            </div>
                         </TableCell>
-                    {/if}
-                    <TableCell title="Read">
-                        <input
-                            type="checkbox"
-                            class="icon-check"
-                            aria-label="Read"
-                            checked={permission.read}
-                            on:change={() => togglePermission(role, 'read')} />
-                    </TableCell>
-                    <TableCell title="Update">
-                        <input
-                            type="checkbox"
-                            class="icon-check"
-                            aria-label="Update"
-                            checked={permission.update}
-                            on:change={() => togglePermission(role, 'update')} />
-                    </TableCell>
-                    <TableCell title="Delete">
-                        <input
-                            type="checkbox"
-                            class="icon-check"
-                            aria-label="Delete"
-                            checked={permission.delete}
-                            on:change={() => togglePermission(role, 'delete')} />
-                    </TableCell>
-
-                    <TableCell title="Remove" width={40}>
-                        <div class="u-flex">
-                            <button
-                                class="button is-text is-only-icon"
-                                type="button"
-                                aria-label="delete"
-                                on:click={() => deleteRole(role)}>
-                                <span class="icon-x" aria-hidden="true" />
-                            </button>
-                        </div>
-                    </TableCell>
-                </TableRow>
-            {/each}
-        </TableBody>
-    </Table>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    </div>
 
     <Actions
         bind:showCustom

diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
@@ -84,7 +84,7 @@
                         class="icon-view-boards u-opacity-50"
                         aria-hidden="true"
                         aria-label="columns" />
-                    <span class="text is-only-desktop">Columns</span>
+                    <span class="text">Columns</span>
                     <span class="inline-tag">{selectedColumnsNumber}</span>
                 </Button>
                 <svelte:fragment slot="list">

diff --git a/src/lib/elements/forms/formItem.svelte b/src/lib/elements/forms/formItem.svelte
@@ -1,3 +1,7 @@
-<li class="form-item">
+<script lang="ts">
+    export let fullWidth = false;
+</script>
+
+<li class="form-item" class:u-width-full-line={fullWidth}>
     <slot />
 </li>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { Trim } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { onMount } from 'svelte';
     import { Helper } from '.';
 
     export let label: string = null;
     export let files: FileList;
-    export let list = new DataTransfer();
+
     export let allowedFileExtensions: string[] = [];
     export let maxSize: number = null;
     export let required = false;
@@ -14,16 +15,35 @@
     let input: HTMLInputElement;
     let hovering = false;
 
+    function setFiles(value: FileList) {
+        if (!value) return;
+
+        const hasInvalidExt = Array.from(value).some((file) => {
+            const fileExtension = file.name.split('.').pop();
+            return !allowedFileExtensions.includes(fileExtension);
+        });
+        if (hasInvalidExt) {
+            error = 'Invalid file extension';
+            return;
+        }
+
+        files = value;
+        input.files = value;
+    }
+
+    function resetFiles() {
+        setFiles(new DataTransfer().files);
+    }
+
     function dropHandler(ev: DragEvent) {
         ev.dataTransfer.dropEffect = 'move';
         hovering = false;
-        if (ev.dataTransfer.items) {
-            for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-                if (ev.dataTransfer.items[i].kind === 'file') {
-                    list.items.clear();
-                    list.items.add(ev.dataTransfer.items[i].getAsFile());
-                    files = list.files;
-                }
+        if (!ev.dataTransfer.items) return;
+        for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+            if (ev.dataTransfer.items[i].kind === 'file') {
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(ev.dataTransfer.items[i].getAsFile());
+                setFiles(dataTransfer.files);
             }
         }
     }
@@ -47,10 +67,19 @@
     }
 
     $: fileArray = files?.length ? Array.from(files) : [];
+
+    onMount(() => {
+        setFiles(files);
+    });
+
+    const handleChange = (event: Event) => {
+        const target = event.currentTarget as HTMLInputElement;
+        setFiles(target.files);
+    };
 </script>
 
 <input
-    bind:files
+    on:change={handleChange}
     bind:this={input}
     accept={allowedFileExtensions.map((n) => `.${n}`).join(',')}
     type="file"
@@ -123,7 +152,7 @@
                                 {fileSize.value + fileSize.unit}
                             </span>
                             <button
-                                on:click={() => (files = null)}
+                                on:click|preventDefault={resetFiles}
                                 type="button"
                                 class="button is-text is-only-icon u-margin-inline-start-auto"
                                 aria-label="remove file"

diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
@@ -16,6 +16,7 @@
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
+    export let fullWidth = false;
     export let maxlength: number = null;
     export let tooltip: string = null;
 
@@ -58,7 +59,7 @@
     $: showNullCheckbox = nullable && !required;
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
         {label}
     </Label>

diff --git a/src/lib/elements/table/tableScroll.svelte b/src/lib/elements/table/tableScroll.svelte
@@ -2,6 +2,7 @@
     import type { Action } from 'svelte/action';
 
     export let isSticky = false;
+    export let noMargin = false;
     let isOverflowing = false;
 
     const hasOverflow: Action<HTMLDivElement> = (node) => {
@@ -37,8 +38,8 @@
     };
 </script>
 
-<div class="table-with-scroll u-margin-block-start-32" data-private>
-    <div class="table-wrapper" use:hasOverflow>
+<div class="table-with-scroll" class:u-margin-block-start-32={!noMargin} data-private>
+    <div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
         <table class="table" class:is-sticky-scroll={isSticky && isOverflowing}>
             <slot />
         </table>