Covering more components with CacheProvider

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/app.tsx

@@ -50,6 +50,8 @@ import { ReplicaSetScaleDialog } from "./+workloads-replicasets/replicaset-scale
 import { CommandContainer } from "./command-palette/command-container";
 import { KubeObjectStore } from "../kube-object.store";
 import { clusterContext } from "./context";
+import { CacheProvider } from "@emotion/react";
+import createCache from "@emotion/cache";
 
 @observer
 export class App extends React.Component {
@@ -153,37 +155,39 @@ export class App extends React.Component {
   render() {
     return (
       <Router history={history}>
-        <ErrorBoundary>
-          <MainLayout>
-            <Switch>
-              <Route component={ClusterOverview} {...clusterRoute}/>
-              <Route component={Nodes} {...nodesRoute}/>
-              <Route component={Workloads} {...workloadsRoute}/>
-              <Route component={Config} {...configRoute}/>
-              <Route component={Network} {...networkRoute}/>
-              <Route component={Storage} {...storageRoute}/>
-              <Route component={Namespaces} {...namespacesRoute}/>
-              <Route component={Events} {...eventRoute}/>
-              <Route component={CustomResources} {...crdRoute}/>
-              <Route component={UserManagement} {...usersManagementRoute}/>
-              <Route component={Apps} {...appsRoute}/>
-              {this.renderExtensionTabLayoutRoutes()}
-              {this.renderExtensionRoutes()}
-              <Redirect exact from="/" to={this.startUrl}/>
-              <Route component={NotFound}/>
-            </Switch>
-          </MainLayout>
-          <Notifications/>
-          <ConfirmDialog/>
-          <KubeObjectDetails/>
-          <KubeConfigDialog/>
-          <AddRoleBindingDialog/>
-          <DeploymentScaleDialog/>
-          <StatefulSetScaleDialog/>
-          <ReplicaSetScaleDialog/>
-          <CronJobTriggerDialog/>
-          <CommandContainer clusterId={getHostedCluster()?.id}/>
-        </ErrorBoundary>
+        <CacheProvider value={createCache({ key: "dashboard" })}>
+          <ErrorBoundary>
+            <MainLayout>
+              <Switch>
+                <Route component={ClusterOverview} {...clusterRoute}/>
+                <Route component={Nodes} {...nodesRoute}/>
+                <Route component={Workloads} {...workloadsRoute}/>
+                <Route component={Config} {...configRoute}/>
+                <Route component={Network} {...networkRoute}/>
+                <Route component={Storage} {...storageRoute}/>
+                <Route component={Namespaces} {...namespacesRoute}/>
+                <Route component={Events} {...eventRoute}/>
+                <Route component={CustomResources} {...crdRoute}/>
+                <Route component={UserManagement} {...usersManagementRoute}/>
+                <Route component={Apps} {...appsRoute}/>
+                {this.renderExtensionTabLayoutRoutes()}
+                {this.renderExtensionRoutes()}
+                <Redirect exact from="/" to={this.startUrl}/>
+                <Route component={NotFound}/>
+              </Switch>
+            </MainLayout>
+            <Notifications/>
+            <ConfirmDialog/>
+            <KubeObjectDetails/>
+            <KubeConfigDialog/>
+            <AddRoleBindingDialog/>
+            <DeploymentScaleDialog/>
+            <StatefulSetScaleDialog/>
+            <ReplicaSetScaleDialog/>
+            <CronJobTriggerDialog/>
+            <CommandContainer clusterId={getHostedCluster()?.id}/>
+          </ErrorBoundary>
+        </CacheProvider>
       </Router>
     );
   }

src/renderer/components/layout/main-layout.tsx

@@ -10,8 +10,6 @@ import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } fr
 import { MainLayoutHeader } from "./main-layout-header";
 import { Sidebar } from "./sidebar";
 import { sidebarStorage } from "./sidebar-storage";
-import { CacheProvider } from "@emotion/react";
-import createCache from "@emotion/cache";
 
 export interface MainLayoutProps {
   className?: any;
@@ -62,11 +60,9 @@ export class MainLayout extends React.Component<MainLayoutProps> {
           />
         </aside>
 
-        <CacheProvider value={createCache({ key: "main-layout" })}>
-          <main>
-            <ErrorBoundary>{children}</ErrorBoundary>
-          </main>
-        </CacheProvider>
+        <main>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </main>
 
         <footer className={footerClass}>{footer ?? <Dock/>}</footer>
       </div>

src/renderer/components/layout/page-layout.tsx

@@ -6,8 +6,6 @@ import { autobind, cssNames, IClassName } from "../../utils";
 import { Icon } from "../icon";
 import { navigation } from "../../navigation";
 import { NavigationTree, RecursiveTreeView } from "../tree-view";
-import { CacheProvider } from "@emotion/react";
-import createCache from "@emotion/cache";
 
 export interface PageLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
@@ -82,13 +80,11 @@ export class PageLayout extends React.Component<PageLayoutProps> {
             <RecursiveTreeView data={navigation}/>
           </nav>
         )}
-        <CacheProvider value={createCache({ key: "page-layout" })}>
-          <div className="content-wrapper" id="ScrollSpyRoot">
-            <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
-              {children}
-            </div>
+        <div className="content-wrapper" id="ScrollSpyRoot">
+          <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
+            {children}
           </div>
-        </CacheProvider>
+        </div>
       </div>
     );
   }

src/renderer/lens-app.tsx

@@ -15,6 +15,8 @@ import { CommandContainer } from "./components/command-palette/command-container
 import { LensProtocolRouterRenderer, bindProtocolAddRouteHandlers } from "./protocol-handler";
 import { registerIpcHandlers } from "./ipc";
 import { ipcRenderer } from "electron";
+import { CacheProvider } from "@emotion/react";
+import createCache from "@emotion/cache";
 
 @observer
 export class LensApp extends React.Component {
@@ -36,16 +38,18 @@ export class LensApp extends React.Component {
   render() {
     return (
       <Router history={history}>
-        <ErrorBoundary>
-          <Switch>
-            {userStore.isNewVersion && <Route component={WhatsNew}/>}
-            <Route component={WhatsNew} {...whatsNewRoute}/>
-            <Route component={ClusterManager}/>
-          </Switch>
-        </ErrorBoundary>
-        <Notifications/>
-        <ConfirmDialog/>
-        <CommandContainer />
+        <CacheProvider value={createCache({ key: "app" })}>
+          <ErrorBoundary>
+            <Switch>
+              {userStore.isNewVersion && <Route component={WhatsNew}/>}
+              <Route component={WhatsNew} {...whatsNewRoute}/>
+              <Route component={ClusterManager}/>
+            </Switch>
+          </ErrorBoundary>
+          <Notifications/>
+          <ConfirmDialog/>
+          <CommandContainer />
+        </CacheProvider>
       </Router>
     );
   }