Merge pull request #2532 from appwrite/fix-SER-433-Error-page-shown-when-deleting-deployment

Author: ItzNotABug

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

@@ -2,7 +2,7 @@
     import { page } from '$app/state';
     import { SubMenu } from '$lib/components/menu';
     import { type Models } from '@appwrite.io/console';
-    import { IconDownload } from '@appwrite.io/pink-icons-svelte';
+    import { IconDownload, IconChevronRight } from '@appwrite.io/pink-icons-svelte';
     import { ActionMenu } from '@appwrite.io/pink-svelte';
     import { getOutputDownload, getSourceDownload } from '../store';
 
@@ -13,7 +13,8 @@
 {#if deployment?.status === 'ready' || deployment?.status === 'failed' || deployment?.status === 'building'}
     <SubMenu>
         <ActionMenu.Root noPadding>
-            <ActionMenu.Item.Button trailingIcon={IconDownload}>Download</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button leadingIcon={IconDownload} trailingIcon={IconChevronRight}
+                >Download</ActionMenu.Item.Button>
         </ActionMenu.Root>
         <svelte:fragment slot="menu">
             <ActionMenu.Root>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
@@ -20,6 +21,12 @@
                     functionId: selectedDeployment.resourceId,
                     deploymentId: selectedDeployment.$id
                 });
+            if (page.route.id?.includes('deployment-[deployment]')) {
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/deployments`
+                );
+                return;
+            }
             await invalidate(Dependencies.FUNCTION);
             showDelete = false;
             addNotification({

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

@@ -113,7 +113,7 @@
                                                 placement={'bottom'}>
                                                 <div>
                                                     <ActionMenu.Item.Button
-                                                        trailingIcon={IconRefresh}
+                                                        leadingIcon={IconRefresh}
                                                         disabled={activeDeployment.sourceSize === 0}
                                                         on:click={() => {
                                                             selectedDeployment = activeDeployment;
@@ -134,7 +134,7 @@
                                             deployment={activeDeployment}
                                             {toggle} />
                                         <ActionMenu.Item.Anchor
-                                            trailingIcon={IconTerminal}
+                                            leadingIcon={IconTerminal}
                                             href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/deployment-${activeDeployment.$id}`}>
                                             Build logs
                                         </ActionMenu.Item.Anchor>

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

@@ -26,7 +26,7 @@
     import { formatTimeDetailed } from '$lib/helpers/timeConversion';
     import { timer } from '$lib/actions/timer';
     import { app } from '$lib/stores/app';
-    import { IconDotsHorizontal, IconRefresh } from '@appwrite.io/pink-icons-svelte';
+    import { IconDotsHorizontal, IconRefresh, IconTrash } from '@appwrite.io/pink-icons-svelte';
     import { Menu } from '$lib/components/menu';
     import { canWriteFunctions } from '$lib/stores/roles';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -98,7 +98,7 @@
                                     placement={'bottom'}>
                                     <div>
                                         <ActionMenu.Item.Button
-                                            trailingIcon={IconRefresh}
+                                            leadingIcon={IconRefresh}
                                             disabled={data.deployment.sourceSize === 0}
                                             on:click={() => {
                                                 showRedeploy = true;
@@ -115,6 +115,18 @@
                             {#if !!data.deployment?.sourceSize || !!data.deployment?.sourceSize}
                                 <DownloadActionMenuItem deployment={data.deployment} {toggle} />
                             {/if}
+                            {#if $canWriteFunctions && ['ready', 'failed'].includes(data.deployment.status)}
+                                <ActionMenu.Item.Button
+                                    status="danger"
+                                    leadingIcon={IconTrash}
+                                    on:click={() => {
+                                        showDelete = true;
+                                        toggle();
+                                    }}
+                                    style="width: 100%">
+                                    Delete
+                                </ActionMenu.Item.Button>
+                            {/if}
                         </ActionMenu.Root>
                     </svelte:fragment>
                 </Menu>

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

@@ -139,7 +139,7 @@
                                     placement={'bottom'}>
                                     <div>
                                         <ActionMenu.Item.Button
-                                            trailingIcon={IconRefresh}
+                                            leadingIcon={IconRefresh}
                                             disabled={deployment.sourceSize === 0}
                                             on:click={() => {
                                                 selectedDeployment = deployment;
@@ -155,7 +155,7 @@
                                 </Tooltip>
                                 {#if deployment.status === 'ready' && deployment.$id !== $func.deploymentId}
                                     <ActionMenu.Item.Button
-                                        trailingIcon={IconLightningBolt}
+                                        leadingIcon={IconLightningBolt}
                                         on:click={() => {
                                             selectedDeployment = deployment;
                                             showActivate = true;
@@ -182,7 +182,7 @@
                                 {/if}
                                 {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment.status !== 'waiting'}
                                     <ActionMenu.Item.Button
-                                        trailingIcon={IconTrash}
+                                        leadingIcon={IconTrash}
                                         status="danger"
                                         on:click={() => {
                                             selectedDeployment = deployment;

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

@@ -124,7 +124,7 @@
                     Cancel
                 </ActionMenu.Item.Button>
             {/if}
-            {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment?.status !== 'waiting'}
+            {#if ['ready', 'failed'].includes(deployment.status)}
                 <ActionMenu.Item.Button
                     status="danger"
                     leadingIcon={IconTrash}

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

@@ -22,15 +22,16 @@
                 siteId: selectedDeployment.resourceId,
                 deploymentId: selectedDeployment.$id
             });
+            if (page.route.id?.includes('deployment-[deployment]')) {
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`
+                );
+                return;
+            }
             await Promise.all([
                 invalidate(Dependencies.DEPLOYMENTS),
                 invalidate(Dependencies.SITE)
             ]);
-            if (page.url.href.includes(`deployment-${selectedDeployment.$id}`)) {
-                await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`
-                );
-            }
             showDelete = false;
             addNotification({
                 type: 'success',