Merge pull request #2759 from appwrite/fix-add-tooltip-for-disabled-create-database-button

Author: ItzNotABug

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

@@ -14,9 +14,11 @@
     import Table from './table.svelte';
     import { registerCommands } from '$lib/commandCenter';
     import { canWriteDatabases } from '$lib/stores/roles';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import EmptySearch from '$lib/components/emptySearch.svelte';
+    import { isServiceLimited } from '$lib/stores/billing';
+    import { organization } from '$lib/stores/organization';
 
     export let data: PageData;
 
@@ -30,14 +32,16 @@
         );
     }
 
+    $: isLimited = isServiceLimited('databases', $organization?.billingPlan, data.databases.total);
+
     $: $registerCommands([
         {
             label: 'Create database',
             callback: () => {
                 showCreate = true;
             },
             keys: ['c'],
-            disabled: showCreate || !$canWriteDatabases,
+            disabled: showCreate || !$canWriteDatabases || isLimited,
             icon: IconPlus,
             group: 'databases',
             rank: 10
@@ -52,10 +56,20 @@
         bind:view={data.view}
         searchPlaceholder="Search by name or ID">
         {#if $canWriteDatabases}
-            <Button event="create_database" on:click={() => (showCreate = true)}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create database
-            </Button>
+            <Tooltip disabled={!isLimited}>
+                <div>
+                    <Button
+                        disabled={isLimited}
+                        event="create_database"
+                        on:click={() => (showCreate = true)}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create database
+                    </Button>
+                </div>
+                <svelte:fragment slot="tooltip">
+                    You have reached the maximum number of databases for your plan.
+                </svelte:fragment>
+            </Tooltip>
         {/if}
     </ResponsiveContainerHeader>