Generic TopBar component for Catalog/Cluster views (#2882)

* Rendering close button in cluster view

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

* Changing Icon hover style

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

* Moving onClick handler away

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

* Removing sidebar compact view

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

* Removing 'compact' refs in SidebarItem

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

* Wrapping Catalog with MainLayout

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

* Making sidebar resizing indicator visible on hover

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

* Adding TopBar to catalog view

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

* Using TopBar in cluster views

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

* Cleaning up Sidebar styles

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

* Using getActiveClusterEntity() for searching

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

* Fix resizing anchor position

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

* Align cluster name on left

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

* Removing unused files

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

* Removing unused css var

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

* Showing Topbar in ClusterStatus page

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

* Removing TopBar from ClusterManager

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

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

@@ -1,105 +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.
- */
-
-jest.mock("../../../../common/ipc");
-
-import React from "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 { ClusterStore } from "../../../../common/cluster-store";
-import mockFs from "mock-fs";
-import { ThemeStore } from "../../../theme.store";
-import { UserStore } from "../../../../common/user-store";
-
-jest.mock("electron", () => {
-  return {
-    app: {
-      getVersion: () => "99.99.99",
-      getPath: () => "tmp",
-      getLocale: () => "en",
-      setLoginItemSettings: jest.fn(),
-    },
-  };
-});
-
-describe("<MainLayoutHeader />", () => {
-  let cluster: Cluster;
-
-  beforeEach(() => {
-    const mockOpts = {
-      "minikube-config.yml": JSON.stringify({
-        apiVersion: "v1",
-        clusters: [{
-          name: "minikube",
-          cluster: {
-            server: "https://192.168.64.3:8443",
-          },
-        }],
-        contexts: [{
-          context: {
-            cluster: "minikube",
-            user: "minikube",
-          },
-          name: "minikube",
-        }],
-        users: [{
-          name: "minikube",
-        }],
-        kind: "Config",
-        preferences: {},
-      })
-    };
-
-    mockFs(mockOpts);
-
-    UserStore.createInstance();
-    ThemeStore.createInstance();
-    ClusterStore.createInstance();
-
-    cluster = new Cluster({
-      id: "foo",
-      contextName: "minikube",
-      kubeConfigPath: "minikube-config.yml",
-    });
-  });
-
-  afterEach(() => {
-    ClusterStore.resetInstance();
-    ThemeStore.resetInstance();
-    UserStore.resetInstance();
-    mockFs.restore();
-  });
-
-  it("renders w/o errors", () => {
-    const { container } = render(<MainLayoutHeader cluster={cluster} />);
-
-    expect(container).toBeInstanceOf(HTMLElement);
-  });
-
-  it("renders cluster name", () => {
-    const { getByText } = render(<MainLayoutHeader cluster={cluster} />);
-
-    expect(getByText("minikube")).toBeInTheDocument();
-  });
-});

src/renderer/components/layout/main-layout.module.css

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+
+.mainLayout {
+  display: grid;
+  grid-template-areas:
+    "sidebar contents"
+    "sidebar footer";
+  grid-template-rows: [contents] 1fr [footer] auto;
+  grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr;
+  width: 100%;
+  z-index: 1;
+  height: calc(100% - var(--main-layout-header));
+}
+
+.sidebar {
+  grid-area: sidebar;
+  display: flex;
+  position: relative;
+  background: var(--sidebarBackground);
+}
+
+.contents {
+  grid-area: contents;
+  overflow: auto;
+}
+
+.footer {
+  position: relative;
+  grid-area: footer;
+  min-width: 0; /* restrict size when overflow content (e.g. <Dock> tabs scrolling) */
+}

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

@@ -1,76 +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.
- */
-
-.MainLayout {
-  display: grid;
-  grid-template-areas:
-    "aside header"
-    "aside tabs"
-    "aside main"
-    "aside footer";
-  grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
-  grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
-  height: 100%;
-
-  > header {
-    grid-area: header;
-    background: $layoutBackground;
-    padding: $padding $padding * 2;
-  }
-
-  > aside {
-    grid-area: aside;
-    position: relative;
-    background: $sidebarBackground;
-    white-space: nowrap;
-    transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    width: var(--sidebar-width);
-
-    &.compact {
-      position: absolute;
-      width: var(--main-layout-header);
-      height: 100%;
-      overflow: hidden;
-
-      &:hover {
-        width: var(--sidebar-width);
-        transition-delay: 750ms;
-        box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);
-        z-index: $zIndex-sidebar-hover;
-      }
-    }
-  }
-
-  > main {
-    display: contents;
-
-    > * {
-      grid-area: main;
-      overflow: auto;
-    }
-  }
-
-  footer {
-    position: relative;
-    grid-area: footer;
-    min-width: 0; // restrict size when overflow content (e.g. <Dock> tabs scrolling)
-  }
-}

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

@@ -19,73 +19,53 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./main-layout.scss";
+import styles from "./main-layout.module.css";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { getHostedCluster } from "../../../common/cluster-store";
 import { 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";
 import { sidebarStorage } from "./sidebar-storage";
 
-export interface MainLayoutProps {
-  className?: any;
+interface Props {
+  sidebar: React.ReactNode;
+  className?: string;
   footer?: React.ReactNode;
-  headerClass?: string;
-  footerClass?: string;
 }
 
 @observer
-export class MainLayout extends React.Component<MainLayoutProps> {
-  onSidebarCompactModeChange = () => {
-    sidebarStorage.merge(draft => {
-      draft.compact = !draft.compact;
-    });
-  };
-
+export class MainLayout extends React.Component<Props> {
   onSidebarResize = (width: number) => {
     sidebarStorage.merge({ width });
   };
 
   render() {
-    const cluster = getHostedCluster();
-    const { onSidebarCompactModeChange, onSidebarResize } = this;
-    const { className, headerClass, footer, footerClass, children } = this.props;
-    const { compact, width: sidebarWidth } = sidebarStorage.get();
+    const { onSidebarResize } = this;
+    const { className, footer, children, sidebar } = this.props;
+    const { width: sidebarWidth } = sidebarStorage.get();
     const style = { "--sidebar-width": `${sidebarWidth}px` } as React.CSSProperties;
 
-    if (!cluster) {
-      return null; // fix: skip render when removing active (visible) cluster
-    }
-
     return (
-      <div className={cssNames("MainLayout", className)} style={style}>
-        <MainLayoutHeader className={headerClass} cluster={cluster}/>
-
-        <aside className={cssNames("flex column", { compact })}>
-          <Sidebar className="box grow" compact={compact} toggle={onSidebarCompactModeChange}/>
+      <div className={cssNames(styles.mainLayout, className)} style={style}>
+        <div className={styles.sidebar}>
+          {sidebar}
           <ResizingAnchor
             direction={ResizeDirection.HORIZONTAL}
             placement={ResizeSide.TRAILING}
             growthDirection={ResizeGrowthDirection.LEFT_TO_RIGHT}
             getCurrentExtent={() => sidebarWidth}
             onDrag={onSidebarResize}
-            onDoubleClick={onSidebarCompactModeChange}
-            disabled={compact}
             minExtent={120}
             maxExtent={400}
           />
-        </aside>
+        </div>
 
-        <main>
+        <div className={styles.contents}>
           <ErrorBoundary>{children}</ErrorBoundary>
-        </main>
+        </div>
 
-        <footer className={footerClass}>{footer ?? <Dock/>}</footer>
+        <div className={styles.footer}>{footer}</div>
       </div>
     );
   }

src/renderer/components/layout/sidebar-item.tsx

@@ -62,10 +62,6 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
     return this.props.id;
   }
 
-  @computed get compact(): boolean {
-    return Boolean(sidebarStorage.get().compact);
-  }
-
   @computed get expanded(): boolean {
     return Boolean(sidebarStorage.get().expanded[this.id]);
   }
@@ -78,8 +74,6 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
   }
 
   @computed get isExpandable(): boolean {
-    if (this.compact) return false; // not available in compact-mode currently
-
     return Boolean(this.props.children);
   }
 
@@ -108,10 +102,8 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
 
     if (isHidden) return null;
 
-    const { isActive, id, compact, expanded, isExpandable, toggleExpand } = this;
-    const classNames = cssNames(SidebarItem.displayName, className, {
-      compact,
-    });
+    const { isActive, id, expanded, isExpandable, toggleExpand } = this;
+    const classNames = cssNames(SidebarItem.displayName, className);
 
     return (
       <div className={classNames} data-test-id={id}>

src/renderer/components/layout/sidebar-storage.ts

@@ -23,14 +23,12 @@ import { createStorage } from "../../utils";
 
 export interface SidebarStorageState {
   width: number;
-  compact: boolean;
   expanded: {
     [itemId: string]: boolean;
   }
 }
 
 export const sidebarStorage = createStorage<SidebarStorageState>("sidebar", {
-  width: 200,     // sidebar size in non-compact mode
-  compact: false, // compact-mode (icons only)
+  width: 200,
   expanded: {},
 });

src/renderer/components/layout/sidebar.scss

@@ -23,49 +23,9 @@
   $iconSize: 24px;
   $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
 
-  &.compact {
-    .sidebar-nav {
-      @include hidden-scrollbar; // fix: scrollbar overlaps icons
-    }
-  }
-
-  .header {
-    background: $sidebarLogoBackground;
-    padding: $padding / 2;
-    height: var(--main-layout-header);
-
-    a {
-      font-size: 18.5px;
-      text-decoration: none;
-    }
-
-    div.logo-text {
-      position: absolute;
-      left: 42px;
-      top: 11px;
-    }
-
-    .logo-icon {
-      width: 28px;
-      height: 28px;
-      margin-left: 2px;
-      margin-top: 2px;
-      margin-right: 10px;
-
-      svg {
-        --size: 28px;
-        padding: 2px;
-      }
-    }
-
-    .pin-icon {
-      margin: auto;
-      margin-right: $padding / 2;
-    }
-  }
-
   .sidebar-nav {
-    padding: $padding / 1.5 0;
+    width: var(--sidebar-width);
+    padding-bottom: calc(var(--padding) * 3);
     overflow: auto;
 
     .Icon {

src/renderer/components/layout/sidebar.tsx

@@ -24,7 +24,6 @@ import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { NavLink } from "react-router-dom";
 import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
@@ -52,8 +51,6 @@ import { SidebarItem } from "./sidebar-item";
 
 interface Props {
   className?: string;
-  compact?: boolean; // compact-mode view: show only icons and expand on :hover
-  toggle(): void; // compact-mode updater
 }
 
 @observer
@@ -173,24 +170,11 @@ export class Sidebar extends React.Component<Props> {
   }
 
   render() {
-    const { toggle, compact, className } = this.props;
+    const { className } = this.props;
 
     return (
-      <div className={cssNames(Sidebar.displayName, "flex column", { compact }, className)}>
-        <div className="header flex align-center">
-          <NavLink exact to="/" className="box grow">
-            <Icon svg="logo-lens" className="logo-icon"/>
-            <div className="logo-text">Lens</div>
-          </NavLink>
-          <Icon
-            focusable={false}
-            className="pin-icon"
-            tooltip="Compact view"
-            material={compact ? "keyboard_arrow_right" : "keyboard_arrow_left"}
-            onClick={toggle}
-          />
-        </div>
-        <div className={cssNames("sidebar-nav flex column box grow-fixed", { compact })}>
+      <div className={cssNames(Sidebar.displayName, "flex column", className)}>
+        <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
           <SidebarItem
             id="cluster"
             text="Cluster"

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

@@ -21,18 +21,19 @@
 
 
 .TabLayout {
-  display: contents;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 
   > .Tabs {
-    grid-area: tabs;
     background: $layoutTabsBackground;
+    min-height: 32px;
   }
 
-
   main {
     $spacing: $margin * 2;
 
-    grid-area: main;
+    flex-grow: 1;
     overflow-y: scroll; // always reserve space for scrollbar (17px)
     overflow-x: auto;
     margin: $spacing;

src/renderer/components/layout/topbar.module.css

@@ -0,0 +1,45 @@
+/**
+ * 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.
+ */
+
+.topBar {
+  display: grid;
+  grid-template-columns: [title] 1fr [controls] auto;
+  grid-template-rows: var(--main-layout-header);
+  grid-template-areas: "title controls";
+  background-color: var(--layoutBackground);
+  z-index: 1;
+  width: 100%;
+}
+
+.title {
+  @apply font-bold px-6;
+  color: var(--textColorAccent);
+  align-items: center;
+  display: flex;
+}
+
+.controls {
+  align-self: flex-end;
+  padding-right: 1.5rem;
+  align-items: center;
+  display: flex;
+  height: 100%;
+}

src/renderer/components/layout/topbar.tsx

@@ -19,20 +19,19 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import styles from "./topbar.module.css";
 import React from "react";
 import { observer } from "mobx-react";
-import type { Cluster } from "../../../main/cluster";
-import { cssNames } from "../../utils";
 
-interface Props {
-  cluster: Cluster
-  className?: string
+interface Props extends React.HTMLAttributes<any> {
+  label: React.ReactNode;
 }
 
-export const MainLayoutHeader = observer(({ cluster, className }: Props) => {
+export const TopBar = observer(({ label, children, ...rest }: Props) => {
   return (
-    <header className={cssNames("flex gaps align-center justify-space-between", className)}>
-      <span className="cluster">{cluster.name}</span>
-    </header>
+    <div className={styles.topBar} {...rest}>
+      <div className={styles.title}>{label}</div>
+      <div className={styles.controls}>{children}</div>
+    </div>
   );
 });