[do not merge] Search UX v2 #4: Search page & AddFilterModal#664
Draft
hoyla wants to merge 2 commits intoljh-searchux-v2-pr3-active-filter-chipsfrom
Draft
[do not merge] Search UX v2 #4: Search page & AddFilterModal#664hoyla wants to merge 2 commits intoljh-searchux-v2-pr3-active-filter-chipsfrom
hoyla wants to merge 2 commits intoljh-searchux-v2-pr3-active-filter-chipsfrom
Conversation
hoyla
changed the title
hoyla
force-pushed
the
ljh-searchux-v2-pr3-active-filter-chips
branch
from
e16147c to
0a8ff34
Compare
Convert Search.js to Search.tsx as a functional component using hooks (useState, useEffect, useRef, useCallback). Replace UNSAFE_componentWillReceiveProps with a useEffect that tracks previous urlParams via useRef. Replace react-select v1 Sort/PageSize dropdowns with plain <select> elements, removing one dependency on the outdated react-select 1.x API. Convert SearchBox.js to SearchBox.tsx as a functional component using forwardRef + useImperativeHandle to preserve the imperative focus()/select() methods that Search calls via ref. Replace the InputSupper-based chip input with a plain <textarea> for text entry, delegating filter management to the ActiveFiltersBar and AddFilterModal components. Add AddFilterModal.tsx — a functional component that composes the existing Modal.js shell. Provides a form for selecting a filter type, choosing include/exclude polarity, and entering a value (text, date, date range, or multi-select checkboxes). Uses Modal.js for overlay, backdrop dismiss, and ESC key handling instead of reimplementing that behaviour. Add search-layout CSS for sticky header + scrollable results area. Add textarea styling for the new plain-text search input. Add _add-filter-modal.scss for the modal form styling. Replace react-select dropdown styling with native <select> styling.
'Search this workspace' and 'Search in folder' were passing workspace via filters, which gets discarded by triggerSearch in favour of chip-derived values from q. Use buildWorkspaceSearchQ and buildWorkspaceFolderSearchQ to embed chips in q instead, so the search page, sidebar, and chips all reflect the workspace on arrival.
hoyla
force-pushed
the
ljh-searchux-v2-pr4-search-page-modal
branch
from
f599bc6 to
175c82a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Note
THIS IS A PLACEHOLDER PR SO I CAN REMEMBER WHAT WAS DONE IN THIS BRANCH.
It'll probably get rewritten entirely should we actually get here.
Context
Part of the Search UX Improvements epic.
Important
This is the fourth of five PRs in the Search UX Improvements epic.
Changes to the user experience
This is the PR where the chip-based filter system becomes visible to users.
Active filter chips
Users now see interactive filter chips below the search box. Active filters display as coloured pills with negate/remove controls. Dormant default chips (Dataset, Workspace, Date Range, File Type) appear as placeholders when inactive. Clicking a dormant chip activates it.
Add Filter modal
A "More filters" button opens a modal listing all available filter types from the backend
suggestedFieldsplus built-ins (File Type, Date Range). Related filters are consolidated — Created After and Created Before are merged into a single Date Range entry.Bug fix
"Search this workspace" and "Search in folder" now embed workspace/folder as chips in the
qparameter rather than usingfilters. This ensures the search page, sidebar, and chips all reflect the workspace on arrival.What's included
Search.js; integrates chip parsing, filter bar, and add-filter modal into the search page.triggerSearchextracts workspace and dataset filters from chips inq.SearchBox.js; renders the search input withActiveFiltersBarandAddFilterModalbeneath it.AddFilterModal.tsx) — modal dialog listing available filter types, resolving filter metadata (kind, chipType) and consolidating hidden filters.WorkspaceSummary.tsxandWorkspaces.tsxupdated to usebuildWorkspaceSearchQandbuildWorkspaceFolderSearchQ._add-filter-modal.scss,_search.scss) — modal and search page styling.TypeScript
Search.jsandSearchBox.jsconverted to TypeScript with full type annotations.Automated tests
No new test files in this PR.
Manual tests
Tested locally. Tested on playground.