From 4ac3e4622b4abfb842968504ceb5aa2b5aa93e36 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 27 Sep 2024 09:25:55 -0600
Subject: [PATCH] Add empty state for Upcoming Runs on schedule detail page
 (#2354)

---
 src/lib/components/schedule/schedule-upcoming-runs.svelte | 7 ++++++-
 src/lib/i18n/locales/en/schedules.ts                      | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/schedule/schedule-upcoming-runs.svelte b/src/lib/components/schedule/schedule-upcoming-runs.svelte
index 935d98094..6eef6e893 100644
--- a/src/lib/components/schedule/schedule-upcoming-runs.svelte
+++ b/src/lib/components/schedule/schedule-upcoming-runs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Panel from '$lib/components/panel.svelte';
+  import EmptyState from '$lib/holocene/empty-state.svelte';
   import { translate } from '$lib/i18n/translate';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import { formatDate } from '$lib/utilities/format-date';
@@ -9,7 +10,7 @@
   export let futureRuns: Timestamp[] = [];
 </script>
 
-<Panel>
+<Panel class="w-full">
   <h2 class="mb-4">{translate('schedules.upcoming-runs')}</h2>
   {#each futureRuns.slice(0, 5) as run}
     <div class="row">
@@ -20,6 +21,10 @@
         })}
       </p>
     </div>
+  {:else}
+    <EmptyState
+      title={translate('schedules.upcoming-runs-empty-state-title')}
+    />
   {/each}
 </Panel>
 
diff --git a/src/lib/i18n/locales/en/schedules.ts b/src/lib/i18n/locales/en/schedules.ts
index d0fbd365f..8900da3cb 100644
--- a/src/lib/i18n/locales/en/schedules.ts
+++ b/src/lib/i18n/locales/en/schedules.ts
@@ -19,6 +19,7 @@ export const Strings = {
   'recent-runs': 'Recent Runs',
   'recent-runs-empty-state-title': 'No Recent Runs',
   'upcoming-runs': 'Upcoming Runs',
+  'upcoming-runs-empty-state-title': 'No Upcoming Runs',
   loading: 'Loading Schedule...',
   deleting: 'Deleting Schedule...',
   'delete-schedule-error': 'Cannot delete schedule. {{error}}',