[Dashboard Navigation] Add link editing + reordering

[Heenawter]

Closes #154361
Closes #161274
Closes #161693

Summary

This PR adds editing capabilities to the navigation embeddable, including deleting/editing existing links and reordering the list of links. It also fixes the delay in opening the editing flyout from the async import in getExplicitInput (from the navigation embeddable factory) by moving it to the constructor of the factory.

Screen.Recording.2023-07-12.at.11.25.46.AM.mov

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios Will be addressed in [Dashboard Navigation] Add functional + unit tests #161287
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[andreadelrio]

When the user chooses a destination dashboard we should be showing it in the input, with the clearable option enabled like so:

Sorry, I'm a bit confused on what you mean by that 🤔 The top input is a search, so we can't really auto-populate it like your mocks show - should this be different? Also, the EuiTextField component doesn't support the isClearable prop, so I'd have to create my own version of that if you wanted it to show up for the Text input.

@Heenawter I think I was thinking of the isClearable prop in EuiFieldSearch which I guess is not exactly what we need. That would make the search query clearable, it wouldn't show the "selected dashboard" which is what I was thinking of. Do you think it is valuable to show the selected dashboard's name in another place other than in EuiSelectable itself? I worry that when we have many available dashboards and scrolling kicks in, if the user selects a dashboard at the bottom and changes the label, the only way for them to see their selection is by scrolling to the bottom of the list (or by searching).

[Heenawter]

Do you think it is valuable to show the selected dashboard's name in another place other than in EuiSelectable itself? I worry that when we have many available dashboards and scrolling kicks in, if the user selects a dashboard at the bottom and changes the label, the only way for them to see their selection is by scrolling to the bottom of the list (or by searching).

@andreadelrio Ahhh, that's an excellent point... I definitely think it could be valuable to show the selected dashboard title somewhere, although I'm not exactly sure where.

We could do something with an EuiSuperSelect:

... or something like the data view picker in the controls creation flyout with a popover + EuiSelectable combo:

... but I'm not convinced that those make the best use of the real estate we have in the flyout - it would probably look pretty empty 😅 For the field picker in the controls flyout, it looks like we only show the name of the selected field in the Label text input, similar to how we're doing it now for selecting dashboards:

We could have a similar idea to the Control type row, which auto-populates with the selected dashboard/URL....

Not sure if that's overkill though?

[nickpeihl]

We could have a similar idea to the Control type row, which auto-populates with the selected dashboard/URL....

Jul-14-2023 09-36-37

Not sure if that's overkill though?

Of the proposed options, I like this idea the best.

I do sometimes forget that the EuiSelectable here is only for single selections. My muscle memory expects to use CMD-click to select multiple dashboards. That would be a slight concern for me if I was a user wanting to quickly create a very long sidebar list of links. But then users would also not be able to change the label on a link during creation.

But we can always add multi-select in a later release. Not necessary for MVP, IMO.

[Heenawter]

Major design change

After discussion with @andreadelrio, we have decided to go with an EuiComboBox for the dashboard selector rather than the EuiSelectable:

Screen.Recording.2023-07-14.at.4.20.37.PM.mov

This was implement in bdf7756.

[nickpeihl]

lgtm! EuiComboBox is a great improvement!

code review and tested add/edit link functionality

[andreadelrio]

LGTM! EuiComboBox feels a lot cleaner, thanks for implementing it. We might want to think about doing the same for Controls in the future.

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: 401e854
• Interpreting CI Failures

Failed CI Steps

• Post-Build

Metrics [docs]

‼️ ERROR: no builds found for mergeBase sha [70813b7]

History

• 💔 Build #143027 failed a2f4d21
• 💔 Build #142706 failed 5e81c45
• 💔 Build #142702 failed bdf7756
• 💔 Build #142682 failed be256b1
• 💔 Build #142669 failed 263d338

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

cc @Heenawter