From c4331ea10dce0cbf403cae9aec8273f2d003ba2e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 15 Aug 2023 22:47:02 +0200
Subject: [PATCH] feat: new design wizard

---
 .../wizards/functions/createTemplate.svelte   |  11 +-
 .../steps/templateConfiguration.svelte        | 142 +++---------------
 .../functions/steps/templateVariables.svelte  | 131 ++++++++++++++++
 3 files changed, 160 insertions(+), 124 deletions(-)
 create mode 100644 src/lib/wizards/functions/steps/templateVariables.svelte

diff --git a/src/lib/wizards/functions/createTemplate.svelte b/src/lib/wizards/functions/createTemplate.svelte
index dca6b544f..5d9fe8a18 100644
--- a/src/lib/wizards/functions/createTemplate.svelte
+++ b/src/lib/wizards/functions/createTemplate.svelte
@@ -14,6 +14,7 @@
     import TemplateConfiguration from './steps/templateConfiguration.svelte';
     import RepositoryBehaviour from './steps/repositoryBehaviour.svelte';
     import CreateRepository from './steps/createRepository.svelte';
+    import TemplateVariables from './steps/templateVariables.svelte';
 
     async function create() {
         const runtimeDetail = $template.runtimes.find((r) => r.name === $templateConfig.runtime);
@@ -60,18 +61,22 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Function configuration',
+        label: 'Template configuration',
         component: TemplateConfiguration
     });
     stepsComponents.set(2, {
+        label: 'Variables',
+        component: TemplateVariables
+    });
+    stepsComponents.set(3, {
         label: 'Repository behaviour',
         component: RepositoryBehaviour
     });
-    stepsComponents.set(3, {
+    stepsComponents.set(4, {
         label: 'Select repository',
         component: CreateRepository
     });
-    stepsComponents.set(4, {
+    stepsComponents.set(5, {
         label: 'Git configuration',
         component: GitConfiguration
     });
diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index 048bc67d4..e5a5f950b 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -10,42 +10,8 @@
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { template, templateConfig } from '../store';
-    import { scopes } from '$lib/constants';
-    import { addNotification } from '$lib/stores/notifications';
 
     let showCustomId = false;
-    let generatingApiKey = false;
-    let showApiKeyCheck = false;
-
-    async function generateApiKey() {
-        if (generatingApiKey) {
-            return;
-        }
-
-        generatingApiKey = true;
-
-        try {
-            const key = await await sdk.forConsole.projects.createKey(
-                $page.params.project,
-                'Generated for Template',
-                scopes.map((scope) => scope.scope)
-            );
-            $templateConfig.variables['APPWRITE_API_KEY'] = key.secret;
-            showApiKeyCheck = true;
-
-            addNotification({
-                type: 'success',
-                message: 'Key generated successfully.'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        } finally {
-            generatingApiKey = false;
-        }
-    }
 
     async function beforeSubmit() {
         if (!$templateConfig.runtime) {
@@ -56,10 +22,6 @@
             if (!variable.required) {
                 continue;
             }
-
-            if (!$templateConfig.variables[variable.name]) {
-                throw new Error(`Please set ${variable.name} variable.`);
-            }
         }
     }
 
@@ -84,30 +46,13 @@
     <svelte:fragment slot="subtitle">
         {$template.tagline}
     </svelte:fragment>
-    <div class="u-flex u-flex-vertical u-gap-24">
-        <FormList>
-            <InputText
-                label="Name"
-                id="name"
-                placeholder="Function name"
-                bind:value={$templateConfig.name}
-                required />
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                        <span class="icon-pencil" aria-hidden="true" />
-                        <span class="text">Function ID</span>
-                    </Pill>
-                </div>
-            {:else}
-                <CustomId
-                    bind:show={showCustomId}
-                    name="Function"
-                    bind:id={$templateConfig.$id}
-                    fullWidth />
-            {/if}
-        </FormList>
-
+    <FormList>
+        <InputText
+            label="Name"
+            id="name"
+            placeholder="Function name"
+            bind:value={$templateConfig.name}
+            required />
         {#await loadRuntimes()}
             <div class="avatar is-size-x-small">
                 <div class="loader u-margin-16" />
@@ -121,67 +66,22 @@
                 {options}
                 required />
         {/await}
+    </FormList>
 
-        {#if $template.variables.length > 0}
-            <div class="u-flex u-flex-vertical u-gap-16">
-                <p class="text u-bold">Environment variables</p>
-
-                <div class="u-flex u-flex-vertical u-gap-16">
-                    {#each $template.variables as variable}
-                        <div>
-                            {#if variable.name === 'APPWRITE_API_KEY'}
-                                <Alert type="info">
-                                    <svelte:fragment slot="title">API key creation</svelte:fragment>
-                                    <p class="text">
-                                        By clicking generate button, an API key will be
-                                        automatically generated in the background, and filled into
-                                        input field. This API key will be granted all scopes and
-                                        will never expire.
-                                    </p>
-                                </Alert>
-                            {/if}
-                            <div class="u-margin-block-start-12 u-flex u-gap-8 u-cross-end">
-                                <div class="u-width-full-line">
-                                    <InputText
-                                        id={variable.name}
-                                        label={variable.name}
-                                        placeholder={variable.placeholder ?? ''}
-                                        required={variable.required}
-                                        autocomplete={false}
-                                        bind:value={$templateConfig.variables[variable.name]} />
-                                </div>
-
-                                {#if variable.name === 'APPWRITE_API_KEY'}
-                                    <Button
-                                        disabled={$templateConfig.variables[variable.name]
-                                            ? true
-                                            : false}
-                                        secondary
-                                        on:click={generateApiKey}>
-                                        {#if showApiKeyCheck && ($templateConfig.variables[variable.name] ? true : false)}
-                                            <span class="icon-check" aria-hidden="true" />
-                                        {/if}
-
-                                        {#if generatingApiKey}
-                                            <span class="loader is-small" />
-                                        {:else if showApiKeyCheck && ($templateConfig.variables[variable.name] ? true : false)}
-                                            <span class="text">Generated</span>
-                                        {:else}
-                                            <span class="text">Generate</span>
-                                        {/if}
-                                    </Button>
-                                {/if}
-                            </div>
-                            <div class="u-margin-block-start-4">
-                                <p class="helper">
-                                    <span class="icon-info" aria-hidden="true" />
-                                    <span class="text">{@html variable.description}</span>
-                                </p>
-                            </div>
-                        </div>
-                    {/each}
-                </div>
+    <div class="u-margin-block-start-24">
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <span class="icon-pencil" aria-hidden="true" />
+                    <span class="text">Function ID</span>
+                </Pill>
             </div>
+        {:else}
+            <CustomId
+                bind:show={showCustomId}
+                name="Function"
+                bind:id={$templateConfig.$id}
+                fullWidth />
         {/if}
     </div>
 </WizardStep>
diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
new file mode 100644
index 000000000..52a5a05da
--- /dev/null
+++ b/src/lib/wizards/functions/steps/templateVariables.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import Alert from '$lib/components/alert.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import InputText from '$lib/elements/forms/inputText.svelte';
+    import { WizardStep } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
+    import { template, templateConfig } from '../store';
+    import { scopes } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+
+    let generatingApiKey = false;
+    let showApiKeyCheck = false;
+
+    async function generateApiKey() {
+        if (generatingApiKey) {
+            return;
+        }
+
+        generatingApiKey = true;
+
+        try {
+            const key = await await sdk.forConsole.projects.createKey(
+                $page.params.project,
+                'Generated for Template',
+                scopes.map((scope) => scope.scope)
+            );
+            $templateConfig.variables['APPWRITE_API_KEY'] = key.secret;
+            showApiKeyCheck = true;
+
+            addNotification({
+                type: 'success',
+                message: 'Key generated successfully.'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            generatingApiKey = false;
+        }
+    }
+
+    async function beforeSubmit() {
+        if (!$templateConfig.runtime) {
+            throw new Error('Please select a runtime.');
+        }
+
+        for (const variable of $template.variables) {
+            if (!variable.required) {
+                continue;
+            }
+
+            if (!$templateConfig.variables[variable.name]) {
+                throw new Error(`Please set ${variable.name} variable.`);
+            }
+        }
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Environment variables</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Edit the values of the environment variables that will be passed to your function at
+        runtime.
+    </svelte:fragment>
+    <div class="u-flex u-flex-vertical u-gap-24">
+        {#if $template.variables.length > 0}
+            <div class="u-flex u-flex-vertical u-gap-16">
+                <p class="text u-bold">Environment variables</p>
+
+                <div class="u-flex u-flex-vertical u-gap-16">
+                    {#each $template.variables as variable}
+                        <div>
+                            {#if variable.name === 'APPWRITE_API_KEY'}
+                                <Alert type="info">
+                                    <svelte:fragment slot="title">API key creation</svelte:fragment>
+                                    <p class="text">
+                                        By clicking generate button, an API key will be
+                                        automatically generated in the background, and filled into
+                                        input field. This API key will be granted all scopes and
+                                        will never expire.
+                                    </p>
+                                </Alert>
+                            {/if}
+                            <div class="u-margin-block-start-12 u-flex u-gap-8 u-cross-end">
+                                <div class="u-width-full-line">
+                                    <InputText
+                                        id={variable.name}
+                                        label={variable.name}
+                                        placeholder={variable.placeholder ?? ''}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        bind:value={$templateConfig.variables[variable.name]} />
+                                </div>
+
+                                {#if variable.name === 'APPWRITE_API_KEY'}
+                                    <Button
+                                        disabled={$templateConfig.variables[variable.name]
+                                            ? true
+                                            : false}
+                                        secondary
+                                        on:click={generateApiKey}>
+                                        {#if showApiKeyCheck && ($templateConfig.variables[variable.name] ? true : false)}
+                                            <span class="icon-check" aria-hidden="true" />
+                                        {/if}
+
+                                        {#if generatingApiKey}
+                                            <span class="loader is-small" />
+                                        {:else if showApiKeyCheck && ($templateConfig.variables[variable.name] ? true : false)}
+                                            <span class="text">Generated</span>
+                                        {:else}
+                                            <span class="text">Generate</span>
+                                        {/if}
+                                    </Button>
+                                {/if}
+                            </div>
+                            <div class="u-margin-block-start-4">
+                                <p class="helper">
+                                    <span class="icon-info" aria-hidden="true" />
+                                    <span class="text">{@html variable.description}</span>
+                                </p>
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            </div>
+        {/if}
+    </div>
+</WizardStep>