Wire up date filtering in the Search toolbar by blaipr · Pull Request #396 · ctrliq/ascender

blaipr · 2026-06-12T14:15:43Z

SUMMARY

qsConfig has accepted dateFields since the search system was built — every list's config defaults to ['modified', 'created'] — but the Search component never rendered date inputs (an explicit TODO at the fallback text input), so no list could offer date filtering.

Search now renders a date-specific control when the selected search column is one of the qsConfig dateFields:

a native type=date input plus an operator select — On or after → __gte, Before → __lt (deliberately the two operators whose semantics are exact when a date-only value meets the API's datetime fields; lte/gt on a bare date are off-by-a-day traps)
submit calls onSearch with the suffixed param (e.g. created__gte=2026-06-01); the existing leftover-chip handling displays and removes it, and getChipsByKey now labels such chips with the base column's name (Created (created__gte)) instead of the raw key

First consumers: the Jobs list gains Created and Finished search columns (finished added to its dateFields), and the Activity Stream gains a Time column on its timestamp field. Any other list opts in by adding a search column whose key is in its dateFields.

Closes the 'date filtering not wired up' entry from the UI known-gaps list.

ISSUE TYPE

New or Enhanced Feature

COMPONENT NAME

UI

ASCENDER VERSION

awx: 25.4.1.dev11+g51188f0

ADDITIONAL INFORMATION

Tests: six new Search tests (date control renders for date columns only; default-operator submit; operator switch changes the param; stale-value leak regression; Enter-key submit; plain input preserved otherwise) and a getChipsByKey labeling test.

npm --prefix awx/ui run lint     # clean
npm --prefix awx/ui run test     # 545 suites, 2864 passed (incl. 7 new)
npm --prefix awx/ui run build    # succeeds

New UI strings follow the catalog convention (English fallback until the next routine extract). Independent of all five open PRs — verified pairwise with git merge-tree.

qsConfig has accepted dateFields since the search system was built, and every list's config defaults to ['modified', 'created'], but the Search component never rendered date inputs - an explicit TODO at the fallback text input. Lists therefore could not offer date filtering at all. Search now renders a date-specific control when the selected search column is one of the qsConfig dateFields: a native date input plus an operator select (On or after -> __gte, Before -> __lt; the two operators whose semantics are exact for date-only values against the API's datetime fields). Submitting calls onSearch with the suffixed parameter (e.g. created__gte=2026-06-01), which the existing leftover chip handling already displays and removes; getChipsByKey now labels such chips with the base column's name ('Created (created__gte)') instead of the raw key. First consumers: the Jobs list gains Created and Finished search columns (finished added to its dateFields), and the Activity Stream gains a Time column on its timestamp field. Any other list can opt in by adding a search column whose key is in its dateFields. New strings follow the convention of awaiting the next routine catalog extract (English fallback meanwhile).

A value typed for one column survived switching to another. For date columns this was exploitable as an invalid API call: a controlled date input renders a stale text value as an empty-looking field while leaving the submit button enabled (searchValue is still truthy), so clicking submit sent e.g. created__gte=foo to the API. The value is now cleared on column switch; tests cover the leak scenario and Enter-key submission in the date input.

Inside the input group the operator select flex-grew to the full toolbar width, squeezing the date input to zero width - the control looked like a lone dropdown with no way to enter a date. Found in visual review; the select now keeps its natural width and the date input takes the remaining space.

Date filter values stay strings deliberately: they are submitted as ISO dates, which is exactly the format the API expects. Parsing them into Date objects would only force formatting them back.

Copilot

Pull request overview

This PR wires up date filtering in the UI search toolbar by rendering a date-specific control for columns whose keys are included in a list’s qsConfig.dateFields, and ensures resulting query params and filter chips are displayed with clearer labeling.

Changes:

Add a date operator + native date input UI in Search that submits __gte / __lt-suffixed params.
Improve filter chip labeling so date-operator params (e.g. created__gte) display using the base column name.
Enable date-search columns in initial consumers (Jobs list and Activity Stream) by adding appropriate search columns and dateFields.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
awx/ui/src/util/qs.js	Clarifies that date field values remain strings for API submission.
awx/ui/src/screens/ActivityStream/ActivityStream.js	Adds `timestamp` as a date-searchable field and exposes a Time search column.
awx/ui/src/components/Search/Search.js	Renders date operator + date input UI and submits `key__<op>` params.
awx/ui/src/components/Search/Search.test.js	Adds coverage for date control rendering and submission behavior.
awx/ui/src/components/Search/getChipsByKey.js	Labels operator-suffixed date params using the base column name when available.
awx/ui/src/components/Search/getChipsByKey.test.js	Tests chip labeling for `__gte` / `__lt` params.
awx/ui/src/components/JobList/JobList.js	Adds Created/Finished search columns and extends `dateFields` to include `finished`.

  const handleDropdownSelect = ({ target }) => {
    const { key: actualSearchKey } = columns.find(
      ({ name }) => name === target.innerText
    );
    onShowAdvancedSearch(actualSearchKey === 'advanced');
    setIsFilterDropdownOpen(false);
    setSearchKey(actualSearchKey);
+    // a value typed for the previous key must not leak into the next one -
+    // a controlled date input renders a stale text value as an empty field
+    // while leaving the submit button enabled, allowing a non-date value
+    // through to the API
+    setSearchValue('');
  };


isDateOperatorOpen survived column switches, so leaving a date column with the dropdown expanded and returning rendered it pre-opened. The flag now resets alongside the other dropdown state; test covers the switch-away-and-back path.

blaipr · 2026-06-12T17:38:12Z

Good catch, fixed: the operator dropdown state now resets when switching search columns, with a test for the switch-away-and-back case.

blaipr · 2026-06-13T00:04:49Z

Heads-up on i18n: this PR introduces four new msgids (On or after, Before, Date operator select, Date search input) that are deliberately not extracted into the .po catalogs yet. Extracting them with main's current lingui config would re-fold the whole catalog in the old wrapped style and conflict with the catalog rework on the language-updates branch (new lingui.config.ts, foldLength: 0 long-line format, de/it locales — see #391 (comment)). Once language-updates merges, an extract-strings run will pick these up in the new long-line format.

cigamit

Tested and working perfectly

blaipr added 4 commits June 12, 2026 16:15

Resolve the dateFields TODO in qs.js

5fdade9

Date filter values stay strings deliberately: they are submitted as ISO dates, which is exactly the format the API expects. Parsing them into Date objects would only force formatting them back.

blaipr mentioned this pull request Jun 12, 2026

Modernize the frontend toolchain: Lingui 6, ESLint 9 and @dagrejs/dagre #391

Merged

cigamit requested a review from Copilot June 12, 2026 17:17

Copilot started reviewing on behalf of cigamit June 12, 2026 17:18 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

This was referenced Jun 13, 2026

Migrate react-router usage to v6 compat APIs (bridge + all non-route-tree files) #392

Merged

Replace the ContentLoading spinner with skeleton placeholder lines #399

Merged

cigamit approved these changes Jun 13, 2026

View reviewed changes

cigamit merged commit 32b23bc into ctrliq:main Jun 13, 2026

cigamit self-assigned this Jun 18, 2026

Navigation Menu

Uh oh!

Wire up date filtering in the Search toolbar - #396

Wire up date filtering in the Search toolbar#396
cigamit merged 5 commits into
ctrliq:mainfrom
blaipr:feature/search-date-filtering

blaipr commented Jun 12, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

blaipr commented Jun 13, 2026

Uh oh!

cigamit left a comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

blaipr commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

ISSUE TYPE

COMPONENT NAME

ASCENDER VERSION

ADDITIONAL INFORMATION

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

blaipr commented Jun 12, 2026

Uh oh!

blaipr commented Jun 13, 2026

Uh oh!

cigamit left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

blaipr commented Jun 12, 2026 •

edited

Loading