Refactor search bar & filters to conditionally render new look with application header #7687

zhongnansu · 2024-08-12T17:54:31Z

Description

Conditionally render new filter with new application header behind the toggle
hide filter row, when there's no filters applied
move save query into the filter menu
add additional "Add filter" into menu
add additional "Save query" into menu
move combined menu to be in front of the search bar

Issues Resolved

Screenshot

By default, with "newHome" toggle turned off, search bar & filter bar UI remains the same as what currently is.

iShot_2024-08-13_12.47.26.mp4

With newHome toggle turned on, new application header will show up, along with the new look of filter bar & search bar menu options

iShot_2024-08-13_12.51.05.mp4

Testing the changes

Changelog

refactor: Refactor search bar & filters to conditionally render new look with application header

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

github-actions · 2024-08-12T17:55:06Z

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

codecov · 2024-08-12T18:11:25Z

Codecov Report

Attention: Patch coverage is 77.55102% with 22 lines in your changes missing coverage. Please review.

Project coverage is 63.78%. Comparing base (265a176) to head (c4520cd).
Report is 204 commits behind head on main.

Files with missing lines	Patch %	Lines
...ugins/data/public/ui/filter_bar/filter_options.tsx	81.17%	9 Missing and 7 partials ⚠️
...c/plugins/data/public/ui/search_bar/search_bar.tsx	33.33%	2 Missing and 2 partials ⚠️
...ry_management/saved_query_management_component.tsx	71.42%	0 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7687      +/-   ##
==========================================
+ Coverage   63.74%   63.78%   +0.04%     
==========================================
  Files        3637     3650      +13     
  Lines       80426    80896     +470     
  Branches    12786    12873      +87     
==========================================
+ Hits        51264    51600     +336     
- Misses      26030    26135     +105     
- Partials     3132     3161      +29

Flag	Coverage Δ
Linux_1	`30.04% <ø> (+0.20%)`	⬆️
Linux_2	`55.82% <ø> (ø)`
Linux_3	`40.45% <77.55%> (+0.07%)`	⬆️
Linux_4	`31.30% <ø> (+<0.01%)`	⬆️
Windows_1	`30.05% <ø> (+0.20%)`	⬆️
Windows_2	`55.77% <ø> (ø)`
Windows_3	`40.45% <77.55%> (+0.07%)`	⬆️
Windows_4	`31.30% <ø> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

…ation header Signed-off-by: Zhongnan Su <[email protected]>

Signed-off-by: Zhongnan Su <[email protected]>

src/plugins/data/public/ui/filter_bar/_global_filter_group.scss

src/plugins/data/public/ui/filter_bar/filter_bar.tsx

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx

Signed-off-by: Zhongnan Su <[email protected]>

src/plugins/data/public/ui/filter_bar/filter_options.tsx

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx

Flyingliuhub · 2024-08-15T16:02:05Z

please make sure that Changelog before you merge, thanks

AMoo-Miki · 2024-08-15T16:07:19Z

src/plugins/data/public/ui/filter_bar/_global_filter_group.scss

@@ -55,3 +55,12 @@
    margin-top: $euiSize * -1;
  }
 }
+
+.globalFilterGroup__removeAllFilters {


Can you please create an issue on OUI to allow setting the color in OuiContextItem?

opensearch-project/oui#1345

virajsanghvi

Approving assuming checks pass

…pplication header (#7687) * Refactor search bar & filters to conditionally render with new application header Signed-off-by: Zhongnan Su <[email protected]> * add more test coverage Signed-off-by: Zhongnan Su <[email protected]> * address comments Signed-off-by: Zhongnan Su <[email protected]> * Changeset file for PR #7687 created/updated --------- Signed-off-by: Zhongnan Su <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 97ddd8a) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…pplication header (#7687) (#7719) * Refactor search bar & filters to conditionally render with new application header * add more test coverage * address comments * Changeset file for PR #7687 created/updated --------- (cherry picked from commit 97ddd8a) Signed-off-by: Zhongnan Su <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

github-actions bot added the distinguished-contributor label Aug 12, 2024

zhongnansu added backport 2.x v2.17.0 look & feel Look and Feel Improvements labels Aug 12, 2024

github-actions bot added failed changeset Skip-Changelog PRs that are too trivial to warrant a changelog or release notes entry and removed failed changeset labels Aug 12, 2024

zhongnansu changed the title ~~Refactor search bar & filters to conditionally render with new application header~~ Refactor search bar & filters to conditionally render new look with application header Aug 12, 2024

zhongnansu force-pushed the header-filter branch 2 times, most recently from 3d4c342 to 1b0be09 Compare August 12, 2024 23:56

Refactor search bar & filters to conditionally render with new applic…

3a9337e

…ation header Signed-off-by: Zhongnan Su <[email protected]>

zhongnansu force-pushed the header-filter branch from 1b0be09 to 3a9337e Compare August 13, 2024 06:20

add more test coverage

4874fe2

Signed-off-by: Zhongnan Su <[email protected]>

zhongnansu marked this pull request as ready for review August 13, 2024 16:40

zhongnansu requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, manasvinibs, ZilongX, Flyingliuhub, curq, bandinib-amzn, SuZhou-Joe and ruanyl as code owners August 13, 2024 16:40

zhongnansu requested review from BionIT, xinruiba, zhyuanqi, mengweieric, LDrago27, virajsanghvi, sejli and joshuali925 as code owners August 13, 2024 16:40

virajsanghvi reviewed Aug 13, 2024

View reviewed changes

address comments

9516d4f

Signed-off-by: Zhongnan Su <[email protected]>

zhongnansu requested a review from virajsanghvi August 14, 2024 06:54

virajsanghvi reviewed Aug 14, 2024

View reviewed changes

src/plugins/data/public/ui/filter_bar/filter_options.tsx Show resolved Hide resolved

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx Show resolved Hide resolved

zhongnansu requested a review from virajsanghvi August 15, 2024 00:12

virajsanghvi previously approved these changes Aug 15, 2024

View reviewed changes

Flyingliuhub previously approved these changes Aug 15, 2024

View reviewed changes

Changeset file for PR opensearch-project#7687 created/updated

c4520cd

github-actions bot removed the Skip-Changelog PRs that are too trivial to warrant a changelog or release notes entry label Aug 15, 2024

opensearch-changeset-bot bot dismissed stale reviews from Flyingliuhub and virajsanghvi via c4520cd August 15, 2024 16:04

Flyingliuhub approved these changes Aug 15, 2024

View reviewed changes

AMoo-Miki reviewed Aug 15, 2024

View reviewed changes

zhongnansu requested a review from virajsanghvi August 15, 2024 16:09

virajsanghvi approved these changes Aug 15, 2024

View reviewed changes

zhongnansu merged commit 97ddd8a into opensearch-project:main Aug 15, 2024
67 checks passed

opensearch-trigger-bot bot mentioned this pull request Aug 15, 2024

[Backport 2.x] Refactor search bar & filters to conditionally render new look with application header #7719

Merged

AMoo-Miki added the in-next label Sep 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor search bar & filters to conditionally render new look with application header #7687

Refactor search bar & filters to conditionally render new look with application header #7687

zhongnansu commented Aug 12, 2024 •

edited

Loading

github-actions bot commented Aug 12, 2024

codecov bot commented Aug 12, 2024 •

edited

Loading

Flyingliuhub commented Aug 15, 2024

AMoo-Miki Aug 15, 2024

zhongnansu Aug 15, 2024

virajsanghvi left a comment

Refactor search bar & filters to conditionally render new look with application header #7687

Refactor search bar & filters to conditionally render new look with application header #7687

Conversation

zhongnansu commented Aug 12, 2024 • edited Loading

Description

Issues Resolved

Screenshot

Testing the changes

Changelog

Check List

github-actions bot commented Aug 12, 2024

❌ Empty Changelog Section

codecov bot commented Aug 12, 2024 • edited Loading

Codecov Report

Flyingliuhub commented Aug 15, 2024

AMoo-Miki Aug 15, 2024

Choose a reason for hiding this comment

zhongnansu Aug 15, 2024

Choose a reason for hiding this comment

virajsanghvi left a comment

Choose a reason for hiding this comment

zhongnansu commented Aug 12, 2024 •

edited

Loading

codecov bot commented Aug 12, 2024 •

edited

Loading