From 021db90bcf1d5f64bd19811d647b7fc60fdc92d4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 22 May 2024 17:12:09 +0200
Subject: [PATCH] refactor: alert buttons

---
 src/lib/components/alert.svelte                | 18 ++++++++++--------
 .../(migration-wizard)/resource-form.svelte    |  8 ++++----
 .../auth/templates/+page.svelte                | 12 ++++--------
 .../settings/migrations/details.svelte         |  4 ++--
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index 20998db9d..f37e83fe1 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-    import type { Buttons } from '../stores/notifications';
+    import { createEventDispatcher, type ComponentProps } from 'svelte';
     import { Button } from '$lib/elements/forms';
 
     export let dismissible = false;
     export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
-    export let buttons: Buttons[] = [];
+    export let buttons: (ComponentProps<Button> & {
+        slot: string;
+        onClick?: (e: MouseEvent) => void;
+    })[] = [];
     export let isAction = false;
     export let isStandalone = false;
     let classes = '';
@@ -53,8 +55,8 @@
                     <div class="alert-buttons u-flex">
                         <slot name="buttons">
                             {#each buttons as button}
-                                <Button text on:click={button.method}>
-                                    <span class="text">{button.name}</span>
+                                <Button text {...button} on:click={button.onClick}>
+                                    <span class="text">{button.slot}</span>
                                 </Button>
                             {/each}
                         </slot>
@@ -66,9 +68,9 @@
             <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
                 <slot name="buttons">
                     {#each buttons as button}
-                        <button type="button" class="button is-text" on:click={button.method}>
-                            <span class="text">{button.name}</span>
-                        </button>
+                        <Button text {...button} on:click={button.onClick}>
+                            + <span class="text">{button.slot}</span>
+                        </Button>
                     {/each}
                 </slot>
             </div>
diff --git a/src/routes/console/(migration-wizard)/resource-form.svelte b/src/routes/console/(migration-wizard)/resource-form.svelte
index 41d39cee0..66a2fadb6 100644
--- a/src/routes/console/(migration-wizard)/resource-form.svelte
+++ b/src/routes/console/(migration-wizard)/resource-form.svelte
@@ -193,8 +193,8 @@
             isStandalone
             buttons={[
                 {
-                    name: 'Learn more',
-                    method() {
+                    slot: 'Learn more',
+                    onClick() {
                         wizard.updateStep((p) => p - 1);
                     }
                 }
@@ -213,8 +213,8 @@
             isStandalone
             buttons={[
                 {
-                    name: 'Edit credentials',
-                    method() {
+                    slot: 'Edit credentials',
+                    onClick() {
                         wizard.updateStep((p) => p - 1);
                     }
                 }
diff --git a/src/routes/console/project-[project]/auth/templates/+page.svelte b/src/routes/console/project-[project]/auth/templates/+page.svelte
index 5ccc9e04f..792851d04 100644
--- a/src/routes/console/project-[project]/auth/templates/+page.svelte
+++ b/src/routes/console/project-[project]/auth/templates/+page.svelte
@@ -32,7 +32,6 @@
 </script>
 
 <script lang="ts">
-    import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Alert, CardGrid, Collapsible, CollapsibleItem, Heading } from '$lib/components';
@@ -108,10 +107,8 @@
                 type="info"
                 buttons={[
                     {
-                        name: 'SMTP settings',
-                        method: () => {
-                            goto(`${base}/console/project-${$project.$id}/settings/smtp`);
-                        }
+                        slot: 'SMTP settings',
+                        href: `${base}/console/project-${$project.$id}/settings/smtp`
                     }
                 ]}>
                 <svelte:fragment slot="title">
@@ -138,9 +135,8 @@
                 <Alert
                     buttons={[
                         {
-                            name: 'Upgrade plan',
-                            method: () =>
-                                goto(`${base}/console/organization-${$organization.$id}/billing`)
+                            slot: 'Upgrade plan',
+                            href: `${base}/console/organization-${$organization.$id}/billing`
                         }
                     ]}>
                     All emails sent using the Starter plan will include attribution to Appwrite in
diff --git a/src/routes/console/project-[project]/settings/migrations/details.svelte b/src/routes/console/project-[project]/settings/migrations/details.svelte
index 9e827ce19..f83ec4482 100644
--- a/src/routes/console/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/details.svelte
@@ -73,8 +73,8 @@
                 type="error"
                 buttons={[
                     {
-                        name: 'View logs',
-                        method() {
+                        slot: 'View logs',
+                        onClick() {
                             tab = 'logs';
                         }
                     }