UI: Add per-searchbar 'Match anywhere' toggle for substring search - #66015

Merged
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle
Apr 29, 2026
Merged

UI: Add per-searchbar 'Match anywhere' toggle for substring search#66015
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle

Conversation

@pierrejeambrun

@pierrejeambrunpierrejeambrun commented Apr 28, 2026

Copy link
Copy Markdown
Member

Follow-up to #64963.

Since #64963 the UI uses prefix-pattern search (*_prefix_pattern) on list endpoints, which is index-friendly and stays fast on large deployments. Some users still rely on the old substring (*_pattern) behavior — this PR brings it back as an opt-in, per-searchbar toggle.

How it works

A small regex-icon button (.*) sits next to every searchbar / inside every text-pattern filter pill. Clicking it flips the API call from *_prefix_pattern to *_pattern. The state is per-searchbar in localStorage (advanced_search-<id>), intentionally not in the URL — shared links default to fast prefix mode and the recipient can opt back in if they need substring search themselves.

The toggle uses onMouseDown + preventDefault so clicking it inside a FilterPill keeps focus on the input and the pill stays open.

A persistent regex indicator is rendered next to the value on the collapsed pill so it's clear which mode each filter is in after a reload.

Where it's wired

SearchBar — Pools, Connections, Variables, Assets, Asset events (per-task), Dags list.

FilterBar text pills — flagged via a new supportsAdvancedSearch?: boolean on FilterConfig; consuming pages just use useAdvancedSearchArg({ storageKey, value, prefixApiKey, patternApiKey }) to spread the right field into their query call. Wired on TaskInstances, DagRuns, Events, XCom, HITLTaskInstances.

Skipped: consuming_asset_pattern (no prefix variant exists on the API) and useRequiredActionTabs (internal tab-rendering query, not a user search).

Screenshots

Toggle inside the pill is now a flush rounded addon mirroring the Pool: label on the left — gray fill (off) ↔ brand fill (on). Drag the PNGs in here in the order below.

SearchBar — toggle off (default), tooltip, toggle on:
01-searchbar-off

02-searchbar-tooltip03-searchbar-on

FilterBar pill — editing with toggle off, editing with toggle on (toggle is now flush addon, pill stays open!), collapsed pill showing the regex indicator:

04-filterpill-editing-off05-filterpill-editing-on06-filterpill-collapsed-on
Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.7)

Generated-by: Claude Code (Opus 4.7) following the guidelines

Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
Comment threadairflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx Outdated
@bbovenzi

Copy link
Copy Markdown
Contributor

Also, I think it would be helpful to include it in the input group like in the screenshot how Pool is included in the input group and not a separate button.

Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
@pierrejeambrun

Copy link
Copy Markdown
MemberAuthor

Done

Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
pierrejeambrun added a commit to astronomer/airflow that referenced this pull request Apr 28, 2026
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
@bbovenzibbovenzi added this to the Airflow 3.2.2 milestone Apr 29, 2026
@bbovenzi
bbovenzi merged commit d748835 into apache:mainApr 29, 2026
81 checks passed
@bbovenzi
bbovenzi deleted the advanced-search-toggle branch April 29, 2026 15:30
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

StatusBranchResult
v3-2-testPR Link

seruman pushed a commit to seruman/airflow that referenced this pull request Apr 30, 2026
…pache#66015)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
pierrejeambrun added a commit that referenced this pull request Apr 30, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
@dheerajturaga

Copy link
Copy Markdown
Member

Awesome thanks!!

vatsrahul1001 pushed a commit that referenced this pull request May 20, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@pierrejeambrun@bbovenzi@dheerajturaga
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

UI: Add per-searchbar 'Match anywhere' toggle for substring search - #66015

Merged
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle
Apr 29, 2026
Merged

UI: Add per-searchbar 'Match anywhere' toggle for substring search#66015
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle

Conversation

@pierrejeambrun

@pierrejeambrunpierrejeambrun commented Apr 28, 2026

Copy link
Copy Markdown
Member

Follow-up to #64963.

Since #64963 the UI uses prefix-pattern search (*_prefix_pattern) on list endpoints, which is index-friendly and stays fast on large deployments. Some users still rely on the old substring (*_pattern) behavior — this PR brings it back as an opt-in, per-searchbar toggle.

How it works

A small regex-icon button (.*) sits next to every searchbar / inside every text-pattern filter pill. Clicking it flips the API call from *_prefix_pattern to *_pattern. The state is per-searchbar in localStorage (advanced_search-<id>), intentionally not in the URL — shared links default to fast prefix mode and the recipient can opt back in if they need substring search themselves.

The toggle uses onMouseDown + preventDefault so clicking it inside a FilterPill keeps focus on the input and the pill stays open.

A persistent regex indicator is rendered next to the value on the collapsed pill so it's clear which mode each filter is in after a reload.

Where it's wired

SearchBar — Pools, Connections, Variables, Assets, Asset events (per-task), Dags list.

FilterBar text pills — flagged via a new supportsAdvancedSearch?: boolean on FilterConfig; consuming pages just use useAdvancedSearchArg({ storageKey, value, prefixApiKey, patternApiKey }) to spread the right field into their query call. Wired on TaskInstances, DagRuns, Events, XCom, HITLTaskInstances.

Skipped: consuming_asset_pattern (no prefix variant exists on the API) and useRequiredActionTabs (internal tab-rendering query, not a user search).

Screenshots

Toggle inside the pill is now a flush rounded addon mirroring the Pool: label on the left — gray fill (off) ↔ brand fill (on). Drag the PNGs in here in the order below.

SearchBar — toggle off (default), tooltip, toggle on:
01-searchbar-off

02-searchbar-tooltip03-searchbar-on

FilterBar pill — editing with toggle off, editing with toggle on (toggle is now flush addon, pill stays open!), collapsed pill showing the regex indicator:

04-filterpill-editing-off05-filterpill-editing-on06-filterpill-collapsed-on
Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.7)

Generated-by: Claude Code (Opus 4.7) following the guidelines

Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
Comment threadairflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx Outdated
@bbovenzi

Copy link
Copy Markdown
Contributor

Also, I think it would be helpful to include it in the input group like in the screenshot how Pool is included in the input group and not a separate button.

Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
@pierrejeambrun

Copy link
Copy Markdown
MemberAuthor

Done

Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
pierrejeambrun added a commit to astronomer/airflow that referenced this pull request Apr 28, 2026
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
@bbovenzibbovenzi added this to the Airflow 3.2.2 milestone Apr 29, 2026
@bbovenzi
bbovenzi merged commit d748835 into apache:mainApr 29, 2026
81 checks passed
@bbovenzi
bbovenzi deleted the advanced-search-toggle branch April 29, 2026 15:30
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

StatusBranchResult
v3-2-testPR Link

seruman pushed a commit to seruman/airflow that referenced this pull request Apr 30, 2026
…pache#66015)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
pierrejeambrun added a commit that referenced this pull request Apr 30, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
@dheerajturaga

Copy link
Copy Markdown
Member

Awesome thanks!!

vatsrahul1001 pushed a commit that referenced this pull request May 20, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@pierrejeambrun@bbovenzi@dheerajturaga
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

UI: Add per-searchbar 'Match anywhere' toggle for substring search - #66015

Merged
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle
Apr 29, 2026
Merged

UI: Add per-searchbar 'Match anywhere' toggle for substring search#66015
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle

Conversation

@pierrejeambrun

@pierrejeambrunpierrejeambrun commented Apr 28, 2026

Copy link
Copy Markdown
Member

Follow-up to #64963.

Since #64963 the UI uses prefix-pattern search (*_prefix_pattern) on list endpoints, which is index-friendly and stays fast on large deployments. Some users still rely on the old substring (*_pattern) behavior — this PR brings it back as an opt-in, per-searchbar toggle.

How it works

A small regex-icon button (.*) sits next to every searchbar / inside every text-pattern filter pill. Clicking it flips the API call from *_prefix_pattern to *_pattern. The state is per-searchbar in localStorage (advanced_search-<id>), intentionally not in the URL — shared links default to fast prefix mode and the recipient can opt back in if they need substring search themselves.

The toggle uses onMouseDown + preventDefault so clicking it inside a FilterPill keeps focus on the input and the pill stays open.

A persistent regex indicator is rendered next to the value on the collapsed pill so it's clear which mode each filter is in after a reload.

Where it's wired

SearchBar — Pools, Connections, Variables, Assets, Asset events (per-task), Dags list.

FilterBar text pills — flagged via a new supportsAdvancedSearch?: boolean on FilterConfig; consuming pages just use useAdvancedSearchArg({ storageKey, value, prefixApiKey, patternApiKey }) to spread the right field into their query call. Wired on TaskInstances, DagRuns, Events, XCom, HITLTaskInstances.

Skipped: consuming_asset_pattern (no prefix variant exists on the API) and useRequiredActionTabs (internal tab-rendering query, not a user search).

Screenshots

Toggle inside the pill is now a flush rounded addon mirroring the Pool: label on the left — gray fill (off) ↔ brand fill (on). Drag the PNGs in here in the order below.

SearchBar — toggle off (default), tooltip, toggle on:
01-searchbar-off

02-searchbar-tooltip03-searchbar-on

FilterBar pill — editing with toggle off, editing with toggle on (toggle is now flush addon, pill stays open!), collapsed pill showing the regex indicator:

04-filterpill-editing-off05-filterpill-editing-on06-filterpill-collapsed-on
Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.7)

Generated-by: Claude Code (Opus 4.7) following the guidelines

Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
Comment threadairflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx Outdated
@bbovenzi

Copy link
Copy Markdown
Contributor

Also, I think it would be helpful to include it in the input group like in the screenshot how Pool is included in the input group and not a separate button.

Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
@pierrejeambrun

Copy link
Copy Markdown
MemberAuthor

Done

Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
pierrejeambrun added a commit to astronomer/airflow that referenced this pull request Apr 28, 2026
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
@bbovenzibbovenzi added this to the Airflow 3.2.2 milestone Apr 29, 2026
@bbovenzi
bbovenzi merged commit d748835 into apache:mainApr 29, 2026
81 checks passed
@bbovenzi
bbovenzi deleted the advanced-search-toggle branch April 29, 2026 15:30
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

StatusBranchResult
v3-2-testPR Link

seruman pushed a commit to seruman/airflow that referenced this pull request Apr 30, 2026
…pache#66015)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
pierrejeambrun added a commit that referenced this pull request Apr 30, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
@dheerajturaga

Copy link
Copy Markdown
Member

Awesome thanks!!

vatsrahul1001 pushed a commit that referenced this pull request May 20, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@pierrejeambrun@bbovenzi@dheerajturaga
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

UI: Add per-searchbar 'Match anywhere' toggle for substring search - #66015

Merged
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle
Apr 29, 2026
Merged

UI: Add per-searchbar 'Match anywhere' toggle for substring search#66015
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle

Conversation

@pierrejeambrun

@pierrejeambrunpierrejeambrun commented Apr 28, 2026

Copy link
Copy Markdown
Member

Follow-up to #64963.

Since #64963 the UI uses prefix-pattern search (*_prefix_pattern) on list endpoints, which is index-friendly and stays fast on large deployments. Some users still rely on the old substring (*_pattern) behavior — this PR brings it back as an opt-in, per-searchbar toggle.

How it works

A small regex-icon button (.*) sits next to every searchbar / inside every text-pattern filter pill. Clicking it flips the API call from *_prefix_pattern to *_pattern. The state is per-searchbar in localStorage (advanced_search-<id>), intentionally not in the URL — shared links default to fast prefix mode and the recipient can opt back in if they need substring search themselves.

The toggle uses onMouseDown + preventDefault so clicking it inside a FilterPill keeps focus on the input and the pill stays open.

A persistent regex indicator is rendered next to the value on the collapsed pill so it's clear which mode each filter is in after a reload.

Where it's wired

SearchBar — Pools, Connections, Variables, Assets, Asset events (per-task), Dags list.

FilterBar text pills — flagged via a new supportsAdvancedSearch?: boolean on FilterConfig; consuming pages just use useAdvancedSearchArg({ storageKey, value, prefixApiKey, patternApiKey }) to spread the right field into their query call. Wired on TaskInstances, DagRuns, Events, XCom, HITLTaskInstances.

Skipped: consuming_asset_pattern (no prefix variant exists on the API) and useRequiredActionTabs (internal tab-rendering query, not a user search).

Screenshots

Toggle inside the pill is now a flush rounded addon mirroring the Pool: label on the left — gray fill (off) ↔ brand fill (on). Drag the PNGs in here in the order below.

SearchBar — toggle off (default), tooltip, toggle on:
01-searchbar-off

02-searchbar-tooltip03-searchbar-on

FilterBar pill — editing with toggle off, editing with toggle on (toggle is now flush addon, pill stays open!), collapsed pill showing the regex indicator:

04-filterpill-editing-off05-filterpill-editing-on06-filterpill-collapsed-on
Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.7)

Generated-by: Claude Code (Opus 4.7) following the guidelines

Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
Comment threadairflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx Outdated
@bbovenzi

Copy link
Copy Markdown
Contributor

Also, I think it would be helpful to include it in the input group like in the screenshot how Pool is included in the input group and not a separate button.

Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
@pierrejeambrun

Copy link
Copy Markdown
MemberAuthor

Done

Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
pierrejeambrun added a commit to astronomer/airflow that referenced this pull request Apr 28, 2026
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
@bbovenzibbovenzi added this to the Airflow 3.2.2 milestone Apr 29, 2026
@bbovenzi
bbovenzi merged commit d748835 into apache:mainApr 29, 2026
81 checks passed
@bbovenzi
bbovenzi deleted the advanced-search-toggle branch April 29, 2026 15:30
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

StatusBranchResult
v3-2-testPR Link

seruman pushed a commit to seruman/airflow that referenced this pull request Apr 30, 2026
…pache#66015)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
pierrejeambrun added a commit that referenced this pull request Apr 30, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
@dheerajturaga

Copy link
Copy Markdown
Member

Awesome thanks!!

vatsrahul1001 pushed a commit that referenced this pull request May 20, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@pierrejeambrun@bbovenzi@dheerajturaga
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

UI: Add per-searchbar 'Match anywhere' toggle for substring search - #66015

Merged
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle
Apr 29, 2026
Merged

UI: Add per-searchbar 'Match anywhere' toggle for substring search#66015
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle

Conversation

@pierrejeambrun

@pierrejeambrunpierrejeambrun commented Apr 28, 2026

Copy link
Copy Markdown
Member

Follow-up to #64963.

Since #64963 the UI uses prefix-pattern search (*_prefix_pattern) on list endpoints, which is index-friendly and stays fast on large deployments. Some users still rely on the old substring (*_pattern) behavior — this PR brings it back as an opt-in, per-searchbar toggle.

How it works

A small regex-icon button (.*) sits next to every searchbar / inside every text-pattern filter pill. Clicking it flips the API call from *_prefix_pattern to *_pattern. The state is per-searchbar in localStorage (advanced_search-<id>), intentionally not in the URL — shared links default to fast prefix mode and the recipient can opt back in if they need substring search themselves.

The toggle uses onMouseDown + preventDefault so clicking it inside a FilterPill keeps focus on the input and the pill stays open.

A persistent regex indicator is rendered next to the value on the collapsed pill so it's clear which mode each filter is in after a reload.

Where it's wired

SearchBar — Pools, Connections, Variables, Assets, Asset events (per-task), Dags list.

FilterBar text pills — flagged via a new supportsAdvancedSearch?: boolean on FilterConfig; consuming pages just use useAdvancedSearchArg({ storageKey, value, prefixApiKey, patternApiKey }) to spread the right field into their query call. Wired on TaskInstances, DagRuns, Events, XCom, HITLTaskInstances.

Skipped: consuming_asset_pattern (no prefix variant exists on the API) and useRequiredActionTabs (internal tab-rendering query, not a user search).

Screenshots

Toggle inside the pill is now a flush rounded addon mirroring the Pool: label on the left — gray fill (off) ↔ brand fill (on). Drag the PNGs in here in the order below.

SearchBar — toggle off (default), tooltip, toggle on:
01-searchbar-off

02-searchbar-tooltip03-searchbar-on

FilterBar pill — editing with toggle off, editing with toggle on (toggle is now flush addon, pill stays open!), collapsed pill showing the regex indicator:

04-filterpill-editing-off05-filterpill-editing-on06-filterpill-collapsed-on
Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.7)

Generated-by: Claude Code (Opus 4.7) following the guidelines

Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
Comment threadairflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx Outdated
@bbovenzi

Copy link
Copy Markdown
Contributor

Also, I think it would be helpful to include it in the input group like in the screenshot how Pool is included in the input group and not a separate button.

Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
@pierrejeambrun

Copy link
Copy Markdown
MemberAuthor

Done

Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
pierrejeambrun added a commit to astronomer/airflow that referenced this pull request Apr 28, 2026
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
@bbovenzibbovenzi added this to the Airflow 3.2.2 milestone Apr 29, 2026
@bbovenzi
bbovenzi merged commit d748835 into apache:mainApr 29, 2026
81 checks passed
@bbovenzi
bbovenzi deleted the advanced-search-toggle branch April 29, 2026 15:30
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

StatusBranchResult
v3-2-testPR Link

seruman pushed a commit to seruman/airflow that referenced this pull request Apr 30, 2026
…pache#66015)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
pierrejeambrun added a commit that referenced this pull request Apr 30, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
@dheerajturaga

Copy link
Copy Markdown
Member

Awesome thanks!!

vatsrahul1001 pushed a commit that referenced this pull request May 20, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@pierrejeambrun@bbovenzi@dheerajturaga
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

UI: Add per-searchbar 'Match anywhere' toggle for substring search - #66015

Merged
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle
Apr 29, 2026
Merged

UI: Add per-searchbar 'Match anywhere' toggle for substring search#66015
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle

Conversation

@pierrejeambrun

@pierrejeambrunpierrejeambrun commented Apr 28, 2026

Copy link
Copy Markdown
Member

Follow-up to #64963.

Since #64963 the UI uses prefix-pattern search (*_prefix_pattern) on list endpoints, which is index-friendly and stays fast on large deployments. Some users still rely on the old substring (*_pattern) behavior — this PR brings it back as an opt-in, per-searchbar toggle.

How it works

A small regex-icon button (.*) sits next to every searchbar / inside every text-pattern filter pill. Clicking it flips the API call from *_prefix_pattern to *_pattern. The state is per-searchbar in localStorage (advanced_search-<id>), intentionally not in the URL — shared links default to fast prefix mode and the recipient can opt back in if they need substring search themselves.

The toggle uses onMouseDown + preventDefault so clicking it inside a FilterPill keeps focus on the input and the pill stays open.

A persistent regex indicator is rendered next to the value on the collapsed pill so it's clear which mode each filter is in after a reload.

Where it's wired

SearchBar — Pools, Connections, Variables, Assets, Asset events (per-task), Dags list.

FilterBar text pills — flagged via a new supportsAdvancedSearch?: boolean on FilterConfig; consuming pages just use useAdvancedSearchArg({ storageKey, value, prefixApiKey, patternApiKey }) to spread the right field into their query call. Wired on TaskInstances, DagRuns, Events, XCom, HITLTaskInstances.

Skipped: consuming_asset_pattern (no prefix variant exists on the API) and useRequiredActionTabs (internal tab-rendering query, not a user search).

Screenshots

Toggle inside the pill is now a flush rounded addon mirroring the Pool: label on the left — gray fill (off) ↔ brand fill (on). Drag the PNGs in here in the order below.

SearchBar — toggle off (default), tooltip, toggle on:
01-searchbar-off

02-searchbar-tooltip03-searchbar-on

FilterBar pill — editing with toggle off, editing with toggle on (toggle is now flush addon, pill stays open!), collapsed pill showing the regex indicator:

04-filterpill-editing-off05-filterpill-editing-on06-filterpill-collapsed-on
Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.7)

Generated-by: Claude Code (Opus 4.7) following the guidelines

Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
Comment threadairflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx Outdated
@bbovenzi

Copy link
Copy Markdown
Contributor

Also, I think it would be helpful to include it in the input group like in the screenshot how Pool is included in the input group and not a separate button.

Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
@pierrejeambrun

Copy link
Copy Markdown
MemberAuthor

Done

Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
pierrejeambrun added a commit to astronomer/airflow that referenced this pull request Apr 28, 2026
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
@bbovenzibbovenzi added this to the Airflow 3.2.2 milestone Apr 29, 2026
@bbovenzi
bbovenzi merged commit d748835 into apache:mainApr 29, 2026
81 checks passed
@bbovenzi
bbovenzi deleted the advanced-search-toggle branch April 29, 2026 15:30
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

StatusBranchResult
v3-2-testPR Link

seruman pushed a commit to seruman/airflow that referenced this pull request Apr 30, 2026
…pache#66015)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
pierrejeambrun added a commit that referenced this pull request Apr 30, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
@dheerajturaga

Copy link
Copy Markdown
Member

Awesome thanks!!

vatsrahul1001 pushed a commit that referenced this pull request May 20, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@pierrejeambrun@bbovenzi@dheerajturaga
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

UI: Add per-searchbar 'Match anywhere' toggle for substring search - #66015

Merged
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle
Apr 29, 2026
Merged

UI: Add per-searchbar 'Match anywhere' toggle for substring search#66015
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle

Conversation

@pierrejeambrun

@pierrejeambrunpierrejeambrun commented Apr 28, 2026

Copy link
Copy Markdown
Member

Follow-up to #64963.

Since #64963 the UI uses prefix-pattern search (*_prefix_pattern) on list endpoints, which is index-friendly and stays fast on large deployments. Some users still rely on the old substring (*_pattern) behavior — this PR brings it back as an opt-in, per-searchbar toggle.

How it works

A small regex-icon button (.*) sits next to every searchbar / inside every text-pattern filter pill. Clicking it flips the API call from *_prefix_pattern to *_pattern. The state is per-searchbar in localStorage (advanced_search-<id>), intentionally not in the URL — shared links default to fast prefix mode and the recipient can opt back in if they need substring search themselves.

The toggle uses onMouseDown + preventDefault so clicking it inside a FilterPill keeps focus on the input and the pill stays open.

A persistent regex indicator is rendered next to the value on the collapsed pill so it's clear which mode each filter is in after a reload.

Where it's wired

SearchBar — Pools, Connections, Variables, Assets, Asset events (per-task), Dags list.

FilterBar text pills — flagged via a new supportsAdvancedSearch?: boolean on FilterConfig; consuming pages just use useAdvancedSearchArg({ storageKey, value, prefixApiKey, patternApiKey }) to spread the right field into their query call. Wired on TaskInstances, DagRuns, Events, XCom, HITLTaskInstances.

Skipped: consuming_asset_pattern (no prefix variant exists on the API) and useRequiredActionTabs (internal tab-rendering query, not a user search).

Screenshots

Toggle inside the pill is now a flush rounded addon mirroring the Pool: label on the left — gray fill (off) ↔ brand fill (on). Drag the PNGs in here in the order below.

SearchBar — toggle off (default), tooltip, toggle on:
01-searchbar-off

02-searchbar-tooltip03-searchbar-on

FilterBar pill — editing with toggle off, editing with toggle on (toggle is now flush addon, pill stays open!), collapsed pill showing the regex indicator:

04-filterpill-editing-off05-filterpill-editing-on06-filterpill-collapsed-on
Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.7)

Generated-by: Claude Code (Opus 4.7) following the guidelines

Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
Comment threadairflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx Outdated
@bbovenzi

Copy link
Copy Markdown
Contributor

Also, I think it would be helpful to include it in the input group like in the screenshot how Pool is included in the input group and not a separate button.

Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
@pierrejeambrun

Copy link
Copy Markdown
MemberAuthor

Done

Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
pierrejeambrun added a commit to astronomer/airflow that referenced this pull request Apr 28, 2026
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
@bbovenzibbovenzi added this to the Airflow 3.2.2 milestone Apr 29, 2026
@bbovenzi
bbovenzi merged commit d748835 into apache:mainApr 29, 2026
81 checks passed
@bbovenzi
bbovenzi deleted the advanced-search-toggle branch April 29, 2026 15:30
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

StatusBranchResult
v3-2-testPR Link

seruman pushed a commit to seruman/airflow that referenced this pull request Apr 30, 2026
…pache#66015)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
pierrejeambrun added a commit that referenced this pull request Apr 30, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
@dheerajturaga

Copy link
Copy Markdown
Member

Awesome thanks!!

vatsrahul1001 pushed a commit that referenced this pull request May 20, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@pierrejeambrun@bbovenzi@dheerajturaga
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

UI: Add per-searchbar 'Match anywhere' toggle for substring search - #66015

Merged
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle
Apr 29, 2026
Merged

UI: Add per-searchbar 'Match anywhere' toggle for substring search#66015
bbovenzi merged 5 commits into
apache:mainfrom
astronomer:advanced-search-toggle

Conversation

@pierrejeambrun

@pierrejeambrunpierrejeambrun commented Apr 28, 2026

Copy link
Copy Markdown
Member

Follow-up to #64963.

Since #64963 the UI uses prefix-pattern search (*_prefix_pattern) on list endpoints, which is index-friendly and stays fast on large deployments. Some users still rely on the old substring (*_pattern) behavior — this PR brings it back as an opt-in, per-searchbar toggle.

How it works

A small regex-icon button (.*) sits next to every searchbar / inside every text-pattern filter pill. Clicking it flips the API call from *_prefix_pattern to *_pattern. The state is per-searchbar in localStorage (advanced_search-<id>), intentionally not in the URL — shared links default to fast prefix mode and the recipient can opt back in if they need substring search themselves.

The toggle uses onMouseDown + preventDefault so clicking it inside a FilterPill keeps focus on the input and the pill stays open.

A persistent regex indicator is rendered next to the value on the collapsed pill so it's clear which mode each filter is in after a reload.

Where it's wired

SearchBar — Pools, Connections, Variables, Assets, Asset events (per-task), Dags list.

FilterBar text pills — flagged via a new supportsAdvancedSearch?: boolean on FilterConfig; consuming pages just use useAdvancedSearchArg({ storageKey, value, prefixApiKey, patternApiKey }) to spread the right field into their query call. Wired on TaskInstances, DagRuns, Events, XCom, HITLTaskInstances.

Skipped: consuming_asset_pattern (no prefix variant exists on the API) and useRequiredActionTabs (internal tab-rendering query, not a user search).

Screenshots

Toggle inside the pill is now a flush rounded addon mirroring the Pool: label on the left — gray fill (off) ↔ brand fill (on). Drag the PNGs in here in the order below.

SearchBar — toggle off (default), tooltip, toggle on:
01-searchbar-off

02-searchbar-tooltip03-searchbar-on

FilterBar pill — editing with toggle off, editing with toggle on (toggle is now flush addon, pill stays open!), collapsed pill showing the regex indicator:

04-filterpill-editing-off05-filterpill-editing-on06-filterpill-collapsed-on
Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.7)

Generated-by: Claude Code (Opus 4.7) following the guidelines

Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
Comment threadairflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx Outdated
@bbovenzi

Copy link
Copy Markdown
Contributor

Also, I think it would be helpful to include it in the input group like in the screenshot how Pool is included in the input group and not a separate button.

Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
@pierrejeambrun

Copy link
Copy Markdown
MemberAuthor

Done

Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
pierrejeambrun added a commit to astronomer/airflow that referenced this pull request Apr 28, 2026
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
@bbovenzibbovenzi added this to the Airflow 3.2.2 milestone Apr 29, 2026
@bbovenzi
bbovenzi merged commit d748835 into apache:mainApr 29, 2026
81 checks passed
@bbovenzi
bbovenzi deleted the advanced-search-toggle branch April 29, 2026 15:30
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

StatusBranchResult
v3-2-testPR Link

seruman pushed a commit to seruman/airflow that referenced this pull request Apr 30, 2026
…pache#66015)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to apache#64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references apache#64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references apache#66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
pierrejeambrun added a commit that referenced this pull request Apr 30, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
@dheerajturaga

Copy link
Copy Markdown
Member

Awesome thanks!!

vatsrahul1001 pushed a commit that referenced this pull request May 20, 2026
…ng search (#66015) (#66106)
* UI: Add per-searchbar 'Match anywhere' toggle for substring search
Follow-up to #64963. The default search now uses the new prefix patterns
(``*_prefix_pattern``) for index-friendly lookups. Users who relied on
the prior substring behavior (``*_pattern``) can opt back in per
searchbar via a small regex-icon toggle.
Both surfaces support it:
* ``SearchBar`` — page-level inputs on Pools, Connections, Variables,
Assets, Asset events, and Dags lists.
* ``FilterBar`` text pills — when ``supportsAdvancedSearch`` is set on
the FilterConfig, the pill renders the toggle inline while editing
and shows a regex indicator next to the value when collapsed. Wired
on TaskInstances, DagRuns, Events, XCom, and HITL.
URL is intentionally untouched: shared links default to fast prefix
mode; toggle state is per-searchbar in ``localStorage``
(``advanced_search-<id>``). The toggle uses ``onMouseDown`` +
``preventDefault`` so clicking it inside a FilterPill does not collapse
the pill.
* Move toggle inside FilterPill input, drop warning palette
Address review feedback:
- Move the advanced-search toggle from a sibling next to the InputWithAddon
to a real ``endAddon`` slot inside the same rounded box. The toggle now
sits flush on the right of the pill input, mirroring the "Pool:" label on
the left.
- Drop the ``colorPalette="warning"`` (orange) for the on state. Use the
brand palette in both states; outline = off, solid = on. The UI doesn't
use the warning palette much elsewhere, so this is more consistent.
- Move the toggle's tooltip strings (``search.advanced.{title,description}``)
from ``dags.json`` to ``common.json`` since the toggle renders on
admin-namespace pages too. Drop the ``toggleAriaLabel`` translation key —
aria-labels stay as plain English.
- Update ``64963.significant.rst`` to point users at this opt-in toggle as
the way back to the previous substring search behavior.
* Style FilterPill toggle as flush rounded addon
Make the toggle inside the FilterPill match the look of the "Pool:" label
on the left:
- Render as a Box-as-button with ``borderRightRadius="full"`` and
``alignSelf="stretch"`` so it fills the full pill height instead of
being a tiny crushed icon centered in white space.
- Off state matches the label palette (gray.muted bg). On state uses the
brand palette (solid bg, contrast fg).
- New ``variant="addon" | "standalone"`` on ``AdvancedSearchToggle``.
``standalone`` keeps the previous IconButton look used next to the
``SearchBar``; ``addon`` is the rounded right-side fill used inside
``InputWithAddon``.
- Drop the ``pr={1}`` wrapper around ``InputWithAddon``'s ``endAddon`` so
the addon abuts the pill's rounded edge.
* Rename newsfragment to 66015 and split into two parts
Move the user-visible note from `64963.significant.rst` to a new
`66015.significant.rst` (this PR's number) and split it into two
paragraphs:
- The first paragraph references #64963 — the change from full-match
`*_pattern` to index-friendly `*_prefix_pattern`.
- The second paragraph references #66015 — the new per-searchbar
"Match anywhere" toggle that lets users opt back into substring
search.
* Trim newsfragment, drop localStorage/URL detail
(cherry picked from commit d748835)
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@pierrejeambrun@bbovenzi@dheerajturaga