feat: upgrade functions wizard

src/lib/layout/wizard.svelte

@@ -139,7 +139,18 @@
     }
 
     $: sortedSteps = [...steps].sort(([a], [b]) => (a > b ? 1 : -1));
-    $: isLastStep = $wizard.step === steps.size;
+    $: isLastStep = (() => {
+        if ($wizard.step === steps.size) {
+            return true;
+        }
+        let lastStep = true;
+        steps.forEach((step, i) => {
+            if (i > $wizard.step && !step.disabled) {
+                lastStep = false;
+            }
+        });
+        return lastStep;
+    })();
     $: currentStep = steps.get($wizard.step);
 </script>
 

src/lib/wizards/functions/createManual.svelte

@@ -16,8 +16,8 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import Details from './steps/details.svelte';
-    import Configuration from './steps/configuration.svelte';
+    import Details from './steps/manualDetails.svelte';
+    import Configuration from './steps/manualConfiguration.svelte';
     import ExecuteAccess from './steps/executeAccess.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
 

src/lib/wizards/functions/createTemplate.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
     import { ID, Runtime } from '@appwrite.io/console';
     import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { wizard } from '$lib/stores/wizard';
     import { goto } from '$app/navigation';
-    import { choices, installation, repository, template, templateConfig } from './store';
+    import {
+        choices,
+        installation,
+        repository,
+        template,
+        templateConfig,
+        templateStepsComponents
+    } from './store';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import GitConfiguration from './steps/gitConfiguration.svelte';
-    import TemplateConfiguration from './steps/templateConfiguration.svelte';
-    import RepositoryBehaviour from './steps/repositoryBehaviour.svelte';
-    import CreateRepository from './steps/createRepository.svelte';
-    import TemplateVariables from './steps/templateVariables.svelte';
     import { scopes } from '$lib/constants';
     import { isValueOfStringEnum } from '$lib/helpers/types';
+    import TemplateConfiguration from './steps/templateConfiguration.svelte';
+    import TemplateScopes from './steps/templateScopes.svelte';
+    import TemplateVariables from './steps/templateVariables.svelte';
+    import TemplateDeployment from './steps/templateDeployment.svelte';
+    import CreateRepository from './steps/createRepository.svelte';
+    import GitConfiguration from './steps/gitConfiguration.svelte';
 
     async function create() {
         try {
@@ -50,15 +57,27 @@
                 runtimeDetail.entrypoint,
                 runtimeDetail.commands || undefined,
                 undefined,
-                $installation.$id,
-                $repository.id,
-                $choices.branch,
-                $choices.silentMode || undefined,
-                $choices.rootDir || undefined,
-                $template.providerRepositoryId,
-                $template.providerOwner,
-                runtimeDetail.providerRootDirectory,
-                $template.providerBranch
+                $templateConfig.repositoryBehaviour === 'manual' ? undefined : $installation.$id,
+                $templateConfig.repositoryBehaviour === 'manual' ? undefined : $repository.id,
+                $templateConfig.repositoryBehaviour === 'manual' ? undefined : $choices.branch,
+                $templateConfig.repositoryBehaviour === 'manual'
+                    ? undefined
+                    : $choices.silentMode || undefined,
+                $templateConfig.repositoryBehaviour === 'manual'
+                    ? undefined
+                    : $choices.rootDir || undefined,
+                $templateConfig.repositoryBehaviour === 'manual'
+                    ? undefined
+                    : $template.providerRepositoryId,
+                $templateConfig.repositoryBehaviour === 'manual'
+                    ? undefined
+                    : $template.providerOwner,
+                $templateConfig.repositoryBehaviour === 'manual'
+                    ? undefined
+                    : runtimeDetail.providerRootDirectory,
+                $templateConfig.repositoryBehaviour === 'manual'
+                    ? undefined
+                    : $template.providerBranch
             );
 
             if ($templateConfig.variables) {
@@ -93,27 +112,35 @@
         installation.set(null);
     }
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
+    $templateStepsComponents.set(1, {
         label: 'Configuration',
         component: TemplateConfiguration
     });
-    stepsComponents.set(2, {
+    $templateStepsComponents.set(2, {
+        label: 'Scopes',
+        component: TemplateScopes
+    });
+    $templateStepsComponents.set(3, {
         label: 'Variables',
-        component: TemplateVariables
+        component: TemplateVariables,
+        disabled: !$template?.variables?.length
     });
-    stepsComponents.set(3, {
-        label: 'Connect',
-        component: RepositoryBehaviour
+    $templateStepsComponents.set(4, {
+        label: 'Deployment',
+        component: TemplateDeployment
     });
-    stepsComponents.set(4, {
+    $templateStepsComponents.set(5, {
         label: 'Repository',
         component: CreateRepository
     });
-    stepsComponents.set(5, {
+    $templateStepsComponents.set(6, {
         label: 'Branch',
         component: GitConfiguration
     });
 </script>
 
-<Wizard title="Create Function" steps={stepsComponents} on:finish={create} on:exit={resetState} />
+<Wizard
+    title="Create Function"
+    steps={$templateStepsComponents}
+    on:finish={create}
+    on:exit={resetState} />

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

@@ -1,41 +0,0 @@
-<script lang="ts">
-    import { LabelCard } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { app } from '$lib/stores/app';
-    import { templateConfig } from '../store';
-
-    async function beforeSubmit() {
-        if (!$templateConfig.repositoryBehaviour) {
-            throw new Error('Please select repository behaviour.');
-        }
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Connect</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Connect function to a new repository or to an existing one within a selected Git
-        organization.
-    </svelte:fragment>
-
-    <ul class="u-flex u-flex-vertical u-gap-16">
-        <LabelCard
-            name="behaviour"
-            value="new"
-            backgroundColor={$app.themeInUse === 'light' ? 'var(--color-neutral-5)' : null}
-            backgroundColorHover={$app.themeInUse === 'light' ? 'var(--color-neutral-10)' : null}
-            bind:group={$templateConfig.repositoryBehaviour}>
-            <svelte:fragment slot="title">Create a new repository</svelte:fragment>
-            Clone the template and create a new repository in your selected organization.
-        </LabelCard>
-        <LabelCard
-            name="behaviour"
-            value="existing"
-            backgroundColor={$app.themeInUse === 'light' ? 'var(--color-neutral-5)' : null}
-            backgroundColorHover={$app.themeInUse === 'light' ? 'var(--color-neutral-10)' : null}
-            bind:group={$templateConfig.repositoryBehaviour}>
-            <svelte:fragment slot="title">Add to existing repository</svelte:fragment>
-            Clone the template to an existing repository in your selected organization.
-        </LabelCard>
-    </ul>
-</WizardStep>

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { LabelCard } from '$lib/components';
+    import { FormList } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { templateConfig, templateStepsComponents } from '../store';
+
+    async function beforeSubmit() {
+        if (!$templateConfig.repositoryBehaviour) {
+            throw new Error('Please select repository behaviour.');
+        }
+    }
+
+    $: if ($templateConfig.repositoryBehaviour === 'manual') {
+        $templateStepsComponents.get(5).disabled = true;
+        $templateStepsComponents.get(6).disabled = true;
+        $templateStepsComponents = $templateStepsComponents;
+    } else {
+        $templateStepsComponents.get(5).disabled = false;
+        $templateStepsComponents.get(6).disabled = false;
+        $templateStepsComponents = $templateStepsComponents;
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Deployment</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Connect function to a new repository or to an existing one within a selected Git
+        organization.
+    </svelte:fragment>
+
+    <h3>Automatic with Git <span class="inline-code">Recommended</span></h3>
+    <FormList gap={16} class="u-margin-block-start-8">
+        <LabelCard name="behaviour" value="new" bind:group={$templateConfig.repositoryBehaviour}>
+            <svelte:fragment slot="title">Create a new repository</svelte:fragment>
+            Clone the template and create a new repository in your selected organization.
+        </LabelCard>
+        <LabelCard
+            name="behaviour"
+            value="existing"
+            bind:group={$templateConfig.repositoryBehaviour}>
+            <svelte:fragment slot="title">Add to existing repository</svelte:fragment>
+            Clone the template to an existing repository in your selected organization.
+        </LabelCard>
+    </FormList>
+
+    <h3 class="u-margin-block-start-24">Manual with CLI</h3>
+    <ul class="u-margin-block-start-8">
+        <LabelCard name="behaviour" value="manual" bind:group={$templateConfig.repositoryBehaviour}>
+            <svelte:fragment slot="title">Create manually</svelte:fragment>
+            Clone the template to an existing repository in your selected organization.
+        </LabelCard>
+    </ul>
+</WizardStep>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { CustomId } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { InputText, InputSelect, FormList } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { onMount } from 'svelte';
+    import { createFunction } from '../store';
+    import { runtimesList } from '$routes/(console)/project-[project]/functions/store';
+
+    let showCustomId = false;
+
+    let options = [];
+
+    onMount(async () => {
+        options = (await $runtimesList).runtimes.map((runtime) => ({
+            label: `${runtime.name} - ${runtime.version}`,
+            value: runtime.$id
+        }));
+    });
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Details</svelte:fragment>
+    <svelte:fragment slot="subtitle">Create and deploy your function manually.</svelte:fragment>
+    <FormList>
+        <InputText
+            label="Name"
+            id="name"
+            placeholder="Function name"
+            autofocus
+            bind:value={$createFunction.name}
+            required />
+
+        <InputSelect
+            label="Runtime"
+            id="runtime"
+            placeholder="Select runtime"
+            bind:value={$createFunction.runtime}
+            {options}
+            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={$createFunction.$id}
+                fullWidth />
+        {/if}
+    </FormList>
+</WizardStep>

src/lib/wizards/functions/store.ts

@@ -1,7 +1,8 @@
 import { page } from '$app/stores';
+import type { WizardStepsType } from '$lib/layout/wizard.svelte';
 import type { MarketplaceTemplate } from '$lib/stores/marketplace';
 import type { Models } from '@appwrite.io/console';
-import { derived, writable } from 'svelte/store';
+import { derived, writable, type Writable } from 'svelte/store';
 
 export const template = writable<MarketplaceTemplate>();
 export const templateConfig = writable<{
@@ -9,9 +10,9 @@ export const templateConfig = writable<{
     name: string;
     runtime: string;
     variables: { [key: string]: unknown };
-    repositoryBehaviour: 'new' | 'existing';
-    repositoryName: string;
-    repositoryPrivate: boolean;
+    repositoryBehaviour: 'new' | 'existing' | 'manual';
+    repositoryName?: string;
+    repositoryPrivate?: boolean;
     repositoryId: string;
     appwriteApiKey?: string;
     generateKey?: boolean;
@@ -59,3 +60,5 @@ function createFunctionStore() {
 export const createFunction = createFunctionStore();
 
 export const createFunctionDeployment = writable<FileList>();
+
+export const templateStepsComponents: Writable<WizardStepsType> = writable(new Map());