1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Moving CacheProvider into more specific components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-03-22 09:20:20 +03:00
parent 5733c190fd
commit 74ae5ee9a7
4 changed files with 44 additions and 44 deletions

View File

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

View File

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

View File

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

View File

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