Merge pull request #1203 from appwrite/refactor-secondary-wizard-headers

refactor: secondary wizards headers, fix execution modal not closing

.github/workflows/e2e.yml

@@ -21,9 +21,9 @@ jobs:
             - name: Install dependencies
               run: pnpm install --frozen-lockfile
             - name: Install Playwright Browsers
-              run: npx playwright install --with-deps chromium
+              run: pnpm exec playwright install --with-deps chromium
             - name: E2E Tests
-              run: npm run e2e
+              run: pnpm run e2e
             - uses: actions/upload-artifact@v4
               if: ${{ !cancelled() }}
               with:

src/lib/layout/index.ts

@@ -21,5 +21,4 @@ export { default as HeaderAlert } from './headerAlert.svelte';
 export { default as ContainerButton } from './containerButton.svelte';
 export { default as WizardSecondaryContainer } from './wizardSecondaryContainer.svelte';
 export { default as WizardSecondaryContent } from './wizardSecondaryContent.svelte';
-export { default as WizardSecondaryHeader } from './wizardSecondaryHeader.svelte';
 export { default as WizardSecondaryFooter } from './wizardSecondaryFooter.svelte';

src/lib/layout/wizardSecondaryContainer.svelte

@@ -1,13 +1,70 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
+    import { Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
     import WizardExitModal from './wizardExitModal.svelte';
+    import { goto } from '$app/navigation';
 
-    export let showExitModal = false;
-    export let href = '';
+    type $$Props =
+        | {
+              confirmExit: boolean;
+              showExitModal: boolean;
+              href?: string;
+          }
+        | {
+              confirmExit?: boolean;
+              showExitModal?: boolean;
+              href: string;
+          };
+
+    export let confirmExit: $$Props['confirmExit'] = false;
+    export let href: $$Props['href'] = '';
+    export let showExitModal: $$Props['showExitModal'] = false;
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            if (confirmExit) {
+                showExitModal = true;
+            } else {
+                goto(href);
+                trackEvent('wizard_exit', {
+                    from: 'escape'
+                });
+            }
+        }
+    }
 </script>
 
+<svelte:window on:keydown={handleKeydown} />
+
 <section class="wizard-secondary c-wizard-position">
     <div class="wizard-secondary-container">
+        <header class="wizard-secondary-header">
+            <div class="u-flex u-main-space-between u-gap-32 u-cross-center">
+                <Heading size={5} tag="h1"><slot name="title" /></Heading>
+                <Button
+                    text
+                    round
+                    ariaLabel="close modal"
+                    href={confirmExit ? null : href}
+                    on:click={() => {
+                        if (confirmExit) {
+                            showExitModal = true;
+                        } else {
+                            trackEvent('wizard_exit', {
+                                from: 'button'
+                            });
+                        }
+                    }}>
+                    <span class="icon-x u-font-size-20" aria-hidden="true"></span>
+                </Button>
+            </div>
+            {#if $$slots.description}
+                <p class="body-text-2"><slot name="description" /></p>
+            {/if}
+        </header>
+
         <slot />
     </div>
 </section>

src/lib/layout/wizardSecondaryHeader.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
-    import { Heading } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import { createEventDispatcher } from 'svelte';
-
-    type $$Props =
-        | {
-              confirmExit: boolean;
-              href?: string;
-          }
-        | {
-              confirmExit?: boolean;
-              href: string;
-          };
-
-    export let confirmExit: $$Props['confirmExit'] = false;
-    export let href: $$Props['href'] = '';
-
-    const dispatch = createEventDispatcher();
-
-    function handleKeydown(event: KeyboardEvent) {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            if (confirmExit) {
-                dispatch('exit');
-            } else {
-                trackEvent('wizard_exit', {
-                    from: 'escape'
-                });
-            }
-        }
-    }
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-
-<header class="wizard-secondary-header">
-    <div class="u-flex u-main-space-between u-gap-32 u-cross-center">
-        <Heading size={5} tag="h1"><slot /></Heading>
-        <Button
-            text
-            round
-            ariaLabel="close modal"
-            href={confirmExit ? null : href}
-            on:click={() => {
-                if (confirmExit) {
-                    dispatch('exit');
-                } else {
-                    trackEvent('wizard_exit', {
-                        from: 'button'
-                    });
-                }
-            }}>
-            <span class="icon-x u-font-size-20" aria-hidden="true"></span>
-        </Button>
-    </div>
-    {#if $$slots.description}
-        <p class="body-text-2"><slot name="description" /></p>
-    {/if}
-</header>

src/routes/(console)/apply-credit/+page.svelte

@@ -14,8 +14,7 @@
     import {
         WizardSecondaryContainer,
         WizardSecondaryContent,
-        WizardSecondaryFooter,
-        WizardSecondaryHeader
+        WizardSecondaryFooter
     } from '$lib/layout';
     import { type PaymentList } from '$lib/sdk/billing';
     import { app } from '$lib/stores/app';
@@ -195,10 +194,8 @@
     <title>Apply credits - Appwrite</title>
 </svelte:head>
 
-<WizardSecondaryContainer href={previousPage} bind:showExitModal>
-    <WizardSecondaryHeader confirmExit on:exit={() => (showExitModal = true)}>
-        Apply credits
-    </WizardSecondaryHeader>
+<WizardSecondaryContainer href={previousPage} bind:showExitModal confirmExit>
+    <svelte:fragment slot="title">Apply credits</svelte:fragment>
     <WizardSecondaryContent>
         <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
             <FormList>

src/routes/(console)/create-organization/+page.svelte

@@ -16,8 +16,7 @@
     import {
         WizardSecondaryContainer,
         WizardSecondaryContent,
-        WizardSecondaryFooter,
-        WizardSecondaryHeader
+        WizardSecondaryFooter
     } from '$lib/layout';
     import type { Coupon, PaymentList } from '$lib/sdk/billing';
     import { plansInfo, tierFree, tierPro, tierToPlan } from '$lib/stores/billing';
@@ -186,10 +185,8 @@
     <title>Create organization - Appwrite</title>
 </svelte:head>
 
-<WizardSecondaryContainer bind:showExitModal href={previousPage}>
-    <WizardSecondaryHeader confirmExit on:exit={() => (showExitModal = true)}>
-        Create organization
-    </WizardSecondaryHeader>
+<WizardSecondaryContainer bind:showExitModal href={previousPage} confirmExit>
+    <svelte:fragment slot="title">Create organization</svelte:fragment>
     <WizardSecondaryContent>
         <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
             <FormList>

src/routes/(console)/organization-[organization]/change-plan/+page.svelte

@@ -25,8 +25,7 @@
     import {
         WizardSecondaryContainer,
         WizardSecondaryContent,
-        WizardSecondaryFooter,
-        WizardSecondaryHeader
+        WizardSecondaryFooter
     } from '$lib/layout';
     import { type Coupon, type PaymentList } from '$lib/sdk/billing';
     import { plansInfo, tierFree, tierPro, tierToPlan, type Tier } from '$lib/stores/billing';
@@ -250,10 +249,8 @@
     <title>Change plan - Appwrite</title>
 </svelte:head>
 
-<WizardSecondaryContainer bind:showExitModal href={previousPage}>
-    <WizardSecondaryHeader confirmExit on:exit={() => (showExitModal = true)}>
-        Change plan
-    </WizardSecondaryHeader>
+<WizardSecondaryContainer bind:showExitModal href={previousPage} confirmExit>
+    <svelte:fragment slot="title">Change plan</svelte:fragment>
     <WizardSecondaryContent>
         <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
             <Label class="label u-margin-block-start-16">Select plan</Label>

src/routes/(console)/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte

@@ -28,8 +28,7 @@
     import {
         WizardSecondaryContainer,
         WizardSecondaryContent,
-        WizardSecondaryFooter,
-        WizardSecondaryHeader
+        WizardSecondaryFooter
     } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -145,8 +144,8 @@
     <title>Execute function - Appwrite</title>
 </svelte:head>
 
-<WizardSecondaryContainer>
-    <WizardSecondaryHeader href={previousPage}>Execute function</WizardSecondaryHeader>
+<WizardSecondaryContainer href={previousPage}>
+    <svelte:fragment slot="title">Execute Function</svelte:fragment>
     <WizardSecondaryContent>
         <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
             <FormList>