[Fleet] Add Fleet Server Flyout Redesign

[hop-dev]

Second part of #80841.

From parent issue:

"We want to improve our agent installation instructions to minimize the time for the user to get started. We also want to maximize the percent of users who are successful installing it, so we want to remove friction points and provide assistance when they get stuck."

Implementation Checklist

Extracted from designs.

• Redesign of fleet server commands component:

View design

• Move add fleet server into it's own fly-out with 2 tabs:
  • Advanced tab (very similar to current setup)
    • remove download step
    • create tab
  • Quick start tab
    • Create tab
    • Create generate fleet server policy step component (generates policy and creates token):

View design

• If no fleet server set up when going to add agent, show link to new add fleet server fly-out

View design

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[jen-huang]

@kpollich Assigning this one to you as @criamico took #125534, and we had planned for the overall enhancement to be split between you :)

[kpollich]

@hop-dev @mostlyjason - Should these alterations also be reflected on the on-prem Fleet home page? Assuming we could display the flyout contents on this page or maybe just the "advanced" tab contents?

It'd be ideal to be able to have content shared completely between between the flyout and this view to avoid any code duplication.

[mostlyjason]

@kpollich yes the content on the flyout and the empty state should be the same. I believe that's how it is today too. It'd be good to have both tabs available.

[amolnater-qasource]

Hi Team
We have revalidated this feature on latest 8.3 Snapshot self-managed environment and had below observations:

• Two tabs Quickstart and Advanced are available under Agents tab.
• Fleet Server installation commands are available for 5 different platforms.
• Advanced mode further has Quickstart and Production mode.
• When fleet server is unenrolled Add Fleet Server button is available under Add agent flyout.

Open Bugs:

• [Self-Managed]: Appropriate production mode commands for fleet server installation not available under Agents tab. #131212
• [Self-Managed]: UI breaks on selecting Windows fleet server installation command. #131217
• [Self-Managed]: Installed fleet server fails to sync with Add agent flyout and Add agent flyout still shows to install Fleet Server. #131590
• [Self-Managed]: Connected to Fleet-Server is shown under Add fleet server flyout>Advanced installation even when fleet server is uninstalled. #131597
• [Self-Managed]: Add Fleet Server button gets stucked(unclickable) when opened from Add integration>Add Elastic Agent to your hosts. #131706
• [Fleet]: Add agent flyout UI gets distort while using agent policy with fleet-server integration. #131591

Question Ticket:

• [Question]: Integration preview is not available for agent policy with fleet-server integration. #131620

Build details:
VERSION: 8.3.0 Snapshot self-managed
BUILD: 52512
COMMIT: df225b2

Please let us know if anything else is required from our end.
cc: @joshdover
Thanks

[amolnater-qasource]

Hi @hop-dev
We have completed our testing on this feature on 8.3 BC and 8.3 Snapshot builds.
Further we have 02 issue open related to async at links:

• [Self-Managed]: Installed fleet server fails to sync with Add agent flyout and Add agent flyout still shows to install Fleet Server. #131590
• [Self-Managed]: Connected to Fleet-Server is shown under Add fleet server flyout>Advanced installation even when fleet server is uninstalled. #131597

Hence we are marking this as QA:Validated.

Please let us know if any other testing is required on this from our end.
cc: @joshdover
Thanks