Feat: Dev keys

src/routes/(console)/project-[project]/overview/+layout.svelte

@@ -21,7 +21,7 @@
     import Onboard from './onboard.svelte';
     import Realtime from './realtime.svelte';
     import Requests from './requests.svelte';
-    import { usage } from './store';
+    import { isStandardApiKey, usage } from './store';
     import { formatNum } from '$lib/helpers/string';
     import { total } from '$lib/helpers/array';
     import type { Metric } from '$lib/sdk/usage';
@@ -32,6 +32,14 @@
     $: path = `${base}/project-${projectId}/overview`;
     let period: UsagePeriods = '30d';
 
+    $: currentKeyType = $page.url.searchParams.get('mode') || 'standard';
+
+    $: isSelected = (mode: string): boolean => {
+        return $page.url.pathname === `${path}/keys` && currentKeyType === mode;
+    };
+
+    $: isStandardApiKey.set(isSelected('standard'));
+
     onMount(handle);
     afterNavigate(handle);
 
@@ -69,6 +77,16 @@
             keys: ['c', 'k'],
             group: 'integrations',
             disabled: !$canWriteProjects
+        },
+        {
+            label: 'Create Dev Key',
+            icon: 'plus',
+            callback() {
+                createApiKey();
+            },
+            keys: ['c', 'd'],
+            group: 'integrations',
+            disabled: !$canWriteProjects
         }
     ]);
 
@@ -222,11 +240,21 @@
                         <Tab
                             href={`${path}/platforms`}
                             selected={$page.url.pathname === `${path}/platforms`}
-                            event="platforms">Platforms</Tab>
+                            event="platforms"
+                            >Platforms
+                        </Tab>
+                        <Tab
+                            href={`${path}/keys?mode=standard`}
+                            selected={isSelected('standard')}
+                            event="keys"
+                            >API keys
+                        </Tab>
                         <Tab
-                            href={`${path}/keys`}
-                            selected={$page.url.pathname === `${path}/keys`}
-                            event="keys">API keys</Tab>
+                            href={`${path}/keys?mode=dev`}
+                            selected={isSelected('dev')}
+                            event="dev-keys"
+                            >Dev keys
+                        </Tab>
                     </ul>
                 </div>
 

src/routes/(console)/project-[project]/overview/keys/+page.svelte

@@ -24,6 +24,7 @@
     import { get } from 'svelte/store';
     import type { PageData } from './$types';
     import Wizard from './wizard.svelte';
+    import { isStandardApiKey } from '../store';
 
     export let data: PageData;
 </script>
@@ -34,7 +35,9 @@
         <span class="u-margin-inline-start-auto">
             <Button on:click={createApiKey}>
                 <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create API key</span>
+                <span class="text">
+                    Create {$isStandardApiKey ? 'API' : 'Dev'} key
+                </span>
             </Button>
         </span>
     {/if}
@@ -68,10 +71,11 @@
         </TableBody>
     </Table>
 {:else}
+    <!-- TODO: create correct links method -->
     <Empty
         single
         allowCreate={$canWriteKeys}
         href="https://appwrite.io/docs/advanced/platform/api-keys"
-        target="API key"
+        target="{$isStandardApiKey ? 'API' : 'Dev'} key"
         on:click={createApiKey} />
 {/if}

src/routes/(console)/project-[project]/overview/keys/+page.ts

@@ -2,12 +2,24 @@ import { Dependencies } from '$lib/constants';
 import { sdk } from '$lib/stores/sdk';
 import { selectedTab } from '../store';
 import type { PageLoad } from './$types';
+import { sleep } from '$lib/helpers/promises';
 
 selectedTab.set('keys');
 
-export const load: PageLoad = async ({ params, depends }) => {
+export const load: PageLoad = async ({ params, depends, url }) => {
     depends(Dependencies.KEYS);
+
+    const currentKeyType = url.searchParams.get('mode') || 'standard';
+
+    const isStandardApiKey = currentKeyType === 'standard';
+
+    // TODO: (@itznotabug) Replace this delay with a proper API call
+    //  for development keys once the backend is implemented.
+    if (!isStandardApiKey) await sleep(1250);
+
     return {
+        // TODO: (@itznotabug) Update this logic to fetch actual development keys from the backend
+        //  when the console SDK supports it.
         keys: await sdk.forConsole.projects.listKeys(params.project)
     };
 };

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

@@ -19,7 +19,7 @@
         return date.toISOString();
     }
 
-    const options = [
+    const defaultOptions = [
         {
             label: 'Never',
             value: null
@@ -46,10 +46,31 @@
         }
     ];
 
+    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 isStandardApiKey: boolean = false;
+
+    const options = isStandardApiKey ? 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) {

src/routes/(console)/project-[project]/overview/keys/wizard.svelte

@@ -11,9 +11,14 @@
     import { onDestroy } from 'svelte';
     import { onboarding } from '../../store';
     import { Dependencies } from '$lib/constants';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { base } from '$app/paths';
+    import { isStandardApiKey } from '../store';
 
+    // TODO: check onFinish as to which key type was generated, standard or development.
+    //  Based on that, call appropriate creator method and update notification.
+
+    // TODO: also check if we should add different keys for events based on standard/dev keys.
     async function onFinish() {
         try {
             const { $id } = await sdk.forConsole.projects.createKey(
@@ -53,4 +58,7 @@
     });
 </script>
 
-<Wizard title="Create an API key" steps={stepsComponents} on:finish={onFinish} />
+<Wizard
+    title="Create {$isStandardApiKey ? 'an API' : 'a Dev'} key"
+    steps={stepsComponents}
+    on:finish={onFinish} />

src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte

@@ -3,18 +3,28 @@
     import { WizardStep } from '$lib/layout';
     import ExpirationInput from '../expirationInput.svelte';
     import { key } from './store';
+    import { isStandardApiKey } from '../../store';
+
+    const keyTypeName = $isStandardApiKey ? 'API' : 'Dev';
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">API key</svelte:fragment>
-    <svelte:fragment slot="subtitle">Let's create an API key.</svelte:fragment>
+    <svelte:fragment slot="title">{keyTypeName} key</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        {#if $isStandardApiKey}
+            Generate API keys to authenticate your application. While still in development, use Dev
+            keys instead, as they're better suited for debugging.
+        {:else}
+            Test your app without rate limits and more detailed error messages.
+        {/if}
+    </svelte:fragment>
     <FormList>
         <InputText
             id="name"
             label="Name"
-            placeholder="API key name"
+            placeholder="{keyTypeName} key name"
             required
             bind:value={$key.name} />
-        <ExpirationInput bind:value={$key.expire} />
+        <ExpirationInput bind:value={$key.expire} isStandardApiKey={$isStandardApiKey} />
     </FormList>
 </WizardStep>

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

@@ -13,6 +13,7 @@
     import Wizard from './keys/wizard.svelte';
     import { canWriteKeys, canWritePlatforms } from '$lib/stores/roles';
     import { base } from '$app/paths';
+    import { isStandardApiKey } from './store';
 
     export let projectId: string;
 
@@ -44,8 +45,9 @@
         }
     ];
 
-    function createKey() {
+    function createKey(isDevKey: boolean = false) {
         wizard.start(Wizard);
+        isStandardApiKey.set(!isDevKey);
     }
 
     $: onBoardImage1Mobile = $app.themeInUse === 'dark' ? OnboardDark1Mobile : OnboardLight1Mobile;
@@ -121,7 +123,7 @@
                             <button
                                 type="button"
                                 class="card u-width-full-line"
-                                on:click={createKey}>
+                                on:click={() => createKey()}>
                                 <span class="u-flex u-cross-center u-gap-16">
                                     <div class="avatar is-medium" aria-hidden="true">
                                         <img
@@ -136,6 +138,25 @@
                                 </span>
                             </button>
                         </li>
+                        <li class="grid-box-item">
+                            <button
+                                type="button"
+                                class="card u-width-full-line"
+                                on:click={() => createKey(true)}>
+                                <span class="u-flex u-cross-center u-gap-16">
+                                    <div class="avatar is-medium" aria-hidden="true">
+                                        <img
+                                            src={`${base}/icons/${$app.themeInUse}/grayscale/code.svg`}
+                                            alt="technology" />
+                                    </div>
+                                    <span class="text">Dev key</span>
+                                    <span
+                                        class="icon-plus u-margin-inline-start-auto"
+                                        style="font-size: var(--icon-size-large);"
+                                        aria-hidden="true" />
+                                </span>
+                            </button>
+                        </li>
                         <li class="grid-box-item">
                             <a
                                 href={`${base}/project-${projectId}/settings/webhooks`}

src/routes/(console)/project-[project]/overview/store.ts

@@ -18,3 +18,5 @@ export const usage = cachedStore<
 });
 
 export const selectedTab: Writable<'platforms' | 'keys'> = writable('platforms');
+
+export const isStandardApiKey = writable(true);