Routing NG: Replace Angular routing with react-router (#31463)

* Add router packages

* Get react app root work instead of Angular one

* Logger util

* Patch Angular routing ($routeProvider, $routeParamsProvider)

* Use react-router-dom history instead of separate dependency

* Add test routes

* Sidemenu - use Link instead of anchors

* Patch Angular $location service (stub)

* WIP: geting rid of $location provider from TimeSrv

* Intercept anchor clicks to use history under the hood

* Sync Redux location slice with history state

* Make login/logout work

* Debug routes for testing

* Make force login work

* Make sure query param change does not recreate page components

* Hide side menu in specified locations

* Make the dashboar route query parameters work, make panel edit menu work

* Enable more routes

* Fix side menu

* Handle view modes

* Disable playlist routes

* Make SafeDynamicImport work again

* Bring back router-debug

* Separate redux location sync from route rendering

* Refactor updateLocation to thunk and move force refresh(login) to it

* Fixing init dashboard issue

* Support switching between dashboards without an unmount of DashboardPage

* More fixes for init dashboard and panel edit

* More type fixes

* Moving angular location wrapper out of main LocationService, and fixing typescript issues

* Fixed last typescript errors

* LocationService: Move to runtime and  remove getLocationService and export singleston const instead (#31523)

* Moving location service implementation to runtime and removing get function and making it a package const singleton

* Added test that used locationService directly

* removed unused import

* AngularApp: Moving angular dependencies and the app boot out of the main app into it's own file  (#31525)

* Fixes angular panels by calling the monkey patch

* Moving angular stuff to to it's own files

* udpated

* Fixing clicking on divs and spans inside anchor

* Moving app notifications out of angular app and removing angular directive wrapper

* Moving search from angular to react and removing angular search wrapper

* Clean up, tried to remove the redux location wrapper but requires a big update for DashboardPage, so adding it back

* Moving AppWrapper to root to limit circular dependencies (app/core -> app/routing and back)

* Open and close search now works

* Hide sidemenu when in kiosk mode

* Restoring some keybindings like ESC key

* Removed kiosk events and simplified it, just handled through updating URL

* Fixing typescript errors

* Simplified GrafanaRouteComponentProps and renamed to ContainerProps

* renamed back

* Changed AlertRuleList to use GrafanaRouteComponentProps and location.search passed to it

* Removing the reloadOnSearch property, this is not needed now for react as react by default does not unmount components when only url match or query parmas change

* SafeDynamicImport causing unmount un every search update, not sure how to fix yet

* Fix signature for SafeDynamicImport so we do not create new route components on every route render

* Removing the redux location wrapper as it was causing errors, and making dashboard page work with RouteProps (location, match) etc

* Updating DashboardPage and SoloPanelPage to use match params and history location

* Fixed DashboardPage tests

* Fixing solo route tests

* LocationService: Rename getCurrentLocation to just getLocation

* do not intercept link clicks with target blank or self

* Experimental useUrlParams hook

* Update DataSourceSettingsPage to use router match params

* fix links with urls that have no starting / to work like before

* Fix forceLogin

* Add queryParams to GrafanaRouteComponentProps

* PanelEditor get rid of updateLocation and location state

* Improve grafana route query params typing

* Add getSearchObject to LocationService

* Use DashboardPAge queryParams instead of location.search parsing

* Fix DashboardPage typing

* Fix some tests weirdness

* Bring back KeyboardSrv

* Fixes typescript issues

* Team pages now use router match params

* Get rid of  from GrafanaRouteComponent props

* Removed unnessary calls to getSearchObject when calling locationService.partial

* Updated DashboardPage tests after queryParams was added

* Fixing dashboard settings back

* GrafanaRoute: Adding tests and remove use of global locationService

* Fixing tests and typescript errors

* Bring back kiosk modes and add tests

* Fix TimeSrv tests

* Fix typecheck errors

* Fixing tests

* Updated SideMenu test to react-testing and wrapped component in Router, and fixed issue importing createMemoryHistory

* Get rid of routeChange event from TimeSrv from

* Fixed TopSectionItem test

* Trying to make basename work but failing

* Update TopSectionItem snapshot

* Fix TopSectionItem snapshot test

* Fix API keys creation

* Remove Angular dependencies from KeybindingSrv (#31617)

* Remove Angular dependency from KeybindingsSrv

* Fix tests and typecheck issues

* basename is starting to work

* Make dashboard save work

* KeybindingSrv: Remove as angular service and no usage angular scope

* So long bridge_srv, we won't miss you

* Update snapshots

* Dashboard: Refactoring ChangeTracker to use History api and no angular (#31653)

* Dashboard: Refactoring ChangeTracker to use History api and no angular

* Updated

* Removed logging

* fixed unit tests

* updated snapshots

* Mechanism for force reloading routes (#31683)

* e2e: Fixes various things in e2e scenarios after router migration (#31685)

* Explore: Update reading query params from router props and updating location via locationService (ReactRouter)  (#31688)

* RoutingNG: Initial explore redux location to router location migration

* Updated explore Wrapper tests

* Fixing more tests

* remove loggin

* rename back to make naming consistent

* Fixing return to dashboard button

* fixing navigation to explore from dashboard

* updated routeProps

* Updated tests

* Make DashboardListPage work

* Fixing navigation after add new data source, and fixes explore e2e

* Fixing solo panel page

* PluginsPage now works

* RoutingNG: When parsing and rendering url search/query params preseve old logic of handling booleans and arrays (#31725)

* RoutingNG: When parsing and rendering url search/query params preserve old logic of handling booleans and arrays

* Fixed test

* Make snapshots list work

* fixed alert notification channel edit page

* Simplify LocationService, did not need special handling for login or forceLogin as target _self on link already handles that

* fixed UserAdminPage

* fixed edit orgs page

* Fixing LdapPage

* fixing dashboard import

* Fixed new folder page

* Fixed data source dashboards page

* fixing Folder permissions and folder settings page

* fixing snapshot list page nav model

* remove unused file

* Added placeholder page for playlist

* Moved browser compatability to index-template

* Restored 404/default page

* Fixed reset password page

* Fixed SignUpInvited page

* Fixing CreateTeam, Create user page, add panel widget

* Restore browwser file to make tests happy

* Fixed unit tests

* Removed unused import

* Replacing usage of updateLocation

* Fixed test

* Updating search filters to use history / location service for filters

* remove unused file

* AppRootPage fixed

* Fixing test and search issue

* Changes to support enterprise extensions

* remove console.log

* Removing more use of redux location

* Fixed signup page

* removed unused old angular controllers

* Fixing bugs

* one final bugfix

* Removed location from redux state

* Fixing ts issues and tests

* Fixing test issue

* fixing tests

* Fixing tests

* removed unused stuff

* Fixed search test

* Adding some doc comments

* Routing NG: Angular location provider patch (#31773)

* Patch Angulars $location provider

* Update public/app/angular/bridgeReactAngularRouting.ts

* Remove only test

* Update tests, disable loggers in test env

* Routing NG: remove $location provider usage (#31816)

* Remove dashboard_loaders

* Remove $location from Analytics service, track page views form GrafanaRoute

* Remove NotificationsEditCtrl

* Remove Angular dependencies from uploadDashboardDirective

* Update public/app/features/dashboard/containers/DashboardPage.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/features/dashboard/containers/DashboardPage.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Remove unused test helpers (#31831)

* Playlist react (#31829)

* playlist list in react

* Playlist start

* Things started to work

* Updated

* Handle empty list

* Fix ts

* Fixes and kiosk mode stuff

* Removed unused events

* fixing ts issue

* Another ts issue

* Fixing tests

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* fixed test

* Update public/app/AppWrapper.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/AppWrapper.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Remove Angular dependency from DashboardLoaderSrv (#31863)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

public/app/features/dashboard/state/initDashboard.ts

@@ -1,13 +1,13 @@
 // Services & Utils
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { backendSrv } from 'app/core/services/backend_srv';
-import { DashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
-import { DashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
-import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { DashboardSrv, getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { dashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
+import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { AnnotationsSrv } from 'app/features/annotations/annotations_srv';
-import { KeybindingSrv } from 'app/core/services/keybindingSrv';
+import { keybindingSrv } from 'app/core/services/keybindingSrv';
 // Actions
-import { notifyApp, updateLocation } from 'app/core/actions';
+import { notifyApp } from 'app/core/actions';
 import {
   clearDashboardQueriesToUpdateOnLoad,
   dashboardInitCompleted,
@@ -17,44 +17,39 @@ import {
   dashboardInitSlow,
 } from './reducers';
 // Types
-import {
-  DashboardDTO,
-  DashboardRouteInfo,
-  StoreState,
-  ThunkDispatch,
-  ThunkResult,
-  DashboardInitPhase,
-} from 'app/types';
+import { DashboardDTO, DashboardRoutes, StoreState, ThunkDispatch, ThunkResult, DashboardInitPhase } from 'app/types';
 import { DashboardModel } from './DashboardModel';
 import { DataQuery, locationUtil } from '@grafana/data';
 import { initVariablesTransaction } from '../../variables/state/actions';
 import { emitDashboardViewEvent } from './analyticsProcessor';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
+import { locationService } from '@grafana/runtime';
+import { ChangeTracker } from '../services/ChangeTracker';
 
 export interface InitDashboardArgs {
   $injector: any;
-  $scope: any;
   urlUid?: string;
   urlSlug?: string;
   urlType?: string;
-  urlFolderId?: string;
-  routeInfo: DashboardRouteInfo;
+  urlFolderId?: string | null;
+  routeName?: string;
   fixUrl: boolean;
 }
 
-async function redirectToNewUrl(slug: string, dispatch: ThunkDispatch, currentPath: string) {
+async function redirectToNewUrl(slug: string) {
   const res = await backendSrv.getDashboardBySlug(slug);
 
   if (res) {
+    const location = locationService.getLocation();
     let newUrl = res.meta.url;
 
     // fix solo route urls
-    if (currentPath.indexOf('dashboard-solo') !== -1) {
+    if (location.pathname.indexOf('dashboard-solo') !== -1) {
       newUrl = newUrl.replace('/d/', '/d-solo/');
     }
 
     const url = locationUtil.stripBaseFromUrl(newUrl);
-    dispatch(updateLocation({ path: url, partial: true, replace: true }));
+    locationService.replace(url);
   }
 }
 
@@ -64,15 +59,15 @@ async function fetchDashboard(
   getState: () => StoreState
 ): Promise<DashboardDTO | null> {
   try {
-    switch (args.routeInfo) {
-      case DashboardRouteInfo.Home: {
+    switch (args.routeName) {
+      case DashboardRoutes.Home: {
         // load home dash
         const dashDTO: DashboardDTO = await backendSrv.get('/api/dashboards/home');
 
         // if user specified a custom home dashboard redirect to that
         if (dashDTO.redirectUri) {
           const newUrl = locationUtil.stripBaseFromUrl(dashDTO.redirectUri);
-          dispatch(updateLocation({ path: newUrl, replace: true }));
+          locationService.replace(newUrl);
           return null;
         }
 
@@ -82,34 +77,36 @@ async function fetchDashboard(
         dashDTO.meta.canStar = false;
         return dashDTO;
       }
-      case DashboardRouteInfo.Normal: {
+      case DashboardRoutes.Normal: {
         // for old db routes we redirect
         if (args.urlType === 'db') {
-          redirectToNewUrl(args.urlSlug!, dispatch, getState().location.path);
+          redirectToNewUrl(args.urlSlug!);
           return null;
         }
 
-        const loaderSrv: DashboardLoaderSrv = args.$injector.get('dashboardLoaderSrv');
-        const dashDTO: DashboardDTO = await loaderSrv.loadDashboard(args.urlType, args.urlSlug, args.urlUid);
+        const dashDTO: DashboardDTO = await dashboardLoaderSrv.loadDashboard(args.urlType, args.urlSlug, args.urlUid);
 
         if (args.fixUrl && dashDTO.meta.url) {
           // check if the current url is correct (might be old slug)
           const dashboardUrl = locationUtil.stripBaseFromUrl(dashDTO.meta.url);
-          const currentPath = getState().location.path;
+          const currentPath = locationService.getLocation().pathname;
 
           if (dashboardUrl !== currentPath) {
-            // replace url to not create additional history items and then return so that initDashboard below isn't executed multiple times.
-            dispatch(updateLocation({ path: dashboardUrl, partial: true, replace: true }));
-            return null;
+            // Spread current location to persist search params used for navigation
+            locationService.replace({
+              ...locationService.getLocation(),
+              pathname: dashboardUrl,
+            });
+            console.log('not correct url correcting', dashboardUrl, currentPath);
           }
         }
         return dashDTO;
       }
-      case DashboardRouteInfo.New: {
+      case DashboardRoutes.New: {
         return getNewDashboardModelData(args.urlFolderId);
       }
       default:
-        throw { message: 'Unknown route ' + args.routeInfo };
+        throw { message: 'Unknown route ' + args.routeName };
     }
   } catch (err) {
     // Ignore cancelled errors
@@ -168,16 +165,18 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
 
     // add missing orgId query param
     const storeState = getState();
-    if (!storeState.location.query.orgId) {
-      dispatch(updateLocation({ query: { orgId: storeState.user.orgId }, partial: true, replace: true }));
+    const queryParams = locationService.getSearchObject();
+
+    if (!queryParams.orgId) {
+      // TODO this is currently not possible with the LocationService API
+      locationService.partial({ orgId: storeState.user.orgId }, true);
     }
 
     // init services
-    const timeSrv: TimeSrv = args.$injector.get('timeSrv');
+    const timeSrv: TimeSrv = getTimeSrv();
     const annotationsSrv: AnnotationsSrv = args.$injector.get('annotationsSrv');
-    const keybindingSrv: KeybindingSrv = args.$injector.get('keybindingSrv');
-    const unsavedChangesSrv = args.$injector.get('unsavedChangesSrv');
-    const dashboardSrv: DashboardSrv = args.$injector.get('dashboardSrv');
+    const dashboardSrv: DashboardSrv = getDashboardSrv();
+    const changeTracker = new ChangeTracker();
 
     timeSrv.init(dashboard);
     annotationsSrv.init(dashboard);
@@ -207,14 +206,12 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
       dashboard.updateSubmenuVisibility();
 
       // handle auto fix experimental feature
-      const queryParams = getState().location.query;
       if (queryParams.autofitpanels) {
         dashboard.autoFitPanels(window.innerHeight, queryParams.kiosk);
       }
 
-      // init unsaved changes tracking
-      unsavedChangesSrv.init(dashboard, args.$scope);
-      keybindingSrv.setupDashboardBindings(args.$scope, dashboard);
+      changeTracker.init(dashboard, 2000);
+      keybindingSrv.setupDashboardBindings(dashboard);
     } catch (err) {
       dispatch(notifyApp(createErrorNotification('Dashboard init failed', err)));
       console.error(err);
@@ -229,7 +226,7 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
     dashboardSrv.setCurrent(dashboard);
 
     // send open dashboard event
-    if (args.routeInfo !== DashboardRouteInfo.New) {
+    if (args.routeName !== DashboardRoutes.New) {
       emitDashboardViewEvent(dashboard);
 
       // Listen for changes on the current dashboard
@@ -243,7 +240,7 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
   };
 }
 
-function getNewDashboardModelData(urlFolderId?: string): any {
+function getNewDashboardModelData(urlFolderId?: string | null): any {
   const data = {
     meta: {
       canStar: false,