AppPlugins: Expose react-router to apps (#33775)

* Allow Route component usage in app plugins

* i tried

* fix catalog app

* fix catalog app

* remove catalog changes from this PR

* remove extra files

* feat(plugins): expose react-router to plugins rather than export via grafana-ui

* Bring back query and pathname to AppRootPage and add deprecation notice

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

packages/grafana-data/src/types/app.ts

@@ -12,14 +12,27 @@ export enum CoreApp {
 
 export interface AppRootProps<T = KeyValue> {
   meta: AppPluginMeta<T>;
-
-  path: string; // The URL path to this page
-  query: KeyValue; // The URL query parameters
+  /**
+   * base URL segment for an app, /app/pluginId
+   */
+  basename: string; // The URL path to this page
 
   /**
    * Pass the nav model to the container... is there a better way?
    */
   onNavChanged: (nav: NavModel) => void;
+
+  /**
+   * The URL query parameters
+   * @deprecated Use react-router instead
+   */
+  query: KeyValue;
+
+  /**
+   * The URL path to this page
+   * @deprecated Use react-router instead
+   */
+  path: string;
 }
 
 export interface AppPluginMeta<T = KeyValue> extends PluginMeta<T> {

packages/grafana-toolkit/src/config/webpack.plugin.config.ts

@@ -185,6 +185,7 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
       'react-redux',
       'redux',
       'rxjs',
+      'react-router-dom',
       'd3',
       'angular',
       '@grafana/ui',