[Fleet] UI update agent enrollment instructions

[nchaulet]

Link to Figma
Link to prototype
Video walkthrough

The "Enroll new agent" flyout can be triggered from three places:

Small note:

• the row of data sources should wrap to a new line if they don't fit on a single line.

[elasticmachine]

Pinging @elastic/ingest-management (Feature:EPM)

[hbharding]

I updated the issue with screenshots and video explanation. Let me know if you have run into any questions!

[ruflin]

I like the list of datasource with icons, great idea. For alpha 1 lets skip anything around test connection.

[hbharding]

We already have a "check for agents" feature working in the code base. This design mimics that functionality, except the "checking for new agents..." aspect in my design is slightly different. Currently, there is a grey box that says "checking for new agents" with a loading spinner that appears automatically whenever the flyout is opened. In my design, the user has to click the button for the polling to appear (Behind the scenes, we are always polling, and we use a "flyout opened" timestamp to figure out if it's a "new" agent). I think this experience is slightly less surprising and more intuitive. By giving the user a button to click, it feels like they're completing a step (albeit, an optional one). This also puts the user in control, and they get immediate satisfaction when they see that agents were found. Currently, users might miss the confirmation message because they're focused on another window, typing agent enroll and agent run in their terminal.

@ruflin do you want to:

1. Remove the current "checking for new agents" experience
2. Update the current experience to match these designs
3. Keep the current experience in the codebase as is

I suspect number 3. :)

[ruflin]

Are we actually checking for new agents or just checking for agents? (@nchaulet ). I think we need to have a deeper technical discussion on what we can actually detect and what not. The current probably works well for getting started before you have an agent but gets blurry afterwards. To not be required to have this discussion right now, my preference is 1 on the UI level.

[nchaulet]

@ruflin we are currently checkin for agent that have been created after you open the UI

[ruflin]

@nchaulet Ok. In this case I'm fine sticking to 3.

[nchaulet]

the list of datasource with icons already exists (I created it for config reassignment we can probably reuse it)

[nchaulet]

@ph the related issue where I need the download URL