TopBar home icon (#3740)

* Adding home button

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

* Highlight catalog entity on route match

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

* Wait for general entites to load

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

* Adding WelcomePage catalog entity

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

* Highlight general entities in hotbar if their route matches

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

* Fixing tests

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

* Moving active entities sync to helper function

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

* Fix welcome page test

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

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

@@ -104,7 +104,6 @@ export class Catalog extends React.Component<Props> {
       }, {fireImmediately: true}),
     ]);
   }
-
   addToHotbar(item: CatalogEntityItem<CatalogEntity>): void {
     HotbarStore.getInstance().addToHotbar(item.entity);
   }

src/renderer/components/+welcome/__test__/welcome.test.tsx

@@ -32,6 +32,9 @@ jest.mock(
     ipcRenderer: {
       on: jest.fn(),
     },
+    app: {
+      getPath: () => "tmp",
+    },
   })
 );
 

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

@@ -23,7 +23,7 @@ import "./cluster-manager.scss";
 
 import React from "react";
 import { Redirect, Route, Switch } from "react-router";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { BottomBar } from "./bottom-bar";
 import { Catalog } from "../+catalog";
 import { Preferences } from "../+preferences";
@@ -35,9 +35,18 @@ import { HotbarMenu } from "../hotbar/hotbar-menu";
 import { EntitySettings } from "../+entity-settings";
 import { Welcome } from "../+welcome";
 import * as routes from "../../../common/routes";
+import { reaction } from "mobx";
+import { navigation } from "../../navigation";
+import { setEntityOnRouteMatch } from "../../../main/catalog-sources/helpers/general-active-sync";
 
 @observer
 export class ClusterManager extends React.Component {
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => navigation.location, () => setEntityOnRouteMatch(), { fireImmediately: true })
+    ]);
+  }
+
   render() {
     return (
       <div className="ClusterManager">

src/renderer/components/layout/__tests__/topbar.test.tsx

@@ -41,9 +41,16 @@ jest.mock(
         }
       ),
     },
+    app: {
+      getPath: () => "tmp",
+    },
   })
 );
 
+jest.mock("../../+catalog", () => ({
+  previousActiveTab: jest.fn()
+}));
+
 const goBack = jest.fn();
 const goForward = jest.fn();
 
@@ -76,6 +83,12 @@ describe("<TopBar/>", () => {
     expect(container).toBeInstanceOf(HTMLElement);
   });
 
+  it("renders home button", async () => {
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(await getByTestId("home-button")).toBeInTheDocument();
+  });
+
   it("renders history arrows", async () => {
     const { getByTestId } = render(<TopBar/>);
 

src/renderer/components/layout/topbar.tsx

@@ -28,6 +28,9 @@ import { webContents } from "@electron/remote";
 import { observable } from "mobx";
 import { ipcRendererOn } from "../../../common/ipc";
 import { watchHistoryState } from "../../remote-helpers/history-updater";
+import { isActiveRoute, navigate } from "../../navigation";
+import { catalogRoute, catalogURL } from "../../../common/routes";
+import { previousActiveTab } from "../+catalog";
 
 interface Props extends React.HTMLAttributes<any> {
 }
@@ -68,6 +71,10 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     );
   };
 
+  const goHome = () => {
+    navigate(`${catalogURL()}/${previousActiveTab.get()}`);
+  };
+
   const goBack = () => {
     webContents.getAllWebContents().find((webContent) => webContent.getType() === "window")?.goBack();
   };
@@ -85,6 +92,13 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
   return (
     <div className={styles.topBar} {...rest}>
       <div className={styles.history}>
+        <Icon
+          data-testid="home-button"
+          material="home"
+          className="ml-5"
+          onClick={goHome}
+          disabled={isActiveRoute(catalogRoute)}
+        />
         <Icon
           data-testid="history-back"
           material="arrow_back"