General catalog category (#3106)

* Adding General Entities and General Category

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

* Usign material icons for general entities

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

* Setting background for hotbar icon explicitly

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

* Adding Catalog initially to first hotbar

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

* Tuning hotbar store tests

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

* Changing type from GeneralEntity to General

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

* Search for catalog hotbar item in tests

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

* Removing Catalog link from bottom bar

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

* Waiting for hotbar catalog entity

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

* Opening cluster list by data-testId

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

* Replacing types on interfaces

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

* Fixing integration tests

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

* Adding general entities throught initializers

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

* Removing icon refs from CatalogEntitySpec

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

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -129,7 +129,9 @@ export class HotbarEntityIcon extends React.Component<Props> {
         uid={entity.metadata.uid}
         title={entity.metadata.name}
         source={entity.metadata.source}
-        icon={entity.spec.iconData}
+        src={entity.spec.icon?.src}
+        material={entity.spec.icon?.material}
+        background={entity.spec.icon?.background}
         className={className}
         active={isActive}
         onMenuOpen={onOpen}

src/renderer/components/hotbar/hotbar-icon.scss

@@ -20,7 +20,6 @@
  */
 
 .HotbarMenu {
-
   .HotbarIconMenu {
     left: 30px;
     min-width: 250px;
@@ -126,4 +125,11 @@
       }
     }
   }
+
+  .materialIcon {
+    margin-left: 1px;
+    margin-top: 1px;
+    text-shadow: none;
+    font-size: 180%;
+  }
 }

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -30,18 +30,21 @@ import { Menu, MenuItem } from "../menu";
 import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 import { observer } from "mobx-react";
 import { Avatar } from "../avatar/avatar";
+import { Icon } from "../icon";
 
 export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
   uid: string;
   title: string;
   source: string;
-  icon?: string;
+  src?: string;
+  material?: string;
   onMenuOpen?: () => void;
   className?: IClassName;
   active?: boolean;
   menuItems?: CatalogEntityContextMenu[];
   disabled?: boolean;
   size?: number;
+  background?: string;
 }
 
 function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
@@ -62,7 +65,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
 }
 
 export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => {
-  const { uid, title, icon, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props;
+  const { uid, title, src, material, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props;
   const id = `hotbarIcon-${uid}`;
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -71,38 +74,28 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
   };
 
   const renderIcon = () => {
-    if (icon) {
-      return <img
-        {...rest}
-        src={icon}
-        className={active ? "active" : "default"}
-        width={size}
-        height={size} 
-        onClick={(event) => {
-          if (!disabled) {
-            onClick?.(event);
-          }
-        }}
-      />;
-    } else {
-      return <Avatar
+    return (
+      <Avatar
         {...rest}
         title={title}
         colorHash={`${title}-${source}`}
         className={active ? "active" : "default"}
         width={size}
         height={size}
+        src={src}
         onClick={(event) => {
           if (!disabled) {
             onClick?.(event);
           }
         }}
-      />;
-    }
+      >
+        {material && <Icon className="materialIcon" material={material}/>}
+      </Avatar>
+    );
   };
 
   return (
-    <div className={cssNames("HotbarIcon flex inline", className, { disabled })}>
+    <div className={cssNames("HotbarIcon flex", className, { disabled })}>
       <MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
         <div id={id}>
           {renderIcon()}