PoC: first run

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+cluster-settings/cluster-icon.scss

@@ -1,5 +1,11 @@
 .ClusterIcon {
   position: relative;
+  --size: 40px;
+
+  > img {
+    width: var(--size);
+    height: var(--size);
+  }
 
   .Badge {
     position: absolute;

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

@@ -7,15 +7,16 @@ import { Cluster } from "../../../main/cluster";
 import { cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
 
-interface Props extends DOMAttributes<HTMLElement>, Omit<HashiconProps, "value"> {
-  className?: IClassName;
-  showBadge?: boolean;
+interface Props extends DOMAttributes<HTMLElement> {
   cluster: Cluster;
+  className?: IClassName;
+  errorClass?: IClassName;
+  showErrorCount?: boolean;
+  options?: HashiconProps["options"]
 }
 
 const defaultProps: Partial<Props> = {
-  size: 38,
-  showBadge: true,
+  showErrorCount: true,
 };
 
 @observer
@@ -23,23 +24,20 @@ export class ClusterIcon extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
   render() {
-    const { className, cluster, showBadge, options, size, ...elemProps } = this.props;
+    const { className, cluster, showErrorCount, errorClass, options, children, ...elemProps } = this.props;
     const { isAdmin, eventCount, preferences } = cluster;
     const { clusterName, icon } = preferences;
-    const eventsCount = eventCount >= 1000 ? Math.ceil(eventCount / 1000) * 1000 + "+" : eventCount;
     return (
       <div className={cssNames("ClusterIcon flex inline", className)} {...elemProps}>
-        {icon && <img src={icon} width={size} height={size} alt={clusterName}/>}
-        {!icon && (
-          <Hashicon
-            value={clusterName}
-            size={size}
-            options={options}
+        {icon && <img src={icon} alt={clusterName}/>}
+        {!icon && <Hashicon value={clusterName} options={options}/>}
+        {showErrorCount && isAdmin && eventCount > 0 && (
+          <Badge
+            className={cssNames("events-count", errorClass)}
+            label={eventCount >= 1000 ? Math.ceil(eventCount / 1000) * 1000 + "+" : eventCount}
           />
         )}
-        {showBadge && isAdmin && eventsCount && (
-          <Badge label={eventsCount} className="events-count"/>
-        )}
+        {children}
       </div>
     );
   }

src/renderer/components/cluster-manager/clusters-menu.scss

@@ -5,6 +5,10 @@
   padding: $padding * 1.5;
   background: $menuBgc;
 
+  > * {
+    cursor: pointer;
+  }
+
   .add-cluster {
     position: relative;
 
@@ -27,8 +31,7 @@
       }
     }
 
-    // todo: reuse in cluster-icon.tsx
-    .Badge.new-contexts {
+    .Badge.counter {
       $boxSize: 17px;
       $offset: -7px;
 
@@ -45,6 +48,7 @@
       font-weight: normal;
       border-radius: $radius;
       padding: 0;
+      pointer-events: none;
     }
   }
 }

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -64,15 +64,16 @@ export class ClustersMenu extends React.Component<Props> {
             <ClusterIcon
               key={cluster.id}
               cluster={cluster}
+              showErrorCount={true}
               className={cssNames({ active: isActive })}
               onClick={() => this.selectCluster(cluster)}
               onContextMenu={() => this.showContextMenu(cluster)}
             />
           )
         })}
-        <div className="add-cluster">
+        <div className="add-cluster" onClick={this.addCluster}>
           <Icon
-            big material="add" className="add" onClick={this.addCluster}
+            big material="add" className="add"
             tooltip={(
               <div className="flex column gaps">
                 <p><Trans>This is the quick launch menu.</Trans></p>
@@ -85,7 +86,7 @@ export class ClustersMenu extends React.Component<Props> {
             )}
           />
           {newContexts.length > 0 && (
-            <Badge className="new-contexts" label={newContexts.length}/>
+            <Badge className="counter" label={newContexts.length}/>
           )}
         </div>
       </div>

src/renderer/components/menu/menu.tsx

@@ -65,8 +65,7 @@ export class Menu extends React.Component<MenuProps, State> {
       const parent = this.elem.parentElement;
       const position = window.getComputedStyle(parent).position;
       if (position === 'static') parent.style.position = 'relative';
-    }
-    else if (this.isOpen) {
+    } else if (this.isOpen) {
       this.refreshPosition();
     }
     this.opener = document.getElementById(this.props.htmlFor); // might not exist in sub-menus
@@ -109,8 +108,7 @@ export class Menu extends React.Component<MenuProps, State> {
       let nextItem = reverse ? items[activeIndex - 1] : items[activeIndex + 1];
       if (!nextItem) nextItem = items[activeIndex];
       nextItem.elem.focus();
-    }
-    else {
+    } else {
       items[0].elem.focus();
     }
   }
@@ -224,7 +222,7 @@ export class Menu extends React.Component<MenuProps, State> {
   }
 
   render() {
-    const { position } = this.props;
+    const { position, id } = this.props;
     let { className, usePortal } = this.props;
     className = cssNames('Menu', className, this.state.position || position, {
       portal: usePortal,
@@ -246,7 +244,7 @@ export class Menu extends React.Component<MenuProps, State> {
     const menu = (
       <MenuContext.Provider value={this}>
         <Animate enter={this.isOpen}>
-          <ul className={className} ref={this.bindRef}>
+          <ul id={id} className={className} ref={this.bindRef}>
             {menuItems}
           </ul>
         </Animate>