Merge branch main into feat/in-progress-execution-timer

appwrite · Feb 10, 2023 · 5eb6f85 · 5eb6f85
2 parents 7db8153 + 7788371
commit 5eb6f85
Show file tree

Hide file tree

Showing 55 changed files with 498 additions and 275 deletions.
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -5,6 +5,8 @@ import { page } from '$app/stores';
 import { user } from '$lib/stores/user';
 import { growthEndpoint, Mode } from '$lib/constants';
 
+const isDevelopment =
+    import.meta.env.DEV || import.meta.env?.VITE_VERCEL_ENV?.toString() === 'preview';
 const analytics = Analytics({
     app: 'appwrite',
     plugins: [
@@ -18,24 +20,35 @@ export function trackEvent(name: string, data: object = null): void {
     if (!isTrackingAllowed()) {
         return;
     }
+
     const path = get(page).route.id;
-    analytics.track(name, { ...data, path });
-    sendEventToGrowth(name, path, data);
+
+    if (isDevelopment) {
+        console.debug(`[Analytics] Event ${name} ${path}`, data);
+    } else {
+        analytics.track(name, { ...data, path });
+        sendEventToGrowth(name, path, data);
+    }
 }
 
 export function trackPageView(path: string) {
     if (!isTrackingAllowed()) {
         return;
     }
 
-    analytics.page({
-        path
-    });
+    if (isDevelopment) {
+        console.debug(`[Analytics] Pageview ${path}`);
+    } else {
+        analytics.page({
+            path
+        });
+    }
 }
 
 function sendEventToGrowth(event: string, path: string, data: object = null): void {
-    let email: string, name: string;
+    if (!growthEndpoint) return;
     const userStore = get(user);
+    let email: string, name: string;
     if (userStore) {
         email = userStore.email;
         name = userStore.name;

diff --git a/src/lib/actions/tooltip.ts b/src/lib/actions/tooltip.ts
@@ -1,17 +1,24 @@
 import type { Action } from 'svelte/action';
-import type { Props } from 'tippy.js';
+import type { Props as TippyProps } from 'tippy.js';
 import tippy from 'tippy.js';
 
+type Props = TippyProps & {
+    disabled?: boolean;
+};
+
 export const tooltip: Action<HTMLElement, Partial<Props>> = (node, config) => {
     const instance = tippy(node, config);
+    if (config.disabled) instance.disable();
 
     return {
-        update({ content }) {
+        update({ content, disabled }) {
             if (content !== instance.props.content) {
                 instance.setProps({
                     content
                 });
             }
+
+            disabled ? instance.disable() : instance.enable();
         },
         destroy() {
             instance.destroy();

diff --git a/src/lib/charts/dark.json b/src/lib/charts/dark.json
@@ -119,6 +119,11 @@
             "crossStyle": {
                 "color": "#444444"
             }
+        },
+        "backgroundColor": "#373B4D",
+        "borderColor": "#373B4D",
+        "textStyle": {
+            "color": "#F2F2F8"
         }
     },
     "timeline": {

diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
@@ -240,7 +240,7 @@
 
 <Modal bind:show on:submit={create} size="big">
     <svelte:fragment slot="header">Create Event</svelte:fragment>
-
+    <slot />
     <div>
         <p class="u-text">Choose a service</p>
         <div class="u-flex u-gap-8 u-margin-block-start-8">

diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
@@ -154,7 +154,7 @@
             <TableCellHead width={40} />
         </TableHeader>
         <TableBody>
-            {#each [...$groups].sort(sortRoles) as [role, permission]}
+            {#each [...$groups].sort(sortRoles) as [role, permission] (role)}
                 <TableRow>
                     <TableCell title="Role">
                         <Row {role} />

diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
@@ -65,7 +65,7 @@
                     {#if data}
                         {@const isUser = role.startsWith('user')}
                         {@const isTeam = role.startsWith('team')}
-                        {@const isAnonymous = !data.email && !data.phone}
+                        {@const isAnonymous = !data.email && !data.phone && isUser}
                         <div class="user-profile">
                             {#if isAnonymous}
                                 <div class="avatar is-size-small ">
@@ -80,13 +80,7 @@
                             {/if}
                             <span class="user-profile-info is-only-desktop">
                                 <span class="name">
-                                    {data.name
-                                        ? data.name
-                                        : data?.email
-                                        ? data?.email
-                                        : data?.phone
-                                        ? data?.phone
-                                        : '-'}
+                                    {data.name ?? data?.email ?? data?.phone ?? '-'}
                                 </span>
                                 <Output value={data.$id}>{role}</Output>
                             </span>

diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <p
-    class="helper u-margin-block-start-12"
+    class="helper u-margin-block-start-8"
     class:u-color-text-info={type === 'info'}
     class:u-color-text-danger={type === 'error'}
     class:u-color-text-success={type === 'success'}

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
@@ -2,6 +2,7 @@
     import { FormItem, Helper } from '.';
 
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value = false;
@@ -26,7 +27,13 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
+        {#if optionalText}
+            <span class="optional">{optionalText}</span>
+        {/if}
+    </label>
+
     <div class="input-text-wrapper">
         <input
             {id}

diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
@@ -4,6 +4,7 @@
 
     export let label: string;
     export let showLabel = true;
+    export let optionalText: string | undefined = undefined;
     export let id: string;
     export let value = '';
     export let required = false;
@@ -38,8 +39,14 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
-    <div class="input-text-wrapper">
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
+        <span class:u-hide={!showLabel || !optionalText} class="optional">
+            {optionalText}
+        </span>
+    </label>
+
+    <div class="input-text-wrapper" style="--amount-of-buttons:1; --button-size: 1rem">
         <input
             {id}
             {disabled}

diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
@@ -6,7 +6,7 @@
 
     let element: HTMLInputElement;
     let icon = 'info';
-    const pattern = String.raw`/^[^._-][a-zA-Z0-9._-]*$/`;
+    const pattern = String.raw`^[a-zA-Z0-9][a-zA-Z0-9._-]*$`;
     const autofocus = true;
 
     onMount(() => {
@@ -49,7 +49,9 @@
         </span>
     </div>
 </FormItem>
-<div class="u-flex u-gap-4 u-margin-block-start-8 u-small" class:u-warning={icon === 'exclamation'}>
+<div
+    class="u-flex u-gap-4 u-margin-block-start-8 u-small"
+    class:u-color-text-warning={icon === 'exclamation'}>
     <span
         class:icon-info={icon === 'info'}
         class:icon-exclamation={icon === 'exclamation'}

diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
@@ -3,6 +3,7 @@
     import { FormItem, Helper } from '.';
 
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value: number = null;
@@ -51,7 +52,13 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
+        {#if optionalText}
+            <span class="optional">{optionalText}</span>
+        {/if}
+    </label>
+
     <div class="input-text-wrapper">
         <input
             {id}

diff --git a/src/lib/elements/forms/inputSecret.svelte b/src/lib/elements/forms/inputSecret.svelte
@@ -12,7 +12,7 @@
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
-    <div class="input-text-wrapper" style="--amount-of-buttons:1">
+    <div class="input-text-wrapper" style=" --amount-of-buttons: 1;">
         {#if showInPlainText}
             <div
                 contenteditable="true"
@@ -31,17 +31,15 @@
                 autocomplete="off"
                 bind:value />
         {/if}
-        <div class="options-list">
-            <button
-                type="button"
-                on:click={() => (showInPlainText = !showInPlainText)}
-                class="options-list-button"
-                aria-label="show / hide password">
-                <span
-                    class:icon-eye={!showInPlainText}
-                    class:icon-eye-off={showInPlainText}
-                    aria-hidden="true" />
-            </button>
-        </div>
+        <button
+            type="button"
+            on:click={() => (showInPlainText = !showInPlainText)}
+            class="show-password-button"
+            aria-label="show / hide password">
+            <span
+                class:icon-eye={!showInPlainText}
+                class:icon-eye-off={showInPlainText}
+                aria-hidden="true" />
+        </button>
     </div>
 </FormItem>
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
@@ -3,6 +3,7 @@
 
     export let id: string;
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let value: string | number | boolean;
     export let placeholder = '';
@@ -32,7 +33,13 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
+        {#if optionalText}
+            <span class="optional">{optionalText}</span>
+        {/if}
+    </label>
+
     <div class="select">
         <select
             {id}

diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { last } from '$lib/helpers/array';
     import { onMount } from 'svelte';
     import { FormItem, Helper } from '.';
 
@@ -36,7 +37,7 @@
         }
         if (['Backspace', 'Delete'].includes(e.key)) {
             if (value.length === 0) {
-                removeValue(tags[tags.length - 1]);
+                removeValue(last(tags));
             }
         }
     };

diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
@@ -4,6 +4,7 @@
     import { FormItem, Helper } from '.';
 
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value = '';
@@ -42,8 +43,8 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}
-        >{label}
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
         {#if tooltip}
             <span
                 class="icon-info"
@@ -52,7 +53,11 @@
                     content: tooltip
                 }} />
         {/if}
+        {#if optionalText}
+            <span class="optional">{optionalText}</span>
+        {/if}
     </label>
+
     <div class="input-text-wrapper">
         <input
             {id}

diff --git a/src/lib/helpers/object.ts b/src/lib/helpers/object.ts
@@ -0,0 +1,9 @@
+/**
+ * Strict typed `Object.entries`
+ * Extracted from https://github.com/antfu/utils
+ *
+ * @category Object
+ */
+export function objectEntries<T extends object>(obj: T) {
+    return Object.entries(obj) as Array<[keyof T, T[keyof T]]>;
+}
diff --git a/src/lib/helpers/string.ts b/src/lib/helpers/string.ts
@@ -1,3 +1,14 @@
+/**
+ * Capitalizes the first letter of a string
+ *
+ * @export
+ * @param {string} str
+ * @returns {string}
+ */
+export function capitalize(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
 /**
  * Given a string, returns the singular version of it,
  * by removing the trailing 's'.

diff --git a/src/lib/helpers/vitals.ts b/src/lib/helpers/vitals.ts
@@ -40,7 +40,7 @@ function sendToAnalytics(metric: Metric, options: Options) {
     };
 
     if (options.debug) {
-        console.log('[Analytics]', metric.name, JSON.stringify(body, null, 2));
+        console.debug('[Analytics]', metric.name, JSON.stringify(body, null, 2));
     }
 
     const blob = new Blob([new URLSearchParams(body).toString()], {

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
@@ -114,19 +114,19 @@
                     <div
                         class="drop is-no-arrow is-block-end is-inline-end"
                         transition:slide={{ duration: 100 }}>
-                        <section class="drop-section u-overflow-y-auto u-max-height-200">
-                            <ul class="drop-list">
-                                {#if $organizationList?.total}
+                        {#if $organizationList?.total}
+                            <section class="drop-section u-overflow-y-auto u-max-height-200">
+                                <ul class="drop-list">
                                     {#each $organizationList.teams as org}
                                         <DropListLink
                                             href={`${base}/console/organization-${org.$id}`}
                                             on:click={() => {
                                                 showDropdown = false;
                                             }}>{org.name}</DropListLink>
                                     {/each}
-                                {/if}
-                            </ul>
-                        </section>
+                                </ul>
+                            </section>
+                        {/if}
                         <section class="drop-section">
                             <ul class="drop-list">
                                 <DropListItem