File tokens

package.json

@@ -21,11 +21,11 @@
         "e2e:ui": "playwright test --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@6dbeff0",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c339db5",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

src/lib/actions/analytics.ts

@@ -343,6 +343,9 @@ export enum Submit {
     FileCreate = 'submit_file_create',
     FileDelete = 'submit_file_delete',
     FileUpdatePermissions = 'submit_file_update_permissions',
+    FileTokenCreate = 'submit_file_token',
+    FileTokenDelete = 'submit_file_delete',
+    FileTokenUpdate = 'submit_file_update_expiry',
     BudgetCapUpdate = 'submit_budget_cap_update',
     BudgetAlertsUpdate = 'submit_budget_alert_conditions_update',
     CreditRedeem = 'submit_credit_redeem',

src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte → src/lib/components/expirationInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Helper, InputDateTime, InputSelect } from '$lib/elements/forms';
+    import { InputDateTime, InputSelect } from '$lib/elements/forms';
     import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
@@ -47,6 +47,9 @@
     ];
 
     export let value: string | null = null;
+    export let dateSelectorLabel: string | undefined = undefined;
+    export let selectorLabel: string | undefined = 'Expiration Date';
+    export let resourceType: string | 'key' | 'token' | undefined = 'key';
 
     function initExpirationSelect() {
         if (value === null || !isValidDate(value)) return null;
@@ -65,6 +68,10 @@
     }
     let expirationSelect = initExpirationSelect();
     let expirationCustom: string | null = value ?? null;
+    $: helper =
+        expirationSelect !== 'custom' && expirationSelect !== null
+            ? `Your ${resourceType} will expire in ${toLocaleDate(value)}`
+            : null;
 
     $: {
         if (!isSameDay(new Date(expirationSelect), new Date(value))) {
@@ -73,13 +80,8 @@
     }
 </script>
 
-<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration date">
-    <svelte:fragment slot="helper">
-        {#if expirationSelect !== 'custom' && expirationSelect !== null}
-            <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
-        {/if}
-    </svelte:fragment>
+<InputSelect bind:value={expirationSelect} {options} id="preset" label={selectorLabel} {helper}>
 </InputSelect>
 {#if expirationSelect === 'custom'}
-    <InputDateTime required id="expire" label="" bind:value={expirationCustom} />
+    <InputDateTime required id="expire" label={dateSelectorLabel} bind:value={expirationCustom} />
 {/if}

src/lib/components/index.ts

@@ -82,3 +82,4 @@ export { default as BottomSheet } from './bottom-sheet/index';
 export { default as Confirm } from './confirm.svelte';
 export { default as UsageCard } from './usageCard.svelte';
 export { default as ViewToggle } from './viewToggle.svelte';
+export { default as ExpirationInput } from './expirationInput.svelte';

src/lib/components/permissions/actions.svelte

@@ -12,38 +12,60 @@
     export let showTeam: boolean;
     export let showLabel: boolean;
     export let showCustom: boolean;
+    export let hideOnClick: boolean = false;
     export let groups: Writable<Map<string, Permission>>;
 
     const dispatch = createEventDispatcher();
 </script>
 
 <Popover let:toggle padding="none" placement="bottom-start">
     <slot {toggle} />
-    <svelte:fragment slot="tooltip">
+    <svelte:fragment slot="tooltip" let:hide>
         <ActionMenu.Root>
             <ActionMenu.Item.Button
                 disabled={$groups.has('any')}
-                on:click={() => dispatch('create', ['any'])}>
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['any']);
+                }}>
                 Any
             </ActionMenu.Item.Button>
             <ActionMenu.Item.Button
                 disabled={$groups.has('guests')}
-                on:click={() => dispatch('create', ['guests'])}>
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['guests']);
+                }}>
                 All guests
             </ActionMenu.Item.Button>
             <ActionMenu.Item.Button
                 disabled={$groups.has('users')}
-                on:click={() => dispatch('create', ['users'])}>
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['users']);
+                }}>
                 All users
             </ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showUser = true)}
-                >Select users</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showTeam = true)}
-                >Select teams</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showLabel = true)}
-                >Label</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showCustom = true)}
-                >Custom permission</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showUser = true;
+                    if (hideOnClick) hide(e);
+                }}>Select users</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showTeam = true;
+                    if (hideOnClick) hide(e);
+                }}>Select teams</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showLabel = true;
+                    if (hideOnClick) hide(e);
+                }}>Label</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCustom = true;
+                    if (hideOnClick) hide(e);
+                }}>Custom permission</ActionMenu.Item.Button>
         </ActionMenu.Root>
     </svelte:fragment>
 </Popover>

src/lib/components/permissions/permissions.svelte

@@ -21,6 +21,7 @@
     import type { PinkColumn } from '$lib/helpers/types';
 
     export let withCreate = false;
+    export let hideOnClick = false;
     export let permissions: string[] = [];
 
     let showUser = false;
@@ -127,11 +128,11 @@
     }
 
     const columns: PinkColumn[] = [
-        { id: 'role', width: { min: 100 } },
-        { id: 'create', width: { min: 100 }, hide: !withCreate },
-        { id: 'read', width: { min: 100 } },
-        { id: 'update', width: { min: 100 } },
-        { id: 'delete', width: { min: 100 } },
+        { id: 'role', width: { min: 80 } },
+        { id: 'create', width: { min: 80 }, hide: !withCreate },
+        { id: 'read', width: { min: 80 } },
+        { id: 'update', width: { min: 80 } },
+        { id: 'delete', width: { min: 80 } },
         { id: 'action', width: 40 }
     ];
 </script>
@@ -195,6 +196,7 @@
             bind:showTeam
             bind:showUser
             {groups}
+            {hideOnClick}
             on:create={create}
             let:toggle>
             <Button secondary on:click={toggle}>
@@ -213,6 +215,7 @@
                     bind:showTeam
                     bind:showUser
                     {groups}
+                    {hideOnClick}
                     on:create={create}
                     let:toggle>
                     <Button compact icon on:click={toggle}>

src/lib/constants.ts

@@ -33,6 +33,7 @@ export enum Dependencies {
     DOCUMENTS = 'dependency:documents',
     BUCKET = 'dependency:bucket',
     FILE = 'dependency:file',
+    FILE_TOKENS = 'dependency:file_tokens',
     FILES = 'dependency:files',
     FUNCTION = 'dependency:function',
     FUNCTION_DOMAINS = 'dependency:function_domains',

src/lib/elements/forms/inputDateTime.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { Input } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+    import { Input, Layout, Selector } from '@appwrite.io/pink-svelte';
 
-    export let label: string = undefined;
     export let id: string;
-    export let name: string = id;
-    export let helper: string = undefined;
-    export let value = '';
-    export let placeholder = '';
+    export let label: string;
+    export let value: string;
     export let required = false;
     export let nullable = false;
     export let disabled = false;
@@ -16,43 +14,48 @@
     export let step: number | 'any' = 0.001;
 
     let error: string;
+    let element: HTMLInputElement;
 
-    function handleInvalid(event: Event) {
-        event.preventDefault();
-
-        const inputNode = event.currentTarget as HTMLInputElement;
-
-        if (inputNode.validity.valueMissing) {
-            error = 'This field is required';
-            return;
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    let prevValue = '';
+    function handleNullChange(e: CustomEvent<boolean>) {
+        const isNull = e.detail;
+        if (isNull) {
+            prevValue = value;
+            value = null;
+        } else {
+            value = prevValue;
         }
-
-        error = inputNode.validationMessage;
     }
 
     $: if (value) {
         error = null;
     }
 </script>
 
-<Input.DateTime
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    {required}
-    {label}
-    {step}
-    {nullable}
-    {readonly}
-    autofocus={autofocus || undefined}
-    autocomplete={autocomplete ? 'on' : 'off'}
-    helper={error || helper}
-    state={error ? 'error' : 'default'}
-    on:invalid={handleInvalid}
-    on:input
-    bind:value>
-    <slot name="start" slot="start" />
-    <slot name="info" slot="info" />
-    <slot name="end" slot="end" />
-</Input.DateTime>
+<Layout.Stack gap="s" direction="row">
+    <Input.DateTime
+        {id}
+        {label}
+        {disabled}
+        {readonly}
+        {required}
+        {value}
+        {step}
+        helper={error}
+        autocomplete={autocomplete ? 'on' : 'off'}>
+        {#if nullable}
+            <Selector.Checkbox
+                size="s"
+                slot="end"
+                label="NULL"
+                checked={value === null}
+                on:change={handleNullChange} />
+        {/if}
+    </Input.DateTime>
+</Layout.Stack>