[Security solution] Template wrapper fixes, route changes.

src/core/packages/application/browser-internal/src/ui/app_container.tsx

@@ -26,7 +26,7 @@ import { ThrowIfError } from '@kbn/shared-ux-error-boundary';
 import type { Mounter } from '../types';
 import { AppNotFound } from './app_not_found_screen';
 
-interface Props {
+export interface AppContainerProps {
   /** Path application is mounted on without the global basePath */
   appPath: string;
   appId: string;
@@ -40,7 +40,7 @@ interface Props {
   showPlainSpinner?: boolean;
 }
 
-export const AppContainer: FC<Props> = ({
+export const AppContainer: FC<AppContainerProps> = ({
   mounter,
   appId,
   appPath,
@@ -51,7 +51,7 @@ export const AppContainer: FC<Props> = ({
   setIsMounting,
   theme$,
   showPlainSpinner,
-}: Props) => {
+}: AppContainerProps) => {
   const [error, setError] = useState<Error | null>(null);
   const [showSpinner, setShowSpinner] = useState(true);
   const [appNotFound, setAppNotFound] = useState(false);

src/core/packages/application/browser-internal/src/ui/app_router.tsx

@@ -21,6 +21,7 @@ import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux
 import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
 import type { Mounter } from '../types';
 import { AppContainer } from './app_container';
+import type { AppContainerProps } from './app_container';
 import { CoreScopedHistory } from '../scoped_history';
 
 interface Props {
@@ -39,6 +40,51 @@ interface Params {
   appId: string;
 }
 
+const MountedRoute: FunctionComponent<AppContainerProps> = React.memo(
+  ({
+    appPath,
+    appStatus,
+    createScopedHistory,
+    appId,
+    mounter,
+    setAppLeaveHandler,
+    setAppActionMenu,
+    setIsMounting,
+    theme$,
+    showPlainSpinner,
+  }) => {
+    const appContainerProps = useMemo(() => {
+      return {
+        appId,
+        appPath,
+        appStatus,
+        createScopedHistory,
+        mounter,
+        setAppLeaveHandler,
+        setAppActionMenu,
+        setIsMounting,
+        theme$,
+        showPlainSpinner,
+      };
+    }, [
+      appPath,
+      appStatus,
+      createScopedHistory,
+      appId,
+      mounter,
+      setAppLeaveHandler,
+      setAppActionMenu,
+      setIsMounting,
+      theme$,
+      showPlainSpinner,
+    ]);
+
+    return <AppContainer {...appContainerProps} />;
+  }
+);
+
+MountedRoute.displayName = 'MountedRoute';
+
 export const AppRouter: FunctionComponent<Props> = ({
   history,
   analytics,
@@ -58,34 +104,44 @@ export const AppRouter: FunctionComponent<Props> = ({
 
   const showPlainSpinner = useObservable(hasCustomBranding$ ?? EMPTY, false);
 
+  const routes = useMemo(() => {
+    return [...mounters].map(([appId, mounter]) => (
+      <Route
+        key={mounter.appRoute}
+        path={mounter.appRoute}
+        exact={mounter.exactRoute}
+        render={({ match: { path } }) => (
+          <MountedRoute
+            appPath={path}
+            appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
+            createScopedHistory={createScopedHistory}
+            appId={appId}
+            mounter={mounter}
+            setAppLeaveHandler={setAppLeaveHandler}
+            setAppActionMenu={setAppActionMenu}
+            setIsMounting={setIsMounting}
+            theme$={theme$}
+            showPlainSpinner={showPlainSpinner}
+          />
+        )}
+      />
+    ));
+  }, [
+    mounters,
+    setAppLeaveHandler,
+    setAppActionMenu,
+    setIsMounting,
+    theme$,
+    showPlainSpinner,
+    appStatuses,
+    createScopedHistory,
+  ]);
   return (
     <KibanaErrorBoundaryProvider analytics={analytics}>
       <KibanaErrorBoundary>
         <Router history={history}>
           <Routes>
-            {[...mounters].map(([appId, mounter]) => (
-              <Route
-                key={mounter.appRoute}
-                path={mounter.appRoute}
-                exact={mounter.exactRoute}
-                render={({ match: { path } }) => (
-                  <AppContainer
-                    appPath={path}
-                    appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
-                    createScopedHistory={createScopedHistory}
-                    {...{
-                      appId,
-                      mounter,
-                      setAppLeaveHandler,
-                      setAppActionMenu,
-                      setIsMounting,
-                      theme$,
-                      showPlainSpinner,
-                    }}
-                  />
-                )}
-              />
-            ))}
+            {routes}
             {/* handler for legacy apps and used as a catch-all to display 404 page on not existing /app/appId apps*/}
             <Route
               path="/app/:appId"
@@ -95,22 +151,18 @@ export const AppRouter: FunctionComponent<Props> = ({
                   url,
                 },
               }: RouteComponentProps<Params>) => {
-                // the id/mounter retrieval can be removed once #76348 is addressed
-                const [id, mounter] = mounters.has(appId) ? [appId, mounters.get(appId)] : [];
                 return (
-                  <AppContainer
+                  <MountedRoute
                     appPath={url}
-                    appId={id ?? appId}
+                    appId={mounters.has(appId) ? appId : ''}
                     appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
                     createScopedHistory={createScopedHistory}
-                    {...{
-                      mounter,
-                      setAppLeaveHandler,
-                      setAppActionMenu,
-                      setIsMounting,
-                      theme$,
-                      showPlainSpinner,
-                    }}
+                    mounter={mounters.has(appId) ? mounters.get(appId) : undefined}
+                    setAppLeaveHandler={setAppLeaveHandler}
+                    setAppActionMenu={setAppActionMenu}
+                    setIsMounting={setIsMounting}
+                    theme$={theme$}
+                    showPlainSpinner={showPlainSpinner}
                   />
                 );
               }}

src/platform/packages/shared/shared-ux/page/kibana_template/impl/src/page_template.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { EuiPageTemplate } from '@elastic/eui';
 
 import {
@@ -18,50 +18,46 @@ import { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template-typ
 
 import { KibanaPageTemplateInner, KibanaPageTemplateWithSolutionNav } from './page_template_inner';
 
-export const _KibanaPageTemplate: FC<KibanaPageTemplateProps> = ({
-  className,
-  children,
-  solutionNav,
-  noDataConfig,
-  ...rest
-}) => {
-  /**
-   * If passing the custom template of `noDataConfig`
-   */
-  if (noDataConfig && solutionNav) {
-    return (
-      <NoDataConfigPageWithSolutionNavBar
-        data-test-subj={rest['data-test-subj']}
-        className={className}
-        noDataConfig={noDataConfig}
-        solutionNav={solutionNav}
-      />
-    );
-  }
+export const _KibanaPageTemplate: FC<Omit<KibanaPageTemplateProps, 'ref'>> = memo(
+  ({ className, children, solutionNav, noDataConfig, ...rest }) => {
+    /**
+     * If passing the custom template of `noDataConfig`
+     */
+    if (noDataConfig && solutionNav) {
+      return (
+        <NoDataConfigPageWithSolutionNavBar
+          data-test-subj={rest['data-test-subj']}
+          className={className}
+          noDataConfig={noDataConfig}
+          solutionNav={solutionNav}
+        />
+      );
+    }
 
-  if (noDataConfig) {
-    return (
-      <NoDataConfigPage
-        data-test-subj={rest['data-test-subj']}
-        className={className}
-        noDataConfig={noDataConfig}
-      />
-    );
-  }
+    if (noDataConfig) {
+      return (
+        <NoDataConfigPage
+          data-test-subj={rest['data-test-subj']}
+          className={className}
+          noDataConfig={noDataConfig}
+        />
+      );
+    }
 
-  if (solutionNav) {
-    return (
-      <KibanaPageTemplateWithSolutionNav
-        className={className}
-        solutionNav={solutionNav}
-        children={children}
-        {...rest}
-      />
-    );
-  }
+    if (solutionNav) {
+      return (
+        <KibanaPageTemplateWithSolutionNav
+          className={className}
+          solutionNav={solutionNav}
+          children={children}
+          {...rest}
+        />
+      );
+    }
 
-  return <KibanaPageTemplateInner className={className} children={children} {...rest} />;
-};
+    return <KibanaPageTemplateInner className={className} children={children} {...rest} />;
+  }
+);
 
 /**
  * Kibana-specific wrapper of EuiPageTemplate and it's namespaced components