[Ingest] Update Create datasource UI to fit in one page

[nchaulet]

Description

Resolves #60696

Convert the existing create datasource pages into one page.

Change:

• Convert the multiple pages to one
• add a bottom bar
• add a modal to confirm creation if some agents already enrolled to that config.

Screenshots

Updated header

[elasticmachine]

Pinging @elastic/ingest-management (Team:Ingest Management)

[jen-huang]

Going to do a full review later but just an FYI that @hbharding updated the designs a bit so that the bottom bar does not cover the side nav (for both expanded and collapsed side nav):

Here's an example PR that accounts for the side nav with a bottom bar (thanks @cjcenizal!): #60833

[hbharding]

Looks great thanks @nchaulet! You probably noticed the "disabled" steps 2+3 don't exist in EUI the way i showed them in my designs. I spoke with the EUI team and I'll be working on a small PR to add this, but we'll have to wait until the next release

[nchaulet]

@hbharding Yes currently we can only disable the step badge

[jen-huang]

Visual review:

• The left and right margins around the content is bit weird. I think we probably need to reduce the max width of the content (in both the grey header and page content). @hbharding do you have a recommendation for the max width?

• The header content that shows "Integration" and/or "Configuration" can be removed as per designs; the page title also needs to be changed. Design:

• After de-selecting the integration (or configuration, if coming from EPM), the save button should be disabled again. Right now it stays enabled:

[jen-huang]

One future enhancement that might be nice would be to scroll down to Step 2 after the user makes a selection in Step 1. Step 1 takes most of my viewport when I'm on laptop. Not required for this PR, but @hbharding how do you feel about automatic scroll?

[nchaulet]

The header content that shows "Integration" and/or "Configuration" can be removed as per designs; the page title also needs to be changed.

@jen-huang @hbharding what do you think of keeping it? I think it help keeping the context from where you come from

[hbharding]

Lets keep it. I updated the design:

[hbharding]

Also noticed 1 small thing about the layout. My designs use a tighter wrapper for the header and the body area. The design is 770px... or 8 / 12 columns... or 66% the width of the page wrapper, which is 1168px (1200px is you include left/right margin) :) I'll leave it up to you to decide how we do this.

[nchaulet]

@elasticmachine merge upstream

[jen-huang]

A few copy suggestions but otherwise LGTM! Thanks for making the changes.

[nchaulet]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 2296f57

History

• 💚 Build #40330 succeeded fe79c90
• 💚 Build #40325 succeeded 0e41dbc
• 💚 Build #40024 succeeded 5a16fde
• 💚 Build #40025 succeeded c365fd8
• 💔 Build #39964 failed 6186e8c

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