Skip to content

Commit 57dda01

Browse files
ejsmithejsmith
authored
Clarify raw filter label (#2326)
1 parent 4776fde commit 57dda01

5 files changed

Lines changed: 57 additions & 31 deletions

File tree

‎src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/keyword-faceted-filter-builder.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
title?: string;
1010
}
1111
12-
const { priority = 0, title = 'Keyword' }: Props = $props();
12+
const { priority = 0, title = 'Raw Filter' }: Props = $props();
1313
1414
// Use getters to avoid state_referenced_locally warning - props are evaluated lazily
1515
const builder: FacetFilterBuilder<KeywordFilter> = {

‎src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/keyword-faceted-filter.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
66
import { KeywordFilter } from './models.svelte';
77
8-
let { filter, filterChanged, filterRemoved, title = 'Keyword', ...props }: FacetedFilterProps<KeywordFilter> = $props();
8+
let { filter, filterChanged, filterRemoved, title = 'Raw Filter', ...props }: FacetedFilterProps<KeywordFilter> = $props();
99
1010
function toggleHidden() {
1111
filter.hidden = !filter.hidden;

‎src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-actions.svelte‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,56 +4,73 @@
44
import Eraser from '@lucide/svelte/icons/eraser';
55
import Eye from '@lucide/svelte/icons/eye';
66
import EyeOff from '@lucide/svelte/icons/eye-off';
7+
import HelpCircle from '@lucide/svelte/icons/help-circle';
78
import Trash2 from '@lucide/svelte/icons/trash-2';
89
910
interface Props {
1011
clear: () => void;
12+
helpHref?: string;
13+
helpLabel?: string;
1114
hidden?: boolean;
1215
remove: () => void;
1316
showClear: boolean;
1417
toggleHidden?: () => void;
1518
}
1619
17-
let { clear, hidden = false, remove, showClear, toggleHidden }: Props = $props();
20+
let { clear, helpHref, helpLabel = 'Open filter documentation', hidden = false, remove, showClear, toggleHidden }: Props = $props();
1821
</script>
1922

20-
<div class="flex items-center justify-end gap-0.5 border-t px-2 py-1">
21-
{#if showClear}
23+
<div class="flex items-center justify-between gap-2 border-t px-2 py-1">
24+
{#if helpHref}
2225
<Tooltip.Root>
2326
<Tooltip.Trigger>
2427
{#snippet child({ props })}
25-
<Button {...props} variant="ghost" size="icon-sm" onclick={clear} aria-label="Clear filter value">
26-
<Eraser class="text-muted-foreground size-4" />
28+
<Button {...props} href={helpHref} target="_blank" rel="noopener noreferrer" variant="ghost" size="icon-sm" aria-label={helpLabel}>
29+
<HelpCircle class="text-muted-foreground size-4" />
2730
</Button>
2831
{/snippet}
2932
</Tooltip.Trigger>
30-
<Tooltip.Content>Clear value</Tooltip.Content>
33+
<Tooltip.Content>{helpLabel}</Tooltip.Content>
3134
</Tooltip.Root>
3235
{/if}
33-
{#if toggleHidden}
36+
<div class="ml-auto flex items-center gap-0.5">
37+
{#if showClear}
38+
<Tooltip.Root>
39+
<Tooltip.Trigger>
40+
{#snippet child({ props })}
41+
<Button {...props} variant="ghost" size="icon-sm" onclick={clear} aria-label="Clear filter value">
42+
<Eraser class="text-muted-foreground size-4" />
43+
</Button>
44+
{/snippet}
45+
</Tooltip.Trigger>
46+
<Tooltip.Content>Clear value</Tooltip.Content>
47+
</Tooltip.Root>
48+
{/if}
49+
{#if toggleHidden}
50+
<Tooltip.Root>
51+
<Tooltip.Trigger>
52+
{#snippet child({ props })}
53+
<Button {...props} variant="ghost" size="icon-sm" onclick={toggleHidden} aria-label={hidden ? 'Show filter' : 'Hide filter'}>
54+
{#if hidden}
55+
<Eye class="text-muted-foreground size-4" />
56+
{:else}
57+
<EyeOff class="text-muted-foreground size-4" />
58+
{/if}
59+
</Button>
60+
{/snippet}
61+
</Tooltip.Trigger>
62+
<Tooltip.Content>{hidden ? 'Show filter' : 'Hide filter'}</Tooltip.Content>
63+
</Tooltip.Root>
64+
{/if}
3465
<Tooltip.Root>
3566
<Tooltip.Trigger>
3667
{#snippet child({ props })}
37-
<Button {...props} variant="ghost" size="icon-sm" onclick={toggleHidden} aria-label={hidden ? 'Show filter' : 'Hide filter'}>
38-
{#if hidden}
39-
<Eye class="text-muted-foreground size-4" />
40-
{:else}
41-
<EyeOff class="text-muted-foreground size-4" />
42-
{/if}
68+
<Button {...props} variant="ghost" size="icon-sm" onclick={remove} aria-label="Remove filter">
69+
<Trash2 class="text-muted-foreground size-4" />
4370
</Button>
4471
{/snippet}
4572
</Tooltip.Trigger>
46-
<Tooltip.Content>{hidden ? 'Show filter' : 'Hide filter'}</Tooltip.Content>
73+
<Tooltip.Content>Remove filter</Tooltip.Content>
4774
</Tooltip.Root>
48-
{/if}
49-
<Tooltip.Root>
50-
<Tooltip.Trigger>
51-
{#snippet child({ props })}
52-
<Button {...props} variant="ghost" size="icon-sm" onclick={remove} aria-label="Remove filter">
53-
<Trash2 class="text-muted-foreground size-4" />
54-
</Button>
55-
{/snippet}
56-
</Tooltip.Trigger>
57-
<Tooltip.Content>Remove filter</Tooltip.Content>
58-
</Tooltip.Root>
75+
</div>
5976
</div>

‎src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-builder.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@
258258
{#if search}
259259
<Command.Group>
260260
<Command.Item value={CREATE_KEYWORD_FILTER_COMMAND_ITEM} onSelect={onCreateKeywordFromSearch}>
261-
Create Keyword Filter: "{search}"
261+
Create Raw Filter: "{search}"
262262
</Command.Item>
263263
</Command.Group>
264264
{/if}

‎src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-keyword.svelte‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
value?: string;
1717
}
1818
19-
let { changed, hidden = false, open = $bindable(), remove, title = 'Keyword', toggleHidden, value }: Props = $props();
19+
let { changed, hidden = false, open = $bindable(), remove, title = 'Raw Filter', toggleHidden, value }: Props = $props();
2020
2121
const DEBOUNCE_MS = 500;
22+
const FILTERING_DOCUMENTATION_HREF = 'https://exceptionless.com/docs/filtering-and-searching/';
2223
2324
// eslint-disable-next-line svelte/prefer-writable-derived
2425
let updatedValue = $state<string | undefined>();
@@ -111,7 +112,15 @@
111112
autocomplete="off"
112113
/>
113114
</div>
114-
<div id={`${title}-help`} class="sr-only">Type keywords. Enter applies, Escape cancels.</div>
115-
<FacetedFilter.Actions clear={onClearFilter} {hidden} {remove} showClear={!!updatedValue?.trim()} {toggleHidden} />
115+
<div id={`${title}-help`} class="sr-only">Type a raw filter expression. Enter applies, Escape cancels.</div>
116+
<FacetedFilter.Actions
117+
clear={onClearFilter}
118+
helpHref={FILTERING_DOCUMENTATION_HREF}
119+
helpLabel="Open filtering documentation"
120+
{hidden}
121+
{remove}
122+
showClear={!!updatedValue?.trim()}
123+
{toggleHidden}
124+
/>
116125
</Popover.Content>
117126
</Popover.Root>

0 commit comments

Comments
 (0)