Skip to content

Comments

feat(xo-stack): implement Query Builder#9488

Merged
OlivierFL merged 23 commits intomasterfrom
xostack/query-builder
Feb 23, 2026
Merged

feat(xo-stack): implement Query Builder#9488
OlivierFL merged 23 commits intomasterfrom
xostack/query-builder

Conversation

@OlivierFL
Copy link
Collaborator

@OlivierFL OlivierFL commented Feb 10, 2026

Description

Important notes:
- The Query Builder modal might not handle all the use cases for now, but as the code handles and uses Complex Matcher queries, it should work when entering complex queries manually in the search field
- The design has been adapted a lot compared to the original version in Figma to handle some use cases, it might change in future versions

Query Builder implementation:

  • The filters selected in the modal are translated into a Complex Matcher query used to filter results.
  • The query can also be entered directly in the search input, and if possible, it's translated back to filters when opening the modal.

Usage:

  • To add filters in the modal, create a schema to use in useQueryBuilderSchema or add new properties to filter on.
  • Applying the correct schema type for the related property type enables filtering with the correct operators (e.g. a "number" schema on a "number" field will create <, >, >= etc. operators in the select)
  • It's also possible to filter on properties that are not defined in the schema, using the any property filter in the modal (nested properties are also handled, such as boot:firmware:uefi)

Other features:

  • Add/Change from And to Or relations
  • Add/Convert filters to groups
  • Duplicate filters
  • Delete filters

Screenshots

image image image image

Capture vidéo du 20-02-2026 12_13_01

Checklist

  • Commit
    • Title follows commit conventions
    • Reference the relevant issue (Fixes #007, See xoa-support#42, See https://...)
    • If bug fix, add Introduced by
  • Changelog
    • If visible by XOA users, add changelog entry
    • Update "Packages to release" in CHANGELOG.unreleased.md
  • PR
    • If UI changes, add screenshots
    • If not finished or not tested, open as Draft

Review process

If you are an external contributor, you can skip this part. Simply create the pull request, and we'll get back to you as soon as possible.

This 2-passes review process aims to:

  • develop skills of junior reviewers
  • limit the workload for senior reviewers
  • limit the number of unnecessary changes by the author
  1. The author creates a PR.
  2. Review process:
    1. The author assigns the junior reviewer.
    2. The junior reviewer conducts their review:
      • Resolves their comments if they are addressed.
      • Adds comments if necessary or approves the PR.
    3. The junior reviewer assigns the senior reviewer.
    4. The senior reviewer conducts their review:
      • If there are no unresolved comments on the PR → merge.
      • Otherwise, we continue with 3.
  3. The author responds to comments and/or makes corrections, and we go back to 2.

Notes:

  1. The author can request a review at any time, even if the PR is still a Draft.
  2. In theory, there should not be more than one reviewer at a time.
  3. The author should not make any changes:
    • When a reviewer is assigned.
    • Between the junior and senior reviews.

@OlivierFL OlivierFL self-assigned this Feb 10, 2026
@OlivierFL OlivierFL force-pushed the xostack/query-builder branch 2 times, most recently from 9dfb0fe to 65aae96 Compare February 11, 2026 10:35
@OlivierFL OlivierFL force-pushed the xostack/query-builder branch 5 times, most recently from f6fed0e to 2b87bed Compare February 20, 2026 11:44
@OlivierFL OlivierFL force-pushed the xostack/query-builder branch 2 times, most recently from f786dd6 to cbdb043 Compare February 23, 2026 08:58
@OlivierFL OlivierFL marked this pull request as ready for review February 23, 2026 09:11
@OlivierFL OlivierFL force-pushed the xostack/query-builder branch 2 times, most recently from 5b95785 to 9df8928 Compare February 23, 2026 11:53
@OlivierFL OlivierFL changed the title [WIP] feat(xo-stack): implement Query Builder feat(xo-stack): implement Query Builder Feb 23, 2026
@OlivierFL OlivierFL force-pushed the xostack/query-builder branch from 17e660a to c92925c Compare February 23, 2026 14:26
…ndling

- Add TypeScript declarations for all exported classes and functions
- Improve property access with lodash get for nested properties
- Enhance TruthyProperty to handle objects and arrays
- Update ESLint config for TypeScript declaration files
- Bump package version to 1.1.0
Replace device-oriented breakpoint names (mobile/desktop/desktopLarge) with
size-based semantic names (small/medium/large) across the codebase.

This change improves clarity since screen size doesn't reliably indicate
device type - a tablet can have a "desktop" width, and responsive design
is fundamentally about viewport dimensions, not devices.

Changes:
- CSS custom media: --mobile → --small, --desktop → --medium
- Store properties: isMobile → isSmall, isDesktop → isMedium, isDesktopLarge → isLarge
- Add new composite breakpoints: isSmallOrMedium, isMediumOrLarge, --small-or-medium, --medium-or-large

Breakpoint values remain unchanged:
- small: < 1024px
- medium: 1024px - 1439px
- large: >= 1440px
VtsSelect: Removes the unneeded Teleport which cause tab index issues
VtsSelect: Expose a focus method to be able to focus the trigger from external component
useCollection: add index as second argument to `properties` method
useFormSelect: add index as second argument to `value` method
useFormSelect: change sync behavior between model and selected values
useFormSelectController: better configuration of `size` middleware for useFloating
This allow a better handling of "input" width, mainly for the select component
which use UiInput
The `overflow: auto` is already handled on .main container
Having it to .modal wrapper cause scroll issues is some cases
This allow to create a debounced ref, based on an input ref, with ability to force
update it and to know its debouncing state

Update `useTreeFilter` to use it
@OlivierFL OlivierFL force-pushed the xostack/query-builder branch from c92925c to 2dd3e61 Compare February 23, 2026 14:28
@OlivierFL OlivierFL merged commit 0866a5d into master Feb 23, 2026
1 check passed
@OlivierFL OlivierFL deleted the xostack/query-builder branch February 23, 2026 14:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants