Merge pull request #1915 from appwrite/fix-various-issue

fix: various issues

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@6ea6004",
+        "@appwrite.io/pink-svelte": "https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@7b28443",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

pnpm-lock.yaml

@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@6ea6004
-        version: https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@6ea6004(svelte@5.25.3)
+        specifier: https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@7b28443
+        version: https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@7b28443(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -278,8 +278,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@6ea6004':
-    resolution: {tarball: https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@6ea6004}
+  '@appwrite.io/pink-svelte@https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@7b28443':
+    resolution: {tarball: https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@7b28443}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3635,7 +3635,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@6ea6004(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@7b28443(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13

src/lib/components/billing/usageRates.svelte

@@ -17,31 +17,6 @@
         ? new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toString()
         : org?.billingNextInvoiceDate;
 
-    const planData = [
-        {
-            id: 'members',
-            resource: 'Organization members',
-            unit: 'member'
-        },
-        { id: 'bandwidth', resource: 'Bandwidth', unit: 'GB' },
-        { id: 'storage', resource: 'Storage', unit: 'GB' },
-        {
-            id: 'executions',
-            resource: 'Function executions',
-            unit: ' executions'
-        },
-        {
-            id: 'users',
-            resource: 'Users',
-            unit: ' Users'
-        },
-        {
-            id: 'realtime',
-            resource: 'Concurrent connections',
-            unit: ' connections'
-        }
-    ];
-
     $: isFree = org.billingPlan === BillingPlan.FREE;
 
     // equal or above means unlimited!
@@ -50,6 +25,10 @@
         const exceedsSafeLimit = count >= Number.MAX_SAFE_INTEGER;
         return exceedsSafeLimit ? 'Unlimited' : count || 0;
     };
+
+    function getPlanLimit(key: string): number | false {
+        return plan[key] || false;
+    }
 </script>
 
 <Modal bind:show title="Usage rates">
@@ -77,29 +56,33 @@
             <Table.Header.Cell column="limit" {root}>Limit</Table.Header.Cell>
             <Table.Header.Cell column="rate" {root}>Rate</Table.Header.Cell>
         </svelte:fragment>
-        {#each planData as usage}
-            {#if usage['id'] === 'members'}
-                <Table.Row.Base {root}>
-                    <Table.Cell column="resource" {root}>{usage.resource}</Table.Cell>
-                    <Table.Cell column="limit" {root}>
-                        {getCorrectSeatsCountValue(plan.addons.seats.limit)}
-                    </Table.Cell>
+        {#each Object.values(plan.addons) as addon}
+            <Table.Row.Base {root}>
+                <Table.Cell column="resource" {root}>{addon.invoiceDesc}</Table.Cell>
+                <Table.Cell column="limit" {root}>
+                    {getCorrectSeatsCountValue(addon.limit)}
+                </Table.Cell>
+                {#if !isFree}
                     <Table.Cell column="rate" {root}>
-                        {formatCurrency(plan.addons?.seats?.price)}/{usage?.unit}
+                        {formatCurrency(addon.price)}/member
                     </Table.Cell>
-                </Table.Row.Base>
-            {:else}
-                {@const addon = plan.addons[usage.id]}
+                {/if}
+            </Table.Row.Base>
+        {/each}
+        {#each Object.entries(plan.usage) as [key, usage]}
+            {@const limit = getPlanLimit(key)}
+            {@const show = limit !== false}
+            {#if show}
                 <Table.Row.Base {root}>
-                    <Table.Cell column="resource" {root}>{usage.resource}</Table.Cell>
+                    <Table.Cell column="resource" {root}>{usage.name}</Table.Cell>
                     <Table.Cell column="limit" {root}>
-                        {abbreviateNumber(plan[usage.id])}{usage?.unit}
+                        {abbreviateNumber(limit)}{usage.unit}
                     </Table.Cell>
                     {#if !isFree}
                         <Table.Cell column="rate" {root}>
-                            {formatCurrency(addon?.price)}/{['MB', 'GB', 'TB'].includes(addon?.unit)
-                                ? addon?.value
-                                : abbreviateNumber(addon?.value, 0)}{usage?.unit}
+                            {formatCurrency(usage.price)}/{abbreviateNumber(
+                                usage.value
+                            )}{usage.unit}
                         </Table.Cell>
                     {/if}
                 </Table.Row.Base>

src/lib/sdk/billing.ts

@@ -278,6 +278,7 @@ export type AddressesList = {
 };
 
 export type AdditionalResource = {
+    name: string;
     currency: string;
     invoiceDesc: string;
     price: number;

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

@@ -22,7 +22,8 @@
         Button,
         Link,
         Badge,
-        FloatingActionBar
+        FloatingActionBar,
+        Typography
     } from '@appwrite.io/pink-svelte';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
 
@@ -102,6 +103,7 @@
                 type: attribute.type as ColumnType,
                 show: selected?.includes(attribute.key) ?? true,
                 array: attribute?.array,
+                width: 168,
                 format:
                     'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
                 elements: 'elements' in attribute ? attribute.elements : null
@@ -166,7 +168,12 @@
     let:root
     allowSelection
     bind:selectedRows
-    columns={[{ id: '$id', width: 200 }, ...$columns, { id: '$created' }, { id: '$updated' }]}>
+    columns={[
+        { id: '$id', width: 200 },
+        ...$columns,
+        { id: '$created', width: 200 },
+        { id: '$updated', width: 200 }
+    ]}>
     <svelte:fragment slot="header" let:root>
         <Table.Header.Cell column="$id" {root}>Document ID</Table.Header.Cell>
         {#each $columns as column}
@@ -238,10 +245,13 @@
                     {:else}
                         {@const formatted = formatColumn(document[id])}
                         <Tooltip disabled={!formatted.truncated} placement="bottom">
-                            <span>
+                            <Typography.Text truncate>
                                 {formatted.value}
-                            </span>
-                            <span style:white-space="pre-wrap" slot="tooltip">
+                            </Typography.Text>
+                            <span
+                                style:white-space="pre-wrap"
+                                style:word-break="break-all"
+                                slot="tooltip">
                                 {formatted.whole}
                             </span>
                         </Tooltip>