From 05b9a7e1ff9516090e90b7f8525a41e26dacaddb Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 29 Nov 2024 17:00:07 +0530
Subject: [PATCH 1/5] feat: init dev keys.

---
 .../project-[project]/overview/+layout.svelte | 38 ++++++++++++++++---
 .../overview/keys/+page.svelte                |  8 +++-
 .../project-[project]/overview/keys/+page.ts  | 14 ++++++-
 .../overview/keys/wizard.svelte               | 12 +++++-
 .../overview/keys/wizard/step1.svelte         | 13 +++++--
 .../project-[project]/overview/store.ts       |  2 +
 6 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/+layout.svelte b/src/routes/(console)/project-[project]/overview/+layout.svelte
index d0f59d1fc0..e1a191776b 100644
--- a/src/routes/(console)/project-[project]/overview/+layout.svelte
+++ b/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>
 
diff --git a/src/routes/(console)/project-[project]/overview/keys/+page.svelte b/src/routes/(console)/project-[project]/overview/keys/+page.svelte
index 7a54cf0186..3ee1d948fa 100644
--- a/src/routes/(console)/project-[project]/overview/keys/+page.svelte
+++ b/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}
diff --git a/src/routes/(console)/project-[project]/overview/keys/+page.ts b/src/routes/(console)/project-[project]/overview/keys/+page.ts
index 160a525606..c51d5b35e5 100644
--- a/src/routes/(console)/project-[project]/overview/keys/+page.ts
+++ b/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)
     };
 };
diff --git a/src/routes/(console)/project-[project]/overview/keys/wizard.svelte b/src/routes/(console)/project-[project]/overview/keys/wizard.svelte
index e6c6701fae..d51c3ffa3d 100644
--- a/src/routes/(console)/project-[project]/overview/keys/wizard.svelte
+++ b/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} />
diff --git a/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte b/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte
index cb53ed0346..6062bc6f8b 100644
--- a/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte
+++ b/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} />
diff --git a/src/routes/(console)/project-[project]/overview/store.ts b/src/routes/(console)/project-[project]/overview/store.ts
index 2c18cefa96..6f139b5cd8 100644
--- a/src/routes/(console)/project-[project]/overview/store.ts
+++ b/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);

From 1e7371106d90b39e0802a0b13a25d0abfab1731c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 29 Nov 2024 17:33:50 +0530
Subject: [PATCH 2/5] add: new dev keys card on onboarding.

---
 .../project-[project]/overview/onboard.svelte | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index 677258ccc6..8f98c51b28 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/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`}

From 54d63113ca8b4480f07bcfa2ca08aa38ca1304f4 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 29 Nov 2024 17:34:27 +0530
Subject: [PATCH 3/5] misc: update copies, comments, etc.

---
 .../(console)/project-[project]/overview/keys/+page.svelte      | 2 +-
 .../(console)/project-[project]/overview/keys/wizard.svelte     | 2 +-
 .../project-[project]/overview/keys/wizard/step1.svelte         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/keys/+page.svelte b/src/routes/(console)/project-[project]/overview/keys/+page.svelte
index 3ee1d948fa..60ff3c907e 100644
--- a/src/routes/(console)/project-[project]/overview/keys/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/+page.svelte
@@ -71,7 +71,7 @@
         </TableBody>
     </Table>
 {:else}
-    <!-- TODO: create correct links and createDevelopmentKey method -->
+    <!-- TODO: create correct links method -->
     <Empty
         single
         allowCreate={$canWriteKeys}
diff --git a/src/routes/(console)/project-[project]/overview/keys/wizard.svelte b/src/routes/(console)/project-[project]/overview/keys/wizard.svelte
index d51c3ffa3d..da34315877 100644
--- a/src/routes/(console)/project-[project]/overview/keys/wizard.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/wizard.svelte
@@ -59,6 +59,6 @@
 </script>
 
 <Wizard
-    title="Create an {$isStandardApiKey ? 'API' : 'Dev'} key"
+    title="Create {$isStandardApiKey ? 'an API' : 'a Dev'} key"
     steps={stepsComponents}
     on:finish={onFinish} />
diff --git a/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte b/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte
index 6062bc6f8b..1e78164ba2 100644
--- a/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte
@@ -12,7 +12,7 @@
         {#if $isStandardApiKey}
             Generate API keys to authenticate your application.
         {:else}
-            Generate Dev keys, suited for improved debugging.
+            Generate Dev keys for improved debugging while still developing.
         {/if}
     </svelte:fragment>
     <FormList>

From 7fed9c02e2739e02fc6325d0fb525c85e7630c66 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 29 Nov 2024 17:36:37 +0530
Subject: [PATCH 4/5] ran: formatter.

---
 src/routes/(console)/project-[project]/overview/onboard.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index 8f98c51b28..61142c29d3 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -47,7 +47,7 @@
 
     function createKey(isDevKey: boolean = false) {
         wizard.start(Wizard);
-        isStandardApiKey.set(!isDevKey)
+        isStandardApiKey.set(!isDevKey);
     }
 
     $: onBoardImage1Mobile = $app.themeInUse === 'dark' ? OnboardDark1Mobile : OnboardLight1Mobile;

From d37192cb47db130c8fa2533e0c9b182d182b5405 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 29 Nov 2024 18:08:57 +0530
Subject: [PATCH 5/5] update: expirations for different key types.

---
 .../overview/keys/+page.svelte                |  2 +-
 .../overview/keys/expirationInput.svelte      | 25 +++++++++++++++++--
 .../overview/keys/wizard/step1.svelte         | 13 ++++++----
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/keys/+page.svelte b/src/routes/(console)/project-[project]/overview/keys/+page.svelte
index 60ff3c907e..fefc9bb678 100644
--- a/src/routes/(console)/project-[project]/overview/keys/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/+page.svelte
@@ -76,6 +76,6 @@
         single
         allowCreate={$canWriteKeys}
         href="https://appwrite.io/docs/advanced/platform/api-keys"
-        target={$isStandardApiKey ? 'API key' : 'Dev key'}
+        target="{$isStandardApiKey ? 'API' : 'Dev'} key"
         on:click={createApiKey} />
 {/if}
diff --git a/src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte b/src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte
index 843cc9f3d4..1f0fe1930a 100644
--- a/src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte
+++ b/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) {
diff --git a/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte b/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte
index 1e78164ba2..78a0df02db 100644
--- a/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/wizard/step1.svelte
@@ -4,24 +4,27 @@
     import ExpirationInput from '../expirationInput.svelte';
     import { key } from './store';
     import { isStandardApiKey } from '../../store';
+
+    const keyTypeName = $isStandardApiKey ? 'API' : 'Dev';
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">{$isStandardApiKey ? 'API' : 'Dev'} key</svelte:fragment>
+    <svelte:fragment slot="title">{keyTypeName} key</svelte:fragment>
     <svelte:fragment slot="subtitle">
         {#if $isStandardApiKey}
-            Generate API keys to authenticate your application.
+            Generate API keys to authenticate your application. While still in development, use Dev
+            keys instead, as they're better suited for debugging.
         {:else}
-            Generate Dev keys for improved debugging while still developing.
+            Test your app without rate limits and more detailed error messages.
         {/if}
     </svelte:fragment>
     <FormList>
         <InputText
             id="name"
             label="Name"
-            placeholder="{$isStandardApiKey ? 'API' : 'Dev'} 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>