fix: appwrite variable

src/lib/stores/marketplace.ts

@@ -631,14 +631,14 @@ export const marketplace = [
     }
 ];
 
-type Runtime = {
+export type Runtime = {
     name: string;
     commands: string;
     entrypoint: string;
     providerRootDirectory: string;
 };
 
-type Variable = {
+export type Variable = {
     name: string;
     description: string;
     value?: string;

src/lib/wizards/functions/components/appwriteVariable.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { FormList, Helper, InputChoice, InputText } from '$lib/elements/forms';
+    import type { Variable } from '$lib/stores/marketplace';
+    import { templateConfig } from '../store';
+
+    export let appwriteVariable: Variable;
+</script>
+
+<div class="box" style:--box-padding="1rem" style:--box-border-radius="var(--border-radius-small)">
+    <FormList>
+        <div>
+            <InputText
+                id={appwriteVariable.name}
+                label={appwriteVariable.name}
+                placeholder={appwriteVariable.placeholder ?? 'Enter value'}
+                required={appwriteVariable.required}
+                bind:value={$templateConfig.appwriteApiKey}
+                disabled={!!$templateConfig.generateKey} />
+            <Helper type="neutral">
+                This API key will allow you to interact with the Appwrite server APIs. <a
+                    href="http://#"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="link">Learn more</a
+                >.
+            </Helper>
+        </div>
+        <InputChoice
+            bind:value={$templateConfig.generateKey}
+            id="generate"
+            label="Generate API key on completion"
+            disabled={!!$templateConfig.appwriteApiKey}>
+            The <code class="inline-code">APPWRITE_API_KEY</code> will be automatically generated for
+            your project and applied to this function once it's created.
+        </InputChoice>
+    </FormList>
+</div>

src/lib/wizards/functions/createTemplate.svelte

@@ -22,14 +22,16 @@
             const runtimeDetail = $template.runtimes.find(
                 (r) => r.name === $templateConfig.runtime
             );
-
-            const key = await sdk.forConsole.projects.createKey(
-                $page.params.project,
-                'Generated for Template',
-                scopes.map((scope) => scope.scope)
-            );
-            $templateConfig.variables['APPWRITE_API_KEY'] = key.secret;
-
+            if ($templateConfig.appwriteApiKey) {
+                $templateConfig.variables['APPWRITE_API_KEY'] = $templateConfig.appwriteApiKey;
+            } else if ($templateConfig?.generateKey) {
+                const key = await sdk.forConsole.projects.createKey(
+                    $page.params.project,
+                    'Generated for Template',
+                    scopes.map((scope) => scope.scope)
+                );
+                $templateConfig.variables['APPWRITE_API_KEY'] = key.secret;
+            }
             const response = await sdk.forProject.functions.create(
                 $templateConfig.$id || ID.unique(),
                 $templateConfig.name,

src/lib/wizards/functions/steps/templateVariables.svelte

@@ -2,8 +2,9 @@
     import InputText from '$lib/elements/forms/inputText.svelte';
     import { WizardStep } from '$lib/layout';
     import { template, templateConfig } from '../store';
-    import { FormList, Helper, InputChoice } from '$lib/elements/forms';
+    import { FormList, Helper } from '$lib/elements/forms';
     import { Card, Collapsible, CollapsibleItem } from '$lib/components';
+    import AppwriteVariable from '../components/appwriteVariable.svelte';
 
     async function beforeSubmit() {
         for (const variable of $template.variables) {
@@ -17,13 +18,8 @@
         }
     }
 
-    $: appwriteVariable = $template.variables.find((v) => v.name === 'APPWRITE_API_KEY');
-    $: requiredVariables = $template?.variables?.filter(
-        (v) => v.required && v.name !== 'APPWRITE_API_KEY'
-    );
-    $: optionalVariables = $template?.variables?.filter(
-        (v) => !v.required && v.name !== 'APPWRITE_API_KEY'
-    );
+    $: requiredVariables = $template?.variables?.filter((v) => v.required);
+    $: optionalVariables = $template?.variables?.filter((v) => !v.required);
 </script>
 
 <WizardStep {beforeSubmit}>
@@ -43,58 +39,32 @@
 
                     <FormList>
                         {#each requiredVariables as variable}
-                            <div>
-                                <InputText
-                                    id={variable.name}
-                                    label={variable.name}
-                                    placeholder={variable.placeholder ?? 'Enter value'}
-                                    required={variable.required}
-                                    autocomplete={false}
-                                    bind:value={$templateConfig.variables[variable.name]} />
+                            {#if variable.name === 'APPWRITE_API_KEY'}
+                                <AppwriteVariable appwriteVariable={variable} />
+                            {:else}
+                                <div>
+                                    <InputText
+                                        id={variable.name}
+                                        label={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        bind:value={$templateConfig.variables[variable.name]} />
 
-                                <Helper type="neutral">
-                                    {@html variable.description}
-                                </Helper>
-                            </div>
+                                    <Helper type="neutral">
+                                        {@html variable.description}
+                                    </Helper>
+                                </div>
+                            {/if}
                         {/each}
                     </FormList>
                 </CollapsibleItem>
             </Collapsible>
         {/if}
 
-        {#if appwriteVariable}
-            <div
-                class="box"
-                style:--box-padding="1rem"
-                style:--box-border-radius="var(--border-radius-small)">
-                <FormList>
-                    <div>
-                        <InputText
-                            id={appwriteVariable.name}
-                            label={appwriteVariable.name}
-                            placeholder={appwriteVariable.placeholder ?? 'Enter value'}
-                            required={appwriteVariable.required}
-                            autocomplete={false}
-                            bind:value={$templateConfig.appwriteApiKey} />
-                        <Helper type="neutral">
-                            This API key will allow you to interact with the Appwrite server APIs. <a
-                                href="http://#"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="link">Learn more</a
-                            >.
-                        </Helper>
-                    </div>
-                    <InputChoice id="generate" label="Generate API key on completion">
-                        The <code class="inline-code">APPWRITE_API_KEY</code> will be automatically generated
-                        for your project and applied to this function once it's created.
-                    </InputChoice>
-                </FormList>
-            </div>
-        {/if}
         {#if optionalVariables?.length}
             <Collapsible>
-                <CollapsibleItem>
+                <CollapsibleItem open={!requiredVariables?.length}>
                     <svelte:fragment slot="title">Optional variables</svelte:fragment>
                     <svelte:fragment slot="subtitle">
                         <span class="inline-tag">{optionalVariables.length}</span>
@@ -102,19 +72,23 @@
 
                     <FormList>
                         {#each optionalVariables as variable}
-                            <div>
-                                <InputText
-                                    id={variable.name}
-                                    label={variable.name}
-                                    placeholder={variable.placeholder ?? 'Enter value'}
-                                    required={variable.required}
-                                    autocomplete={false}
-                                    bind:value={$templateConfig.variables[variable.name]} />
+                            {#if variable.name === 'APPWRITE_API_KEY'}
+                                <AppwriteVariable appwriteVariable={variable} />
+                            {:else}
+                                <div>
+                                    <InputText
+                                        id={variable.name}
+                                        label={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        bind:value={$templateConfig.variables[variable.name]} />
 
-                                <Helper type="neutral">
-                                    {@html variable.description}
-                                </Helper>
-                            </div>
+                                    <Helper type="neutral">
+                                        {@html variable.description}
+                                    </Helper>
+                                </div>
+                            {/if}
                         {/each}
                     </FormList>
                 </CollapsibleItem>

src/lib/wizards/functions/store.ts

@@ -14,6 +14,7 @@ export const templateConfig = writable<{
     repositoryPrivate: boolean;
     repositoryId: string;
     appwriteApiKey?: string;
+    generateKey?: boolean;
 }>();
 export const repository = writable<Models.ProviderRepository>();
 export const installation = writable<Models.Installation>();