From 077167abd0686c2b6ae52e19f6effcc78e0e99b6 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 14 Mar 2025 11:54:35 +0100
Subject: [PATCH] feat: add donwload to functions

---
 .../downloadActionMenuItem.svelte             | 55 +++++++++++++++++++
 .../function-[function]/+page.svelte          | 27 ++++-----
 .../function-[function]/table.svelte          | 55 +++++++------------
 3 files changed, 88 insertions(+), 49 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte

diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte
new file mode 100644
index 000000000..0a2b6850a
--- /dev/null
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { SubMenu } from '$lib/components/menu';
+    import { sdk } from '$lib/stores/sdk';
+    import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
+    import { IconDownload } from '@appwrite.io/pink-icons-svelte';
+    import { ActionMenu } from '@appwrite.io/pink-svelte';
+
+    export let deployment: Models.Deployment;
+    export let toggle: () => void;
+    function getOutputDownload(deploymentId: string) {
+        return (
+            sdk.forProject.functions.getDeploymentDownload(
+                $page.params.function,
+                deploymentId.toString(),
+                DeploymentDownloadType.Output
+            ) + '&mode=admin'
+        );
+    }
+    function getSourceDownload(deploymentId: string) {
+        return (
+            sdk.forProject.functions.getDeploymentDownload(
+                $page.params.function,
+                deploymentId.toString(),
+                DeploymentDownloadType.Source
+            ) + '&mode=admin'
+        );
+    }
+</script>
+
+{#if deployment?.status === 'ready' || deployment?.status === 'failed'}
+    <SubMenu>
+        <ActionMenu.Root noPadding>
+            <ActionMenu.Item.Button trailingIcon={IconDownload}>Download</ActionMenu.Item.Button>
+        </ActionMenu.Root>
+        <svelte:fragment slot="menu">
+            <ActionMenu.Root noPadding>
+                <ActionMenu.Item.Anchor
+                    on:click={toggle}
+                    href={getSourceDownload(deployment.$id)}
+                    external>
+                    Download source
+                </ActionMenu.Item.Anchor>
+
+                <ActionMenu.Item.Anchor
+                    disabled={deployment?.status !== 'ready'}
+                    on:click={toggle}
+                    href={getOutputDownload(deployment.$id)}
+                    external>
+                    Download output
+                </ActionMenu.Item.Anchor>
+            </ActionMenu.Root>
+        </svelte:fragment>
+    </SubMenu>
+{/if}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
index 3213a86ee..5f8b2862c 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
@@ -13,15 +13,7 @@
     import DeploymentCard from './(components)/deploymentCard.svelte';
     import RedeployModal from './(modals)/redeployModal.svelte';
     import { canWriteFunctions } from '$lib/stores/roles';
-    import {
-        ActionMenu,
-        Alert,
-        Card,
-        Empty,
-        Icon,
-        Layout,
-        Popover
-    } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Alert, Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import {
         IconDotsHorizontal,
@@ -32,6 +24,8 @@
     import { app } from '$lib/stores/app';
     import CreateActionMenu from './(components)/createActionMenu.svelte';
     import { ParsedTagList, QuickFilters } from '$lib/components/filters';
+    import { Menu } from '$lib/components/menu';
+    import DownloadActionMenuItem from './(components)/downloadActionMenuItem.svelte';
 
     export let data;
 
@@ -82,24 +76,27 @@
                     activeDeployment>
                     <svelte:fragment slot="footer">
                         <Layout.Stack direction="row" gap="s" alignItems="center" inline>
-                            <Popover let:toggle placement="bottom-start" padding="none">
-                                <Button secondary icon text on:click={toggle}>
+                            <Menu>
+                                <Button secondary icon text>
                                     <Icon icon={IconDotsHorizontal} size="s" />
                                 </Button>
-                                <svelte:fragment slot="tooltip" let:toggle>
+                                <svelte:fragment slot="menu" let:toggle>
                                     <ActionMenu.Root>
                                         {#if $canWriteFunctions}
                                             <ActionMenu.Item.Button
                                                 trailingIcon={IconRefresh}
-                                                on:click={(e) => {
+                                                on:click={() => {
                                                     selectedDeployment = activeDeployment;
                                                     showRedeploy = true;
                                                     trackEvent(Click.FunctionsRedeployClick);
-                                                    toggle(e);
+                                                    toggle();
                                                 }}>
                                                 Redeploy
                                             </ActionMenu.Item.Button>
                                         {/if}
+                                        <DownloadActionMenuItem
+                                            deployment={activeDeployment}
+                                            {toggle} />
                                         <ActionMenu.Item.Anchor
                                             trailingIcon={IconTerminal}
                                             href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${activeDeployment.$id}`}>
@@ -107,7 +104,7 @@
                                         </ActionMenu.Item.Anchor>
                                     </ActionMenu.Root>
                                 </svelte:fragment>
-                            </Popover>
+                            </Menu>
                             <Button
                                 secondary
                                 href={`${base}/project-${$page.params.project}/functions/function-${$func.$id}/executions/execute-function`}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte
index 6b24ae0fb..f7f80ac6a 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Id } from '$lib/components';
     import type { PageData } from './$types';
-    import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
+    import { type Models } from '@appwrite.io/console';
     import type { Column } from '$lib/helpers/types';
     import { formatTimeDetailed } from '$lib/helpers/timeConversion';
     import { timer } from '$lib/actions/timer';
@@ -13,13 +13,11 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import Cancel from './(modals)/cancel.svelte';
-    import { sdk } from '$lib/stores/sdk';
     import { base } from '$app/paths';
-    import { ActionMenu, Icon, Layout, Popover, Status, Table } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Icon, Layout, Status, Table } from '@appwrite.io/pink-svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import {
         IconDotsHorizontal,
-        IconDownload,
         IconLightningBolt,
         IconRefresh,
         IconTrash,
@@ -30,11 +28,12 @@
     import Delete from './(modals)/deleteModal.svelte';
     import { capitalize } from '$lib/helpers/string';
     import { deploymentStatusConverter } from '$lib/stores/git';
+    import DownloadActionMenuItem from './(components)/downloadActionMenuItem.svelte';
+    import { Menu } from '$lib/components/menu';
 
     export let columns: Column[];
     export let data: PageData;
 
-    let showDropdown = [];
     let showDelete = false;
     let showActivate = false;
     let showRedeploy = false;
@@ -45,15 +44,6 @@
     function handleActivate() {
         invalidate(Dependencies.DEPLOYMENTS);
     }
-
-    //TODO: implement output download
-    function getDownload(deploymentId: string) {
-        return (
-            sdk.forProject.functions.getDeploymentDownload($func.$id, deploymentId).toString() +
-                '&mode=admin',
-            DeploymentDownloadType.Source
-        );
-    }
 </script>
 
 <Table.Root>
@@ -67,7 +57,7 @@
         {/each}
         <Table.Header.Cell width="40" />
     </svelte:fragment>
-    {#each data.deploymentList.deployments as deployment, index (deployment.$id)}
+    {#each data.deploymentList.deployments as deployment (deployment.$id)}
         <Table.Link
             href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
             {#each columns as column}
@@ -126,18 +116,19 @@
                     alignItems="center"
                     justifyContent="flex-end"
                     inline>
-                    <Popover let:toggle placement="bottom-start" padding="none">
-                        <Button text icon ariaLabel="more options" on:click={toggle}>
-                            <Icon icon={IconDotsHorizontal} size="s" />
+                    <Menu>
+                        <Button text icon size="s">
+                            <Icon size="s" icon={IconDotsHorizontal} />
                         </Button>
-                        <svelte:fragment slot="tooltip" let:toggle>
+
+                        <svelte:fragment slot="menu" let:toggle>
                             <ActionMenu.Root>
                                 <ActionMenu.Item.Button
                                     trailingIcon={IconRefresh}
-                                    on:click={(e) => {
+                                    on:click={() => {
                                         selectedDeployment = deployment;
                                         showRedeploy = true;
-                                        toggle(e);
+                                        toggle();
                                         trackEvent(Click.FunctionsRedeployClick);
                                     }}>
                                     Redeploy
@@ -145,27 +136,23 @@
                                 {#if deployment.status === 'ready' && deployment.$id !== $func.deploymentId}
                                     <ActionMenu.Item.Button
                                         trailingIcon={IconLightningBolt}
-                                        on:click={(e) => {
+                                        on:click={() => {
                                             selectedDeployment = deployment;
                                             showActivate = true;
-                                            toggle(e);
+                                            toggle();
                                         }}>
                                         Activate
                                     </ActionMenu.Item.Button>
                                 {/if}
 
-                                <ActionMenu.Item.Anchor
-                                    trailingIcon={IconDownload}
-                                    href={getDownload(deployment.$id)}
-                                    on:click={() => (showDropdown[index] = false)}>
-                                    Download
-                                </ActionMenu.Item.Anchor>
+                                <DownloadActionMenuItem {deployment} {toggle} />
+
                                 {#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
                                     <ActionMenu.Item.Button
                                         trailingIcon={IconXCircle}
-                                        on:click={(e) => {
+                                        on:click={() => {
                                             selectedDeployment = deployment;
-                                            toggle(e);
+                                            toggle();
 
                                             showCancel = true;
                                             trackEvent(Click.FunctionsDeploymentCancelClick);
@@ -177,9 +164,9 @@
                                     <ActionMenu.Item.Button
                                         trailingIcon={IconTrash}
                                         status="danger"
-                                        on:click={(e) => {
+                                        on:click={() => {
                                             selectedDeployment = deployment;
-                                            toggle(e);
+                                            toggle();
 
                                             showDelete = true;
                                             trackEvent(Click.FunctionsDeploymentDeleteClick);
@@ -189,7 +176,7 @@
                                 {/if}
                             </ActionMenu.Root>
                         </svelte:fragment>
-                    </Popover>
+                    </Menu>
                 </Layout.Stack>
             </Table.Cell>
         </Table.Link>