Add tooltip

src/components/Insights/InsightsCatalog/index.tsx

@@ -84,7 +84,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
     <>
       <s.Toolbar>
         <SearchInput
-          disabled={!!config.scope?.span}
+          disabled={Boolean(config.scope?.span)}
           onChange={(val: string | null) => {
             setSearchInputValue(val);
           }}

src/components/Insights/index.tsx

@@ -358,7 +358,8 @@ export const Insights = (props: InsightsProps) => {
       {infoToOpenJiraTicket && (
         <s.Overlay>
           <s.PopupContainer>
-            {config.userRegistrationEmail ? (
+            {/* {config.userRegistrationEmail ? ( */}
+            {true ? ( // eslint-disable-line no-constant-condition
               renderInsightTicket(
                 infoToOpenJiraTicket,
                 handleJiraTicketPopupClose

src/components/Navigation/CodeButtonMenu/index.tsx

@@ -3,8 +3,8 @@ import { actions } from "../../../actions";
 import { isString } from "../../../typeGuards/isString";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { NewButton } from "../../common/NewButton";
-import { Tooltip } from "../../common/Tooltip";
 import { CodeIcon } from "../../common/icons/16px/CodeIcon";
+import { Tooltip } from "../../common/v3/Tooltip";
 import { MenuList } from "../common/MenuList";
 import { Popup } from "../common/Popup";
 import { trackingEvents } from "../tracking";

src/components/Navigation/EnvironmentBar/index.tsx

@@ -1,9 +1,9 @@
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { EnvironmentIcon } from "../../common/EnvironmentIcon";
-import { Tooltip } from "../../common/Tooltip";
 import { ChevronIcon } from "../../common/icons/16px/ChevronIcon";
 import { GlobeIcon } from "../../common/icons/16px/GlobeIcon";
 import { Direction } from "../../common/icons/types";
+import { Tooltip } from "../../common/v3/Tooltip";
 import { trackingEvents } from "../tracking";
 import * as s from "./styles";
 import { EnvironmentBarProps } from "./types";

src/components/Navigation/ScopeBar/index.tsx

@@ -2,9 +2,9 @@ import { useEffect, useState } from "react";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { CodeDetails, Scope } from "../../common/App/types";
 import { NewPopover } from "../../common/NewPopover";
-import { Tooltip } from "../../common/Tooltip";
 import { CrosshairIcon } from "../../common/icons/16px/CrosshairIcon";
 import { HomeIcon } from "../../common/icons/16px/HomeIcon";
+import { Tooltip } from "../../common/v3/Tooltip";
 import { actions } from "../actions";
 import { Popup } from "../common/Popup";
 import { trackingEvents } from "../tracking";

src/components/Navigation/Tabs/index.tsx

@@ -2,7 +2,7 @@ import { useContext } from "react";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { Scope } from "../../common/App/types";
-import { Tooltip } from "../../common/Tooltip";
+import { Tooltip } from "../../common/v3/Tooltip";
 import { trackingEvents } from "../tracking";
 import { TabData } from "../types";
 import * as s from "./styles";

src/components/Navigation/common/MenuList/index.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 import { isBoolean } from "../../../../typeGuards/isBoolean";
 import { groupBy } from "../../../../utils/groupBy";
 import { intersperse } from "../../../../utils/intersperse";
-import { Tooltip } from "../../../common/Tooltip";
+import { Tooltip } from "../../../common/v3/Tooltip";
 import * as s from "./styles";
 import { MenuListProps } from "./types";
 

src/components/Navigation/index.tsx

@@ -9,9 +9,9 @@ import { ConfigContext } from "../common/App/ConfigContext";
 import { Environment, Scope } from "../common/App/types";
 import { EnvironmentIcon } from "../common/EnvironmentIcon";
 import { NewPopover } from "../common/NewPopover";
-import { Tooltip } from "../common/Tooltip";
 import { FourSquaresIcon } from "../common/icons/FourSquaresIcon";
 import { ThreeDotsIcon } from "../common/icons/ThreeDotsIcon";
+import { Tooltip } from "../common/v3/Tooltip";
 import { CodeButton } from "./CodeButton";
 import { CodeButtonMenu } from "./CodeButtonMenu";
 import { EnvironmentBar } from "./EnvironmentBar";

src/components/Tests/index.tsx

@@ -323,7 +323,8 @@ export const Tests = (props: TestsProps) => {
       {testToOpenTicketPopup && (
         <s.Overlay>
           <s.PopupContainer>
-            {config.userRegistrationEmail ? (
+            {/* {config.userRegistrationEmail ? ( */}
+            {true ? ( // eslint-disable-line no-constant-condition
               <TestTicket
                 test={testToOpenTicketPopup}
                 spanContexts={data?.data?.spanContexts || []}

src/components/common/v3/Tag/Tag.stories.tsx

@@ -19,70 +19,40 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     content: <BottleneckIcon size={16} />
-  },
-  parameters: {
-    design: {
-      type: "figma"
-    }
   }
 };
 
 export const HighlightString: Story = {
   args: {
     type: "highlight",
     content: <span>~30ms</span>
-  },
-  parameters: {
-    design: {
-      type: "figma"
-    }
   }
 };
 
 export const HighSeverity: Story = {
   args: {
     type: "highSeverity",
     content: <span>input</span>
-  },
-  parameters: {
-    design: {
-      type: "figma"
-    }
   }
 };
 
 export const MediumSeverity: Story = {
   args: {
     type: "mediumSeverity",
     content: <span>input</span>
-  },
-  parameters: {
-    design: {
-      type: "figma"
-    }
   }
 };
 
 export const LowSeverity: Story = {
   args: {
     type: "lowSeverity",
     content: <span>Input</span>
-  },
-  parameters: {
-    design: {
-      type: "figma"
-    }
   }
 };
 
 export const Success: Story = {
   args: {
     type: "success",
     content: <span>10ms</span>
-  },
-  parameters: {
-    design: {
-      type: "figma"
-    }
   }
 };

src/components/common/v3/Tag/index.tsx

@@ -1,10 +1,8 @@
 import * as s from "./styles";
 import { TagProps } from "./types";
 
-export const Tag = (props: TagProps) => {
-  return (
-    <s.Container $type={props.type}>
-      <s.ValueContainer>{props.content}</s.ValueContainer>
-    </s.Container>
-  );
-};
+export const Tag = (props: TagProps) => (
+  <s.Container $type={props.type}>
+    <s.ValueContainer>{props.content}</s.ValueContainer>
+  </s.Container>
+);

src/components/common/v3/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Tooltip } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Tooltip> = {
+  title: "Common/v3/Tooltip",
+  component: Tooltip,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: <span>Hover me</span>,
+    title: "Tooltip title"
+  }
+};

src/components/common/v3/Tooltip/index.tsx

@@ -0,0 +1,154 @@
+import {
+  FloatingArrow,
+  FloatingPortal,
+  Placement,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+  useHover,
+  useInteractions,
+  useTransitionStyles
+} from "@floating-ui/react";
+import { CSSProperties, Children, cloneElement, useRef, useState } from "react";
+import { useTheme } from "styled-components";
+import { isBoolean } from "../../../../typeGuards/isBoolean";
+import { isString } from "../../../../typeGuards/isString";
+import * as s from "./styles";
+import { TooltipProps } from "./types";
+
+// in pixels
+const ARROW_MARGIN = -4;
+const ARROW_HEIGHT = 9;
+const ARROW_WIDTH = ARROW_HEIGHT;
+const GAP = 8;
+
+const getArrowStyles = (placement: Placement, dropShadow: boolean) => {
+  let styles: CSSProperties = dropShadow
+    ? { filter: "drop-shadow(0 0 6px rgb(0 0 0 / 15%))", zIndex: -1 }
+    : {};
+
+  switch (placement) {
+    case "top":
+    case "top-start":
+    case "top-end":
+      styles = {
+        ...styles,
+        marginTop: ARROW_MARGIN
+      };
+      break;
+    case "right":
+    case "right-start":
+    case "right-end":
+      styles = {
+        ...styles,
+        marginRight: ARROW_MARGIN
+      };
+      break;
+    case "bottom":
+    case "bottom-start":
+    case "bottom-end":
+      styles = {
+        ...styles,
+        marginBottom: ARROW_MARGIN
+      };
+      break;
+    case "left":
+    case "left-start":
+    case "left-end":
+      styles = {
+        ...styles,
+        marginLeft: ARROW_MARGIN
+      };
+  }
+
+  return styles;
+};
+
+export const Tooltip = (props: TooltipProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const arrowRef = useRef(null);
+
+  const theme = useTheme();
+
+  const placement = props.placement || "top";
+
+  const { refs, floatingStyles, context } = useFloating({
+    whileElementsMounted: autoUpdate,
+    placement,
+    open: isBoolean(props.isOpen) ? props.isOpen : isOpen,
+    onOpenChange: isBoolean(props.isOpen) ? undefined : setIsOpen,
+    middleware: [
+      offset(GAP + ARROW_HEIGHT + ARROW_MARGIN),
+      flip(),
+      shift(),
+      arrow({
+        element: arrowRef
+      })
+    ]
+  });
+
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    common: {
+      transitionTimingFunction: "ease-in-out"
+    },
+    duration: 150
+  });
+
+  const hover = useHover(context, {
+    delay: { open: 1000, close: 0 },
+    enabled: !isBoolean(props.isOpen)
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+
+  const renderArrow = (withShadow: boolean) => (
+    <FloatingArrow
+      ref={arrowRef}
+      context={context}
+      fill={
+        isString(props.style?.background)
+          ? props.style?.background
+          : theme.colors.v3.surface.secondary
+      }
+      width={ARROW_WIDTH}
+      height={ARROW_HEIGHT}
+      d={
+        "M4.87.5a1 1 0 0 0-1.74 0L.97 4.25a1 1 0 0 0 .86 1.5h4.34a1 1 0 0 0 .86-1.5L4.87.5Z"
+      }
+      style={{
+        ...getArrowStyles(context.placement, withShadow)
+      }}
+    />
+  );
+
+  return (
+    <>
+      {Children.map(props.children, (child) =>
+        cloneElement(child, {
+          ref: refs.setReference,
+          ...getReferenceProps()
+        })
+      )}
+      {(isBoolean(props.isOpen) ? props.isOpen && isMounted : isMounted) && (
+        <FloatingPortal>
+          <s.TooltipContainer
+            ref={refs.setFloating}
+            style={{
+              ...floatingStyles,
+              ...transitionStyles,
+              ...props.style
+            }}
+            {...getFloatingProps()}
+          >
+            {renderArrow(true)}
+            {renderArrow(false)}
+            <s.Tooltip>{props.title}</s.Tooltip>
+          </s.TooltipContainer>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};

src/components/common/v3/Tooltip/styles.ts

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { LAYERS } from "../../App/styles";
+
+export const TooltipContainer = styled.div`
+  z-index: ${LAYERS.TOOLTIP};
+`;
+
+export const Tooltip = styled.div`
+  padding: 4px;
+  border-radius: 4px;
+  box-shadow: 0 0 6px 0 rgb(0 0 0 / 15%);
+  font-size: 14px;
+  word-break: break-all;
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+  background: ${({ theme }) => theme.colors.v3.surface.secondary};
+`;

src/components/common/v3/Tooltip/types.ts

@@ -0,0 +1,15 @@
+import { Placement } from "@floating-ui/react";
+import { ReactElement, ReactNode } from "react";
+
+export interface TooltipThemeColors {
+  background: string;
+  text: string;
+}
+
+export interface TooltipProps {
+  children: ReactElement;
+  title: ReactNode;
+  placement?: Placement;
+  style?: React.CSSProperties;
+  isOpen?: boolean;
+}

src/types.ts

@@ -10,8 +10,6 @@ export enum FeatureFlag {
 
 export enum InsightType {
   TopErrorFlows = "TopErrorFlows",
-  SpanDurationChange = "SpanDurationChange",
-  SpanUsageStatus = "SpanUsageStatus",
   HotSpot = "HotSpot",
   Errors = "Errors",
   SlowEndpoint = "SlowEndpoint",