Navigate back to last viewed catalog catagory (#3163)

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

src/renderer/components/+catalog/catalog.tsx

@@ -36,13 +36,15 @@ import { CatalogAddButton } from "./catalog-add-button";
 import type { RouteComponentProps } from "react-router";
 import { Notifications } from "../notifications";
 import { MainLayout } from "../layout/main-layout";
-import { cssNames } from "../../utils";
+import { createAppStorage, cssNames } from "../../utils";
 import { makeCss } from "../../../common/utils/makeCss";
 import { CatalogEntityDetails } from "./catalog-entity-details";
 import { catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
 
+export const previousActiveTab = createAppStorage("catalog-previous-active-tab", "");
+
 enum sortBy {
   name = "name",
   kind = "kind",
@@ -83,6 +85,8 @@ export class Catalog extends React.Component<Props> {
     disposeOnUnmount(this, [
       this.catalogEntityStore.watch(),
       reaction(() => this.routeActiveTab, async (routeTab) => {
+        previousActiveTab.set(this.routeActiveTab);
+
         try {
           await when(() => (routeTab === "" || !!catalogCategoryRegistry.items.find(i => i.getId() === routeTab)), { timeout: 5_000 }); // we need to wait because extensions might take a while to load
           const item = catalogCategoryRegistry.items.find(i => i.getId() === routeTab);

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

@@ -30,6 +30,7 @@ import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 import type { Cluster } from "../../../main/cluster";
 import { ClusterStore } from "../../../common/cluster-store";
 import type { ClusterViewRouteParams } from "../../../common/routes";
+import { previousActiveTab } from "../+catalog";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -43,7 +44,9 @@ export const ClusterTopbar = observer((props: Props) => {
     <TopBar label={getCluster()?.name}>
       <div>
         <MaterialTooltip title="Back to Catalog" placement="left">
-          <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(catalogURL())}/>
+          <Icon style={{ cursor: "default" }} material="close" onClick={() => {
+            navigate(`${catalogURL()}/${previousActiveTab.get()}`);
+          }}/>
         </MaterialTooltip>
       </div>
     </TopBar>

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

@@ -33,6 +33,7 @@ import { clusterActivateHandler } from "../../../common/cluster-ipc";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
 import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
+import { previousActiveTab } from "../+catalog";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -84,7 +85,7 @@ export class ClusterView extends React.Component<Props> {
         const disconnected = values[1];
 
         if (hasLoadedView(this.clusterId) && disconnected) {
-          navigate(catalogURL()); // redirect to catalog when active cluster get disconnected/not available
+          navigate(`${catalogURL()}/${previousActiveTab.get()}`); // redirect to catalog when active cluster get disconnected/not available
         }
       }),
     ]);

src/renderer/utils/createStorage.ts

@@ -41,8 +41,11 @@ const storage = observable({
  * @param defaultValue
  */
 export function createStorage<T>(key: string, defaultValue: T) {
+  return createAppStorage(key, defaultValue, getHostedClusterId());
+}
+
+export function createAppStorage<T>(key: string, defaultValue: T, clusterId?: string | undefined) {
   const { logPrefix } = StorageHelper;
-  const clusterId = getHostedClusterId();
   const folder = path.resolve((app || remote.app).getPath("userData"), "lens-local-storage");
   const fileName = `${clusterId ?? "app"}.json`;
   const filePath = path.resolve(folder, fileName);