Project Migration on Pink2 Wizard

src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/credentials.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+    import { provider } from '.';
+    import { Button, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { InputNumber, InputPassword, InputText, InputTextarea } from '$lib/elements/forms';
+
+    export let formSubmitted = false;
+
+    $: disableButton = (() => {
+        if (!$provider) return true;
+
+        switch ($provider.provider) {
+            case 'appwrite':
+                return !$provider.endpoint || !$provider.projectID || !$provider.apiKey;
+
+            case 'firebase':
+                return !$provider.serviceAccount;
+
+            case 'supabase':
+                return (
+                    !$provider.host ||
+                    !$provider.port ||
+                    !$provider.password ||
+                    !$provider.endpoint ||
+                    !$provider.apiKey
+                );
+
+            case 'nhost':
+                return (
+                    !$provider.region ||
+                    !$provider.subdomain ||
+                    !$provider.password ||
+                    !$provider.adminSecret
+                );
+
+            default:
+                return true;
+        }
+    })();
+</script>
+
+<Layout.Stack gap="xl">
+    {#if $provider.provider === 'appwrite'}
+        <Layout.Stack gap="l">
+            <InputText
+                id="endpoint"
+                label="Endpoint"
+                required
+                placeholder="Enter endpoint"
+                bind:value={$provider.endpoint} />
+            <InputText
+                id="project-id"
+                label="Project ID"
+                required
+                placeholder="Enter project ID"
+                bind:value={$provider.projectID} />
+            <InputPassword
+                id="api-key"
+                label="API Key"
+                required
+                placeholder="Enter API Key"
+                bind:value={$provider.apiKey} />
+        </Layout.Stack>
+    {:else if $provider.provider === 'firebase'}
+        <Layout.Stack gap="l">
+            <InputTextarea
+                id="credentials"
+                label="Service Account JSON credentials"
+                required
+                bind:value={$provider.serviceAccount}
+                placeholder="Enter Service Account JSON credentials" />
+        </Layout.Stack>
+    {:else if $provider.provider === 'supabase'}
+        <Layout.Stack gap="l">
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary"
+                >Postgres credentials</Typography.Text>
+
+            <InputText
+                id="host"
+                label="Host"
+                required
+                placeholder="Enter host"
+                bind:value={$provider.host} />
+
+            <InputNumber id="port" label="Port" placeholder="5432" bind:value={$provider.port} />
+
+            <InputText
+                id="username"
+                label="Username"
+                placeholder="postgres"
+                bind:value={$provider.username} />
+
+            <InputPassword
+                id="password"
+                label="Password"
+                required
+                placeholder="Enter password"
+                bind:value={$provider.password} />
+
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary"
+                >Supabase credentials</Typography.Text>
+
+            <InputText
+                id="endpoint"
+                label="Endpoint"
+                required
+                placeholder="Enter endpoint"
+                bind:value={$provider.endpoint} />
+
+            <InputPassword
+                id="api-key"
+                label="API Key"
+                required
+                placeholder="Enter API Key"
+                bind:value={$provider.apiKey} />
+        </Layout.Stack>
+    {:else if $provider.provider === 'nhost'}
+        <Layout.Stack gap="l">
+            <InputText
+                id="region"
+                label="Region"
+                required
+                placeholder="Enter region"
+                bind:value={$provider.region} />
+            <InputText
+                id="subdomain"
+                label="Subdomain"
+                required
+                placeholder="Enter subdomain"
+                bind:value={$provider.subdomain} />
+            <InputText
+                id="database"
+                label="Database"
+                placeholder={$provider.subdomain
+                    ? `Default: ${$provider.subdomain}`
+                    : 'Enter database'}
+                bind:value={$provider.database} />
+            <InputText
+                id="username"
+                label="Username"
+                placeholder="postgres"
+                bind:value={$provider.username} />
+            <InputPassword
+                id="password"
+                label="Password"
+                required
+                placeholder="Enter password"
+                bind:value={$provider.password} />
+            <InputPassword
+                id="adminSecret"
+                label="Admin secret"
+                required
+                placeholder="Enter admin secret"
+                bind:value={$provider.adminSecret} />
+        </Layout.Stack>
+    {/if}
+
+    <Layout.Stack direction="row" justifyContent="flex-end">
+        <Button.Button
+            size="s"
+            disabled={disableButton}
+            on:click={() => {
+                formSubmitted = true;
+            }}>Next</Button.Button>
+    </Layout.Stack>
+</Layout.Stack>

src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/importReport.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { Layout, Selector, Tag, Spinner, Typography } from '@appwrite.io/pink-svelte';
+
+    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 reportValue: string | number | undefined = undefined;
+</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 reportValue !== undefined}
+                    <Tag size="xs" selected>{reportValue}</Tag>
+                {: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>
+                </div>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+</Layout.Stack>

src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step1.svelte

@@ -1,141 +0,0 @@
-<script lang="ts">
-    import { InputNumber, InputPassword, InputText, InputTextarea } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import type { Provider } from '$lib/stores/migration';
-    import { provider } from '.';
-
-    const providers: Record<Provider, string> = {
-        appwrite: 'Appwrite',
-        firebase: 'Firebase',
-        supabase: 'Supabase',
-        nhost: 'NHost'
-    };
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Source</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Select a source platform with the project you want to migrate. <a
-            class="link"
-            href="https://appwrite.io/docs/advanced/migrations"
-            target="_blank"
-            rel="noopener noreferrer">
-            Learn about which platforms are supported</a
-        >.
-    </svelte:fragment>
-    <div class="u-flex u-flex-vertical u-gap-8">
-        {#each Object.entries(providers) as [key, value]}
-            <label class="u-flex u-cross-center u-cursor-pointer u-gap-8">
-                <input
-                    class="is-small"
-                    type="radio"
-                    name="provider"
-                    bind:group={$provider.provider}
-                    value={key} />
-                <div class="content">
-                    <p>{value}</p>
-                </div>
-            </label>
-        {/each}
-    </div>
-
-    {#if $provider.provider === 'appwrite'}
-        <InputText
-            id="endpoint"
-            label="Endpoint"
-            required
-            placeholder="Enter endpoint"
-            bind:value={$provider.endpoint} />
-        <InputText
-            id="project-id"
-            label="Project ID"
-            required
-            placeholder="Enter project ID"
-            bind:value={$provider.projectID} />
-        <InputPassword
-            id="api-key"
-            label="API Key"
-            required
-            placeholder="Enter API Key"
-            bind:value={$provider.apiKey} />
-    {:else if $provider.provider === 'firebase'}
-        <div class="u-margin-block-start-16">
-            <InputTextarea
-                id="credentials"
-                label="Account credentials"
-                required
-                bind:value={$provider.serviceAccount}
-                placeholder="Enter account credentials" />
-        </div>
-    {:else if $provider.provider === 'supabase'}
-        <p class="body-text-1 u-bold">Postgres credentials</p>
-
-        <InputText
-            id="host"
-            label="Host"
-            required
-            placeholder="Enter host"
-            bind:value={$provider.host} />
-        <InputNumber id="port" label="Port" placeholder="5432" bind:value={$provider.port} />
-        <InputText
-            id="username"
-            label="Username"
-            placeholder="postgres"
-            bind:value={$provider.username} />
-        <InputPassword
-            id="password"
-            label="Password"
-            required
-            placeholder="Enter password"
-            bind:value={$provider.password} />
-        <p class="body-text-1 u-bold">Supabase credentials</p>
-
-        <InputText
-            id="endpoint"
-            label="Endpoint"
-            required
-            placeholder="Enter endpoint"
-            bind:value={$provider.endpoint} />
-        <InputPassword
-            id="api-key"
-            label="API Key"
-            required
-            placeholder="Enter API Key"
-            bind:value={$provider.apiKey} />
-    {:else if $provider.provider === 'nhost'}
-        <InputText
-            id="region"
-            label="Region"
-            required
-            placeholder="Enter region"
-            bind:value={$provider.region} />
-        <InputText
-            id="subdomain"
-            label="Subdomain"
-            required
-            placeholder="Enter subdomain"
-            bind:value={$provider.subdomain} />
-        <InputText
-            id="database"
-            label="Database"
-            placeholder={$provider.subdomain ? `Default: ${$provider.subdomain}` : 'Enter database'}
-            bind:value={$provider.database} />
-        <InputText
-            id="username"
-            label="Username"
-            placeholder="postgres"
-            bind:value={$provider.username} />
-        <InputPassword
-            id="password"
-            label="Password"
-            required
-            placeholder="Enter password"
-            bind:value={$provider.password} />
-        <InputPassword
-            id="adminSecret"
-            label="Admin secret"
-            required
-            placeholder="Enter admin secret"
-            bind:value={$provider.adminSecret} />
-    {/if}
-</WizardStep>

src/routes/(console)/project-[region]-[project]/settings/migrations/(import)/step2.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/state';
-    import ResourceForm from '$routes/(console)/(migration-wizard)/resource-form.svelte';
-    import { formData, provider } from '.';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Resources</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Select the resources you need to migrate to Appwrite. Some resources can be migrated, but
-        with limitations. <a
-            class="link"
-            href="https://appwrite.io/docs/advanced/migrations"
-            target="_blank"
-            rel="noopener noreferrer">
-            Learn about which resources are supported</a
-        >.
-    </svelte:fragment>
-    <ResourceForm
-        {formData}
-        {provider}
-        projectSdk={sdk.forProject(page.params.region, page.params.project)} />
-</WizardStep>