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.

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 {

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)}