[Fleet] Improve agent policy selection UI for reausable policies

[criamico]

Part of reusable policies work

With https://github.com/elastic/kibana/pull/186084 we updated the integration policy editor to allow editing an existing policy with multiple agent policies.

However there was an discussion on how to handle the edit button when an existing policy is loaded that is worth continuing on its own.

Context

The save integration on the bottom on load is currently enabled even when the existing policies haven't been edited yet, but that allows the user to switch to the "existing hosts" tab and create a new agent policy, that will be then added to the existing policies:

https://github.com/elastic/kibana/assets/16084106/a39271b7-87c1-4d03-8e1e-6cd53576a848

With the button disabled:

https://github.com/elastic/kibana/assets/16084106/d8053727-5307-4ce6-bbce-38e340cf0236

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[juliaElastic]

@simosilvestri Do you have any suggestion here? I think the idea was to make the UX consistent on the create and update integration policy pages, not necessarily that we require creating an agent policy when updating an integration policy.

We could even hide the New hosts / Existing hosts tabs and allow only selecting existing agent policies.

[simosilvestri]

@juliaElastic and @criamico Please let me know what do you think about this enhancement :)

Figma file

https://github.com/elastic/kibana/assets/162109197/f9914070-c8d3-4a86-9152-5396b7920427

[juliaElastic]

This looks great! I think we don't really need a confirmation modal when clicking Remove new policy, we already list the changes that will be made when clicking on the Save button on the form.

[criamico]

@simosilvestri I think that this way is more clear which policies the user is adding, as it's possible to see all of them at once.