[NP] Remove kbnUrl usage in discover/dashboard/visualize (#60016)

* Remove kbnUrl usages from disciver/dashboard/visualize

* Remove kbnUrl usage in angular_config

* Wrap with encodeURIComponent

* Fix reloading when base path

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

src/legacy/core_plugins/kibana/public/dashboard/legacy_imports.ts

@@ -25,17 +25,9 @@
  */
 
 export { npSetup, npStart } from 'ui/new_platform';
-
-export { KbnUrl } from 'ui/url/kbn_url';
-// @ts-ignore
-export { KbnUrlProvider } from 'ui/url/index';
-export { IInjector } from 'ui/chrome';
 export { absoluteToParsedUrl } from 'ui/url/absolute_to_parsed_url';
 export {
   configureAppAngularModule,
-  IPrivate,
   migrateLegacyQuery,
-  PrivateProvider,
-  PromiseServiceCreator,
   subscribeWithScope,
 } from '../../../../../plugins/kibana_legacy/public';

src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts

@@ -29,13 +29,7 @@ import {
   PluginInitializerContext,
 } from 'kibana/public';
 import { Storage } from '../../../../../../plugins/kibana_utils/public';
-import {
-  configureAppAngularModule,
-  IPrivate,
-  KbnUrlProvider,
-  PrivateProvider,
-  PromiseServiceCreator,
-} from '../legacy_imports';
+import { configureAppAngularModule } from '../legacy_imports';
 // @ts-ignore
 import { initDashboardApp } from './legacy_app';
 import { EmbeddableStart } from '../../../../../../plugins/embeddable/public';
@@ -116,10 +110,7 @@ function mountDashboardApp(appBasePath: string, element: HTMLElement) {
 
 function createLocalAngularModule(core: AppMountContext['core'], navigation: NavigationStart) {
   createLocalI18nModule();
-  createLocalPrivateModule();
-  createLocalPromiseModule();
   createLocalConfigModule(core);
-  createLocalKbnUrlModule();
   createLocalTopNavModule(navigation);
   createLocalIconModule();
 
@@ -127,10 +118,7 @@ function createLocalAngularModule(core: AppMountContext['core'], navigation: Nav
     ...thirdPartyAngularDependencies,
     'app/dashboard/Config',
     'app/dashboard/I18n',
-    'app/dashboard/Private',
     'app/dashboard/TopNav',
-    'app/dashboard/KbnUrl',
-    'app/dashboard/Promise',
     'app/dashboard/icon',
   ]);
   return dashboardAngularModule;
@@ -142,14 +130,8 @@ function createLocalIconModule() {
     .directive('icon', reactDirective => reactDirective(EuiIcon));
 }
 
-function createLocalKbnUrlModule() {
-  angular
-    .module('app/dashboard/KbnUrl', ['app/dashboard/Private', 'ngRoute'])
-    .service('kbnUrl', (Private: IPrivate) => Private(KbnUrlProvider));
-}
-
 function createLocalConfigModule(core: AppMountContext['core']) {
-  angular.module('app/dashboard/Config', ['app/dashboard/Private']).provider('config', () => {
+  angular.module('app/dashboard/Config', []).provider('config', () => {
     return {
       $get: () => ({
         get: core.uiSettings.get.bind(core.uiSettings),
@@ -158,14 +140,6 @@ function createLocalConfigModule(core: AppMountContext['core']) {
   });
 }
 
-function createLocalPromiseModule() {
-  angular.module('app/dashboard/Promise', []).service('Promise', PromiseServiceCreator);
-}
-
-function createLocalPrivateModule() {
-  angular.module('app/dashboard/Private', []).provider('Private', PrivateProvider);
-}
-
 function createLocalTopNavModule(navigation: NavigationStart) {
   angular
     .module('app/dashboard/TopNav', ['react'])

src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx

@@ -21,8 +21,6 @@ import moment from 'moment';
 import { Subscription } from 'rxjs';
 import { History } from 'history';
 
-import { IInjector } from '../legacy_imports';
-
 import { ViewMode } from '../../../../embeddable_api/public/np_ready/public';
 import { SavedObjectDashboard } from '../saved_dashboard/saved_dashboard';
 import { DashboardAppState, SavedDashboardPanel } from './types';
@@ -86,28 +84,26 @@ export interface DashboardAppScope extends ng.IScope {
 }
 
 export function initDashboardAppDirective(app: any, deps: RenderDeps) {
-  app.directive('dashboardApp', function($injector: IInjector) {
-    return {
-      restrict: 'E',
-      controllerAs: 'dashboardApp',
-      controller: (
-        $scope: DashboardAppScope,
-        $route: any,
-        $routeParams: {
-          id?: string;
-        },
-        kbnUrlStateStorage: IKbnUrlStateStorage,
-        history: History
-      ) =>
-        new DashboardAppController({
-          $route,
-          $scope,
-          $routeParams,
-          indexPatterns: deps.data.indexPatterns,
-          kbnUrlStateStorage,
-          history,
-          ...deps,
-        }),
-    };
-  });
+  app.directive('dashboardApp', () => ({
+    restrict: 'E',
+    controllerAs: 'dashboardApp',
+    controller: (
+      $scope: DashboardAppScope,
+      $route: any,
+      $routeParams: {
+        id?: string;
+      },
+      kbnUrlStateStorage: IKbnUrlStateStorage,
+      history: History
+    ) =>
+      new DashboardAppController({
+        $route,
+        $scope,
+        $routeParams,
+        indexPatterns: deps.data.indexPatterns,
+        kbnUrlStateStorage,
+        history,
+        ...deps,
+      }),
+  }));
 }

src/legacy/core_plugins/kibana/public/dashboard/np_ready/legacy_app.js

@@ -18,6 +18,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { parse } from 'query-string';
 
 import dashboardTemplate from './dashboard_app.html';
 import dashboardListingTemplate from './listing/dashboard_listing_ng_wrapper.html';
@@ -93,9 +94,8 @@ export function initDashboardApp(app, deps) {
       .when(DashboardConstants.LANDING_PAGE_PATH, {
         ...defaults,
         template: dashboardListingTemplate,
-        controller($injector, $location, $scope, kbnUrlStateStorage) {
+        controller($scope, kbnUrlStateStorage, history) {
           const service = deps.savedDashboards;
-          const kbnUrl = $injector.get('kbnUrl');
           const dashboardConfig = deps.dashboardConfig;
 
           // syncs `_g` portion of url with query services
@@ -106,13 +106,13 @@ export function initDashboardApp(app, deps) {
 
           $scope.listingLimit = deps.uiSettings.get('savedObjects:listingLimit');
           $scope.create = () => {
-            kbnUrl.redirect(DashboardConstants.CREATE_NEW_DASHBOARD_URL);
+            history.push(DashboardConstants.CREATE_NEW_DASHBOARD_URL);
           };
           $scope.find = search => {
             return service.find(search, $scope.listingLimit);
           };
           $scope.editItem = ({ id }) => {
-            kbnUrl.redirect(`${createDashboardEditUrl(id)}?_a=(viewMode:edit)`);
+            history.push(`${createDashboardEditUrl(id)}?_a=(viewMode:edit)`);
           };
           $scope.getViewUrl = ({ id }) => {
             return deps.addBasePath(`#${createDashboardEditUrl(id)}`);
@@ -121,7 +121,7 @@ export function initDashboardApp(app, deps) {
             return service.delete(dashboards.map(d => d.id));
           };
           $scope.hideWriteControls = dashboardConfig.getHideWriteControls();
-          $scope.initialFilter = $location.search().filter || EMPTY_FILTER;
+          $scope.initialFilter = parse(history.location.search).filter || EMPTY_FILTER;
           deps.chrome.setBreadcrumbs([
             {
               text: i18n.translate('kbn.dashboard.dashboardBreadcrumbsTitle', {
@@ -191,7 +191,7 @@ export function initDashboardApp(app, deps) {
         template: dashboardTemplate,
         controller: createNewDashboardCtrl,
         resolve: {
-          dash: function($route, kbnUrl, history) {
+          dash: function($route, history) {
             const id = $route.current.params.id;
 
             return ensureDefaultIndexPattern(deps.core, deps.data, history)
@@ -208,7 +208,7 @@ export function initDashboardApp(app, deps) {
                 // A corrupt dashboard was detected (e.g. with invalid JSON properties)
                 if (error instanceof InvalidJSONProperty) {
                   deps.core.notifications.toasts.addDanger(error.message);
-                  kbnUrl.redirect(DashboardConstants.LANDING_PAGE_PATH);
+                  history.push(DashboardConstants.LANDING_PAGE_PATH);
                   return;
                 }
 

src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts

@@ -24,8 +24,6 @@ import angular from 'angular';
 import { EuiIcon } from '@elastic/eui';
 import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';
 import { CoreStart, LegacyCoreStart } from 'kibana/public';
-// @ts-ignore
-import { KbnUrlProvider } from 'ui/url';
 import { DataPublicPluginStart } from '../../../../../plugins/data/public';
 import { Storage } from '../../../../../plugins/kibana_utils/public';
 import { NavigationPublicPluginStart as NavigationStart } from '../../../../../plugins/navigation/public';
@@ -59,7 +57,6 @@ import { createRenderCompleteDirective } from './np_ready/angular/directives/ren
 import {
   initAngularBootstrap,
   configureAppAngularModule,
-  IPrivate,
   KbnAccessibleClickProvider,
   PrivateProvider,
   PromiseServiceCreator,
@@ -106,7 +103,6 @@ export function initializeInnerAngularModule(
     createLocalI18nModule();
     createLocalPrivateModule();
     createLocalPromiseModule();
-    createLocalKbnUrlModule();
     createLocalTopNavModule(navigation);
     createLocalStorageModule();
     createElasticSearchModule(data);
@@ -166,12 +162,6 @@ export function initializeInnerAngularModule(
     .service('debounce', ['$timeout', DebounceProviderTimeout]);
 }
 
-function createLocalKbnUrlModule() {
-  angular
-    .module('discoverKbnUrl', ['discoverPrivate', 'ngRoute'])
-    .service('kbnUrl', (Private: IPrivate) => Private(KbnUrlProvider));
-}
-
 function createLocalPromiseModule() {
   angular.module('discoverPromise', []).service('Promise', PromiseServiceCreator);
 }
@@ -223,7 +213,7 @@ function createPagerFactoryModule() {
 
 function createDocTableModule() {
   angular
-    .module('discoverDocTable', ['discoverKbnUrl', 'discoverPagerFactory', 'react'])
+    .module('discoverDocTable', ['discoverPagerFactory', 'react'])
     .directive('docTable', createDocTableDirective)
     .directive('kbnTableHeader', createTableHeaderDirective)
     .directive('toolBarPagerText', createToolBarPagerTextDirective)

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js

@@ -184,7 +184,6 @@ function discoverController(
   $timeout,
   $window,
   Promise,
-  kbnUrl,
   localStorage,
   uiCapabilities
 ) {
@@ -255,6 +254,15 @@ function discoverController(
     }
   });
 
+  // this listener is waiting for such a path http://localhost:5601/app/kibana#/discover
+  // which could be set through pressing "New" button in top nav or go to "Discover" plugin from the sidebar
+  // to reload the page in a right way
+  const unlistenHistoryBasePath = history.listen(({ pathname, search, hash }) => {
+    if (!search && !hash && pathname === '/discover') {
+      $route.reload();
+    }
+  });
+
   $scope.setIndexPattern = async id => {
     await replaceUrlAppState({ index: id });
     $route.reload();
@@ -310,6 +318,7 @@ function discoverController(
     stopStateSync();
     stopSyncingGlobalStateWithUrl();
     stopSyncingQueryAppStateWithStateContainer();
+    unlistenHistoryBasePath();
   });
 
   const getTopNavLinks = () => {
@@ -323,7 +332,7 @@ function discoverController(
       }),
       run: function() {
         $scope.$evalAsync(() => {
-          kbnUrl.change('/discover');
+          history.push('/discover');
         });
       },
       testId: 'discoverNewButton',
@@ -391,9 +400,7 @@ function discoverController(
       testId: 'discoverOpenButton',
       run: () => {
         showOpenSearchPanel({
-          makeUrl: searchId => {
-            return kbnUrl.eval('#/discover/{{id}}', { id: searchId });
-          },
+          makeUrl: searchId => `#/discover/${encodeURIComponent(searchId)}`,
           I18nContext: core.i18n.Context,
         });
       },
@@ -751,7 +758,7 @@ function discoverController(
           });
 
           if (savedSearch.id !== $route.current.params.id) {
-            kbnUrl.change('/discover/{{id}}', { id: savedSearch.id });
+            history.push(`/discover/${encodeURIComponent(savedSearch.id)}`);
           } else {
             // Update defaults so that "reload saved query" functions correctly
             setAppState(getStateDefaults());
@@ -921,11 +928,11 @@ function discoverController(
   };
 
   $scope.resetQuery = function() {
-    kbnUrl.change('/discover/{{id}}', { id: $route.current.params.id });
+    history.push(`/discover/${encodeURIComponent($route.current.params.id)}`);
   };
 
   $scope.newQuery = function() {
-    kbnUrl.change('/discover');
+    history.push('/discover');
   };
 
   $scope.updateDataSource = () => {

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc_table/components/table_row.ts

@@ -41,11 +41,7 @@ interface LazyScope extends ng.IScope {
   [key: string]: any;
 }
 
-export function createTableRowDirective(
-  $compile: ng.ICompileService,
-  $httpParamSerializer: any,
-  kbnUrl: any
-) {
+export function createTableRowDirective($compile: ng.ICompileService, $httpParamSerializer: any) {
   const cellTemplate = _.template(noWhiteSpace(cellTemplateHtml));
   const truncateByHeightTemplate = _.template(noWhiteSpace(truncateByHeightTemplateHtml));
 
@@ -110,10 +106,9 @@ export function createTableRowDirective(
       };
 
       $scope.getContextAppHref = () => {
-        const path = kbnUrl.eval('#/discover/context/{{ indexPattern }}/{{ anchorId }}', {
-          anchorId: $scope.row._id,
-          indexPattern: $scope.indexPattern.id,
-        });
+        const path = `#/discover/context/${encodeURIComponent(
+          $scope.indexPattern.id
+        )}/${encodeURIComponent($scope.row._id)}`;
         const globalFilters: any = getServices().filterManager.getGlobalFilters();
         const appFilters: any = getServices().filterManager.getAppFilters();
         const hash = $httpParamSerializer({

src/legacy/core_plugins/kibana/public/visualize/legacy_imports.ts

@@ -24,8 +24,6 @@
  * directly where they are needed.
  */
 
-// @ts-ignore
-export { KbnUrlProvider } from 'ui/url';
 export { absoluteToParsedUrl } from 'ui/url/absolute_to_parsed_url';
 export { KibanaParsedUrl } from 'ui/url/kibana_parsed_url';
 export { wrapInI18nContext } from 'ui/i18n';
@@ -33,9 +31,6 @@ export { DashboardConstants } from '../dashboard/np_ready/dashboard_constants';
 export { VisSavedObject, VISUALIZE_EMBEDDABLE_TYPE } from '../../../visualizations/public/';
 export {
   configureAppAngularModule,
-  IPrivate,
   migrateLegacyQuery,
-  PrivateProvider,
-  PromiseServiceCreator,
   subscribeWithScope,
 } from '../../../../../plugins/kibana_legacy/public';

src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts

@@ -21,13 +21,7 @@ import angular, { IModule } from 'angular';
 import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';
 
 import { AppMountContext } from 'kibana/public';
-import {
-  configureAppAngularModule,
-  KbnUrlProvider,
-  IPrivate,
-  PrivateProvider,
-  PromiseServiceCreator,
-} from '../legacy_imports';
+import { configureAppAngularModule } from '../legacy_imports';
 import { NavigationPublicPluginStart as NavigationStart } from '../../../../../../plugins/navigation/public';
 import {
   createTopNavDirective,
@@ -82,36 +76,16 @@ function mountVisualizeApp(appBasePath: string, element: HTMLElement) {
 
 function createLocalAngularModule(core: AppMountContext['core'], navigation: NavigationStart) {
   createLocalI18nModule();
-  createLocalPrivateModule();
-  createLocalPromiseModule();
-  createLocalKbnUrlModule();
   createLocalTopNavModule(navigation);
 
   const visualizeAngularModule: IModule = angular.module(moduleName, [
     ...thirdPartyAngularDependencies,
     'app/visualize/I18n',
-    'app/visualize/Private',
     'app/visualize/TopNav',
-    'app/visualize/KbnUrl',
-    'app/visualize/Promise',
   ]);
   return visualizeAngularModule;
 }
 
-function createLocalKbnUrlModule() {
-  angular
-    .module('app/visualize/KbnUrl', ['app/visualize/Private', 'ngRoute'])
-    .service('kbnUrl', (Private: IPrivate) => Private(KbnUrlProvider));
-}
-
-function createLocalPromiseModule() {
-  angular.module('app/visualize/Promise', []).service('Promise', PromiseServiceCreator);
-}
-
-function createLocalPrivateModule() {
-  angular.module('app/visualize/Private', []).provider('Private', PrivateProvider);
-}
-
 function createLocalTopNavModule(navigation: NavigationStart) {
   angular
     .module('app/visualize/TopNav', ['react'])

src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js

@@ -30,7 +30,7 @@ import { VisualizeConstants } from '../visualize_constants';
 import { getEditBreadcrumbs } from '../breadcrumbs';
 
 import { addHelpMenuToAppChrome } from '../help_menu/help_menu_util';
-import { unhashUrl } from '../../../../../../../plugins/kibana_utils/public';
+import { unhashUrl, removeQueryParam } from '../../../../../../../plugins/kibana_utils/public';
 import { MarkdownSimple, toMountPoint } from '../../../../../../../plugins/kibana_react/public';
 import { addFatalError, kbnBaseUrl } from '../../../../../../../plugins/kibana_legacy/public';
 import {
@@ -69,16 +69,7 @@ export function initEditorDirective(app, deps) {
   initVisualizationDirective(app, deps);
 }
 
-function VisualizeAppController(
-  $scope,
-  $route,
-  $window,
-  $injector,
-  $timeout,
-  kbnUrl,
-  kbnUrlStateStorage,
-  history
-) {
+function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlStateStorage, history) {
   const {
     indexPatterns,
     localStorage,
@@ -421,7 +412,7 @@ function VisualizeAppController(
 
     const addToDashMode =
       $route.current.params[DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM];
-    kbnUrl.removeParam(DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM);
+    removeQueryParam(history, DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM);
 
     $scope.isAddToDashMode = () => addToDashMode;
 
@@ -639,10 +630,10 @@ function VisualizeAppController(
               const savedVisualizationParsedUrl = new KibanaParsedUrl({
                 basePath: getBasePath(),
                 appId: kbnBaseUrl.slice('/app/'.length),
-                appPath: kbnUrl.eval(`${VisualizeConstants.EDIT_PATH}/{{id}}`, { id: savedVis.id }),
+                appPath: `${VisualizeConstants.EDIT_PATH}/${encodeURIComponent(savedVis.id)}`,
               });
               // Manually insert a new url so the back button will open the saved visualization.
-              $window.history.pushState({}, '', savedVisualizationParsedUrl.getRootRelativePath());
+              history.replace(savedVisualizationParsedUrl.appPath);
               setActiveUrl(savedVisualizationParsedUrl.appPath);
 
               const lastDashboardAbsoluteUrl = chrome.navLinks.get('kibana:dashboard').url;
@@ -658,7 +649,7 @@ function VisualizeAppController(
                 DashboardConstants.ADD_EMBEDDABLE_ID,
                 savedVis.id
               );
-              kbnUrl.change(dashboardParsedUrl.appPath);
+              history.push(dashboardParsedUrl.appPath);
             } else if (savedVis.id === $route.current.params.id) {
               chrome.docTitle.change(savedVis.lastSavedTitle);
               chrome.setBreadcrumbs($injector.invoke(getEditBreadcrumbs));

src/legacy/core_plugins/kibana/public/visualize/np_ready/listing/visualize_listing.js

@@ -34,7 +34,7 @@ export function initListingDirective(app) {
   );
 }
 
-export function VisualizeListingController($injector, $scope, createNewVis, kbnUrlStateStorage) {
+export function VisualizeListingController($scope, createNewVis, kbnUrlStateStorage, history) {
   const {
     addBasePath,
     chrome,
@@ -46,7 +46,6 @@ export function VisualizeListingController($injector, $scope, createNewVis, kbnU
     visualizations,
     core: { docLinks, savedObjects },
   } = getServices();
-  const kbnUrl = $injector.get('kbnUrl');
 
   // syncs `_g` portion of url with query services
   const { stop: stopSyncingQueryServiceStateWithUrl } = syncQueryStateWithUrl(
@@ -83,7 +82,11 @@ export function VisualizeListingController($injector, $scope, createNewVis, kbnU
     this.closeNewVisModal = visualizations.showNewVisModal({
       onClose: () => {
         // In case the user came via a URL to this page, change the URL to the regular landing page URL after closing the modal
-        kbnUrl.changePath(VisualizeConstants.LANDING_PAGE_PATH);
+        history.push({
+          // Should preserve querystring part so the global state is preserved.
+          ...history.location,
+          pathname: VisualizeConstants.LANDING_PAGE_PATH,
+        });
       },
     });
   }

src/plugins/kibana_legacy/public/angular/angular_config.tsx

@@ -226,7 +226,7 @@ const $setupUICapabilityRedirect = (newPlatform: CoreStart) => (
       }
 
       if (!get(newPlatform.application.capabilities, route.requireUICapability)) {
-        $injector.get('kbnUrl').change('/home');
+        $injector.get('$location').url('/home');
         event.preventDefault();
       }
     }