[ML] Moves import buttons in file data visualizer

[jgowdyelastic]

Relates to #112285

Removes the black bar at the bottom of the app which housed the import and cancel buttons.

Rather than having a button called "Change import settings" I've left this as the "Back" button. "Change import settings" isn't really a correct description of the page the button returns you to. Something like "Rerun analysis of the already selected file" would be accurate, but that is too long for a button.

@mdefazio Does this look ok? Any other suggestions? Note, I'd like to keep this PR small, the main aim was just to remove the black bar at the bottom of the page and change the name of the Cancel button after the import has already run.

[elasticmachine]

Pinging @elastic/ml-ui (:ml)

[peteharverson]

The bottom bar used to have a 'Cancel' button on it which took you back to the entry point of the file data viz. Now the only way to go back and import another file (before importing) is to use the breadcrumbs or hit the browser back button. What do you think about adding a 'Select a different file' type button into here?

[jgowdyelastic]

I've added a button next to the file name title

[peteharverson]

The link you add to 'Select a different file' LGTM

[peteharverson]

Tested and LGTM.

[darnautov]

LGTM

[darnautov]

❓ shall we pass the mode variable instead of the constant?

[jgowdyelastic]

Updated in 5e16356

[mdefazio]

@jgowdyelastic Excited to see movement on this! Just a few small comments really:

Is there a background behind the content here? I know we had one in the mockup, but for this first iteration, I don't think it's needed with the page setup as it is.

I can imagine there could be confusion between 'Back' and 'Cancel' within this context. What about changing 'Cancel' to Cancel upload so it's clearer? When 'Cancel' was next to 'Import' in the bottom bar it made sense as is. But with this move, might be better to add that extra clarification.

I think that's it for this first step. I'd be happy to revisit the mockups and work through some feedback that way for future iterations if it helps.

[jgowdyelastic]

@mdefazio I hadn't noticed that the background color behind the file name on the import page is a different to the previous page.
When this feature is embedded in ML the background should be white to match all of our other pages, when embedded in the Add Data page, the background should be off-white
e.g.

vs

I'll fix that title in this PR.
Changing the background for the whole of the page would make it look very different to the rest of ML.

[mdefazio]

Changing the background for the whole of the page would make it look very different to the rest of ML.

Agreed! Didn't mean to imply we should change the whole background—just that it could be removed so it matches the rest of the page. Thank you!

[jgowdyelastic]

@mdefazio

What about changing 'Cancel' to Cancel upload so it's clearer?

Sorry, the screenshot in the PR description was out of date, the Cancel button is now Select a different file

[mdefazio]

LGTM.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 5e16356

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
dataVisualizer	346	344	-2

Async chunks

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

id	before	after	diff
dataVisualizer	367.8KB	367.3KB	-470.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	13	15	+2
securitySolution	411	415	+4
total			+6

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	14	16	+2
securitySolution	494	498	+4
total			+6

History

• 💚 Build #136233 succeeded 67b0543
• 💚 Build #136015 succeeded 54b5b48
• 💚 Build #135485 succeeded 3572b42
• 💚 Build #135467 succeeded 9dc0b7e
• 💔 Build #135285 failed 0847b75
• 💔 Build #135276 failed 4313f7a

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

cc @jgowdyelastic