[Infrastructure UI] Adopt new saved views API

[tonyghiani]

📓 Summary

Part of #152617
Closes #106650
Closes #154725

This PR replace the existing client React logic for handling saved views on the infra plugin with a new state management implementation that interacts with the newly created API.
It brings the following changes:

• Implement useInventoryViews and useMetricsExplorerViews custom hooks.
• Adopt @tanstack/react-query for the above hooks implementation as it was already used across the plugin and simplifies the server state management. Extract the provider for the react query cache.
• Update server services to fix an issue while updating views, which was preventing the unset of properties from the view.
• Update Saved Views components to integrate the new hooks.
• The Load views option has been removed accordingly to the decision made with the UX team, since it wasn't adding any value that wasn't already present in the Manage views option.

Even if we are duplicating similar logic to handle the Inventory and Metrics Explorer views, we decided to keep them separated to easily control their behaviour and avoid coupled logic that can be painful to split in future.

🐞 Bug fixes

This implementation also fixed some existing bugs in production:

• As reported in this comment, when the current view is deleted, the selector doesn't fallback on another view and keeps showing the same view title.
  It has been fixed and the selected view fallbacks to the default view.
• When refreshing the page after a view was selected, the view was not correctly recovered and shown. The implemented changes fix this behaviour.
• The "include time" option for creating/updating a saved view was not working and never removed the time property if disabled.
• Minor visual adjustments such as action button type and alignment.

👨‍💻 Review hints

The best way to verify all the interactions and loadings work correctly as a user expects, running the branch locally with an oblt cluster is recommended.
In both the inventory and metrics explorer pages, the user should be able to:

• Access and manage the saved views, select and load a view, delete a view, and set a view as default.
• Save a new view.
• Update the currently used view, except for the static Default view.
• Show an error when trying to create/update a view with a name already held by another view.
• Restore the view with the following priority order
  • Use from the URL the stored view id to restore the view
  • Use the default view id stored in the source configuration as a user preference
  • Use the static Default view

👣 Following steps

• [Infrastructure UI] Clean up legacy saved object client implementations #155117

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[elasticmachine]

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

[jennypavlova]

Well done! 👏
Everything works fine - I added a comment about the delete option I think we can improve the UX there and some other questions/comments.
Another small thing I noticed when you open the react query dev tools the page layout is breaking (other pages like Alerts for example work fine)

Also the *-find queries are displayed as disabled - should it be like that?

[jennypavlova]

That's cool 👍

[jennypavlova]

Q: Should we do this check earlier and disable the delete icon button? Maybe showing a tooltip that the default view can't be deleted if it's not clear there 🤔 When I tested I saw that I can still click it the delete icon and after that I see a disabled button:

Screen.Recording.2023-04-28.at.16.13.49.mov

[tonyghiani]

I spoke with @kkurstak in advance about this and I agree we could make a lot of improvements on the UX for saved views!
This work is however intended to only migrate the implementation for the saved views feature, we'll have the chance to further improve its usage when this work is finalized.

[jennypavlova]

LGTM, thank you for answering the questions and adding the changes!
(added 2 small suggestions but overall it's good to go 🚀 )

[tonyghiani]

Also the *-find queries are displayed as disabled - should it be like that?

It should, the requests for getting all the views is disabled as it is only necessary when managing the views, so we can trigger it on a per-event basis when the user access the views flyout and avoid the request when not necessary.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: d881c37

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
infra	1380	1389	+9

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
infra	2.0MB	2.0MB	+1.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
infra	101.0KB	101.3KB	+351.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	19	21	+2
infra	52	51	-1
securitySolution	399	402	+3
total			+4

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	20	22	+2
infra	62	61	-1
securitySolution	479	482	+3
total			+4

History

• 💛 Build #124731 was flaky bf3718c
• 💛 Build #124719 was flaky bcd0eb3
• 💚 Build #124680 succeeded 3e3cc33
• 💚 Build #124209 succeeded 04ac8c7
• 💔 Build #124191 failed 183b88c
• 💔 Build #124188 failed cca3426

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream