Sidebar cluster avatar (#3765)

2024-11-10 10:36:25 +03:00 · 2021-09-13 18:33:30 +03:00 · 2021-09-13 18:33:30 +03:00 · 4fa0b8e329
commit 4fa0b8e329
parent 8e9dd50828
14 changed files with 137 additions and 141 deletions
--- a/integration/tests/cluster-pages.tests.ts
+++ b/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}"]`,
  };
 }

--- a/integration/helpers/utils.ts
+++ b/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;
 }
--- a/src/main/window-manager.ts
+++ b/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"),
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/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 (
-      <>
-        <TopBar/>
-        <MainLayout sidebar={this.renderNavigation()}>
-          <div className="p-6 h-full">
-            { this.renderList() }
-          </div>
-          {
-            this.catalogEntityStore.selectedItem
-              ? <CatalogEntityDetails
-                item={this.catalogEntityStore.selectedItem}
-                hideDetails={() => this.catalogEntityStore.selectedItemId = null}
-              />
-              : (
-                <RenderDelay>
-                  <CatalogAddButton
-                    category={this.catalogEntityStore.activeCategory}
-                  />
-                </RenderDelay>
-              )
-          }
-        </MainLayout>
-      </>
+      <MainLayout sidebar={this.renderNavigation()}>
+        <div className="p-6 h-full">
+          { this.renderList() }
+        </div>
+        {
+          this.catalogEntityStore.selectedItem
+            ? <CatalogEntityDetails
+              item={this.catalogEntityStore.selectedItem}
+              hideDetails={() => this.catalogEntityStore.selectedItemId = null}
+            />
+            : (
+              <RenderDelay>
+                <CatalogAddButton
+                  category={this.catalogEntityStore.activeCategory}
+                />
+              </RenderDelay>
+            )
+        }
+      </MainLayout>
    );
  }
 }
--- a/src/renderer/components/+welcome/test/welcome.test.tsx
+++ b/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";

--- a/src/renderer/components/+welcome/welcome.tsx
+++ b/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 (
-      <>
-        <TopBar/>
-        <div className="flex justify-center Welcome align-center">
-          <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
-            {welcomeBanner.length > 0 ? (
-              <Carousel
-                stopAutoPlayOnHover={true}
-                indicators={welcomeBanner.length > 1}
-                autoPlay={true}
-                navButtonsAlwaysInvisible={true}
-                indicatorIconButtonProps={{
-                  style: {
-                    color: "var(--iconActiveBackground)"
-                  }
-                }}
-                activeIndicatorIconButtonProps={{
-                  style: {
-                    color: "var(--iconActiveColor)"
-                  }
-                }}
-                interval={8000}
-              >
-                {welcomeBanner.map((item, index) =>
-                  <item.Banner key={index} />
-                )}
-              </Carousel>
-            ) : <Icon svg="logo-lens" className="logo" />}
+      <div className="flex justify-center Welcome align-center">
+        <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
+          {welcomeBanner.length > 0 ? (
+            <Carousel
+              stopAutoPlayOnHover={true}
+              indicators={welcomeBanner.length > 1}
+              autoPlay={true}
+              navButtonsAlwaysInvisible={true}
+              indicatorIconButtonProps={{
+                style: {
+                  color: "var(--iconActiveBackground)"
+                }
+              }}
+              activeIndicatorIconButtonProps={{
+                style: {
+                  color: "var(--iconActiveColor)"
+                }
+              }}
+              interval={8000}
+            >
+              {welcomeBanner.map((item, index) =>
+                <item.Banner key={index} />
+              )}
+            </Carousel>
+          ) : <Icon svg="logo-lens" className="logo" />}

-            <div className="flex justify-center">
-              <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
-                <h2>Welcome to {productName} 5!</h2>
+          <div className="flex justify-center">
+            <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
+              <h2>Welcome to {productName} 5!</h2>

-                <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.
-                  <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>.
-                </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.
+                <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>.
+              </p>

-                <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
-                  {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
-                    <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" />
-                    </li>
-                  ))}
-                </ul>
-              </div>
+              <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
+                {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
+                  <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" />
+                  </li>
+                ))}
+              </ul>
            </div>
          </div>
        </div>
-      </>
+      </div>
    );
  }
 }
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/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;
--- a/src/renderer/components/cluster-manager/cluster-manager.tsx
+++ b/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>
--- a/src/renderer/components/cluster-manager/cluster-view.tsx
+++ b/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>
    );
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@ -25,13 +25,9 @@
  position: relative;
  text-align: center;
  background: $clusterMenuBackground;
-  padding-top: 28px;
-  width: 75px;
-
-  .is-mac &:before {
-    content: "";
-    height: 4px; // extra spacing for mac-os "traffic-light" buttons
-  }
+  padding-top: 1px;
+  width: var(--hotbar-width);
+  overflow: hidden;

  .HotbarItems {
    --cellWidth: 40px;
--- a/src/renderer/components/layout/sidebar.module.css
+++ b/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 {
-  $iconSize: 24px;
-  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
+.sidebarNav {
+  @apply flex overflow-auto flex-col;
+  width: var(--sidebar-width);
+  padding-bottom: calc(var(--padding) * 3);

-  .sidebar-nav {
-    width: var(--sidebar-width);
-    padding-bottom: calc(var(--padding) * 3);
-    overflow: auto;
-
-    .Icon {
-      --size: #{$iconSize};
-
-      box-sizing: content-box;
-      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);
-  }
+  /* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
+  background:
+    linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
+    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)),
+    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;
+  background-attachment: local, local, scroll, scroll;
+}
+
+.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;
 }
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/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)}>
-        {this.clusterEntity && (
-          <div className="cluster-name">
-            {this.clusterEntity.metadata.name}
-          </div>
-        )}
-        <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
+      <div className={cssNames("flex flex-col", className)} data-testid="cluster-sidebar">
+        {this.renderCluster()}
+        <div className={styles.sidebarNav}>
          <SidebarItem
            id="cluster"
            text="Cluster"
--- a/src/renderer/components/layout/topbar.module.css
+++ b/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;
 }
--- a/src/renderer/components/layout/topbar.tsx
+++ b/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)}
        />