windmill-components 1.623.2 → 1.642.0

package/package/components/runs/RunsFilter.svelte

@@ -1,966 +0,0 @@
-<script module lang="ts">export const runsFiltersSchema = z.object({
-    path: z.string().nullable().default(null),
-    worker: z.string().nullable().default(null),
-    user: z.string().nullable().default(null),
-    folder: z.string().nullable().default(null),
-    label: z.string().nullable().default(null),
-    concurrency_key: z.string().nullable().default(null),
-    tag: z.string().nullable().default(null),
-    allow_wildcards: z.boolean().default(false),
-    show_future_jobs: z.boolean().default(true),
-    success: z
-        .enum(['running', 'suspended', 'waiting', 'success', 'failure'])
-        .nullable()
-        .default(null),
-    show_skipped: z.boolean().default(false),
-    show_schedules: z.boolean().default(true),
-    min_ts: z.string().nullable().default(null),
-    max_ts: z.string().nullable().default(null),
-    schedule_path: z.string().nullable().default(null),
-    job_kinds: z.string().default('runs'),
-    all_workspaces: z.boolean().default(false),
-    arg: z.string().default(''),
-    result: z.string().default(''),
-    job_trigger_kind: z
-        .string()
-        .transform((s) => s)
-        .nullable()
-        .default(null),
-    per_page: z.number().default(1000)
-});
-</script>
-
-<script lang="ts">import { Button } from '../common';
-import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
-import { CircleAlert, CircleCheck, Hourglass, ListFilterPlus, CirclePlay, X } from 'lucide-svelte';
-import JsonEditor from '../JsonEditor.svelte';
-import Toggle from '../Toggle.svelte';
-import Label from '../Label.svelte';
-import Section from '../Section.svelte';
-import { enterpriseLicense, workspaceStore } from '../../stores';
-import { createEventDispatcher } from 'svelte';
-import ToggleButtonMore from '../common/toggleButton-v2/ToggleButtonMore.svelte';
-import Popover from '../meltComponents/Popover.svelte';
-import Select from '../select/Select.svelte';
-import { safeSelectItems } from '../select/utils.svelte';
-import RunOption from './RunOption.svelte';
-import DropdownSelect from '../DropdownSelect.svelte';
-import TooltipV2 from '../meltComponents/Tooltip.svelte';
-import TextInput from '../text_input/TextInput.svelte';
-import { jobTriggerKinds, triggerDisplayNamesMap } from '../triggers/utils';
-import { Debounced, watch } from 'runed';
-import z from 'zod';
-let { path = $bindable(), label = $bindable(), concurrencyKey = $bindable(), worker = $bindable(), tag = $bindable(), success = $bindable(), showSkipped = $bindable(), argFilter = $bindable(), argError = $bindable(), resultFilter = $bindable(), jobTriggerKind = $bindable(), resultError = $bindable(), jobKindsCat = $bindable(), user = $bindable(), folder = $bindable(), mobile = false, schedulePath = $bindable(), allowWildcards = $bindable(), paths = [], usernames = [], folders = [], allWorkspaces = $bindable(), filterBy = $bindable(), small = false, calendarSmall = false } = $props();
-const dispatch = createEventDispatcher();
-function autosetFilter() {
-    if (path && filterBy !== 'path') {
-        filterBy = 'path';
-    }
-    else if (user && filterBy !== 'user') {
-        filterBy = 'user';
-    }
-    else if (folder && filterBy !== 'folder') {
-        filterBy = 'folder';
-    }
-    else if (label && filterBy !== 'label') {
-        filterBy = 'label';
-    }
-    else if (concurrencyKey && filterBy !== 'concurrencyKey') {
-        filterBy = 'concurrencyKey';
-    }
-    else if (tag && filterBy !== 'tag') {
-        filterBy = 'tag';
-    }
-    else if (schedulePath && filterBy !== 'schedulePath') {
-        filterBy = 'schedulePath';
-    }
-    else if (worker && filterBy !== 'worker') {
-        filterBy = 'worker';
-    }
-}
-let labelTimeout = $state();
-let concurrencyKeyTimeout = $state(undefined);
-let tagTimeout = $state(undefined);
-let workerTimeout = $state(undefined);
-let allWorkspacesValue = $state(allWorkspaces ? 'all' : 'admins');
-let displayedLabel = $derived(label);
-let displayedConcurrencyKey = $derived(concurrencyKey);
-let displayedTag = $derived(tag);
-let displayedSchedule = $derived(schedulePath ?? undefined);
-let displayedWorker = $derived(worker);
-watch([() => [path, user, folder, label, worker, concurrencyKey, tag, schedulePath]], () => {
-    autosetFilter();
-});
-let [copyArgFilter, copyResultFilter] = $state([argFilter, resultFilter]);
-let debouncedArgAndResultFilters = new Debounced(() => [copyArgFilter, copyResultFilter], 500);
-watch(() => debouncedArgAndResultFilters.current, () => {
-    if (!argError)
-        argFilter = copyArgFilter || '';
-    if (!resultError)
-        resultFilter = copyResultFilter || '';
-});
-function resetFilter() {
-    path = null;
-    user = null;
-    folder = null;
-    label = null;
-    concurrencyKey = null;
-    tag = null;
-    schedulePath = null;
-    worker = null;
-}
-</script>
-
-{#snippet runsTooltip()}
-	<TooltipV2 placement="right">
-		{#snippet text()}
-			'Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they
-			start), they have been triggered through the UI, a schedule or webhook'
-		{/snippet}
-	</TooltipV2>
-{/snippet}
-{#snippet previewsTooltip()}
-	<TooltipV2 placement="right">
-		{#snippet text()}
-			'Previews are jobs that have been started in the editor as "Tests"'
-		{/snippet}
-	</TooltipV2>
-{/snippet}
-{#snippet dependenciesTooltip()}
-	<TooltipV2 placement="right">
-		{#snippet text()}
-			'Deploying a script, flow or an app launch a dependency job that creates and then attaches the
-			lockfile to the deployed item. This mechanism ensures that logic is always executed with the
-			exact same direct and indirect dependencies.'
-		{/snippet}
-	</TooltipV2>
-{/snippet}
-{#snippet syncTooltip()}
-	<TooltipV2 placement="right">
-		{#snippet text()}
-			'Sync jobs that are triggered on every script deployment to sync the workspace with the Git
-			repository configured in the workspace settings'
-		{/snippet}
-	</TooltipV2>
-{/snippet}
-
-{#if !mobile}
-	{#if $workspaceStore == 'admins'}
-		<RunOption label="Workspaces" for="workspaces">
-			<ToggleButtonGroup
-				bind:selected={allWorkspacesValue}
-				on:selected={({ detail }) => (allWorkspaces = detail === 'all')}
-			>
-				{#snippet children({ item })}
-					<ToggleButton value={'admins'} label="Admins" {item} />
-					<ToggleButton value={'all'} label="All" {item} />
-				{/snippet}
-			</ToggleButtonGroup>
-		</RunOption>
-	{/if}
-	<!-- Filter by -->
-	<div class="flex flex-row gap-2">
-		<RunOption label="Filter by" for="filter-by">
-			<ToggleButtonGroup
-				bind:selected={filterBy}
-				on:selected={(e) => {
-					if (e.detail != filterBy) {
-						resetFilter()
-					}
-				}}
-			>
-				{#snippet children({ item })}
-					<ToggleButton value="path" label="Path" {item} />
-					<ToggleButton value="user" label="User" {item} />
-					<ToggleButton value="folder" label="Folder" {item} />
-					<ToggleButtonMore
-						togglableItems={[
-							{ label: 'Schedule path', value: 'schedulePath' },
-							{ label: 'Concurrency key', value: 'concurrencyKey' },
-							{ label: 'Label', value: 'label' },
-							{ label: 'Tag', value: 'tag' },
-							{ label: 'Worker', value: 'worker' }
-						]}
-						{item}
-						bind:selected={
-							() => filterBy,
-							(v) => {
-								resetFilter()
-								filterBy = v
-							}
-						}
-					/>
-				{/snippet}
-			</ToggleButtonGroup>
-		</RunOption>
-
-		{#if filterBy == 'user'}
-			{#key user}
-				<RunOption label="User" for="user">
-					<Select
-						items={safeSelectItems(usernames)}
-						bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
-						clearable
-						onClear={() => ((user = null), dispatch('reset'))}
-						onCreateItem={(item) => (usernames.push(item), (user = item))}
-						createText="Press enter to use this value"
-						id="user"
-					/>
-				</RunOption>
-			{/key}
-		{:else if filterBy == 'folder'}
-			<RunOption label="Folder" for="folder">
-				{#key folder}
-					<Select
-						items={safeSelectItems(folders)}
-						bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
-						clearable
-						onClear={() => ((folder = null), dispatch('reset'))}
-						id="folder"
-					/>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'path'}
-			<RunOption label="Path" for="path">
-				{#key path}
-					<Select
-						items={safeSelectItems(paths)}
-						bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
-						clearable
-						onClear={() => ((path = null), dispatch('reset'))}
-						onCreateItem={(item) => (paths.push(item), (path = item))}
-						createText="Press enter to use this value"
-						id="path"
-					/>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'label'}
-			<RunOption label="Label" for="label">
-				{#snippet tooltip()}
-					<a
-						href="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#jobs-labels"
-						target="_blank">Job Labels</a
-					> are string values in the array at the result field 'wm_labels' to easily filter them.
-				{/snippet}
-				{#key label}
-					<div class="relative">
-						{#if label}
-							<button
-								class="absolute top-2 right-2 z-50"
-								onclick={() => {
-									label = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-
-						<!-- svelte-ignore a11y_autofocus -->
-						<TextInput
-							inputProps={{
-								autofocus: true,
-								type: 'text',
-								onkeydown: (e) => {
-									if (labelTimeout) {
-										clearTimeout(labelTimeout)
-									}
-
-									labelTimeout = setTimeout(() => {
-										label = displayedLabel
-									}, 1000)
-								}
-							}}
-							bind:value={() => displayedLabel ?? undefined, (v) => (displayedLabel = v ?? null)}
-						/>
-						<div class="absolute -top-4 right-0">
-							<Toggle
-								bind:checked={allowWildcards}
-								size="2xs"
-								options={{ right: '(*)', title: 'allow wildcards (*)' }}
-							></Toggle>
-						</div>
-					</div>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'concurrencyKey'}
-			<RunOption label="Concurrency Key" for="concurrencyKey">
-				{#snippet tooltip()}
-					For concurrency limited jobs, the concurrency key defines a group of jobs that share the
-					same limits.
-					{#if !$enterpriseLicense}
-						Concurrency limits are an EE feature.
-					{/if}
-				{/snippet}
-				{#key concurrencyKey}
-					{#if concurrencyKey}
-						<button
-							class="absolute top-2 right-2 z-50"
-							onclick={() => {
-								concurrencyKey = null
-								dispatch('reset')
-							}}
-						>
-							<X size={14} />
-						</button>
-					{/if}
-
-					<!-- svelte-ignore a11y_autofocus -->
-					<TextInput
-						inputProps={{
-							autofocus: true,
-							type: 'text',
-							onkeydown: (e) => {
-								if (concurrencyKeyTimeout) {
-									clearTimeout(concurrencyKeyTimeout)
-								}
-
-								concurrencyKeyTimeout = setTimeout(() => {
-									concurrencyKey = displayedConcurrencyKey
-								}, 1000)
-							}
-						}}
-						bind:value={
-							() => displayedConcurrencyKey ?? undefined,
-							(v) => (displayedConcurrencyKey = v ?? null)
-						}
-					/>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'tag'}
-			<RunOption label="Tag" for="tag">
-				{#key tag}
-					<div class="relative">
-						{#if tag}
-							<button
-								class="absolute top-2 right-2 z-50"
-								onclick={() => {
-									tag = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-
-						<!-- svelte-ignore a11y_autofocus -->
-						<TextInput
-							inputProps={{
-								autofocus: true,
-								type: 'text',
-								id: 'tag',
-								onkeydown: (e) => {
-									if (tagTimeout) {
-										clearTimeout(tagTimeout)
-									}
-
-									tagTimeout = setTimeout(() => {
-										tag = displayedTag
-									}, 1000)
-								}
-							}}
-							bind:value={() => displayedTag ?? undefined, (v) => (displayedTag = v ?? null)}
-						/>
-						<div class="absolute -top-4 right-0">
-							<Toggle
-								bind:checked={allowWildcards}
-								size="2xs"
-								options={{ right: 'wildcards (*)', title: 'allow wildcards (*)' }}
-							></Toggle>
-						</div>
-					</div>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'schedulePath'}
-			<RunOption label="Schedule Path" for="schedulePath">
-				{#key tag}
-					<div class="relative">
-						{#if tag}
-							<button
-								class="absolute top-2 right-2 z-50"
-								onclick={() => {
-									schedulePath = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-
-						<!-- svelte-ignore a11y_autofocus -->
-						<TextInput
-							inputProps={{
-								autofocus: true,
-								type: 'text',
-								onkeydown: (e) => {
-									if (tagTimeout) {
-										clearTimeout(tagTimeout)
-									}
-
-									tagTimeout = setTimeout(() => {
-										schedulePath = displayedSchedule ?? null
-									}, 1000)
-								},
-								id: 'schedulePath'
-							}}
-							bind:value={displayedSchedule}
-						/>
-					</div>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'worker'}
-			<RunOption label="Worker" for="worker">
-				{#key worker}
-					<div class="relative">
-						{#if worker}
-							<button
-								class="absolute top-2 right-2 z-50"
-								onclick={() => {
-									worker = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-
-						<!-- svelte-ignore a11y_autofocus -->
-						<TextInput
-							inputProps={{
-								autofocus: true,
-								onkeydown: (e) => {
-									if (workerTimeout) {
-										clearTimeout(workerTimeout)
-									}
-
-									workerTimeout = setTimeout(() => {
-										worker = displayedWorker
-									}, 1000)
-								},
-								id: 'worker'
-							}}
-							bind:value={() => displayedWorker ?? undefined, (v) => (displayedWorker = v ?? null)}
-						/>
-						<div class="absolute -top-4 right-0">
-							<Toggle
-								bind:checked={allowWildcards}
-								size="2xs"
-								options={{ right: 'wildcards (*)', title: 'allow wildcards (*)' }}
-							></Toggle>
-						</div>
-					</div>
-				{/key}
-			</RunOption>
-		{/if}
-	</div>
-
-	<!-- Kind -->
-	<RunOption label="Kind" for="kind">
-		{#if small && !calendarSmall}
-			<DropdownSelect
-				btnClasses="min-w-24 h-9 bg-surface-secondary font-normal"
-				items={[
-					{
-						displayName: 'All',
-						action: () => {
-							jobKindsCat = 'all'
-						},
-						id: 'all'
-					},
-					{
-						displayName: 'Runs',
-						action: () => {
-							jobKindsCat = 'runs'
-						},
-						id: 'runs',
-						extra: runsTooltip
-					},
-					{
-						displayName: 'Previews',
-						action: () => {
-							jobKindsCat = 'previews'
-						},
-						id: 'previews',
-						extra: previewsTooltip
-					},
-					{
-						displayName: 'Deps',
-						action: () => {
-							jobKindsCat = 'dependencies'
-						},
-						id: 'dependencies',
-						extra: dependenciesTooltip
-					},
-					{
-						displayName: 'Sync',
-						action: () => {
-							jobKindsCat = 'deploymentcallbacks'
-						},
-						id: 'deploymentcallbacks',
-						extra: syncTooltip
-					}
-				]}
-				selected={jobKindsCat}
-			/>
-		{:else}
-			<ToggleButtonGroup bind:selected={jobKindsCat}>
-				{#snippet children({ item })}
-					<ToggleButton value="all" label="All" {item} />
-					<ToggleButton
-						value="runs"
-						label="Runs"
-						showTooltipIcon
-						tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
-						{item}
-					/>
-					<ToggleButton
-						value="dependencies"
-						label="Deps"
-						showTooltipIcon
-						tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
-						{item}
-					/>
-					<ToggleButtonMore
-						togglableItems={[
-							{
-								label: 'Previews',
-								value: 'previews',
-								tooltip: "Previews are jobs that have been started in the editor as 'Tests'"
-							},
-							{
-								label: 'Sync',
-								value: 'deploymentcallbacks',
-								tooltip:
-									'Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings'
-							}
-						]}
-						{item}
-						bind:selected={
-							() => jobKindsCat,
-							(v) => {
-								resetFilter()
-								jobKindsCat = v
-							}
-						}
-					/>
-				{/snippet}
-			</ToggleButtonGroup>
-		{/if}
-	</RunOption>
-	<!-- Status -->
-	<RunOption label="Status" for="status">
-		<ToggleButtonGroup
-			selected={success ?? 'all'}
-			on:selected={({ detail }) => {
-				success = detail === 'all' ? null : detail
-				dispatch('successChange', success)
-			}}
-			id="status"
-		>
-			{#snippet children({ item })}
-				<ToggleButton value={'all'} label="All" {item} />
-				<ToggleButton
-					value={'running'}
-					tooltip="Running"
-					class="whitespace-nowrap"
-					icon={CirclePlay}
-					iconProps={{
-						class:
-							'group-data-[state=on]:text-yellow-600 dark:group-data-[state=on]:text-yellow-400'
-					}}
-					{item}
-				/>
-				<ToggleButton
-					value={'success'}
-					tooltip="Success"
-					class="whitespace-nowrap"
-					icon={CircleCheck}
-					iconProps={{
-						class: 'group-data-[state=on]:text-green-500 dark:group-data-[state=on]:text-green-300'
-					}}
-					{item}
-				/>
-				<ToggleButton
-					value={'failure'}
-					tooltip="Failure"
-					class="whitespace-nowrap"
-					icon={CircleAlert}
-					iconProps={{
-						class: 'group-data-[state=on]:text-red-500 dark:group-data-[state=on]:text-red-300'
-					}}
-					{item}
-				/>
-				{#if success == 'waiting'}
-					<ToggleButton
-						value={'waiting'}
-						tooltip="Waiting"
-						class="whitespace-nowrap"
-						icon={Hourglass}
-						selectedColor="blue"
-						{item}
-					/>
-				{:else if success == 'suspended'}
-					<ToggleButton
-						value={'suspended'}
-						tooltip="Suspended"
-						class="whitespace-nowrap"
-						icon={Hourglass}
-						selectedColor="purple"
-						{item}
-					/>
-				{/if}
-			{/snippet}
-		</ToggleButtonGroup>
-	</RunOption>
-{/if}
-
-<RunOption label="_" for="more-filters" noLabel>
-	<Popover
-		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-		contentClasses="p-4"
-		closeButton
-		usePointerDownOutside
-	>
-		{#snippet trigger()}
-			<Button
-				variant="default"
-				unifiedSize="md"
-				nonCaptureEvent={true}
-				startIcon={{ icon: ListFilterPlus }}
-				iconOnly
-			></Button>
-		{/snippet}
-
-		{#snippet content()}
-			<Section label="Filters">
-				<div class="w-102 flex flex-col gap-6">
-					{#if mobile}
-						{#if $workspaceStore == 'admins'}
-							<Label label="Workspaces">
-								<ToggleButtonGroup
-									bind:selected={allWorkspacesValue}
-									on:selected={({ detail }) => (allWorkspaces = detail === 'all')}
-								>
-									{#snippet children({ item })}
-										<ToggleButton value={'admins'} label="Admins" {item} />
-										<ToggleButton value={'all'} label="All" {item} />
-									{/snippet}
-								</ToggleButtonGroup>
-							</Label>
-						{/if}
-						<Label label="Filter by">
-							<ToggleButtonGroup
-								bind:selected={filterBy}
-								on:selected={(e) => {
-									if (e.detail != filterBy) {
-										path = null
-										user = null
-										folder = null
-										label = null
-										concurrencyKey = null
-										tag = null
-										schedulePath = null
-									}
-								}}
-							>
-								{#snippet children({ item })}
-									<ToggleButton value="path" label="Path" {item} />
-									<ToggleButton value="user" label="User" {item} />
-									<ToggleButton value="folder" label="Folder" {item} />
-									<ToggleButton value="schedulePath" label="Schedule" {item} />
-									<ToggleButton value="concurrencyKey" label="Concurrency" {item} />
-									<ToggleButton value="tag" label="Tag" {item} />
-									<ToggleButton value="label" label="Label" {item} />
-									<ToggleButton value="worker" label="Worker" {item} />
-								{/snippet}
-							</ToggleButtonGroup>
-						</Label>
-
-						{#if filterBy == 'user'}
-							<Label label="User">
-								<Select
-									disablePortal
-									items={safeSelectItems(usernames)}
-									bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
-									clearable
-									onClear={() => ((user = null), dispatch('reset'))}
-									inputClass="!h-[32px]"
-								/>
-							</Label>
-						{:else if filterBy == 'folder'}
-							<Label label="Folder">
-								<Select
-									disablePortal
-									items={safeSelectItems(folders)}
-									bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
-									clearable
-									onClear={() => ((folder = null), dispatch('reset'))}
-									inputClass="!h-[32px]"
-								/>
-							</Label>
-						{:else if filterBy === 'path'}
-							<Label label="Path">
-								<Select
-									disablePortal
-									items={safeSelectItems(paths)}
-									bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
-									clearable
-									onClear={() => ((path = null), dispatch('reset'))}
-									inputClass="!h-[32px]"
-								/>
-							</Label>
-						{:else if filterBy === 'tag'}
-							{#key tag}
-								<Label label="Tag">
-									<div class="relative w-full">
-										{#if tag}
-											<button
-												class="absolute top-2 right-2 z-50"
-												onclick={() => {
-													tag = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{/if}
-
-										<!-- svelte-ignore a11y_autofocus -->
-										<input
-											autofocus
-											type="text"
-											class="!h-[32px] py-1 !text-xs !w-80"
-											bind:value={displayedTag}
-											onkeydown={(e) => {
-												if (tagTimeout) {
-													clearTimeout(tagTimeout)
-												}
-
-												tagTimeout = setTimeout(() => {
-													tag = displayedTag
-													console.log(tag)
-												}, 1000)
-											}}
-										/>
-									</div></Label
-								>
-							{/key}
-						{:else if filterBy === 'label'}
-							{#key label}
-								<Label label="Label">
-									<div class="relative w-full">
-										{#if label}
-											<button
-												class="absolute top-2 right-2 z-50"
-												onclick={() => {
-													label = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{/if}
-
-										<!-- svelte-ignore a11y_autofocus -->
-										<input
-											autofocus
-											type="text"
-											class="!h-[32px] py-1 !text-xs !w-80"
-											bind:value={displayedLabel}
-											onkeydown={(e) => {
-												if (labelTimeout) {
-													clearTimeout(labelTimeout)
-												}
-
-												labelTimeout = setTimeout(() => {
-													label = displayedLabel
-												}, 1000)
-											}}
-										/>
-									</div></Label
-								>
-							{/key}
-						{:else if filterBy === 'concurrencyKey'}
-							{#key concurrencyKey}
-								<Label label="Concurrency key">
-									<div class="relative w-full">
-										{#if concurrencyKey}
-											<button
-												class="absolute top-2 right-2 z-50"
-												onclick={() => {
-													concurrencyKey = null
-													// dispatch('reset')
-												}}
-											>
-												<X size={14} />
-											</button>
-										{/if}
-
-										<!-- svelte-ignore a11y_autofocus -->
-										<input
-											autofocus
-											type="text"
-											class="!h-[32px] py-1 !text-xs !w-80"
-											bind:value={displayedConcurrencyKey}
-											onkeydown={(e) => {
-												if (concurrencyKeyTimeout) {
-													clearTimeout(concurrencyKeyTimeout)
-												}
-
-												concurrencyKeyTimeout = setTimeout(() => {
-													concurrencyKey = displayedConcurrencyKey
-												}, 1000)
-											}}
-										/>
-									</div>
-								</Label>
-							{/key}
-						{:else if filterBy === 'worker'}
-							{#key worker}
-								<Label label="worker">
-									<div class="relative w-full">
-										{#if concurrencyKey}
-											<button
-												class="absolute top-2 right-2 z-50"
-												onclick={() => {
-													worker = null
-													// dispatch('reset')
-												}}
-											>
-												<X size={14} />
-											</button>
-										{/if}
-
-										<!-- svelte-ignore a11y_autofocus -->
-										<input
-											autofocus
-											type="text"
-											class="!h-[32px] py-1 !text-xs !w-80"
-											bind:value={displayedWorker}
-											onkeydown={(e) => {
-												if (workerTimeout) {
-													clearTimeout(workerTimeout)
-												}
-
-												workerTimeout = setTimeout(() => {
-													worker = displayedWorker
-												}, 1000)
-											}}
-										/>
-									</div>
-								</Label>
-							{/key}
-						{/if}
-
-						{#if filterBy === 'tag' || filterBy === 'label' || filterBy === 'worker'}
-							<Toggle
-								bind:checked={allowWildcards}
-								size="2xs"
-								options={{ right: 'wildcards (*)', title: 'allow wildcards (*)' }}
-							></Toggle>
-						{/if}
-						<Label label="Kind">
-							<ToggleButtonGroup bind:selected={jobKindsCat}>
-								{#snippet children({ item })}
-									<ToggleButton value="all" label="All" {item} />
-									<ToggleButton
-										value="runs"
-										label="Runs"
-										showTooltipIcon
-										tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
-										{item}
-									/>
-									<ToggleButton
-										value="previews"
-										label="Previews"
-										showTooltipIcon
-										tooltip="Previews are jobs that have been started in the editor as 'Tests'"
-										{item}
-									/>
-									<ToggleButton
-										value="dependencies"
-										label="Deps"
-										showTooltipIcon
-										tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
-										{item}
-									/>
-									<ToggleButton
-										value="deploymentcallbacks"
-										label="Sync"
-										showTooltipIcon
-										tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
-										{item}
-									/>
-								{/snippet}
-							</ToggleButtonGroup>
-						</Label>
-
-						<Label label="Status">
-							<ToggleButtonGroup
-								selected={success ?? 'all'}
-								on:selected={({ detail }) => (success = detail === 'all' ? null : detail)}
-							>
-								{#snippet children({ item })}
-									<ToggleButton value={'all'} label="All" {item} />
-									<ToggleButton
-										value={'running'}
-										label="Running"
-										class="whitespace-nowrap"
-										{item}
-									/>
-									<ToggleButton
-										value={'success'}
-										label="Success"
-										class="whitespace-nowrap"
-										{item}
-									/>
-									<ToggleButton
-										value={'failure'}
-										label="Failure"
-										class="whitespace-nowrap"
-										{item}
-									/>
-								{/snippet}
-							</ToggleButtonGroup>
-						</Label>
-					{/if}
-
-					<Label label="Show skipped flows">
-						<span class="text-2xs text-secondary">
-							Skipped flows are flows that did an early break
-						</span>
-						<div class="flex flex-row gap-1 items-center">
-							<Toggle size="sm" bind:checked={showSkipped} />
-						</div>
-					</Label>
-
-					<Label label="Filter by trigger kind">
-						<span class="text-2xs text-secondary">
-							{`Filter by what kind of trigger started the run.`}
-						</span>
-						<Select
-							items={jobTriggerKinds.map((value) => ({
-								label: triggerDisplayNamesMap[value],
-								value
-							}))}
-							bind:value={() => jobTriggerKind ?? undefined, (v) => (jobTriggerKind = v ?? null)}
-							clearable
-						/>
-					</Label>
-
-					<Label label="Filter by args">
-						<span class="text-2xs text-secondary">
-							{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
-						</span>
-						<JsonEditor bind:error={argError} bind:code={copyArgFilter} />
-					</Label>
-					<Label label="Filter by result">
-						<span class="text-2xs text-secondary">
-							{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
-						</span>
-						<JsonEditor bind:error={resultError} bind:code={copyResultFilter} />
-					</Label>
-				</div>
-			</Section>
-		{/snippet}
-	</Popover>
-</RunOption>