From f1780b4635e39fd8d217cb1d723eda0795ec83c8 Mon Sep 17 00:00:00 2001
From: wendrul <53628737+wendrul@users.noreply.github.com>
Date: Tue, 2 Jul 2024 11:21:58 +0200
Subject: [PATCH] Make datepicker clearable or not based on prop (#4011)

---
 .../src/lib/components/DateTimeInput.svelte   | 27 ++++++++++---------
 .../calendarPicker/CalendarPicker.svelte      |  2 ++
 .../(logged)/runs/[...path]/+page.svelte      |  6 +++--
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/DateTimeInput.svelte b/frontend/src/lib/components/DateTimeInput.svelte
index 94951c130f..687ee3d3ea 100644
--- a/frontend/src/lib/components/DateTimeInput.svelte
+++ b/frontend/src/lib/components/DateTimeInput.svelte
@@ -8,6 +8,7 @@
 
 	export let value: string | undefined = undefined
 
+	export let clearable: boolean = false
 	export let autofocus: boolean | null = false
 	export let useDropdown: boolean = false
 	export let minDate: string | undefined = undefined
@@ -130,18 +131,20 @@
 	>
 		Now
 	</Button>
-	<Button
-		variant="border"
-		color="light"
-		wrapperClasses="h-8"
-		{disabled}
-		on:click={() => {
-			value = undefined
-			dispatch('clear')
-		}}
-	>
-		<X size={14} />
-	</Button>
+	{#if clearable}
+		<Button
+			variant="border"
+			color="light"
+			wrapperClasses="h-8"
+			{disabled}
+			on:click={() => {
+				value = undefined
+				dispatch('clear')
+			}}
+		>
+			<X size={14} />
+		</Button>
+	{/if}
 	<!-- <div>
 		<ToggleButtonGroup bind:selected={format}>
 			<ToggleButton light small value={'local'} label="local" />
diff --git a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
index 2c7fc26e33..1b6492f21a 100644
--- a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
+++ b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
@@ -8,6 +8,7 @@
 	export let date: string | undefined
 	export let label: string
 	export let useDropdown: boolean = false
+	export let clearable: boolean = false
 
 	const dispatch = createEventDispatcher()
 	let input: HTMLInputElement
@@ -34,6 +35,7 @@
 		<div class="pb-1 text-sm text-secondary">{label}</div>
 		<div class="flex w-full">
 			<DateTimeInput
+				{clearable}
 				{useDropdown}
 				value={date}
 				on:change={(e) => {
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index 03f2d1af1c..1c6955855a 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -400,10 +400,8 @@
 		graph === 'ConcurrencyChart' &&
 		extendedJobs !== undefined &&
 		extendedJobs.jobs.length + extendedJobs.obscured_jobs.length >= 1000
-
 </script>
 
-
 <JobLoader
 	{allWorkspaces}
 	bind:jobs
@@ -727,6 +725,7 @@
 						/>
 
 						<CalendarPicker
+							clearable={true}
 							date={minTs}
 							label="Min datetimes"
 							on:change={async ({ detail }) => {
@@ -755,6 +754,7 @@
 							disabled
 						/>
 						<CalendarPicker
+							clearable={true}
 							date={maxTs}
 							label="Max datetimes"
 							on:change={async ({ detail }) => {
@@ -1068,6 +1068,7 @@
 						/>
 
 						<CalendarPicker
+							clearable={true}
 							date={minTs}
 							label="Min datetimes"
 							on:change={async ({ detail }) => {
@@ -1096,6 +1097,7 @@
 							disabled
 						/>
 						<CalendarPicker
+							clearable={true}
 							date={maxTs}
 							label="Max datetimes"
 							on:change={async ({ detail }) => {