Jump history using electron methods

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

src/common/history-store.ts

@@ -1,90 +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 { action, makeObservable, observable, reaction } from "mobx";
-import { navigation } from "../renderer/navigation";
-import { BaseStore } from "./base-store";
-import { toJS } from "./utils";
-
-type HistoryModel = {
-  activeStep: number
-};
-
-export class HistoryStore extends BaseStore<HistoryModel> {
-  @observable activeStep = 0;
-
-  constructor() {
-    super({
-      configName: "lens-history-store",
-    });
-    makeObservable(this);
-
-    reaction(() => navigation.location, () => {
-      console.log(
-        `The current URL is ${navigation.location.pathname}${navigation.location.search}${navigation.location.hash}`
-      );
-      console.log(`The last navigation action was ${navigation.action}`);
-      console.log(`Current activeStep ${this.activeStep}`);
-      console.log(`Nav length ${navigation.length}`);
-
-      if (!this.backOrForwardChange()) {
-        ++this.activeStep;
-      }
-    });
-  }
-
-  @action
-  goBack() {
-    --this.activeStep;
-    navigation.goBack();
-  }
-
-  @action
-  goForward() {
-    ++this.activeStep;
-    navigation.goForward();
-  }
-
-  isPreviousExist() {
-    return this.activeStep > 0;
-  }
-
-  isForwardExist() {
-    return this.activeStep < navigation.length - 1;
-  }
-
-  backOrForwardChange() {
-    return navigation.action == "POP";
-  }
-
-  @action
-  protected fromStore(data: Partial<HistoryModel> = {}) {
-    this.activeStep = data.activeStep || 0;
-  }
-
-  toJSON(): HistoryModel {
-    const model: HistoryModel = {
-      activeStep: this.activeStep
-    };
-
-    return toJS(model);
-  }
-}

src/main/window-manager.ts

@@ -244,6 +244,7 @@ export class WindowManager extends Singleton {
       this.sendToView({ channel: IpcRendererNavigationEvents.RELOAD_PAGE, frameInfo });
     } else {
       webContents.getFocusedWebContents()?.reload();
+      webContents.getFocusedWebContents()?.clearHistory();
     }
   }
 

src/renderer/bootstrap.tsx

@@ -51,7 +51,6 @@ import { ThemeStore } from "./theme.store";
 import { SentryInit } from "../common/sentry";
 import { TerminalStore } from "./components/dock/terminal.store";
 import cloudsMidnight from "./monaco-themes/Clouds Midnight.json";
-import { HistoryStore } from "../common/history-store";
 
 configurePackages();
 
@@ -103,7 +102,6 @@ export async function bootstrap(App: AppComponent) {
   // HotbarStore depends on: ClusterStore
   HotbarStore.createInstance();
   ExtensionsStore.createInstance();
-  HistoryStore.createInstance();
   FilesystemProvisionerStore.createInstance();
 
   // define Monaco Editor themes

src/renderer/components/app.tsx

@@ -72,6 +72,7 @@ import { catalogEntityRegistry } from "../api/catalog-entity-registry";
 import { getHostedClusterId } from "../utils";
 import { ClusterStore } from "../../common/cluster-store";
 import type { ClusterId } from "../../common/cluster-types";
+import { watchHistoryState } from "../remote-helpers/history-updater";
 
 @observer
 export class App extends React.Component {
@@ -128,7 +129,9 @@ export class App extends React.Component {
     disposeOnUnmount(this, [
       kubeWatchApi.subscribeStores([podsStore, nodesStore, eventStore, namespaceStore], {
         preload: true,
-      })
+      }),
+
+      watchHistoryState()
     ]);
   }
 

src/renderer/components/layout/topbar.tsx

@@ -20,16 +20,30 @@
  */
 
 import styles from "./topbar.module.css";
-import React from "react";
+import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
 import { Icon } from "../icon";
-import { HistoryStore } from "../../../common/history-store";
+import { webContents } from "@electron/remote";
+import { observable } from "mobx";
+import { ipcRendererOn } from "../../../common/ipc";
+import { watchHistoryState } from "../../remote-helpers/history-updater";
 
 interface Props extends React.HTMLAttributes<any> {
   label: React.ReactNode;
 }
 
+const prevEnabled = observable.box(false);
+const nextEnabled = observable.box(false);
+
+ipcRendererOn("history:can-go-back", (event, state: boolean) => {
+  prevEnabled.set(state);
+});
+
+ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
+  nextEnabled.set(state);
+});
+
 export const TopBar = observer(({ label, children, ...rest }: Props) => {
   const renderRegisteredItems = () => {
     const items = TopBarRegistry.getInstance().getItems();
@@ -56,18 +70,24 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
   };
 
   const goBack = () => {
-    HistoryStore.getInstance().goBack();
+    webContents.getFocusedWebContents()?.goBack();
   };
 
   const goForward = () => {
-    HistoryStore.getInstance().goForward();
+    webContents.getFocusedWebContents()?.goForward();
   };
 
+  useEffect(() => {
+    const disposer = watchHistoryState();
+
+    return () => disposer();
+  }, []);
+
   return (
     <div className={styles.topBar} {...rest}>
       <div className={styles.history}>
-        <Icon svg="flat_arrow" className={styles.prevArrow} onClick={goBack} disabled={!HistoryStore.getInstance().isPreviousExist()}/>
+        <Icon svg="flat_arrow" className={styles.prevArrow} onClick={goBack} disabled={!prevEnabled.get()}/>
-        <Icon svg="flat_arrow" className="ml-5" onClick={goForward} disabled={!HistoryStore.getInstance().isForwardExist()}/>
+        <Icon svg="flat_arrow" className="ml-5" onClick={goForward} disabled={!nextEnabled.get()}/>
       </div>
       <div className={styles.controls}>
         {renderRegisteredItems()}

src/renderer/remote-helpers/history-updater.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { webContents } from "@electron/remote";
+import { reaction } from "mobx";
+import { broadcastMessage } from "../../common/ipc";
+import { navigation } from "../navigation";
+
+export function watchHistoryState() {
+  return reaction(() => navigation.location, () => {
+    broadcastMessage("history:can-go-back", webContents.getFocusedWebContents()?.canGoBack());
+    broadcastMessage("history:can-go-forward", webContents.getFocusedWebContents()?.canGoForward());
+  });
+}