fix(functions): align deployment action menu icon placement to match sites and solve error page issue

Author: HarshMN2345

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.url.href.includes(`deployment-${selectedDeployment.$id}`)) {
+                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

@@ -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.url.href.includes(`deployment-${selectedDeployment.$id}`)) {
+                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]/deployment-[deployment]/+page.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';
@@ -104,7 +104,7 @@
                                     placement={'bottom'}>
                                     <div>
                                         <ActionMenu.Item.Button
-                                            trailingIcon={IconRefresh}
+                                            leadingIcon={IconRefresh}
                                             disabled={data.deployment.sourceSize === 0}
                                             on:click={() => {
                                                 showRedeploy = true;
@@ -121,6 +121,18 @@
                             {#if !!data.deployment?.sourceSize || !!data.deployment?.sourceSize}
                                 <DownloadActionMenuItem deployment={data.deployment} {toggle} />
                             {/if}
+                            {#if $canWriteFunctions && data.deployment.status !== 'building' && data.deployment.status !== 'processing' && data.deployment?.status !== 'waiting'}
+                                <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]/sites/site-[site]/deployments/deleteDeploymentModal.svelte

@@ -22,15 +22,16 @@
                 siteId: selectedDeployment.resourceId,
                 deploymentId: selectedDeployment.$id
             });
-            await Promise.all([
-                invalidate(Dependencies.DEPLOYMENTS),
-                invalidate(Dependencies.SITE)
-            ]);
             if (page.url.href.includes(`deployment-${selectedDeployment.$id}`)) {
-                await goto(
+                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)
+            ]);
             showDelete = false;
             addNotification({
                 type: 'success',