[Fleet] Revamp integration detail page

[jen-huang]

Summary

This PR revamps the integration detail > overview page to match with the design work done for top-level Integrations UI app. That project is currently under rescoping, but there was a POC done already that has these changes. We will want to update the overview page regardless of other aspects of that project, so we might as well update now by pulling the relevant work from the POC branch before it diverges too far from main branch.

Design brief: #90047 (comment)

UI changes:

• Remove "Read more" and "Collapse" toggles for integration documentation, we will always load the full documentation
• Screenshots moved to right column in a carousel, they can be clicked to view full screen
• Details (version, categories, list of assets, etc) moved to below screenshots in right column and re-styled

Other code changes:

• Restructuring of x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/ directory so that it has subdirectories for each detail tab (Overview, Policies, Settings, Custom) and a common components directory
• Explicit route naming of each detail tab so that we can use <Route> to render the right tab instead of conditionals on the panel param

Resolves #90933.

Screenshots

Uninstalled integration with screenshots:

Installed integration that also has custom UI extensions:

[jen-huang]

This is a rename from settings_panel.tsx, not a new file

[elasticmachine]

Pinging @elastic/fleet (Feature:Fleet)

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9041a42

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
fleet	458	461	+3

Async chunks

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

id	before	after	diff
fleet	760.1KB	754.3KB	-5.8KB
securitySolution	7.5MB	7.5MB	-8.0B
total			-5.8KB

Page load bundle

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

id	before	after	diff
fleet	365.9KB	366.5KB	+521.0B

History

• 💔 Build #105458 failed cd21646
• 💔 Build #105445 failed a187532
• 💔 Build #105453 failed cd7df2b

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

[skh]

Looks good! Two minor questions:

---

In the screenshot widget, the number of the current screenshot as well as the overall number are links, but I am not sure what should happen when I click on them:

---

When I install an integration from the Settings view with "Install ... assets", and then refresh the page, the 'Policies' tab correctly appears. Same if I navigate away to "Browse all integrations" and then view the integration page again. I wonder if the 'Policies' tab should appear immediately after the integration has been installed. Same when uninstalling the integration from that page, the 'Policies' tab stays until a refresh, but it should disappear.

NOTE: this has probably been the case for a while, and is not an issue introduced with this change, so feel free to ignore for now.

---

Looking at the code now.

[skh]

Code LGTM 🚀

[jen-huang]

@skh Thanks for the review!

Re: screenshot links. This is using the compressed EUI pagination component. Clicking the total number should jump you to the last image, the current page number looks like a link but looking at the doc example I think it's just styled as an indicator of which page you're on.

For the Policies tab issues, I filed a separate bug: #90992. You're right that it's existing behavior today too. I took a brief look at what a fix might entail and it has a bit of complexity, so would rather resolve that separately.

[paul-tavares]

Security Solution changes LGTM 👍

Thank you