From be121b66b8385210a06b6b863d525c35bfd98954 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jul 2024 14:34:13 +0200
Subject: [PATCH 1/2] refactor: secondary wizards headers, fix execution modal
 not closing

---
 src/lib/layout/index.ts                       |  1 -
 .../layout/wizardSecondaryContainer.svelte    | 61 ++++++++++++++++++-
 src/lib/layout/wizardSecondaryHeader.svelte   | 61 -------------------
 src/routes/console/apply-credit/+page.svelte  |  9 +--
 .../console/create-organization/+page.svelte  |  9 +--
 .../change-plan/+page.svelte                  |  9 +--
 .../executions/execute-function/+page.svelte  |  7 +--
 7 files changed, 71 insertions(+), 86 deletions(-)
 delete mode 100644 src/lib/layout/wizardSecondaryHeader.svelte

diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index afc33bb2c..e45069dd1 100644
--- a/src/lib/layout/index.ts
+++ b/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';
diff --git a/src/lib/layout/wizardSecondaryContainer.svelte b/src/lib/layout/wizardSecondaryContainer.svelte
index 0b9976f79..3bb3685a4 100644
--- a/src/lib/layout/wizardSecondaryContainer.svelte
+++ b/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>
diff --git a/src/lib/layout/wizardSecondaryHeader.svelte b/src/lib/layout/wizardSecondaryHeader.svelte
deleted file mode 100644
index ca48252a5..000000000
--- a/src/lib/layout/wizardSecondaryHeader.svelte
+++ /dev/null
@@ -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>
diff --git a/src/routes/console/apply-credit/+page.svelte b/src/routes/console/apply-credit/+page.svelte
index c9f0db557..08d06cb76 100644
--- a/src/routes/console/apply-credit/+page.svelte
+++ b/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>
diff --git a/src/routes/console/create-organization/+page.svelte b/src/routes/console/create-organization/+page.svelte
index e7ac26659..97f420501 100644
--- a/src/routes/console/create-organization/+page.svelte
+++ b/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>
diff --git a/src/routes/console/organization-[organization]/change-plan/+page.svelte b/src/routes/console/organization-[organization]/change-plan/+page.svelte
index 5fcfaa2c7..599f45b44 100644
--- a/src/routes/console/organization-[organization]/change-plan/+page.svelte
+++ b/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>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte
index 51f6e5b4b..7fa54f9bd 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte
@@ -27,8 +27,7 @@
     import {
         WizardSecondaryContainer,
         WizardSecondaryContent,
-        WizardSecondaryFooter,
-        WizardSecondaryHeader
+        WizardSecondaryFooter
     } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -137,8 +136,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>

From fd9e9d9618409fbd8e7a269428fd2ceac18f8bdf Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 18 Jul 2024 13:40:40 +0200
Subject: [PATCH 2/2] fix: e2e tests

---
 .github/workflows/e2e.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index def9182a0..862b7ef45 100644
--- a/.github/workflows/e2e.yml
+++ b/.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: