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/+events/events.tsx

@@ -1,13 +1,13 @@
 import "./events.scss";
 
-import React from "react";
+import React, { Fragment } from "react";
 import { observer } from "mobx-react";
 import { MainLayout } from "../layout/main-layout";
 import { eventStore } from "./event.store";
 import { KubeObjectListLayout, KubeObjectListLayoutProps } from "../kube-object";
 import { Trans } from "@lingui/macro";
 import { KubeEvent } from "../../api/endpoints/events.api";
-import { Tooltip, TooltipContent } from "../tooltip";
+import { Tooltip } from "../tooltip";
 import { Link } from "react-router-dom";
 import { cssNames, IClassName, stopPropagation } from "../../utils";
 import { Icon } from "../icon";
@@ -90,18 +90,14 @@ export class Events extends React.Component<Props> {
           const detailsUrl = getDetailsUrl(lookupApiLink(involvedObject, event));
           return [
             {
-              className: {
-                warning: isWarning
-              },
+              className: { warning: isWarning },
               title: (
-                <>
+                <Fragment>
                   <span id={tooltipId}>{message}</span>
-                  <Tooltip htmlFor={tooltipId} following>
-                    <TooltipContent narrow warning={isWarning}>
-                      {message}
-                    </TooltipContent>
+                  <Tooltip targetId={tooltipId} formatters={{ narrow: true, warning: isWarning }}>
+                    {message}
                   </Tooltip>
-                </>
+                </Fragment>
               )
             },
             event.getNs(),

src/renderer/components/+events/kube-event-icon.tsx

@@ -2,7 +2,6 @@ import "./kube-event-icon.scss";
 
 import React from "react";
 import { Icon } from "../icon";
-import { TooltipContent } from "../tooltip";
 import { KubeObject } from "../../api/kube-object";
 import { eventStore } from "./event.store";
 import { cssNames } from "../../utils";
@@ -34,15 +33,17 @@ export class KubeEventIcon extends React.Component<Props> {
       <Icon
         material="warning"
         className={cssNames("KubeEventIcon", { warning: event.isWarning() })}
-        tooltip={(
-          <TooltipContent className="KubeEventTooltip">
-            {event.message}
-            <div className="age">
-              <Icon material="access_time"/>
-              {event.getAge(undefined, undefined, true)}
+        tooltip={{
+          children: (
+            <div className="KubeEventTooltip">
+              <div className="msg">{event.message}</div>
+              <div className="age">
+                <Icon material="access_time"/>
+                {event.getAge(undefined, undefined, true)}
+              </div>
             </div>
-          </TooltipContent>
-        )}
+          )
+        }}
       />
     )
   }