Moving CacheProvider into more specific components

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

src/renderer/components/app.tsx

@@ -50,8 +50,6 @@ 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 {
@@ -157,25 +155,23 @@ export class App extends React.Component {
       <Router history={history}>
         <ErrorBoundary>
           <MainLayout>
-            <CacheProvider value={createCache({ key: "dashboard" })}>
-              <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>
-            </CacheProvider>
+            <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/>

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -4,8 +4,6 @@ import React from "react";
 import { Redirect, Route, Switch } from "react-router";
 import { comparer, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
 import { ClustersMenu } from "./clusters-menu";
 import { BottomBar } from "./bottom-bar";
 import { LandingPage, landingRoute, landingURL } from "../+landing-page";
@@ -64,20 +62,18 @@ export class ClusterManager extends React.Component {
       <div className="ClusterManager">
         <main>
           <div id="lens-views"/>
-          <CacheProvider value={createCache({ key: "clustermanager" })}>
-            <Switch>
-              <Route component={LandingPage} {...landingRoute} />
-              <Route component={Preferences} {...preferencesRoute} />
-              <Route component={Extensions} {...extensionsRoute} />
-              <Route component={AddCluster} {...addClusterRoute} />
-              <Route component={ClusterView} {...clusterViewRoute} />
-              <Route component={ClusterSettings} {...clusterSettingsRoute} />
-              {globalPageRegistry.getItems().map(({ url, components: { Page } }) => {
-                return <Route key={url} path={url} component={Page}/>;
-              })}
-              <Redirect exact to={this.startUrl}/>
-            </Switch>
-          </CacheProvider>
+          <Switch>
+            <Route component={LandingPage} {...landingRoute} />
+            <Route component={Preferences} {...preferencesRoute} />
+            <Route component={Extensions} {...extensionsRoute} />
+            <Route component={AddCluster} {...addClusterRoute} />
+            <Route component={ClusterView} {...clusterViewRoute} />
+            <Route component={ClusterSettings} {...clusterSettingsRoute} />
+            {globalPageRegistry.getItems().map(({ url, components: { Page } }) => {
+              return <Route key={url} path={url} component={Page}/>;
+            })}
+            <Redirect exact to={this.startUrl}/>
+          </Switch>
         </main>
         <ClustersMenu/>
         <BottomBar/>

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

@@ -10,6 +10,8 @@ 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;
@@ -60,9 +62,11 @@ export class MainLayout extends React.Component<MainLayoutProps> {
           />
         </aside>
 
-        <main>
-          <ErrorBoundary>{children}</ErrorBoundary>
-        </main>
+        <CacheProvider value={createCache({ key: "main-layout" })}>
+          <main>
+            <ErrorBoundary>{children}</ErrorBoundary>
+          </main>
+        </CacheProvider>
 
         <footer className={footerClass}>{footer ?? <Dock/>}</footer>
       </div>

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

@@ -6,6 +6,8 @@ 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;
@@ -80,11 +82,13 @@ export class PageLayout extends React.Component<PageLayoutProps> {
             <RecursiveTreeView data={navigation}/>
           </nav>
         )}
-        <div className="content-wrapper" id="ScrollSpyRoot">
-          <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
-            {children}
+        <CacheProvider value={createCache({ key: "page-layout" })}>
+          <div className="content-wrapper" id="ScrollSpyRoot">
+            <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
+              {children}
+            </div>
           </div>
-        </div>
+        </CacheProvider>
       </div>
     );
   }