fix: more fixes on databases.

2026-06-06 19:27:48 +00:00 · 2026-01-28 14:50:44 +05:30
parent 2164739370
commit 1505077b4a
16 changed files with 109 additions and 65 deletions
@@ -6,12 +6,15 @@ import type { DatabaseType, Field } from '$database/(entity)';
 import { coerceToNumber, isWithinSafeRange } from '$lib/helpers/numbers';

 export async function generateFields(
-    project: Models.Project,
+    project: {
+        id: string;
+        region: string;
+    },
    databaseId: string,
    tableId: string,
    databaseType: DatabaseType
 ): Promise<Field[]> {
-    const client = sdk.forProject(project.region, project.$id);
+    const client = sdk.forProject(project.region, project.id);

    switch (databaseType) {
        case 'legacy':
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
    import {
        EmailTemplateLocale,
        EmailTemplateType,
@@ -11,7 +11,7 @@
    import UpdateStatus from './updateStatus.svelte';
    import type { PageData } from './$types';

-    export let data: PageData
+    export let data: PageData;
 </script>

 <Container>
@@ -7,10 +7,12 @@

    export const promptDeleteUser = (id: string) => {
        showDelete.set(true);
-        goto(resolveRoute('/(console)/project-[region]-[project]/auth/user-[user]', {
-            ...page.params,
-            user: id
-        }));
+        goto(
+            resolveRoute('/(console)/project-[region]-[project]/auth/user-[user]', {
+                ...page.params,
+                user: id
+            })
+        );
    };
 </script>

@@ -10,8 +10,8 @@
    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';

    export let showDelete = false;
-    export let user: Models.User;
    export let project: Models.Project;
+    export let user: Models.User<Record<string, string>>;

    let error: string;
    const deleteUser = async () => {
@@ -25,10 +25,11 @@
                message: `${user.name ? user.name : 'User'} has been deleted`
            });
            trackEvent(Submit.UserDelete);
-            await goto(resolveRoute('/(console)/project-[region]-[project]/auth', {
-                ...page.params
-            }));
-
+            await goto(
+                resolveRoute('/(console)/project-[region]-[project]/auth', {
+                    ...page.params
+                })
+            );
        } catch (e) {
            error = e.message;
            trackError(e, Submit.UserDelete);
@@ -97,9 +97,11 @@
            <div>
                <Button
                    secondary
-                    disabled={!(prefs?.length &&
-                    prefs[prefs.length - 1][0] &&
-                    prefs[prefs.length - 1][1])}
+                    disabled={!(
+                        prefs?.length &&
+                        prefs[prefs.length - 1][0] &&
+                        prefs[prefs.length - 1][1]
+                    )}
                    on:click={() => {
                        if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
                            prefs.push(['', '']);
@@ -1,33 +1,44 @@
 <script lang="ts">
    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
    import { page } from '$app/state';
-    import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
    import { DatabasesPanel } from '$lib/commandCenter/panels';
-    import { project } from '../store';
+    import { resolveRoute, withPath } from '$lib/stores/navigation';
+    import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';

-    $: $registerCommands([
-        {
-            label: 'Go to usage',
-            callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/databases/usage`);
-            },
-            keys: ['g', 'u'],
-            disabled:
-                page.url.pathname.includes('usage') || page.url.pathname.includes('database-'),
-            group: 'databases'
-        },
-        {
-            label: 'Find databases',
-            callback: () => {
-                addSubPanel(DatabasesPanel);
-            },
-            group: 'databases',
-            rank: -1
-        }
-    ]);
+    let { children } = $props();

-    $: $updateCommandGroupRanks({ databases: 200, navigation: 100 });
+    const databasesProjectRoute = $derived.by(() => {
+        return resolveRoute('/(console)/project-[region]-[project]/databases', {
+            ...page.params
+        });
+    });
+
+    $effect(() => {
+        $registerCommands([
+            {
+                label: 'Go to usage',
+                callback: () => {
+                    goto(withPath(databasesProjectRoute, 'usage'));
+                },
+                keys: ['g', 'u'],
+                disabled:
+                    page.url.pathname.includes('usage') || page.url.pathname.includes('database-'),
+                group: 'databases'
+            },
+            {
+                label: 'Find databases',
+                callback: () => {
+                    addSubPanel(DatabasesPanel);
+                },
+                group: 'databases',
+                rank: -1
+            }
+        ]);
+    });
+
+    $effect(() => {
+        $updateCommandGroupRanks({ databases: 200, navigation: 100 });
+    });
 </script>

 <svelte:head>
@@ -37,4 +48,4 @@
    {/key}
 </svelte:head>

-<slot />
+{@render children()}
@@ -111,4 +111,4 @@
    {/if}
 </Container>

-<Create bind:showCreate on:created={handleCreate} />
+<Create bind:showCreate on:created={handleCreate} project={data.project} />
@@ -4,7 +4,7 @@
    import { Button, InputText } from '$lib/elements/forms';
    import { addNotification } from '$lib/stores/notifications';
    import { sdk } from '$lib/stores/sdk';
-    import { ID } from '@appwrite.io/console';
+    import { ID, type Models } from '@appwrite.io/console';
    import { createEventDispatcher } from 'svelte';
    import { isCloud } from '$lib/system';
    import { currentPlan } from '$lib/stores/organization';
@@ -14,9 +14,10 @@
    import { Alert, Icon, Tag } from '@appwrite.io/pink-svelte';
    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
    import { page } from '$app/state';
-    import { project } from '../store';

    export let showCreate = false;
+    export let project: Models.Project;
+
    let totalPolicies: UserBackupPolicy[] = [];

    const dispatch = createEventDispatcher();
@@ -134,11 +135,12 @@
            <Alert.Inline title="This database won't be backed up" status="warning">
                Upgrade your plan to ensure your data stays safe and backed up.
                <svelte:fragment slot="actions">
-                    <Button compact href={getChangePlanUrl($project.teamId)}>Upgrade plan</Button>
+                    <Button compact href={getChangePlanUrl(project.teamId)}>Upgrade plan</Button>
                </svelte:fragment>
            </Alert.Inline>
        {:else}
            <CreatePolicy
+                {project}
                bind:totalPolicies
                bind:isShowing={showCreate}
                title="Backup policies"
@@ -179,6 +179,7 @@
                    buttonText="Create policy"
                    buttonEvent="create_backup"
                    buttonType="secondary"
+                    project={data.project}
                    buttonDisabled={isDisabled}
                    policiesCreated={data.policies.total}
                    maxPolicies={$currentPlan.backupPolicies}
@@ -199,6 +200,7 @@
                    buttonText="Manual backup"
                    buttonEvent="create_backup"
                    buttonType="secondary"
+                    project={data.project}
                    buttonDisabled={isDisabled}
                    buttonMethod={() => {
                        $showCreateBackup = true;
@@ -227,7 +229,7 @@
            </div>
        {:else}
            <div class="u-flex-vertical u-gap-32">
-                <LockedCard />
+                <LockedCard project={data.project} />
            </div>
        {/if}
    </div>
@@ -238,7 +240,11 @@
    onSubmit={createPolicies}
    bind:show={$showCreatePolicy}
    bind:error={policyCreateError}>
-    <CreatePolicy bind:totalPolicies isShowing={$showCreatePolicy} isFromBackupsTab />
+    <CreatePolicy
+        bind:totalPolicies
+        isShowing={$showCreatePolicy}
+        isFromBackupsTab
+        project={data.project} />

    <svelte:fragment slot="footer">
        <Button secondary on:click={() => ($showCreatePolicy = false)}>Cancel</Button>
@@ -4,11 +4,12 @@
    import { Button } from '$lib/elements/forms';
    import { getChangePlanUrl } from '$lib/stores/billing';
    import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
    import { Badge, Icon, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
+    import type { Models } from '@appwrite.io/console';

    export let isFlex = true;
    export let title: string;
+    export let project: Models.Project;

    export let buttonText: string = null;
    export let policiesCreated: number = 0;
@@ -22,8 +23,8 @@
 </script>

 <header
-    class:is-disabled={buttonDisabled}
    class:u-flex={isFlex}
+    class:is-disabled={buttonDisabled}
    class="u-gap-12 common-section u-main-space-between u-flex-wrap">
    <Layout.Stack
        direction="row"
@@ -74,7 +75,7 @@
                                    class="u-underline"
                                    on:click={() => {
                                        showDropdown = !showDropdown;
-                                        goto(getChangePlanUrl($project.teamId));
+                                        goto(getChangePlanUrl(project.teamId));
                                    }}>Upgrade your plan</button> to add customized backup policies.
                            </span>
                        </slot>
@@ -10,7 +10,7 @@
        InputTime,
        Label
    } from '$lib/elements/forms';
-    import { ID } from '@appwrite.io/console';
+    import { ID, type Models } from '@appwrite.io/console';
    import { capitalize } from '$lib/helpers/string';
    import { backupRetainingOptions, customRetainingOptions } from '../store';
    import { presetPolicies, showCreatePolicy } from './store';
@@ -26,12 +26,12 @@
    import { isSmallViewport } from '$lib/stores/viewport';
    import { goto } from '$app/navigation';
    import { getChangePlanUrl } from '$lib/stores/billing';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';

    export let isShowing: boolean;
    export let isFromBackupsTab: boolean = false;
    export let title: string | undefined = undefined;
    export let subtitle: string | undefined = undefined;
+    export let project: Models.Project;

    export let totalPolicies: UserBackupPolicy[] = [];

@@ -214,7 +214,7 @@
                        on:click={() => {
                            isShowing = false;
                            $showCreatePolicy = false;
-                            goto(getChangePlanUrl($project.teamId));
+                            goto(getChangePlanUrl(project.teamId));
                        }}>Upgrade your plan</Button> to add customized backup policies.
                </Layout.Stack>
            </Layout.Stack>
@@ -230,7 +230,7 @@
                        <Link.Button
                            on:click={() => {
                                isShowing = false;
-                                goto(getChangePlanUrl($project.teamId));
+                                goto(getChangePlanUrl(project.teamId));
                            }}>Upgrade your plan</Link.Button>
                        to add customized backup policies.
                    </Typography.Text>
@@ -11,15 +11,23 @@

    import LockedBackupsDarkTablet from '$lib/images/backups/empty/backups-tablet-dark.png';
    import LockedBackupsLightTablet from '$lib/images/backups/empty/backups-tablet-light.png';
+    import type { Models } from '@appwrite.io/console';
+
+    let {
+        project
+    }: {
+        project: Models.Project;
+    } = $props();
 </script>

 <div class="u-flex-vertical u-gap-32">
-    <UpgradeCard />
+    <UpgradeCard {project} />

    <div>
        <!-- mobile, only policies are shown -->
        <div class="is-only-mobile u-flex-vertical u-gap-16">
            <ContainerHeader
+                {project}
                title="Policies"
                buttonText="Create policy"
                buttonType="secondary"
@@ -38,6 +46,7 @@
        <!-- tablet, only policies are shown but bigger table-->
        <div class="is-tablet u-flex-vertical u-gap-16 u-width-full-line">
            <ContainerHeader
+                {project}
                title="Policies"
                buttonText="Create policy"
                buttonType="secondary"
@@ -57,6 +66,7 @@
            <div class="desktop-locked-card-buttons u-flex u-gap-24">
                <div style="width: 31%">
                    <ContainerHeader
+                        {project}
                        title="Policies"
                        buttonText="Create policy"
                        buttonType="secondary"
@@ -65,6 +75,7 @@

                <div style="width: 69%; padding-inline-start: 1.5rem;">
                    <ContainerHeader
+                        {project}
                        title="Backups"
                        buttonText="Manual backup"
                        buttonType="secondary"
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
    import { app } from '$lib/stores/app';
    import { Button } from '$lib/elements/forms';

@@ -14,7 +14,9 @@
    import { isCloud } from '$lib/system';
    import { getChangePlanUrl } from '$lib/stores/billing';
    import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
-    import { page } from '$app/state';
+    import type { Models } from '@appwrite.io/console';
+
+    export let project: Models.Project;

    const title = isCloud
        ? 'Backups are available on paid plans'
@@ -30,8 +32,6 @@
    const mobileImg = isDark ? EmptyDarkMobile : EmptyLightMobile;
    const desktopImg = isDark ? EmptyDark : EmptyLight;
    const tabletImg = isDark ? EmptyDarkTablet : EmptyLightTablet;
-
-    const organizationId = page.data?.organization.$id ?? page.data?.project?.teamId;
 </script>

 <div>
@@ -81,7 +81,7 @@
                    <Button
                        external={!isCloud}
                        href={isCloud
-                            ? getChangePlanUrl(organizationId)
+                            ? getChangePlanUrl(project.teamId)
                            : 'https://cloud.appwrite.io/register'}>
                        {isCloud ? 'Upgrade plan' : 'Sign up'}
                    </Button>
@@ -91,7 +91,7 @@
                <Button
                    external={!isCloud}
                    href={isCloud
-                        ? getChangePlanUrl(organizationId)
+                        ? getChangePlanUrl(project.teamId)
                        : 'https://cloud.appwrite.io/register'}>
                    {isCloud ? 'Upgrade plan' : 'Sign up'}
                </Button>
@@ -42,7 +42,6 @@
    import CreateColumn from './createColumn.svelte';
    import { CreateColumnPanel } from '$lib/commandCenter/panels';
    import { showCreateEntity } from '../store';
-    import { project } from '../../../store';
    import { page } from '$app/state';
    import { canWriteTables } from '$lib/stores/roles';
    import {
@@ -298,8 +297,13 @@

                columnCreationHandler = handler;

+                const project = {
+                    id: page.params.project,
+                    region: page.params.region
+                };
+
                columns = await generateFields(
-                    $project,
+                    project,
                    page.params.database,
                    page.params.table,
                    databaseType
@@ -46,7 +46,6 @@
    import { ActionMenu, Selector } from '@appwrite.io/pink-svelte';
    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
    import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
    import { Popover, Layout, Tag, Typography, Link } from '@appwrite.io/pink-svelte';

    export let data: Partial<Models.ColumnString> = {
@@ -60,6 +59,8 @@
    export let disabled = false;
    export let autoIncreaseSize = false;

+    const organizationId = page.data?.organization?.$id ?? page.data?.project?.$id;
+
    let savedDefault = data.default;

    function handleDefaultState(hideDefault: boolean) {
@@ -161,7 +162,7 @@

                <ActionMenu.Root width="180px" slot="tooltip">
                    <Typography.Text variant="m-500">
-                        Available on Pro plan. <Link.Anchor href={getChangePlanUrl($project.teamId)}
+                        Available on Pro plan. <Link.Anchor href={getChangePlanUrl(organizationId)}
                            >Upgrade</Link.Anchor>
                        to enable encrypted columns.
                    </Typography.Text>