Migrate test plugins ⇒ NP (kbn_tp_top_nav) (#60092)

* Migrated top nav plugin test to the new platform

* Removed old plugin. Some refactoring.

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

test/plugin_functional/plugins/kbn_top_nav/kibana.json

@@ -0,0 +1,9 @@
+{
+  "id": "kbn_top_nav",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "configPath": ["kbn_top_nav"],
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["navigation"]
+}

test/plugin_functional/plugins/kbn_top_nav/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "kbn_top_nav",
+  "version": "1.0.0",
+  "main": "target/test/plugin_functional/plugins/kbn_top_nav",
+  "kibana": {
+    "version": "kibana",
+    "templateVersion": "1.0.0"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "kbn": "node ../../../../scripts/kbn.js",
+    "build": "rm -rf './target' && tsc"
+  },
+  "devDependencies": {
+    "typescript": "3.7.2"
+  }
+}
+

test/plugin_functional/plugins/kbn_top_nav/public/application.tsx

@@ -18,11 +18,15 @@
  */
 
 import React from 'react';
-import './initialize';
-import { npStart } from 'ui/new_platform';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { AppMountParameters } from 'kibana/public';
+import { AppPluginDependencies } from './types';
 
-export const AppWithTopNav = () => {
-  const { TopNavMenu } = npStart.plugins.navigation.ui;
+export const renderApp = (
+  depsStart: AppPluginDependencies,
+  { appBasePath, element }: AppMountParameters
+) => {
+  const { TopNavMenu } = depsStart.navigation.ui;
   const config = [
     {
       id: 'new',
@@ -32,10 +36,12 @@ export const AppWithTopNav = () => {
       testId: 'demoNewButton',
     },
   ];
-
-  return (
+  render(
     <TopNavMenu appName="demo-app" config={config}>
       Hey
-    </TopNavMenu>
+    </TopNavMenu>,
+    element
   );
+
+  return () => unmountComponentAtNode(element);
 };

test/plugin_functional/plugins/kbn_top_nav/public/index.ts

@@ -17,25 +17,8 @@
  * under the License.
  */
 
-import { npSetup } from 'ui/new_platform';
+import { PluginInitializer } from 'kibana/public';
+import { TopNavTestPlugin, TopNavTestPluginSetup, TopNavTestPluginStart } from './plugin';
 
-const customExtension = {
-  id: 'registered-prop',
-  label: 'Registered Button',
-  description: 'Registered Demo',
-  run() {},
-  testId: 'demoRegisteredNewButton',
-};
-
-npSetup.plugins.navigation.registerMenuItem(customExtension);
-
-const customDiscoverExtension = {
-  id: 'registered-discover-prop',
-  label: 'Registered Discover Button',
-  description: 'Registered Discover Demo',
-  run() {},
-  testId: 'demoDiscoverRegisteredNewButton',
-  appName: 'discover',
-};
-
-npSetup.plugins.navigation.registerMenuItem(customDiscoverExtension);
+export const plugin: PluginInitializer<TopNavTestPluginSetup, TopNavTestPluginStart> = () =>
+  new TopNavTestPlugin();

test/plugin_functional/plugins/kbn_top_nav/public/plugin.tsx

@@ -0,0 +1,65 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { CoreSetup, Plugin, AppMountParameters } from 'kibana/public';
+import { NavigationPublicPluginSetup } from '../../../../../src/plugins/navigation/public';
+import { AppPluginDependencies } from './types';
+
+export class TopNavTestPlugin implements Plugin<TopNavTestPluginSetup, TopNavTestPluginStart> {
+  public setup(core: CoreSetup, { navigation }: { navigation: NavigationPublicPluginSetup }) {
+    const customExtension = {
+      id: 'registered-prop',
+      label: 'Registered Button',
+      description: 'Registered Demo',
+      run() {},
+      testId: 'demoRegisteredNewButton',
+    };
+
+    navigation.registerMenuItem(customExtension);
+
+    const customDiscoverExtension = {
+      id: 'registered-discover-prop',
+      label: 'Registered Discover Button',
+      description: 'Registered Discover Demo',
+      run() {},
+      testId: 'demoDiscoverRegisteredNewButton',
+      appName: 'discover',
+    };
+
+    navigation.registerMenuItem(customDiscoverExtension);
+
+    core.application.register({
+      id: 'topNavMenu',
+      title: 'Top nav menu example',
+      async mount(params: AppMountParameters) {
+        const { renderApp } = await import('./application');
+        const services = await core.getStartServices();
+        return renderApp(services[1] as AppPluginDependencies, params);
+      },
+    });
+
+    return {};
+  }
+
+  public start() {}
+  public stop() {}
+}
+
+export type TopNavTestPluginSetup = ReturnType<TopNavTestPlugin['setup']>;
+export type TopNavTestPluginStart = ReturnType<TopNavTestPlugin['start']>;

test/plugin_functional/plugins/kbn_top_nav/public/types.ts

@@ -17,15 +17,8 @@
  * under the License.
  */
 
-export default function(kibana) {
-  return new kibana.Plugin({
-    uiExports: {
-      app: {
-        title: 'Top Nav Menu test',
-        description: 'This is a sample plugin for the functional tests.',
-        main: 'plugins/kbn_tp_top_nav/app',
-      },
-      hacks: ['plugins/kbn_tp_top_nav/initialize'],
-    },
-  });
+import { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public';
+
+export interface AppPluginDependencies {
+  navigation: NavigationPublicPluginStart;
 }

test/plugin_functional/plugins/kbn_tp_top_nav/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "kbn_tp_top_nav",
-  "version": "1.0.0",
-  "kibana": {
-    "version": "kibana",
-    "templateVersion": "1.0.0"
-  },
-  "license": "Apache-2.0"
-}

test/plugin_functional/plugins/kbn_tp_top_nav/public/app.js

@@ -1,54 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
-
-import { uiModules } from 'ui/modules';
-import chrome from 'ui/chrome';
-
-// This is required so some default styles and required scripts/Angular modules are loaded,
-// or the timezone setting is correctly applied.
-import 'ui/autoload/all';
-
-import { AppWithTopNav } from './top_nav';
-
-const app = uiModules.get('apps/topnavDemoPlugin', ['kibana']);
-
-app.config($locationProvider => {
-  $locationProvider.html5Mode({
-    enabled: false,
-    requireBase: false,
-    rewriteLinks: false,
-  });
-});
-
-function RootController($scope, $element) {
-  const domNode = $element[0];
-
-  // render react to DOM
-  render(<AppWithTopNav />, domNode);
-
-  // unmount react on controller destroy
-  $scope.$on('$destroy', () => {
-    unmountComponentAtNode(domNode);
-  });
-}
-
-chrome.setRootController('topnavDemoPlugin', RootController);