[Discover] Migrate angular routing to react router

src/plugins/discover/public/application/angular/create_discover_directive.ts

@@ -5,11 +5,11 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { DiscoverMainApp } from '../apps/main';
+import { DiscoverMainRoute } from '../apps/main';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function createDiscoverDirective(reactDirective: any) {
-  return reactDirective(DiscoverMainApp, [
+  return reactDirective(DiscoverMainRoute, [
     ['indexPattern', { watchDepth: 'reference' }],
     ['opts', { watchDepth: 'reference' }],
   ]);

src/plugins/discover/public/application/angular/discover.js

@@ -6,106 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { i18n } from '@kbn/i18n';
-import { getState } from '../apps/main/services/discover_state';
-import indexTemplateLegacy from './discover_legacy.html';
-import {
-  getAngularModule,
-  getServices,
-  getUrlTracker,
-  redirectWhenMissing,
-} from '../../kibana_services';
-import { getRootBreadcrumbs, getSavedSearchBreadcrumbs } from '../helpers/breadcrumbs';
-import { loadIndexPattern, resolveIndexPattern } from '../apps/main/utils/resolve_index_pattern';
+import { getAngularModule, getServices } from '../../kibana_services';
 
 const services = getServices();
 
-const {
-  core,
-  capabilities,
-  chrome,
-  data,
-  history: getHistory,
-  toastNotifications,
-  uiSettings: config,
-} = getServices();
+const { history: getHistory } = getServices();
 
 const app = getAngularModule();
 
-app.config(($routeProvider) => {
-  const defaults = {
-    requireDefaultIndex: true,
-    requireUICapability: 'discover.show',
-    k7Breadcrumbs: ($route, $injector) =>
-      $injector.invoke($route.current.params.id ? getSavedSearchBreadcrumbs : getRootBreadcrumbs),
-    badge: () => {
-      if (capabilities.discover.save) {
-        return undefined;
-      }
-
-      return {
-        text: i18n.translate('discover.badge.readOnly.text', {
-          defaultMessage: 'Read only',
-        }),
-        tooltip: i18n.translate('discover.badge.readOnly.tooltip', {
-          defaultMessage: 'Unable to save searches',
-        }),
-        iconType: 'glasses',
-      };
-    },
-  };
-  const discoverRoute = {
-    ...defaults,
-    template: indexTemplateLegacy,
-    reloadOnSearch: false,
-    resolve: {
-      savedObjects: function ($route, Promise) {
-        const history = getHistory();
-        const savedSearchId = $route.current.params.id;
-        return data.indexPatterns.ensureDefaultIndexPattern(history).then(() => {
-          const { appStateContainer } = getState({ history, uiSettings: config });
-          const { index } = appStateContainer.getState();
-          return Promise.props({
-            ip: loadIndexPattern(index, data.indexPatterns, config),
-            savedSearch: getServices()
-              .getSavedSearchById(savedSearchId)
-              .then((savedSearch) => {
-                if (savedSearchId) {
-                  chrome.recentlyAccessed.add(
-                    savedSearch.getFullPath(),
-                    savedSearch.title,
-                    savedSearchId
-                  );
-                }
-                return savedSearch;
-              })
-              .catch(
-                redirectWhenMissing({
-                  history,
-                  navigateToApp: core.application.navigateToApp,
-                  mapping: {
-                    search: '/',
-                    'index-pattern': {
-                      app: 'management',
-                      path: `kibana/objects/savedSearches/${$route.current.params.id}`,
-                    },
-                  },
-                  toastNotifications,
-                  onBeforeRedirect() {
-                    getUrlTracker().setTrackedUrl('/');
-                  },
-                })
-              ),
-          });
-        });
-      },
-    },
-  };
-
-  $routeProvider.when('/view/:id?', discoverRoute);
-  $routeProvider.when('/', discoverRoute);
-});
-
 app.directive('discoverApp', function () {
   return {
     restrict: 'E',
@@ -114,30 +22,18 @@ app.directive('discoverApp', function () {
   };
 });
 
-function discoverController($route, $scope) {
-  const savedSearch = $route.current.locals.savedObjects.savedSearch;
-  $scope.indexPattern = resolveIndexPattern(
-    $route.current.locals.savedObjects.ip,
-    savedSearch.searchSource,
-    toastNotifications
-  );
-
+function discoverController(_, $scope) {
   const history = getHistory();
 
   $scope.opts = {
-    savedSearch,
     history,
     services,
-    indexPatternList: $route.current.locals.savedObjects.ip.list,
     navigateTo: (path) => {
       $scope.$evalAsync(() => {
         history.push(path);
       });
     },
   };
 
-  $scope.$on('$destroy', () => {
-    savedSearch.destroy();
-    data.search.session.clear();
-  });
+  $scope.$on('$destroy', () => {});
 }

src/plugins/discover/public/application/angular/get_inner_angular.ts

@@ -16,7 +16,7 @@ import 'angular-sanitize';
 import { EuiIcon } from '@elastic/eui';
 import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';
 import { CoreStart, PluginInitializerContext } from 'kibana/public';
-import { DataPublicPluginStart } from '../../../../data/public';
+import { DataPublicPluginStart } from 'src/plugins/data/public';
 import { Storage } from '../../../../kibana_utils/public';
 import { NavigationPublicPluginStart as NavigationStart } from '../../../../navigation/public';
 import { createDocTableDirective } from './doc_table';
@@ -108,7 +108,6 @@ export function initializeInnerAngularModule(
   return angular
     .module(name, [
       'ngSanitize',
-      'ngRoute',
       'react',
       'ui.bootstrap',
       'discoverI18n',

src/plugins/discover/public/application/angular/index.ts

@@ -8,11 +8,6 @@
 
 // required for i18nIdDirective
 import 'angular-sanitize';
-// required for ngRoute
-import 'angular-route';
 
 import './discover';
-import './doc';
-import './context';
 import './doc_viewer';
-import './redirect';

src/plugins/discover/public/application/application.ts

@@ -7,25 +7,36 @@
  */
 
 import './index.scss';
-import angular from 'angular';
+import { renderApp as renderReactApp } from './index';
 
 /**
  * Here's where Discover's inner angular is mounted and rendered
  */
 export async function renderApp(moduleName: string, element: HTMLElement) {
   await import('./angular');
-  const $injector = mountDiscoverApp(moduleName, element);
-  return () => $injector.get('$rootScope').$destroy();
+  const app = mountDiscoverApp(moduleName, element);
+  return () => {
+    app();
+  };
 }
 
-function mountDiscoverApp(moduleName: string, element: HTMLElement) {
-  const mountpoint = document.createElement('div');
+function buildDiscoverElement(mountpoint: HTMLElement) {
+  // due to legacy angular tags, we need some manual DOM intervention here
   const appWrapper = document.createElement('div');
   appWrapper.setAttribute('ng-view', '');
+  const discoverApp = document.createElement('discover-app');
+  const discover = document.createElement('discover');
+  appWrapper.appendChild(discoverApp);
+  discoverApp.append(discover);
   mountpoint.appendChild(appWrapper);
-  // bootstrap angular into detached element and attach it later to
-  // make angular-within-angular possible
-  const $injector = angular.bootstrap(mountpoint, [moduleName]);
+  return discover;
+}
+
+function mountDiscoverApp(moduleName: string, element: HTMLElement) {
+  const mountpoint = document.createElement('div');
+  const discoverElement = buildDiscoverElement(mountpoint);
+  // @ts-expect-error
+  const app = renderReactApp({ element: discoverElement });
   element.appendChild(mountpoint);
-  return $injector;
+  return app;
 }