From 10d066844aeac7ed30155b6eb74c81a877713297 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 8 Jun 2021 12:34:08 +0300 Subject: [PATCH] Move topbars to cluster manager Signed-off-by: Alex Andreev --- src/renderer/components/+catalog/catalog.tsx | 46 +++++++------------ .../cluster-manager/catalog-topbar.tsx | 39 ++++++++++++++++ .../cluster-manager/cluster-manager.scss | 8 ++-- .../cluster-manager/cluster-manager.tsx | 4 ++ .../cluster-manager/cluster-topbar.tsx | 19 +++++--- .../cluster-manager/cluster-view.tsx | 2 - .../components/layout/main-layout.module.css | 2 +- .../components/layout/topbar.module.css | 1 + 8 files changed, 79 insertions(+), 42 deletions(-) create mode 100644 src/renderer/components/cluster-manager/catalog-topbar.tsx diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index c2d180d2e2..78174e44b7 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -27,7 +27,6 @@ import { ItemListLayout } from "../item-object-list"; import { action, makeObservable, observable, reaction, when } from "mobx"; import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store"; import { navigate } from "../../navigation"; -import { kebabCase } from "lodash"; import { MenuItem, MenuActions } from "../menu"; import type { CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity"; import { Badge } from "../badge"; @@ -42,10 +41,6 @@ import { Notifications } from "../notifications"; import { Avatar } from "../avatar/avatar"; import { MainLayout } from "../layout/main-layout"; import { cssNames } from "../../utils"; -import { TopBar } from "../layout/topbar"; -import { welcomeURL } from "../+welcome"; -import { Icon } from "../icon"; -import { MaterialTooltip } from "../material-tooltip/material-tooltip"; import { CatalogEntityDetails } from "./catalog-entity-details"; enum sortBy { @@ -230,7 +225,7 @@ export class Catalog extends React.Component { item.name, item.source, item.labels.map((label) => ), - { title: item.phase, className: kebabCase(item.phase) } + { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) } ]} onDetails={(item: CatalogEntityItem) => this.onDetails(item) } renderItemMenu={this.renderItemMenu} @@ -269,7 +264,7 @@ export class Catalog extends React.Component { item.kind, item.source, item.labels.map((label) => ), - { title: item.phase, className: kebabCase(item.phase) } + { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) } ]} detailsItem={this.selectedItem} onDetails={(item: CatalogEntityItem) => this.onDetails(item) } @@ -284,29 +279,20 @@ export class Catalog extends React.Component { } return ( - <> - -
- - navigate(welcomeURL())}/> - -
- - -
- { this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() } -
- { !this.selectedItem && ( - - )} - { this.selectedItem && ( - this.selectedItem = null} - /> - )} - - + +
+ { this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() } +
+ { !this.selectedItem && ( + + )} + { this.selectedItem && ( + this.selectedItem = null} + /> + )} + ); } } diff --git a/src/renderer/components/cluster-manager/catalog-topbar.tsx b/src/renderer/components/cluster-manager/catalog-topbar.tsx new file mode 100644 index 0000000000..dd9da27523 --- /dev/null +++ b/src/renderer/components/cluster-manager/catalog-topbar.tsx @@ -0,0 +1,39 @@ +/** + * 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. + */ + +import React from "react"; +import { welcomeURL } from "../+welcome"; +import { navigate } from "../../navigation"; +import { Icon } from "../icon"; +import { TopBar } from "../layout/topbar"; +import { MaterialTooltip } from "../material-tooltip/material-tooltip"; + +export function CatalogTopbar() { + return ( + +
+ + navigate(welcomeURL())}/> + +
+ + ); +} diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss index 16f77051c9..da31c2a07b 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.scss +++ b/src/renderer/components/cluster-manager/cluster-manager.scss @@ -23,10 +23,12 @@ --bottom-bar-height: 22px; display: grid; - grid-template-areas: "menu main" "menu main" "bottom-bar bottom-bar"; + grid-template-areas: + "menu topbar" + "menu main" + "bottom-bar bottom-bar"; grid-template-rows: auto 1fr min-content; grid-template-columns: min-content 1fr; - height: 100%; main { grid-area: main; @@ -46,7 +48,7 @@ #lens-views { position: absolute; left: 0; - top: var(--main-layout-header); // Move below the TopBar + 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 a43ccb527a..29d1b5481c 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.tsx +++ b/src/renderer/components/cluster-manager/cluster-manager.tsx @@ -35,12 +35,16 @@ import { Extensions, extensionsRoute } from "../+extensions"; import { HotbarMenu } from "../hotbar/hotbar-menu"; import { EntitySettings, entitySettingsRoute } from "../+entity-settings"; import { Welcome, welcomeRoute, welcomeURL } from "../+welcome"; +import { ClusterTopbar } from "./cluster-topbar"; +import { CatalogTopbar } from "./catalog-topbar"; @observer export class ClusterManager extends React.Component { render() { return (
+ +
diff --git a/src/renderer/components/cluster-manager/cluster-topbar.tsx b/src/renderer/components/cluster-manager/cluster-topbar.tsx index af49194056..10f4f1fe41 100644 --- a/src/renderer/components/cluster-manager/cluster-topbar.tsx +++ b/src/renderer/components/cluster-manager/cluster-topbar.tsx @@ -19,21 +19,28 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ +import { observer } from "mobx-react"; import React from "react"; +import type { RouteComponentProps } from "react-router"; import { catalogURL } from "../+catalog"; -import type { Cluster } from "../../../main/cluster"; import { navigate } from "../../navigation"; import { Icon } from "../icon"; import { TopBar } from "../layout/topbar"; import { MaterialTooltip } from "../material-tooltip/material-tooltip"; +import type { IClusterViewRouteParams } from "./cluster-view.route"; +import type { Cluster } from "../../../main/cluster"; +import { ClusterStore } from "../../../common/cluster-store"; -interface Props { - cluster: Cluster +interface Props extends RouteComponentProps { } -export function ClusterTopbar({ cluster }: Props) { +export const ClusterTopbar = observer((props: Props) => { + const getCluster = (): Cluster | undefined => { + return ClusterStore.getInstance().getById(props.match.params.clusterId); + }; + return ( - +
navigate(catalogURL())}/> @@ -41,4 +48,4 @@ export function ClusterTopbar({ cluster }: Props) {
); -} +}); diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx index f1530032e3..6ccf566e27 100644 --- a/src/renderer/components/cluster-manager/cluster-view.tsx +++ b/src/renderer/components/cluster-manager/cluster-view.tsx @@ -32,7 +32,6 @@ import { clusterActivateHandler } from "../../../common/cluster-ipc"; import { catalogEntityRegistry } from "../../api/catalog-entity-registry"; import { navigate } from "../../navigation"; import { catalogURL } from "../+catalog/catalog.route"; -import { ClusterTopbar } from "./cluster-topbar"; import type { RouteComponentProps } from "react-router-dom"; import type { IClusterViewRouteParams } from "./cluster-view.route"; @@ -104,7 +103,6 @@ export class ClusterView extends React.Component { render() { return (
- {this.cluster && } {this.renderStatus()}
); diff --git a/src/renderer/components/layout/main-layout.module.css b/src/renderer/components/layout/main-layout.module.css index abee3c0258..f79a6d4fc7 100644 --- a/src/renderer/components/layout/main-layout.module.css +++ b/src/renderer/components/layout/main-layout.module.css @@ -28,7 +28,7 @@ grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr; width: 100%; z-index: 1; - height: calc(100% - var(--main-layout-header)); + height: 100%; } .sidebar { diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.css index 08378bb1d4..4738d53339 100644 --- a/src/renderer/components/layout/topbar.module.css +++ b/src/renderer/components/layout/topbar.module.css @@ -27,6 +27,7 @@ background-color: var(--layoutBackground); z-index: 1; width: 100%; + grid-area: topbar; } .title {