Kibana developer examples landing page

[stacey-gammon]

Summary

Our developer examples were getting hard to navigate because so many of them show up in the app nav menu. Only a few of them are the "landing pages", while others exist to serve as part of the example.

A searchable landing page makes it easier to find examples and avoids cluttering the nav menu.

As always, run via yarn start --run-examples to load Kibana with developer examples!

Before:

A long list of apps make it difficult for developers to know where to go to learn about a service.

After:

A single "developer examples" app is a landing page for all the registered examples:

Links to example plugins with descriptions, an optional image, and other helpful links. Images are not shown in this version due to a bug that will be fixed by #67561.

This is what some of the images look like, but this is an older screenshot:

It's searchable!

Conclusion

The goals of this landing page are to make it easier for developers to find working, texted examples of services.

Unrelated code changes:

• bfetch explorer was being run from the legacy platform for tests, which failed when it relied on another KP plugin (examples). I had to get rid of that and move the tests to the right config, so the example is running as a KP plugin, and the tests are inside tests/examples.
• Because many links aren't in the nav anymore, switched the tests around to navigate to app, not click app menu item.

[spalger]

@elasticmachine merge upstream

[spalger]

(jenkins upgrade required killing all jobs)

[Dosant]

Played a bit, really nice! Also images make it a lot more lively 👍 (They are working in latest version!)

Some nits I have:

1. Should we make the whole card clickable and as a link? EuiCard supports that. Having it as proper link would also make a right click work. (🤔 I guess I see why it isn't like this right now, probably this would be possible after add RedirectAppLinks component in kibana_react #67595)

2. Looking at how long the descriptions are, I think we should make them left aligned and add a markdown support there. Markdown would be especially useful for state management description where we have functions listed createStateContainerReactHelpers. We have a component for markdown rendering: https://github.com/elastic/kibana/tree/master/src/plugins/kibana_react/public/markdown

3. noopener & noreferer on target="_blank" links

[stacey-gammon]

Could we make the whole card clickable and as a link? EuiCard supports that.

I had it like that originally but it seemed to cause issues with nested links, like I'd click on the github link to the README and it would navigate me there, but also trigger the link on the Card. Also, much more minor, I didn't like the hover effect.

Having it as proper link would also make a right click work. (🤔 I guess I see why it isn't like this right now, probably this would be possible after #67595)

I was waiting on elastic/eui#1668 to make this work with the EUI component I used. Using both onClick and href we can do that trick we did with drilldowns and have onClick use navigateToApp to avoid the full page refresh.

Looking at how long the descriptions are, I think we should make them left aligned and add a markdown support there. Markdown would be especially useful for state management description where we have functions listed createStateContainerReactHelpers. We have a component for markdown rendering: https://github.com/elastic/kibana/tree/master/src/plugins/kibana_react/public/markdown

Interesting I had no idea we had a markdown component. I originally supported passing a string or just any react node to this card, but then I lost my very easy ability to search the description text, so I opted for text only. Better for searching, poorer for nice display. However, I don't think we really want a ton of text there. Essentially, it's for searching. Then the longer, more organized content, should be rendered in the landing page of the example.

noopener & noreferer on target="_blank" links

You mean with where I define the list links?

      links: [
        {
          label: 'README',
          href: 'https://github.com/elastic/kibana/blob/master/src/plugins/bfetch/README.md',
          iconType: 'logoGithub',
          size: 's',
          target: '_blank',
        },
      ],

?

Are you sure I need to add that there? If it internally uses EuiLink I think maybe not because I don't see those used in any EuiLink.

Or do you mean add that somehow here?: onClick={() => window.open(getUrlForApp(def.appId), '_blank')}?

[Dosant]

@stacey-gammon,

I had it like that originally but it seemed to cause issues with nested links, like I'd click on the github link to the README and it would navigate me there, but also trigger the link on the Card.

Have you tried to stop propagation in internal link handler?
Yee, this isn't a blocker, just shared impressions.

Are you sure I need to add that there? If it internally uses EuiLink I think maybe not because I don't see those used in any EuiLink.

Looks like internally EuiLink indeed handles it, https://github.com/elastic/eui/blob/master/src/components/link/link.tsx#L140

Or do you mean add that somehow here?: onClick={() => window.open(getUrlForApp(def.appId), '_blank')}?

But if we do navigation ourselves, like in this case, then ideally we should handle it when calling window.open()

[stacey-gammon]

Ready for another review @elastic/kibana-app-arch

[stacey-gammon]

Ping again 🙏

[kobelb]

I really like these changes! Once we have support for plugins in folders, I could see us taking advantage of this here as well.

nit: I don't see examples/bfetch_explorer/public/bfetch.png being used anywhere... should we delete it?

[Dosant]

LGTM!

I will follow up with cleaning up state management demo apps and grouping it under one section

[stacey-gammon]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 62bc258

History

• 💚 Build #52233 succeeded 9fbcbc0
• 💚 Build #51593 succeeded a75da52
• 💚 Build #51232 succeeded 7a56b5d
• 💔 Build #51061 failed ac9f16b
• 💚 Build #50903 succeeded fa2b9e6

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