feat: init 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 and createDevelopmentKey method -->
     <Empty
         single
         allowCreate={$canWriteKeys}
         href="https://appwrite.io/docs/advanced/platform/api-keys"
-        target="API key"
+        target={$isStandardApiKey ? 'API key' : '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/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 an {$isStandardApiKey ? 'API' : 'Dev'} key"
+    steps={stepsComponents}
+    on:finish={onFinish} />

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

@@ -3,16 +3,23 @@
     import { WizardStep } from '$lib/layout';
     import ExpirationInput from '../expirationInput.svelte';
     import { key } from './store';
+    import { isStandardApiKey } from '../../store';
 </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">{$isStandardApiKey ? 'API' : 'Dev'} key</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        {#if $isStandardApiKey}
+            Generate API keys to authenticate your application.
+        {:else}
+            Generate Dev keys, suited for improved debugging.
+        {/if}
+    </svelte:fragment>
     <FormList>
         <InputText
             id="name"
             label="Name"
-            placeholder="API key name"
+            placeholder="{$isStandardApiKey ? 'API' : 'Dev'} key name"
             required
             bind:value={$key.name} />
         <ExpirationInput bind:value={$key.expire} />

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);