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/+catalog/catalog-entity-details.tsx

@@ -63,7 +63,9 @@ export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Pro
                 uid={item.id}
                 title={item.name}
                 source={item.source}
-                icon={item.entity.spec.iconData}
+                src={item.entity.spec.icon?.src}
+                material={item.entity.spec.icon?.material}
+                background={item.entity.spec.icon?.background}
                 disabled={!item?.enabled}
                 onClick={() => item.onRun(catalogEntityRunContext)}
                 size={128} />

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

@@ -169,9 +169,12 @@ export class Catalog extends React.Component<Props> {
         uid={item.getId()}
         title={item.getName()}
         source={item.source}
-        icon={item.entity.spec.iconData}
+        src={item.entity.spec.icon?.src}
+        material={item.entity.spec.icon?.material}
+        background={item.entity.spec.icon?.background}
         onClick={() => this.onDetails(item)}
-        size={24} />
+        size={24}
+      />
     );
   }
 

src/renderer/components/+welcome/welcome.tsx

@@ -44,7 +44,7 @@ export class Welcome extends React.Component {
 
           <ul className="box">
             {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
-              <li key={index} className="flex grid-12" onClick={() => item.click()}>
+              <li key={index} className="flex grid-12" onClick={() => item.click()} data-testId={item.testId}>
                 <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
               </li>
             ))}

src/renderer/components/avatar/avatar.tsx

@@ -32,6 +32,7 @@ interface Props extends DOMAttributes<HTMLElement>, Partial<AvatarTypeMap> {
   height?: number;
   src?: string;
   className?: string;
+  background?: string;
 }
 
 function getNameParts(name: string): string[] {
@@ -69,11 +70,11 @@ function getIconString(title: string) {
 }
 
 export function Avatar(props: Props) {
-  const { title, src, width = 32, height = 32, colorHash, ...settings } = props;
+  const { title, width = 32, height = 32, colorHash, children, background, ...settings } = props;
 
   const generateAvatarStyle = (): React.CSSProperties => {
     return {
-      backgroundColor: randomColor({ seed: colorHash, luminosity: "dark" }),
+      backgroundColor: background || randomColor({ seed: colorHash, luminosity: "dark" }),
       width,
       height,
       textTransform: "uppercase"
@@ -86,7 +87,7 @@ export function Avatar(props: Props) {
       style={generateAvatarStyle()}
       {...settings}
     >
-      {getIconString(title)}
+      {children || getIconString(title)}
     </MaterialAvatar>
   );
 }

src/renderer/components/cluster-manager/bottom-bar.scss

@@ -27,18 +27,6 @@
   padding: 0 2px;
   height: var(--bottom-bar-height);
 
-  #catalog-link {
-    font-size: var(--font-size-small);
-    color: white;
-    padding: $padding / 4 $padding / 2;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #ffffff33;
-      cursor: pointer;
-    }
-  }
-
   .extensions {
     font-size: var(--font-size-small);
     color: white;

src/renderer/components/cluster-manager/bottom-bar.tsx

@@ -24,9 +24,6 @@ import "./bottom-bar.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { StatusBarRegistration, StatusBarRegistry } from "../../../extensions/registries";
-import { navigate } from "../../navigation";
-import { Icon } from "../icon";
-import { catalogURL } from "../../../common/routes";
 
 @observer
 export class BottomBar extends React.Component {
@@ -67,10 +64,6 @@ export class BottomBar extends React.Component {
   render() {
     return (
       <div className="BottomBar flex gaps">
-        <div id="catalog-link" data-test-id="catalog-link" className="flex gaps align-center" onClick={() => navigate(catalogURL())}>
-          <Icon smallest material="view_list"/>
-          <span className="catalog-link" data-test-id="catalog-link">Catalog</span>
-        </div>
         {this.renderRegisteredItems()}
       </div>
     );

src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx

@@ -86,7 +86,7 @@ export class ClusterIconSetting 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}
         />
         <span style={{marginRight: "var(--unit)"}}>Browse for new icon...</span>
       </>

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()}

src/renderer/initializers/welcome-menu-registry.ts

@@ -29,7 +29,8 @@ export function initWelcomeMenuRegistry() {
       {
         title: "Browse Clusters",
         icon: "view_list",
-        click: () => navigate(catalogURL({ params: { group: "entity.k8slens.dev", kind: "KubernetesCluster" } } ))
+        click: () => navigate(catalogURL({ params: { group: "entity.k8slens.dev", kind: "KubernetesCluster" } } )),
+        testId: "browseClustersButton"
       }
     ]);
 }