Migrating Vue components to React and stores refactoring (#585)

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

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Sebastian Malton <smalton@mirantis.com>
Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -0,0 +1,38 @@
+.ClusterIcon {
+  --size: 37px;
+
+  position: relative;
+  border-radius: $radius;
+  padding: $radius;
+  user-select: none;
+  cursor: pointer;
+
+  &.interactive {
+    img {
+      opacity: .55;
+    }
+  }
+
+  &.active, &.interactive:hover {
+    background-color: #fff;
+
+    img {
+      opacity: 1;
+    }
+  }
+
+  img {
+    width: var(--size);
+    height: var(--size);
+  }
+
+  .Badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin: -$padding * 1.5;
+    font-size: $font-size-small;
+    background: $colorError;
+    color: white;
+  }
+}

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

@@ -0,0 +1,61 @@
+import "./cluster-icon.scss"
+
+import React, { DOMAttributes } from "react";
+import { observer } from "mobx-react";
+import { Params as HashiconParams } from "@emeraldpay/hashicon";
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { Cluster } from "../../../main/cluster";
+import { cssNames, IClassName } from "../../utils";
+import { Badge } from "../badge";
+import { Tooltip } from "../tooltip";
+
+interface Props extends DOMAttributes<HTMLElement> {
+  cluster: Cluster;
+  className?: IClassName;
+  errorClass?: IClassName;
+  showErrors?: boolean;
+  showTooltip?: boolean;
+  interactive?: boolean;
+  isActive?: boolean;
+  options?: HashiconParams;
+}
+
+const defaultProps: Partial<Props> = {
+  showErrors: true,
+  showTooltip: true,
+};
+
+@observer
+export class ClusterIcon extends React.Component<Props> {
+  static defaultProps = defaultProps as object;
+
+  render() {
+    const {
+      cluster, showErrors, showTooltip, errorClass, options, interactive, isActive,
+      children, ...elemProps
+    } = this.props;
+    const { isAdmin, eventCount, preferences, id: clusterId } = cluster;
+    const { clusterName, icon } = preferences;
+    const clusterIconId = `cluster-icon-${clusterId}`;
+    const className = cssNames("ClusterIcon flex inline", this.props.className, {
+      interactive: interactive !== undefined ? interactive : !!this.props.onClick,
+      active: isActive,
+    });
+    return (
+      <div {...elemProps} className={className} id={showTooltip ? clusterIconId : null}>
+        {showTooltip && (
+          <Tooltip targetId={clusterIconId}>{clusterName}</Tooltip>
+        )}
+        {icon && <img src={icon} alt={clusterName}/>}
+        {!icon && <Hashicon value={clusterId} options={options}/>}
+        {showErrors && isAdmin && eventCount > 0 && (
+          <Badge
+            className={cssNames("events-count", errorClass)}
+            label={eventCount >= 1000 ? Math.ceil(eventCount / 1000) + "k+" : eventCount}
+          />
+        )}
+        {children}
+      </div>
+    );
+  }
+}

src/renderer/components/cluster-icon/index.ts

@@ -0,0 +1 @@
+export * from "./cluster-icon"