Saved queries new UI

[amsiglan]

Description

This PR updates the UI for saved queries to use Flyouts which give more surface to search and categorize the queries as well as introduce more options when saving them.

Screenshot

• Saved queries action popup

• Save query action item when clicked opens

• Open query action item when clicked opens

• Templates tab (Note: these queries cannot be deleted from UI)

Testing the changes

Tested change with local setup.

Changelog

• feat: Enhances the saved query UX

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

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 7.04846% with 211 lines in your changes missing coverage. Please review.

Project coverage is 60.74%. Comparing base (9a25d0d) to head (2ea152b). Report is 25 commits behind head on main.

Files with missing lines	Patch %	Lines
...lugins/data/public/ui/saved_query_form/helpers.tsx	0.00%	64 Missing :warning:
...ui/saved_query_flyouts/open_saved_query_flyout.tsx	0.00%	63 Missing :warning:
...public/ui/saved_query_flyouts/saved_query_card.tsx	0.00%	42 Missing :warning:
...ry_management/saved_query_management_component.tsx	21.42%	10 Missing and 1 partial :warning:
...ta/public/query/saved_query/saved_query_service.ts	56.25%	4 Missing and 3 partials :warning:
...ublic/ui/saved_query_flyouts/save_query_flyout.tsx	0.00%	7 Missing :warning:
...c/plugins/data/public/ui/search_bar/search_bar.tsx	0.00%	5 Missing :warning:
...ugins/data/public/ui/filter_bar/filter_options.tsx	0.00%	2 Missing and 2 partials :warning:
src/plugins/data/public/plugin.ts	0.00%	3 Missing :warning:
...ata/public/ui/saved_query_form/save_query_form.tsx	0.00%	3 Missing :warning:
... and 2 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8469      +/-   ##
==========================================
- Coverage   60.84%   60.74%   -0.11%     
==========================================
  Files        3793     3798       +5     
  Lines       90486    90650     +164     
  Branches    14212    14254      +42     
==========================================
+ Hits        55057    55062       +5     
- Misses      31939    32093     +154     
- Partials     3490     3495       +5     

Flag	Coverage Δ
Linux_1	29.07% <8.69%> (-0.01%)	:arrow_down:
Linux_2	56.39% <ø> (ø)
Linux_3	37.57% <7.04%> (-0.10%)	:arrow_down:
Linux_4	29.83% <8.69%> (-0.01%)	:arrow_down:
Windows_1	29.08% <8.69%> (-0.01%)	:arrow_down:
Windows_2	56.35% <ø> (ø)
Windows_3	37.57% <7.04%> (-0.10%)	:arrow_down:
Windows_4	29.83% <8.69%> (-0.01%)	:arrow_down:

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[ashwin-pc]

Hey @amsiglan can you change the folder icon that triggers the popover to use boxesHorizontal instead?

[amsiglan]

Didnt get a chance to review the whole thing yet. But a quick question on saved query templates. I see you added the tab, but I couldnt find a way in the UI to create them. Also if our plan is to include them dynamically, can we hide the tab if there arent any present? Having an empty tab there for most users is bad UX

Will follow up with another PR to update the UI with either:

• Add a way to support template creation OR
• Hide the template tab when there are no templates

Another angle is that now since we will always have some sample queries that we show where there are no results, we could package them as templates as well.

Will work on the best path forward and create a follow up PR

[amsiglan]

There are tests failing related to saved queries.

Also, we've added a lot of code without tests - how are we tracking following up with those tests?

Let me add a task on myself to add new tests

[ananzh]

So we have two places 1) click showFilterActions button and 2) the new three dot one to save queries? What is the purpose or usage pain to resolve for adding another save query? are we going to remove the old one to make the new one the only place to save query?

[amsiglan]

So we have two places 1) click showFilterActions button and 2) the new three dot one to save queries? What is the purpose or usage pain to resolve for adding another save query? are we going to remove the old one to make the new one the only place to save query?

We are replacing the old button in both the places, the one inside the filter options will also show the two options

• Save query and Open query

[ananzh]

So we have two places 1) click showFilterActions button and 2) the new three dot one to save queries? What is the purpose or usage pain to resolve for adding another save query? are we going to remove the old one to make the new one the only place to save query?

We are replacing the old button in both the places, the one inside the filter options will also show the two options

• Save query and Open query

Got it. Haven't got time to review it in details, only verify the changes with query enhancement and MDS enabled. Since you have resolve multiple people's comments, I will approve to unblock. Will reach out to you there is any concerns in the future.

[ashwin-pc]

Rerunning CI Group 6 since the associated fix has been merged. Will merge once its passed

[opensearch-trigger-bot[bot]]

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 128

To backport manually, run these commands in your terminal:

# Navigate to the root of your repository
cd $(git rev-parse --show-toplevel)
# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add ../.worktrees/OpenSearch-Dashboards/backport-2.x 2.x
# Navigate to the new working tree
pushd ../.worktrees/OpenSearch-Dashboards/backport-2.x
# Create a new branch
git switch --create backport/backport-8469-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 463a6c03edcf25285924e84872754cc370cc0cf8
# Push it to GitHub
git push --set-upstream origin backport/backport-8469-to-2.x
# Go back to the original working tree
popd
# Delete the working tree
git worktree remove ../.worktrees/OpenSearch-Dashboards/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-8469-to-2.x.

[AMoo-Miki]

manual backport was merged into 2.x