move the example app to be mounted in the developerExamples plugin instead of visible in navbar (#101464) (#102052)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>

examples/screenshot_mode_example/kibana.json

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

examples/screenshot_mode_example/public/plugin.ts

@@ -6,7 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
+import {
+  AppMountParameters,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  AppNavLinkStatus,
+} from '../../../src/core/public';
 import { AppPluginSetupDependencies, AppPluginStartDependencies } from './types';
 import { MetricsTracking } from './services';
 import { PLUGIN_NAME } from '../common';
@@ -15,7 +21,7 @@ export class ScreenshotModeExamplePlugin implements Plugin<void, void> {
   uiTracking = new MetricsTracking();
 
   public setup(core: CoreSetup, depsSetup: AppPluginSetupDependencies): void {
-    const { screenshotMode, usageCollection } = depsSetup;
+    const { screenshotMode, usageCollection, developerExamples } = depsSetup;
     const isScreenshotMode = screenshotMode.isScreenshotMode();
 
     this.uiTracking.setup({
@@ -27,6 +33,7 @@ export class ScreenshotModeExamplePlugin implements Plugin<void, void> {
     core.application.register({
       id: 'screenshotModeExample',
       title: PLUGIN_NAME,
+      navLinkStatus: AppNavLinkStatus.hidden,
       async mount(params: AppMountParameters) {
         // Load application bundle
         const { renderApp } = await import('./application');
@@ -40,6 +47,13 @@ export class ScreenshotModeExamplePlugin implements Plugin<void, void> {
         return renderApp(coreStart, depsSetup, depsStart as AppPluginStartDependencies, params);
       },
     });
+
+    developerExamples.register({
+      appId: 'screenshotModeExample',
+      title: 'Screenshot mode integration',
+      description:
+        'Demonstrate how a plugin can adapt appearance based on whether we are in screenshot mode',
+    });
   }
 
   public start(core: CoreStart): void {}

examples/screenshot_mode_example/public/types.ts

@@ -9,10 +9,12 @@
 import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
 import { ScreenshotModePluginSetup } from '../../../src/plugins/screenshot_mode/public';
 import { UsageCollectionSetup } from '../../../src/plugins/usage_collection/public';
+import { DeveloperExamplesSetup } from '../../developer_examples/public';
 
 export interface AppPluginSetupDependencies {
   usageCollection: UsageCollectionSetup;
   screenshotMode: ScreenshotModePluginSetup;
+  developerExamples: DeveloperExamplesSetup;
 }
 
 export interface AppPluginStartDependencies {