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

2026-06-06 19:27:48 +00:00 · 2025-10-30 15:40:49 +05:30
parent 8bc5fa2126
commit f09458bc50
6 changed files with 41 additions and 13 deletions
@@ -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>
@@ -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({
@@ -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>
@@ -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({
@@ -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>
@@ -22,15 +22,16 @@
                siteId: selectedDeployment.resourceId,
                deploymentId: selectedDeployment.$id
            });
+            if (page.url.href.includes(`deployment-${selectedDeployment.$id}`)) {
+                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',