From 19d00cd3547aea6f78b1b46678d629d5b140b49f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Aug 2024 14:48:20 +0200
Subject: [PATCH] feat: add schedule executions tooltip info

---
 src/lib/layout/logs.svelte                    | 55 +++++++++++++++----
 .../executions/table.svelte                   |  8 ++-
 2 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 484dc25f7..b2782edc1 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { hoursToDays, toLocaleDateTime } from '$lib/helpers/date';
+    import { hoursToDays, timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
     import { log } from '$lib/stores/logs';
-    import { Alert, Card, Code, Heading, Id, SvgIcon, Tab, Tabs } from '../components';
+    import { Alert, Card, Code, Copy, Heading, Id, SvgIcon, Tab, Tabs } from '../components';
     import { calculateTime } from '$lib/helpers/timeConversion';
     import {
         TableBody,
@@ -18,6 +18,7 @@
     import { organization } from '$lib/stores/organization';
     import { Button } from '$lib/elements/forms';
     import { BillingPlan } from '$lib/constants';
+    import { tooltip } from '$lib/actions/tooltip';
 
     let selectedRequest = 'parameters';
     let selectedResponse = 'logs';
@@ -124,13 +125,26 @@
                         {/if}
                     </ul>
                     <div class="status u-margin-inline-start-auto">
-                        <Pill
-                            warning={execution.status === 'waiting' ||
-                                execution.status === 'building'}
-                            danger={execution.status === 'failed'}
-                            info={execution.status === 'completed' || execution.status === 'ready'}>
-                            {execution.status}
-                        </Pill>
+                        <div
+                            use:tooltip={{
+                                content: `Scheduled to execute on ${toLocaleDateTime(execution.scheduledAt)}`,
+                                disabled:
+                                    !execution?.scheduledAt || execution.status !== 'scheduled'
+                            }}>
+                            <Pill
+                                warning={execution.status === 'waiting' ||
+                                    execution.status === 'building'}
+                                danger={execution.status === 'failed'}
+                                info={execution.status === 'completed' ||
+                                    execution.status === 'ready'}>
+                                {#if execution.status === 'scheduled'}
+                                    <span class="icon-clock" aria-hidden="true" />
+                                    {timeFromNow(execution.scheduledAt)}
+                                {:else}
+                                    {execution.status}
+                                {/if}
+                            </Pill>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -145,7 +159,23 @@
                             </div>
                             <div class="u-flex u-gap-16">
                                 <h4 class="text u-bold">Path:</h4>
-                                <span class="u-text-color-gray">{execution.requestPath}</span>
+
+                                <Copy value={execution.requestPath}>
+                                    <div
+                                        class="interactive-text-output is-textarea"
+                                        style:min-inline-size="0">
+                                        <span class="text u-line-height-1-5 u-break-all">
+                                            {execution.requestPath}
+                                        </span>
+                                        <div class="u-flex u-cross-child-start u-gap-8">
+                                            <button
+                                                class="interactive-text-output-button"
+                                                aria-label="copy text">
+                                                <span class="icon-duplicate" aria-hidden="true" />
+                                            </button>
+                                        </div>
+                                    </div>
+                                </Copy>
                             </div>
                         </div>
 
@@ -156,8 +186,9 @@
                             </div>
                             <div class="u-flex u-gap-16">
                                 <h4 class="text u-bold">Status Code:</h4>
-                                <span class="u-text-color-gray"
-                                    >{execution.responseStatusCode}</span>
+                                <span class="u-text-color-gray">
+                                    {execution.responseStatusCode}
+                                </span>
                             </div>
                         </div>
                     </header>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/executions/table.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/executions/table.svelte
index b440a8105..31b2d0fe5 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/executions/table.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/executions/table.svelte
@@ -66,8 +66,8 @@
                                 {@const status = execution.status}
                                 <div
                                     use:tooltip={{
-                                        content: `Scheduled to execute on ${toLocaleDateTime(execution?.schedule)}`,
-                                        disabled: !execution?.schedule
+                                        content: `Scheduled to execute on ${toLocaleDateTime(execution.scheduledAt)}`,
+                                        disabled: !execution?.scheduledAt || status !== 'scheduled'
                                     }}>
                                     <Pill
                                         warning={status === 'waiting' || status === 'building'}
@@ -75,8 +75,10 @@
                                         info={status === 'completed' || status === 'ready'}>
                                         {#if status === 'scheduled'}
                                             <span class="icon-clock" aria-hidden="true" />
+                                            {timeFromNow(execution.scheduledAt)}
+                                        {:else}
+                                            {status}
                                         {/if}
-                                        {status}
                                     </Pill>
                                 </div>
                             </TableCell>