Add "Could affect production" notification bar

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";
@@ -68,7 +65,7 @@ export const InsightHeader = (props: InsightHeaderProps) => {
             />
           </Tooltip>
         )}
-        <s.Label>
+        <s.Title>
           {insightTypeInfo?.label}
           {insightTypeInfo?.description && (
             <Tooltip title={<insightTypeInfo.description />}>
@@ -77,15 +74,8 @@ export const InsightHeader = (props: InsightHeaderProps) => {
               </s.InfoContainer>
             </Tooltip>
           )}
-        </s.Label>
+        </s.Title>
         <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} />}

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;
@@ -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};
-`;

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
+  }
+};

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>
+  );
+};

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};
+`;

src/components/Insights/common/InsightCard/ProductionAffectionBar/types.ts

@@ -0,0 +1,8 @@
+export interface ProductionAffectionBarProps {
+  isTicketCreated: boolean;
+  onCreateTicket: () => void;
+}
+
+export interface ContainerProps {
+  $isActive: boolean;
+}

src/components/Insights/common/InsightCard/index.tsx

@@ -21,9 +21,11 @@ import { usePrevious } from "../../../../hooks/usePrevious";
 import { sendTrackingEvent } from "../../../../utils/sendTrackingEvent";
 import { Spinner } from "../../../Navigation/CodeButtonMenu/Spinner";
 import { trackingEvents } from "../../tracking";
+import { ProductionAffectionBar } from "./ProductionAffectionBar";
 import { useDismissalHandler } from "./useDismissalHandler";
 
 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);
@@ -32,6 +34,8 @@ export const InsightCard = (props: InsightCardProps) => {
   const { isLoading, dismiss, show } = useDismissalHandler(props.insight.id);
   const previousLoading = usePrevious(isLoading);
 
+  const isCritical = props.insight.criticality > HIGH_CRITICALITY_THRESHOLD;
+
   useEffect(() => {
     if (previousLoading && !isLoading) {
       props.onRefresh(props.insight.type);
@@ -42,7 +46,7 @@ export const InsightCard = (props: InsightCardProps) => {
     props.onRefresh(props.insight.type);
   };
 
-  const handleRecalculateClick = () => {
+  const handleRecheckButtonClick = () => {
     props.insight.prefixedCodeObjectId &&
       props.onRecalculate &&
       props.onRecalculate(props.insight.id);
@@ -112,20 +116,39 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleDismissClick = () => {
-    sendTrackingEvent(trackingEvents.DISMISS_BUTTON_CLICKED, {
+    sendTrackingEvent(trackingEvents.INSIGHT_CARD_DISMISS_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
     dismiss();
     setDismissConfirmationOpened(false);
   };
 
   const handleShowClick = () => {
-    sendTrackingEvent(trackingEvents.SHOW_BUTTON_CLICKED, {
+    sendTrackingEvent(trackingEvents.INSIGHT_CARD_SHOW_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
     show();
   };
 
+  const openTicketInfo = (
+    spanCodeObjectId: string | undefined,
+    event: string
+  ) => {
+    if (props.onJiraButtonClick) {
+      props.onJiraButtonClick(spanCodeObjectId, event);
+    }
+  };
+
+  const handleCreateTicketLinkClick = () => {
+    sendTrackingEvent(trackingEvents.INSIGHT_CARD_CREATE_TICKET_LINK_CLICKED, {
+      insightType: props.insight.type
+    });
+    openTicketInfo(
+      props.jiraTicketInfo?.spanCodeObjectId,
+      "create ticket link clicked"
+    );
+  };
+
   const renderActions = () => {
     const buttonsToRender: {
       tooltip: string;
@@ -152,7 +175,7 @@ export const InsightCard = (props: InsightCardProps) => {
           <Button
             icon={RecalculateIcon}
             label={"Recheck"}
-            onClick={handleRecalculateClick}
+            onClick={handleRecheckButtonClick}
             {...btnProps}
           />
         )
@@ -167,7 +190,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}
           />
         )
@@ -253,6 +277,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,

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;
 }
 

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);
   };

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);
   };

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);
   };

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);
   };