Remove <ClusterManager> renderer component

- Flatten into <RootFrame> (old <LensApp>)

- Rename <App> as <ClusterFrame>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/extensions/renderer-api/navigation.ts

@@ -25,7 +25,7 @@ import { navigation } from "../../renderer/navigation";
 export type { PageParamInit, PageParam } from "../../renderer/navigation/page-param";
 export { navigate, isActiveRoute } from "../../renderer/navigation/helpers";
 export { hideDetails, showDetails, getDetailsUrl } from "../../renderer/components/kube-object/kube-object-details";
-export type { IURLParams } from "../../common/utils/buildUrl";
+export type { URLParams } from "../../common/utils/buildUrl";
 
 // exporting to extensions-api version of helper without `isSystem` flag
 export function createPageParam<V = string>(init: PageParamInit<V>) {

src/renderer/bootstrap.tsx

@@ -37,8 +37,8 @@ import { ExtensionDiscovery } from "../extensions/extension-discovery";
 import { ExtensionLoader } from "../extensions/extension-loader";
 import { ExtensionsStore } from "../extensions/extensions-store";
 import { FilesystemProvisionerStore } from "../main/extension-filesystem";
-import { App } from "./components/app";
-import { LensApp } from "./lens-app";
+import { ClusterFrame } from "./components/cluster-frame";
+import { RootFrame } from "./root-frame";
 import { ThemeStore } from "./theme.store";
 import { HelmRepoManager } from "../main/helm/helm-repo-manager";
 import { ExtensionInstallationStateStore } from "./components/+extensions/extension-install.store";
@@ -127,4 +127,4 @@ export async function bootstrap(App: AppComponent) {
 }
 
 // run
-bootstrap(process.isMainFrame ? LensApp : App);
+bootstrap(process.isMainFrame ? RootFrame : ClusterFrame);

src/renderer/components/bottom-bar/__test__/bottom-bar.test.tsx

@@ -29,8 +29,8 @@ jest.mock("electron", () => ({
   },
 }));
 
-import { BottomBar } from "./bottom-bar";
-import { StatusBarRegistry } from "../../../extensions/registries";
+import { BottomBar } from "../bottom-bar";
+import { StatusBarRegistry } from "../../../../extensions/registries";
 
 describe("<BottomBar />", () => {
   beforeEach(() => {

src/renderer/components/bottom-bar/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * 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 "./bottom-bar";

src/renderer/components/cluster-frame.tsx

@@ -71,7 +71,7 @@ import { namespaceStore } from "./+namespaces/namespace.store";
 import * as routes from "../../common/routes";
 
 @observer
-export class App extends React.Component {
+export class ClusterFrame extends React.Component {
   static async init() {
     const frameId = webFrame.routingId;
     const clusterId = getHostedClusterId();

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

@@ -1,68 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * 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.
- */
-
-import "./cluster-manager.scss";
-
-import React 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 * as routes from "../../../common/routes";
-
-@observer
-export class ClusterManager extends React.Component {
-  render() {
-    return (
-      <div className="ClusterManager">
-        <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>
-        </main>
-        <HotbarMenu/>
-        <BottomBar/>
-      </div>
-    );
-  }
-}

src/renderer/components/cluster-view/cluster-connection-status.scss

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.ClusterStatus {
+.ClusterConnectionStatus {
   --flex-gap: #{$padding * 2};
 
   position: relative;
@@ -39,4 +39,4 @@
     --size: 70px;
     margin: auto;
   }
-}
+}

src/renderer/components/cluster-view/cluster-connection-status.tsx

@@ -19,10 +19,10 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import type { KubeAuthProxyLog } from "../../../main/kube-auth-proxy";
+import "./cluster-connection-status.scss";
 
-import "./cluster-status.scss";
 import React from "react";
+import type { KubeAuthProxyLog } from "../../../main/kube-auth-proxy";
 import { observer } from "mobx-react";
 import { ipcRenderer } from "electron";
 import { computed, observable } from "mobx";
@@ -41,7 +41,7 @@ interface Props {
 }
 
 @observer
-export class ClusterStatus extends React.Component<Props> {
+export class ClusterConnectionStatus extends React.Component<Props> {
   @observable authOutput: KubeAuthProxyLog[] = [];
   @observable isReconnecting = false;
 

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

@@ -24,7 +24,7 @@ import React from "react";
 import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { RouteComponentProps } from "react-router";
-import { ClusterStatus } from "./cluster-status";
+import { ClusterConnectionStatus } from "./cluster-connection-status";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
 import type { Cluster } from "../../../main/cluster";
 import { ClusterStore } from "../../../common/cluster-store";
@@ -95,7 +95,7 @@ export class ClusterView extends React.Component<Props> {
     return (
       <div className="ClusterView flex align-center">
         {showStatus && (
-          <ClusterStatus key={cluster.id} clusterId={cluster.id} className="box center"/>
+          <ClusterConnectionStatus key={cluster.id} clusterId={cluster.id} className="box center"/>
         )}
       </div>
     );

src/renderer/components/cluster-view/index.tsx

@@ -19,4 +19,4 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-export * from "./cluster-manager";
+export * from "./cluster-view";

src/renderer/components/cluster-view/lens-views.ts

@@ -65,7 +65,7 @@ export async function initView(clusterId: ClusterId) {
   await autoCleanOnRemove(clusterId, iframe);
 }
 
-export async function autoCleanOnRemove(clusterId: ClusterId, iframe: HTMLIFrameElement) {
+async function autoCleanOnRemove(clusterId: ClusterId, iframe: HTMLIFrameElement) {
   await when(() => {
     const cluster = ClusterStore.getInstance().getById(clusterId);
 

src/renderer/components/root-frame.scss

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.ClusterManager {
+.root-frame {
   --bottom-bar-height: 22px;
 
   display: grid;

src/renderer/root-frame.tsx

@@ -20,11 +20,20 @@
  */
 
 import "../common/system-ca";
+import "./components/root-frame.scss";
+
 import React from "react";
-import { Route, Router, Switch } from "react-router";
+import { Redirect, Route, Router, Switch } from "react-router";
 import { observer } from "mobx-react";
 import { history } from "./navigation";
-import { ClusterManager } from "./components/cluster-manager";
+import { Catalog } from "./components/+catalog";
+import { Preferences } from "./components/+preferences";
+import { AddCluster } from "./components/+add-cluster";
+import { ClusterView } from "./components/cluster-view";
+import { GlobalPageRegistry } from "../extensions/registries/page-registry";
+import { Extensions } from "./components/+extensions";
+import { EntitySettings } from "./components/+entity-settings";
+import { Welcome } from "./components/+welcome";
 import { ErrorBoundary } from "./components/error-boundary";
 import { Notifications } from "./components/notifications";
 import { ConfirmDialog } from "./components/confirm-dialog";
@@ -38,9 +47,12 @@ import { IpcRendererNavigationEvents } from "./navigation/events";
 import { catalogEntityRegistry } from "./api/catalog-entity-registry";
 import { CommandRegistry } from "../extensions/registries";
 import { reaction } from "mobx";
+import { HotbarMenu } from "./components/hotbar/hotbar-menu";
+import { BottomBar } from "./components/bottom-bar";
+import * as routes from "../common/routes";
 
 @observer
-export class LensApp extends React.Component {
+export class RootFrame extends React.Component {
   static async init() {
     catalogEntityRegistry.init();
     ExtensionLoader.getInstance().loadOnClusterManagerRenderer();
@@ -68,9 +80,30 @@ export class LensApp extends React.Component {
     return (
       <Router history={history}>
         <ErrorBoundary>
-          <Switch>
-            <Route component={ClusterManager}/>
-          </Switch>
+          <div className="root-frame">
+            <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>
+            </main>
+            <HotbarMenu />
+            <BottomBar />
+          </div>
         </ErrorBoundary>
         <Notifications/>
         <ConfirmDialog/>