App Plugins: support react pages and tabs (#16586)

public/app/routes/routes.ts

@@ -22,6 +22,8 @@ import DataSourceSettingsPage from '../features/datasources/settings/DataSourceS
 import OrgDetailsPage from '../features/org/OrgDetailsPage';
 import SoloPanelPage from '../features/dashboard/containers/SoloPanelPage';
 import DashboardPage from '../features/dashboard/containers/DashboardPage';
+import PluginPage from '../features/plugins/PluginPage';
+import AppRootPage from 'app/features/plugins/AppRootPage';
 import config from 'app/core/config';
 
 // Types
@@ -164,6 +166,14 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
         component: () => import(/* webpackChunkName: "explore" */ 'app/features/explore/Wrapper'),
       },
     })
+    .when('/a/:pluginId/', {
+      // Someday * and will get a ReactRouter under that path!
+      template: '<react-container />',
+      reloadOnSearch: false,
+      resolve: {
+        component: () => AppRootPage,
+      },
+    })
     .when('/org', {
       template: '<react-container />',
       resolve: {
@@ -301,10 +311,12 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
         component: () => PluginListPage,
       },
     })
-    .when('/plugins/:pluginId/edit', {
-      templateUrl: 'public/app/features/plugins/partials/plugin_edit.html',
-      controller: 'PluginEditCtrl',
-      controllerAs: 'ctrl',
+    .when('/plugins/:pluginId/', {
+      template: '<react-container />',
+      reloadOnSearch: false, // tabs from query parameters
+      resolve: {
+        component: () => PluginPage,
+      },
     })
     .when('/plugins/:pluginId/page/:slug', {
       templateUrl: 'public/app/features/plugins/partials/plugin_page.html',