[Dashboard Navigation] Add creation UI #160179

Heenawter · 2023-06-21T16:44:46Z

Summary

This PR adds the first draft of the UI for creating the navigation embeddable and adding links to it. Note that this PR only addresses adding links - you cannot currently remove links from the panel or edit existing links. Also, because this PR contains critical code, some cleanup tasks were left as TODO in order to get it merged ASAP - these will be addressed in follow up PRs.

Screen.Recording.2023-07-06.at.4.31.04.PM.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

elasticmachine · 2023-07-06T22:51:06Z

Pinging @elastic/kibana-presentation (Team:Presentation)

nickpeihl

lgtm! I added a couple of nits, but nothing that needs to block merging.

nickpeihl · 2023-07-07T18:54:08Z

src/plugins/navigation_embeddable/public/components/navigation_embeddable_panel_editor.tsx

+                  })}
+                  <EuiButtonEmpty
+                    size="s"
+                    flush="left"


When the button has tab focus, the padding is 0. Since the items above have some left padding I think I'd prefer not to flush here. 🚽

Ooooh, good catch - I definitely agree that looks pretty ugly 👀

I'm a little bit worried about how that link will look without flush="left" once we add the "Save to library" toggle from the designs:

But that's something we can address as part of that PR :) I think removing the left flush is the right call here.

Fixed in c0c81e2 👍

Without focus With focus

nickpeihl · 2023-07-07T19:18:52Z

src/plugins/navigation_embeddable/public/components/navigation_embeddable_panel_editor.tsx

+              {!links || Object.keys(links).length === 0 ? (
+                <EuiPanel hasBorder={true}>
+                  <EuiFlexGroup justifyContent="spaceAround">
+                    <EuiFlexItem grow={false}>
+                      <EuiText size="s">
+                        {NavEmbeddableStrings.editor.panelEditor.getEmptyLinksMessage()}
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                  <EuiSpacer size="s" />
+                  <EuiFlexGroup justifyContent="spaceAround">
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        onClick={() => setShowLinkEditorFlyout(true)}
+                        iconType="plusInCircle"
+                      >
+                        {NavEmbeddableStrings.editor.getAddButtonLabel()}
+                      </EuiButton>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiPanel>
+              ) : (


Doesn't have to block this PR, but I wonder if we should (can?) add a nice empty prompt to the flyout? It would be nice to have a title prompt like "Create links" and a description explaining the value of the links panel, e.g. "Links can pass filters and time range to other dashboards. Or create external links to other websites." <-- probably needs some better copy 😄

I 100% agree - @andreadelrio @gchaps any ideas on how to add some visual interest to the flyout and/or improve the copy to give it more impact when there are no links? 👀 For reference, this is what the flyout currently looks like when first creating a links panel:

I definitely think there's work we could do to make it a little more ⭐ fancy ⭐ even if it's not included as part of this PR :)

@Heenawter we can definitely improve the text. I'll post a suggestion.

@gchaps Yes, it is! 👍 It is still in its early stages, but we are essentially creating a navigation system so that users don't have to use markdown links (which can very easily become out of date, especially when using hard links to specific dashboards) anymore. I can link you to the project docs on Slack if you want more information - sorry for the sudden no-context mention, haha! 😅

I agree that we could make this more visually appealing. Let me think about what we can do here. I don't think we have any illustration available right now that would fit the bill so there might not be a quick solution to this.

@nickpeihl @Heenawter @gchaps sending a couple of ideas for the empty state graphic.

Wow! The first one with the big link and the fly looks incredible!

I'm partial to the first graphic.

Oooh, those are fantastic Andrea 🔥 I especially like the first one!! :) I've opened a related issue so that we can move discussion of the empty state there (both for copy suggestions and the graphic) - I think it's worth getting multiple opinions, and this thread is already getting pretty large hehe

andreadelrio

@Heenawter Great job on this first PR!

Here are some things to consider design-wise:

I think we need to go full width with the inputs in the flyout.
I'm also wondering whether we should have the Current badge absolutely positioned. Right now, in the event of a super long dashboard name, the badge won't be visible.
The Current badge should not be getting an underline on hover.
For the Text input I think we should either:
a) automatically prefill it with the text of the chosen destination.
b) mark it as optional
For the Choose destination input, I suggest we show the error text below it.

Heenawter · 2023-07-07T21:57:44Z

@andreadelrio

I think we need to go full width with the inputs in the flyout.

Done :)

I'm also wondering whether we should have the Current badge absolutely positioned. Right now, in the event of a super long dashboard name, the badge won't be visible.

Very good point! We could prepend or append it to the EuiSelectable option, like so:

Prepend	Append

I think I prefer prepending, since it looks better when the current dashboard name isn't long:

Prepend	Append

What do you think? 👀

The Current badge should not be getting an underline on hover.

Good catch - that will be fixed by using either the append or prepend above.

For the Text input I think we should either:
a) automatically prefill it with the text of the chosen destination.
b) mark it as optional

How do we usually mark something as optional in a form? I looked through Kibana + the EUI form documentation and I couldn't find any examples - totally possible I missed something, though. Would something as simple as this work?

Update: Actually, at some point I had the placeholder getting replaced... That would probably help a lot, I don't know when that broke 😆 Let me try to fix that...

For the Choose destination input, I suggest we show the error text below it.

Sorry, which error text are you referring to? There's no error text at the moment - do you mean once we add better validation to the URL input as discussed here?

andreadelrio · 2023-07-07T22:12:57Z

What do you think? 👀

I like the prepend better precisely for the reason you mentioned.

For the Text input I think we should either:
a) automatically prefill it with the text of the chosen destination.
b) mark it as optional

How do we usually mark something as optional in a form? I looked through Kibana + the EUI form documentation and I couldn't find any examples - totally possible I missed something, though. Would something as simple as this work?

Yes, that's perfect. According to EUI's guidelines, all fields are considered required unless marked as optional (using either the label of the help text)

For the Choose destination input, I suggest we show the error text below it.

Sorry, which error text are you referring to? There's no error text at the moment - do you mean once we add better validation to the URL input as discussed here?

Yes, I was referring to that 👍

Heenawter · 2023-07-07T22:25:05Z

I like the prepend better precisely for the reason you mentioned.

Let's go with that, then 🎉

Yes, that's perfect. According to EUI's guidelines, all fields are considered required unless marked as optional (using either the label of the help text)

Done! :) I also fixed the issue with the placeholder text not being replaced:

Screen.Recording.2023-07-07.at.4.21.19.PM.mov

(ignore the Current badge being appended - I switched it back to prepend after this video was taken)

Yes, I was referring to that

Awesome, yeah - that makes sense to me 👍

nickpeihl

Added a couple more nits. Should be easy changes.

src/plugins/navigation_embeddable/public/components/navigation_embeddable_link_editor.tsx

nickpeihl · 2023-07-10T15:00:49Z

The link validation will be resolved as part of #154381 and the empty state will be resolved as part of #161552. So I think we can merge this PR as is.

Any CI issues in the feature-branch can also be resolved separately from this PR.

kibana-ci · 2023-07-10T16:13:17Z

💔 Build Failed

Failed CI Steps

Post-Build

Metrics [docs]

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

History

💔 Build #141278 failed b0358d1
💔 Build #141079 failed 852e990
💔 Build #141072 failed 9b10044
💚 Build #140833 succeeded 47e09f5
💔 Build #140822 failed 2cbe2c9

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

Make navigation embeddable creatable

b1d9f30

Heenawter force-pushed the add-creation-ui_2023-06-21 branch from b4d1adb to b1d9f30 Compare June 21, 2023 16:47

Heenawter added 2 commits June 21, 2023 13:47

Print dashboard list

e0c4bd2

Filter out current dashboard

7a0ac38

Heenawter force-pushed the add-creation-ui_2023-06-21 branch from 8863ace to 7a0ac38 Compare June 21, 2023 21:27

Switch to EuiSelectable for dashboard picker

6faccad

Heenawter force-pushed the add-creation-ui_2023-06-21 branch from 2e53f49 to 6faccad Compare June 21, 2023 22:00

Heenawter added 2 commits June 22, 2023 10:37

Add list of links to render

73ad237

Fixing bug with current dashboard

2198908

Heenawter force-pushed the add-creation-ui_2023-06-21 branch from 87aa84a to 2198908 Compare June 22, 2023 20:38

Heenawter added 3 commits June 22, 2023 15:34

Force current dashboard to the top of the list

50638fc

Add custom labels

6982698

Simplify explicit input to only include what is **absolutely necessary**

bc9c863

Heenawter force-pushed the add-creation-ui_2023-06-21 branch from 4db8743 to bc9c863 Compare June 22, 2023 22:17

Heenawter added 6 commits June 23, 2023 08:31

Make always editable - will need to change this

6e54b30

Remove unnecessary stuff from input + move editor to component

499b001

Fetch dashboard titles+descriptions and set in component state

d58c714

Update styling with Andrea's designs

fa69298

Custom search

6dadf88

First attempt at allowing external links

5768166

Heenawter force-pushed the add-creation-ui_2023-06-21 branch from 0863f99 to 5768166 Compare June 26, 2023 20:57

Make it scrollable

e70ed3c

Heenawter force-pushed the add-creation-ui_2023-06-21 branch from 7165859 to e70ed3c Compare June 26, 2023 21:09

Remove image embeddable dependency + start clean up

8523c77

Heenawter force-pushed the add-creation-ui_2023-06-21 branch 3 times, most recently from 19e02b7 to 2b82446 Compare June 27, 2023 16:15

Heenawter added 3 commits June 27, 2023 13:35

Improve loading state

2720ebe

Search by title only

21d35ce

Switch back to embeddable handling current dashboard logic

338abbb

Address linting issues

7d1864b

Heenawter force-pushed the add-creation-ui_2023-06-21 branch from 7aaa593 to 7d1864b Compare July 6, 2023 22:25

Add debounce to dashboard search

47e09f5

Heenawter marked this pull request as ready for review July 6, 2023 22:51

Heenawter requested review from a team as code owners July 6, 2023 22:51

botelastic bot added the Feature:Embedding Embedding content via iFrame label Jul 7, 2023

Heenawter requested a review from andreadelrio July 7, 2023 14:27

Merge branch 'navigation-embeddable' into add-creation-ui_2023-06-21

3644406

nickpeihl approved these changes Jul 7, 2023

View reviewed changes

Heenawter added 2 commits July 7, 2023 13:39

Remove flush=left for add button

c0c81e2

Rename open flyout method

d71df9e

Heenawter force-pushed the add-creation-ui_2023-06-21 branch from 2736613 to d71df9e Compare July 7, 2023 20:29

Add another TODO comment

9b10044

andreadelrio requested changes Jul 7, 2023

View reviewed changes

Address design feedback

852e990

nickpeihl reviewed Jul 10, 2023

View reviewed changes

src/plugins/navigation_embeddable/public/components/navigation_embeddable_link_editor.tsx Outdated Show resolved Hide resolved

src/plugins/navigation_embeddable/public/components/navigation_embeddable_link_editor.tsx Show resolved Hide resolved

Heenawter mentioned this pull request Jul 10, 2023

[Dashboard Navigation] Improve the empty state #161552

Closed

Close only link editor flyout on cancel

b0358d1

Fix missed boolean

efbfddf

Heenawter merged commit 3c2e8f6 into elastic:navigation-embeddable Jul 10, 2023

Heenawter mentioned this pull request Jul 10, 2023

[Dashboard Navigation] Link Creation #154360

Closed

Heenawter deleted the add-creation-ui_2023-06-21 branch July 10, 2023 15:13

nickpeihl mentioned this pull request Jul 10, 2023

[Dashboard Navigation] Drill Down on Link Click #154381

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard Navigation] Add creation UI #160179

[Dashboard Navigation] Add creation UI #160179

Heenawter commented Jun 21, 2023 •

edited

Loading

elasticmachine commented Jul 6, 2023

nickpeihl left a comment

nickpeihl Jul 7, 2023

Heenawter Jul 7, 2023 •

edited

Loading

Heenawter Jul 7, 2023 •

edited

Loading

nickpeihl Jul 7, 2023

Heenawter Jul 7, 2023

gchaps Jul 7, 2023 •

edited

Loading

Heenawter Jul 7, 2023

andreadelrio Jul 7, 2023

andreadelrio Jul 8, 2023

ThomThomson Jul 10, 2023

nickpeihl Jul 10, 2023

Heenawter Jul 10, 2023

andreadelrio left a comment

Heenawter commented Jul 7, 2023 •

edited

Loading

andreadelrio commented Jul 7, 2023

Heenawter commented Jul 7, 2023 •

edited

Loading

nickpeihl left a comment

nickpeihl commented Jul 10, 2023

kibana-ci commented Jul 10, 2023

[Dashboard Navigation] Add creation UI #160179

[Dashboard Navigation] Add creation UI #160179

Conversation

Heenawter commented Jun 21, 2023 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Jul 6, 2023

nickpeihl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Heenawter Jul 7, 2023 • edited Loading

Choose a reason for hiding this comment

Heenawter Jul 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gchaps Jul 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andreadelrio left a comment

Choose a reason for hiding this comment

Heenawter commented Jul 7, 2023 • edited Loading

andreadelrio commented Jul 7, 2023

Heenawter commented Jul 7, 2023 • edited Loading

nickpeihl left a comment

Choose a reason for hiding this comment

nickpeihl commented Jul 10, 2023

kibana-ci commented Jul 10, 2023

💔 Build Failed

Failed CI Steps

Metrics [docs]

History

Heenawter commented Jun 21, 2023 •

edited

Loading

Heenawter Jul 7, 2023 •

edited

Loading

Heenawter Jul 7, 2023 •

edited

Loading

gchaps Jul 7, 2023 •

edited

Loading

Heenawter commented Jul 7, 2023 •

edited

Loading

Heenawter commented Jul 7, 2023 •

edited

Loading