string encryption in create attribute

package.json

@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959",
+        "@appwrite.io/console": "^1.8.0",
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",

src/lib/helpers/types.ts

@@ -44,6 +44,7 @@ export type Column = PinkColumn & {
     format?: string;
     exclude?: boolean;
     elements?: string[] | { value: string | number; label: string }[];
+    encrypt?: boolean;
 };
 
 export function isValueOfStringEnum<T extends Record<string, string>>(

src/lib/sdk/billing.ts

@@ -338,6 +338,7 @@ export type Plan = {
     backupPolicies: number;
     emailBranding: boolean;
     supportsCredits: boolean;
+    databasesAllowEncrypt: boolean;
     buildSize: number; // in MB
     deploymentSize: number; // in MB
 };

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte

@@ -13,10 +13,11 @@
         Link,
         Popover,
         Table,
+        Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
     import Create from '../createAttribute.svelte';
-    import { isRelationship } from '../document-[document]/attributes/store';
+    import { isRelationship, isString } from '../document-[document]/attributes/store';
     import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
     import { attributes, type Attributes, isCsvImportInProgress } from '../store';
@@ -33,7 +34,8 @@
         IconPlus,
         IconSwitchHorizontal,
         IconTrash,
-        IconViewList
+        IconViewList,
+        IconLockClosed
     } from '@appwrite.io/pink-icons-svelte';
     import type { ComponentProps } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -113,6 +115,12 @@
                                 <Icon icon={option.icon} size="s" />
                             {/if}
                             <span class="text u-trim-1" data-private>{attribute.key}</span>
+                            {#if isString(attribute) && attribute.encrypt}
+                                <Tooltip>
+                                    <Icon size="s" icon={IconLockClosed} />
+                                    <div slot="tooltip">Encrypted</div>
+                                </Tooltip>
+                            {/if}
                             {#if attribute.status !== 'available'}
                                 <Badge
                                     size="s"

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte

@@ -18,7 +18,8 @@
                 data.size,
                 data.required,
                 data.default,
-                data.array
+                data.array,
+                data.encrypt
             );
     }
     export async function updateString(
@@ -42,20 +43,33 @@
 </script>
 
 <script lang="ts">
-    import { Selector } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Selector } from '@appwrite.io/pink-svelte';
     import { createConservative } from '$lib/helpers/stores';
     import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
+    import { Popover, Layout, Tag, Typography, Link } from '@appwrite.io/pink-svelte';
+    import { currentPlan, organization } from '$lib/stores/organization';
+    import { base } from '$app/paths';
+    import { isCloud } from '$lib/system';
 
     export let data: Partial<Models.AttributeString> = {
         required: false,
         size: 0,
         default: null,
-        array: false
+        array: false,
+        encrypt: false
     };
     export let editing = false;
 
     let savedDefault = data.default;
 
+    function handleEncryptedLabelClick(toggle: () => void) {
+        if (!hasDatabaseEncryptionPlan) {
+            toggle();
+        } else {
+            data.encrypt = !data.encrypt;
+        }
+    }
+
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
             savedDefault = data.default;
@@ -76,6 +90,12 @@
     $: listen(data);
 
     $: handleDefaultState($required || $array);
+
+    $: hasDatabaseEncryptionPlan = isCloud ? $currentPlan?.databasesAllowEncrypt : true;
+
+    $: if (data.encrypt && data.size < 150) {
+        data.size = 150;
+    }
 </script>
 
 <InputNumber
@@ -118,3 +138,41 @@
     disabled={data.required || editing}
     description="Indicate whether this attribute should act as an array, with the default value set as an empty
     array." />
+<Layout.Stack gap="xs" direction="column">
+    <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
+        <Selector.Checkbox
+            size="s"
+            id="encrypted"
+            bind:checked={data.encrypt}
+            disabled={!hasDatabaseEncryptionPlan || editing}
+            description="" />
+
+        <Layout.Stack gap="xxs" direction="column">
+            <Popover let:toggle placement="bottom-start">
+                <button
+                    type="button"
+                    class="u-cursor-pointer"
+                    on:click={(e) => handleEncryptedLabelClick(() => toggle(e))}>
+                    <Layout.Stack inline direction="row" alignItems="center">
+                        <Typography.Text variant="m-500">Encrypted</Typography.Text>
+                        {#if !hasDatabaseEncryptionPlan}
+                            <Tag variant="default" size="xs" on:click={toggle}>Pro</Tag>
+                        {/if}
+                    </Layout.Stack>
+                </button>
+                <ActionMenu.Root width="180px" slot="tooltip">
+                    <Typography.Text variant="m-500">
+                        Available on Pro plan.<Link.Anchor
+                            href={`${base}/organization-${$organization.$id}/change-plan`}
+                            >Upgrade</Link.Anchor> to enable encrypted attributes.
+                    </Typography.Text>
+                </ActionMenu.Root>
+            </Popover>
+
+            <Typography.Text>
+                Indicate whether this attribute is encrypted. Encrypted attributes cannot be
+                queried.
+            </Typography.Text>
+        </Layout.Stack>
+    </Layout.Stack>
+</Layout.Stack>

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/store.ts

@@ -15,3 +15,8 @@ export function isRelationship(attribute: Attributes): attribute is Models.Attri
     if (!attribute) return false;
     return attribute?.type === 'relationship';
 }
+
+export function isString(attribute: Attributes): attribute is Models.AttributeString {
+    if (!attribute) return false;
+    return attribute?.type === 'string';
+}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte

@@ -12,7 +12,11 @@
     import type { Models } from '@appwrite.io/console';
     import { afterUpdate, onMount } from 'svelte';
     import type { PageData } from './$types';
-    import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
+    import {
+        isRelationship,
+        isRelationshipToMany,
+        isString
+    } from './document-[document]/attributes/store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import { attributes, collection, columns } from './store';
     import type { ColumnType } from '$lib/helpers/types';
@@ -22,10 +26,10 @@
         Button,
         Link,
         Badge,
-        FloatingActionBar
+        FloatingActionBar,
+        InteractiveText
     } from '@appwrite.io/pink-svelte';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
-
     export let data: PageData;
 
     const databaseId = page.params.database;
@@ -237,14 +241,23 @@
                         {/if}
                     {:else}
                         {@const formatted = formatColumn(document[id])}
-                        <Tooltip disabled={!formatted.truncated} placement="bottom">
-                            <span>
-                                {formatted.value}
-                            </span>
-                            <span style:white-space="pre-wrap" slot="tooltip">
-                                {formatted.whole}
-                            </span>
-                        </Tooltip>
+                        {#if isString(attr) && attr.encrypt}
+                            <button on:click={(e) => e.preventDefault()}>
+                                <InteractiveText
+                                    variant="secret"
+                                    isVisible={false}
+                                    text={formatted.value} />
+                            </button>
+                        {:else}
+                            <Tooltip disabled={!formatted.truncated} placement="bottom">
+                                <span>
+                                    {formatted.value}
+                                </span>
+                                <span style:white-space="pre-wrap" slot="tooltip">
+                                    {formatted.whole}
+                                </span>
+                            </Tooltip>
+                        {/if}
                     {/if}
                 </Table.Cell>
             {/each}