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,8 +258,6 @@ export class Catalog extends React.Component<Props> {
     }
 
     return (
-      <>
-        <TopBar/>
       <MainLayout sidebar={this.renderNavigation()}>
         <div className="p-6 h-full">
           { this.renderList() }
@@ -280,7 +277,6 @@ export class Catalog extends React.Component<Props> {
             )
         }
       </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,8 +47,6 @@ export class Welcome extends React.Component {
     }, defaultWidth);
 
     return (
-      <>
-        <TopBar/>
       <div className="flex justify-center Welcome align-center">
         <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
           {welcomeBanner.length > 0 ? (
@@ -97,7 +94,6 @@ export class Welcome extends React.Component {
           </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);
-
-  .sidebar-nav {
   width: var(--sidebar-width);
   padding-bottom: calc(var(--padding) * 3);
-    overflow: auto;
 
-    .Icon {
+  /* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
-      --size: #{$iconSize};
+  background:
-
+    linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
-      box-sizing: content-box;
+    linear-gradient(rgba(255,255,255,0), var(--sidebarBackground) 70%) 0 100%,
-      padding: floor($padding / 2.6);
+    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
-      border-radius: 50%;
+    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
-    }
+  background-repeat: no-repeat;
-
+  background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
-    hr {
+  background-attachment: local, local, scroll, scroll;
-      background-color: transparent;
+}
-    }
+
-  }
+.sidebarNav :global(.Icon) {
-
+  box-sizing: content-box;
-  .loading {
+  padding: 3px;
-    padding: $padding;
+  border-radius: 50%;
-    text-align: center;
+}
-  }
+
-
+.cluster {
-  .cluster-name {
+  @apply flex items-center m-5;
-    padding: 1.25rem;
+}
-    font-weight: bold;
+
-    font-size: 1.5rem;
+.clusterName {
-    word-break: break-all;
+  @apply font-bold overflow-hidden;
-    color: var(--textColorAccent);
+  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)}
         />