From cf14f9d2f5c2481b9b9268ccf32014652c8d05a1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 18 Aug 2023 19:02:03 +0200
Subject: [PATCH] fix: deployments and executions

---
 src/lib/components/collapsibleItem.svelte     |   4 +-
 .../function-[function]/+page.svelte          | 180 +++++++++---------
 .../deployment-[deployment]/+page.svelte      |   6 +-
 .../deploymentCreatedBy.svelte                |   2 +-
 .../function-[function]/execute.svelte        |  12 +-
 .../executions/+page.svelte                   |   2 +-
 6 files changed, 108 insertions(+), 98 deletions(-)

diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
index d1da733c0..f504bfde3 100644
--- a/src/lib/components/collapsibleItem.svelte
+++ b/src/lib/components/collapsibleItem.svelte
@@ -11,7 +11,9 @@
             <slot name="beforetitle" />
             <div>
                 <span class="text"><slot name="title" /></span>
-                <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+                {#if $$slots.subtitle}
+                    <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+                {/if}
             </div>
             <div class="icon">
                 <span class="icon-cheveron-down" aria-hidden="true" />
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 58080cc57..00cafb86a 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
@@ -192,105 +192,107 @@
             <Heading tag="h3" size="7">All</Heading>
         </div>
         {#if data.deployments.total > 0}
-            <TableScroll>
-                <TableHeader>
-                    <TableCellHead width={150}>Deployment ID</TableCellHead>
-                    <TableCellHead width={100}>Status</TableCellHead>
-                    <TableCellHead width={70}>Source</TableCellHead>
-                    <TableCellHead width={180}>Created</TableCellHead>
-                    <TableCellHead width={100}>Build Time</TableCellHead>
-                    <TableCellHead width={70}>Size</TableCellHead>
-                    <TableCellHead width={25} />
-                </TableHeader>
-                <TableBody>
-                    {#each data.deployments.deployments as deployment, index}
-                        {@const status = deployment.status}
-                        <TableRow>
-                            <TableCell width={150} title="Deployment ID">
-                                <Id value={deployment.$id}>{deployment.$id}</Id>
-                            </TableCell>
-                            <TableCell width={100} title="Status">
-                                <Pill
-                                    danger={status === 'failed'}
-                                    warning={status === 'pending'}
-                                    success={status === 'completed' || status === 'ready'}
-                                    info={status === 'processing' || status === 'building'}>
-                                    {status}
-                                </Pill>
-                            </TableCell>
-                            <TableCellText width={70} title="Source">
-                                <DeploymentSource {deployment} /></TableCellText>
-                            <TableCellText width={140} title="Created">
-                                <DeploymentCreatedBy {deployment} />
-                            </TableCellText>
+            <div class="u-margin-block-start-24">
+                <TableScroll noMargin>
+                    <TableHeader>
+                        <TableCellHead width={150}>Deployment ID</TableCellHead>
+                        <TableCellHead width={100}>Status</TableCellHead>
+                        <TableCellHead width={70}>Source</TableCellHead>
+                        <TableCellHead width={180}>Updated</TableCellHead>
+                        <TableCellHead width={100}>Build Time</TableCellHead>
+                        <TableCellHead width={70}>Size</TableCellHead>
+                        <TableCellHead width={25} />
+                    </TableHeader>
+                    <TableBody>
+                        {#each data.deployments.deployments as deployment, index}
+                            {@const status = deployment.status}
+                            <TableRow>
+                                <TableCell width={150} title="Deployment ID">
+                                    <Id value={deployment.$id}>{deployment.$id}</Id>
+                                </TableCell>
+                                <TableCell width={100} title="Status">
+                                    <Pill
+                                        danger={status === 'failed'}
+                                        warning={status === 'pending'}
+                                        success={status === 'completed' || status === 'ready'}
+                                        info={status === 'processing' || status === 'building'}>
+                                        {status}
+                                    </Pill>
+                                </TableCell>
+                                <TableCellText width={70} title="Source">
+                                    <DeploymentSource {deployment} /></TableCellText>
+                                <TableCellText width={140} title="Created">
+                                    <DeploymentCreatedBy {deployment} />
+                                </TableCellText>
 
-                            <TableCellText width={100} title="Build Time">
-                                {#if ['processing', 'building'].includes(deployment.status)}
-                                    <span use:timer={{ start: deployment.$createdAt }} />
-                                {:else}
-                                    {calculateTime(deployment.buildTime)}
-                                {/if}
-                            </TableCellText>
+                                <TableCellText width={100} title="Build Time">
+                                    {#if ['processing', 'building'].includes(deployment.status)}
+                                        <span use:timer={{ start: deployment.$createdAt }} />
+                                    {:else}
+                                        {calculateTime(deployment.buildTime)}
+                                    {/if}
+                                </TableCellText>
 
-                            <TableCellText width={70} title="Size">
-                                {calculateSize(deployment.size)}
-                            </TableCellText>
+                                <TableCellText width={70} title="Size">
+                                    {calculateSize(deployment.size)}
+                                </TableCellText>
 
-                            <TableCell width={25} showOverflow>
-                                <DropList
-                                    bind:show={showDropdown[index]}
-                                    placement="bottom-start"
-                                    noArrow>
-                                    <button
-                                        class="button is-only-icon is-text"
-                                        aria-label="More options"
-                                        on:click|preventDefault={() => {
-                                            showDropdown[index] = !showDropdown[index];
-                                        }}>
-                                        <span class="icon-dots-horizontal" aria-hidden="true" />
-                                    </button>
-                                    <svelte:fragment slot="list">
-                                        <DropListItem
-                                            icon="refresh"
-                                            on:click={() => {
-                                                selectedDeployment = deployment;
-                                                showRedeploy = true;
-                                                showDropdown = [];
+                                <TableCell width={25} showOverflow>
+                                    <DropList
+                                        bind:show={showDropdown[index]}
+                                        placement="bottom-start"
+                                        noArrow>
+                                        <button
+                                            class="button is-only-icon is-text"
+                                            aria-label="More options"
+                                            on:click|preventDefault={() => {
+                                                showDropdown[index] = !showDropdown[index];
                                             }}>
-                                            Redeploy
-                                        </DropListItem>
-                                        {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
+                                            <span class="icon-dots-horizontal" aria-hidden="true" />
+                                        </button>
+                                        <svelte:fragment slot="list">
                                             <DropListItem
-                                                icon="lightning-bolt"
+                                                icon="refresh"
                                                 on:click={() => {
                                                     selectedDeployment = deployment;
-                                                    showActivate = true;
+                                                    showRedeploy = true;
                                                     showDropdown = [];
                                                 }}>
-                                                Activate
+                                                Redeploy
                                             </DropListItem>
-                                        {/if}
-                                        <DropListLink
-                                            icon="terminal"
-                                            href={`/console/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
-                                            Output
-                                        </DropListLink>
-                                        <DropListItem
-                                            icon="trash"
-                                            on:click={() => {
-                                                selectedDeployment = deployment;
-                                                showDropdown = [];
-                                                showDelete = true;
-                                            }}>
-                                            Delete
-                                        </DropListItem>
-                                    </svelte:fragment>
-                                </DropList>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </TableScroll>
+                                            {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
+                                                <DropListItem
+                                                    icon="lightning-bolt"
+                                                    on:click={() => {
+                                                        selectedDeployment = deployment;
+                                                        showActivate = true;
+                                                        showDropdown = [];
+                                                    }}>
+                                                    Activate
+                                                </DropListItem>
+                                            {/if}
+                                            <DropListLink
+                                                icon="terminal"
+                                                href={`/console/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
+                                                Output
+                                            </DropListLink>
+                                            <DropListItem
+                                                icon="trash"
+                                                on:click={() => {
+                                                    selectedDeployment = deployment;
+                                                    showDropdown = [];
+                                                    showDelete = true;
+                                                }}>
+                                                Delete
+                                            </DropListItem>
+                                        </svelte:fragment>
+                                    </DropList>
+                                </TableCell>
+                            </TableRow>
+                        {/each}
+                    </TableBody>
+                </TableScroll>
+            </div>
         {:else}
             <Empty single target="deployment" on:click>
                 <div class="u-text-center">
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 fc47b7d02..c6c666083 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
@@ -76,7 +76,7 @@
                             {calculateTime($deployment.buildTime)}
                         {/if}
                     </p>
-                    <p><b>Created:</b> <DeploymentCreatedBy deployment={$deployment} /></p>
+                    <p><b>Updated:</b> <DeploymentCreatedBy deployment={$deployment} /></p>
                     <p><b>Size:</b> {fileSize.value + fileSize.unit}</p>
                     <p>
                         <b>Source:</b>
@@ -101,9 +101,11 @@
             <section class="code-panel">
                 <header class="code-panel-header u-flex u-main-space-between u-width-full-line">
                     <div class="u-flex u-flex-vertical">
-                        <h4 class="u-bold">Build [{$func.name}]</h4>
+                        <h4 class="u-bold">Build {$func.name}</h4>
                         {#if $deployment.status === 'building'}
                             <span>Building...</span>
+                        {:else}
+                            {$deployment.status}
                         {/if}
                     </div>
 
diff --git a/src/routes/console/project-[project]/functions/function-[function]/deploymentCreatedBy.svelte b/src/routes/console/project-[project]/functions/function-[function]/deploymentCreatedBy.svelte
index 4172a831c..15e429722 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deploymentCreatedBy.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deploymentCreatedBy.svelte
@@ -5,7 +5,7 @@
     export let deployment: Models.Deployment;
 </script>
 
-{timeFromNow(deployment.$createdAt)}
+{timeFromNow(deployment.$updatedAt)}
 {#if deployment.providerCommitAuthor}
     by <a
         class="u-underline u-cursor-pointer"
diff --git a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
index 825fd343c..bea78a43f 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
@@ -87,12 +87,12 @@
 <Modal headerDivider={false} bind:show size="big" onSubmit={handleSubmit} on:close={close}>
     <svelte:fragment slot="header">Execute function</svelte:fragment>
     <p class="text">
-        Manually execute your function. Learn more about <a
+        Manually execute your function. <a
             class="link"
             href="https://appwrite.io/docs/functions#execute"
             target="_blank"
             rel="noopener noreferrer">
-            function executions
+            Learn more
         </a>.
     </p>
 
@@ -108,14 +108,18 @@
 
         <Collapsible>
             <CollapsibleItem>
-                <svelte:fragment slot="title">Advanced settings (optional)</svelte:fragment>
+                <svelte:fragment slot="title">Advanced settings</svelte:fragment>
+                <svelte:fragment slot="subtitle">(optional)</svelte:fragment>
                 <FormList>
                     <p class="text">
                         Customize your execution with headers or body. To customize parameters, add
                         them to path.
                     </p>
 
-                    <Label>Headers</Label>
+                    <Label
+                        tooltip="Headers should contain alphanumeric characters (a-z, A-Z, and 0-9) and hyphens only (- and _).">
+                        Headers
+                    </Label>
                     <div class="form u-grid u-gap-16">
                         <ul class="form-list">
                             {#if headers}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
index 4f3c04434..dcc566732 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
@@ -120,7 +120,7 @@
                 <Button text external href="https://appwrite.io/docs/functions#execute">
                     Documentation
                 </Button>
-                <Create bind:showCreateManual={showCreate} />
+                <Create secondary />
             </div>
         </EmptySearch>
     {/if}