From 125fb5e730783ae3373b3ba81a7a57a8331cd173 Mon Sep 17 00:00:00 2001 From: Darshan Date: Thu, 6 Mar 2025 13:07:55 +0530 Subject: [PATCH] update: layout, copies, --- package.json | 4 +- pnpm-lock.yaml | 32 ++-- .../(migration-wizard)/resource-form.svelte | 33 ++-- .../migrations/(import)/credentials.svelte | 5 +- .../migrations/(import)/importReport.svelte | 11 +- .../settings/migrations/(import)/step2.svelte | 22 --- .../migrations/(import)/wizard.svelte | 180 ++++++++++-------- 7 files changed, 144 insertions(+), 143 deletions(-) delete mode 100644 src/routes/(console)/project-[project]/settings/migrations/(import)/step2.svelte diff --git a/package.json b/package.json index 121f0eb03..03a5d409c 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,9 @@ "dependencies": { "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb", "@appwrite.io/pink-icons": "0.25.0", - "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157 ", + "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@291 ", "@appwrite.io/pink-legacy": "^1.0.2", - "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f57e0157", + "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@291", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cf4746227..032f5cf50 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,14 +15,14 @@ importers: specifier: 0.25.0 version: 0.25.0 '@appwrite.io/pink-icons-svelte': - specifier: 'https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157 ' - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157(svelte@4.2.19) + specifier: 'https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@291 ' + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@291 (svelte@4.2.19) '@appwrite.io/pink-legacy': specifier: ^1.0.2 version: 1.0.2 '@appwrite.io/pink-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f57e0157 - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f57e0157(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@291 + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@291(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -107,7 +107,7 @@ importers: version: 6.6.3 '@testing-library/svelte': specifier: ^5.2.4 - version: 5.2.7(svelte@4.2.19)(vite@5.4.14(@types/node@22.13.5)(sass@1.85.1))(vitest@1.6.1) + version: 5.2.7(svelte@4.2.19)(vite@5.4.14(@types/node@22.13.5)(sass@1.85.1))(vitest@1.6.1(@types/node@22.13.5)(@vitest/ui@1.6.1)(jsdom@22.1.0)(sass@1.85.1)) '@testing-library/user-event': specifier: ^14.5.2 version: 14.6.1(@testing-library/dom@10.4.0) @@ -215,14 +215,14 @@ packages: resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb} version: 1.2.1 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@291 ': + resolution: {tarball: 'https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@291 '} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157006c846dc899e7bcdb83e5c0fb3c3149': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157006c846dc899e7bcdb83e5c0fb3c3149} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@aedaf83a0e105ca863a264ac2c1bffa001ddc8cf': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@aedaf83a0e105ca863a264ac2c1bffa001ddc8cf} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 @@ -236,8 +236,8 @@ packages: '@appwrite.io/pink-legacy@1.0.2': resolution: {integrity: sha512-1AYNcfbV+x0Tyj56CoieSq5g7+u+7F5/LDVN/z+Hx1kp9gj7xc1eT39Dy832xxfihImF6ksjp0FXEMVSBR8cew==} - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f57e0157': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f57e0157} + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@291': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@291} version: 1.0.0-next.85 peerDependencies: react-dom: ^18.0.0 @@ -4099,11 +4099,11 @@ snapshots: '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb': {} - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@291 (svelte@4.2.19)': dependencies: svelte: 4.2.19 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157006c846dc899e7bcdb83e5c0fb3c3149(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@aedaf83a0e105ca863a264ac2c1bffa001ddc8cf(svelte@4.2.19)': dependencies: svelte: 4.2.19 @@ -4116,9 +4116,9 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f57e0157(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@291(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: - '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157006c846dc899e7bcdb83e5c0fb3c3149(svelte@4.2.19) + '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@aedaf83a0e105ca863a264ac2c1bffa001ddc8cf(svelte@4.2.19) '@floating-ui/dom': 1.6.13 '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19) '@melt-ui/svelte': 0.86.3(svelte@4.2.19) @@ -5375,7 +5375,7 @@ snapshots: lodash: 4.17.21 redent: 3.0.0 - '@testing-library/svelte@5.2.7(svelte@4.2.19)(vite@5.4.14(@types/node@22.13.5)(sass@1.85.1))(vitest@1.6.1)': + '@testing-library/svelte@5.2.7(svelte@4.2.19)(vite@5.4.14(@types/node@22.13.5)(sass@1.85.1))(vitest@1.6.1(@types/node@22.13.5)(@vitest/ui@1.6.1)(jsdom@22.1.0)(sass@1.85.1))': dependencies: '@testing-library/dom': 10.4.0 svelte: 4.2.19 diff --git a/src/routes/(console)/(migration-wizard)/resource-form.svelte b/src/routes/(console)/(migration-wizard)/resource-form.svelte index 039c69687..89ef8b0b2 100644 --- a/src/routes/(console)/(migration-wizard)/resource-form.svelte +++ b/src/routes/(console)/(migration-wizard)/resource-form.svelte @@ -15,13 +15,14 @@ import type { Models } from '@appwrite.io/console'; import ImportReport from '$routes/(console)/project-[project]/settings/migrations/(import)/importReport.svelte'; + export let errorInResources: boolean; export let formData: ReturnType; export let provider: ReturnType; export let projectSdk: ReturnType; type ValueOf = T[keyof T]; type FormData = WritableValue; - // TL;DR of this type: It gets a object with two levels (in this case 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' @@ -131,12 +132,9 @@ isOpen = false; }); - $: resources = providerResources[$provider.provider]; + $: errorInResources = error; $: wizard.setNextDisabled(!report); - - $: { - console.log(JSON.stringify(report, null, 2)); - } + $: resources = providerResources[$provider.provider]; @@ -157,10 +155,20 @@ - Deselect all - Select all + { + event.preventDefault(); + deselectAll(); + }}>Deselect all + { + event.preventDefault(); + selectAll(); + }}>Select all @@ -173,7 +181,6 @@ handleChange={handleInputChange('users.root')} description="Import all users" reportValue={report?.user} - showReport={$provider.provider !== 'firebase'} isLoading={!error} /> @@ -195,7 +202,6 @@ handleChange={handleInputChange('databases.root')} description="Import all databases, including collections, indexes and attributes" reportValue={report?.database} - showReport={$provider.provider !== 'firebase'} isLoading={!error} />
@@ -205,7 +211,6 @@ handleChange={handleInputChange('databases.documents')} description="Import all functions and their active deployment" reportValue={report?.document} - showReport={$provider.provider !== 'firebase'} isLoading={!error} />
@@ -219,7 +224,6 @@ handleChange={handleInputChange('functions.root')} description="Import all functions and their active deployment" reportValue={report?.function} - showReport={$provider.provider !== 'firebase'} isLoading={!error} /> {#if resources?.includes('environment-variable') || resources?.includes('deployment')} @@ -254,7 +258,6 @@ checked={$formData.storage.root} handleChange={handleInputChange('storage.root')} reportValue={storageSize} - showReport={$provider.provider !== 'firebase'} isLoading={!error} />
diff --git a/src/routes/(console)/project-[project]/settings/migrations/(import)/credentials.svelte b/src/routes/(console)/project-[project]/settings/migrations/(import)/credentials.svelte index 1d799d783..24ec506aa 100644 --- a/src/routes/(console)/project-[project]/settings/migrations/(import)/credentials.svelte +++ b/src/routes/(console)/project-[project]/settings/migrations/(import)/credentials.svelte @@ -8,7 +8,6 @@ InputTextarea } from '$lib/elements/forms'; import { provider } from '.'; - import { onMount } from 'svelte'; export let formSubmitted = false; @@ -71,10 +70,10 @@ + placeholder="Enter Service Account JSON credentials" /> {:else if $provider.provider === 'supabase'} diff --git a/src/routes/(console)/project-[project]/settings/migrations/(import)/importReport.svelte b/src/routes/(console)/project-[project]/settings/migrations/(import)/importReport.svelte index 216132c80..a7c0b4cc3 100644 --- a/src/routes/(console)/project-[project]/settings/migrations/(import)/importReport.svelte +++ b/src/routes/(console)/project-[project]/settings/migrations/(import)/importReport.svelte @@ -3,7 +3,6 @@ export let label: string; export let checked: boolean; - export let showReport: boolean = true; export let isLoading: boolean = false; export let handleChange: (event: Event) => void; export let description: string | undefined = undefined; @@ -16,12 +15,10 @@ - {#if showReport} - {#if reportValue !== undefined} - {reportValue} - {:else if isLoading} - - {/if} + {#if reportValue !== undefined} + {reportValue} + {:else if isLoading} + {/if} diff --git a/src/routes/(console)/project-[project]/settings/migrations/(import)/step2.svelte b/src/routes/(console)/project-[project]/settings/migrations/(import)/step2.svelte deleted file mode 100644 index a78648131..000000000 --- a/src/routes/(console)/project-[project]/settings/migrations/(import)/step2.svelte +++ /dev/null @@ -1,22 +0,0 @@ - - - - Resources - - Select the resources you need to migrate to Appwrite. Some resources can be migrated, but - with limitations. - Learn about which resources are supported. - - - diff --git a/src/routes/(console)/project-[project]/settings/migrations/(import)/wizard.svelte b/src/routes/(console)/project-[project]/settings/migrations/(import)/wizard.svelte index 83d67c51b..68eed429f 100644 --- a/src/routes/(console)/project-[project]/settings/migrations/(import)/wizard.svelte +++ b/src/routes/(console)/project-[project]/settings/migrations/(import)/wizard.svelte @@ -10,12 +10,19 @@ import { started } from '../stores'; import { showMigrationBox } from '$lib/components/migrationBox.svelte'; import { addNotification } from '$lib/stores/notifications'; - import { Button, Card, Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte'; + import { Button, Card, Fieldset, Icon, Layout, Typography } from '@appwrite.io/pink-svelte'; import { Link } from '$lib/elements'; - import { Form } from '$lib/elements/forms'; - import { Box, EyebrowHeading } from '$lib/components'; + import { FormList } from '$lib/elements/forms'; + import { EyebrowHeading } from '$lib/components'; import Credentials from './credentials.svelte'; import ResourceForm from '$routes/(console)/(migration-wizard)/resource-form.svelte'; + import { + IconCog, + IconCurrencyDollar, + IconExclamation, + IconTrendingUp + } from '@appwrite.io/pink-icons-svelte'; + import { capitalize } from '$lib/helpers/string'; const onExit = () => { resetImportStores(); @@ -98,16 +105,18 @@ }; let showResources = false; - let showExitModal = false; + let errorInResources = false; + $: isFinalsButtonEnabled = + !errorInResources && + showResources && + Object.values($formData).some((category) => + Object.values(category).some((value) => value === true) + ); - -
+ +
@@ -126,7 +135,8 @@ id={key} value={key} title={platform} - imageRadius="s" /> + imageRadius="s" + disabled={showResources} /> {/each}
@@ -141,17 +151,16 @@ justifyContent="space-between" alignItems="center" gap="xs"> - - Credentials set - + + {capitalize($provider.provider)} credentials set successfully + (showResources = !showResources)}>Update + variant="secondary" + on:click={() => (showResources = !showResources)}> + Update + {/if} @@ -159,67 +168,73 @@ {#if showResources}
- +
{/if} - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + Good to know + + + + + + + + Project settings are not imported + You will need to set service and project settings manually. + + + + + + + + + + Keep your organization plan's limits in mind + Make sure to have enough storage in your organization plan when importing files. + + + + + + {@const isFirebase = $provider.provider === 'firebase'} + + + + + + {isFirebase + ? 'Possible charges by Firebase' + : 'Transfer is free of charge'} + + + {#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} + + + + + Cancel - - Create + Create @@ -237,6 +252,15 @@ .providers { display: grid; gap: var(--gap-l, 16px); - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + + @media (max-width: 768px) { + display: flex; + flex-direction: column; + } + } + + .icon-wrapper { + padding-block: 2px; }