From e6fc32b006ad2abfbe2226dad1f3109af1d4d0bf Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 7 Mar 2024 10:40:22 +0100
Subject: [PATCH 1/4] Add "Could affect production" notification bar

---
 .../InsightCard/InsightHeader/index.tsx       | 10 ----
 .../InsightCard/InsightHeader/styles.ts       |  5 --
 .../ProductionAffectionBar.stories.tsx        | 26 +++++++++
 .../ProductionAffectionBar/index.tsx          | 24 +++++++++
 .../ProductionAffectionBar/styles.ts          | 34 ++++++++++++
 .../ProductionAffectionBar/types.ts           |  8 +++
 .../Insights/common/InsightCard/index.tsx     | 41 ++++++++++++--
 .../Insights/common/InsightCard/types.ts      |  5 +-
 .../EndpointBottleneckInsight/index.tsx       |  7 +--
 .../EndpointNPlusOneInsight/index.tsx         |  7 +--
 .../index.tsx                                 |  7 +--
 .../HighNumberOfQueriesInsight/index.tsx      | 10 ++--
 .../insights/ScalingIssueInsight/index.tsx    | 11 ++--
 .../SpanEndpointBottleneckInsight/index.tsx   | 10 ++--
 .../insights/SpanNPlusOneInsight/index.tsx    | 10 ++--
 .../SpanQueryOptimizationInsight/index.tsx    | 11 ++--
 src/components/Insights/index.tsx             |  5 +-
 src/components/Insights/tracking.ts           |  9 ++--
 src/components/common/App/themes/darkTheme.ts |  3 +-
 .../common/App/themes/lightTheme.ts           |  3 +-
 src/components/common/App/v3colors.ts         |  4 +-
 .../common/icons/16px/SparkleIcon.tsx         | 33 ++++++++++++
 src/components/common/v3/JiraButton/index.tsx | 54 ++++++++++++-------
 src/components/common/v3/JiraButton/types.ts  |  7 ++-
 src/styled.d.ts                               |  1 +
 25 files changed, 241 insertions(+), 104 deletions(-)
 create mode 100644 src/components/Insights/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx
 create mode 100644 src/components/Insights/common/InsightCard/ProductionAffectionBar/index.tsx
 create mode 100644 src/components/Insights/common/InsightCard/ProductionAffectionBar/styles.ts
 create mode 100644 src/components/Insights/common/InsightCard/ProductionAffectionBar/types.ts
 create mode 100644 src/components/common/icons/16px/SparkleIcon.tsx

diff --git a/src/components/Insights/common/InsightCard/InsightHeader/index.tsx b/src/components/Insights/common/InsightCard/InsightHeader/index.tsx
index fd45b7ab8..928089a10 100644
--- a/src/components/Insights/common/InsightCard/InsightHeader/index.tsx
+++ b/src/components/Insights/common/InsightCard/InsightHeader/index.tsx
@@ -6,7 +6,6 @@ import {
 import { roundTo } from "../../../../../utils/roundTo";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon";
-import { WarningTriangleIcon } from "../../../../common/icons/WarningTriangleIcon";
 import { Link } from "../../../../common/v3/Link";
 import { NewTag } from "../../../../common/v3/NewTag";
 import { Tag } from "../../../../common/v3/Tag";
@@ -17,8 +16,6 @@ import { InsightStatusBadge } from "./InsightStatusBadge";
 import * as s from "./styles";
 import { InsightHeaderProps } from "./types";
 
-const HIGH_CRITICALITY_THRESHOLD = 0.8;
-
 const getTagType = (criticality: number): TagType => {
   if (criticality < 0.2) {
     return "lowSeverity";
@@ -79,13 +76,6 @@ export const InsightHeader = (props: InsightHeaderProps) => {
           )}
         </s.Label>
         <s.BadgeContainer>
-          {props.criticality > HIGH_CRITICALITY_THRESHOLD && (
-            <Tooltip title={"Critical"}>
-              <s.WarningTriangleContainer>
-                <WarningTriangleIcon color={"currentColor"} size={12} />
-              </s.WarningTriangleContainer>
-            </Tooltip>
-          )}
           {props.isAsync && <AsyncTag />}
           {props.isNew && <NewTag />}
           {props.status && <InsightStatusBadge status={props.status} />}
diff --git a/src/components/Insights/common/InsightCard/InsightHeader/styles.ts b/src/components/Insights/common/InsightCard/InsightHeader/styles.ts
index c5e186a24..30a1bfc59 100644
--- a/src/components/Insights/common/InsightCard/InsightHeader/styles.ts
+++ b/src/components/Insights/common/InsightCard/InsightHeader/styles.ts
@@ -41,8 +41,3 @@ export const BadgeContainer = styled.div`
   gap: 8px;
   height: 24px;
 `;
-
-export const WarningTriangleContainer = styled.div`
-  display: flex;
-  color: ${({ theme }) => theme.colors.v3.status.high};
-`;
diff --git a/src/components/Insights/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx b/src/components/Insights/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx
new file mode 100644
index 000000000..acc33650c
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ProductionAffectionBar } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof ProductionAffectionBar> = {
+  title: "Insights/common/InsightCard/ProductionAffectionBar",
+  component: ProductionAffectionBar,
+  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 WithoutTicket: Story = {
+  args: {}
+};
+
+export const WithTicket: Story = {
+  args: {
+    isTicketCreated: true
+  }
+};
diff --git a/src/components/Insights/common/InsightCard/ProductionAffectionBar/index.tsx b/src/components/Insights/common/InsightCard/ProductionAffectionBar/index.tsx
new file mode 100644
index 000000000..07f89f3bf
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/ProductionAffectionBar/index.tsx
@@ -0,0 +1,24 @@
+import { SparkleIcon } from "../../../../common/icons/16px/SparkleIcon";
+import { Link } from "../../../../common/v3/Link";
+import * as s from "./styles";
+import { ProductionAffectionBarProps } from "./types";
+
+export const ProductionAffectionBar = (props: ProductionAffectionBarProps) => {
+  const handleCreateTicketLinkClick = () => {
+    props.onCreateTicket();
+  };
+
+  return (
+    <s.Container $isActive={!props.isTicketCreated}>
+      <s.SparkleIconContainer>
+        <SparkleIcon size={16} color={"currentColor"} />
+      </s.SparkleIconContainer>
+      <s.Title>Could affect production</s.Title>
+      {props.isTicketCreated ? (
+        <s.TicketStatus>Ticket Created</s.TicketStatus>
+      ) : (
+        <Link onClick={handleCreateTicketLinkClick}>Create Ticket</Link>
+      )}
+    </s.Container>
+  );
+};
diff --git a/src/components/Insights/common/InsightCard/ProductionAffectionBar/styles.ts b/src/components/Insights/common/InsightCard/ProductionAffectionBar/styles.ts
new file mode 100644
index 000000000..749f192fc
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/ProductionAffectionBar/styles.ts
@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { footnoteRegularTypography } from "../../../../common/App/typographies";
+import { ContainerProps } from "./types";
+
+export const Container = styled.div<ContainerProps>`
+  ${footnoteRegularTypography}
+
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.colors.v3.status.high};
+  background: ${({ theme, $isActive }) =>
+    $isActive
+      ? theme.colors.v3.status.backgroundHigh
+      : theme.colors.v3.pieChart.darkRed};
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  gap: 4px;
+`;
+
+export const SparkleIconContainer = styled.div`
+  color: ${({ theme }) => theme.colors.v3.status.high};
+`;
+
+export const Title = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: auto;
+`;
+
+export const TicketStatus = styled.div`
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
diff --git a/src/components/Insights/common/InsightCard/ProductionAffectionBar/types.ts b/src/components/Insights/common/InsightCard/ProductionAffectionBar/types.ts
new file mode 100644
index 000000000..818f68783
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/ProductionAffectionBar/types.ts
@@ -0,0 +1,8 @@
+export interface ProductionAffectionBarProps {
+  isTicketCreated: boolean;
+  onCreateTicket: () => void;
+}
+
+export interface ContainerProps {
+  $isActive: boolean;
+}
diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index 0c818d99b..f447d7f04 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -21,16 +21,21 @@ import { sendTrackingEvent } from "../../../../utils/sendTrackingEvent";
 import { actions } from "../../actions";
 import { trackingEvents } from "../../tracking";
 import { DismissInsightPayload, UndismissInsightPayload } from "../../types";
+import { ProductionAffectionBar } from "./ProductionAffectionBar";
 
 const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds
+const HIGH_CRITICALITY_THRESHOLD = 0.8;
 
 export const InsightCard = (props: InsightCardProps) => {
   const [isRecalculatingStarted, setIsRecalculatingStarted] = useState(false);
+
+  const isCritical = props.insight.criticality > HIGH_CRITICALITY_THRESHOLD;
+
   const handleRefreshLinkClick = () => {
     props.onRefresh(props.insight.type);
   };
 
-  const handleRecalculateClick = () => {
+  const handleRecheckButtonClick = () => {
     props.insight.prefixedCodeObjectId &&
       props.onRecalculate &&
       props.onRecalculate(props.insight.id);
@@ -100,7 +105,7 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleDismissClick = () => {
-    sendTrackingEvent(trackingEvents.DISMISS_BUTTON_CLICKED, {
+    sendTrackingEvent(trackingEvents.INSIGHT_DISMISS_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
 
@@ -114,7 +119,7 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleShowClick = () => {
-    sendTrackingEvent(trackingEvents.SHOW_BUTTON_CLICKED, {
+    sendTrackingEvent(trackingEvents.INSIGHT_SHOW_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
 
@@ -127,6 +132,25 @@ export const InsightCard = (props: InsightCardProps) => {
     props.onRefresh(props.insight.type);
   };
 
+  const openTicketInfo = (
+    spanCodeObjectId: string | undefined,
+    event: string
+  ) => {
+    if (props.onJiraButtonClick) {
+      props.onJiraButtonClick(spanCodeObjectId, event);
+    }
+  };
+
+  const handleCreateTicketLinkClick = () => {
+    sendTrackingEvent(trackingEvents.INSIGHT_CREATE_TICKET_LINK_CLICKED, {
+      insightType: props.insight.type
+    });
+    openTicketInfo(
+      props.jiraTicketInfo?.spanCodeObjectId,
+      "create ticket link clicked"
+    );
+  };
+
   const renderActions = () => {
     const buttonsToRender: {
       tooltip: string;
@@ -153,7 +177,7 @@ export const InsightCard = (props: InsightCardProps) => {
           <Button
             icon={RecalculateIcon}
             label={"Recheck"}
-            onClick={handleRecalculateClick}
+            onClick={handleRecheckButtonClick}
             {...btnProps}
           />
         )
@@ -168,7 +192,8 @@ export const InsightCard = (props: InsightCardProps) => {
             isHintEnabled={props.jiraTicketInfo?.isHintEnabled}
             spanCodeObjectId={props.jiraTicketInfo?.spanCodeObjectId}
             label={"Ticket"}
-            onTicketInfoButtonClick={props.onJiraButtonClick!}
+            onTicketInfoOpen={openTicketInfo}
+            insightType={props.insight.type}
             {...btnProps}
           />
         )
@@ -254,6 +279,12 @@ export const InsightCard = (props: InsightCardProps) => {
       }
       content={
         <s.ContentContainer>
+          {isCritical && (
+            <ProductionAffectionBar
+              isTicketCreated={isString(props.insight.ticketLink)}
+              onCreateTicket={handleCreateTicketLinkClick}
+            />
+          )}
           {props.insight.actualStartTime &&
             renderRecalculationBlock(
               props.insight.actualStartTime,
diff --git a/src/components/Insights/common/InsightCard/types.ts b/src/components/Insights/common/InsightCard/types.ts
index 39f5d3e9d..f33c1e641 100644
--- a/src/components/Insights/common/InsightCard/types.ts
+++ b/src/components/Insights/common/InsightCard/types.ts
@@ -24,7 +24,10 @@ export interface InsightCardProps {
     isHintEnabled?: boolean;
     spanCodeObjectId?: string;
   };
-  onJiraButtonClick?: (spanCodeObjectId: string, event: string) => void;
+  onJiraButtonClick?: (
+    spanCodeObjectId: string | undefined,
+    event: string
+  ) => void;
   onGoToSpan: (spanCodeObjectId: string) => void;
 }
 
diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
index 41ab2362f..a4be2f69d 100644
--- a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
@@ -1,6 +1,4 @@
 import { getDurationString } from "../../../../../utils/getDurationString";
-import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
-import { trackingEvents } from "../../../tracking";
 import { Info } from "../../Info";
 import { InsightCard } from "../../InsightCard";
 import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
@@ -20,12 +18,9 @@ export const EndpointBottleneckInsight = (
   };
 
   const handleTicketInfoButtonClick = (
-    spanCodeObjectId: string,
+    spanCodeObjectId: string | undefined,
     event: string
   ) => {
-    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
-      insightType: insight.type
-    });
     props.onJiraTicketCreate &&
       props.onJiraTicketCreate(insight, spanCodeObjectId, event);
   };
diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx
index e3d853862..73cbdf3f4 100644
--- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx
@@ -1,8 +1,6 @@
 import { useContext } from "react";
 import { getDurationString } from "../../../../../utils/getDurationString";
-import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
-import { trackingEvents } from "../../../tracking";
 import { InsightType, Trace } from "../../../types";
 import { Info } from "../../Info";
 import { InsightCard } from "../../InsightCard";
@@ -23,12 +21,9 @@ export const EndpointNPlusOneInsight = (
   };
 
   const handleTicketInfoButtonClick = (
-    spanCodeObjectId: string,
+    spanCodeObjectId: string | undefined,
     event: string
   ) => {
-    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
-      insightType: props.insight.type
-    });
     props.onJiraTicketCreate &&
       props.onJiraTicketCreate(props.insight, spanCodeObjectId, event);
   };
diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx b/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx
index 045e839b4..01e932707 100644
--- a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx
@@ -1,10 +1,8 @@
 import { ReactNode, useContext, useState } from "react";
 import { getDurationString } from "../../../../../utils/getDurationString";
-import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { Link } from "../../../../common/v3/Link";
 import { Tooltip } from "../../../../common/v3/Tooltip";
-import { trackingEvents } from "../../../tracking";
 import {
   EndpointQueryOptimizationSpan,
   InsightType,
@@ -55,12 +53,9 @@ export const EndpointQueryOptimizationInsight = (
   };
 
   const handleTicketInfoButtonClick = (
-    spanCodeObjectId: string,
+    spanCodeObjectId: string | undefined,
     event: string
   ) => {
-    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
-      insightType: props.insight.type
-    });
     props.onJiraTicketCreate &&
       props.onJiraTicketCreate(props.insight, spanCodeObjectId, event);
   };
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
index 72b42d51d..b56cb2009 100644
--- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
@@ -1,8 +1,6 @@
-import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon";
 import { Tag } from "../../../../common/v3/Tag";
 import { Tooltip } from "../../../../common/v3/Tooltip";
-import { trackingEvents } from "../../../tracking";
 import { InsightType, Trace } from "../../../types";
 import { InsightCard } from "../../InsightCard";
 import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
@@ -25,10 +23,10 @@ export const HighNumberOfQueriesInsight = (
     props.onTraceButtonClick(trace, insightType, spanCodeObjectId);
   };
 
-  const handleCreateJiraTicketButtonClick = (event: string) => {
-    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
-      insightType: insight.type
-    });
+  const handleCreateJiraTicketButtonClick = (
+    spanCodeObjectId: string | undefined,
+    event: string
+  ) => {
     props.onJiraTicketCreate &&
       props.onJiraTicketCreate(insight, undefined, event);
   };
diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
index f7c7290ec..d1ba09a91 100644
--- a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
+++ b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
@@ -1,14 +1,12 @@
 import { useContext } from "react";
 import { usePagination } from "../../../../../hooks/usePagination";
 import { getDurationString } from "../../../../../utils/getDurationString";
-import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { TraceIcon } from "../../../../common/icons/12px/TraceIcon";
 import { Button } from "../../../../common/v3/Button";
 import { JiraButton } from "../../../../common/v3/JiraButton";
 import { Pagination } from "../../../../common/v3/Pagination";
-import { trackingEvents } from "../../../tracking";
 import { InsightType, RootCauseSpanInfo, Trace } from "../../../types";
 import { InsightCard } from "../../InsightCard";
 import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
@@ -41,13 +39,9 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
   };
 
   const handleCreateJiraTicketButtonClick = (
-    spanCodeObjectId: string,
+    spanCodeObjectId: string | undefined,
     event: string
   ) => {
-    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
-      insightType: props.insight.type
-    });
-
     props.onJiraTicketCreate &&
       props.onJiraTicketCreate(props.insight, spanCodeObjectId, event);
   };
@@ -65,10 +59,11 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
             const buttons = [
               <JiraButton
                 key={"view-ticket-info"}
-                onTicketInfoButtonClick={handleCreateJiraTicketButtonClick}
+                onTicketInfoOpen={handleCreateJiraTicketButtonClick}
                 spanCodeObjectId={spanCodeObjectId}
                 ticketLink={props.insight.ticketLink}
                 isHintEnabled={props.isJiraHintEnabled && i === 0}
+                insightType={props.insight.type}
               />
             ];
 
diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
index 253469ea1..c1a2c057f 100644
--- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
@@ -1,14 +1,12 @@
 import { ReactNode, useContext, useState } from "react";
 import { isNull } from "../../../../../typeGuards/isNull";
 import { getDurationString } from "../../../../../utils/getDurationString";
-import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { TraceIcon } from "../../../../common/icons/12px/TraceIcon";
 import { Button } from "../../../../common/v3/Button";
 import { Link } from "../../../../common/v3/Link";
 import { Tooltip } from "../../../../common/v3/Tooltip";
-import { trackingEvents } from "../../../tracking";
 import { BottleneckEndpointInfo, InsightType, Trace } from "../../../types";
 import { Info } from "../../Info";
 import { InsightCard } from "../../InsightCard";
@@ -56,10 +54,10 @@ export const SpanEndpointBottleneckInsight = (
       props.onAssetLinkClick(spanCodeObjectId, props?.insight.type);
   };
 
-  const handleCreateJiraTicketButtonClick = (event: string) => {
-    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
-      insightType: props.insight.type
-    });
+  const handleCreateJiraTicketButtonClick = (
+    spanCodeObjectId: string | undefined,
+    event: string
+  ) => {
     props.onJiraTicketCreate &&
       props.onJiraTicketCreate(props.insight, undefined, event);
   };
diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
index ffd937bbc..eae658f0f 100644
--- a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
@@ -1,13 +1,11 @@
 import { ReactNode, useContext, useState } from "react";
 import { getDurationString } from "../../../../../utils/getDurationString";
-import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { TraceIcon } from "../../../../common/icons/12px/TraceIcon";
 import { Button } from "../../../../common/v3/Button";
 import { Link } from "../../../../common/v3/Link";
 import { Tooltip } from "../../../../common/v3/Tooltip";
-import { trackingEvents } from "../../../tracking";
 import { InsightType, NPlusOneEndpointInfo, Trace } from "../../../types";
 import { Info } from "../../Info";
 import { InsightCard } from "../../InsightCard";
@@ -61,10 +59,10 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => {
     props.onTraceButtonClick(trace, insightType, spanCodeObjectId);
   };
 
-  const handleCreateJiraTicketButtonClick = (event: string) => {
-    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
-      insightType: props.insight.type
-    });
+  const handleCreateJiraTicketButtonClick = (
+    spanCodeObjectId: string | undefined,
+    event: string
+  ) => {
     props.onJiraTicketCreate &&
       props.onJiraTicketCreate(props.insight, undefined, event);
   };
diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
index 9ee5dc08d..d562c8020 100644
--- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
@@ -1,11 +1,9 @@
 import { useContext } from "react";
 import { usePagination } from "../../../../../hooks/usePagination";
 import { getDurationString } from "../../../../../utils/getDurationString";
-import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { Pagination } from "../../../../common/v3/Pagination";
-import { trackingEvents } from "../../../tracking";
 import { InsightType, Trace } from "../../../types";
 import { InsightCard } from "../../InsightCard";
 import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
@@ -41,11 +39,10 @@ export const SpanQueryOptimizationInsight = (
     props.onTraceButtonClick(trace, insightType, spanCodeObjectId);
   };
 
-  const handleCreateJiraTicketButtonClick = (event: string) => {
-    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
-      insightType: props.insight.type
-    });
-
+  const handleCreateJiraTicketButtonClick = (
+    spanCodeObjectId: string | undefined,
+    event: string
+  ) => {
     props.onJiraTicketCreate &&
       props.onJiraTicketCreate(
         props.insight,
diff --git a/src/components/Insights/index.tsx b/src/components/Insights/index.tsx
index 87c2bc054..446bbf409 100644
--- a/src/components/Insights/index.tsx
+++ b/src/components/Insights/index.tsx
@@ -120,7 +120,10 @@ const renderInsightTicket = (
     );
   }
 
-  if (isEndpointHighNumberOfQueriesInsight(data.insight)) {
+  if (
+    isEndpointHighNumberOfQueriesInsight(data.insight) &&
+    data.spanCodeObjectId
+  ) {
     const ticketData =
       data as InsightTicketInfo<EndpointHighNumberOfQueriesInsight>;
     return (
diff --git a/src/components/Insights/tracking.ts b/src/components/Insights/tracking.ts
index 6a8b0f35b..37b7d1b3a 100644
--- a/src/components/Insights/tracking.ts
+++ b/src/components/Insights/tracking.ts
@@ -6,13 +6,10 @@ export const trackingEvents = addPrefix(
   TRACKING_PREFIX,
   {
     JIRA_TICKET_INFO_BUTTON_CLICKED: "jira ticket info button clicked",
-    JIRA_TICKET_FIELD_COPY_BUTTON_CLICKED:
-      "jira ticket field copy button clicked",
-    JIRA_TICKET_ATTACHMENT_DOWNLOAD_BUTTON_CLICKED:
-      "jira ticket attachment download button clicked",
     JIRA_TICKET_HINT_CLOSED: "jira ticket hint closed",
-    DISMISS_BUTTON_CLICKED: "insight dismiss button clicked",
-    SHOW_BUTTON_CLICKED: "insight show button clicked",
+    INSIGHT_DISMISS_BUTTON_CLICKED: "insight dismiss button clicked",
+    INSIGHT_SHOW_BUTTON_CLICKED: "insight show button clicked",
+    INSIGHT_CREATE_TICKET_LINK_CLICKED: "insight create ticket link clicked",
     REFRESH_BUTTON_CLICKED: "refresh button clicked"
   },
   " "
diff --git a/src/components/common/App/themes/darkTheme.ts b/src/components/common/App/themes/darkTheme.ts
index 3ed52c6ee..ac92a3bdf 100644
--- a/src/components/common/App/themes/darkTheme.ts
+++ b/src/components/common/App/themes/darkTheme.ts
@@ -288,7 +288,8 @@ export const darkTheme: ThemeColors = {
       azureFill: v3colors.azure[200],
       azureStroke: v3colors.azure[300],
       brightOrangeFill: v3colors.brightOrange[200],
-      brightOrangeStroke: v3colors.brightOrange[300]
+      brightOrangeStroke: v3colors.brightOrange[300],
+      darkRed: v3colors.red[500]
     }
   }
 };
diff --git a/src/components/common/App/themes/lightTheme.ts b/src/components/common/App/themes/lightTheme.ts
index ba3b4ccfc..ceed7b28e 100644
--- a/src/components/common/App/themes/lightTheme.ts
+++ b/src/components/common/App/themes/lightTheme.ts
@@ -286,7 +286,8 @@ export const lightTheme: ThemeColors = {
       azureFill: v3colors.azure[200],
       azureStroke: v3colors.azure[100],
       brightOrangeFill: v3colors.brightOrange[200],
-      brightOrangeStroke: v3colors.brightOrange[100]
+      brightOrangeStroke: v3colors.brightOrange[100],
+      darkRed: v3colors.red[600]
     }
   }
 };
diff --git a/src/components/common/App/v3colors.ts b/src/components/common/App/v3colors.ts
index 8f88cf3c5..0a8bddaf5 100644
--- a/src/components/common/App/v3colors.ts
+++ b/src/components/common/App/v3colors.ts
@@ -46,7 +46,9 @@ export const v3colors = {
     100: "#ffdfdf",
     200: "#ff7e7e",
     300: "#da2d5f",
-    400: "#3d2327"
+    400: "#3d2327",
+    500: "#241e21",
+    600: "#ffeeee"
   },
   orange: {
     100: "#ffe0ce",
diff --git a/src/components/common/icons/16px/SparkleIcon.tsx b/src/components/common/icons/16px/SparkleIcon.tsx
new file mode 100644
index 000000000..d187948b4
--- /dev/null
+++ b/src/components/common/icons/16px/SparkleIcon.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { IconProps } from "../types";
+
+const SparkleIconComponent = (props: IconProps) => {
+  const { size, color } = useIconProps(props);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 16 16"
+    >
+      <g
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        clipPath="url(#sparkle-clip-1)"
+      >
+        <path d="M5.05 10.65 1.82 9.47a.5.5 0 0 1 0-.93l3.23-1.19a.5.5 0 0 0 .3-.3l1.18-3.22a.5.5 0 0 1 .93 0l1.19 3.23a.5.5 0 0 0 .3.3l3.22 1.18a.5.5 0 0 1 0 .93l-3.23 1.18a.5.5 0 0 0-.3.3l-1.18 3.23a.5.5 0 0 1-.93 0l-1.18-3.23a.5.5 0 0 0-.3-.3ZM11 1v3m3 .5v2m-4.5-4h3m.5 3h2" />
+      </g>
+      <defs>
+        <clipPath id="sparkle-clip-1">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const SparkleIcon = React.memo(SparkleIconComponent);
diff --git a/src/components/common/v3/JiraButton/index.tsx b/src/components/common/v3/JiraButton/index.tsx
index 33ddf2eef..2155aa058 100644
--- a/src/components/common/v3/JiraButton/index.tsx
+++ b/src/components/common/v3/JiraButton/index.tsx
@@ -1,6 +1,8 @@
 import { ForwardedRef, forwardRef, useState } from "react";
 import { useTheme } from "styled-components";
 import { openURLInDefaultBrowser } from "../../../../utils/openURLInDefaultBrowser";
+import { sendTrackingEvent } from "../../../../utils/sendTrackingEvent";
+import { trackingEvents } from "../../../Insights/tracking";
 import { MenuList } from "../../../Navigation/common/MenuList";
 import { Popup } from "../../../Navigation/common/Popup";
 import { PencilIcon } from "../../../common/icons/12px/PencilIcon";
@@ -16,28 +18,47 @@ export const JiraButtonComponent = (
   {
     ticketLink,
     isHintEnabled,
-    onTicketInfoButtonClick,
+    onTicketInfoOpen,
     spanCodeObjectId,
     buttonType,
-    label
+    label,
+    insightType
   }: JiraButtonProps,
   ref: ForwardedRef<HTMLDivElement>
 ) => {
-  const [isJiraPopoverOpen, setIsJiraPopoverOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const theme = useTheme();
 
-  const handleJiraButtonClick = () => {
-    setIsJiraPopoverOpen(!isJiraPopoverOpen);
+  const handleMenuOpenChange = (isOpen: boolean) => {
+    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
+      insightType
+    });
+    setIsMenuOpen(isOpen);
   };
 
-  const handleViewButtonClick = () => {
-    handleJiraButtonClick();
+  const handleViewMenuItemClick = () => {
+    setIsMenuOpen(false);
     ticketLink && openURLInDefaultBrowser(ticketLink);
   };
 
+  const handleEditMenuItemClick = () => {
+    setIsMenuOpen(false);
+    openTicketInfo("edit menu item click");
+  };
+
   const openTicketInfo = (event: string) => {
-    handleJiraButtonClick();
-    onTicketInfoButtonClick(spanCodeObjectId, event);
+    onTicketInfoOpen(spanCodeObjectId, event);
+  };
+
+  const handleJiraButtonClick = () => {
+    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
+      insightType
+    });
+    openTicketInfo("jira button click");
+  };
+
+  const handleTryButtonClick = () => {
+    openTicketInfo("try now button click");
   };
 
   const renderButton = () => (
@@ -52,20 +73,20 @@ export const JiraButtonComponent = (
                     icon: <OpenLinkIcon />,
                     label: "View",
                     id: "view",
-                    onClick: handleViewButtonClick
+                    onClick: handleViewMenuItemClick
                   },
                   {
                     icon: <PencilIcon />,
                     label: "Edit",
                     id: "edit",
-                    onClick: () => openTicketInfo("edit menu item click")
+                    onClick: handleEditMenuItemClick
                   }
                 ]}
               />
             </Popup>
           }
-          isOpen={isJiraPopoverOpen}
-          onOpenChange={handleJiraButtonClick}
+          isOpen={isMenuOpen}
+          onOpenChange={handleMenuOpenChange}
           placement={"bottom-start"}
         >
           <Button
@@ -85,7 +106,7 @@ export const JiraButtonComponent = (
           buttonType={buttonType}
           label={label}
           icon={JiraLogoIcon}
-          onClick={() => openTicketInfo("jira button click")}
+          onClick={handleJiraButtonClick}
         />
       )}
     </div>
@@ -107,10 +128,7 @@ export const JiraButtonComponent = (
             <span>
               You can now easily create a ticket using information from Digma
             </span>
-            <s.TryNowButton
-              onClick={() => openTicketInfo("try now button click")}
-              label={"Try now"}
-            />
+            <s.TryNowButton onClick={handleTryButtonClick} label={"Try now"} />
           </s.HintContainer>
         }
         isOpen={Boolean(isHintEnabled)}
diff --git a/src/components/common/v3/JiraButton/types.ts b/src/components/common/v3/JiraButton/types.ts
index 6571d7159..b1a9d4391 100644
--- a/src/components/common/v3/JiraButton/types.ts
+++ b/src/components/common/v3/JiraButton/types.ts
@@ -1,11 +1,10 @@
+import { InsightType } from "../../../../types";
 import { BaseButtonProps } from "../Button/types";
 
 export interface JiraButtonProps extends BaseButtonProps {
-  onTicketInfoButtonClick(
-    spanCodeObjectId: string | undefined,
-    event: string
-  ): void;
+  onTicketInfoOpen(spanCodeObjectId: string | undefined, event: string): void;
   ticketLink?: string | null;
   isHintEnabled?: boolean;
   spanCodeObjectId?: string;
+  insightType: InsightType;
 }
diff --git a/src/styled.d.ts b/src/styled.d.ts
index 786de5a05..065a6c7d7 100644
--- a/src/styled.d.ts
+++ b/src/styled.d.ts
@@ -121,6 +121,7 @@ export interface ThemeColors {
       azureStroke: string;
       brightOrangeFill: string;
       brightOrangeStroke: string;
+      darkRed: string;
     };
     barChart: {
       pink: string;

From 767a0994c0c90a7052b856d58de15eb4d8d32c11 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 7 Mar 2024 11:42:13 +0100
Subject: [PATCH 2/4] Update styles

---
 .../Insights/common/InsightCard/InsightHeader/index.tsx     | 4 ++--
 .../Insights/common/InsightCard/InsightHeader/styles.ts     | 6 +++---
 .../Insights/common/insights/ScalingIssueInsight/index.tsx  | 2 +-
 .../common/insights/SpanQueryOptimizationInsight/index.tsx  | 4 ++--
 .../Insights/common/insights/TrafficInsight/index.tsx       | 2 +-
 src/components/common/App/typographies.ts                   | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Insights/common/InsightCard/InsightHeader/index.tsx b/src/components/Insights/common/InsightCard/InsightHeader/index.tsx
index 928089a10..39dbf884b 100644
--- a/src/components/Insights/common/InsightCard/InsightHeader/index.tsx
+++ b/src/components/Insights/common/InsightCard/InsightHeader/index.tsx
@@ -65,7 +65,7 @@ export const InsightHeader = (props: InsightHeaderProps) => {
             />
           </Tooltip>
         )}
-        <s.Label>
+        <s.Title>
           {insightTypeInfo?.label}
           {insightTypeInfo?.description && (
             <Tooltip title={<insightTypeInfo.description />}>
@@ -74,7 +74,7 @@ export const InsightHeader = (props: InsightHeaderProps) => {
               </s.InfoContainer>
             </Tooltip>
           )}
-        </s.Label>
+        </s.Title>
         <s.BadgeContainer>
           {props.isAsync && <AsyncTag />}
           {props.isNew && <NewTag />}
diff --git a/src/components/Insights/common/InsightCard/InsightHeader/styles.ts b/src/components/Insights/common/InsightCard/InsightHeader/styles.ts
index 30a1bfc59..d29632416 100644
--- a/src/components/Insights/common/InsightCard/InsightHeader/styles.ts
+++ b/src/components/Insights/common/InsightCard/InsightHeader/styles.ts
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { bodyMediumTypography } from "../../../../common/App/typographies";
+import { bodySemiboldTypography } from "../../../../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
@@ -26,8 +26,8 @@ export const InfoContainer = styled.div`
   display: flex;
 `;
 
-export const Label = styled.div`
-  ${bodyMediumTypography}
+export const Title = styled.div`
+  ${bodySemiboldTypography}
 
   display: flex;
   gap: 4px;
diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
index d1ba09a91..87a489bfc 100644
--- a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
+++ b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
@@ -119,7 +119,7 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
           {renderRootCause(props.insight.rootCauseSpans)}
           {affectedEndpoints.length > 0 && (
             <s.List>
-              <Description>Affected endpoints:</Description>
+              <Description>Affected endpoints</Description>
               {pageItems.map((endpoint) => {
                 const endpointRoute = trimEndpointScheme(endpoint.route);
                 return (
diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
index d562c8020..6297b03c5 100644
--- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
@@ -65,7 +65,7 @@ export const SpanQueryOptimizationInsight = (
             <Details>
               <Description>
                 Query is slow compared to other{" "}
-                {props.insight.dbStatement.toUpperCase()} requests.
+                {props.insight.dbStatement.toUpperCase()} requests
               </Description>
               <ListItem
                 name={spanName || ""}
@@ -84,7 +84,7 @@ export const SpanQueryOptimizationInsight = (
           </ColumnsContainer>
           {endpoints.length > 0 && (
             <>
-              <Description>Affected endpoints:</Description>
+              <Description>Affected endpoints</Description>
               <s.EndpointList>
                 {pageItems.map((x) => {
                   const spanCodeObjectId = x.endpointInfo.spanCodeObjectId;
diff --git a/src/components/Insights/common/insights/TrafficInsight/index.tsx b/src/components/Insights/common/insights/TrafficInsight/index.tsx
index d0341201b..45118d063 100644
--- a/src/components/Insights/common/insights/TrafficInsight/index.tsx
+++ b/src/components/Insights/common/insights/TrafficInsight/index.tsx
@@ -54,7 +54,7 @@ export const TrafficInsight = (props: TrafficInsightProps) => {
             <s.DescriptionColumn label={"Description"}>
               {getDescription(props.insight.type)}
             </s.DescriptionColumn>
-            <KeyValue label={"Duration"}>
+            <KeyValue label={"Throughput"}>
               <Tag content={`${valueString}/min`} />
             </KeyValue>
           </ColumnsContainer>
diff --git a/src/components/common/App/typographies.ts b/src/components/common/App/typographies.ts
index 1c6374f38..e6f1850e8 100644
--- a/src/components/common/App/typographies.ts
+++ b/src/components/common/App/typographies.ts
@@ -95,7 +95,7 @@ export const bodyRegularTypography = css`
   line-height: ${typographies.body.lineHeight}px;
 `;
 
-export const bodyMediumTypography = css`
+export const bodySemiboldTypography = css`
   font-size: ${typographies.body.fontSize}px;
   font-weight: ${typographies.body.fontWeight.medium};
   line-height: ${typographies.body.lineHeight}px;

From b568e807296ee7d55721719f4605698d27420816 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 7 Mar 2024 13:32:41 +0100
Subject: [PATCH 3/4] Code styles changes

---
 src/components/common/v3/JiraButton/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/common/v3/JiraButton/index.tsx b/src/components/common/v3/JiraButton/index.tsx
index 2155aa058..b6d36ee7b 100644
--- a/src/components/common/v3/JiraButton/index.tsx
+++ b/src/components/common/v3/JiraButton/index.tsx
@@ -36,6 +36,10 @@ export const JiraButtonComponent = (
     setIsMenuOpen(isOpen);
   };
 
+  const openTicketInfo = (event: string) => {
+    onTicketInfoOpen(spanCodeObjectId, event);
+  };
+
   const handleViewMenuItemClick = () => {
     setIsMenuOpen(false);
     ticketLink && openURLInDefaultBrowser(ticketLink);
@@ -46,10 +50,6 @@ export const JiraButtonComponent = (
     openTicketInfo("edit menu item click");
   };
 
-  const openTicketInfo = (event: string) => {
-    onTicketInfoOpen(spanCodeObjectId, event);
-  };
-
   const handleJiraButtonClick = () => {
     sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
       insightType

From b0cd15966cb66e87d4cfe992f1673019aa204462 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 7 Mar 2024 14:19:26 +0100
Subject: [PATCH 4/4] Update tracking event names

---
 src/components/Insights/common/InsightCard/index.tsx | 6 +++---
 src/components/Insights/tracking.ts                  | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index f447d7f04..2ac55881b 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -105,7 +105,7 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleDismissClick = () => {
-    sendTrackingEvent(trackingEvents.INSIGHT_DISMISS_BUTTON_CLICKED, {
+    sendTrackingEvent(trackingEvents.INSIGHT_CARD_DISMISS_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
 
@@ -119,7 +119,7 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleShowClick = () => {
-    sendTrackingEvent(trackingEvents.INSIGHT_SHOW_BUTTON_CLICKED, {
+    sendTrackingEvent(trackingEvents.INSIGHT_CARD_SHOW_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
 
@@ -142,7 +142,7 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleCreateTicketLinkClick = () => {
-    sendTrackingEvent(trackingEvents.INSIGHT_CREATE_TICKET_LINK_CLICKED, {
+    sendTrackingEvent(trackingEvents.INSIGHT_CARD_CREATE_TICKET_LINK_CLICKED, {
       insightType: props.insight.type
     });
     openTicketInfo(
diff --git a/src/components/Insights/tracking.ts b/src/components/Insights/tracking.ts
index 37b7d1b3a..a5565ecad 100644
--- a/src/components/Insights/tracking.ts
+++ b/src/components/Insights/tracking.ts
@@ -7,9 +7,10 @@ export const trackingEvents = addPrefix(
   {
     JIRA_TICKET_INFO_BUTTON_CLICKED: "jira ticket info button clicked",
     JIRA_TICKET_HINT_CLOSED: "jira ticket hint closed",
-    INSIGHT_DISMISS_BUTTON_CLICKED: "insight dismiss button clicked",
-    INSIGHT_SHOW_BUTTON_CLICKED: "insight show button clicked",
-    INSIGHT_CREATE_TICKET_LINK_CLICKED: "insight create ticket link clicked",
+    INSIGHT_CARD_DISMISS_BUTTON_CLICKED: "insight card dismiss button clicked",
+    INSIGHT_CARD_SHOW_BUTTON_CLICKED: "insight card show button clicked",
+    INSIGHT_CARD_CREATE_TICKET_LINK_CLICKED:
+      "insight card create ticket link clicked",
     REFRESH_BUTTON_CLICKED: "refresh button clicked"
   },
   " "