DevKeys on Pink2

package.json

@@ -19,7 +19,7 @@
         "e2e:ui": "playwright test tests/e2e --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9562",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5",
         "@appwrite.io/pink-legacy": "^1.0.3",

src/lib/actions/analytics.ts

@@ -157,6 +157,7 @@ export enum Click {
     FunctionsDeploymentDeleteClick = 'click_deployment_delete',
     FunctionsDeploymentCancelClick = 'click_deployment_cancel',
     KeyCreateClick = 'click_key_create',
+    DevKeyCreateClick = 'click_dev_key_create',
     MenuDropDownClick = 'click_menu_dropdown',
     MenuOverviewClick = 'click_menu_overview',
     ModalCloseClick = 'click_close_modal',
@@ -307,12 +308,18 @@ export enum Submit {
     VariableDelete = 'submit_variable_delete',
     VariableUpdate = 'submit_variable_update',
     VariableEditor = 'submit_variable_editor',
+
     KeyCreate = 'submit_key_create',
     KeyDelete = 'submit_key_delete',
     KeyUpdateName = 'submit_key_update_name',
     KeyUpdateScopes = 'submit_key_update_scopes',
     KeyUpdateExpire = 'submit_key_update_expire',
 
+    DevKeyCreate = 'submit_dev_key_create',
+    DevKeyDelete = 'submit_dev_key_delete',
+    DevKeyUpdateName = 'submit_dev_key_update_name',
+    DevKeyUpdateExpire = 'submit_dev_key_update_expire',
+
     PlatformCreate = 'submit_platform_create',
     PlatformDelete = 'submit_platform_delete',
     PlatformUpdate = 'submit_platform_update',

src/lib/constants.ts

@@ -46,6 +46,8 @@ export enum Dependencies {
     PLATFORMS = 'dependency:platforms',
     KEY = 'dependency:key',
     KEYS = 'dependency:keys',
+    DEV_KEY = 'dependency:dev_key',
+    DEV_KEYS = 'dependency:dev_keys',
     DOMAINS = 'dependency:domains',
     DOMAIN = 'dependency:domains',
     WEBHOOK = 'dependency:webhook',

src/lib/elements/forms/inputSelect.svelte

@@ -4,6 +4,7 @@
 
     export let id: string;
     export let label: string | undefined = undefined;
+    export let helper: string | undefined = undefined;
     export let value: string | number | boolean | null;
     export let optionalText: string | number | boolean | null | undefined = undefined;
     export let placeholder = '';
@@ -55,7 +56,7 @@
     {disabled}
     {isSearchable}
     {required}
-    helper={error}
+    helper={error ?? helper}
     state={error ? 'error' : 'default'}
     on:invalid={handleInvalid}
     on:input

src/routes/(console)/project-[project]/overview/(components)/create.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { InputText } from '$lib/elements/forms/index.js';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import ExpirationInput from './expirationInput.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { onboarding } from '../../store';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import Scopes from '../keys/scopes.svelte';
+
+    const projectId = $page.params.project;
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let scopes = [];
+    let name = '',
+        expire = '';
+
+    async function create() {
+        try {
+            const { $id } = await sdk.forConsole.projects.createKey(
+                projectId,
+                name,
+                scopes,
+                expire || undefined
+            );
+
+            if ($onboarding) {
+                await invalidate(Dependencies.PROJECT);
+            }
+
+            trackEvent(Submit.KeyCreate);
+            await goto(`${base}/project-${projectId}/overview/keys/${$id}`);
+            addNotification({
+                message: `API key has been created`,
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.KeyCreate);
+        }
+    }
+</script>
+
+<Wizard
+    title="Create API key"
+    href={`${base}/project-${projectId}/overview/keys/`}
+    bind:showExitModal
+    column
+    columnSize="s"
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Configuration">
+                <Layout.Stack>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="API key name"
+                        required
+                        bind:value={name} />
+
+                    <ExpirationInput bind:value={expire} keyType="api" />
+                </Layout.Stack>
+            </Fieldset>
+
+            <Fieldset legend="Scopes">
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose which permission scopes to grant your application. It is best
+                        practice to allow only the permissions you need to meet your project goals.
+                    </Typography.Text>
+                    <Scopes bind:scopes />
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>

src/routes/(console)/project-[project]/overview/(components)/delete.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
+    import { page } from '$app/stores';
+
+    export let showDelete = false;
+    export let keyType: 'api' | 'dev' = 'api';
+    export let key: Models.DevKey | Models.Key;
+
+    const projectId = $page.params.project;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const slug = isApiKey ? 'keys' : 'dev-keys';
+    const event = isApiKey ? Submit.KeyDelete : Submit.DevKeyDelete;
+    const dependency = isApiKey ? Dependencies.KEYS : Dependencies.DEV_KEYS;
+
+    let error: string;
+
+    async function handleDelete() {
+        try {
+            isApiKey
+                ? await sdk.forConsole.projects.deleteKey(projectId, key.$id)
+                : await sdk.forConsole.projects.deleteDevKey(projectId, key.$id);
+
+            await invalidate(dependency);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${key.name} has been deleted`
+            });
+            trackEvent(event);
+            await goto(`${base}/project-${projectId}/overview/${slug}`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, event);
+        }
+    }
+</script>
+
+<Confirm onSubmit={handleDelete} title="Delete {label} key" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this key?
+</Confirm>

src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte → src/routes/(console)/project-[project]/overview/(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 {
@@ -19,7 +19,7 @@
         return date.toISOString();
     }
 
-    const options = [
+    const defaultOptions = [
         {
             label: 'Never',
             value: null
@@ -46,10 +46,30 @@
         }
     ];
 
+    const limitedOptions = [
+        {
+            label: '1 Day',
+            value: incrementToday(1, 'day')
+        },
+        {
+            label: '7 Days',
+            value: incrementToday(7, 'day')
+        },
+        {
+            label: '30 days',
+            value: incrementToday(30, 'day')
+        }
+    ];
+
     export let value: string | null = null;
+    export let keyType: 'api' | 'dev' = 'api';
+
+    const options = keyType === 'api' ? defaultOptions : limitedOptions;
 
     function initExpirationSelect() {
-        if (value === null || !isValidDate(value)) return null;
+        if (value === null || !isValidDate(value)) {
+            return options[0]?.value ?? null;
+        }
 
         let result = 'custom';
         for (const option of options) {
@@ -71,15 +91,21 @@
             value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
         }
     }
+
+    $: helper =
+        expirationSelect !== 'custom' && expirationSelect !== null
+            ? `Your key will expire in ${toLocaleDate(value)}`
+            : undefined;
 </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>
+<InputSelect
+    required
+    {helper}
+    {options}
+    id="preset"
+    label="Expiration date"
+    bind:value={expirationSelect} />
+
 {#if expirationSelect === 'custom'}
     <InputDateTime required id="expire" label="" bind:value={expirationCustom} />
 {/if}