UI: Add custom tooltip component

Issue #3418
PR #3622

monkey/monkey_island/cc/ui/src/components/ui-components/MonkeyTooltip.js

@@ -0,0 +1,57 @@
+import React, {useState} from 'react';
+import Zoom from '@mui/material/Zoom';
+import {Tooltip} from '@mui/material';
+
+export const TOOLTIP_POSITION = {
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+
+/*
+  The CSS is located inside App.css ('.MuiTooltip-tooltip') as the tooltip is a global component which is appended
+   on the body element.
+*/
+
+//* MonkeyTooltip is a wrapper for the Tooltip component from @mui/material.
+//* It is used to set default values for the Tooltip component.
+//* props are forwarded to the Tooltip component.
+//* props can be overridden by passing them to the MonkeyTooltip component.
+//* props are: title, placement, className, key, isOverflow.
+//* The 'isOverflow' prop is meant to used in textual nodes only
+const MonkeyTooltip = (props) => {
+  const {placement, isOverflow = false, children, ...rest} = {...props};
+
+  const [tooltipEnabled, setTooltipEnabled] = useState(false);
+
+  const handleShouldShow = ({currentTarget}) => {
+    if (currentTarget.scrollWidth > currentTarget.clientWidth) {
+      setTooltipEnabled(true);
+    }
+  };
+
+  const forwardedProps = Object.assign(
+    {...rest},
+    {
+      placement: placement || TOOLTIP_POSITION.TOP,
+      TransitionComponent: Zoom
+    }
+  );
+
+  if (isOverflow) {
+    return (
+      <Tooltip {...forwardedProps}
+               arrow
+               open={tooltipEnabled}>
+        <div className="text-truncate" onMouseEnter={handleShouldShow} onMouseLeave={()=> setTooltipEnabled(false)}>
+          {children}
+        </div>
+      </Tooltip>
+    )
+  }
+
+  return <Tooltip {...forwardedProps} arrow>{children}</Tooltip>;
+};
+
+export default MonkeyTooltip;

monkey/monkey_island/cc/ui/src/styles/App.css

@@ -234,11 +234,11 @@ body {
   display: none;
 }
 
-.nav-tabs>li>a {
+.nav-tabs > li > a {
   height: 63px
 }
 
-.nav>li>a:focus {
+.nav > li > a:focus {
   background-color: transparent !important;
 }
 
@@ -365,21 +365,21 @@ body {
  * Full Logs Page
  */
 
-.data-table-container>.container {
+.data-table-container > .container {
   width: inherit;
   padding: 0;
 }
 
-.data-table-container>.container th,
-.data-table-container>.container td {
+.data-table-container > .container th,
+.data-table-container > .container td {
   padding: 15px 8px;
 }
 
-.data-table-container>.container>.row:first-child>div:first-child>div {
+.data-table-container > .container > .row:first-child > div:first-child > div {
   display: inline-block;
 }
 
-.data-table-container>.container>.row:first-child>div:first-child>div:last-child {
+.data-table-container > .container > .row:first-child > div:first-child > div:last-child {
   margin-left: 1em;
 }
 
@@ -555,3 +555,15 @@ body {
   margin-left: auto;
   margin-right: auto;
 }
+
+/* Tooltip */
+.MuiTooltip-tooltip {
+  padding: 8px 10px;
+  font-size: 1rem;
+}
+
+.text-truncate {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}