mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
update: layout, copies,
This commit is contained in:
Darshan
+2
-2
@@ -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",
|
||||
|
||||
Generated
+16
-16
@@ -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
|
||||
|
||||
@@ -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<typeof createMigrationFormStore>;
|
||||
export let provider: ReturnType<typeof createMigrationProviderStore>;
|
||||
export let projectSdk: ReturnType<typeof getSdkForProject>;
|
||||
|
||||
type ValueOf<T> = T[keyof T];
|
||||
type FormData = WritableValue<typeof formData>;
|
||||
// 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];
|
||||
</script>
|
||||
|
||||
<Layout.Stack gap="l">
|
||||
@@ -157,10 +155,20 @@
|
||||
<!--TODO: FIX UI -->
|
||||
<Layout.Stack gap="l">
|
||||
<Layout.Stack direction="row">
|
||||
<Button.Button variant="text" role="button" on:click={deselectAll}
|
||||
>Deselect all</Button.Button>
|
||||
<Button.Button variant="text" role="button" on:click={selectAll}
|
||||
>Select all</Button.Button>
|
||||
<Button.Button
|
||||
variant="text"
|
||||
role="button"
|
||||
on:click={(event) => {
|
||||
event.preventDefault();
|
||||
deselectAll();
|
||||
}}>Deselect all</Button.Button>
|
||||
<Button.Button
|
||||
variant="text"
|
||||
role="button"
|
||||
on:click={(event) => {
|
||||
event.preventDefault();
|
||||
selectAll();
|
||||
}}>Select all</Button.Button>
|
||||
</Layout.Stack>
|
||||
<Divider />
|
||||
</Layout.Stack>
|
||||
@@ -173,7 +181,6 @@
|
||||
handleChange={handleInputChange('users.root')}
|
||||
description="Import all users"
|
||||
reportValue={report?.user}
|
||||
showReport={$provider.provider !== 'firebase'}
|
||||
isLoading={!error} />
|
||||
|
||||
<!-- TODO: no padding, change a component instead -->
|
||||
@@ -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} />
|
||||
|
||||
<div style:padding-left="2rem">
|
||||
@@ -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} />
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
@@ -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} />
|
||||
|
||||
<div style:padding-left="2rem">
|
||||
|
||||
+2
-3
@@ -8,7 +8,6 @@
|
||||
InputTextarea
|
||||
} from '$lib/elements/forms';
|
||||
import { provider } from '.';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let formSubmitted = false;
|
||||
|
||||
@@ -71,10 +70,10 @@
|
||||
<FormList>
|
||||
<InputTextarea
|
||||
id="credentials"
|
||||
label="Account credentials"
|
||||
label="Service Account JSON credentials"
|
||||
required
|
||||
bind:value={$provider.serviceAccount}
|
||||
placeholder="Enter account credentials" />
|
||||
placeholder="Enter Service Account JSON credentials" />
|
||||
</FormList>
|
||||
{:else if $provider.provider === 'supabase'}
|
||||
<FormList>
|
||||
|
||||
+4
-7
@@ -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 @@
|
||||
<Layout.Stack direction="row" gap="xs" alignItems="flex-start">
|
||||
<Selector.Checkbox {label} bind:checked on:change={handleChange} />
|
||||
|
||||
{#if showReport}
|
||||
{#if reportValue !== undefined}
|
||||
<Tag size="xs" selected>{reportValue}</Tag>
|
||||
{:else if isLoading}
|
||||
<Spinner size="s" />
|
||||
{/if}
|
||||
{#if reportValue !== undefined}
|
||||
<Tag size="xs" selected>{reportValue}</Tag>
|
||||
{:else if isLoading}
|
||||
<Spinner size="s" />
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { WizardStep } from '$lib/layout';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
|
||||
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} />
|
||||
</WizardStep>
|
||||
+102
-78
@@ -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)
|
||||
);
|
||||
</script>
|
||||
|
||||
<Wizard
|
||||
title="Create Migration"
|
||||
bind:showExitModal
|
||||
confirmExit
|
||||
{onExit}>
|
||||
<Form onSubmit={onFinish}>
|
||||
<Wizard title="Create migration" bind:showExitModal confirmExit {onExit}>
|
||||
<FormList>
|
||||
<Layout.Stack gap="xxl">
|
||||
<Fieldset legend="Source">
|
||||
<Layout.Stack gap="xl">
|
||||
@@ -126,7 +135,8 @@
|
||||
id={key}
|
||||
value={key}
|
||||
title={platform}
|
||||
imageRadius="s" />
|
||||
imageRadius="s"
|
||||
disabled={showResources} />
|
||||
{/each}
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
@@ -141,17 +151,16 @@
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
gap="xs">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<Typography.Text variant="m-500">Credentials set</Typography.Text>
|
||||
</Layout.Stack>
|
||||
<Typography.Text variant="m-500">
|
||||
{capitalize($provider.provider)} credentials set successfully
|
||||
</Typography.Text>
|
||||
|
||||
<Button.Button
|
||||
variant="secondary"
|
||||
size="s"
|
||||
on:click={() => (showResources = !showResources)}>Update</Button.Button>
|
||||
variant="secondary"
|
||||
on:click={() => (showResources = !showResources)}>
|
||||
Update
|
||||
</Button.Button>
|
||||
</Layout.Stack>
|
||||
{/if}
|
||||
</Fieldset>
|
||||
@@ -159,67 +168,73 @@
|
||||
{#if showResources}
|
||||
<Fieldset legend="Resources">
|
||||
<Layout.Stack gap="xl">
|
||||
<ResourceForm {formData} {provider} projectSdk={sdk.forProject} />
|
||||
<ResourceForm
|
||||
{formData}
|
||||
{provider}
|
||||
bind:errorInResources
|
||||
projectSdk={sdk.forProject} />
|
||||
</Layout.Stack>
|
||||
</Fieldset>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</Form>
|
||||
</FormList>
|
||||
|
||||
<!-- <svelte:fragment slot="aside">-->
|
||||
<!-- <Box radius="s">-->
|
||||
<!-- <div class="u-flex u-flex-vertical u-gap-16">-->
|
||||
<!-- <EyebrowHeading class="eyebrow" tag="h3" size={3}>Good to know</EyebrowHeading>-->
|
||||
<!-- <div class="u-flex u-gap-16">-->
|
||||
<!-- <div class="circled">-->
|
||||
<!-- <i class="icon-cog" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <p class="u-bold">Project settings are not imported</p>-->
|
||||
<!-- <p>You will need to set service and project settings manually</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="u-flex u-gap-16">-->
|
||||
<!-- <div class="circled">-->
|
||||
<!-- <i class="icon-trending-up" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <p class="u-bold">Keep your organization plan's limits in mind</p>-->
|
||||
<!-- <p>-->
|
||||
<!-- Make sure to have enough storage in your organization plan when-->
|
||||
<!-- importing files.-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- {#if $provider.provider === 'firebase'}-->
|
||||
<!-- <div class="u-flex u-gap-16">-->
|
||||
<!-- <div class="circled">-->
|
||||
<!-- <i class="icon-exclamation u-color-text-warning" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <p class="u-bold">Possible charges by Firebase</p>-->
|
||||
<!-- <p>-->
|
||||
<!-- Appwrite does not impose charges for importing data, but please note-->
|
||||
<!-- that Firebase may have its own pricing for this service-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- {:else}-->
|
||||
<!-- <div class="u-flex u-gap-16">-->
|
||||
<!-- <div class="circled">-->
|
||||
<!-- <i class="icon-currency-dollar" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <p class="u-bold">Transfer is free of charge</p>-->
|
||||
<!-- <p>-->
|
||||
<!-- You won't be charged for Appwrite bandwidth usage for importing data-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- {/if}-->
|
||||
<!-- </div>-->
|
||||
<!-- </Box>-->
|
||||
<!-- </svelte:fragment>-->
|
||||
<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 class="icon-wrapper">
|
||||
<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 class="icon-wrapper">
|
||||
<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 class="icon-wrapper" 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
|
||||
@@ -228,8 +243,8 @@
|
||||
showExitModal = true;
|
||||
}}>Cancel</Button.Button>
|
||||
|
||||
<!-- todo: @itznotabug, correct disabled state -->
|
||||
<Button.Button variant="primary" disabled>Create</Button.Button>
|
||||
<Button.Button variant="primary" disabled={!isFinalsButtonEnabled} on:click={onFinish}
|
||||
>Create</Button.Button>
|
||||
</svelte:fragment>
|
||||
</Wizard>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user