Catalog & Hotbar - initial groundwork (#2418)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/layout/__test__/main-layout-header.test.tsx

@@ -1,25 +1,16 @@
 jest.mock("../../../../common/ipc");
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 
 import { MainLayoutHeader } from "../main-layout-header";
 import { Cluster } from "../../../../main/cluster";
-import { workspaceStore } from "../../../../common/workspace-store";
-import { broadcastMessage, requestMain } from "../../../../common/ipc";
-import { clusterDisconnectHandler } from "../../../../common/cluster-ipc";
-import { ConfirmDialog } from "../../confirm-dialog";
-import { IpcRendererNavigationEvents } from "../../../navigation/events";
-
-const mockBroadcastIpc = broadcastMessage as jest.MockedFunction<typeof broadcastMessage>;
-const mockRequestMain = requestMain as jest.MockedFunction<typeof requestMain>;
 
 const cluster: Cluster = new Cluster({
   id: "foo",
   contextName: "minikube",
   kubeConfigPath: "minikube-config.yml",
-  workspace: workspaceStore.currentWorkspaceId,
 });
 
 describe("<MainLayoutHeader />", () => {
@@ -29,73 +20,9 @@ describe("<MainLayoutHeader />", () => {
     expect(container).toBeInstanceOf(HTMLElement);
   });
 
-  it("renders three dots icon", () => {
-    const { container } = render(<MainLayoutHeader cluster={cluster} />);
-    const icon = container.querySelector(".Icon .icon");
-
-    expect(icon).toBeInstanceOf(HTMLElement);
-    expect(icon).toHaveTextContent("more_vert");
-  });
-
   it("renders cluster name", () => {
     const { getByText } = render(<MainLayoutHeader cluster={cluster} />);
 
     expect(getByText("minikube")).toBeInTheDocument();
   });
-
-  describe("Cluster Actions Menu", () => {
-    let settingsBtn: Element;
-    let disconnectBtn: Element;
-    let removeBtn: Element;
-
-    beforeEach(() => {
-      const { container } = render(<div>
-        <MainLayoutHeader cluster={cluster} />
-        <ConfirmDialog />
-      </div>);
-      const icon = container.querySelector(".Icon");
-
-      cluster.online = true;
-      fireEvent.click(icon);
-
-      [settingsBtn, disconnectBtn, removeBtn] = Array.from(document.querySelectorAll("ul.ClusterActionsMenu > li"))
-        .map(el => el.querySelector("span"));
-    });
-
-    afterEach(() => {
-      cluster.online = false;
-    });
-
-    it("renders cluster menu items", () => {
-      expect(settingsBtn).toBeDefined();
-      expect(settingsBtn.textContent).toBe("Settings");
-      expect(disconnectBtn).toBeDefined();
-      expect(disconnectBtn.textContent).toBe("Disconnect");
-      expect(removeBtn).toBeDefined();
-      expect(removeBtn.textContent).toBe("Remove");
-    });
-
-    it("navigates to cluster settings", () => {
-      fireEvent.click(settingsBtn);
-      expect(mockBroadcastIpc).toBeCalledWith(IpcRendererNavigationEvents.NAVIGATE_IN_APP, "/cluster/foo/settings");
-    });
-
-    it("disconnects from cluster", () => {
-      fireEvent.click(disconnectBtn);
-      expect(mockRequestMain).toBeCalledWith(clusterDisconnectHandler, cluster.id);
-    });
-
-    it("opens 'Remove cluster' dialog", async () => {
-      fireEvent.click(removeBtn);
-
-      const dialog = document.querySelector(".ConfirmDialog");
-
-      expect(dialog).toBeDefined();
-      expect(dialog).not.toBe(null);
-
-      const okBtn = dialog.querySelector("button.ok");
-
-      expect(okBtn.textContent).toBe("Remove");
-    });
-  });
 });

src/renderer/components/layout/main-layout-header.tsx

@@ -1,10 +1,7 @@
 import React from "react";
 import { observer } from "mobx-react";
-
-import { ClusterActions } from "../cluster-manager";
 import { Cluster } from "../../../main/cluster";
 import { cssNames } from "../../utils";
-import { MenuActions, MenuItem } from "../menu";
 
 interface Props {
   cluster: Cluster
@@ -12,28 +9,9 @@ interface Props {
 }
 
 export const MainLayoutHeader = observer(({ cluster, className }: Props) => {
-  const actions = ClusterActions(cluster);
-  const renderMenu = () => (
-    <MenuActions autoCloseOnSelect className="ClusterActionsMenu">
-      <MenuItem onClick={actions.showSettings}>
-        <span>Settings</span>
-      </MenuItem>
-      <MenuItem onClick={actions.disconnect}>
-        <span>Disconnect</span>
-      </MenuItem>
-      {
-        !cluster.isManaged && (
-          <MenuItem onClick={actions.remove}>
-	       <span>Remove</span>
-	     </MenuItem> 
-        )
-      }
-    </MenuActions>);
-
   return (
     <header className={cssNames("flex gaps align-center justify-space-between", className)}>
       <span className="cluster">{cluster.name}</span>
-      {renderMenu()}
     </header>
   );
 });

src/renderer/components/layout/page-layout.tsx

@@ -76,14 +76,17 @@ export class PageLayout extends React.Component<PageLayoutProps> {
             {children}
           </div>
           <div className="toolsRegion">
-            <div className="fixedTools">
-              <div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
-                <Icon material="close"/>
+            { this.props.provideBackButtonNavigation && (
+              <div className="fixedTools">
+                <div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
+                  <Icon material="close"/>
+                </div>
+
+                <div className="esc" aria-hidden="true">
+                  ESC
+                </div>
               </div>
-              <div className="esc" aria-hidden="true">
-                ESC
-              </div>
-            </div>
+            )}
           </div>
         </div>
       </div>