Merge pull request #2505 from appwrite/fix-dat-835

package.json

@@ -52,7 +52,7 @@
         "@eslint/js": "^9.31.0",
         "@melt-ui/pp": "^0.3.2",
         "@melt-ui/svelte": "^0.86.5",
-        "@playwright/test": "^1.51.1",
+        "@playwright/test": "^1.55.1",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/kit": "^2.42.1",
         "@sveltejs/vite-plugin-svelte": "^5.0.3",

pnpm-lock.yaml

@@ -97,8 +97,8 @@ importers:
         specifier: ^0.86.5
         version: 0.86.5(svelte@5.25.3)
       '@playwright/test':
-        specifier: ^1.51.1
-        version: 1.51.1
+        specifier: ^1.55.1
+        version: 1.56.1
       '@sveltejs/adapter-static':
         specifier: ^3.0.8
         version: 3.0.8(@sveltejs/kit@2.42.1(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))
@@ -993,8 +993,8 @@ packages:
     resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
-  '@playwright/test@1.51.1':
-    resolution: {integrity: sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q==}
+  '@playwright/test@1.56.1':
+    resolution: {integrity: sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -2830,13 +2830,13 @@ packages:
     resolution: {integrity: sha512-hMhneYm3GCPyQon88SZrVJx+LlqhM1kZFQbuAgXPoh/Az2YvO1B6bitT9qlhpiTdJlsT5lsr3gPmzoVjb5CDXA==}
     engines: {node: '>=10'}
 
-  playwright-core@1.51.1:
-    resolution: {integrity: sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==}
+  playwright-core@1.56.1:
+    resolution: {integrity: sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.51.1:
-    resolution: {integrity: sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==}
+  playwright@1.56.1:
+    resolution: {integrity: sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -4453,9 +4453,9 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.1
     optional: true
 
-  '@playwright/test@1.51.1':
+  '@playwright/test@1.56.1':
     dependencies:
-      playwright: 1.51.1
+      playwright: 1.56.1
 
   '@polka/url@1.0.0-next.28': {}
 
@@ -6486,11 +6486,11 @@ snapshots:
 
   plausible-tracker@0.3.9: {}
 
-  playwright-core@1.51.1: {}
+  playwright-core@1.56.1: {}
 
-  playwright@1.51.1:
+  playwright@1.56.1:
     dependencies:
-      playwright-core: 1.51.1
+      playwright-core: 1.56.1
     optionalDependencies:
       fsevents: 2.3.2
 

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

@@ -38,6 +38,9 @@
 <script lang="ts">
     import { InputSelect } from '$lib/elements/forms';
 
+    import { createConservative } from '$lib/helpers/stores';
+    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
+
     export let editing = false;
     export let data: Partial<Models.ColumnBoolean> = {
         required: false,
@@ -45,9 +48,6 @@
         default: null
     };
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Selector } from '@appwrite.io/pink-svelte';
-
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -67,6 +67,7 @@
         array: false,
         ...data
     });
+
     $: listen(data);
 
     $: handleDefaultState($required || $array);
@@ -83,17 +84,5 @@
         { label: 'False', value: false }
     ]}
     bind:value={data.default} />
-<Selector.Checkbox
-    size="s"
-    id="required"
-    label="Required"
-    bind:checked={data.required}
-    disabled={data.array}
-    description="Indicate whether this column is required" />
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+
+<RequiredArrayCheckboxes {editing} bind:array={data.array} bind:required={data.required} />

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

@@ -42,13 +42,12 @@
 
 <script lang="ts">
     import { InputDateTime } from '$lib/elements/forms';
+    import { createConservative } from '$lib/helpers/stores';
+    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
 
     export let editing = false;
     export let data: Partial<Models.ColumnDatetime>;
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Selector } from '@appwrite.io/pink-svelte';
-
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -80,17 +79,5 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<Selector.Checkbox
-    size="s"
-    id="required"
-    label="Required"
-    bind:checked={data.required}
-    disabled={data.array}
-    description="Indicate whether this column is required" />
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+
+<RequiredArrayCheckboxes {editing} bind:array={data.array} bind:required={data.required} />

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

@@ -38,13 +38,12 @@
 
 <script lang="ts">
     import { InputEmail } from '$lib/elements/forms';
+    import { createConservative } from '$lib/helpers/stores';
+    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
 
     export let editing = false;
     export let data: Partial<Models.ColumnEmail>;
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Selector } from '@appwrite.io/pink-svelte';
-
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -64,6 +63,7 @@
         array: false,
         ...data
     });
+
     $: listen(data);
 
     $: handleDefaultState($required || $array);
@@ -76,17 +76,5 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<Selector.Checkbox
-    size="s"
-    id="required"
-    label="Required"
-    bind:checked={data.required}
-    disabled={data.array}
-    description="Indicate whether this column is required" />
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+
+<RequiredArrayCheckboxes {editing} bind:array={data.array} bind:required={data.required} />

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

@@ -39,15 +39,15 @@
 </script>
 
 <script lang="ts">
+    import { createConservative } from '$lib/helpers/stores';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { InputSelect, InputTags } from '$lib/elements/forms';
+    import { Icon, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
 
     export let editing = false;
     export let data: Partial<Models.ColumnEnum>;
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Icon, Selector, Tooltip, Typography } from '@appwrite.io/pink-svelte';
-    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
-
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -107,17 +107,5 @@
     placeholder="Select a value"
     {options}
     bind:value={data.default} />
-<Selector.Checkbox
-    size="s"
-    id="required"
-    label="Required"
-    bind:checked={data.required}
-    disabled={data.array}
-    description="Indicate whether this column is required" />
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+
+<RequiredArrayCheckboxes {editing} bind:array={data.array} bind:required={data.required} />

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

@@ -41,7 +41,10 @@
 </script>
 
 <script lang="ts">
+    import { Layout } from '@appwrite.io/pink-svelte';
     import { InputNumber } from '$lib/elements/forms';
+    import { createConservative } from '$lib/helpers/stores';
+    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
 
     export let editing = false;
     export let data: Partial<Models.ColumnFloat> = {
@@ -52,9 +55,6 @@
         array: false
     };
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Layout, Selector } from '@appwrite.io/pink-svelte';
-
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -105,17 +105,5 @@
     disabled={data.required || data.array}
     nullable={!data.required && !data.array}
     step={0.1} />
-<Selector.Checkbox
-    size="s"
-    id="required"
-    label="Required"
-    bind:checked={data.required}
-    disabled={data.array}
-    description="Indicate whether this column is required" />
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+
+<RequiredArrayCheckboxes {editing} bind:array={data.array} bind:required={data.required} />

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

@@ -41,7 +41,10 @@
 </script>
 
 <script lang="ts">
+    import { Layout } from '@appwrite.io/pink-svelte';
     import { InputNumber } from '$lib/elements/forms';
+    import { createConservative } from '$lib/helpers/stores';
+    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
 
     export let editing = false;
 
@@ -53,9 +56,6 @@
         array: false
     };
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Layout, Selector } from '@appwrite.io/pink-svelte';
-
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -103,17 +103,5 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<Selector.Checkbox
-    size="s"
-    id="required"
-    label="Required"
-    bind:checked={data.required}
-    disabled={data.array}
-    description="Indicate whether this column is required" />
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+
+<RequiredArrayCheckboxes {editing} bind:array={data.array} bind:required={data.required} />

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

@@ -37,13 +37,12 @@
 
 <script lang="ts">
     import { InputText } from '$lib/elements/forms';
+    import { createConservative } from '$lib/helpers/stores';
+    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
 
     export let editing = false;
     export let data: Partial<Models.ColumnIp>;
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Selector } from '@appwrite.io/pink-svelte';
-
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -63,6 +62,7 @@
         array: false,
         ...data
     });
+
     $: listen(data);
 
     $: handleDefaultState($required || $array);
@@ -75,17 +75,5 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<Selector.Checkbox
-    size="s"
-    id="required"
-    label="Required"
-    bind:checked={data.required}
-    disabled={data.array}
-    description="Indicate whether this column is required" />
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+
+<RequiredArrayCheckboxes {editing} bind:array={data.array} bind:required={data.required} />

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Selector, Tooltip } from '@appwrite.io/pink-svelte';
+
+    let {
+        required = $bindable(false),
+        array = $bindable(false),
+        editing = false
+    }: {
+        required: boolean;
+        array: boolean;
+        editing: boolean;
+    } = $props();
+</script>
+
+<Tooltip disabled={!array} maxWidth="275px" placement="bottom-start">
+    <div style:width="fit-content">
+        <Selector.Checkbox
+            size="s"
+            id="required"
+            label="Required"
+            bind:checked={required}
+            disabled={array}
+            description="Indicate whether this column is required." />
+    </div>
+
+    <svelte:fragment slot="tooltip">
+        Required cannot be selected because array columns may contain more than one value.
+    </svelte:fragment>
+</Tooltip>
+
+<Tooltip disabled={!(required || editing)} maxWidth="275px" placement="bottom-start">
+    <div style:width="fit-content">
+        <Selector.Checkbox
+            size="s"
+            id="array"
+            label="Array"
+            bind:checked={array}
+            disabled={required || editing}
+            description="Indicate whether this column is an array. Defaults to an empty array." />
+    </div>
+
+    <svelte:fragment slot="tooltip">
+        {#if editing}
+            Array cannot be selected to avoid data incompatibility.
+        {:else}
+            Array cannot be selected because required columns must be populated in all rows with a
+            single value.
+        {/if}
+    </svelte:fragment>
+</Tooltip>

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

@@ -44,6 +44,7 @@
     import { currentPlan } from '$lib/stores/organization';
     import { createConservative } from '$lib/helpers/stores';
     import { ActionMenu, Selector } from '@appwrite.io/pink-svelte';
+    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
     import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
     import { Popover, Layout, Tag, Typography, Link } from '@appwrite.io/pink-svelte';
 
@@ -105,21 +106,7 @@
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
 
-<Selector.Checkbox
-    size="s"
-    id="required"
-    label="Required"
-    bind:checked={data.required}
-    disabled={data.array}
-    description="Indicate whether this column is required." />
-
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+<RequiredArrayCheckboxes {editing} bind:array={data.array} bind:required={data.required} />
 
 <Layout.Stack gap="xs" direction="column">
     <div

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

@@ -38,13 +38,12 @@
 
 <script lang="ts">
     import { InputURL } from '$lib/elements/forms';
+    import { createConservative } from '$lib/helpers/stores';
+    import RequiredArrayCheckboxes from './requiredArrayCheckboxes.svelte';
 
     export let data: Partial<Models.ColumnUrl>;
     export let editing = false;
 
-    import { createConservative } from '$lib/helpers/stores';
-    import { Selector } from '@appwrite.io/pink-svelte';
-
     let savedDefault = data.default;
 
     function handleDefaultState(hideDefault: boolean) {
@@ -64,6 +63,7 @@
         array: false,
         ...data
     });
+
     $: listen(data);
 
     $: handleDefaultState($required || $array);
@@ -76,17 +76,5 @@
     bind:value={data.default}
     disabled={data.required || data.array}
     nullable={!data.required && !data.array} />
-<Selector.Checkbox
-    size="s"
-    id="required"
-    label="Required"
-    bind:checked={data.required}
-    disabled={data.array}
-    description="Indicate whether this column is required" />
-<Selector.Checkbox
-    size="s"
-    id="array"
-    label="Array"
-    bind:checked={data.array}
-    disabled={data.required || editing}
-    description="Indicate whether this column is an array. Defaults to an empty array." />
+
+<RequiredArrayCheckboxes {editing} bind:array={data.array} bind:required={data.required} />