Add Jira feature popup

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npm run precommit

package.json

@@ -33,10 +33,11 @@
     "build:troubleshooting:prod": "webpack --config webpack.prod.ts --env app=troubleshooting",
     "build:prod": "webpack --config webpack.prod.ts",
     "build:prod:web": "webpack --config webpack.prod.ts --env platform=Web",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "prepare": "husky"
   },
   "lint-staged": {
-    "*.{js,ts}": [
+    "*.{js,ts,tsx}": [
       "eslint --cache"
     ],
     "src/**/*.ts": [
@@ -83,7 +84,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^8.0.0",
+    "husky": "^9.0.10",
     "lint-staged": "^13.2.2",
     "postcss-styled-syntax": "^0.5.0",
     "prettier": "^2.8.3",

src/components/Assets/AssetsFilter/index.tsx

@@ -28,6 +28,8 @@ import {
   AssetsFiltersData
 } from "./types";
 
+const PERSISTENCE_KEY = "assetsFilters";
+
 const REFRESH_INTERVAL = isNumber(window.assetsRefreshInterval)
   ? window.assetsRefreshInterval
   : 10 * 1000; // in milliseconds
@@ -68,7 +70,7 @@ export const AssetsFilter = (props: AssetsFilterProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const previousIsOpen = usePrevious(isOpen);
   const [persistedFilters, setPersistedFilters] =
-    usePersistence<AssetFilterQuery>("assetsFilters", "project");
+    usePersistence<AssetFilterQuery>(PERSISTENCE_KEY, "project");
   const previousPersistedFilters = usePrevious(persistedFilters);
   const [selectedServices, setSelectedServices] = useState<string[]>([]);
   const [selectedEndpoints, setSelectedEndpoints] = useState<string[]>([]);

src/components/Insights/BottleneckInsight/index.tsx

@@ -73,6 +73,7 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => {
                 spanCodeObjectId={props.insight.spanInfo?.spanCodeObjectId}
                 ticketLink={props.insight.ticketLink}
                 buttonType={"large"}
+                isHintEnabled={props.isJiraHintEnabled}
               />
             </s.Box>
           </s.Container>

src/components/Insights/EndpointNPlusOneInsight/index.tsx

@@ -105,6 +105,7 @@ export const EndpointNPlusOneInsight = (
                       spanCodeObjectId={spanInfo.spanCodeObjectId}
                       ticketLink={span.ticketLink}
                       buttonType={"small"}
+                      isHintEnabled={props.isJiraHintEnabled}
                     />
                     {config.isJaegerEnabled && (
                       <Tooltip title={"Trace"}>

src/components/Insights/HighNumberOfQueriesInsight/index.tsx

@@ -77,6 +77,7 @@ export const HighNumberOfQueriesInsight = (
                   spanCodeObjectId={insight.spanInfo?.spanCodeObjectId}
                   ticketLink={insight.ticketLink}
                   buttonType={"small"}
+                  isHintEnabled={props.isJiraHintEnabled}
                 />
                 {traceId && (
                   <Tooltip title={"Trace"}>

src/components/Insights/InsightJiraTicket/index.tsx

@@ -15,9 +15,8 @@ export const InsightJiraTicket = (props: InsightJiraTicketProps) => {
   );
   const config = useContext(ConfigContext);
 
-  const isLinkUnlinkInputVisible = getFeatureFlagValue(
-    config,
-    FeatureFlag.IS_INSIGHT_TICKET_LINKAGE_ENABLED
+  const isLinkUnlinkInputVisible = Boolean(
+    getFeatureFlagValue(config, FeatureFlag.IS_INSIGHT_TICKET_LINKAGE_ENABLED)
   );
 
   const linkTicket = (link: string) => {
@@ -95,7 +94,7 @@ export const InsightJiraTicket = (props: InsightJiraTicketProps) => {
       ticketLink={{ link: ticketLink, errorMessage }}
       unlinkTicket={unlinkTicket}
       linkTicket={linkTicket}
-      showLinkButton={!!isLinkUnlinkInputVisible}
+      showLinkButton={isLinkUnlinkInputVisible}
     />
   );
 };

src/components/Insights/InsightList/index.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import { DefaultTheme, useTheme } from "styled-components";
+import { usePersistence } from "../../../hooks/usePersistence";
 import { trackingEvents as globalTrackingEvents } from "../../../trackingEvents";
+import { isUndefined } from "../../../typeGuards/isUndefined";
 import { InsightType } from "../../../types";
 import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
@@ -68,7 +70,7 @@ import {
   Trace
 } from "../types";
 import * as s from "./styles";
-import { InsightListProps } from "./types";
+import { InsightListProps, isInsightJiraTicketHintShownPayload } from "./types";
 
 export const getInsightTypeOrderPriority = (type: string): number => {
   const insightOrderPriorityMap: Record<string, number> = {
@@ -103,6 +105,39 @@ export const getInsightTypeOrderPriority = (type: string): number => {
   return insightOrderPriorityMap[type] || -Infinity;
 };
 
+const getInsightToShowJiraHint = (
+  insightGroups: InsightGroup[]
+): { groupIndex: number; insightIndex: number } | null => {
+  const insightsWithJiraButton = [
+    InsightType.EndpointSpanNPlusOne,
+    InsightType.SpanNPlusOne,
+    InsightType.SpanEndpointBottleneck,
+    InsightType.SlowestSpans,
+    InsightType.SpanQueryOptimization,
+    InsightType.EndpointHighNumberOfQueries
+  ];
+
+  let insightIndex = -1;
+  const insightsWithJiraButtonIndex = insightGroups.findIndex((x) =>
+    x.insights.some((insight, i) => {
+      if (insightsWithJiraButton.includes(insight.type)) {
+        insightIndex = i;
+        return true;
+      }
+      return false;
+    })
+  );
+
+  if ([insightsWithJiraButtonIndex, insightIndex].includes(-1)) {
+    return null;
+  }
+
+  return {
+    groupIndex: insightsWithJiraButtonIndex,
+    insightIndex: insightIndex
+  };
+};
+
 const groupInsights = (
   insights: GenericCodeObjectInsight[],
   spans: MethodSpan[]
@@ -222,7 +257,8 @@ const renderInsightCard = (
   onJiraTicketCreate: (
     insight: GenericCodeObjectInsight,
     spanCodeObjectId?: string
-  ) => void
+  ) => void,
+  isJiraHintEnabled: boolean
 ): JSX.Element | undefined => {
   const handleErrorSelect = (errorId: string, insightType: InsightType) => {
     sendTrackingEvent(globalTrackingEvents.USER_ACTION, {
@@ -378,6 +414,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onJiraTicketCreate={onJiraTicketCreate}
+        isJiraHintEnabled={isJiraHintEnabled}
       />
     );
   }
@@ -390,6 +427,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onJiraTicketCreate={onJiraTicketCreate}
+        isJiraHintEnabled={isJiraHintEnabled}
       />
     );
   }
@@ -439,6 +477,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onJiraTicketCreate={onJiraTicketCreate}
+        isJiraHintEnabled={isJiraHintEnabled}
       />
     );
   }
@@ -452,6 +491,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onJiraTicketCreate={onJiraTicketCreate}
+        isJiraHintEnabled={isJiraHintEnabled}
       />
     );
   }
@@ -565,6 +605,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onJiraTicketCreate={onJiraTicketCreate}
+        isJiraHintEnabled={isJiraHintEnabled}
       />
     );
   }
@@ -590,16 +631,27 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onJiraTicketCreate={onJiraTicketCreate}
+        isJiraHintEnabled={isJiraHintEnabled}
       />
     );
   }
 };
 
+const IS_INSIGHT_JIRA_TICKET_HINT_SHOWN_PERSISTENCE_KEY =
+  "isInsightJiraTicketHintShown";
+
 export const InsightList = (props: InsightListProps) => {
   const [insightGroups, setInsightGroups] = useState<InsightGroup[]>([]);
   const [isAutofixing, setIsAutofixing] = useState(false);
   const theme = useTheme();
   const insightGroupIconColor = getInsightGroupIconColor(theme);
+  const [isInsightJiraTicketHintShown, setIsInsightJiraTicketHintShown] =
+    usePersistence<isInsightJiraTicketHintShownPayload>(
+      IS_INSIGHT_JIRA_TICKET_HINT_SHOWN_PERSISTENCE_KEY,
+      "application"
+    );
+
+  const insightWithJiraHint = getInsightToShowJiraHint(insightGroups);
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -640,9 +692,17 @@ export const InsightList = (props: InsightListProps) => {
     setIsAutofixing(true);
   };
 
+  const handleShowJiraTicket = (
+    insight: GenericCodeObjectInsight,
+    spanCodeObjectId?: string
+  ) => {
+    props.onJiraTicketCreate(insight, spanCodeObjectId);
+    setIsInsightJiraTicketHintShown({ value: true });
+  };
+
   return (
     <s.Container>
-      {insightGroups.map((x) => (
+      {insightGroups.map((x, i) => (
         <s.InsightGroup key={x.name || "__ungrouped"}>
           {x.name && (
             <s.InsightGroupHeader>
@@ -655,9 +715,19 @@ export const InsightList = (props: InsightListProps) => {
             </s.InsightGroupHeader>
           )}
           {x.insights.length > 0 ? (
-            x.insights.map((insight) =>
-              renderInsightCard(insight, props.onJiraTicketCreate)
-            )
+            x.insights.map((insight, j) => {
+              const isJiraHintEnabled =
+                !isUndefined(isInsightJiraTicketHintShown) &&
+                !isInsightJiraTicketHintShown?.value &&
+                i === insightWithJiraHint?.groupIndex &&
+                j === insightWithJiraHint?.insightIndex;
+
+              return renderInsightCard(
+                insight,
+                handleShowJiraTicket,
+                isJiraHintEnabled
+              );
+            })
           ) : (
             <Card
               header={<>No data yet</>}

src/components/Insights/InsightList/types.ts

@@ -14,3 +14,7 @@ export interface InsightListProps {
     spanCodeObjectId?: string
   ) => void;
 }
+
+export interface isInsightJiraTicketHintShownPayload {
+  value: boolean;
+}

src/components/Insights/NPlusOneInsight/index.tsx

@@ -138,6 +138,7 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => {
           spanCodeObjectId={props.insight.spanInfo?.spanCodeObjectId}
           ticketLink={props.insight.ticketLink}
           buttonType={"large"}
+          isHintEnabled={props.isJiraHintEnabled}
         />
       ]}
     />

src/components/Insights/QueryOptimizationInsight/index.tsx

@@ -108,6 +108,7 @@ export const QueryOptimizationInsight = (
           spanCodeObjectId={props.insight.spanInfo?.spanCodeObjectId}
           ticketLink={props.insight.ticketLink}
           buttonType={"large"}
+          isHintEnabled={props.isJiraHintEnabled}
         />
       ]}
     />

src/components/Insights/SpanBottleneckInsight/index.tsx

@@ -66,6 +66,7 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => {
                         spanCodeObjectId={spanCodeObjectId}
                         ticketLink={span.ticketLink}
                         buttonType={"small"}
+                        isHintEnabled={props.isJiraHintEnabled}
                       />
                     </s.ButtonsContainer>
                   </s.Span>