Skip to content

Commit 408768c

Browse files
ItzNotABugItzNotABug
authored
Merge pull request #1720 from appwrite/migration-pink2
Project Migration on Pink2 Wizard
2 parents dd18d64 + 99cc7d0 commit 408768c

File tree

9 files changed

+627
-564
lines changed

9 files changed

+627
-564
lines changed

‎src/routes/(console)/(migration-wizard)/resource-form.svelte

Lines changed: 122 additions & 252 deletions
Large diffs are not rendered by default.

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

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<script lang="ts">
2+
import { provider } from '.';
3+
import { Button, Layout, Typography } from '@appwrite.io/pink-svelte';
4+
import { InputNumber, InputPassword, InputText, InputTextarea } from '$lib/elements/forms';
5+
6+
export let formSubmitted = false;
7+
8+
$: disableButton = (() => {
9+
if (!$provider) return true;
10+
11+
switch ($provider.provider) {
12+
case 'appwrite':
13+
return !$provider.endpoint || !$provider.projectID || !$provider.apiKey;
14+
15+
case 'firebase':
16+
return !$provider.serviceAccount;
17+
18+
case 'supabase':
19+
return (
20+
!$provider.host ||
21+
!$provider.port ||
22+
!$provider.password ||
23+
!$provider.endpoint ||
24+
!$provider.apiKey
25+
);
26+
27+
case 'nhost':
28+
return (
29+
!$provider.region ||
30+
!$provider.subdomain ||
31+
!$provider.password ||
32+
!$provider.adminSecret
33+
);
34+
35+
default:
36+
return true;
37+
}
38+
})();
39+
</script>
40+
41+
<Layout.Stack gap="xl">
42+
{#if $provider.provider === 'appwrite'}
43+
<Layout.Stack gap="l">
44+
<InputText
45+
id="endpoint"
46+
label="Endpoint"
47+
required
48+
placeholder="Enter endpoint"
49+
bind:value={$provider.endpoint} />
50+
<InputText
51+
id="project-id"
52+
label="Project ID"
53+
required
54+
placeholder="Enter project ID"
55+
bind:value={$provider.projectID} />
56+
<InputPassword
57+
id="api-key"
58+
label="API Key"
59+
required
60+
placeholder="Enter API Key"
61+
bind:value={$provider.apiKey} />
62+
</Layout.Stack>
63+
{:else if $provider.provider === 'firebase'}
64+
<Layout.Stack gap="l">
65+
<InputTextarea
66+
id="credentials"
67+
label="Service Account JSON credentials"
68+
required
69+
bind:value={$provider.serviceAccount}
70+
placeholder="Enter Service Account JSON credentials" />
71+
</Layout.Stack>
72+
{:else if $provider.provider === 'supabase'}
73+
<Layout.Stack gap="l">
74+
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary"
75+
>Postgres credentials</Typography.Text>
76+
77+
<InputText
78+
id="host"
79+
label="Host"
80+
required
81+
placeholder="Enter host"
82+
bind:value={$provider.host} />
83+
84+
<InputNumber id="port" label="Port" placeholder="5432" bind:value={$provider.port} />
85+
86+
<InputText
87+
id="username"
88+
label="Username"
89+
placeholder="postgres"
90+
bind:value={$provider.username} />
91+
92+
<InputPassword
93+
id="password"
94+
label="Password"
95+
required
96+
placeholder="Enter password"
97+
bind:value={$provider.password} />
98+
99+
<Typography.Text variant="m-400" color="--fgcolor-neutral-primary"
100+
>Supabase credentials</Typography.Text>
101+
102+
<InputText
103+
id="endpoint"
104+
label="Endpoint"
105+
required
106+
placeholder="Enter endpoint"
107+
bind:value={$provider.endpoint} />
108+
109+
<InputPassword
110+
id="api-key"
111+
label="API Key"
112+
required
113+
placeholder="Enter API Key"
114+
bind:value={$provider.apiKey} />
115+
</Layout.Stack>
116+
{:else if $provider.provider === 'nhost'}
117+
<Layout.Stack gap="l">
118+
<InputText
119+
id="region"
120+
label="Region"
121+
required
122+
placeholder="Enter region"
123+
bind:value={$provider.region} />
124+
<InputText
125+
id="subdomain"
126+
label="Subdomain"
127+
required
128+
placeholder="Enter subdomain"
129+
bind:value={$provider.subdomain} />
130+
<InputText
131+
id="database"
132+
label="Database"
133+
placeholder={$provider.subdomain
134+
? `Default: ${$provider.subdomain}`
135+
: 'Enter database'}
136+
bind:value={$provider.database} />
137+
<InputText
138+
id="username"
139+
label="Username"
140+
placeholder="postgres"
141+
bind:value={$provider.username} />
142+
<InputPassword
143+
id="password"
144+
label="Password"
145+
required
146+
placeholder="Enter password"
147+
bind:value={$provider.password} />
148+
<InputPassword
149+
id="adminSecret"
150+
label="Admin secret"
151+
required
152+
placeholder="Enter admin secret"
153+
bind:value={$provider.adminSecret} />
154+
</Layout.Stack>
155+
{/if}
156+
157+
<Layout.Stack direction="row" justifyContent="flex-end">
158+
<Button.Button
159+
size="s"
160+
disabled={disableButton}
161+
on:click={() => {
162+
formSubmitted = true;
163+
}}>Next</Button.Button>
164+
</Layout.Stack>
165+
</Layout.Stack>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts">
2+
import { Layout, Selector, Tag, Spinner, Typography } from '@appwrite.io/pink-svelte';
3+
4+
export let label: string;
5+
export let checked: boolean;
6+
export let isLoading: boolean = false;
7+
export let handleChange: (event: Event) => void;
8+
export let description: string | undefined = undefined;
9+
export let reportValue: string | number | undefined = undefined;
10+
</script>
11+
12+
<Layout.Stack>
13+
<Layout.Stack direction="row" gap="xs" alignItems="flex-start">
14+
<Layout.Stack gap="none">
15+
<Layout.Stack direction="row" gap="xs" alignItems="flex-start">
16+
<Selector.Checkbox {label} bind:checked on:change={handleChange} />
17+
18+
{#if reportValue !== undefined}
19+
<Tag size="xs" selected>{reportValue}</Tag>
20+
{:else if isLoading}
21+
<Spinner size="s" />
22+
{/if}
23+
</Layout.Stack>
24+
25+
{#if description}
26+
<div style:padding-left="2rem">
27+
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
28+
{description}
29+
</Typography.Text>
30+
</div>
31+
{/if}
32+
</Layout.Stack>
33+
</Layout.Stack>
34+
</Layout.Stack>

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

Lines changed: 0 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +0,0 @@
1-
<script lang="ts">
2-
import { InputNumber, InputPassword, InputText, InputTextarea } from '$lib/elements/forms';
3-
import { WizardStep } from '$lib/layout';
4-
import type { Provider } from '$lib/stores/migration';
5-
import { provider } from '.';
6-
7-
const providers: Record<Provider, string> = {
8-
appwrite: 'Appwrite',
9-
firebase: 'Firebase',
10-
supabase: 'Supabase',
11-
nhost: 'NHost'
12-
};
13-
</script>
14-
15-
<WizardStep>
16-
<svelte:fragment slot="title">Source</svelte:fragment>
17-
<svelte:fragment slot="subtitle">
18-
Select a source platform with the project you want to migrate. <a
19-
class="link"
20-
href="https://appwrite.io/docs/advanced/migrations"
21-
target="_blank"
22-
rel="noopener noreferrer">
23-
Learn about which platforms are supported</a
24-
>.
25-
</svelte:fragment>
26-
<div class="u-flex u-flex-vertical u-gap-8">
27-
{#each Object.entries(providers) as [key, value]}
28-
<label class="u-flex u-cross-center u-cursor-pointer u-gap-8">
29-
<input
30-
class="is-small"
31-
type="radio"
32-
name="provider"
33-
bind:group={$provider.provider}
34-
value={key} />
35-
<div class="content">
36-
<p>{value}</p>
37-
</div>
38-
</label>
39-
{/each}
40-
</div>
41-
42-
{#if $provider.provider === 'appwrite'}
43-
<InputText
44-
id="endpoint"
45-
label="Endpoint"
46-
required
47-
placeholder="Enter endpoint"
48-
bind:value={$provider.endpoint} />
49-
<InputText
50-
id="project-id"
51-
label="Project ID"
52-
required
53-
placeholder="Enter project ID"
54-
bind:value={$provider.projectID} />
55-
<InputPassword
56-
id="api-key"
57-
label="API Key"
58-
required
59-
placeholder="Enter API Key"
60-
bind:value={$provider.apiKey} />
61-
{:else if $provider.provider === 'firebase'}
62-
<div class="u-margin-block-start-16">
63-
<InputTextarea
64-
id="credentials"
65-
label="Account credentials"
66-
required
67-
bind:value={$provider.serviceAccount}
68-
placeholder="Enter account credentials" />
69-
</div>
70-
{:else if $provider.provider === 'supabase'}
71-
<p class="body-text-1 u-bold">Postgres credentials</p>
72-
73-
<InputText
74-
id="host"
75-
label="Host"
76-
required
77-
placeholder="Enter host"
78-
bind:value={$provider.host} />
79-
<InputNumber id="port" label="Port" placeholder="5432" bind:value={$provider.port} />
80-
<InputText
81-
id="username"
82-
label="Username"
83-
placeholder="postgres"
84-
bind:value={$provider.username} />
85-
<InputPassword
86-
id="password"
87-
label="Password"
88-
required
89-
placeholder="Enter password"
90-
bind:value={$provider.password} />
91-
<p class="body-text-1 u-bold">Supabase credentials</p>
92-
93-
<InputText
94-
id="endpoint"
95-
label="Endpoint"
96-
required
97-
placeholder="Enter endpoint"
98-
bind:value={$provider.endpoint} />
99-
<InputPassword
100-
id="api-key"
101-
label="API Key"
102-
required
103-
placeholder="Enter API Key"
104-
bind:value={$provider.apiKey} />
105-
{:else if $provider.provider === 'nhost'}
106-
<InputText
107-
id="region"
108-
label="Region"
109-
required
110-
placeholder="Enter region"
111-
bind:value={$provider.region} />
112-
<InputText
113-
id="subdomain"
114-
label="Subdomain"
115-
required
116-
placeholder="Enter subdomain"
117-
bind:value={$provider.subdomain} />
118-
<InputText
119-
id="database"
120-
label="Database"
121-
placeholder={$provider.subdomain ? `Default: ${$provider.subdomain}` : 'Enter database'}
122-
bind:value={$provider.database} />
123-
<InputText
124-
id="username"
125-
label="Username"
126-
placeholder="postgres"
127-
bind:value={$provider.username} />
128-
<InputPassword
129-
id="password"
130-
label="Password"
131-
required
132-
placeholder="Enter password"
133-
bind:value={$provider.password} />
134-
<InputPassword
135-
id="adminSecret"
136-
label="Admin secret"
137-
required
138-
placeholder="Enter admin secret"
139-
bind:value={$provider.adminSecret} />
140-
{/if}
141-
</WizardStep>

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

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +0,0 @@
1-
<script lang="ts">
2-
import { WizardStep } from '$lib/layout';
3-
import { sdk } from '$lib/stores/sdk';
4-
import { page } from '$app/state';
5-
import ResourceForm from '$routes/(console)/(migration-wizard)/resource-form.svelte';
6-
import { formData, provider } from '.';
7-
</script>
8-
9-
<WizardStep>
10-
<svelte:fragment slot="title">Resources</svelte:fragment>
11-
<svelte:fragment slot="subtitle">
12-
Select the resources you need to migrate to Appwrite. Some resources can be migrated, but
13-
with limitations. <a
14-
class="link"
15-
href="https://appwrite.io/docs/advanced/migrations"
16-
target="_blank"
17-
rel="noopener noreferrer">
18-
Learn about which resources are supported</a
19-
>.
20-
</svelte:fragment>
21-
<ResourceForm
22-
{formData}
23-
{provider}
24-
projectSdk={sdk.forProject(page.params.region, page.params.project)} />
25-
</WizardStep>

0 commit comments

Comments
 (0)