Catalog menu restyling (#3067)

* Using TreeView for catalog menu

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Showing category icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix catalog badges

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing darker background on Categories group

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set controlled selected prop

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+catalog/catalog-menu.module.css

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+
+.bordered {
+  border-top: 1px solid var(--inputControlBorder);
+}
+
+.parent {
+  @apply uppercase font-bold;
+  color: var(--textColorAccent);
+  font-size: small;
+}

src/renderer/components/+catalog/catalog-menu.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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 treeStyles from "./catalog-tree.module.css";
+import styles from "./catalog-menu.module.css";
+
+import React from "react";
+import { TreeItem, TreeItemProps, TreeView } from "@material-ui/lab";
+import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
+import { Icon } from "../icon";
+import { StylesProvider } from "@material-ui/core";
+import { cssNames } from "../../utils";
+import type { CatalogCategory } from "../../api/catalog-entity";
+
+type Props = {
+  activeItem: string;
+  onItemClick: (id: string) => void;
+};
+
+function getCategories() {
+  return catalogCategoryRegistry.items;
+}
+
+function getCategoryIcon(category: CatalogCategory) {
+  if (!category.metadata?.icon) return null;
+
+  return category.metadata.icon.includes("<svg")
+    ? <Icon small svg={category.metadata.icon}/>
+    : <Icon small material={category.metadata.icon}/>;
+}
+
+function Item(props: TreeItemProps) {
+  return (
+    <TreeItem classes={treeStyles} {...props}/>
+  );
+}
+
+export function CatalogMenu(props: Props) {
+  return (
+    // Overwrite Material UI styles with injectFirst https://material-ui.com/guides/interoperability/#controlling-priority-4
+    <StylesProvider injectFirst>
+      <div className="flex flex-col w-full">
+        <TreeView
+          defaultExpanded={["catalog"]}
+          defaultCollapseIcon={<Icon material="expand_more"/>}
+          defaultExpandIcon={<Icon material="chevron_right" />}
+          selected={props.activeItem || "browse"}
+        >
+          <Item nodeId="browse" label="Browse" data-testid="*-tab" onClick={() => props.onItemClick("*")}/>
+          <Item
+            nodeId="catalog"
+            label={<div className={styles.parent}>Categories</div>}
+            className={cssNames(styles.bordered)}
+          >
+            {
+              getCategories().map(category => (
+                <Item
+                  icon={getCategoryIcon(category)}
+                  key={category.getId()}
+                  nodeId={category.getId()}
+                  label={category.metadata.name}
+                  data-testid={`${category.getId()}-tab`}
+                  onClick={() => props.onItemClick(category.getId())}
+                />
+              ))
+            }
+          </Item>
+        </TreeView>
+      </div>
+    </StylesProvider>
+  );
+}

src/renderer/components/+catalog/catalog-tree.module.css

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+
+/* This file overwrites basic Material UI TreeView styles. Can contain only following
+  classnames: root, expanded, selected, content, iconContainer, label, group
+*/
+
+.root {
+  color: var(--textColorTertiary);
+  min-height: 26px;
+}
+
+.label {
+  font-size: var(--font-size);
+  background-color: transparent!important;
+}
+
+.label:hover {
+  background-color: transparent;
+}
+
+.content {
+  min-height: 26px;
+}
+
+.content:hover {
+  background-color: var(--sidebarItemHoverBackground);
+  border-radius: 2px;
+}
+
+.group {
+  margin-left: 0px;
+}
+
+.group .iconContainer {
+  margin-left: 28px;
+}
+
+.selected > *:first-child {
+  background-color: var(--blue);
+  color: white;
+  border-radius: 2px;
+}
+
+.iconContainer {
+  width: 21px;
+  margin-left: 5px;
+  margin-right: 0;
+}

src/renderer/components/+catalog/catalog.tsx

@@ -32,7 +32,6 @@ import type { CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "
 import { Badge } from "../badge";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { ConfirmDialog } from "../confirm-dialog";
-import { Tab, Tabs } from "../tabs";
 import { catalogCategoryRegistry } from "../../../common/catalog";
 import { CatalogAddButton } from "./catalog-add-button";
 import type { RouteComponentProps } from "react-router";
@@ -42,6 +41,7 @@ import { cssNames } from "../../utils";
 import { makeCss } from "../../../common/utils/makeCss";
 import { CatalogEntityDetails } from "./catalog-entity-details";
 import type { CatalogViewRouteParam } from "../../../common/routes";
+import { CatalogMenu } from "./catalog-menu";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
 
 enum sortBy {
@@ -141,30 +141,7 @@ export class Catalog extends React.Component<Props> {
   };
 
   renderNavigation() {
-    return (
+    return <CatalogMenu activeItem={this.activeTab} onItemClick={this.onTabChange}/>;
-      <Tabs className={cssNames(css.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
-        <div>
-          <Tab
-            value={undefined}
-            key="*"
-            label="Browse"
-            data-testid="*-tab"
-            className={cssNames(css.tab, { [css.activeTab]: this.activeTab == null })}
-          />
-          {
-            this.categories.map(category => (
-              <Tab
-                value={category.getId()}
-                key={category.getId()}
-                label={category.metadata.name}
-                data-testid={`${category.getId()}-tab`}
-                className={cssNames(css.tab, { [css.activeTab]: this.activeTab == category.getId() })}
-              />
-            ))
-          }
-        </div>
-      </Tabs>
-    );
   }
 
   renderItemMenu = (item: CatalogEntityItem) => {
@@ -229,7 +206,7 @@ export class Catalog extends React.Component<Props> {
           this.renderIcon(item),
           item.name,
           item.source,
-          item.labels.map((label) => <Badge key={label} label={label} title={label} />),
+          item.labels.map((label) => <Badge className={css.badge} key={label} label={label} title={label} />),
           { title: item.phase, className: cssNames(css[item.phase]) }
         ]}
         onDetails={(item: CatalogEntityItem) => this.onDetails(item) }
@@ -268,7 +245,7 @@ export class Catalog extends React.Component<Props> {
           item.name,
           item.kind,
           item.source,
-          item.labels.map((label) => <Badge key={label} label={label} title={label} />),
+          item.labels.map((label) => <Badge className={css.badge} key={label} label={label} title={label} />),
           { title: item.phase, className: cssNames(css[item.phase]) }
         ]}
         detailsItem={this.selectedItem}