From e82ec33df96e6e81306d84759f348ec25cc47caa Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Sun, 20 Aug 2023 11:36:15 +0200
Subject: [PATCH] fix: deployment form design

---
 src/lib/elements/forms/label.svelte           |  2 +-
 .../functions/function-[function]/+layout.ts  |  2 +-
 .../function-[function]/+page.svelte          |  6 ++---
 .../deployment-[deployment]/+page.svelte      | 23 +++++++++++++++++--
 .../deploymentSource.svelte                   | 10 ++++----
 .../functions/function-[function]/store.ts    |  4 ++++
 6 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/lib/elements/forms/label.svelte b/src/lib/elements/forms/label.svelte
index 231393d27..e62b83aaa 100644
--- a/src/lib/elements/forms/label.svelte
+++ b/src/lib/elements/forms/label.svelte
@@ -28,7 +28,7 @@
 {/if}
 
 {#if tooltip}
-    <button class="tooltip" aria-label="variables info">
+    <button class="tooltip" aria-label="input tooltip">
         <span class="icon-info" aria-hidden="true" style="font-size: var(--icon-size-small)" />
         <span class="tooltip-popup" role="tooltip">
             <p class="text">
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+layout.ts b/src/routes/console/project-[project]/functions/function-[function]/+layout.ts
index b5792bfda..89d832cb4 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+layout.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/+layout.ts
@@ -14,7 +14,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             header: Header,
             breadcrumbs: Breadcrumbs,
             function: sdk.forProject.functions.get(params.function),
-            domain: sdk.forProject.proxy.listRules([
+            proxyRuleList: sdk.forProject.proxy.listRules([
                 Query.equal('resourceType', 'function'),
                 Query.equal('resourceId', params.function),
                 Query.limit(1)
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 b529e0e08..cb316d27a 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
@@ -25,7 +25,7 @@
         TableRow,
         TableScroll
     } from '$lib/elements/table';
-    import { execute, func } from './store';
+    import { execute, func, proxyRuleList } from './store';
     import { Container } from '$lib/layout';
     import { app } from '$lib/stores/app';
     import { calculateSize, humanFileSize } from '$lib/helpers/sizeConvertion';
@@ -125,10 +125,10 @@
                                 <b>Source:</b>
                                 <DeploymentSource deployment={activeDeployment} />
                             </p>
-                            {#if data.domain?.rules?.length}
+                            {#if $proxyRuleList?.rules?.length}
                                 <p class="u-flex u-gap-4 u-cross-center">
                                     <b>Domains:</b>
-                                    <DeploymentDomains domain={data.domain} />
+                                    <DeploymentDomains domain={$proxyRuleList} />
                                 </p>
                             {/if}
                         </div>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index c6c666083..b1765f08e 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -7,7 +7,7 @@
     import { calculateTime } from '$lib/helpers/timeConversion';
     import { Container } from '$lib/layout';
     import { app } from '$lib/stores/app';
-    import { func } from '../store';
+    import { func, proxyRuleList } from '../store';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import type { Models } from '@appwrite.io/console';
@@ -18,6 +18,8 @@
     import DeploymentSource from '../deploymentSource.svelte';
     import { deployment } from './store';
     import DeploymentCreatedBy from '../deploymentCreatedBy.svelte';
+    import DeploymentDomains from '../deploymentDomains.svelte';
+    import { tooltip } from '$lib/actions/tooltip';
 
     let logs = '';
 
@@ -77,11 +79,28 @@
                         {/if}
                     </p>
                     <p><b>Updated:</b> <DeploymentCreatedBy deployment={$deployment} /></p>
-                    <p><b>Size:</b> {fileSize.value + fileSize.unit}</p>
                     <p>
+                        <b>Size:</b>
+                        {fileSize.value + fileSize.unit}
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style="font-size: var(--icon-size-small)"
+                            use:tooltip={{
+                                content:
+                                    'Build size is the size of your code that will run. If your code has been transpiled, it will include your library source code. If it has been compiled, it will include your build output file.'
+                            }} />
+                    </p>
+                    <p class="u-flex u-gap-4 u-cross-center">
                         <b>Source:</b>
                         <DeploymentSource deployment={$deployment} />
                     </p>
+                    {#if $proxyRuleList?.rules?.length}
+                        <p class="u-flex u-gap-4 u-cross-center">
+                            <b>Domains:</b>
+                            <DeploymentDomains domain={$proxyRuleList} />
+                        </p>
+                    {/if}
                 </div>
                 <div class="u-flex u-flex-vertical u-cross-end">
                     <Pill
diff --git a/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte b/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
index 4bfe6bd6d..c75cc9626 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
@@ -21,10 +21,12 @@
             <DropListLink href={deployment.providerBranchUrl} external icon="git-branch">
                 {deployment.providerBranch}
             </DropListLink>
-            <DropListLink href={deployment.providerCommitUrl} external icon="git-commit">
-                {deployment?.providerCommitHash?.substring(0, 7)}
-                {deployment.providerCommitMessage}
-            </DropListLink>
+            {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
+                <DropListLink href={deployment.providerCommitUrl} external icon="git-commit">
+                    {deployment?.providerCommitHash?.substring(0, 7)}
+                    {deployment.providerCommitMessage}
+                </DropListLink>
+            {/if}
         </svelte:fragment>
     </DropList>
 {:else if deployment.type === 'manual'}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/store.ts b/src/routes/console/project-[project]/functions/function-[function]/store.ts
index eebbdee38..21af90eb4 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/store.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/store.ts
@@ -3,6 +3,10 @@ import { derived, writable, type Writable } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
 
 export const func = derived(page, ($page) => $page.data.function as Models.Function);
+export const proxyRuleList = derived(
+    page,
+    ($page) => $page.data.proxyRuleList as Models.ProxyRuleList
+);
 export const execute: Writable<Models.Function> = writable();
 export const repositories: Writable<{
     search: string;