From 37de7d5ed90177ae8e6fd0bd13f30b5547aadde0 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 28 May 2025 16:23:28 +0530
Subject: [PATCH 1/2] update: patch the migrations flow.

---
 .../(console)/(migration-wizard)/index.ts     |   2 +
 .../(migration-wizard)/resource-form.svelte   | 275 +++---------
 .../(migration-wizard)/wizard.svelte          | 413 ++++++++++++++++--
 .../migrations/(import)/importReport.svelte   | 120 ++++-
 .../settings/migrations/(import)/step1.svelte |   0
 .../settings/migrations/(import)/step2.svelte |   0
 6 files changed, 550 insertions(+), 260 deletions(-)
 delete mode 100644 src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte
 delete mode 100644 src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte

diff --git a/src/routes/(console)/(migration-wizard)/index.ts b/src/routes/(console)/(migration-wizard)/index.ts
index 9c065b9bf0..fcde1e141a 100644
--- a/src/routes/(console)/(migration-wizard)/index.ts
+++ b/src/routes/(console)/(migration-wizard)/index.ts
@@ -3,6 +3,7 @@ import { wizard } from '$lib/stores/wizard';
 import { requestedMigration } from '$routes/store';
 import { get, writable } from 'svelte/store';
 import Wizard from './wizard.svelte';
+import { Region } from '@appwrite.io/console';
 
 export const formData = createMigrationFormStore();
 
@@ -18,5 +19,6 @@ export function openMigrationWizard() {
 }
 
 export const selectedProject = writable<string>(null);
+export const selectedRegion = writable<Region>(Region.Fra);
 
 export const provider = createMigrationProviderStore();
diff --git a/src/routes/(console)/(migration-wizard)/resource-form.svelte b/src/routes/(console)/(migration-wizard)/resource-form.svelte
index d438e4fd85..103d084b21 100644
--- a/src/routes/(console)/(migration-wizard)/resource-form.svelte
+++ b/src/routes/(console)/(migration-wizard)/resource-form.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { deepMap } from '$lib/helpers/object';
-    import type { WritableValue } from '$lib/helpers/types';
-    import { Alert, Divider, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
+    import { Alert, Divider, Layout } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
     import {
         createMigrationFormStore,
         createMigrationProviderStore,
         isVersionAtLeast,
+        type MigrationFormData,
         providerResources,
         resourcesToMigrationForm
     } from '$lib/stores/migration';
@@ -21,48 +21,7 @@
     export let provider: ReturnType<typeof createMigrationProviderStore>;
     export let projectSdk: ReturnType<typeof sdk.forProject>;
 
-    type ValueOf<T> = T[keyof T];
-    type FormData = WritableValue<typeof formData>;
-    // TL;DR of this type: It gets an object with two levels (in this case FormData)
-    // And returns a join of the keys with a dot between them.
-    // e.g. If FormData was { users: { root: boolean, teams: boolean } }
-    // The type would be 'users.root' | 'users.teams'
-    type FormKeys = ValueOf<{
-        [K in keyof FormData]: ValueOf<{
-            [L in keyof FormData[K]]: L extends string ? `${K}.${L}` : never;
-        }>;
-    }>;
-
-    /**
-     *
-     * @param field {string} The field to update.
-     * Represents the path to the field in the formData object e.g. 'users.root'
-     */
-    function handleInputChange(field: FormKeys) {
-        return (event: Event) => {
-            const checked = (event.target as HTMLInputElement).checked;
-            // For each entry in formData, if the root is changed, change all children to the same value
-            // otherwise, if a child is changed to true, change the root to true
-
-            const [parent, child] = field.split('.');
-            if (child === 'root') {
-                formData.update((data) => {
-                    data[parent].root = checked;
-                    for (const key in data[parent]) {
-                        if (key !== 'root') {
-                            data[parent][key] = checked;
-                        }
-                    }
-                    return data;
-                });
-            } else if (checked) {
-                formData.update((data) => {
-                    data[parent].root = checked;
-                    return data;
-                });
-            }
-        };
-    }
+    export let migrationType: 'cloud' | 'provider' = 'provider';
 
     function deselectAll() {
         $formData = deepMap($formData, (v) => {
@@ -77,12 +36,12 @@
         $formData = resourcesToMigrationForm(resources, version);
     }
 
-    let report: Models.MigrationReport;
     $: version = report?.version || '0.0.0';
 
+    let error = false;
     let isOpen = false;
+    let report: Models.MigrationReport;
 
-    let error = false;
     onMount(async () => {
         isOpen = true;
         deselectAll();
@@ -112,7 +71,6 @@
                         providerResources.firebase,
                         $provider.serviceAccount
                     );
-
                     break;
                 case 'nhost':
                     report = await projectSdk.migrations.getNHostReport(
@@ -136,6 +94,33 @@
     $: errorInResources = error;
     $: wizard.setNextDisabled(!report);
     $: resources = providerResources[$provider.provider];
+
+    const shouldRenderGroup = (groupKey: string): boolean => {
+        if (groupKey === 'functions') {
+            return resources.includes('function') && isVersionAtLeast(version, '1.4.0');
+        }
+
+        if (groupKey === 'storage') {
+            return resources.includes('bucket') && resources.includes('file');
+        }
+
+        return resources.includes(groupKey.slice(0, -1));
+    };
+
+    // no typecasting in svelte context!
+    function getAsType(groupKey: string) {
+        return groupKey as keyof MigrationFormData;
+    }
+
+    const getReportKey = (groupKey: string) => {
+        const map: Record<string, string> = {
+            users: 'user',
+            databases: 'database',
+            functions: 'function',
+            storage: 'bucket'
+        };
+        return map[groupKey] || groupKey;
+    };
 </script>
 
 <Layout.Stack gap="l">
@@ -148,174 +133,42 @@
     {/if}
 
     {#if error}
-        <Alert.Inline status="error" title="Request failed">
-            Please check if your credentials are filled in correctly in the previous step
+        <Alert.Inline status="error" title="Couldn’t load resources">
+            {#if migrationType === 'provider'}
+                Please double-check your credentials from the previous step and try again.
+            {:else}
+                The API key required for the migration may no longer be valid or has expired, please
+                verify and start migration again.
+            {/if}
         </Alert.Inline>
-    {/if}
-
-    <Layout.Stack gap="l">
-        <Layout.Stack direction="row">
-            <Button
-                compact
-                on:click={(event) => {
-                    event.preventDefault();
-                    deselectAll();
-                }}>Deselect all</Button>
-            <Button
-                compact
-                on:click={(event) => {
-                    event.preventDefault();
-                    selectAll();
-                }}>Select all</Button>
-        </Layout.Stack>
-        <Divider />
-    </Layout.Stack>
-
-    {#if resources?.includes('user')}
-        <Layout.Stack>
-            <ImportReport
-                label="Users"
-                checked={$formData.users.root}
-                handleChange={handleInputChange('users.root')}
-                description="Import all users"
-                reportValue={report?.user}
-                isLoading={!error} />
-
-            <!-- TODO: no padding, change a component instead -->
-            <div style:padding-left="2rem">
-                <ImportReport
-                    label="Include teams"
-                    checked={$formData.users.teams}
-                    handleChange={handleInputChange('users.teams')}
-                    description="Import all teams and the team memberships of your users" />
-            </div>
+    {:else}
+        <Layout.Stack gap="l">
+            <Layout.Stack direction="row">
+                <Button
+                    compact
+                    on:click={(event) => {
+                        event.preventDefault();
+                        deselectAll();
+                    }}>Deselect all</Button>
+
+                <Button
+                    compact
+                    on:click={(event) => {
+                        event.preventDefault();
+                        selectAll();
+                    }}>Select all</Button>
+            </Layout.Stack>
+            <Divider />
         </Layout.Stack>
-    {/if}
-
-    {#if resources?.includes('database')}
-        <Layout.Stack>
-            <ImportReport
-                label="Databases"
-                checked={$formData.databases.root}
-                handleChange={handleInputChange('databases.root')}
-                description="Import all databases, including collections, indexes and attributes"
-                reportValue={report?.database}
-                isLoading={!error} />
 
-            <div style:padding-left="2rem">
+        {#each Object.entries($formData) as [groupKey, formGroup]}
+            {#if shouldRenderGroup(groupKey)}
                 <ImportReport
-                    label="Include documents"
-                    checked={$formData.databases.documents}
-                    handleChange={handleInputChange('databases.documents')}
-                    description="Import all functions and their active deployment"
-                    reportValue={report?.document}
-                    isLoading={!error} />
-            </div>
-        </Layout.Stack>
-    {/if}
-
-    {#if resources?.includes('function') && isVersionAtLeast(version, '1.4.0')}
-        <Layout.Stack>
-            <ImportReport
-                label="Functions"
-                checked={$formData.functions.root}
-                handleChange={handleInputChange('functions.root')}
-                description="Import all functions and their active deployment"
-                reportValue={report?.function}
-                isLoading={!error} />
-
-            {#if resources?.includes('environment-variable') || resources?.includes('deployment')}
-                <div style:padding-left="2rem">
-                    <Layout.Stack gap="s">
-                        {#if resources?.includes('environment-variable')}
-                            <ImportReport
-                                label="Include environment variables"
-                                checked={$formData.functions.env}
-                                description="Import all environment variables"
-                                handleChange={handleInputChange('functions.env')} />
-                        {/if}
-
-                        {#if resources?.includes('deployment')}
-                            <ImportReport
-                                label="Include inactive deployments"
-                                checked={$formData.functions.inactive}
-                                handleChange={handleInputChange('functions.inactive')}
-                                description="Import all deployments that are not currently active" />
-                        {/if}
-                    </Layout.Stack>
-                </div>
+                    {error}
+                    {formGroup}
+                    groupKey={getAsType(groupKey)}
+                    reportValue={report?.[getReportKey(groupKey)]} />
             {/if}
-        </Layout.Stack>
-    {/if}
-
-    {#if resources?.includes('bucket') && resources?.includes('file')}
-        {@const storageSize = report?.size >= 0 ? `${report?.size.toFixed(2)}MB` : undefined}
-        <Layout.Stack gap="none">
-            <ImportReport
-                label="Storage"
-                checked={$formData.storage.root}
-                handleChange={handleInputChange('storage.root')}
-                reportValue={storageSize}
-                isLoading={!error} />
-
-            <div style:padding-left="2rem">
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                    Import all buckets
-                    {#if $provider.provider !== 'firebase' && report?.bucket}
-                        <Tag size="xs" selected>{report.bucket}</Tag>
-                    {/if}
-                    and files
-                    {#if $provider.provider !== 'firebase' && report?.file}
-                        <Tag size="xs" selected>{report.file}</Tag>
-                    {/if}
-                </Typography.Text>
-            </div>
-        </Layout.Stack>
+        {/each}
     {/if}
 </Layout.Stack>
-
-<!-- svelte-ignore css-unused-selector -->
-<style lang="scss">
-    .box :global(.eyebrow) {
-        font-weight: 500;
-        color: hsl(var(--color-neutral-70));
-    }
-
-    .circled {
-        width: 1.5rem;
-        height: 1.5rem;
-        flex-shrink: 0;
-        border-radius: 100%;
-        border: 1px solid hsl(var(--border));
-        position: relative;
-
-        i {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            translate: -50% -50%;
-            font-size: 1rem;
-        }
-    }
-
-    .buttons-list {
-        border-block-end: 1px solid hsl(var(--border));
-        padding-block-end: 0.625rem;
-    }
-
-    .checkbox-field {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        gap: 0.25rem 1rem;
-        align-items: center;
-        padding-block-end: 1rem;
-
-        ul {
-            grid-column-start: 2;
-
-            li {
-                margin-block-start: 1rem;
-            }
-        }
-    }
-</style>
diff --git a/src/routes/(console)/(migration-wizard)/wizard.svelte b/src/routes/(console)/(migration-wizard)/wizard.svelte
index e0b296759f..5c19800580 100644
--- a/src/routes/(console)/(migration-wizard)/wizard.svelte
+++ b/src/routes/(console)/(migration-wizard)/wizard.svelte
@@ -1,52 +1,409 @@
 <script lang="ts">
-    import { goto, invalidateAll } from '$app/navigation';
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
-    import Wizard from '$lib/layout/wizardWithSteps.svelte';
-    import { migrationFormToResources } from '$lib/stores/migration';
-    import { wizard } from '$lib/stores/wizard';
-    import { onDestroy } from 'svelte';
-    import { formData, provider, selectedProject } from '.';
-    import Step1 from './step1.svelte';
-    import Step2 from './step2.svelte';
+    import { page } from '$app/state';
+    import { Wizard } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
+    import { capitalize } from '$lib/helpers/string';
+    import ResourceForm from './resource-form.svelte';
     import { requestedMigration } from '$routes/store';
+    import { formData, provider, selectedProject, selectedRegion } from '.';
+    import { ID, type Models, Query } from '@appwrite.io/console';
+    import { InputSelect, InputText } from '$lib/elements/forms';
+    import {
+        Button,
+        Card,
+        Fieldset,
+        Icon,
+        Input,
+        Layout,
+        Skeleton,
+        Spinner,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { isCloud } from '$lib/system';
+    import { regions } from '$lib/stores/organization';
+    import { getFlagUrl } from '$lib/helpers/flag';
+    import { addNotification } from '$lib/stores/notifications';
+    import { goto, invalidate, invalidateAll } from '$app/navigation';
     import { base } from '$app/paths';
-    import { sdk } from '$lib/stores/sdk';
+    import { migrationFormToResources } from '$lib/stores/migration';
+    import { EyebrowHeading } from '$lib/components';
+    import {
+        IconAppwrite,
+        IconCog,
+        IconCurrencyDollar,
+        IconExclamation,
+        IconGithub,
+        IconTrendingUp
+    } from '@appwrite.io/pink-icons-svelte';
+    import { Dependencies } from '$lib/constants';
 
     const onExit = () => {
         formData.reset();
         requestedMigration.set(null);
     };
 
+    const organizations = page.data.organizations
+        .teams as Models.TeamList<Models.Preferences>['teams'];
+
+    let showExitModal = false;
+    let showResources = false;
+    let loadingProjects = false;
+    let creatingProject = false;
+    let errorInResources = false;
+    let migrationStarted = false;
+    let projectSdkInstance: ReturnType<typeof sdk.forProject> | null = null;
+
+    let projects = [] as Models.ProjectList['projects'];
+    let selectedOrg = organizations.length ? organizations[0].$id : null;
+
+    let newProjName = '';
+    let projectType: 'existing' | 'new' = 'existing';
+
+    async function getProjects(orgId: string | null) {
+        if (!orgId) {
+            projects = [];
+        } else {
+            loadingProjects = true;
+            projects = await sdk.forConsole.projects
+                .list([Query.equal('teamId', orgId), Query.orderDesc('$createdAt')])
+                .then((res) => res.projects);
+
+            loadingProjects = false;
+            projectType = projects.length ? 'existing' : 'new';
+            if (projectType === 'existing') {
+                const first = projects[0];
+                $selectedProject = first.$id;
+                projectSdkInstance = sdk.forProject(first.region, first.region);
+            }
+        }
+    }
+
+    function getProjectName(): string {
+        return isExisting ? getSelectedProject().name : newProjName || 'Appwrite project';
+    }
+
+    function getSelectedProject() {
+        return projects.find((project) => project.$id === $selectedProject);
+    }
+
+    async function createNewProject() {
+        creatingProject = true;
+
+        try {
+            return await sdk.forConsole.projects.create(
+                ID.unique(),
+                newProjName,
+                selectedOrg,
+                $selectedRegion
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+
+            return null;
+        } finally {
+            creatingProject = false;
+        }
+    }
+
+    function getRegions() {
+        return $regions.regions
+            .filter((region) => region.$id !== 'default')
+            .sort((regionA, regionB) => {
+                if (regionA.disabled && !regionB.disabled) {
+                    return 1;
+                }
+                return regionA.name > regionB.name ? 1 : -1;
+            })
+            .map((region) => {
+                return {
+                    label: region.name,
+                    value: region.$id,
+                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
+                    disabled: region.disabled || !region.available
+                };
+            });
+    }
+
     const onFinish = async () => {
         if ($provider.provider !== 'appwrite') return;
+
+        migrationStarted = true;
         const resources = migrationFormToResources($formData, $provider.provider);
 
-        await sdk
-            .forProject('fra1', $selectedProject)
-            .migrations.createAppwriteMigration(
+        try {
+            await projectSdkInstance.migrations.createAppwriteMigration(
                 resources,
                 $provider.endpoint,
                 $provider.projectID,
                 $provider.apiKey
             );
 
-        await invalidateAll();
-        wizard.hide();
+            const project = getSelectedProject();
+
+            addNotification({
+                type: 'success',
+                message: 'Migration started'
+            });
 
-        goto(`${base}/project-${$selectedProject}/settings/migrations`);
+            onExit();
+            await invalidate(Dependencies.PROJECTS);
+            await goto(`${base}/project-${project.region}-${project.$id}/settings/migrations`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            migrationStarted = false;
+        }
     };
 
-    onDestroy(onExit);
-
-    const steps: WizardStepsType = new Map();
-    steps.set(1, {
-        label: 'Project',
-        component: Step1
-    });
-    steps.set(2, {
-        label: 'Resources',
-        component: Step2
-    });
+    $: getProjects(selectedOrg);
+
+    $: isExisting = projectType === 'existing';
+
+    $: if (isExisting && $selectedProject) {
+        const project = getSelectedProject();
+        projectSdkInstance = sdk.forProject(project.region, project.$id);
+    }
+
+    $: disableNextButton = isExisting
+        ? !$selectedProject
+        : newProjName.trim() === '' || creatingProject;
+
+    $: isFinalsButtonEnabled =
+        showResources &&
+        !errorInResources &&
+        !disableNextButton &&
+        Object.values($formData).some((category) =>
+            Object.values(category).some((value) => value === true)
+        );
 </script>
 
-<Wizard title="Create Migration" {steps} on:exit={onExit} on:finish={onFinish} />
+<Wizard title="Create migration" bind:showExitModal confirmExit {onExit}>
+    <Layout.Stack gap="xl">
+        {#if !showResources}
+            <Layout.Stack gap="xxl">
+                {#if organizations.length >= 1}
+                    <Fieldset legend="Organization">
+                        <InputSelect
+                            required
+                            id="organization"
+                            bind:value={selectedOrg}
+                            label="Select organization"
+                            options={organizations.map((project) => ({
+                                label: project.name,
+                                value: project.$id
+                            }))}
+                            disabled={loadingProjects} />
+                    </Fieldset>
+                {/if}
+
+                <Fieldset legend="Project">
+                    {#if loadingProjects}
+                        <Layout.Stack gap="xl">
+                            <Layout.Grid rowGap="l" columns={2} columnsS={1}>
+                                <Skeleton variant="line" width="100%" height={70} />
+                                <Skeleton variant="line" width="100%" height={70} />
+                            </Layout.Grid>
+                            <Skeleton variant="line" width="100%" height={50} />
+                        </Layout.Stack>
+                    {:else}
+                        <Layout.Stack gap="xl">
+                            <Layout.Grid rowGap="l" columns={2} columnsXS={1}>
+                                <Card.Selector
+                                    bind:group={projectType}
+                                    name="Existing project"
+                                    id="existing"
+                                    value="existing"
+                                    title="Existing project"
+                                    imageRadius="s">
+                                    Import data to an existing project
+                                </Card.Selector>
+
+                                <Card.Selector
+                                    bind:group={projectType}
+                                    name="Existing project"
+                                    id="new"
+                                    value="new"
+                                    title="Create new project"
+                                    imageRadius="s">
+                                    Import data to a new project
+                                </Card.Selector>
+                            </Layout.Grid>
+
+                            {#if projectType === 'existing'}
+                                <InputSelect
+                                    required
+                                    id="project"
+                                    label="Select a project"
+                                    bind:value={$selectedProject}
+                                    options={projects.map((p) => ({
+                                        label: p.name,
+                                        value: p.$id
+                                    }))} />
+                            {:else}
+                                <Layout.Stack gap="l">
+                                    <InputText
+                                        required
+                                        id="project_name"
+                                        label="Project name"
+                                        bind:value={newProjName}
+                                        placeholder="Enter project name" />
+
+                                    {#if isCloud && $regions.regions.length > 0}
+                                        <Input.Select
+                                            required
+                                            label="Region"
+                                            options={getRegions()}
+                                            bind:value={$selectedRegion}
+                                            placeholder="Select a region" />
+                                        <Typography.Text
+                                            >Region cannot be changed after creation</Typography.Text>
+                                    {/if}
+                                </Layout.Stack>
+                            {/if}
+                            <Layout.Stack direction="row" justifyContent="flex-end">
+                                <Button.Button
+                                    size="s"
+                                    disabled={disableNextButton}
+                                    on:click={async () => {
+                                        if (isExisting) {
+                                            showResources = true;
+                                        } else {
+                                            const project = await createNewProject();
+                                            if (project !== null) {
+                                                projectSdkInstance = sdk.forProject(
+                                                    project.region,
+                                                    project.$id
+                                                );
+                                                showResources = true;
+                                            }
+                                        }
+                                    }}>
+                                    {#if creatingProject}
+                                        <Spinner size="s" />
+                                    {/if}
+
+                                    Next
+                                </Button.Button>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    {/if}
+                </Fieldset>
+            </Layout.Stack>
+        {:else}
+            <Card.Base radius="s" padding="s">
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap="xs">
+                    <Layout.Stack gap="s" direction="row" alignItems="center">
+                        <Icon icon={IconAppwrite} color="--fgcolor-neutral-primary" />
+
+                        <Typography.Text variant="m-500">
+                            {capitalize(getProjectName())}
+                        </Typography.Text>
+                    </Layout.Stack>
+
+                    <Button.Button
+                        size="s"
+                        variant="secondary"
+                        on:click={() => (showResources = !showResources)}>
+                        Update
+                    </Button.Button>
+                </Layout.Stack>
+            </Card.Base>
+        {/if}
+
+        {#if showResources}
+            <Fieldset legend="Resources">
+                <Layout.Stack gap="xl">
+                    <ResourceForm
+                        {provider}
+                        {formData}
+                        bind:errorInResources
+                        migrationType="cloud"
+                        projectSdk={projectSdkInstance} />
+                </Layout.Stack>
+            </Fieldset>
+        {/if}
+    </Layout.Stack>
+
+    <svelte:fragment slot="aside">
+        <Card.Base variant="primary" radius="s" padding="m">
+            <Layout.Stack gap="l">
+                <EyebrowHeading class="eyebrow" tag="h3" size={3}>Good to know</EyebrowHeading>
+
+                <!-- tip 1 -->
+                <Layout.Stack gap="l" direction="row" wrap="normal">
+                    <span style:padding-block="2px">
+                        <Icon icon={IconCog} size="s" />
+                    </span>
+                    <Layout.Stack gap="none">
+                        <Typography.Text variant="m-600"
+                            >Project settings are not imported</Typography.Text>
+                        You will need to set service and project settings manually.
+                    </Layout.Stack>
+                </Layout.Stack>
+
+                <!-- tip 2 -->
+                <Layout.Stack gap="l" direction="row" wrap="normal">
+                    <span style:padding-block="2px">
+                        <Icon icon={IconTrendingUp} size="s" />
+                    </span>
+                    <Layout.Stack gap="none">
+                        <Typography.Text variant="m-600"
+                            >Keep your organization plan's limits in mind</Typography.Text>
+                        Make sure to have enough storage in your organization plan when importing files.
+                    </Layout.Stack>
+                </Layout.Stack>
+
+                <!-- tip 3 -->
+                <Layout.Stack gap="l" direction="row" wrap="normal">
+                    {@const isFirebase = $provider.provider === 'firebase'}
+                    <span style:padding-block="3px">
+                        <Icon
+                            icon={isFirebase ? IconExclamation : IconCurrencyDollar}
+                            size="s"
+                            color={isFirebase ? '--fgcolor-warning' : undefined} />
+                    </span>
+                    <Layout.Stack gap="none">
+                        <Typography.Text variant="m-600">
+                            {isFirebase
+                                ? 'Possible charges by Firebase'
+                                : 'Transfer is free of charge'}
+                        </Typography.Text>
+
+                        {#if isFirebase}
+                            Appwrite does not impose charges for importing data, but please note
+                            that Firebase may have its own pricing for this service
+                        {:else}
+                            You won't be charged for Appwrite bandwidth usage for importing data
+                        {/if}
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card.Base>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button.Button variant="secondary" on:click={() => (showExitModal = true)}>
+            Cancel
+        </Button.Button>
+
+        <Button.Button
+            variant="primary"
+            on:click={onFinish}
+            disabled={!isFinalsButtonEnabled || migrationStarted}>
+            {#if migrationStarted}
+                <Spinner size="s" />
+            {/if}
+            Create
+        </Button.Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/importReport.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/importReport.svelte
index a7c0b4cc37..e86559bae4 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/importReport.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/importReport.svelte
@@ -1,34 +1,112 @@
 <script lang="ts">
-    import { Layout, Selector, Tag, Spinner, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        Accordion,
+        Badge,
+        Layout,
+        Selector,
+        Spinner,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import type { MigrationFormData } from '$lib/stores/migration';
+    import { Button } from '$lib/elements/forms';
 
-    export let label: string;
-    export let checked: boolean;
-    export let isLoading: boolean = false;
-    export let handleChange: (event: Event) => void;
-    export let description: string | undefined = undefined;
+    export let error: boolean = false;
+    export let groupKey: keyof MigrationFormData;
+    export let formGroup: MigrationFormData[typeof groupKey];
     export let reportValue: string | number | undefined = undefined;
+
+    const labelMap = {
+        users: { root: 'Users', teams: 'Include teams' },
+        databases: { root: 'Databases', documents: 'Include documents' },
+        functions: {
+            root: 'Functions',
+            env: 'Include environment variables',
+            inactive: 'Include inactive deployments'
+        },
+        storage: { root: 'Storage' }
+    };
+
+    const descriptionMap = {
+        users: {
+            root: 'Import all users',
+            teams: 'Import all teams and the team memberships of your users'
+        },
+        databases: {
+            root: 'Import all databases, including collections, indexes and attributes',
+            documents: 'Import all documents inside collections'
+        },
+        functions: {
+            root: 'Import all functions and their active deployment',
+            env: 'Import all environment variables',
+            inactive: 'Import all deployments that are not currently active'
+        }
+    };
+
+    $: formGroupChildren = Object.keys(formGroup).filter((key) => key !== 'root');
+
+    let parentState: boolean | 'indeterminate';
+
+    $: {
+        const total = formGroupChildren.length;
+        const checked = formGroupChildren.filter((key) => formGroup[key]).length;
+
+        if (checked === 0) {
+            parentState = false;
+        } else if (checked === total) {
+            parentState = true;
+        } else {
+            parentState = 'indeterminate';
+        }
+    }
+
+    function onParentChange(event: CustomEvent<boolean | 'indeterminate'>) {
+        if (event.detail === 'indeterminate') return;
+        for (const key of Object.keys(formGroup)) {
+            formGroup[key] = event.detail;
+        }
+    }
+
+    $: isLoading = !error;
 </script>
 
-<Layout.Stack>
-    <Layout.Stack direction="row" gap="xs" alignItems="flex-start">
-        <Layout.Stack gap="none">
-            <Layout.Stack direction="row" gap="xs" alignItems="flex-start">
-                <Selector.Checkbox {label} bind:checked on:change={handleChange} />
+{#if !formGroupChildren.length}
+    <div style:padding-inline-start="0.5rem">
+        <Button extraCompact on:click={() => (formGroup.root = !formGroup.root)}>
+            <Layout.Stack direction="row" gap="s" alignItems="center">
+                <Layout.Stack inline direction="row" gap="l" alignItems="flex-start">
+                    <Selector.Checkbox size="s" bind:checked={formGroup.root} />
+
+                    <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                        {labelMap[groupKey]?.root ?? groupKey}
+                    </Typography.Text>
+                </Layout.Stack>
 
                 {#if reportValue !== undefined}
-                    <Tag size="xs" selected>{reportValue}</Tag>
+                    <Badge size="xs" variant="secondary" content={String(reportValue)} />
                 {:else if isLoading}
                     <Spinner size="s" />
                 {/if}
             </Layout.Stack>
-
-            {#if description}
-                <div style:padding-left="2rem">
-                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                        {description}
-                    </Typography.Text>
+        </Button>
+    </div>
+{:else}
+    <Accordion
+        selectable
+        bind:checked={parentState}
+        on:change={onParentChange}
+        title={labelMap[groupKey]?.root ?? groupKey}
+        badge={error ? undefined : isLoading && reportValue ? reportValue.toString() : '...'}>
+        <Layout.Stack gap="m">
+            {#each formGroupChildren as key}
+                <div style:margin-inline-start="6px" style:margin-block-start="6px">
+                    <Selector.Checkbox
+                        size="s"
+                        id={key}
+                        bind:checked={formGroup[key]}
+                        label={labelMap[groupKey]?.[key] ?? key}
+                        description={descriptionMap[groupKey]?.[key]} />
                 </div>
-            {/if}
+            {/each}
         </Layout.Stack>
-    </Layout.Stack>
-</Layout.Stack>
+    </Accordion>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte b/src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte
deleted file mode 100644
index e69de29bb2..0000000000

From 098882b2d308fb270997378b11e854ccf4d49aa5 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 28 May 2025 17:32:42 +0530
Subject: [PATCH 2/2] address comment: abstract region filtering for selection
 options.

---
 src/lib/helpers/regions.ts                    | 27 +++++++++++
 src/lib/layout/createProject.svelte           | 22 +--------
 .../(migration-wizard)/wizard.svelte          | 47 +++++--------------
 .../(public)/template-[template]/+page.svelte | 23 +--------
 4 files changed, 44 insertions(+), 75 deletions(-)
 create mode 100644 src/lib/helpers/regions.ts

diff --git a/src/lib/helpers/regions.ts b/src/lib/helpers/regions.ts
new file mode 100644
index 0000000000..9f04f3fdaa
--- /dev/null
+++ b/src/lib/helpers/regions.ts
@@ -0,0 +1,27 @@
+import { getFlagUrl } from '$lib/helpers/flag';
+import type { Models } from '@appwrite.io/console';
+
+type RegionOption = {
+    label: string;
+    value: string;
+    disabled: boolean;
+    leadingHtml: string;
+};
+
+export function filterRegions(regions: Models.ConsoleRegion[]): RegionOption[] {
+    if (!regions.length) return [];
+
+    return regions
+        .filter((region) => region.$id !== 'default')
+        .sort((a, b) => {
+            if (a.disabled && !b.disabled) return 1;
+            if (!a.disabled && b.disabled) return -1;
+            return a.name.localeCompare(b.name);
+        })
+        .map((region) => ({
+            label: region.name,
+            value: region.$id,
+            disabled: region.disabled || !region.available,
+            leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`
+        }));
+}
diff --git a/src/lib/layout/createProject.svelte b/src/lib/layout/createProject.svelte
index 5c206297ea..7d368dde06 100644
--- a/src/lib/layout/createProject.svelte
+++ b/src/lib/layout/createProject.svelte
@@ -5,6 +5,7 @@
     import { getFlagUrl } from '$lib/helpers/flag';
     import { isCloud } from '$lib/system.js';
     import type { Models } from '@appwrite.io/console';
+    import { filterRegions } from '$lib/helpers/regions';
 
     export let projectName: string;
     export let id: string;
@@ -13,25 +14,6 @@
     export let showTitle = true;
 
     let showCustomId = false;
-
-    function getRegions() {
-        return regions
-            .filter((region) => region.$id !== 'default')
-            .sort((regionA, regionB) => {
-                if (regionA.disabled && !regionB.disabled) {
-                    return 1;
-                }
-                return regionA.name > regionB.name ? 1 : -1;
-            })
-            .map((region) => {
-                return {
-                    label: region.name,
-                    value: region.$id,
-                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
-                    disabled: region.disabled || !region.available
-                };
-            });
-    }
 </script>
 
 <svelte:head>
@@ -69,7 +51,7 @@
                         <Input.Select
                             bind:value={region}
                             placeholder="Select a region"
-                            options={getRegions()}
+                            options={filterRegions(regions)}
                             label="Region" />
                         <Typography.Text>Region cannot be changed after creation</Typography.Text>
                     </Layout.Stack>
diff --git a/src/routes/(console)/(migration-wizard)/wizard.svelte b/src/routes/(console)/(migration-wizard)/wizard.svelte
index 5c19800580..99c23b7d24 100644
--- a/src/routes/(console)/(migration-wizard)/wizard.svelte
+++ b/src/routes/(console)/(migration-wizard)/wizard.svelte
@@ -21,9 +21,8 @@
     } from '@appwrite.io/pink-svelte';
     import { isCloud } from '$lib/system';
     import { regions } from '$lib/stores/organization';
-    import { getFlagUrl } from '$lib/helpers/flag';
     import { addNotification } from '$lib/stores/notifications';
-    import { goto, invalidate, invalidateAll } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { migrationFormToResources } from '$lib/stores/migration';
     import { EyebrowHeading } from '$lib/components';
@@ -32,10 +31,10 @@
         IconCog,
         IconCurrencyDollar,
         IconExclamation,
-        IconGithub,
         IconTrendingUp
     } from '@appwrite.io/pink-icons-svelte';
     import { Dependencies } from '$lib/constants';
+    import { filterRegions } from '$lib/helpers/regions';
 
     const onExit = () => {
         formData.reset();
@@ -79,11 +78,7 @@
     }
 
     function getProjectName(): string {
-        return isExisting ? getSelectedProject().name : newProjName || 'Appwrite project';
-    }
-
-    function getSelectedProject() {
-        return projects.find((project) => project.$id === $selectedProject);
+        return isExisting ? currentSelectedProject.name : newProjName || 'Appwrite project';
     }
 
     async function createNewProject() {
@@ -108,25 +103,6 @@
         }
     }
 
-    function getRegions() {
-        return $regions.regions
-            .filter((region) => region.$id !== 'default')
-            .sort((regionA, regionB) => {
-                if (regionA.disabled && !regionB.disabled) {
-                    return 1;
-                }
-                return regionA.name > regionB.name ? 1 : -1;
-            })
-            .map((region) => {
-                return {
-                    label: region.name,
-                    value: region.$id,
-                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
-                    disabled: region.disabled || !region.available
-                };
-            });
-    }
-
     const onFinish = async () => {
         if ($provider.provider !== 'appwrite') return;
 
@@ -141,16 +117,15 @@
                 $provider.apiKey
             );
 
-            const project = getSelectedProject();
-
             addNotification({
                 type: 'success',
                 message: 'Migration started'
             });
-
             onExit();
             await invalidate(Dependencies.PROJECTS);
-            await goto(`${base}/project-${project.region}-${project.$id}/settings/migrations`);
+            await goto(
+                `${base}/project-${currentSelectedProject.region}-${currentSelectedProject.$id}/settings/migrations`
+            );
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -163,11 +138,15 @@
 
     $: getProjects(selectedOrg);
 
+    $: currentSelectedProject = projects.find((project) => project.$id === $selectedProject);
+
     $: isExisting = projectType === 'existing';
 
     $: if (isExisting && $selectedProject) {
-        const project = getSelectedProject();
-        projectSdkInstance = sdk.forProject(project.region, project.$id);
+        projectSdkInstance = sdk.forProject(
+            currentSelectedProject.region,
+            currentSelectedProject.$id
+        );
     }
 
     $: disableNextButton = isExisting
@@ -258,7 +237,7 @@
                                         <Input.Select
                                             required
                                             label="Region"
-                                            options={getRegions()}
+                                            options={filterRegions($regions.regions)}
                                             bind:value={$selectedRegion}
                                             placeholder="Select a region" />
                                         <Typography.Text
diff --git a/src/routes/(public)/template-[template]/+page.svelte b/src/routes/(public)/template-[template]/+page.svelte
index 0ea3ff5315..33d4d6ed62 100644
--- a/src/routes/(public)/template-[template]/+page.svelte
+++ b/src/routes/(public)/template-[template]/+page.svelte
@@ -4,7 +4,6 @@
     import CustomId from '$lib/components/customId.svelte';
     import { SvgIcon } from '$lib/components/index.js';
     import { Button, Form, InputSelect } from '$lib/elements/forms';
-    import { getFlagUrl } from '$lib/helpers/flag.js';
     import type { AllowedRegions } from '$lib/sdk/billing.js';
     import { app } from '$lib/stores/app';
     import { addNotification } from '$lib/stores/notifications';
@@ -23,6 +22,7 @@
         Tag,
         Typography
     } from '@appwrite.io/pink-svelte';
+    import { filterRegions } from '$lib/helpers/regions';
 
     let { data } = $props();
 
@@ -37,25 +37,6 @@
     let regions = $state<Array<Models.ConsoleRegion>>([]);
     let id = $state<string>();
 
-    function getRegions() {
-        return regions
-            .filter((region) => region.$id !== 'default')
-            .sort((regionA, regionB) => {
-                if (regionA.disabled && !regionB.disabled) {
-                    return 1;
-                }
-                return regionA.name > regionB.name ? 1 : -1;
-            })
-            .map((region) => {
-                return {
-                    label: region.name,
-                    value: region.$id,
-                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
-                    disabled: region.disabled
-                };
-            });
-    }
-
     function isSiteTemplate(
         template: Models.TemplateFunction | Models.TemplateSite,
         product: 'site' | 'function'
@@ -243,7 +224,7 @@
                                             required
                                             bind:value={region}
                                             placeholder="Select a region"
-                                            options={getRegions()}
+                                            options={filterRegions(regions)}
                                             label="Region" />
                                         <Typography.Text>
                                             Region cannot be changed after creation