diff --git a/integration/__tests__/cluster-pages.tests.ts b/integration/__tests__/cluster-pages.tests.ts index 8dae67dcaf..be032afab3 100644 --- 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}"]`, }; } diff --git a/integration/helpers/utils.ts b/integration/helpers/utils.ts index f0e82809fb..f9a10e1d4d 100644 --- a/integration/helpers/utils.ts +++ b/integration/helpers/utils.ts @@ -113,7 +113,7 @@ export async function lauchMinikubeClusterFromCatalog(window: Page): Promise { } return ( - <> - - -
- { this.renderList() } -
- { - this.catalogEntityStore.selectedItem - ? this.catalogEntityStore.selectedItemId = null} - /> - : ( - - - - ) - } - - + +
+ { this.renderList() } +
+ { + this.catalogEntityStore.selectedItem + ? this.catalogEntityStore.selectedItemId = null} + /> + : ( + + + + ) + } + ); } } diff --git a/src/renderer/components/+welcome/__test__/welcome.test.tsx b/src/renderer/components/+welcome/__test__/welcome.test.tsx index c0d17faebe..496c69ef18 100644 --- a/src/renderer/components/+welcome/__test__/welcome.test.tsx +++ b/src/renderer/components/+welcome/__test__/welcome.test.tsx @@ -51,23 +51,6 @@ describe("", () => { WelcomeBannerRegistry.resetInstance(); }); - it("renders items in the top bar", async () => { - const testId = "testId"; - const text = "topBarItem"; - - TopBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [ - { - components: { - Item: () => {text} - } - } - ]); - - render(); - - expect(screen.getByTestId(testId)).toHaveTextContent(text); - }); - it("renders registered in WelcomeBannerRegistry and hide logo", async () => { const testId = "testId"; diff --git a/src/renderer/components/+welcome/welcome.tsx b/src/renderer/components/+welcome/welcome.tsx index f813c957ab..8c8e3f231a 100644 --- 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 ( - <> - -
-
- {welcomeBanner.length > 0 ? ( - 1} - autoPlay={true} - navButtonsAlwaysInvisible={true} - indicatorIconButtonProps={{ - style: { - color: "var(--iconActiveBackground)" - } - }} - activeIndicatorIconButtonProps={{ - style: { - color: "var(--iconActiveColor)" - } - }} - interval={8000} - > - {welcomeBanner.map((item, index) => - - )} - - ) : } +
+
+ {welcomeBanner.length > 0 ? ( + 1} + autoPlay={true} + navButtonsAlwaysInvisible={true} + indicatorIconButtonProps={{ + style: { + color: "var(--iconActiveBackground)" + } + }} + activeIndicatorIconButtonProps={{ + style: { + color: "var(--iconActiveColor)" + } + }} + interval={8000} + > + {welcomeBanner.map((item, index) => + + )} + + ) : } -
-
-

Welcome to {productName} 5!

+
+
+

Welcome to {productName} 5!

-

- 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. -

- If you have any questions or feedback, please join our Lens Community slack channel. -

+

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

+ If you have any questions or feedback, please join our Lens Community slack channel. +

- -
+
- +
); } } diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss index e82c0d3aca..cc6a4a8e37 100644 --- 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; diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx index 687490f94c..8e041ccc7f 100644 --- 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 (
+
diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx index 1c8a9435fc..db48e051c8 100644 --- 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 { } @@ -105,7 +104,6 @@ export class ClusterView extends React.Component { render() { return (
- {this.renderStatus()}
); diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss index 3b7300507a..8dbc60853a 100644 --- 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; diff --git a/src/renderer/components/layout/sidebar.scss b/src/renderer/components/layout/sidebar.module.css similarity index 50% rename from src/renderer/components/layout/sidebar.scss rename to src/renderer/components/layout/sidebar.module.css index 18ac932f69..ad8f13cfa1 100644 --- a/src/renderer/components/layout/sidebar.scss +++ 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; +} \ No newline at end of file diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx index 1f584d176f..92dd03f311 100644 --- 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 { }); } + renderCluster() { + if (!this.clusterEntity) { + return null; + } + + const { metadata, spec } = this.clusterEntity; + + return ( +
+ +
+ {metadata.name} +
+
+ ); + } + get clusterEntity() { return catalogEntityRegistry.activeEntity; } @@ -185,13 +209,9 @@ export class Sidebar extends React.Component { const { className } = this.props; return ( -
- {this.clusterEntity && ( -
- {this.clusterEntity.metadata.name} -
- )} -
+
+ {this.renderCluster()} +
{