hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Add default export, and lazy load comp on route

Browse Source 
Signed-off-by: Hung-Han (Henry) Chen <chenhungh@gmail.com>
This commit is contained in:
Hung-Han (Henry) Chen 2021-07-07 08:43:01 +03:00
parent 0f9f79a8c9
commit c947a8801c
No known key found for this signature in database
GPG Key ID: 54B44603D251B788
17 changed files with 96 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/+add-cluster/add-cluster.tsx
View File

@ -148,3 +148,5 @@ export class AddCluster extends React.Component {
);
}
}
export default AddCluster;

4
src/renderer/components/+catalog/catalog.tsx
View File

@ -285,7 +285,7 @@ export class Catalog extends React.Component<Props> {
return (
<MainLayout sidebar={this.renderNavigation()}>
<div className="p-6 h-full">
<div className="h-full p-6">
{ this.renderCategoryList() }
</div>
{
@ -302,3 +302,5 @@ export class Catalog extends React.Component<Props> {
);
}
}
export default Catalog;

2
src/renderer/components/+entity-settings/entity-settings.tsx
View File

@ -145,3 +145,5 @@ export class EntitySettings extends React.Component<Props> {
);
}
}
export default EntitySettings;

4
src/renderer/components/+extensions/extensions.tsx
View File

@ -388,7 +388,7 @@ async function attemptInstall(request: InstallRequest, d?: ExtendableDisposer):
// otherwise confirmation required (re-install / update)
const removeNotification = Notifications.info(
<div className="InstallingExtensionNotification flex gaps align-center">
<div className="flex InstallingExtensionNotification gaps align-center">
<div className="flex column gaps">
<p>Install extension <b>{name}@{version}</b>?</p>
<p>Description: <em>{description}</em></p>
@ -545,3 +545,5 @@ export class Extensions extends React.Component<Props> {
);
}
}
export default Extensions;

2
src/renderer/components/+preferences/index.tsx
View File

@ -18,5 +18,5 @@
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
export * from "./preferences";

2
src/renderer/components/+preferences/preferences.tsx
View File

@ -269,3 +269,5 @@ export class Preferences extends React.Component {
);
}
}
export default Preferences;

4
src/renderer/components/+welcome/welcome.tsx
View File

@ -30,7 +30,7 @@ import { WelcomeMenuRegistry } from "../../../extensions/registries";
export class Welcome extends React.Component {
render() {
return (
<div className="Welcome flex justify-center align-center">
<div className="flex justify-center Welcome align-center">
<div className="box">
<Icon svg="logo-lens" className="logo" />
@ -54,3 +54,5 @@ export class Welcome extends React.Component {
);
}
}
export default Welcome;

6
src/renderer/components/cluster-manager/bottom-bar.tsx
View File

@ -45,7 +45,7 @@ export class BottomBar extends React.Component {
}
return (
<div className="extensions box grow flex gaps justify-flex-end">
<div className="flex extensions box grow gaps justify-flex-end">
{items.map((registration, index) => {
if (!registration?.item && !registration?.components?.Item) {
return null;
@ -63,9 +63,11 @@ export class BottomBar extends React.Component {
render() {
return (
<div className="BottomBar flex gaps">
<div className="flex BottomBar gaps">
{this.renderRegisteredItems()}
</div>
);
}
}
export default BottomBar;

2
src/renderer/components/cluster-manager/catalog-topbar.tsx
View File

@ -39,3 +39,5 @@ export function CatalogTopbar() {
</TopBar>
);
}
export default CatalogTopbar;

77
src/renderer/components/cluster-manager/cluster-manager.tsx
View File

@ -21,52 +21,65 @@
import "./cluster-manager.scss";
import React from "react";
import React, { Suspense, lazy } from "react";
import { Redirect, Route, Switch } from "react-router";
import { observer } from "mobx-react";
import { BottomBar } from "./bottom-bar";
import { Catalog } from "../+catalog";
import { Preferences } from "../+preferences";
import { AddCluster } from "../+add-cluster";
import { ClusterView } from "./cluster-view";
import { GlobalPageRegistry } from "../../../extensions/registries/page-registry";
import { Extensions } from "../+extensions";
import { HotbarMenu } from "../hotbar/hotbar-menu";
import { EntitySettings } from "../+entity-settings";
import { Welcome } from "../+welcome";
import { ClusterTopbar } from "./cluster-topbar";
import { CatalogTopbar } from "./catalog-topbar";
import * as routes from "../../../common/routes";
const Catalog = lazy(() => import("../+catalog/catalog"));
const ClusterTopbar = lazy(() => import("./cluster-topbar"));
const CatalogTopbar = lazy(() => import("./catalog-topbar"));
const Welcome = lazy(() => import("../+welcome/welcome"));
const Preferences = lazy(() => import("../+preferences/preferences"));
const Extensions = lazy(() => import("../+extensions/extensions"));
const AddCluster = lazy(() => import("../+add-cluster/add-cluster"));
const ClusterView = lazy(() => import("./cluster-view"));
const EntitySettings = lazy(() => import("../+entity-settings/entity-settings"));
const BottomBar = lazy(() => import("./bottom-bar"));
const HotbarMenu = lazy(() => import("../hotbar/hotbar-menu"));
@observer
export class ClusterManager extends React.Component {
render() {
return (
<div className="ClusterManager">
<Route component={CatalogTopbar} {...routes.catalogRoute} />
<Route component={ClusterTopbar} {...routes.clusterViewRoute} />
<Suspense fallback={<div></div>}>
<Route component={CatalogTopbar} {...routes.catalogRoute} />
<Route component={ClusterTopbar} {...routes.clusterViewRoute} />
</Suspense>
<main>
<div id="lens-views"/>
<Switch>
<Route component={Welcome} {...routes.welcomeRoute} />
<Route component={Catalog} {...routes.catalogRoute} />
<Route component={Preferences} {...routes.preferencesRoute} />
<Route component={Extensions} {...routes.extensionsRoute} />
<Route component={AddCluster} {...routes.addClusterRoute} />
<Route component={ClusterView} {...routes.clusterViewRoute} />
<Route component={EntitySettings} {...routes.entitySettingsRoute} />
{
GlobalPageRegistry.getInstance().getItems()
.map(({ url, components: { Page } }) => (
<Route key={url} path={url} component={Page} />
))
}
<Redirect exact to={routes.welcomeURL()}/>
</Switch>
<Suspense fallback={<div></div>}>
<Switch>
<Route component={Welcome} {...routes.welcomeRoute} />
<Route component={Catalog} {...routes.catalogRoute} />
<Route component={Preferences} {...routes.preferencesRoute} />
<Route component={Extensions} {...routes.extensionsRoute} />
<Route component={AddCluster} {...routes.addClusterRoute} />
<Route component={ClusterView} {...routes.clusterViewRoute} />
<Route component={EntitySettings} {...routes.entitySettingsRoute} />
{
GlobalPageRegistry.getInstance().getItems()
.map(({ url, components: { Page } }) => (
<Route key={url} path={url} component={Page} />
))
}
<Redirect exact to={routes.welcomeURL()} />
</Switch>
</Suspense>
</main>
<HotbarMenu/>
<BottomBar/>
<Suspense fallback={<div></div>}>
<HotbarMenu />
<BottomBar />
</Suspense>
</div>
);
}
}
export default ClusterManager;

2
src/renderer/components/cluster-manager/cluster-topbar.tsx
View File

@ -59,3 +59,5 @@ export const ClusterTopbar = observer((props: Props) => {
</TopBar>
);
});
export default ClusterTopbar;

4
src/renderer/components/cluster-manager/cluster-view.tsx
View File

@ -103,9 +103,11 @@ export class ClusterView extends React.Component<Props> {
render() {
return (
<div className="ClusterView flex column align-center">
<div className="flex ClusterView column align-center">
{this.renderStatus()}
</div>
);
}
}
export default ClusterView;

2
src/renderer/components/command-palette/command-container.tsx
View File

@ -113,3 +113,5 @@ export class CommandContainer extends React.Component<CommandContainerProps> {
);
}
}
export default CommandContainer;

2
src/renderer/components/confirm-dialog/confirm-dialog.tsx
View File

@ -150,3 +150,5 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
);
}
}
export default ConfirmDialog;

4
src/renderer/components/hotbar/hotbar-menu.tsx
View File

@ -188,7 +188,7 @@ export class HotbarMenu extends React.Component<Props> {
return (
<div className={cssNames("HotbarMenu flex column", className)}>
<div className="HotbarItems flex column gaps">
<div className="flex HotbarItems column gaps">
<DragDropContext onDragEnd={this.onDragEnd.bind(this)}>
{this.renderGrid()}
</DragDropContext>
@ -198,3 +198,5 @@ export class HotbarMenu extends React.Component<Props> {
);
}
}
export default HotbarMenu;

4
src/renderer/components/notifications/notifications.tsx
View File

@ -99,7 +99,7 @@ export class Notifications extends React.Component {
const { notifications, remove, addAutoHideTimer, removeAutoHideTimer } = notificationsStore;
return (
<div className="Notifications flex column align-flex-end" ref={e => this.elem = e}>
<div className="flex Notifications column align-flex-end" ref={e => this.elem = e}>
{notifications.map(notification => {
const { id, status, onClose } = notification;
const msgText = this.getMessage(notification);
@ -131,3 +131,5 @@ export class Notifications extends React.Component {
);
}
}
export default Notifications;

25
src/renderer/lens-app.tsx
View File

@ -20,23 +20,24 @@
*/
import "../common/system-ca";
import React from "react";
import React, { Suspense, lazy } from "react";
import { Route, Router, Switch } from "react-router";
import { observer } from "mobx-react";
import { history } from "./navigation";
import { ClusterManager } from "./components/cluster-manager";
import { ErrorBoundary } from "./components/error-boundary";
import { Notifications } from "./components/notifications";
import { ConfirmDialog } from "./components/confirm-dialog";
import { ExtensionLoader } from "../extensions/extension-loader";
import { broadcastMessage } from "../common/ipc";
import { CommandContainer } from "./components/command-palette/command-container";
import { bindProtocolAddRouteHandlers, LensProtocolRouterRenderer } from "./protocol-handler";
import { registerIpcHandlers } from "./ipc";
import { ipcRenderer } from "electron";
import { IpcRendererNavigationEvents } from "./navigation/events";
import { catalogEntityRegistry } from "./api/catalog-entity-registry";
const Notifications = lazy(() => import("./components/notifications/notifications"));
const ConfirmDialog = lazy(() => import("./components/confirm-dialog/confirm-dialog"));
const CommandContainer = lazy(() => import("./components/command-palette/command-container"));
const ClusterManager = lazy(() => import("./components/cluster-manager/cluster-manager"));
@observer
export class LensApp extends React.Component {
static async init() {
@ -59,13 +60,15 @@ export class LensApp extends React.Component {
return (
<Router history={history}>
<ErrorBoundary>
<Switch>
<Route component={ClusterManager} />
</Switch>
<Suspense fallback={<div></div>}>
<Switch>
<Route component={ClusterManager} />
</Switch>
<Notifications />
<ConfirmDialog />
<CommandContainer />
</Suspense>
</ErrorBoundary>
<Notifications />
<ConfirmDialog />
<CommandContainer />
</Router>
);
}