Generic TopBar component for Catalog/Cluster views (#2882)

* Rendering close button in cluster view Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Changing Icon hover style Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Moving onClick handler away Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing sidebar compact view Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing 'compact' refs in SidebarItem Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Wrapping Catalog with MainLayout Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Making sidebar resizing indicator visible on hover Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding TopBar to catalog view Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Using TopBar in cluster views Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Cleaning up Sidebar styles Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Using getActiveClusterEntity() for searching Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix resizing anchor position Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Align cluster name on left Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing unused files Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing unused css var Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Showing Topbar in ClusterStatus page Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing TopBar from ClusterManager Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-06-07 11:46:40 +03:00
1 parent 278510a90a
commit 026cbbac09
@@ -0,0 +1,91 @@
+/**
+ * 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.
+ */
+
+.iconCell {
+  max-width: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.nameCell {
+}
+
+.sourceCell {
+  max-width: 100px;
+}
+
+.statusCell {
+  max-width: 100px;
+}
+
+.connected {
+  color: var(--colorSuccess);
+}
+
+.disconnected {
+  color: var(--halfGray);
+}
+
+.labelsCell {
+  overflow-x: scroll;
+  text-overflow: unset;
+}
+
+.labelsCell::-webkit-scrollbar {
+  display: none;
+}
+
+.badge {
+  overflow: unset;
+  text-overflow: unset;
+  max-width: unset;
+}
+
+.badge:not(:first-child) {
+  margin-left: 0.5em;
+}
+
+.catalogIcon {
+  font-size: 10px;
+  -webkit-font-smoothing: auto;
+}
+
+.tabs {
+  @apply flex flex-grow flex-col;
+}
+
+.tab {
+  @apply px-8 py-4;
+}
+
+.tab:hover {
+  background-color: var(--sidebarItemHoverBackground);
+  --color-active: var(--textColorTertiary);
+}
+
+.tab::after {
+  display: none;
+}
+
+.activeTab, .activeTab:hover {
+  background-color: var(--blue);
+  --color-active: white;
+}
@@ -19,7 +19,8 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-import "./catalog.scss";
+import styles from "./catalog.module.css";
+
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ItemListLayout } from "../item-object-list";
@@ -27,7 +28,6 @@ import { action, makeObservable, observable, reaction, when } from "mobx";
 import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store";
 import { navigate } from "../../navigation";
 import { kebabCase } from "lodash";
-import { PageLayout } from "../layout/page-layout";
 import { MenuItem, MenuActions } from "../menu";
 import type { CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
 import { Badge } from "../badge";
@@ -40,6 +40,12 @@ import type { RouteComponentProps } from "react-router";
 import type { ICatalogViewRouteParam } from "./catalog.route";
 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 {
@@ -139,14 +145,14 @@ export class Catalog extends React.Component<Props> {

  renderNavigation() {
    return (
-      <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
-        <div className="sidebarHeader">Catalog</div>
-        <div className="sidebarTabs">
+      <Tabs className={cssNames(styles.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
+        <div>
          <Tab
            value={undefined}
            key="*"
            label="Browse"
            data-testid="*-tab"
+            className={cssNames(styles.tab, { [styles.activeTab]: this.activeTab == null })}
          />
          {
            this.categories.map(category => (
@@ -155,6 +161,7 @@ export class Catalog extends React.Component<Props> {
                key={category.getId()}
                label={category.metadata.name}
                data-testid={`${category.getId()}-tab`}
+                className={cssNames(styles.tab, { [styles.activeTab]: this.activeTab == category.getId() })}
              />
            ))
          }
@@ -189,7 +196,7 @@ export class Catalog extends React.Component<Props> {
        colorHash={`${item.name}-${item.source}`}
        width={24}
        height={24}
-        className="catalogIcon"
+        className={styles.catalogIcon}
      />
    );
  }
@@ -278,22 +285,29 @@ export class Catalog extends React.Component<Props> {
    }

    return (
-      <PageLayout
-        className="CatalogPage"
-        navigation={this.renderNavigation()}
-        provideBackButtonNavigation={false}
-        contentGaps={false}>
-        { this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() }
-        { !this.selectedItem && (
-          <CatalogAddButton category={this.catalogEntityStore.activeCategory} />
-        )}
-        { this.selectedItem && (
-          <CatalogEntityDetails
-            entity={this.selectedItem.entity}
-            hideDetails={() => this.selectedItem = null}
-          />
-        )}
-      </PageLayout>
+      <>
+        <TopBar label="Catalog">
+          <div>
+            <MaterialTooltip title="Close Catalog" placement="left">
+              <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(welcomeURL())}/>
+            </MaterialTooltip>
+          </div>
+        </TopBar>
+        <MainLayout sidebar={this.renderNavigation()}>
+          <div className="p-6 h-full">
+            { this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() }
+          </div>
+          { !this.selectedItem && (
+            <CatalogAddButton category={this.catalogEntityStore.activeCategory} />
+          )}
+          { this.selectedItem && (
+            <CatalogEntityDetails
+              entity={this.selectedItem.entity}
+              hideDetails={() => this.selectedItem = null}
+            />
+          )}
+        </MainLayout>
+      </>
    );
  }
 }