From 7049f663a2e12b8ef9ca64c303635a4acca6c210 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 29 Apr 2024 14:38:45 -0700
Subject: [PATCH] fix(migrations): fix modal not closing

We should be using a bound show variable to control the modal. Prior to
this PR, we were indirectly controlling the modal by setting the
migration ID via the on close handler, but that event is never triggered
when the modal is closed.

This also refactors the modal to pass in the migration instead of a
list of migrations and a migration ID because the entire list is not
needed inside the modal.
---
 .../settings/migrations/+page.svelte          | 13 +++++++++---
 .../settings/migrations/details.svelte        | 20 ++++++++-----------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/routes/console/project-[project]/settings/migrations/+page.svelte b/src/routes/console/project-[project]/settings/migrations/+page.svelte
index 2a7877a02..8d5657b18 100644
--- a/src/routes/console/project-[project]/settings/migrations/+page.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/+page.svelte
@@ -24,10 +24,12 @@
     import Status from '$lib/components/status.svelte';
     import { capitalize } from '$lib/helpers/string';
     import { readOnly } from '$lib/stores/billing';
+    import type { Models } from '@appwrite.io/console';
 
     export let data;
-    let details: string | null = null;
+    let migration: Models.Migration = null;
     let showExport = false;
+    let showMigration = false;
 
     const getStatus = (status: string) => {
         if (status === 'failed') {
@@ -129,6 +131,11 @@
         //     JSON.stringify(migrationData)
         // )}`;
     };
+
+    function showDetails(m: Models.Migration) {
+        showMigration = true;
+        migration = m;
+    }
 </script>
 
 <Container>
@@ -182,7 +189,7 @@
                                 </TableCell>
                                 <TableCell title="">
                                     <div class="u-flex u-main-end">
-                                        <Button secondary on:click={() => (details = entry.$id)}
+                                        <Button secondary on:click={() => showDetails(entry)}
                                             >Details</Button>
                                     </div>
                                 </TableCell>
@@ -296,7 +303,7 @@
 
 <ExportModal bind:show={showExport} />
 
-<Details bind:migrationId={details} migrations={data.migrations} />
+<Details {migration} bind:show={showMigration} />
 
 <style lang="scss">
     .import-box {
diff --git a/src/routes/console/project-[project]/settings/migrations/details.svelte b/src/routes/console/project-[project]/settings/migrations/details.svelte
index 7fb707b7b..9e827ce19 100644
--- a/src/routes/console/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/details.svelte
@@ -8,12 +8,8 @@
     import type { Models } from '@appwrite.io/console';
     import { ResourcesFriendly } from '$lib/stores/migration';
 
-    export let migrations: Models.Migration[] = [];
-    export let migrationId: string = null;
-
-    $: details = migrations.find((migration) => migration.$id === migrationId);
-
-    $: show = !!details && migrationId !== null;
+    export let migration: Models.Migration = null;
+    export let show = false;
 
     type StatusCounters = {
         [resource in 'Database' | 'Collection' | 'Function' | 'Users']?: StatusCounter;
@@ -23,7 +19,7 @@
     };
 
     $: statusCounters = parseIfString(
-        (details?.statusCounters as unknown as string) || '{}'
+        (migration?.statusCounters as unknown as string) || '{}'
     ) as StatusCounters;
 
     const hasError = (counter: StatusCounter) => {
@@ -49,9 +45,9 @@
     let tab = 'details' as 'details' | 'logs';
 </script>
 
-<Modal bind:show on:close={() => (migrationId = null)} size="big">
+<Modal bind:show size="big">
     <svelte:fragment slot="title">
-        {#if details.status === 'failed'}
+        {#if migration.status === 'failed'}
             Resolve migration issues
         {:else}
             Migration details
@@ -63,13 +59,13 @@
     </Tabs>
 
     {#if tab === 'logs'}
-        <Code code={JSON.stringify(details, null, 2)} language="json" allowScroll />
+        <Code code={JSON.stringify(migration, null, 2)} language="json" allowScroll />
     {:else if tab === 'details'}
         <div class="box meta">
             <span>Date</span>
-            <span>{toLocaleDateTime(details.$createdAt)}</span>
+            <span>{toLocaleDateTime(migration.$createdAt)}</span>
             <span>Source</span>
-            <span>{details.source}</span>
+            <span>{migration.source}</span>
         </div>
 
         {#if Object.values(statusCounters).some(hasError)}