Added info styles

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/types.ts

@@ -10,4 +10,6 @@ export interface ActionButtonProps {
   title?: ReactNode;
   onClick: () => void;
   isDisabled?: boolean;
+  className?: string;
+  tooltip?: ReactNode;
 }

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx

@@ -67,9 +67,6 @@ export const InsightHeader = ({
         )}
         <s.Title>
           {insightTypeInfo?.label}
-          {insightTypeInfo?.description && (
-            <s.TitleInfo title={<insightTypeInfo.description />} />
-          )}
           {lastUpdateTimer && (
             <s.Description>
               Updated:

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightsInfo/InsightsInfo.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { InsightsInfo } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof InsightsInfo> = {
+  title: "Insights/InsightsCatalog/InsightsPage/InsightsInfo",
+  component: InsightsInfo,
+  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: {
+    isOpen: true,
+    description: () => (
+      <>
+        This area significantly slows down the entire request and takes up at
+        least 30% of the request time. You should consider making this code
+        asynchronous or otherwise optimize it.
+      </>
+    )
+  }
+};

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightsInfo/index.tsx

@@ -0,0 +1,63 @@
+import { InsightsInfoProps } from "./types";
+
+import { openURLInDefaultBrowser } from "../../../../../../../../utils/actions/openURLInDefaultBrowser";
+import { sendUserActionTrackingEvent } from "../../../../../../../../utils/actions/sendUserActionTrackingEvent";
+import { CrossIcon } from "../../../../../../../common/icons/12px/CrossIcon";
+import { trackingEvents } from "../../../../../../tracking";
+import * as s from "./styles";
+
+export const InsightsInfo = ({
+  isOpen,
+  children,
+  description: Description,
+  documentationLink,
+  onClose
+}: InsightsInfoProps) => {
+  const handleOpenDocsClick = () => {
+    if (!documentationLink) {
+      return;
+    }
+
+    sendUserActionTrackingEvent(trackingEvents.INSIGHTS_INFO_OPEN_DOCS_CLICKED);
+    openURLInDefaultBrowser(documentationLink);
+    onClose();
+  };
+
+  const handleCloseClick = () => {
+    sendUserActionTrackingEvent(trackingEvents.INSIGHTS_INFO_OPEN_DOCS_CLICKED);
+    onClose();
+  };
+
+  return (
+    <s.InfoTooltip
+      isOpen={isOpen}
+      onDismiss={onClose}
+      isDisabled={!Description}
+      placement="top"
+      title={
+        <s.Container>
+          <s.Header>
+            <s.CloseButton
+              onClick={handleCloseClick}
+              icon={(props) => <CrossIcon {...props} size={12} />}
+              size={"small"}
+              buttonType="secondaryBorderless"
+            ></s.CloseButton>
+          </s.Header>
+          <s.Content>
+            <s.Description>{Description && <Description />}</s.Description>
+            {documentationLink && (
+              <s.StyledLink onClick={handleOpenDocsClick}>
+                Open Docs
+              </s.StyledLink>
+            )}
+          </s.Content>
+        </s.Container>
+      }
+      hideArrow={true}
+      fullWidth={true}
+    >
+      {children}
+    </s.InfoTooltip>
+  );
+};

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightsInfo/styles.ts

@@ -0,0 +1,51 @@
+import styled from "styled-components";
+import {
+  footnoteRegularTypography,
+  subscriptRegularTypography
+} from "../../../../../../../common/App/typographies";
+import { Link } from "../../../../../../../common/v3/Link";
+import { NewIconButton } from "../../../../../../../common/v3/NewIconButton";
+import { Tooltip } from "../../../../../../../common/v3/Tooltip";
+
+export const CloseButton = styled(NewIconButton)`
+  display: flex;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  height: 20px;
+`;
+
+export const Description = styled.div`
+  ${footnoteRegularTypography}
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 12px 12px;
+`;
+
+export const StyledLink = styled(Link)`
+  ${subscriptRegularTypography}
+  text-decoration: underline;
+  padding: 4px 0;
+`;
+
+export const InfoTooltip = styled(Tooltip)`
+  max-width: 256px;
+`;

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightsInfo/types.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+
+export interface InsightsInfoProps {
+  isOpen?: boolean;
+  children: ReactElement;
+  description?: () => JSX.Element;
+  onClose: () => void;
+  documentationLink?: string | null;
+}