Merge branch 'feat-g4' of github.com:appwrite/console into copy-wizar…

…ds and fixes

package.json

@@ -19,10 +19,10 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "npm:matej-appwrite-console@7.1.125",
-        "@appwrite.io/pink": "0.0.7-next.1",
-        "@appwrite.io/pink-icons": "0.0.7-next.1",
         "@analytics/google-tag-manager": "^0.5.3",
+        "@appwrite.io/console": "npm:matej-appwrite-console@7.1.126",
+        "@appwrite.io/pink": "0.1.0-next.3",
+        "@appwrite.io/pink-icons": "^0.1.0-next.3",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
         "@sentry/tracing": "^7.44.2",

src/lib/actions/analytics.ts

@@ -187,6 +187,7 @@ export enum Submit {
     FunctionUpdateLogging = 'submit_function_update_logging',
     FunctionUpdateTimeout = 'submit_function_update_timeout',
     FunctionUpdateEvents = 'submit_function_update_events',
+    FunctionConnectRepo = 'submit_function_disconnect_repo',
     FunctionDisconnectRepo = 'submit_function_disconnect_repo',
     FunctionRedeploy = 'submit_function_redeploy',
     DeploymentCreate = 'submit_deployment_create',

src/lib/components/avatarGroup.svelte

@@ -5,7 +5,16 @@
     export let icons: string[] = [];
     export let total = avatars.length;
     export let size = 40;
+    export let avatarSize: keyof typeof Sizes = 'medium';
     export let bordered = false;
+
+    enum Sizes {
+        xsmall = 'is-size-x-small',
+        small = 'is-size-small',
+        medium = '',
+        large = 'is-size-large',
+        xlarge = 'is-size-x-large'
+    }
 </script>
 
 <ul class="avatars-group" class:is-with-border={bordered}>
@@ -19,13 +28,13 @@
 
     {#each icons as icon}
         <li class="avatars-group-item">
-            <span class="avatar"><span class={`icon-${icon}`} /></span>
+            <span class="avatar {Sizes[avatarSize]}"><span class={`icon-${icon}`} /></span>
         </li>
     {/each}
 
     {#if total > 2}
         <li class="avatars-group-item">
-            <div class="avatar">+{total - 2}</div>
+            <div class="avatar {Sizes[avatarSize]}">+{total - 2}</div>
         </li>
     {/if}
 </ul>

src/lib/components/box.svelte

@@ -1,9 +1,20 @@
-<div class="box">
-    <div class="u-flex u-gap-16">
-        <slot name="image" />
-        <div class="u-cross-child-center u-line-height-1-5">
-            <slot name="title" />
-            <slot />
-        </div>
-    </div>
+<script lang="ts">
+    export let radius: keyof typeof radiuses = 'small';
+    export let padding = 24;
+    let classes = '';
+    export { classes as class };
+
+    enum radiuses {
+        xsmall = '--border-radius-extra-large',
+        small = '--border-radius-small',
+        medium = '--border-radius-medium',
+        large = '--border-radius-large'
+    }
+</script>
+
+<div
+    class="box {classes}"
+    style:--box-border-radius={`var(${radiuses[radius]})`}
+    style:--box-padding={`${padding / 16}rem`}>
+    <slot />
 </div>

src/lib/components/boxAvatar.svelte

@@ -0,0 +1,9 @@
+<div class="box">
+    <div class="u-flex u-gap-16">
+        <slot name="image" />
+        <div class="u-cross-child-center u-line-height-1-5">
+            <slot name="title" />
+            <slot />
+        </div>
+    </div>
+</div>

src/lib/components/collapsibleItem.svelte

@@ -11,7 +11,9 @@
             <slot name="beforetitle" />
             <div>
                 <span class="text"><slot name="title" /></span>
-                <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+                {#if $$slots.subtitle}
+                    <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+                {/if}
             </div>
             <div class="icon">
                 <span class="icon-cheveron-down" aria-hidden="true" />

src/lib/components/index.ts

@@ -29,6 +29,7 @@ export { default as AvatarInitials } from './avatarInitials.svelte';
 export { default as AvatarGroup } from './avatarGroup.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
+export { default as BoxAvatar } from './boxAvatar.svelte';
 export { default as Search } from './search.svelte';
 export { default as SearchQuery } from './searchQuery.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';

src/lib/components/labelCard.svelte

@@ -31,10 +31,14 @@
             bind:group
             on:click />
         <div class="u-flex u-flex-vertical u-gap-4">
-            <h4 class="body-text-2 u-bold"><slot name="title" /></h4>
-            <p class="u-color-text-gray u-small">
-                <slot />
-            </p>
+            {#if $$slots.title}
+                <h4 class="body-text-2 u-bold"><slot name="title" /></h4>
+            {/if}
+            {#if $$slots.default}
+                <p class="u-color-text-gray u-small">
+                    <slot />
+                </p>
+            {/if}
         </div>
         {#if icon}
             <span class={`icon-${icon} u-margin-inline-start-auto`} aria-hidden="true" />

src/lib/components/numericListItem.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+    export let fullWidth = false;
+</script>
+
 <li class="numeric-list-item">
-    <p class="text u-margin-block-start-8"><slot /></p>
+    <div class="u-margin-block-start-8" class:u-width-full-line={fullWidth}><slot /></div>
 </li>

src/lib/components/svgIcon.svelte

@@ -4,8 +4,22 @@
     export let name: string;
     export let type: 'color' | 'grayscale' = 'color';
     export let size = 40;
+    export let iconSize: keyof typeof iconSizes = 'medium';
     let className = '';
     export { className as class };
+
+    enum iconSizes {
+        small = '--icon-size-small',
+        medium = '--icon-size-medium',
+        large = '--icon-size-large',
+        xlarge = '--icon-size-extra-large'
+    }
 </script>
 
-<img class={className} width={size} height={size} src={$iconPath(name, type)} alt={name} />
+<img
+    class={className}
+    width={size}
+    height={size}
+    style:inline-size={`var(${iconSizes[iconSize]})`}
+    src={$iconPath(name, type)}
+    alt={name} />

src/lib/components/tab.svelte

@@ -22,7 +22,6 @@
 
             await goto(href);
             await waitUntil(() => {
-                console.log('tickUntil', el);
                 return el.classList.contains('is-selected');
             }, 1000);
             el.focus();

src/lib/components/trim.svelte

@@ -3,6 +3,7 @@
     import { throttle } from '$lib/helpers/functions';
     import { onMount } from 'svelte';
 
+    export let alternativeTrim = false;
     let showTooltip = false;
     let container: HTMLSpanElement | null;
 
@@ -15,11 +16,12 @@
 
 <svelte:window on:resize={throttle(onResize, 250)} />
 
-<span class="text u-trim" bind:this={container}>
+<span class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`} bind:this={container}>
     {#if showTooltip}
         <span
             use:tooltip={{
-                content: container.innerText
+                content: container.innerText,
+                maxWidth: '30rem'
             }}>
             <slot />
         </span>

src/lib/elements/forms/formItem.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     export let fullWidth = false;
+    export let isMultiple = false;
 </script>
 
-<li class="form-item" class:u-width-full-line={fullWidth}>
+<li class="form-item" class:is-multiple={isMultiple} class:u-width-full-line={fullWidth}>
     <slot />
 </li>

src/lib/elements/forms/formItemPart.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    export let fullWidth = false;
+    export let alignEnd = false;
+</script>
+
+<div class="form-item-part" class:u-cross-child-end={alignEnd} class:u-stretch={fullWidth}>
+    <slot />
+</div>

src/lib/elements/forms/index.ts

@@ -1,5 +1,6 @@
 export { default as Form } from './form.svelte';
 export { default as FormItem } from './formItem.svelte';
+export { default as FormItemPart } from './formItemPart.svelte';
 export { default as FormList } from './formList.svelte';
 export { default as Button } from './button.svelte';
 export { default as InputDomain } from './inputDomain.svelte';

src/lib/elements/forms/inputChoice.svelte

@@ -40,8 +40,10 @@
             on:invalid={handleInvalid} />
 
         <div class="choice-item-content">
-            <div class:u-hide={!showLabel} class="choice-item-title u-flex u-cross-center u-gap-4">
-                {label}
+            <div class="u-flex u-cross-center u-gap-4">
+                <h6 class:u-hide={!showLabel} class="choice-item-title">
+                    {label}
+                </h6>
                 {#if tooltip}
                     <button class="tooltip" aria-label="variables info">
                         <span

src/lib/elements/forms/inputFile.svelte

@@ -22,7 +22,9 @@
 
         const hasInvalidExt = Array.from(value).some((file) => {
             const fileExtension = file.name.split('.').pop();
-            return !allowedFileExtensions.includes(fileExtension);
+            return allowedFileExtensions?.length
+                ? !allowedFileExtensions.includes(fileExtension)
+                : false;
         });
         if (hasInvalidExt) {
             error = 'Invalid file extension';

src/lib/elements/forms/inputPassword.svelte

@@ -51,7 +51,7 @@
         {label}
     </Label>
 
-    <div class="input-text-wrapper">
+    <div class="input-text-wrapper" style={showPasswordButton ? '--amount-of-buttons: 1' : ''}>
         {#if showInPlainText}
             <input
                 {id}

src/lib/elements/forms/inputSelect.svelte

@@ -8,6 +8,7 @@
     export let value: string | number | boolean;
     export let placeholder = '';
     export let required = false;
+    export let hideRequired = false;
     export let disabled = false;
     export let options: {
         value: string | boolean | number;
@@ -46,7 +47,7 @@
 
 <FormItem>
     {#if label}
-        <Label {required} {optionalText} hide={!showLabel} for={id}>
+        <Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id}>
             {label}
         </Label>
     {/if}

src/lib/elements/forms/inputSelectSearch.svelte

@@ -16,9 +16,11 @@
     export let label: string;
     export let name = 'elements';
     export let optionalText: string | undefined = undefined;
+    export let tooltip: string | undefined = undefined;
     export let showLabel = true;
     export let placeholder = '';
     export let required = false;
+    export let hideRequired = false;
     export let disabled = false;
     export let fullWidth = false;
     export let autofocus = false;
@@ -84,11 +86,12 @@
         value = option.value;
         search = option.label;
         // It's not working without this line.
-        if ($$slots.output) {
-            search = '';
-        } else {
+        if (!$$slots.output) {
             element.value = search;
+        } else {
+            search = '';
         }
+
         hasFocus = false;
         dispatch('select', option);
     }
@@ -117,7 +120,7 @@
         position="static"
         fullWidth={true}
         fixed>
-        <Label {required} {optionalText} hide={!showLabel} for={id}>
+        <Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id} {tooltip}>
             {label}
         </Label>
 

src/lib/elements/forms/inputText.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
+    import { FormItem, FormItemPart, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
     import TextCounter from './textCounter.svelte';
 
@@ -12,6 +12,7 @@
     export let value = '';
     export let placeholder = '';
     export let required = false;
+    export let hideRequired = false;
     export let nullable = false;
     export let disabled = false;
     export let readonly = false;
@@ -20,6 +21,7 @@
     export let fullWidth = false;
     export let maxlength: number = null;
     export let tooltip: string = null;
+    export let isMultiple = false;
 
     let element: HTMLInputElement;
     let error: string;
@@ -65,11 +67,13 @@
     type $$Events = {
         input: Event & { target: HTMLInputElement };
     };
+
+    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<FormItem {fullWidth}>
+<svelte:component this={wrapper} {fullWidth}>
     {#if label}
-        <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
+        <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
             {label}
         </Label>
     {/if}
@@ -110,4 +114,4 @@
     {#if error}
         <Helper type="warning">{error}</Helper>
     {/if}
-</FormItem>
+</svelte:component>

src/lib/elements/forms/label.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
     interface $$Props extends Partial<HTMLLabelElement> {
         required?: boolean;
+        hideRequired?: boolean;
         optionalText?: string | undefined;
         hide?: boolean;
         tooltip?: string;
         for?: string;
     }
 
     export let required: $$Props['required'] = false;
+    export let hideRequired: $$Props['hideRequired'] = false;
     export let optionalText: $$Props['optionalText'] = undefined;
     export let hide: $$Props['hide'] = false;
     export let tooltip: $$Props['tooltip'] = null;
 </script>
 
-<label class:is-required={required} class:u-hide={hide} class="label" {...$$restProps}>
+<label
+    class:is-required={required && !hideRequired}
+    class:u-hide={hide}
+    class="label"
+    {...$$restProps}>
     <slot />
 </label>
 
@@ -22,7 +28,7 @@
 {/if}
 
 {#if tooltip}
-    <button class="tooltip" aria-label="variables info">
+    <button class="tooltip" aria-label="input tooltip">
         <span class="icon-info" aria-hidden="true" style="font-size: var(--icon-size-small)" />
         <span class="tooltip-popup" role="tooltip">
             <p class="text">