Kibana developer examples landing page (#67049)

* Kibana developer examples

* Batch explorer tests should be run in examples config

* Fix tests

* add codeowner for new developer examples plugin & readme cleanup

* Try to frame embeddable wording based on what a developer's goals are.

* Add noopener noreferer, fix bad merge

* Remove bfetch.png

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

examples/state_containers_examples/kibana.json

@@ -4,6 +4,6 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation", "data"],
+  "requiredPlugins": ["navigation", "data", "developerExamples"],
   "optionalPlugins": []
 }

examples/state_containers_examples/public/plugin.ts

@@ -17,15 +17,21 @@
  * under the License.
  */
 
-import { AppMountParameters, CoreSetup, Plugin } from 'kibana/public';
+import { AppMountParameters, CoreSetup, Plugin, AppNavLinkStatus } from '../../../src/core/public';
 import { AppPluginDependencies } from './with_data_services/types';
 import { PLUGIN_ID, PLUGIN_NAME } from '../common';
+import { DeveloperExamplesSetup } from '../../developer_examples/public';
+
+interface SetupDeps {
+  developerExamples: DeveloperExamplesSetup;
+}
 
 export class StateContainersExamplesPlugin implements Plugin {
-  public setup(core: CoreSetup) {
+  public setup(core: CoreSetup, { developerExamples }: SetupDeps) {
     core.application.register({
       id: 'stateContainersExampleBrowserHistory',
       title: 'State containers example - browser history routing',
+      navLinkStatus: AppNavLinkStatus.hidden,
       async mount(params: AppMountParameters) {
         const { renderApp, History } = await import('./todo/app');
         return renderApp(params, {
@@ -38,6 +44,7 @@ export class StateContainersExamplesPlugin implements Plugin {
     core.application.register({
       id: 'stateContainersExampleHashHistory',
       title: 'State containers example - hash history routing',
+      navLinkStatus: AppNavLinkStatus.hidden,
       async mount(params: AppMountParameters) {
         const { renderApp, History } = await import('./todo/app');
         return renderApp(params, {
@@ -51,6 +58,7 @@ export class StateContainersExamplesPlugin implements Plugin {
     core.application.register({
       id: PLUGIN_ID,
       title: PLUGIN_NAME,
+      navLinkStatus: AppNavLinkStatus.hidden,
       async mount(params: AppMountParameters) {
         // Load application bundle
         const { renderApp } = await import('./with_data_services/application');
@@ -60,6 +68,62 @@ export class StateContainersExamplesPlugin implements Plugin {
         return renderApp(coreStart, depsStart as AppPluginDependencies, params);
       },
     });
+
+    developerExamples.register({
+      appId: 'stateContainersExampleBrowserHistory',
+      title: 'State containers using browser history',
+      description: `An example todo app that uses browser history and state container utilities like createStateContainerReactHelpers,
+       createStateContainer, createKbnUrlStateStorage, createSessionStorageStateStorage,
+       syncStates and getStateFromKbnUrl to keep state in sync with the URL. Change some parameters, navigate away and then back, and the
+       state should be preserved.`,
+      links: [
+        {
+          label: 'README',
+          href:
+            'https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_containers/README.md',
+          iconType: 'logoGithub',
+          size: 's',
+          target: '_blank',
+        },
+      ],
+    });
+
+    developerExamples.register({
+      appId: 'stateContainersExampleHashHistory',
+      title: 'State containers using hash history',
+      description: `An example todo app that uses hash history and state container utilities like createStateContainerReactHelpers,
+       createStateContainer, createKbnUrlStateStorage, createSessionStorageStateStorage,
+       syncStates and getStateFromKbnUrl to keep state in sync with the URL. Change some parameters, navigate away and then back, and the
+       state should be preserved.`,
+      links: [
+        {
+          label: 'README',
+          href:
+            'https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_containers/README.md',
+          iconType: 'logoGithub',
+          size: 's',
+          target: '_blank',
+        },
+      ],
+    });
+
+    developerExamples.register({
+      appId: PLUGIN_ID,
+      title: 'Sync state from a query bar with the url',
+      description: `Shows how to use data.syncQueryStateWitUrl in combination  with state container utilities from kibana_utils to
+      show a query bar that stores state in the url and is kept in  sync. 
+      `,
+      links: [
+        {
+          label: 'README',
+          href:
+            'https://github.com/elastic/kibana/blob/master/src/plugins/data/public/query/state_sync/README.md',
+          iconType: 'logoGithub',
+          size: 's',
+          target: '_blank',
+        },
+      ],
+    });
   }
 
   public start() {}

examples/state_containers_examples/public/with_data_services/application.tsx

@@ -27,7 +27,7 @@ import { createKbnUrlStateStorage } from '../../../../src/plugins/kibana_utils/p
 export const renderApp = (
   { notifications, http }: CoreStart,
   { navigation, data }: AppPluginDependencies,
-  { appBasePath, element, history }: AppMountParameters
+  { element, history }: AppMountParameters
 ) => {
   const kbnUrlStateStorage = createKbnUrlStateStorage({ useHash: false, history });
 

examples/state_containers_examples/public/with_data_services/components/app.tsx

@@ -78,14 +78,7 @@ const {
   useContainer: useAppStateContainer,
 } = createStateContainerReactHelpers<ReduxLikeStateContainer<AppState>>();
 
-const App = ({
-  notifications,
-  http,
-  navigation,
-  data,
-  history,
-  kbnUrlStateStorage,
-}: StateDemoAppDeps) => {
+const App = ({ navigation, data, history, kbnUrlStateStorage }: StateDemoAppDeps) => {
   const appStateContainer = useAppStateContainer();
   const appState = useAppState();