Merge pull request #2884 from appwrite/fix-column-encryption-for-other-attributes

HarshMN2345 · web-flow · commit 696580097fee · 2026-02-26T15:40:09.000+05:30
fix: column encryption support for other attributes
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -15,7 +15,7 @@
         Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
-    import { isRelationship, isSpatialType, isString } from '../rows/store';
+    import { isRelationship, isSpatialType, isTextType } from '../rows/store';
     import {
         columns,
         type Columns,
@@ -443,7 +443,7 @@
                                         {/if}
                                     </Typography.Text>
 
-                                    {#if isString(column) && column.encrypt}
+                                    {#if isTextType(column) && 'encrypt' in column && column.encrypt}
                                         <Tooltip portal>
                                             <Icon
                                                 size="s"
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/encryptCheckbox.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/encryptCheckbox.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { isCloud } from '$lib/system';
+    import { getChangePlanUrl } from '$lib/stores/billing';
+    import { currentPlan } from '$lib/stores/organization';
+    import {
+        ActionMenu,
+        Popover,
+        Layout,
+        Selector,
+        Tag,
+        Tooltip,
+        Typography,
+        Link
+    } from '@appwrite.io/pink-svelte';
+
+    let {
+        encrypt = $bindable(false),
+        editing = false,
+        disabled = false,
+        id = 'encrypt'
+    }: {
+        encrypt?: boolean;
+        editing?: boolean;
+        disabled?: boolean;
+        id?: string;
+    } = $props();
+
+    const organizationId = page.data?.organization?.$id ?? page.data?.project?.teamId;
+    const supportsEncryption = $derived(isCloud ? $currentPlan?.databasesAllowEncrypt : true);
+</script>
+
+<Tooltip disabled={!(editing || disabled)} maxWidth="275px" placement="bottom-start">
+    <div
+        class="popover-holder"
+        class:cursor-not-allowed={editing || disabled}
+        class:disabled-checkbox={!supportsEncryption || editing || disabled}>
+        <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
+            <Popover let:toggle placement="bottom-start">
+                <Selector.Checkbox
+                    size="s"
+                    {id}
+                    bind:checked={encrypt}
+                    disabled={!supportsEncryption || editing || disabled} />
+
+                <Layout.Stack gap="xxs" direction="column">
+                    <button
+                        type="button"
+                        disabled={editing || disabled}
+                        class:cursor-pointer={!(editing || disabled)}
+                        class:cursor-not-allowed={editing || disabled}
+                        onclick={(e) => {
+                            if (!supportsEncryption) {
+                                toggle(e);
+                            } else {
+                                encrypt = !encrypt;
+                            }
+                        }}>
+                        <Layout.Stack inline gap="xxs" direction="row" alignItems="center">
+                            <Typography.Text variant="m-500">Encrypted</Typography.Text>
+                            {#if !supportsEncryption}
+                                <Tag variant="default" size="xs">Pro</Tag>
+                            {/if}
+                        </Layout.Stack>
+                    </button>
+                    <Typography.Text color="--fgcolor-neutral-tertiary">
+                        Protect column against data leaks for best privacy compliance. Encrypted
+                        columns cannot be queried.
+                    </Typography.Text>
+                </Layout.Stack>
+
+                <ActionMenu.Root width="180px" slot="tooltip">
+                    <Typography.Text variant="m-500">
+                        Available on Pro plan. <Link.Anchor href={getChangePlanUrl(organizationId)}
+                            >Upgrade</Link.Anchor>
+                        to enable encrypted columns.
+                    </Typography.Text>
+                </ActionMenu.Root>
+            </Popover>
+        </Layout.Stack>
+    </div>
+
+    <svelte:fragment slot="tooltip">
+        Encryption can only be set when creating the column.
+    </svelte:fragment>
+</Tooltip>
+
+<style lang="scss">
+    .popover-holder {
+        & :global([role='tooltip']) {
+            margin-top: 4px;
+            left: 8rem !important;
+        }
+
+        &.disabled-checkbox :global(button) {
+            cursor: unset;
+        }
+    }
+
+    .cursor-pointer {
+        cursor: pointer !important;
+    }
+
+    .cursor-not-allowed {
+        cursor: not-allowed;
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/longtext.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/longtext.svelte
@@ -17,7 +17,8 @@
                 key,
                 required: data.required,
                 xdefault: data.default,
-                array: data.array
+                array: data.array,
+                encrypt: data.encrypt
             });
     }
     export async function updateLongtext(
@@ -42,17 +43,21 @@
 <script lang="ts">
     import { createConservative } from '$lib/helpers/stores';
     import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
+    import EncryptCheckbox from './encryptCheckbox.svelte';
     import { InputTextarea } from '$lib/elements/forms';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let data: Partial<Models.ColumnLongtext> = {
         required: false,
-        array: false
+        array: false,
+        encrypt: false
     };
 
     export let editing = false;
     export let disabled = false;
 
+    if (data && (data.encrypt === undefined || data.encrypt === null)) data.encrypt = false;
+
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -97,3 +102,7 @@
     {disabled}
     bind:array={data.array}
     bind:required={data.required} />
+
+<Layout.Stack gap="xs" direction="column">
+    <EncryptCheckbox id="encrypt-longtext" bind:encrypt={data.encrypt} {editing} {disabled} />
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/mediumtext.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/mediumtext.svelte
@@ -17,7 +17,8 @@
                 key,
                 required: data.required,
                 xdefault: data.default,
-                array: data.array
+                array: data.array,
+                encrypt: data.encrypt
             });
     }
     export async function updateMediumtext(
@@ -42,17 +43,21 @@
 <script lang="ts">
     import { createConservative } from '$lib/helpers/stores';
     import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
+    import EncryptCheckbox from './encryptCheckbox.svelte';
     import { InputTextarea } from '$lib/elements/forms';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let data: Partial<Models.ColumnMediumtext> = {
         required: false,
-        array: false
+        array: false,
+        encrypt: false
     };
 
     export let editing = false;
     export let disabled = false;
 
+    if (data && (data.encrypt === undefined || data.encrypt === null)) data.encrypt = false;
+
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -97,3 +102,7 @@
     {disabled}
     bind:array={data.array}
     bind:required={data.required} />
+
+<Layout.Stack gap="xs" direction="column">
+    <EncryptCheckbox id="encrypt-mediumtext" bind:encrypt={data.encrypt} {editing} {disabled} />
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/text.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/text.svelte
@@ -15,7 +15,8 @@
             key,
             required: data.required,
             xdefault: data.default,
-            array: data.array
+            array: data.array,
+            encrypt: data.encrypt
         });
     }
     export async function updateText(
@@ -38,17 +39,21 @@
 <script lang="ts">
     import { createConservative } from '$lib/helpers/stores';
     import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
+    import EncryptCheckbox from './encryptCheckbox.svelte';
     import { InputTextarea } from '$lib/elements/forms';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let data: Partial<Models.ColumnText> = {
         required: false,
-        array: false
+        array: false,
+        encrypt: false
     };
 
     export let editing = false;
     export let disabled = false;
 
+    if (data && (data.encrypt === undefined || data.encrypt === null)) data.encrypt = false;
+
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -93,3 +98,7 @@
     {disabled}
     bind:array={data.array}
     bind:required={data.required} />
+
+<Layout.Stack gap="xs" direction="column">
+    <EncryptCheckbox id="encrypt-text" bind:encrypt={data.encrypt} {editing} {disabled} />
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/varchar.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/varchar.svelte
@@ -16,7 +16,8 @@
             size: data.size,
             required: data.required,
             xdefault: data.default,
-            array: data.array
+            array: data.array,
+            encrypt: data.encrypt
         });
     }
     export async function updateVarchar(
@@ -45,16 +46,20 @@
     import { ProgressBar } from '$lib/components';
     import { Layout, Typography, Tooltip, Icon } from '@appwrite.io/pink-svelte';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import EncryptCheckbox from './encryptCheckbox.svelte';
 
     export let data: Partial<Models.ColumnVarchar> = {
         required: false,
         size: 255,
-        array: false
+        array: false,
+        encrypt: false
     };
 
     export let editing = false;
     export let disabled = false;
 
+    if (data && (data.encrypt === undefined || data.encrypt === null)) data.encrypt = false;
+
     // Local size for reactivity
     let size = data.size ?? 255;
     $: data.size = size;
@@ -118,6 +123,10 @@
     $: listen(data);
 
     $: handleDefaultState($required || $array);
+
+    $: if (data.encrypt && size < 150) {
+        size = 150;
+    }
 </script>
 
 <InputNumber
@@ -127,8 +136,11 @@
     {disabled}
     placeholder="Enter size"
     bind:value={size}
-    min={1}
-    max={16383} />
+    min={data.encrypt ? 150 : 1}
+    max={16383}
+    helper={data.encrypt
+        ? 'Encrypted varchar columns require a minimum size of 150.'
+        : undefined} />
 
 {#if !editing}
     <Layout.Stack gap="xs">
@@ -173,3 +185,7 @@
     {disabled}
     bind:array={data.array}
     bind:required={data.required} />
+
+<Layout.Stack gap="xs" direction="column">
+    <EncryptCheckbox id="encrypt-varchar" bind:encrypt={data.encrypt} {editing} {disabled} />
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
@@ -47,6 +47,7 @@
         required: column?.required ?? false,
         array: column?.array ?? false,
         default: column?.default ?? null,
+        encrypt: (column as { encrypt?: boolean })?.encrypt ?? false,
         ...column
     } as Partial<Columns>);
 
@@ -60,7 +61,8 @@
         data = {
             required: false,
             array: false,
-            default: null
+            default: null,
+            encrypt: false
         };
 
         /* default to text */
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -17,7 +17,7 @@
         isRelationship,
         isRelationshipToMany,
         isSpatialType,
-        isString
+        isTextType
     } from './rows/store';
     import {
         columns,
@@ -1072,7 +1072,9 @@
                                         {@const isEmptyArray = formatted === 'Empty'}
                                         {@const isDatetimeAttribute = rowColumn.type === 'datetime'}
                                         {@const isEncryptedAttribute =
-                                            isString(rowColumn) && rowColumn.encrypt}
+                                            isTextType(rowColumn) &&
+                                            'encrypt' in rowColumn &&
+                                            rowColumn.encrypt}
                                         {#if isDatetimeAttribute}
                                             <DualTimeView time={value}>
                                                 <span slot="title">Timestamp</span>
