Make datepicker clearable or not based on prop (#4011)

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" />

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) => {

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 }) => {