Mark insights as read

src/components/Assets/AssetsViewScopeConfiguration/AssetsViewScopeConfiguration.stories.tsx

@@ -31,7 +31,8 @@ export const Default: Story = {
       },
       hasErrors: false,
       issuesInsightsCount: 0,
-      analyticsInsightsCount: 0
+      analyticsInsightsCount: 0,
+      unreadInsightsCount: 0
     },
     assetsCount: 1,
     onAssetViewChange: () => {

src/components/Assets/AssetsViewScopeConfiguration/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { isNumber } from "../../../typeGuards/isNumber";
+import { formatUnit } from "../../../utils/formatUnit";
 import { ArrowIcon } from "../../common/icons/12px/ArrowIcon";
 import { TreeNodesIcon } from "../../common/icons/12px/TreeNodesIcon";
 import { Toggle } from "../../common/v3/Toggle";
@@ -64,7 +65,7 @@ export const AssetsViewScopeConfiguration = ({
         <s.AssetsCount>
           {isNumber(assetsCount) ? ` ${assetsCount} ` : " "}
         </s.AssetsCount>
-        {assetTypeDescription} asset{assetsCount === 1 ? "" : "s"}
+        {assetTypeDescription} {formatUnit(assetsCount || 0, "asset")}
       </s.Label>
     </s.Container>
   );

src/components/Insights/DurationBreakdownInsight/index.tsx

@@ -40,6 +40,9 @@ const getDurationTitle = (breakdownEntry: SpanDurationBreakdownEntry) => {
   return <s.DurationTitle>{title}</s.DurationTitle>;
 };
 
+/**
+ * @deprecated
+ */
 export const DurationBreakdownInsight = (
   props: DurationBreakdownInsightProps
 ) => {

src/components/Insights/DurationChange/index.tsx

@@ -99,6 +99,9 @@ const renderArrowIcon = (
   );
 };
 
+/**
+ * @deprecated
+ */
 export const DurationChange = (props: DurationChangeProps) => {
   const theme = useTheme();
 

src/components/Insights/DurationInsight/index.tsx

@@ -132,6 +132,9 @@ const calculateBars = (
   return newBars;
 };
 
+/**
+ * @deprecated
+ */
 export const DurationInsight = (props: DurationInsightProps) => {
   // const config = useContext(ConfigContext);
   const theme = useTheme();

src/components/Insights/DurationSlowdownSourceInsight/index.tsx

@@ -6,6 +6,9 @@ import { DurationSlowdownSource } from "../types";
 import * as s from "./styles";
 import { DurationSlowdownSourceInsightProps } from "./types";
 
+/**
+ * @deprecated
+ */
 export const DurationSlowdownSourceInsight = (
   props: DurationSlowdownSourceInsightProps
 ) => {

src/components/Insights/EndpointNPlusOneInsight/index.tsx

@@ -21,6 +21,9 @@ import { EndpointNPlusOneInsightProps } from "./types";
 const FRACTION_MIN_LIMIT = 0.01;
 const PAGE_SIZE = 3;
 
+/**
+ * @deprecated
+ */
 export const EndpointNPlusOneInsight = (
   props: EndpointNPlusOneInsightProps
 ) => {

src/components/Insights/EndpointQueryOptimizationInsight/index.tsx

@@ -19,6 +19,9 @@ import { EndpointQueryOptimizationInsightProps } from "./types";
 
 const PAGE_SIZE = 3;
 
+/**
+ * @deprecated
+ */
 export const EndpointQueryOptimizationInsight = (
   props: EndpointQueryOptimizationInsightProps
 ) => {

src/components/Insights/ErrorsInsight/index.tsx

@@ -4,6 +4,9 @@ import { Description, Link } from "../styles";
 import * as s from "./styles";
 import { ErrorsInsightProps } from "./types";
 
+/**
+ * @deprecated
+ */
 export const ErrorsInsight = (props: ErrorsInsightProps) => {
   const handleErrorLinkClick = (errorId: string) => {
     props.onErrorSelect(errorId, props.insight.type);

src/components/Insights/ExcessiveAPICallsInsight/index.tsx

@@ -14,6 +14,9 @@ import { ExcessiveAPICallsInsightProps } from "./types";
 
 const PAGE_SIZE = 3;
 
+/**
+ * @deprecated
+ */
 export const ExcessiveAPICallsInsight = (
   props: ExcessiveAPICallsInsightProps
 ) => {

src/components/Insights/HighNumberOfQueriesInsight/index.tsx

@@ -14,6 +14,9 @@ import { Trace } from "../types";
 import * as s from "./styles";
 import { HighNumberOfQueriesInsightProps } from "./types";
 
+/**
+ * @deprecated
+ */
 export const HighNumberOfQueriesInsight = (
   props: HighNumberOfQueriesInsightProps
 ) => {

src/components/Insights/InsightCard/index.tsx

@@ -31,6 +31,9 @@ const RECALCULATE = "recalculate";
 const DEFAULT_PERCENTILE = 0.5;
 const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds
 
+/**
+ * @deprecated
+ */
 export const InsightCard = (props: InsightCardProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [isKebabMenuOpen, setIsKebabMenuOpen] = useState(false);

src/components/Insights/InsightList/index.tsx

@@ -23,6 +23,7 @@ import { ErrorsInsight } from "../ErrorsInsight";
 import { ExcessiveAPICallsInsight } from "../ExcessiveAPICallsInsight";
 import { HighNumberOfQueriesInsight } from "../HighNumberOfQueriesInsight";
 import { InsightCard } from "../InsightCard";
+import { ViewMode } from "../InsightsCatalog/types";
 import { NPlusOneInsight } from "../NPlusOneInsight";
 import { NoObservabilityCard } from "../NoObservabilityCard";
 import { NoScalingIssueInsight } from "../NoScalingIssueInsight";
@@ -233,8 +234,11 @@ const renderInsightCard = (
     spanCodeObjectId: string | undefined,
     event?: string
   ) => void,
-  isJiraHintEnabled: boolean
+  isJiraHintEnabled: boolean,
+  viewMode: ViewMode
 ): JSX.Element | undefined => {
+  const isMarkAsReadButtonEnabled = viewMode === ViewMode.OnlyUnread;
+
   const handleErrorSelect = (errorId: string, insightType: InsightType) => {
     sendTrackingEvent(globalTrackingEvents.USER_ACTION, {
       action: `Follow ${insightType} link`
@@ -362,6 +366,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -374,6 +379,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -387,6 +393,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -401,6 +408,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -415,6 +423,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -426,6 +435,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -441,6 +451,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -454,6 +465,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -469,6 +481,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -484,6 +497,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -500,6 +514,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -527,6 +542,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -539,6 +555,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -552,6 +569,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -565,6 +583,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -579,6 +598,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -593,6 +613,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -608,6 +629,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -620,6 +642,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={handleRefresh}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -636,6 +659,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -651,6 +675,7 @@ const renderInsightCard = (
         onRefresh={handleRefresh}
         onJiraTicketCreate={onJiraTicketCreate}
         onGoToSpan={handleGoToSpan}
+        isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       />
     );
   }
@@ -659,6 +684,9 @@ const renderInsightCard = (
 const IS_INSIGHT_JIRA_TICKET_HINT_SHOWN_PERSISTENCE_KEY =
   "isInsightJiraTicketHintShown";
 
+/**
+ * @deprecated
+ */
 export const InsightList = (props: InsightListProps) => {
   const [insightGroups, setInsightGroups] = useState<InsightGroup[]>([]);
   const [isAutofixing, setIsAutofixing] = useState(false);
@@ -748,7 +776,8 @@ export const InsightList = (props: InsightListProps) => {
               return renderInsightCard(
                 insight,
                 handleShowJiraTicket,
-                isJiraHintEnabled
+                isJiraHintEnabled,
+                props.viewMode
               );
             })
           ) : (

src/components/Insights/InsightList/types.ts

@@ -1,3 +1,4 @@
+import { ViewMode } from "../InsightsCatalog/types";
 import { GenericCodeObjectInsight, MethodSpan } from "../types";
 
 export interface InsightListProps {
@@ -13,6 +14,7 @@ export interface InsightListProps {
     insight: GenericCodeObjectInsight,
     spanCodeObjectId?: string
   ) => void;
+  viewMode: ViewMode;
 }
 
 export interface isInsightJiraTicketHintShownPayload {

src/components/Insights/InsightsCatalog/InsightsCatalog.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { InsightsCatalog } from ".";
+import { SORTING_ORDER } from "../../common/SortingSelector/types";
+import { mockedSpanBottleneckInsight } from "../common/insights/EndpointBottleneckInsight/mockData";
+import { SORTING_CRITERION } from "./types";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof InsightsCatalog> = {
+  title: "Insights/InsightsCatalog",
+  component: InsightsCatalog,
+  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: {
+    insights: [{ ...mockedSpanBottleneckInsight, isRead: false }],
+    totalCount: 1,
+    dismissedCount: 1,
+    defaultQuery: {
+      page: 0,
+      sorting: {
+        criterion: SORTING_CRITERION.LATEST,
+        order: SORTING_ORDER.DESC
+      },
+      searchQuery: null,
+      showDismissed: false,
+      insightViewType: "Issues",
+      showUnreadOnly: false
+    },
+    isDismissalEnabled: true,
+    unreadCount: 1,
+    isMarkingAsReadEnabled: true
+  }
+};