From faefb1922ce030d52577dd60441d3ceeb0e71c92 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 4 Oct 2023 17:09:50 +0200
Subject: [PATCH] feat: add limits to databases, small refactors

---
 src/lib/layout/containerHeader.svelte         |  8 ++---
 .../project-[project]/databases/+page.svelte  | 29 ++++++++++---------
 .../cloudOrganizationChangeTier/step1.svelte  | 12 ++++++++
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index ec52bca7b..b8084a545 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -44,8 +44,8 @@
     </slot>
 {/if}
 
-<div class:u-flex={isFlex} class=" u-gap-12 common-section u-main-space-between">
-    <div class="u-flex u-cross-child-center u-gap-16">
+<header class:u-flex={isFlex} class="u-gap-12 common-section u-main-space-between u-flex-wrap">
+    <div class="u-flex u-cross-child-center u-gap-16 u-flex-wrap">
         <Heading tag={titleTag} size={titleSize}>{title}</Heading>
         {#if isCloud && limit !== 'unlimited' && limit < Infinity}
             <div
@@ -71,7 +71,7 @@
             <div
                 use:tooltip={{
                     content: `Upgrade to add more ${title.toLocaleLowerCase()}`,
-                    disabled: total < limit || limit === 'unlimited'
+                    disabled: limit === 'unlimited' || total < limit
                 }}>
                 <Button
                     on:click={buttonMethod}
@@ -83,7 +83,7 @@
             </div>
         {/if}
     </slot>
-</div>
+</header>
 
 {#if isCloud}
     <div class="u-hide">
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index ba1295862..2f9ba44d8 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -2,9 +2,9 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Empty, PaginationWithLimit } from '$lib/components';
+    import { Empty, PaginationWithLimit, ViewSelector } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Container, GridHeader } from '$lib/layout';
+    import { Container, ContainerHeader } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
 
     import type { PageData } from './$types';
@@ -40,17 +40,20 @@
 </script>
 
 <Container>
-    <GridHeader
-        title="Databases"
-        {columns}
-        view={data.view}
-        hideColumns={!data.databases.total}
-        hideView={!data.databases.total}>
-        <Button on:click={() => (showCreate = true)} event="create_database">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create database</span>
-        </Button>
-    </GridHeader>
+    <ContainerHeader title="Databases" total={data?.databases?.total}>
+        <div class="u-flex u-gap-16 u-cross-center u-flex-wrap">
+            <ViewSelector
+                {columns}
+                view={data.view}
+                hideColumns={!data.databases.total}
+                hideView={!data.databases.total} />
+
+            <Button on:click={() => (showCreate = true)} event="create_database">
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Create database</span>
+            </Button>
+        </div>
+    </ContainerHeader>
 
     {#if data.databases.total}
         {#if data.view === 'grid'}
diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/step1.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/step1.svelte
index d49e4a27f..b7b70ee5b 100644
--- a/src/routes/console/wizard/cloudOrganizationChangeTier/step1.svelte
+++ b/src/routes/console/wizard/cloudOrganizationChangeTier/step1.svelte
@@ -5,6 +5,7 @@
     import { tierFree, tierPro, tierScale } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { updateStepStatus } from '$lib/stores/wizard';
+    import { onMount } from 'svelte';
     import { changeOrganizationTier, changeTierSteps } from './store';
 
     $: if ($changeOrganizationTier.billingPlan === 'tier-0' && $changeTierSteps) {
@@ -19,6 +20,17 @@
         $changeTierSteps = updateStepStatus($changeTierSteps, 2, false);
         $changeTierSteps = updateStepStatus($changeTierSteps, 3, false);
     }
+
+    onMount(() => {
+        //Select closest tier from starting one
+        if ($changeOrganizationTier.billingPlan === 'tier-2') {
+            $changeOrganizationTier.billingPlan = 'tier-1';
+        } else if ($changeOrganizationTier.billingPlan === 'tier-1') {
+            $changeOrganizationTier.billingPlan = 'tier-2';
+        } else if ($changeOrganizationTier.billingPlan === 'tier-0') {
+            $changeOrganizationTier.billingPlan = 'tier-1';
+        }
+    });
 </script>
 
 <WizardStep>