Added tooltip on overflowing texts (#771)

* Ok

* Fixes

* Fix according to PR

* Fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/tooltip/AppTooltip.tsx

@@ -0,0 +1,18 @@
+import { Tooltip } from 'react-tooltip';
+import styled from '@emotion/styled';
+
+export const AppTooltip = styled(Tooltip)`
+  background-color: ${({ theme }) => theme.background.primary};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+
+  color: ${({ theme }) => theme.font.color.primary};
+
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  max-width: 40%;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+  word-break: break-word;
+
+  z-index: ${({ theme }) => theme.lastLayerZIndex};
+`;

front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled from '@emotion/styled';
+import { v4 as uuidV4 } from 'uuid';
+
+import { AppTooltip } from './AppTooltip';
+
+const StyledOverflowingText = styled.div<{ cursorPointer: boolean }>`
+  cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')};
+  font-family: inherit;
+  font-size: inherit;
+
+  font-weight: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+  width: 100%;
+`;
+
+export function OverflowingTextWithTooltip({
+  text,
+}: {
+  text: string | null | undefined;
+}) {
+  const textElementId = `title-id-${uuidV4()}`;
+
+  const textRef = useRef<HTMLDivElement>(null);
+
+  const [isTitleOverflowing, setIsTitleOverflowing] = useState(false);
+
+  useEffect(() => {
+    const isOverflowing =
+      (text?.length ?? 0) > 0 && textRef.current
+        ? textRef.current?.scrollHeight > textRef.current?.clientHeight ||
+          textRef.current.scrollWidth > textRef.current.clientWidth
+        : false;
+
+    if (isTitleOverflowing !== isOverflowing) {
+      setIsTitleOverflowing(isOverflowing);
+    }
+  }, [isTitleOverflowing, text]);
+
+  function handleTooltipClick(event: React.MouseEvent<HTMLDivElement>) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  function handleTooltipMouseUp(event: React.MouseEvent<HTMLDivElement>) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  return (
+    <>
+      <StyledOverflowingText
+        ref={textRef}
+        id={textElementId}
+        cursorPointer={isTitleOverflowing}
+      >
+        {text}
+      </StyledOverflowingText>
+      {isTitleOverflowing &&
+        createPortal(
+          <div onMouseUp={handleTooltipMouseUp} onClick={handleTooltipClick}>
+            <AppTooltip
+              anchorSelect={`#${textElementId}`}
+              content={text ?? ''}
+              clickable
+              delayHide={100}
+              offset={5}
+              noArrow
+              place="bottom"
+              positionStrategy="absolute"
+            />
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}