Routing: refresh plugin module when pluginId changes (#33579)

* fix(approotpage): load plugin if pluginId changes so ui updates

* fix(approotpage): prevent dashboard search breaking for plugins without navmodel

public/app/core/components/Page/Page.tsx

@@ -13,7 +13,7 @@ import { css, cx } from '@emotion/css';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  navModel: NavModel;
+  navModel?: NavModel;
 }
 
 export interface PageType extends FC<Props> {
@@ -25,15 +25,19 @@ export const Page: PageType = ({ navModel, children, className, ...otherProps })
   const styles = useStyles2(getStyles);
 
   useEffect(() => {
-    const title = getTitleFromNavModel(navModel);
-    document.title = title ? `${title} - ${Branding.AppTitle}` : Branding.AppTitle;
+    if (navModel) {
+      const title = getTitleFromNavModel(navModel);
+      document.title = title ? `${title} - ${Branding.AppTitle}` : Branding.AppTitle;
+    } else {
+      document.title = Branding.AppTitle;
+    }
   }, [navModel]);
 
   return (
     <div {...otherProps} className={cx(styles.wrapper, className)}>
       <CustomScrollbar autoHeightMin={'100%'}>
         <div className="page-scrollbar-content">
-          <PageHeader model={navModel} />
+          {navModel && <PageHeader model={navModel} />}
           {children}
           <Footer />
         </div>

public/app/features/plugins/AppRootPage.tsx

@@ -49,8 +49,7 @@ class AppRootPage extends Component<Props, State> {
   shouldComponentUpdate(nextProps: Props) {
     return nextProps.location.pathname.startsWith('/a/');
   }
-
-  async componentDidMount() {
+  async loadPluginSettings() {
     const { params } = this.props.match;
     try {
       const app = await getPluginSettings(params.pluginId).then((info) => {
@@ -62,7 +61,7 @@ class AppRootPage extends Component<Props, State> {
         }
         return importAppPlugin(info);
       });
-      this.setState({ plugin: app, loading: false });
+      this.setState({ plugin: app, loading: false, nav: undefined });
     } catch (err) {
       this.setState({
         plugin: null,
@@ -72,6 +71,21 @@ class AppRootPage extends Component<Props, State> {
     }
   }
 
+  componentDidMount() {
+    this.loadPluginSettings();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    const { params } = this.props.match;
+
+    if (prevProps.match.params.pluginId !== params.pluginId) {
+      this.setState({
+        loading: true,
+      });
+      this.loadPluginSettings();
+    }
+  }
+
   onNavChanged = (nav: NavModel) => {
     this.setState({ nav });
   };
@@ -104,10 +118,10 @@ class AppRootPage extends Component<Props, State> {
             </Page.Contents>
           </Page>
         ) : (
-          <>
+          <Page>
             <OutPortal node={portalNode} />
             {loading && <PageLoader />}
-          </>
+          </Page>
         )}
       </>
     );