Sidebar cluster avatar (#3765)

integration/__tests__/cluster-pages.tests.ts

@@ -36,7 +36,7 @@ function getSidebarSelectors(itemId: string) {
 
   return {
     expandSubMenu: `${root} .nav-item`,
-    subMenuLink: (href: string) => `.Sidebar .sub-menu a[href^="/${href}"]`,
+    subMenuLink: (href: string) => `[data-testid=cluster-sidebar] .sub-menu a[href^="/${href}"]`,
   };
 }
 

integration/helpers/utils.ts

@@ -113,7 +113,7 @@ export async function lauchMinikubeClusterFromCatalog(window: Page): Promise<Fra
 
   const frame = await minikubeFrame.contentFrame();
 
-  await frame.waitForSelector("div.Sidebar");
+  await frame.waitForSelector("[data-testid=cluster-sidebar]");
 
   return frame;
 }

src/main/window-manager.ts

@@ -82,7 +82,7 @@ export class WindowManager extends Singleton {
         show: false,
         minWidth: 700,  // accommodate 800 x 600 display minimum
         minHeight: 500, // accommodate 800 x 600 display minimum
-        titleBarStyle: "hidden",
+        titleBarStyle: "hiddenInset",
         backgroundColor: "#1e2124",
         webPreferences: {
           preload: path.join(__static, "build", "preload.js"),

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

@@ -43,7 +43,6 @@ import { catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
 import { RenderDelay } from "../render-delay/render-delay";
-import { TopBar } from "../layout/topbar";
 
 export const previousActiveTab = createAppStorage("catalog-previous-active-tab", "");
 
@@ -259,28 +258,25 @@ export class Catalog extends React.Component<Props> {
     }
 
     return (
-      <>
+      <MainLayout sidebar={this.renderNavigation()}>
-        <TopBar/>
+        <div className="p-6 h-full">
-        <MainLayout sidebar={this.renderNavigation()}>
+          { this.renderList() }
-          <div className="p-6 h-full">
+        </div>
-            { this.renderList() }
+        {
-          </div>
+          this.catalogEntityStore.selectedItem
-          {
+            ? <CatalogEntityDetails
-            this.catalogEntityStore.selectedItem
+              item={this.catalogEntityStore.selectedItem}
-              ? <CatalogEntityDetails
+              hideDetails={() => this.catalogEntityStore.selectedItemId = null}
-                item={this.catalogEntityStore.selectedItem}
+            />
-                hideDetails={() => this.catalogEntityStore.selectedItemId = null}
+            : (
-              />
+              <RenderDelay>
-              : (
+                <CatalogAddButton
-                <RenderDelay>
+                  category={this.catalogEntityStore.activeCategory}
-                  <CatalogAddButton
+                />
-                    category={this.catalogEntityStore.activeCategory}
+              </RenderDelay>
-                  />
+            )
-                </RenderDelay>
+        }
-              )
+      </MainLayout>
-          }
-        </MainLayout>
-      </>
     );
   }
 }

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

@@ -51,23 +51,6 @@ describe("<Welcome/>", () => {
     WelcomeBannerRegistry.resetInstance();
   });
 
-  it("renders items in the top bar", async () => {
-    const testId = "testId";
-    const text = "topBarItem";
- 
-    TopBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
-      {
-        components: {
-          Item: () => <span data-testid={testId}>{text}</span>
-        }
-      }
-    ]);
-
-    render(<Welcome />);
-
-    expect(screen.getByTestId(testId)).toHaveTextContent(text);
-  });
-
   it("renders <Banner /> registered in WelcomeBannerRegistry and hide logo", async () => {
     const testId = "testId";
 

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

@@ -27,7 +27,6 @@ import { Icon } from "../icon";
 import { productName, slackUrl } from "../../../common/vars";
 import { WelcomeMenuRegistry } from "../../../extensions/registries";
 import { WelcomeBannerRegistry } from "../../../extensions/registries";
-import { TopBar } from "../layout/topbar";
 
 export const defaultWidth = 320;
 
@@ -48,56 +47,53 @@ export class Welcome extends React.Component {
     }, defaultWidth);
 
     return (
-      <>
+      <div className="flex justify-center Welcome align-center">
-        <TopBar/>
+        <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
-        <div className="flex justify-center Welcome align-center">
+          {welcomeBanner.length > 0 ? (
-          <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
+            <Carousel
-            {welcomeBanner.length > 0 ? (
+              stopAutoPlayOnHover={true}
-              <Carousel
+              indicators={welcomeBanner.length > 1}
-                stopAutoPlayOnHover={true}
+              autoPlay={true}
-                indicators={welcomeBanner.length > 1}
+              navButtonsAlwaysInvisible={true}
-                autoPlay={true}
+              indicatorIconButtonProps={{
-                navButtonsAlwaysInvisible={true}
+                style: {
-                indicatorIconButtonProps={{
+                  color: "var(--iconActiveBackground)"
-                  style: {
+                }
-                    color: "var(--iconActiveBackground)"
+              }}
-                  }
+              activeIndicatorIconButtonProps={{
-                }}
+                style: {
-                activeIndicatorIconButtonProps={{
+                  color: "var(--iconActiveColor)"
-                  style: {
+                }
-                    color: "var(--iconActiveColor)"
+              }}
-                  }
+              interval={8000}
-                }}
+            >
-                interval={8000}
+              {welcomeBanner.map((item, index) =>
-              >
+                <item.Banner key={index} />
-                {welcomeBanner.map((item, index) =>
+              )}
-                  <item.Banner key={index} />
+            </Carousel>
-                )}
+          ) : <Icon svg="logo-lens" className="logo" />}
-              </Carousel>
-            ) : <Icon svg="logo-lens" className="logo" />}
 
-            <div className="flex justify-center">
+          <div className="flex justify-center">
-              <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
+            <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
-                <h2>Welcome to {productName} 5!</h2>
+              <h2>Welcome to {productName} 5!</h2>
 
-                <p>
+              <p>
-              To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources.
+            To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources.
-                  <br /><br />
+                <br /><br />
-              If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>.
+            If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>.
-                </p>
+              </p>
 
-                <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
+              <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
-                  {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
+                {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
-                    <li key={index} className="flex grid-12" onClick={() => item.click()}>
+                  <li key={index} className="flex grid-12" onClick={() => item.click()}>
-                      <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
+                    <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
-                    </li>
+                  </li>
-                  ))}
+                ))}
-                </ul>
+              </ul>
-              </div>
             </div>
           </div>
         </div>
-      </>
+      </div>
     );
   }
 }

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

@@ -21,10 +21,11 @@
 
 .ClusterManager {
   --bottom-bar-height: 22px;
+  --hotbar-width: 75px;
 
   display: grid;
   grid-template-areas:
-    "menu topbar"
+    "topbar topbar"
     "menu main"
     "bottom-bar bottom-bar";
   grid-template-rows: auto 1fr min-content;
@@ -48,7 +49,7 @@
   #lens-views {
     position: absolute;
     left: 0;
-    top: 40px; // Move below top bar
+    top: 0;
     right: 0;
     bottom: 0;
     display: flex;

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

@@ -39,6 +39,7 @@ import { DeleteClusterDialog } from "../delete-cluster-dialog";
 import { reaction } from "mobx";
 import { navigation } from "../../navigation";
 import { setEntityOnRouteMatch } from "../../../main/catalog-sources/helpers/general-active-sync";
+import { TopBar } from "../layout/topbar";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -51,6 +52,7 @@ export class ClusterManager extends React.Component {
   render() {
     return (
       <div className="ClusterManager">
+        <TopBar/>
         <main>
           <div id="lens-views"/>
           <Switch>

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

@@ -34,7 +34,6 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
 import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
 import { previousActiveTab } from "../+catalog";
-import { TopBar } from "../layout/topbar";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -105,7 +104,6 @@ export class ClusterView extends React.Component<Props> {
   render() {
     return (
       <div className="ClusterView flex column align-center">
-        <TopBar/>
         {this.renderStatus()}
       </div>
     );

src/renderer/components/hotbar/hotbar-menu.scss

@@ -25,13 +25,9 @@
   position: relative;
   text-align: center;
   background: $clusterMenuBackground;
-  padding-top: 28px;
+  padding-top: 1px;
-  width: 75px;
+  width: var(--hotbar-width);
-
+  overflow: hidden;
-  .is-mac &:before {
-    content: "";
-    height: 4px; // extra spacing for mac-os "traffic-light" buttons
-  }
 
   .HotbarItems {
     --cellWidth: 40px;

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

@@ -19,38 +19,38 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.Sidebar {
+.sidebarNav {
-  $iconSize: 24px;
+  @apply flex overflow-auto flex-col;
-  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
+  width: var(--sidebar-width);
+  padding-bottom: calc(var(--padding) * 3);
 
-  .sidebar-nav {
+  /* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
-    width: var(--sidebar-width);
+  background:
-    padding-bottom: calc(var(--padding) * 3);
+    linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
-    overflow: auto;
+    linear-gradient(rgba(255,255,255,0), var(--sidebarBackground) 70%) 0 100%,
-
+    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
-    .Icon {
+    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
-      --size: #{$iconSize};
+  background-repeat: no-repeat;
-
+  background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
-      box-sizing: content-box;
+  background-attachment: local, local, scroll, scroll;
-      padding: floor($padding / 2.6);
-      border-radius: 50%;
-    }
-
-    hr {
-      background-color: transparent;
-    }
-  }
-
-  .loading {
-    padding: $padding;
-    text-align: center;
-  }
-
-  .cluster-name {
-    padding: 1.25rem;
-    font-weight: bold;
-    font-size: 1.5rem;
-    word-break: break-all;
-    color: var(--textColorAccent);
-  }
 }
+
+.sidebarNav :global(.Icon) {
+  box-sizing: content-box;
+  padding: 3px;
+  border-radius: 50%;
+}
+
+.cluster {
+  @apply flex items-center m-5;
+}
+
+.clusterName {
+  @apply font-bold overflow-hidden;
+  word-break: break-word;
+  color: var(--textColorAccent);
+  display: -webkit-box;
+  /* Simulate text-overflow:ellipsis styles but for multiple text lines */
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}

src/renderer/components/layout/sidebar.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./sidebar.scss";
+import styles from "./sidebar.module.css";
 import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
@@ -41,6 +41,7 @@ import { Apps } from "../+apps";
 import * as routes from "../../../common/routes";
 import { Config } from "../+config";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
+import { HotbarIcon } from "../hotbar/hotbar-icon";
 
 interface Props {
   className?: string;
@@ -177,6 +178,29 @@ export class Sidebar extends React.Component<Props> {
     });
   }
 
+  renderCluster() {
+    if (!this.clusterEntity) {
+      return null;
+    }
+
+    const { metadata, spec } = this.clusterEntity;
+
+    return (
+      <div className={styles.cluster}>
+        <HotbarIcon
+          uid={metadata.uid}
+          title={metadata.name}
+          source={metadata.source}
+          src={spec.icon?.src}
+          className="mr-5"
+        />
+        <div className={styles.clusterName}>
+          {metadata.name}
+        </div>
+      </div>
+    );
+  }
+
   get clusterEntity() {
     return catalogEntityRegistry.activeEntity;
   }
@@ -185,13 +209,9 @@ export class Sidebar extends React.Component<Props> {
     const { className } = this.props;
 
     return (
-      <div className={cssNames(Sidebar.displayName, "flex column", className)}>
+      <div className={cssNames("flex flex-col", className)} data-testid="cluster-sidebar">
-        {this.clusterEntity && (
+        {this.renderCluster()}
-          <div className="cluster-name">
+        <div className={styles.sidebarNav}>
-            {this.clusterEntity.metadata.name}
-          </div>
-        )}
-        <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
           <SidebarItem
             id="cluster"
             text="Cluster"

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

@@ -30,6 +30,10 @@
   grid-area: topbar;
 }
 
+:global(.is-mac) .topBar {
+  padding-left: var(--hotbar-width);
+}
+
 .history {
   @apply flex items-center;
 }

src/renderer/components/layout/topbar.tsx

@@ -95,7 +95,7 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
         <Icon
           data-testid="home-button"
           material="home"
-          className="ml-5"
+          className="ml-4"
           onClick={goHome}
           disabled={isActiveRoute(catalogRoute)}
         />