Adding cluster settings icon into dashboard (#1672)

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

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

@@ -0,0 +1,49 @@
+jest.mock("../../../../common/ipc");
+
+import React from "react";
+import { fireEvent, 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 } from "../../../../common/ipc";
+
+const mockBroadcastIpc = broadcastMessage as jest.MockedFunction<typeof broadcastMessage>;
+
+const cluster: Cluster = new Cluster({
+  id: "foo",
+  contextName: "minikube",
+  kubeConfigPath: "minikube-config.yml",
+  workspace: workspaceStore.currentWorkspaceId
+});
+
+describe("<MainLayoutHeader />", () => {
+  it("renders w/o errors", () => {
+    const { container } = render(<MainLayoutHeader cluster={cluster} />);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  it("renders gear icon", () => {
+    const { container } = render(<MainLayoutHeader cluster={cluster} />);
+    const icon = container.querySelector(".Icon .icon");
+
+    expect(icon).toBeInstanceOf(HTMLElement);
+    expect(icon).toHaveTextContent("settings");
+  });
+
+  it("navigates to cluster settings", () => {
+    const { container } = render(<MainLayoutHeader cluster={cluster} />);
+    const icon = container.querySelector(".Icon");
+
+    fireEvent.click(icon);
+    expect(mockBroadcastIpc).toBeCalledWith("renderer:navigate", "/cluster/foo/settings");
+  });
+
+  it("renders cluster name", async () => {
+    const { getByText } = render(<MainLayoutHeader cluster={cluster} />);
+
+    expect(await getByText("minikube")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { Trans } from "@lingui/macro";
+
+import { clusterSettingsURL } from "../+cluster-settings";
+import { broadcastMessage } from "../../../common/ipc";
+import { Cluster } from "../../../main/cluster";
+import { cssNames } from "../../utils";
+import { Icon } from "../icon";
+
+interface Props {
+  cluster: Cluster
+  className?: string
+}
+
+export function MainLayoutHeader({ cluster, className }: Props) {
+  return (
+    <header className={cssNames("flex gaps align-center justify-space-between", className)}>
+      <span className="cluster">{cluster.name}</span>
+      <Icon
+        material="settings"
+        tooltip={<Trans>Open cluster settings</Trans>}
+        interactive
+        onClick={() => {
+          broadcastMessage("renderer:navigate", clusterSettingsURL({
+            params: {
+              clusterId: cluster.id
+            }
+          }));
+        }}
+      />
+    </header>
+  );
+}

src/renderer/components/layout/main-layout.scss

@@ -14,15 +14,6 @@
     grid-area: header;
     background: $layoutBackground;
     padding: $padding $padding * 2;
-
-    span + .lens-version {
-      margin-left: $margin;
-    }
-
-    .lens-version {
-      font-size: x-small;
-      text-transform: uppercase;
-    }
   }
 
   > aside {

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

@@ -3,12 +3,13 @@ import "./main-layout.scss";
 import React from "react";
 import { observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { autobind, createStorage, cssNames } from "../../utils";
-import { Sidebar } from "./sidebar";
-import { ErrorBoundary } from "../error-boundary";
-import { Dock } from "../dock";
 import { getHostedCluster } from "../../../common/cluster-store";
+import { autobind, createStorage, cssNames } from "../../utils";
+import { Dock } from "../dock";
+import { ErrorBoundary } from "../error-boundary";
 import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
+import { MainLayoutHeader } from "./main-layout-header";
+import { Sidebar } from "./sidebar";
 
 export interface MainLayoutProps {
   className?: any;
@@ -66,9 +67,7 @@ export class MainLayout extends React.Component<MainLayoutProps> {
 
     return (
       <div className={cssNames("MainLayout", className)} style={this.getSidebarSize() as any}>
-        <header className={cssNames("flex gaps align-center", headerClass)}>
+        <MainLayoutHeader className={headerClass} cluster={cluster} />
-          <span className="cluster">{cluster.name}</span>
-        </header>
 
         <aside className={cssNames("flex column", { pinned: this.isPinned, accessible: this.isAccessible })}>
           <Sidebar className="box grow" isPinned={this.isPinned} toggle={this.toggleSidebar} />