Merge branch 'main' into multiple-terminologies

Author: ItzNotABug

src/lib/helpers/buildTimeout.ts

@@ -22,14 +22,24 @@ function isBuildTimedOut(createdAt: string, status: string, timeoutSeconds: numb
  * Gets the effective status for a build, considering timeout
  */
 export function getEffectiveBuildStatus(
-    originalStatus: string,
-    createdAt: string,
+    deployment: Models.Deployment,
     consoleVariables: Models.ConsoleVariables | undefined
 ): string {
+    const originalStatus = deployment.status;
+    const createdAt = deployment.$createdAt;
+
     const timeoutSeconds = getBuildTimeoutSeconds(consoleVariables);
     if (isBuildTimedOut(createdAt, originalStatus, timeoutSeconds)) {
         return 'failed';
     }
+
+    const isReady = originalStatus === 'ready';
+    const hasScreenshot = deployment.screenshotLight && deployment.screenshotDark;
+
+    if (isReady && !hasScreenshot) {
+        return 'finalizing';
+    }
+
     return originalStatus;
 }
 

src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte

@@ -38,9 +38,7 @@
         footer?: Snippet;
     } = $props();
 
-    let effectiveStatus = $derived(
-        getEffectiveBuildStatus(deployment.status, deployment.$createdAt, $regionalConsoleVariables)
-    );
+    let effectiveStatus = $derived(getEffectiveBuildStatus(deployment, $regionalConsoleVariables));
     let totalSize = $derived(humanFileSize(deployment?.totalSize ?? 0));
 </script>
 

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

@@ -41,11 +41,7 @@
     let { data } = $props();
 
     let effectiveStatus = $derived(
-        getEffectiveBuildStatus(
-            data.deployment.status,
-            data.deployment.$createdAt,
-            $regionalConsoleVariables
-        )
+        getEffectiveBuildStatus(data.deployment, $regionalConsoleVariables)
     );
     let showDelete = $state(false);
     let showCancel = $state(false);

src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte

@@ -95,8 +95,7 @@
     {#snippet children(root)}
         {#each data.deploymentList.deployments as deployment (deployment.$id)}
             {@const effectiveStatus = getEffectiveBuildStatus(
-                deployment.status,
-                deployment.$createdAt,
+                deployment,
                 $regionalConsoleVariables
             )}
             <Table.Row.Link

src/routes/(console)/project-[region]-[project]/sites/(components)/deploymentActionMenu.svelte

@@ -54,8 +54,7 @@
     <svelte:fragment slot="menu" let:toggle>
         <ActionMenu.Root>
             {@const effectiveStatus = getEffectiveBuildStatus(
-                deployment.status,
-                deployment.$createdAt,
+                deployment,
                 $regionalConsoleVariables
             )}
             {#if !inCard}

src/routes/(console)/project-[region]-[project]/sites/(components)/logs.svelte

@@ -6,6 +6,7 @@
             case 'ready':
                 return 'success';
             case 'building':
+            case 'finalizing':
                 return 'warning';
             case 'processing':
                 return undefined;
@@ -40,9 +41,7 @@
         emptyCopy?: string;
     } = $props();
 
-    let effectiveStatus = $derived(
-        getEffectiveBuildStatus(deployment.status, deployment.$createdAt, $regionalConsoleVariables)
-    );
+    let effectiveStatus = $derived(getEffectiveBuildStatus(deployment, $regionalConsoleVariables));
 
     function setCopy() {
         if (effectiveStatus === 'failed') {
@@ -73,7 +72,7 @@
                     variant="secondary"
                     type={badgeTypeDeployment(effectiveStatus)} />
             </Layout.Stack>
-            <LogsTimer status={effectiveStatus} {deployment} />
+            <LogsTimer {deployment} />
         </Layout.Stack>
     {/if}
 

src/routes/(console)/project-[region]-[project]/sites/(components)/logsTimer.svelte

@@ -7,15 +7,13 @@
 
     import { Layout, Spinner, Typography } from '@appwrite.io/pink-svelte';
 
-    let { status, deployment }: { status: string; deployment: Models.Deployment } = $props();
+    let { deployment }: { deployment: Models.Deployment } = $props();
 
-    let effectiveStatus = $derived(
-        getEffectiveBuildStatus(status, deployment.$createdAt, $regionalConsoleVariables)
-    );
+    let effectiveStatus = $derived(getEffectiveBuildStatus(deployment, $regionalConsoleVariables));
 </script>
 
 <Layout.Stack direction="row" alignItems="center" inline>
-    {#if ['processing', 'building'].includes(effectiveStatus)}
+    {#if ['processing', 'building', 'finalizing'].includes(effectiveStatus)}
         <Typography.Code color="--fgcolor-neutral-secondary">
             <Layout.Stack direction="row" alignItems="center" inline>
                 <p use:timer={{ start: deployment.$createdAt }}></p>

src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte

@@ -42,9 +42,7 @@
         footer?: Snippet;
     } = $props();
 
-    let effectiveStatus = $derived(
-        getEffectiveBuildStatus(deployment.status, deployment.$createdAt, $regionalConsoleVariables)
-    );
+    let effectiveStatus = $derived(getEffectiveBuildStatus(deployment, $regionalConsoleVariables));
     let show = $state(false);
 
     const totalSize = $derived(humanFileSize(deployment?.totalSize ?? 0));

src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte

@@ -12,32 +12,76 @@
     import { onMount } from 'svelte';
     import { getFrameworkIcon } from '$lib/stores/sites';
     import type { Models } from '@appwrite.io/console';
+    import { getEffectiveBuildStatus } from '$lib/helpers/buildTimeout';
+    import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
 
     let { data } = $props();
 
     let deployment = $state(data.deployment);
+    let skipScreenshotTimeout: ReturnType<typeof setTimeout> | null = $state(null);
+
+    let effectiveStatus = $derived(getEffectiveBuildStatus(deployment, $regionalConsoleVariables));
 
     onMount(() => {
-        return realtime.forConsole(page.params.region, 'console', async (response) => {
-            if (
-                response.events.includes(
-                    `sites.${data.site.$id}.deployments.${data.deployment.$id}.update`
-                )
-            ) {
-                deployment = response.payload as Models.Deployment;
-                if (deployment.status === 'ready') {
-                    const resolvedUrl = resolve(
-                        '/(console)/project-[region]-[project]/sites/create-site/finish',
-                        {
-                            region: page.params.region,
-                            project: page.params.project
+        const timeoutCleanup = () => {
+            if (skipScreenshotTimeout) {
+                clearTimeout(skipScreenshotTimeout);
+                skipScreenshotTimeout = null;
+            }
+        };
+
+        const realtimeUnsubscribe = realtime.forConsole(
+            page.params.region,
+            'console',
+            async (response) => {
+                if (
+                    response.events.includes(
+                        `sites.${data.site.$id}.deployments.${data.deployment.$id}.update`
+                    )
+                ) {
+                    deployment = response.payload as Models.Deployment;
+
+                    const isReady = deployment.status === 'ready';
+
+                    const isFinished =
+                        isReady && deployment.screenshotLight && deployment.screenshotDark;
+
+                    // Fallback mechanism
+                    // If ready but not finished for over 30 seconds, go anyway
+                    if (isReady && !skipScreenshotTimeout) {
+                        skipScreenshotTimeout = setTimeout(async () => {
+                            goToFinishScreen();
+                        }, 30000);
+                    }
+
+                    if (isReady && isFinished) {
+                        if (skipScreenshotTimeout) {
+                            clearTimeout(skipScreenshotTimeout);
+                            skipScreenshotTimeout = null;
                         }
-                    );
-                    await goto(`${resolvedUrl}?site=${data.site.$id}`);
+
+                        goToFinishScreen();
+                    }
                 }
             }
-        });
+        );
+
+        return () => {
+            realtimeUnsubscribe();
+            timeoutCleanup();
+        };
     });
+
+    async function goToFinishScreen() {
+        const resolvedUrl = resolve(
+            '/(console)/project-[region]-[project]/sites/create-site/finish',
+            {
+                region: page.params.region,
+                project: page.params.project
+            }
+        );
+        await goto(`${resolvedUrl}?site=${data.site.$id}`);
+    }
 </script>
 
 <Wizard
@@ -77,7 +121,7 @@
     </svelte:fragment>
     <svelte:fragment slot="footer">
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            {#if ['processing', 'building'].includes(data.deployment.status)}
+            {#if ['processing', 'building', 'finalizing'].includes(effectiveStatus)}
                 <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                     Deployment will continue in the background
                 </Typography.Text>

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte

@@ -26,9 +26,7 @@
     let { data }: PageProps = $props();
 
     let deployment = $derived(data.deployment);
-    let effectiveStatus = $derived(
-        getEffectiveBuildStatus(deployment.status, deployment.$createdAt, $regionalConsoleVariables)
-    );
+    let effectiveStatus = $derived(getEffectiveBuildStatus(deployment, $regionalConsoleVariables));
 
     let showRedeploy = $state(false);
     let showActivate = $state(false);
@@ -90,7 +88,7 @@
             hideDivider>
             <Logs {deployment} hideTitle fullHeight />
             <svelte:fragment slot="end">
-                <LogsTimer status={effectiveStatus} {deployment} />
+                <LogsTimer {deployment} />
             </svelte:fragment>
         </Accordion>
     </Card>