From 4e91d45de0899e5584de4554bf3c1d30d961f935 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Tue, 5 Mar 2024 17:08:01 +0200
Subject: [PATCH 01/10] add dismissal

---
 .../Insights/InsightsCatalog/index.tsx        | 34 +++++++++++++++++++
 .../Insights/InsightsCatalog/styles.ts        | 11 ++++++
 .../Insights/InsightsPage/index.tsx           | 17 +++++++++-
 src/components/Insights/InsightsPage/types.ts |  1 +
 src/components/Insights/actions.ts            |  4 ++-
 .../Insights/common/InsightCard/index.tsx     | 12 ++++++-
 .../EndpointBottleneckInsight/index.tsx       |  1 +
 .../EndpointNPlusOneInsight/index.tsx         |  1 +
 .../index.tsx                                 |  1 +
 .../EndpointSlowdownSourceInsight/index.tsx   |  1 +
 .../ExcessiveAPICallsInsight/index.tsx        |  1 +
 .../HighNumberOfQueriesInsight/index.tsx      |  1 +
 .../insights/ScalingIssueInsight/index.tsx    |  1 +
 .../insights/SessionInViewInsight/index.tsx   |  1 +
 .../insights/SlowEndpointInsight/index.tsx    |  1 +
 .../SpanEndpointBottleneckInsight/index.tsx   |  1 +
 .../insights/SpanNPlusOneInsight/index.tsx    |  1 +
 .../SpanQueryOptimizationInsight/index.tsx    |  1 +
 .../common/insights/TrafficInsight/index.tsx  |  1 +
 src/components/Insights/types.ts              |  1 +
 20 files changed, 90 insertions(+), 3 deletions(-)

diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
index 2a678d7dc..7fdbcb606 100644
--- a/src/components/Insights/InsightsCatalog/index.tsx
+++ b/src/components/Insights/InsightsCatalog/index.tsx
@@ -8,11 +8,20 @@ import { Pagination } from "../../common/Pagination";
 import { SearchInput } from "../../common/SearchInput";
 import { SortingSelector } from "../../common/SortingSelector";
 import { SORTING_ORDER, Sorting } from "../../common/SortingSelector/types";
+import { ChevronIcon } from "../../common/icons/16px/ChevronIcon";
+import { Direction } from "../../common/icons/types";
+import { Button } from "../../common/v3/Button";
 import { InsightsPage } from "../InsightsPage";
+import { actions } from "../actions";
 import * as s from "./styles";
 import { InsightsCatalogProps, SORTING_CRITERION } from "./types";
 
 const PAGE_SIZE = 10;
+enum ViewMode {
+  All,
+  Hidden
+}
+
 export const InsightsCatalog = (props: InsightsCatalogProps) => {
   const { insights, onJiraTicketCreate, defaultQuery, totalCount } = props;
   const [page, setPage] = useState(0);
@@ -32,6 +41,14 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
   const config = useContext(ConfigContext);
   const previousConfig = usePrevious(config);
   const previousScope = usePrevious(config.scope?.span);
+  const [mode, setMode] = useState<ViewMode>(ViewMode.All);
+
+  const handleDismissal = (insightId: string) => {
+    window.sendMessageToDigma({
+      action: actions.DISMISS,
+      payload: insightId
+    });
+  };
 
   useEffect(() => {
     if (!previousScope || previousScope !== config.scope?.span) {
@@ -109,6 +126,22 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
           default={defaultQuery.sorting}
         />
       </s.Toolbar>
+      {mode === ViewMode.Hidden && (
+        <s.Toolbar>
+          <Button
+            buttonType="tertiary"
+            label="Back to All Insights"
+            icon={(props) => (
+              <ChevronIcon {...props} direction={Direction.RIGHT} />
+            )}
+            onClick={() => setMode(ViewMode.All)}
+          />
+          <s.DismissedDescription>
+            <s.DismissedCount>{insights.length}</s.DismissedCount>
+            dismissed insights
+          </s.DismissedDescription>
+        </s.Toolbar>
+      )}
       <InsightsPage
         page={page}
         insights={insights}
@@ -117,6 +150,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
         }
         onJiraTicketCreate={onJiraTicketCreate}
         onRefresh={props.onRefresh}
+        onDismiss={handleDismissal}
       />
       {totalCount > 0 && (
         <s.Footer>
diff --git a/src/components/Insights/InsightsCatalog/styles.ts b/src/components/Insights/InsightsCatalog/styles.ts
index 0271cd51f..c959029a5 100644
--- a/src/components/Insights/InsightsCatalog/styles.ts
+++ b/src/components/Insights/InsightsCatalog/styles.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { subscriptRegularTypography } from "../../common/App/typographies";
 
 export const Footer = styled.div`
   display: flex;
@@ -38,3 +39,13 @@ export const Toolbar = styled.div`
   padding: 8px;
   gap: 8px;
 `;
+
+export const DismissedDescription = styled.div`
+  ${subscriptRegularTypography}
+
+  color: ${({ theme }) => theme.colors.v3.text.disabled};
+`;
+
+export const DismissedCount = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx
index 9dbf34754..7578faaf1 100644
--- a/src/components/Insights/InsightsPage/index.tsx
+++ b/src/components/Insights/InsightsPage/index.tsx
@@ -89,7 +89,8 @@ const renderInsightCard = (
     event?: string
   ) => void,
   isJiraHintEnabled: boolean,
-  onRefresh: () => void
+  onRefresh: () => void,
+  onDismiss: (insightId: string) => void
 ): JSX.Element | undefined => {
   // const handleErrorSelect = (errorId: string, insightType: InsightType) => {
   //   sendTrackingEvent(globalTrackingEvents.USER_ACTION, {
@@ -236,6 +237,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -251,6 +253,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -266,6 +269,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -278,6 +282,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -294,6 +299,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -310,6 +316,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -326,6 +333,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -343,6 +351,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -356,6 +365,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -382,6 +392,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -396,6 +407,7 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -411,6 +423,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -439,6 +452,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
@@ -455,6 +469,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onDismiss={onDismiss}
       />
     );
   }
diff --git a/src/components/Insights/InsightsPage/types.ts b/src/components/Insights/InsightsPage/types.ts
index a12a2b305..00c89d41f 100644
--- a/src/components/Insights/InsightsPage/types.ts
+++ b/src/components/Insights/InsightsPage/types.ts
@@ -9,6 +9,7 @@ export interface InsightPageProps {
   ) => void;
   onRefresh: () => void;
   page: number;
+  onDismiss: (insightId: string) => void;
 }
 
 export interface isInsightJiraTicketHintShownPayload {
diff --git a/src/components/Insights/actions.ts b/src/components/Insights/actions.ts
index 6d619d731..5b9d35536 100644
--- a/src/components/Insights/actions.ts
+++ b/src/components/Insights/actions.ts
@@ -29,5 +29,7 @@ export const actions = addPrefix(ACTION_PREFIX, {
   UNLINK_TICKET: "UNLINK_TICKET",
   SET_TICKET_LINK: "SET_TICKET_LINK",
   SET_DATA_LIST: "SET_DATA_LIST",
-  GET_DATA_LIST: "GET_DATA_LIST"
+  GET_DATA_LIST: "GET_DATA_LIST",
+  DISMISS: "DISMISS",
+  UNDISMISS: "UNDISMISS"
 });
diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index bd8932fc8..31794e5b9 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -7,6 +7,7 @@ import { HistogramIcon } from "../../../common/icons/16px/HistogramIcon";
 import { LiveIcon } from "../../../common/icons/16px/LiveIcon";
 import { PinIcon } from "../../../common/icons/16px/PinIcon";
 import { RecalculateIcon } from "../../../common/icons/16px/RecalculateIcon";
+import { CrossIcon } from "../../../common/icons/CrossIcon";
 import { Button } from "../../../common/v3/Button";
 import { BaseButtonProps } from "../../../common/v3/Button/types";
 import { Card } from "../../../common/v3/Card";
@@ -231,7 +232,16 @@ export const InsightCard = (props: InsightCardProps) => {
       }
       footer={
         <s.InsightFooter>
-          {/* <Button icon={CrossIcon} label={"Dismiss"} buttonType={"tertiary"} /> */}
+          {props.onDismiss && (
+            <Button
+              icon={CrossIcon}
+              label={"Dismiss"}
+              buttonType={"tertiary"}
+              onClick={() =>
+                props.onDismiss && props.onDismiss(props.insight.id)
+              }
+            />
+          )}
           {renderActions()}
         </s.InsightFooter>
       }
diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
index 2c24cfafa..feedb174b 100644
--- a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
@@ -75,6 +75,7 @@ export const EndpointBottleneckInsight = (
       onRefresh={props.onRefresh}
       onJiraButtonClick={handleTicketInfoButtonClick}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx
index e3d853862..b4188c1aa 100644
--- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx
@@ -97,6 +97,7 @@ export const EndpointNPlusOneInsight = (
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx b/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx
index 045e839b4..01782c6cb 100644
--- a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx
@@ -124,6 +124,7 @@ export const EndpointQueryOptimizationInsight = (
         isHintEnabled: props.isJiraHintEnabled
       }}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx b/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx
index dd80c600b..41591a793 100644
--- a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx
@@ -71,6 +71,7 @@ export const EndpointSlowdownSourceInsight = (
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
index 2e4b2fc40..49e9e8dd2 100644
--- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
+++ b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
@@ -90,6 +90,7 @@ export const ExcessiveAPICallsInsight = (
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
index 72b42d51d..64d4c7977 100644
--- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
@@ -88,6 +88,7 @@ export const HighNumberOfQueriesInsight = (
           : undefined
       }
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
index 3119f6d44..c42c5befa 100644
--- a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
+++ b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
@@ -161,6 +161,7 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SessionInViewInsight/index.tsx b/src/components/Insights/common/insights/SessionInViewInsight/index.tsx
index 70b663dee..ac1cab9e8 100644
--- a/src/components/Insights/common/insights/SessionInViewInsight/index.tsx
+++ b/src/components/Insights/common/insights/SessionInViewInsight/index.tsx
@@ -91,6 +91,7 @@ export const SessionInViewInsight = (props: SessionInViewInsightProps) => {
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx b/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
index 96750140b..c172be6ea 100644
--- a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
+++ b/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
@@ -32,6 +32,7 @@ export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => {
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
index 63eed93d4..bc8008a9a 100644
--- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
@@ -119,6 +119,7 @@ export const SpanEndpointBottleneckInsight = (
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
index f6528920c..871f40791 100644
--- a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
@@ -137,6 +137,7 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => {
         spanCodeObjectId: props.insight.spanInfo?.spanCodeObjectId
       }}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
index 6287a8f53..0865cb747 100644
--- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
@@ -133,6 +133,7 @@ export const SpanQueryOptimizationInsight = (
           : undefined
       }
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/TrafficInsight/index.tsx b/src/components/Insights/common/insights/TrafficInsight/index.tsx
index d0341201b..4319efb8b 100644
--- a/src/components/Insights/common/insights/TrafficInsight/index.tsx
+++ b/src/components/Insights/common/insights/TrafficInsight/index.tsx
@@ -63,6 +63,7 @@ export const TrafficInsight = (props: TrafficInsightProps) => {
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
+      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts
index ede9b1ec7..640930890 100644
--- a/src/components/Insights/types.ts
+++ b/src/components/Insights/types.ts
@@ -103,6 +103,7 @@ export interface InsightProps {
   ) => void;
   onGoToSpan: (spanCodeObjectId: string) => void;
   isJiraHintEnabled?: boolean;
+  onDismiss?: (insightId: string) => void;
 }
 
 export interface InsightTicketInfo<T extends GenericCodeObjectInsight> {

From 0554da8131e5bfe9f798d37fceda4a1c57ac23c8 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 6 Mar 2024 15:31:52 +0200
Subject: [PATCH 02/10] add dismiss props

---
 .../Insights/InsightsPage/index.tsx           | 14 ------
 .../Insights/common/InsightCard/index.tsx     | 46 +++++++++++++++----
 .../Insights/common/InsightCard/types.ts      |  1 -
 .../DurationBreakdownInsight.stories.tsx      |  2 +
 .../DurationInsight.stories.tsx               |  6 +++
 .../EndpointBottleneckInsight/index.tsx       |  1 -
 .../EndpointBottleneckInsight/mockData.ts     |  2 +
 .../EndpointNPlusOneInsight/index.tsx         |  1 -
 .../EndpointNPlusOneInsight/mockData.ts       |  2 +
 .../index.tsx                                 |  1 -
 .../mockData.ts                               |  2 +
 .../EndpointSlowdownSourceInsight.stories.tsx |  2 +
 .../EndpointSlowdownSourceInsight/index.tsx   |  1 -
 .../ExcessiveAPICallsInsight.stories.tsx      |  2 +
 .../ExcessiveAPICallsInsight/index.tsx        |  1 -
 .../HighNumberOfQueriesInsight/index.tsx      |  1 -
 .../HighNumberOfQueriesInsight/mockData.ts    |  4 +-
 .../RequestBreakdownInsight.stories.tsx       |  2 +
 .../insights/ScalingIssueInsight/index.tsx    |  1 -
 .../insights/ScalingIssueInsight/mockData.ts  |  4 +-
 .../SessionInViewInsight.stories.tsx          |  2 +
 .../insights/SessionInViewInsight/index.tsx   |  1 -
 .../SlowEndpointInsight.stories.tsx           |  2 +
 .../insights/SlowEndpointInsight/index.tsx    |  1 -
 .../SpanEndpointBottleneckInsight/index.tsx   |  1 -
 .../insights/SpanNPlusOneInsight/index.tsx    |  1 -
 .../insights/SpanNPlusOneInsight/mockData.ts  |  2 +
 .../insights/SpanNexusInsight/mockData.ts     |  4 +-
 .../SpanQueryOptimizationInsight/index.tsx    |  1 -
 .../SpanQueryOptimizationInsight/mockData.ts  |  2 +
 .../TopUsageInsight.stories.tsx               |  2 +
 .../TrafficInsight/TrafficInsight.stories.tsx |  4 +-
 .../common/insights/TrafficInsight/index.tsx  |  1 -
 src/components/Insights/types.ts              | 11 ++++-
 34 files changed, 88 insertions(+), 43 deletions(-)

diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx
index 7578faaf1..3fee23cda 100644
--- a/src/components/Insights/InsightsPage/index.tsx
+++ b/src/components/Insights/InsightsPage/index.tsx
@@ -237,7 +237,6 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -253,7 +252,6 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -269,7 +267,6 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -282,7 +279,6 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -299,7 +295,6 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -316,7 +311,6 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -333,7 +327,6 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -351,7 +344,6 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -365,7 +357,6 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -392,7 +383,6 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -407,7 +397,6 @@ const renderInsightCard = (
         onRecalculate={handleRecalculate}
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -423,7 +412,6 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -452,7 +440,6 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
@@ -469,7 +456,6 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
-        onDismiss={onDismiss}
       />
     );
   }
diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index 31794e5b9..d540343e8 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -18,6 +18,9 @@ import { InsightHeader } from "./InsightHeader";
 import * as s from "./styles";
 import { InsightCardProps } from "./types";
 
+import { actions } from "../../actions";
+import { DismissInsightPayload, UndismissInsightPayload } from "../../types";
+
 const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds
 
 export const InsightCard = (props: InsightCardProps) => {
@@ -95,6 +98,24 @@ export const InsightCard = (props: InsightCardProps) => {
     }
   };
 
+  const handleDismissClick = () => {
+    window.sendMessageToDigma<DismissInsightPayload>({
+      action: actions.DISMISS,
+      payload: {
+        insightId: props.insight.id
+      }
+    });
+  };
+
+  const handleShowClick = () => {
+    window.sendMessageToDigma<UndismissInsightPayload>({
+      action: actions.UNDISMISS,
+      payload: {
+        insightId: props.insight.id
+      }
+    });
+  };
+
   const renderActions = () => {
     const buttonsToRender: {
       tooltip: string;
@@ -232,16 +253,21 @@ export const InsightCard = (props: InsightCardProps) => {
       }
       footer={
         <s.InsightFooter>
-          {props.onDismiss && (
-            <Button
-              icon={CrossIcon}
-              label={"Dismiss"}
-              buttonType={"tertiary"}
-              onClick={() =>
-                props.onDismiss && props.onDismiss(props.insight.id)
-              }
-            />
-          )}
+          {props.insight.isDismissible &&
+            (props.insight.isDismissed ? (
+              <Button
+                label={"Show"}
+                buttonType={"tertiary"}
+                onClick={handleShowClick}
+              />
+            ) : (
+              <Button
+                icon={CrossIcon}
+                label={"Dismiss"}
+                buttonType={"tertiary"}
+                onClick={handleDismissClick}
+              />
+            ))}
           {renderActions()}
         </s.InsightFooter>
       }
diff --git a/src/components/Insights/common/InsightCard/types.ts b/src/components/Insights/common/InsightCard/types.ts
index f9f2f0f25..91bb0beaa 100644
--- a/src/components/Insights/common/InsightCard/types.ts
+++ b/src/components/Insights/common/InsightCard/types.ts
@@ -7,7 +7,6 @@ export interface InsightCardProps {
   content?: ReactNode;
   isAsync?: boolean;
   isActive?: boolean;
-  onDismiss?: (insightId: string) => void;
   onOpenHistogram?: (
     instrumentationLibrary: string,
     name: string,
diff --git a/src/components/Insights/common/insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx b/src/components/Insights/common/insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx
index 25b126d1c..3ad776015 100644
--- a/src/components/Insights/common/insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx
+++ b/src/components/Insights/common/insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx
@@ -35,6 +35,8 @@ export const Default: Story = {
       category: InsightCategory.Performance,
       specifity: 4,
       isRecalculateEnabled: true,
+      isDismissed: false,
+      isDismissible: true,
       importance: 6,
       spanName: "ClientTester.generateInsightData",
       spanCodeObjectId:
diff --git a/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx b/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx
index a13c58041..9c8cf1df0 100644
--- a/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx
+++ b/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx
@@ -144,6 +144,8 @@ export const WithChange: Story = {
       firstCommitId: null,
       lastCommitId: null,
       deactivatedCommitId: null,
+      isDismissed: false,
+      isDismissible: true,
       reopenCount: 0,
       ticketLink: null,
       impact: 0,
@@ -4891,6 +4893,8 @@ export const HistogramWithGaps: Story = {
       category: InsightCategory.Performance,
       specifity: 4,
       isRecalculateEnabled: true,
+      isDismissed: false,
+      isDismissible: true,
       spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
       span: {
         name: "DelayAsync",
@@ -5292,6 +5296,8 @@ export const EmptyStateBug: Story = {
       category: InsightCategory.Performance,
       specifity: 4,
       isRecalculateEnabled: true,
+      isDismissed: false,
+      isDismissible: true,
       spanCodeObjectId:
         "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall",
       span: {
diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
index feedb174b..2c24cfafa 100644
--- a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
@@ -75,7 +75,6 @@ export const EndpointBottleneckInsight = (
       onRefresh={props.onRefresh}
       onJiraButtonClick={handleTicketInfoButtonClick}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts b/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts
index 1a6c8dad8..b5c567301 100644
--- a/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts
+++ b/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts
@@ -22,6 +22,8 @@ export const mockedSpanBottleneckInsight: EndpointBottleneckInsight = {
   category: InsightCategory.Performance,
   specifity: 3,
   importance: 2,
+  isDismissed: false,
+  isDismissible: true,
   span: {
     spanInfo: {
       name: "DelayAsync",
diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx
index b4188c1aa..e3d853862 100644
--- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx
@@ -97,7 +97,6 @@ export const EndpointNPlusOneInsight = (
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts b/src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts
index 8b5cce804..6f611f6f6 100644
--- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts
+++ b/src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts
@@ -21,6 +21,8 @@ export const mockedEndpointNPlusOneInsight: EndpointSpanNPlusOneInsight = {
   category: InsightCategory.Performance,
   specifity: 2,
   importance: 3,
+  isDismissed: false,
+  isDismissible: true,
   span: {
     occurrences: 200,
     internalSpan: null,
diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx b/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx
index 01782c6cb..045e839b4 100644
--- a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx
@@ -124,7 +124,6 @@ export const EndpointQueryOptimizationInsight = (
         isHintEnabled: props.isJiraHintEnabled
       }}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/mockData.ts b/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/mockData.ts
index 696d98172..92be6fcd7 100644
--- a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/mockData.ts
+++ b/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/mockData.ts
@@ -23,6 +23,8 @@ export const mockedEndpointQueryOptimizationInsight: EndpointQueryOptimizationIn
     category: InsightCategory.Performance,
     specifity: 2,
     importance: 3,
+    isDismissed: false,
+    isDismissible: true,
     spans: [
       {
         spanInfo: {
diff --git a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/EndpointSlowdownSourceInsight.stories.tsx b/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/EndpointSlowdownSourceInsight.stories.tsx
index 830a4fc7e..e0a020d68 100644
--- a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/EndpointSlowdownSourceInsight.stories.tsx
+++ b/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/EndpointSlowdownSourceInsight.stories.tsx
@@ -35,6 +35,8 @@ export const WithEvaluatingChange: Story = {
       category: InsightCategory.Performance,
       specifity: 4,
       importance: 2,
+      isDismissed: false,
+      isDismissible: true,
       endpointSlowdownSources: [
         {
           percentile: "0.5",
diff --git a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx b/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx
index 41591a793..dd80c600b 100644
--- a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx
+++ b/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx
@@ -71,7 +71,6 @@ export const EndpointSlowdownSourceInsight = (
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx
index 20faae2ba..9ddae67cf 100644
--- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx
+++ b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx
@@ -155,6 +155,8 @@ export const EmptyTrace: Story = {
       category: InsightCategory.Performance,
       specifity: 2,
       importance: 3,
+      isDismissed: false,
+      isDismissible: true,
       spans: [
         {
           repeats: 29,
diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
index 49e9e8dd2..2e4b2fc40 100644
--- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
+++ b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
@@ -90,7 +90,6 @@ export const ExcessiveAPICallsInsight = (
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
index 64d4c7977..72b42d51d 100644
--- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
@@ -88,7 +88,6 @@ export const HighNumberOfQueriesInsight = (
           : undefined
       }
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts
index 967c1775c..c79053a0b 100644
--- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts
@@ -65,5 +65,7 @@ export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsigh
       "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm",
     customStartTime: null,
     actualStartTime: "2023-08-10T08:04:00Z",
-    quantile: 0.95
+    quantile: 0.95,
+    isDismissed: false,
+    isDismissible: true
   };
diff --git a/src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx b/src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx
index 5ffb0c380..0a2839ae0 100644
--- a/src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx
+++ b/src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx
@@ -41,6 +41,8 @@ const data: EndpointBreakdownInsight = {
   importance: 6,
   isRecalculateEnabled: true,
   hasAsyncSpans: false,
+  isDismissed: false,
+  isDismissible: true,
   components: [
     {
       type: ComponentType.Internal,
diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
index c42c5befa..3119f6d44 100644
--- a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
+++ b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
@@ -161,7 +161,6 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/mockData.ts b/src/components/Insights/common/insights/ScalingIssueInsight/mockData.ts
index 9b368dfc1..a489aef93 100644
--- a/src/components/Insights/common/insights/ScalingIssueInsight/mockData.ts
+++ b/src/components/Insights/common/insights/ScalingIssueInsight/mockData.ts
@@ -68,7 +68,9 @@ export const mockedSpanScalingInsight: SpanScalingBadlyInsight = {
   prefixedCodeObjectId: "span:SampleInsightsController$_$WaitForLock",
   customStartTime: null,
   actualStartTime: "2023-06-24T00:00:00.000Z",
-  flowHash: null
+  flowHash: null,
+  isDismissed: false,
+  isDismissible: true
 };
 
 export const ofEndpoint = {
diff --git a/src/components/Insights/common/insights/SessionInViewInsight/SessionInViewInsight.stories.tsx b/src/components/Insights/common/insights/SessionInViewInsight/SessionInViewInsight.stories.tsx
index 493d88949..18be59188 100644
--- a/src/components/Insights/common/insights/SessionInViewInsight/SessionInViewInsight.stories.tsx
+++ b/src/components/Insights/common/insights/SessionInViewInsight/SessionInViewInsight.stories.tsx
@@ -35,6 +35,8 @@ export const Default: Story = {
       category: InsightCategory.Performance,
       specifity: 2,
       importance: 3,
+      isDismissed: false,
+      isDismissible: true,
       spans: [
         {
           renderSpan: {
diff --git a/src/components/Insights/common/insights/SessionInViewInsight/index.tsx b/src/components/Insights/common/insights/SessionInViewInsight/index.tsx
index ac1cab9e8..70b663dee 100644
--- a/src/components/Insights/common/insights/SessionInViewInsight/index.tsx
+++ b/src/components/Insights/common/insights/SessionInViewInsight/index.tsx
@@ -91,7 +91,6 @@ export const SessionInViewInsight = (props: SessionInViewInsightProps) => {
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx b/src/components/Insights/common/insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx
index c964e901a..940bb9d4c 100644
--- a/src/components/Insights/common/insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx
+++ b/src/components/Insights/common/insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx
@@ -34,6 +34,8 @@ export const Default: Story = {
       category: InsightCategory.Performance,
       specifity: 5,
       importance: 2,
+      isDismissed: false,
+      isDismissible: true,
       decorators: [
         {
           title: "Slow Endpoint",
diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx b/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
index c172be6ea..96750140b 100644
--- a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
+++ b/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
@@ -32,7 +32,6 @@ export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => {
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
index bc8008a9a..63eed93d4 100644
--- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
@@ -119,7 +119,6 @@ export const SpanEndpointBottleneckInsight = (
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
index 871f40791..f6528920c 100644
--- a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
@@ -137,7 +137,6 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => {
         spanCodeObjectId: props.insight.spanInfo?.spanCodeObjectId
       }}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/mockData.ts b/src/components/Insights/common/insights/SpanNPlusOneInsight/mockData.ts
index a098d26d0..880934600 100644
--- a/src/components/Insights/common/insights/SpanNPlusOneInsight/mockData.ts
+++ b/src/components/Insights/common/insights/SpanNPlusOneInsight/mockData.ts
@@ -22,6 +22,8 @@ export const mockedNPlusOneInsight: SpanNPlusOneInsight = {
   category: InsightCategory.Performance,
   specifity: 2,
   importance: 2,
+  isDismissed: false,
+  isDismissible: true,
   span: {
     name: "OwnerValidation.ValidateOwner",
     displayName: "OwnerValidation.ValidateOwner",
diff --git a/src/components/Insights/common/insights/SpanNexusInsight/mockData.ts b/src/components/Insights/common/insights/SpanNexusInsight/mockData.ts
index c21c7c05e..ecdfcb1e5 100644
--- a/src/components/Insights/common/insights/SpanNexusInsight/mockData.ts
+++ b/src/components/Insights/common/insights/SpanNexusInsight/mockData.ts
@@ -61,5 +61,7 @@ export const mockedSpanNexusInsight: SpanNexusInsight = {
   isEntriesHigh: false,
   isFlowsHigh: true,
   isServicesHigh: false,
-  type: InsightType.SpanNexus
+  type: InsightType.SpanNexus,
+  isDismissed: false,
+  isDismissible: true
 };
diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
index 0865cb747..6287a8f53 100644
--- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx
@@ -133,7 +133,6 @@ export const SpanQueryOptimizationInsight = (
           : undefined
       }
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/mockData.ts b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/mockData.ts
index 81a1ba9ee..f119f54d7 100644
--- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/mockData.ts
+++ b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/mockData.ts
@@ -22,6 +22,8 @@ export const mockedQueryOptimizationInsight: QueryOptimizationInsight = {
   category: InsightCategory.Performance,
   specifity: 2,
   importance: 2,
+  isDismissed: false,
+  isDismissible: true,
   span: {
     name: "OwnerValidation.ValidateOwner",
     displayName: "OwnerValidation.ValidateOwner",
diff --git a/src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx b/src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx
index 79865fc88..5007f6c32 100644
--- a/src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx
+++ b/src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx
@@ -38,6 +38,8 @@ export const Default: Story = {
       importance: 5,
       span: "DelayAsync",
       sampleTrace: null,
+      isDismissed: false,
+      isDismissible: true,
       flows: [
         {
           sampleTraceIds: ["3E41E4197B696CA9BF1157AEB254DFE0"],
diff --git a/src/components/Insights/common/insights/TrafficInsight/TrafficInsight.stories.tsx b/src/components/Insights/common/insights/TrafficInsight/TrafficInsight.stories.tsx
index 688ade3b2..3037e9424 100644
--- a/src/components/Insights/common/insights/TrafficInsight/TrafficInsight.stories.tsx
+++ b/src/components/Insights/common/insights/TrafficInsight/TrafficInsight.stories.tsx
@@ -70,7 +70,9 @@ const BaseTrafficInsight = {
   actualStartTime: "2023-06-16T11:10:22.773Z",
   decorators: null,
   category: "",
-  importance: InsightImportance.NotInteresting
+  importance: InsightImportance.NotInteresting,
+  isDismissed: false,
+  isDismissible: true
 };
 
 export const NormalTraffic: Story = {
diff --git a/src/components/Insights/common/insights/TrafficInsight/index.tsx b/src/components/Insights/common/insights/TrafficInsight/index.tsx
index 4319efb8b..d0341201b 100644
--- a/src/components/Insights/common/insights/TrafficInsight/index.tsx
+++ b/src/components/Insights/common/insights/TrafficInsight/index.tsx
@@ -63,7 +63,6 @@ export const TrafficInsight = (props: TrafficInsightProps) => {
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
       onGoToSpan={props.onGoToSpan}
-      onDismiss={props.onDismiss}
     />
   );
 };
diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts
index 640930890..9126f2cf1 100644
--- a/src/components/Insights/types.ts
+++ b/src/components/Insights/types.ts
@@ -103,7 +103,6 @@ export interface InsightProps {
   ) => void;
   onGoToSpan: (spanCodeObjectId: string) => void;
   isJiraHintEnabled?: boolean;
-  onDismiss?: (insightId: string) => void;
 }
 
 export interface InsightTicketInfo<T extends GenericCodeObjectInsight> {
@@ -190,6 +189,8 @@ export interface CodeObjectInsight extends Insight {
   ticketLink: string | null;
   id: string;
   sourceSpanCodeObjectInsight: string;
+  isDismissed: boolean;
+  isDismissible: boolean;
 }
 
 export interface SpanInsight extends CodeObjectInsight {
@@ -861,3 +862,11 @@ export interface ScopedInsightsQuery extends InsightsQuery {
 }
 
 export { InsightType };
+
+export interface DismissInsightPayload {
+  insightId: string;
+}
+
+export interface UndismissInsightPayload {
+  insightId: string;
+}

From c8c88842ac3b5c696f5229e9cf73748cf0975b74 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 6 Mar 2024 15:45:04 +0200
Subject: [PATCH 03/10] added dismissal props

---
 .../Insights/BottleneckInsight/mockData.ts    |  2 ++
 .../DurationBreakdownInsight.stories.tsx      |  2 ++
 .../DurationInsight.stories.tsx               | 14 ++++++++++
 .../DurationSlowdownSourceInsight.stories.tsx |  2 ++
 .../EndpointNPlusOneInsight/mockData.ts       |  2 ++
 .../mockData.ts                               |  2 ++
 .../ErrorsInsight/ErrorsInsight.stories.tsx   |  2 ++
 .../ExcessiveAPICallsInsight.stories.tsx      |  2 ++
 .../HighNumberOfQueriesInsight/mockData.ts    |  2 ++
 .../InsightJiraTicket.stories.tsx             |  2 ++
 src/components/Insights/Insights.stories.tsx  | 28 +++++++++++++++----
 .../Insights/InsightsPage/index.tsx           |  3 +-
 .../Insights/NPlusOneInsight/mockData.ts      |  2 ++
 .../NoScalingIssueInsight.stories.tsx         |  2 ++
 .../PerformanceAtScaleInsight.stories.tsx     |  2 ++
 .../QueryOptimizationInsight/mockData.ts      |  2 ++
 .../RequestBreakdownInsight.stories.tsx       |  2 ++
 .../Insights/ScalingIssueInsight/mockData.ts  |  2 ++
 .../SessionInViewInsight.stories.tsx          |  2 ++
 .../SlowEndpointInsight.stories.tsx           |  2 ++
 .../SpanBottleneckInsight/mockData.ts         |  2 ++
 .../Insights/SpanNexusInsight/mockData.ts     |  2 ++
 .../TopUsageInsight.stories.tsx               |  4 ++-
 .../TrafficInsight/TrafficInsight.stories.tsx |  4 +++
 .../InsightCard/InsightCard.stories.tsx       |  2 --
 .../DurationInsight.stories.tsx               |  8 ++++++
 .../ExcessiveAPICallsInsight.stories.tsx      |  2 ++
 27 files changed, 92 insertions(+), 11 deletions(-)

diff --git a/src/components/Insights/BottleneckInsight/mockData.ts b/src/components/Insights/BottleneckInsight/mockData.ts
index 76eb46472..387c4f293 100644
--- a/src/components/Insights/BottleneckInsight/mockData.ts
+++ b/src/components/Insights/BottleneckInsight/mockData.ts
@@ -22,6 +22,8 @@ export const mockedBottleneckInsight: SpanEndpointBottleneckInsight = {
   category: InsightCategory.Performance,
   specifity: 3,
   importance: 2,
+  isDismissed: false,
+  isDismissible: true,
   span: {
     name: "WaitForLock",
     displayName: "WaitForLock",
diff --git a/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx b/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx
index 1c0bbc5a4..779da4860 100644
--- a/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx
+++ b/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx
@@ -28,6 +28,8 @@ export const Default: Story = {
       firstCommitId: "b3f7b3f",
       lastCommitId: "a1b2c3d",
       deactivatedCommitId: null,
+      isDismissed: false,
+      isDismissible: true,
       reopenCount: 0,
       ticketLink: null,
       impact: 0,
diff --git a/src/components/Insights/DurationInsight/DurationInsight.stories.tsx b/src/components/Insights/DurationInsight/DurationInsight.stories.tsx
index 1cf110bad..1c8904a5d 100644
--- a/src/components/Insights/DurationInsight/DurationInsight.stories.tsx
+++ b/src/components/Insights/DurationInsight/DurationInsight.stories.tsx
@@ -34,6 +34,8 @@ export const WithAverage: Story = {
       name: "Performance Stats",
       type: InsightType.SpanDurations,
       category: InsightCategory.Performance,
+      isDismissed: false,
+      isDismissible: true,
       specifity: 4,
       isRecalculateEnabled: true,
       spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
@@ -151,6 +153,8 @@ export const WithChange: Story = {
       name: "Performance Stats",
       type: InsightType.SpanDurations,
       category: InsightCategory.Performance,
+      isDismissed: false,
+      isDismissible: true,
       specifity: 4,
       isRecalculateEnabled: true,
       spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
@@ -254,6 +258,8 @@ export const WithEvaluatingChange: Story = {
       deactivatedCommitId: null,
       reopenCount: 0,
       ticketLink: null,
+      isDismissed: false,
+      isDismissible: true,
       impact: 0,
       name: "Performance Stats",
       type: InsightType.SpanDurations,
@@ -368,6 +374,8 @@ export const HistogramWithManyBars: Story = {
       specifity: 4,
       isRecalculateEnabled: true,
       spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
+      isDismissed: false,
+      isDismissible: true,
       span: {
         name: "DelayAsync",
         displayName: "DelayAsync",
@@ -4893,6 +4901,8 @@ export const HistogramWithGaps: Story = {
       specifity: 4,
       isRecalculateEnabled: true,
       spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
+      isDismissed: false,
+      isDismissible: true,
       span: {
         name: "DelayAsync",
         displayName: "DelayAsync",
@@ -5141,6 +5151,8 @@ export const HistogramWithAFewBars: Story = {
       deactivatedCommitId: null,
       reopenCount: 0,
       ticketLink: null,
+      isDismissed: false,
+      isDismissible: true,
       impact: 0,
       name: "Performance Stats",
       type: InsightType.SpanDurations,
@@ -5293,6 +5305,8 @@ export const EmptyStateBug: Story = {
       category: InsightCategory.Performance,
       specifity: 4,
       isRecalculateEnabled: true,
+      isDismissed: false,
+      isDismissible: true,
       spanCodeObjectId:
         "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall",
       span: {
diff --git a/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx b/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx
index b9307512c..6a473e62b 100644
--- a/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx
+++ b/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx
@@ -36,6 +36,8 @@ export const WithEvaluatingChange: Story = {
       category: InsightCategory.Performance,
       specifity: 4,
       importance: 2,
+      isDismissed: false,
+      isDismissible: true,
       durationSlowdownSources: [
         {
           percentile: "0.5",
diff --git a/src/components/Insights/EndpointNPlusOneInsight/mockData.ts b/src/components/Insights/EndpointNPlusOneInsight/mockData.ts
index bf1c8d8b4..03767c3e7 100644
--- a/src/components/Insights/EndpointNPlusOneInsight/mockData.ts
+++ b/src/components/Insights/EndpointNPlusOneInsight/mockData.ts
@@ -22,6 +22,8 @@ export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = {
   category: InsightCategory.Performance,
   specifity: 2,
   importance: 3,
+  isDismissed: false,
+  isDismissible: true,
   spans: [
     {
       occurrences: 200,
diff --git a/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts b/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts
index 68c6589cc..3bce4c02f 100644
--- a/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts
+++ b/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts
@@ -21,6 +21,8 @@ export const mockedEndpointQueryOptimizationInsight: EndpointQueryOptimizationIn
     name: "Query Optimization",
     type: InsightType.EndpointQueryOptimization,
     category: InsightCategory.Performance,
+    isDismissed: false,
+    isDismissible: true,
     specifity: 2,
     importance: 3,
     spans: [
diff --git a/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx b/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx
index f7f9ef336..74ee68520 100644
--- a/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx
+++ b/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx
@@ -40,6 +40,8 @@ export const Default: Story = {
       errorCount: 2,
       unhandledCount: 0,
       unexpectedCount: 0,
+      isDismissed: false,
+      isDismissible: true,
       topErrors: [
         {
           uid: "c4436bfe-1736-11ee-9651-0242ac1a0004",
diff --git a/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx b/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx
index 0a9f566f7..d296dca82 100644
--- a/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx
+++ b/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx
@@ -36,6 +36,8 @@ export const Default: Story = {
       category: InsightCategory.Performance,
       specifity: 2,
       importance: 3,
+      isDismissed: false,
+      isDismissible: true,
       spans: [
         {
           repeats: 29,
diff --git a/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts b/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts
index 669203bd3..b92dea23a 100644
--- a/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts
+++ b/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts
@@ -24,6 +24,8 @@ export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsigh
     specifity: 2,
     importance: 3,
     queriesCount: 250,
+    isDismissed: false,
+    isDismissible: true,
     typicalCount: 4,
     traceId: "00D37A4E7208E0F6E89AA7E2E37446A6",
     scope: InsightScope.EntrySpan,
diff --git a/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx b/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx
index 2a2d447d9..f5f8388cd 100644
--- a/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx
+++ b/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx
@@ -38,6 +38,8 @@ const insight: SpanUsagesInsight = {
   sampleTrace: null,
   flows: [],
   scope: InsightScope.Span,
+  isDismissed: false,
+  isDismissible: true,
   spanInfo: {
     name: "DelayAsync",
     displayName: "DelayAsync",
diff --git a/src/components/Insights/Insights.stories.tsx b/src/components/Insights/Insights.stories.tsx
index a34b50a6a..6c133c5ac 100644
--- a/src/components/Insights/Insights.stories.tsx
+++ b/src/components/Insights/Insights.stories.tsx
@@ -234,7 +234,9 @@ export const Default: Story = {
           prefixedCodeObjectId:
             "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)",
           customStartTime: null,
-          actualStartTime: "2023-06-26T00:00:00.000Z"
+          actualStartTime: "2023-06-26T00:00:00.000Z",
+          isDismissed: false,
+          isDismissible: true
         },
         {
           sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
@@ -290,7 +292,9 @@ export const Default: Story = {
           prefixedCodeObjectId:
             "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)",
           customStartTime: null,
-          actualStartTime: "2023-06-26T13:53:53.645Z"
+          actualStartTime: "2023-06-26T13:53:53.645Z",
+          isDismissed: false,
+          isDismissible: true
         },
         {
           sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
@@ -332,7 +336,9 @@ export const Default: Story = {
           prefixedCodeObjectId:
             "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)",
           customStartTime: null,
-          actualStartTime: "2023-06-26T13:53:57.956Z"
+          actualStartTime: "2023-06-26T13:53:57.956Z",
+          isDismissed: false,
+          isDismissible: true
         },
         {
           sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
@@ -351,6 +357,8 @@ export const Default: Story = {
           category: InsightCategory.Usage,
           specifity: 4,
           importance: 6,
+          isDismissed: false,
+          isDismissible: true,
           decorators: [
             {
               title: "Low Usage",
@@ -564,7 +572,9 @@ export const Default: Story = {
           prefixedCodeObjectId:
             "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)",
           customStartTime: null,
-          actualStartTime: "2023-06-12T13:49:03.486Z"
+          actualStartTime: "2023-06-12T13:49:03.486Z",
+          isDismissed: false,
+          isDismissible: true
         },
         {
           sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
@@ -583,6 +593,8 @@ export const Default: Story = {
           category: InsightCategory.Performance,
           specifity: 4,
           isRecalculateEnabled: true,
+          isDismissed: false,
+          isDismissible: true,
           spanCodeObjectId:
             "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds",
           span: {
@@ -727,7 +739,9 @@ export const Default: Story = {
           prefixedCodeObjectId:
             "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)",
           customStartTime: null,
-          actualStartTime: "2023-06-20T00:00:00.000Z"
+          actualStartTime: "2023-06-20T00:00:00.000Z",
+          isDismissed: false,
+          isDismissible: true
         },
         mockedEndpointNPlusOneInsight,
         mockedBottleneckInsight,
@@ -872,7 +886,9 @@ const errorsInsight: CodeObjectErrorsInsight = {
   prefixedCodeObjectId:
     "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)",
   customStartTime: null,
-  actualStartTime: "2023-06-26T13:53:53.645Z"
+  actualStartTime: "2023-06-26T13:53:53.645Z",
+  isDismissed: false,
+  isDismissible: true
 };
 
 export const NoObservabilityWithInsights: Story = {
diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx
index 3fee23cda..9dbf34754 100644
--- a/src/components/Insights/InsightsPage/index.tsx
+++ b/src/components/Insights/InsightsPage/index.tsx
@@ -89,8 +89,7 @@ const renderInsightCard = (
     event?: string
   ) => void,
   isJiraHintEnabled: boolean,
-  onRefresh: () => void,
-  onDismiss: (insightId: string) => void
+  onRefresh: () => void
 ): JSX.Element | undefined => {
   // const handleErrorSelect = (errorId: string, insightType: InsightType) => {
   //   sendTrackingEvent(globalTrackingEvents.USER_ACTION, {
diff --git a/src/components/Insights/NPlusOneInsight/mockData.ts b/src/components/Insights/NPlusOneInsight/mockData.ts
index 7a51ce12e..48009f3d0 100644
--- a/src/components/Insights/NPlusOneInsight/mockData.ts
+++ b/src/components/Insights/NPlusOneInsight/mockData.ts
@@ -17,6 +17,8 @@ export const mockedNPlusOneInsight: SpanNPlusOneInsight = {
   type: InsightType.SpanNPlusOne,
   category: InsightCategory.Performance,
   specifity: 2,
+  isDismissed: false,
+  isDismissible: true,
   importance: 2,
   span: {
     name: "OwnerValidation.ValidateOwner",
diff --git a/src/components/Insights/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx b/src/components/Insights/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx
index 088953766..9087b95b7 100644
--- a/src/components/Insights/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx
+++ b/src/components/Insights/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx
@@ -36,6 +36,8 @@ export const Default: Story = {
       category: InsightCategory.Performance,
       specifity: 4,
       importance: 5,
+      isDismissed: false,
+      isDismissible: true,
       maxConcurrency: 24,
       minDuration: {
         value: 100.67,
diff --git a/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx b/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx
index 5326df24c..11967d2d2 100644
--- a/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx
+++ b/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx
@@ -36,6 +36,8 @@ export const Default: Story = {
       category: InsightCategory.Performance,
       specifity: 4,
       importance: 5,
+      isDismissed: false,
+      isDismissible: true,
       concurrencies: [
         {
           calls: 1,
diff --git a/src/components/Insights/QueryOptimizationInsight/mockData.ts b/src/components/Insights/QueryOptimizationInsight/mockData.ts
index 841d06801..05e620f61 100644
--- a/src/components/Insights/QueryOptimizationInsight/mockData.ts
+++ b/src/components/Insights/QueryOptimizationInsight/mockData.ts
@@ -22,6 +22,8 @@ export const mockedQueryOptimizationInsight: QueryOptimizationInsight = {
   category: InsightCategory.Performance,
   specifity: 2,
   importance: 2,
+  isDismissed: false,
+  isDismissible: true,
   span: {
     name: "OwnerValidation.ValidateOwner",
     displayName: "OwnerValidation.ValidateOwner",
diff --git a/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx b/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx
index 4ca60c889..9aea03578 100644
--- a/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx
+++ b/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx
@@ -41,6 +41,8 @@ const data: EndpointBreakdownInsight = {
   importance: 6,
   isRecalculateEnabled: true,
   hasAsyncSpans: false,
+  isDismissed: false,
+  isDismissible: true,
   components: [
     {
       type: ComponentType.Internal,
diff --git a/src/components/Insights/ScalingIssueInsight/mockData.ts b/src/components/Insights/ScalingIssueInsight/mockData.ts
index ca1c101dd..459b23398 100644
--- a/src/components/Insights/ScalingIssueInsight/mockData.ts
+++ b/src/components/Insights/ScalingIssueInsight/mockData.ts
@@ -26,6 +26,8 @@ export const mockedSpanScalingInsight: SpanScalingBadlyInsight = {
   spanInstrumentationLibrary: "SampleInsightsController",
   turningPointConcurrency: 17,
   maxConcurrency: 24,
+  isDismissed: false,
+  isDismissible: true,
   minDuration: {
     value: 100.67,
     unit: "ms",
diff --git a/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx b/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx
index 22ecf1ce5..62250fffa 100644
--- a/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx
+++ b/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx
@@ -36,6 +36,8 @@ export const Default: Story = {
       category: InsightCategory.Performance,
       specifity: 2,
       importance: 3,
+      isDismissed: false,
+      isDismissible: true,
       spans: [
         {
           renderSpan: {
diff --git a/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx b/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx
index 9999a6d01..58840010a 100644
--- a/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx
+++ b/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx
@@ -30,6 +30,8 @@ export const Default: Story = {
       deactivatedCommitId: null,
       reopenCount: 0,
       ticketLink: null,
+      isDismissible: true,
+      isDismissed: false,
       impact: 0,
       name: "Slow Endpoint",
       type: InsightType.SlowEndpoint,
diff --git a/src/components/Insights/SpanBottleneckInsight/mockData.ts b/src/components/Insights/SpanBottleneckInsight/mockData.ts
index cbff1e07d..24f3b3dd0 100644
--- a/src/components/Insights/SpanBottleneckInsight/mockData.ts
+++ b/src/components/Insights/SpanBottleneckInsight/mockData.ts
@@ -22,6 +22,8 @@ export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = {
   category: InsightCategory.Performance,
   specifity: 3,
   importance: 2,
+  isDismissed: false,
+  isDismissible: true,
   spans: [
     {
       spanInfo: {
diff --git a/src/components/Insights/SpanNexusInsight/mockData.ts b/src/components/Insights/SpanNexusInsight/mockData.ts
index f07736609..a92847860 100644
--- a/src/components/Insights/SpanNexusInsight/mockData.ts
+++ b/src/components/Insights/SpanNexusInsight/mockData.ts
@@ -19,6 +19,8 @@ export const mockedSpanNexusInsight: SpanNexusInsight = {
   specifity: 2,
   importance: 3,
   scope: InsightScope.Span,
+  isDismissed: false,
+  isDismissible: true,
   spanInfo: {
     name: "HTTP POST /owners/{ownerId}/pets/new",
     displayName: "HTTP POST /owners/{ownerId}/pets/new",
diff --git a/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx b/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx
index f23daf0fa..40b5c6035 100644
--- a/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx
+++ b/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx
@@ -108,7 +108,9 @@ export const Default: Story = {
       severity: 0,
       prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
       customStartTime: null,
-      actualStartTime: "2023-06-17T00:00:00.000Z"
+      actualStartTime: "2023-06-17T00:00:00.000Z",
+      isDismissed: false,
+      isDismissible: true
     }
   }
 };
diff --git a/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx b/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx
index 299d0bbcd..7c08043a9 100644
--- a/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx
+++ b/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx
@@ -34,6 +34,8 @@ export const LowTraffic: Story = {
       name: "Low Usage",
       type: InsightType.LowUsage,
       category: InsightCategory.Usage,
+      isDismissed: false,
+      isDismissible: true,
       specifity: 4,
       importance: 6,
       decorators: [
@@ -97,6 +99,8 @@ export const HighTraffic: Story = {
       name: "High Usage",
       type: InsightType.HighUsage,
       category: InsightCategory.Usage,
+      isDismissed: false,
+      isDismissible: true,
       specifity: 4,
       importance: 5,
       decorators: [
diff --git a/src/components/Insights/common/InsightCard/InsightCard.stories.tsx b/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
index 759aff60f..de790f6ed 100644
--- a/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
+++ b/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
@@ -28,7 +28,6 @@ export const JiraButtonIsPrimary: Story = {
     isAsync: true,
     insight: { ...mockedEndpointNPlusOneInsight, criticality: 0.9 },
     onGoToLive: undefined,
-    onDismiss: undefined,
     onPin: undefined,
     onGoToTrace: undefined,
     onOpenHistogram: undefined
@@ -45,7 +44,6 @@ export const LinkedJiraTicket: Story = {
       isHintEnabled: false
     },
     onGoToLive: undefined,
-    onDismiss: undefined,
     onPin: undefined,
     onGoToTrace: undefined,
     onOpenHistogram: undefined
diff --git a/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx b/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx
index 9c8cf1df0..0410172c5 100644
--- a/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx
+++ b/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx
@@ -36,6 +36,8 @@ export const WithAverage: Story = {
       specifity: 4,
       isRecalculateEnabled: true,
       spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
+      isDismissed: false,
+      isDismissible: true,
       span: {
         name: "DelayAsync",
         displayName: "DelayAsync",
@@ -262,6 +264,8 @@ export const WithEvaluatingChange: Story = {
       specifity: 4,
       isRecalculateEnabled: true,
       spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock",
+      isDismissed: false,
+      isDismissible: true,
       span: {
         name: "WaitForLock",
         displayName: "WaitForLock",
@@ -368,6 +372,8 @@ export const HistogramWithManyBars: Story = {
       category: InsightCategory.Performance,
       specifity: 4,
       isRecalculateEnabled: true,
+      isDismissed: false,
+      isDismissible: true,
       spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
       span: {
         name: "DelayAsync",
@@ -5151,6 +5157,8 @@ export const HistogramWithAFewBars: Story = {
       specifity: 4,
       isRecalculateEnabled: true,
       spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
+      isDismissed: false,
+      isDismissible: true,
       span: {
         name: "DelayAsync",
         displayName: "DelayAsync",
diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx
index 9ddae67cf..1795ed555 100644
--- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx
+++ b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx
@@ -35,6 +35,8 @@ export const Default: Story = {
       category: InsightCategory.Performance,
       specifity: 2,
       importance: 3,
+      isDismissed: false,
+      isDismissible: true,
       spans: [
         {
           repeats: 29,

From 3be6ff35c6635dd3118816be813a2be81760b674 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 6 Mar 2024 18:37:09 +0200
Subject: [PATCH 04/10] Add dismissal styles

---
 .../Insights/InsightsCatalog/index.tsx        | 85 +++++++++++++------
 .../Insights/InsightsCatalog/styles.ts        | 18 +++-
 .../Insights/common/InsightCard/index.tsx     | 10 ++-
 .../Insights/common/InsightCard/styles.ts     | 15 ++++
 .../Insights/common/useInsightsData.ts        |  3 +-
 src/components/Insights/index.tsx             |  3 +-
 src/components/Insights/types.ts              |  1 +
 src/components/common/App/types.ts            |  1 +
 .../common/icons/16px/GroupIcon.tsx           | 31 +++++++
 src/components/common/v3/Card/index.tsx       |  7 +-
 src/components/common/v3/Card/types.ts        |  1 +
 11 files changed, 136 insertions(+), 39 deletions(-)
 create mode 100644 src/components/common/icons/16px/GroupIcon.tsx

diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
index 7fdbcb606..e98266810 100644
--- a/src/components/Insights/InsightsCatalog/index.tsx
+++ b/src/components/Insights/InsightsCatalog/index.tsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { usePrevious } from "../../../hooks/usePrevious";
 
+import { useTheme } from "styled-components";
 import { useDebounce } from "../../../hooks/useDebounce";
 import { isNumber } from "../../../typeGuards/isNumber";
 import { ConfigContext } from "../../common/App/ConfigContext";
@@ -9,6 +10,7 @@ import { SearchInput } from "../../common/SearchInput";
 import { SortingSelector } from "../../common/SortingSelector";
 import { SORTING_ORDER, Sorting } from "../../common/SortingSelector/types";
 import { ChevronIcon } from "../../common/icons/16px/ChevronIcon";
+import { GroupIcon } from "../../common/icons/16px/GroupIcon";
 import { Direction } from "../../common/icons/types";
 import { Button } from "../../common/v3/Button";
 import { InsightsPage } from "../InsightsPage";
@@ -19,7 +21,7 @@ import { InsightsCatalogProps, SORTING_CRITERION } from "./types";
 const PAGE_SIZE = 10;
 enum ViewMode {
   All,
-  Hidden
+  OnlyHidden
 }
 
 export const InsightsCatalog = (props: InsightsCatalogProps) => {
@@ -42,6 +44,8 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
   const previousConfig = usePrevious(config);
   const previousScope = usePrevious(config.scope?.span);
   const [mode, setMode] = useState<ViewMode>(ViewMode.All);
+  const previousMode = usePrevious(mode);
+  const theme = useTheme();
 
   const handleDismissal = (insightId: string) => {
     window.sendMessageToDigma({
@@ -50,6 +54,11 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
     });
   };
 
+  const handleViewModeChange = () => {
+    const newMode = mode === ViewMode.All ? ViewMode.OnlyHidden : ViewMode.All;
+    setMode(newMode);
+  };
+
   useEffect(() => {
     if (!previousScope || previousScope !== config.scope?.span) {
       setSearchInputValue("");
@@ -71,7 +80,8 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
     props.onQueryChange({
       page,
       sorting,
-      searchQuery: debouncedSearchInputValue
+      searchQuery: debouncedSearchInputValue,
+      showDismissed: mode === ViewMode.OnlyHidden
     });
   }, []);
 
@@ -79,12 +89,14 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
     if (
       (isNumber(previousPage) && previousPage !== page) ||
       (previousSorting && previousSorting !== sorting) ||
-      previousSearchQuery !== debouncedSearchInputValue
+      previousSearchQuery !== debouncedSearchInputValue ||
+      previousMode !== mode
     ) {
       props.onQueryChange({
         page,
         sorting,
-        searchQuery: debouncedSearchInputValue
+        searchQuery: debouncedSearchInputValue,
+        showDismissed: mode === ViewMode.OnlyHidden
       });
     }
   }, [
@@ -94,7 +106,9 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
     page,
     debouncedSearchInputValue,
     previousSearchQuery,
-    props.onQueryChange
+    props.onQueryChange,
+    mode,
+    previousMode
   ]);
 
   return (
@@ -126,13 +140,13 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
           default={defaultQuery.sorting}
         />
       </s.Toolbar>
-      {mode === ViewMode.Hidden && (
-        <s.Toolbar>
+      {mode === ViewMode.OnlyHidden && (
+        <s.InsightsViewModeToolbar>
           <Button
             buttonType="tertiary"
             label="Back to All Insights"
             icon={(props) => (
-              <ChevronIcon {...props} direction={Direction.RIGHT} />
+              <ChevronIcon {...props} direction={Direction.LEFT} />
             )}
             onClick={() => setMode(ViewMode.All)}
           />
@@ -140,7 +154,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
             <s.DismissedCount>{insights.length}</s.DismissedCount>
             dismissed insights
           </s.DismissedDescription>
-        </s.Toolbar>
+        </s.InsightsViewModeToolbar>
       )}
       <InsightsPage
         page={page}
@@ -152,24 +166,41 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
         onRefresh={props.onRefresh}
         onDismiss={handleDismissal}
       />
-      {totalCount > 0 && (
-        <s.Footer>
-          <s.FooterItemsCount>
-            Showing{" "}
-            <s.FooterPageItemsCount>
-              {pageStartItemNumber} - {pageEndItemNumber}
-            </s.FooterPageItemsCount>{" "}
-            of {totalCount}
-          </s.FooterItemsCount>
-          <Pagination
-            itemsCount={totalCount}
-            page={page}
-            pageSize={PAGE_SIZE}
-            onPageChange={setPage}
-            extendedNavigation={true}
-          />
-        </s.Footer>
-      )}
+      <s.Footer>
+        {totalCount > 0 && (
+          <>
+            <Pagination
+              itemsCount={totalCount}
+              page={page}
+              pageSize={PAGE_SIZE}
+              onPageChange={setPage}
+              extendedNavigation={true}
+            />
+            <s.FooterItemsCount>
+              Showing{" "}
+              <s.FooterPageItemsCount>
+                {pageStartItemNumber} - {pageEndItemNumber}
+              </s.FooterPageItemsCount>{" "}
+              of {totalCount}
+            </s.FooterItemsCount>
+          </>
+        )}
+        <Button
+          buttonType="tertiary"
+          icon={(props) => (
+            <GroupIcon
+              {...props}
+              crossOut={mode !== ViewMode.OnlyHidden}
+              color={
+                mode === ViewMode.OnlyHidden
+                  ? theme.colors.v3.icon.brandSecondary
+                  : props.color
+              }
+            />
+          )}
+          onClick={handleViewModeChange}
+        />
+      </s.Footer>
     </>
   );
 };
diff --git a/src/components/Insights/InsightsCatalog/styles.ts b/src/components/Insights/InsightsCatalog/styles.ts
index c959029a5..a7262006f 100644
--- a/src/components/Insights/InsightsCatalog/styles.ts
+++ b/src/components/Insights/InsightsCatalog/styles.ts
@@ -1,11 +1,15 @@
 import styled from "styled-components";
-import { subscriptRegularTypography } from "../../common/App/typographies";
+import {
+  caption1RegularTypography,
+  subscriptRegularTypography
+} from "../../common/App/typographies";
 
 export const Footer = styled.div`
   display: flex;
-  justify-content: space-between;
+  align-items: center;
   padding: 8px;
-  font-size: 14px;
+  gap: 8px;
+  ${caption1RegularTypography}
 `;
 
 export const FooterItemsCount = styled.span`
@@ -42,10 +46,16 @@ export const Toolbar = styled.div`
 
 export const DismissedDescription = styled.div`
   ${subscriptRegularTypography}
-
+  display: flex;
+  align-items: center;
   color: ${({ theme }) => theme.colors.v3.text.disabled};
 `;
 
 export const DismissedCount = styled.span`
   color: ${({ theme }) => theme.colors.v3.text.primary};
+  padding-right: 4px;
+`;
+
+export const InsightsViewModeToolbar = styled(Toolbar)`
+  padding: 0 8px;
 `;
diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index d540343e8..aad143393 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -10,7 +10,6 @@ import { RecalculateIcon } from "../../../common/icons/16px/RecalculateIcon";
 import { CrossIcon } from "../../../common/icons/CrossIcon";
 import { Button } from "../../../common/v3/Button";
 import { BaseButtonProps } from "../../../common/v3/Button/types";
-import { Card } from "../../../common/v3/Card";
 import { JiraButton } from "../../../common/v3/JiraButton";
 import { Tooltip } from "../../../common/v3/Tooltip";
 import { isSpanInsight } from "../../typeGuards";
@@ -105,6 +104,7 @@ export const InsightCard = (props: InsightCardProps) => {
         insightId: props.insight.id
       }
     });
+    props.onRefresh(props.insight.type);
   };
 
   const handleShowClick = () => {
@@ -114,6 +114,7 @@ export const InsightCard = (props: InsightCardProps) => {
         insightId: props.insight.id
       }
     });
+    props.onRefresh(props.insight.type);
   };
 
   const renderActions = () => {
@@ -225,7 +226,8 @@ export const InsightCard = (props: InsightCardProps) => {
       IS_NEW_TIME_LIMIT
     : false;
   return (
-    <Card
+    <s.InsightCard
+      $isHidden={props.insight.isDismissed}
       header={
         <InsightHeader
           spanInfo={
@@ -255,13 +257,13 @@ export const InsightCard = (props: InsightCardProps) => {
         <s.InsightFooter>
           {props.insight.isDismissible &&
             (props.insight.isDismissed ? (
-              <Button
+              <s.DismissButton
                 label={"Show"}
                 buttonType={"tertiary"}
                 onClick={handleShowClick}
               />
             ) : (
-              <Button
+              <s.DismissButton
                 icon={CrossIcon}
                 label={"Dismiss"}
                 buttonType={"tertiary"}
diff --git a/src/components/Insights/common/InsightCard/styles.ts b/src/components/Insights/common/InsightCard/styles.ts
index 9a55b1e94..d4a3b1710 100644
--- a/src/components/Insights/common/InsightCard/styles.ts
+++ b/src/components/Insights/common/InsightCard/styles.ts
@@ -1,4 +1,7 @@
 import styled from "styled-components";
+import { Button } from "../../../common/v3/Button";
+import { Card } from "../../../common/v3/Card";
+import { CardProps } from "../../../common/v3/Card/types";
 
 export const InsightFooter = styled.div`
   display: flex;
@@ -35,3 +38,15 @@ export const ContentContainer = styled.div`
   flex-direction: column;
   gap: 8px;
 `;
+
+export const InsightCard = styled(Card)<CardProps & { $isHidden: boolean }>`
+  ${({ $isHidden, theme }) => {
+    if ($isHidden) {
+      return `background: ${theme.colors.v3.surface.sidePanelHeader}`;
+    }
+  }}
+`;
+
+export const DismissButton = styled(Button)`
+  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+`;
diff --git a/src/components/Insights/common/useInsightsData.ts b/src/components/Insights/common/useInsightsData.ts
index 5eb9a07d6..8e1e68d29 100644
--- a/src/components/Insights/common/useInsightsData.ts
+++ b/src/components/Insights/common/useInsightsData.ts
@@ -28,7 +28,8 @@ const getData = (query: ScopedInsightsQuery, context: ConfigContextData) => {
     sortBy: query.sorting.criterion,
     sortOrder: query.sorting.order,
     page: query.page,
-    scopedSpanCodeObjectId: query.scopedSpanCodeObjectId
+    scopedSpanCodeObjectId: query.scopedSpanCodeObjectId,
+    showDismissed: query.showDismissed
   };
 
   window.sendMessageToDigma({
diff --git a/src/components/Insights/index.tsx b/src/components/Insights/index.tsx
index a826d5435..87c2bc054 100644
--- a/src/components/Insights/index.tsx
+++ b/src/components/Insights/index.tsx
@@ -69,7 +69,8 @@ const DEFAULT_QUERY = {
     criterion: SORTING_CRITERION.LATEST,
     order: SORTING_ORDER.DESC
   },
-  searchQuery: null
+  searchQuery: null,
+  showDismissed: false
 };
 
 const renderInsightTicket = (
diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts
index 9126f2cf1..0945fd68a 100644
--- a/src/components/Insights/types.ts
+++ b/src/components/Insights/types.ts
@@ -855,6 +855,7 @@ export interface InsightsQuery {
   page: number;
   sorting: Sorting;
   searchQuery: string | null;
+  showDismissed: boolean;
 }
 
 export interface ScopedInsightsQuery extends InsightsQuery {
diff --git a/src/components/common/App/types.ts b/src/components/common/App/types.ts
index 39264dbcd..88c47052b 100644
--- a/src/components/common/App/types.ts
+++ b/src/components/common/App/types.ts
@@ -62,6 +62,7 @@ export interface InsightsQuery {
   sortOrder: string;
   page: number;
   scopedSpanCodeObjectId?: string | null;
+  showDismissed: boolean;
 }
 
 export interface GlobalState {
diff --git a/src/components/common/icons/16px/GroupIcon.tsx b/src/components/common/icons/16px/GroupIcon.tsx
new file mode 100644
index 000000000..08bcda96d
--- /dev/null
+++ b/src/components/common/icons/16px/GroupIcon.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { IconProps } from "../types";
+
+const GroupIconComponent = (props: IconProps & { crossOut: boolean }) => {
+  const { size, color } = useIconProps(props);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 12"
+      fill="none"
+    >
+      <g stroke={color} strokeLinecap="round">
+        <path
+          strokeLinejoin="round"
+          d="M10.667 6.003a2.666 2.666 0 1 1-5.333 0 2.666 2.666 0 0 1 5.333 0Z"
+        />
+        <path
+          strokeLinejoin="round"
+          d="M1.333 6.001C2.4 2.88 4.891.668 8 .668c3.11 0 5.6 2.212 6.667 5.333C13.6 9.123 11.109 11.335 8 11.335c-3.11 0-5.6-2.212-6.667-5.334Z"
+        />
+        {props.crossOut && <path d="M2 11.335 14 .668" />}
+      </g>
+    </svg>
+  );
+};
+
+export const GroupIcon = React.memo(GroupIconComponent);
diff --git a/src/components/common/v3/Card/index.tsx b/src/components/common/v3/Card/index.tsx
index c867778d8..3058d3080 100644
--- a/src/components/common/v3/Card/index.tsx
+++ b/src/components/common/v3/Card/index.tsx
@@ -1,10 +1,13 @@
+import { ForwardedRef, forwardRef } from "react";
 import * as s from "./styles";
 import { CardProps } from "./types";
 
-export const Card = (props: CardProps) => (
-  <s.Container>
+const CardComponent = (props: CardProps, ref: ForwardedRef<HTMLDivElement>) => (
+  <s.Container ref={ref} className={props.className}>
     {props.header && <s.Header>{props.header}</s.Header>}
     <s.Content>{props.content}</s.Content>
     {props.footer && <s.Footer>{props.footer}</s.Footer>}
   </s.Container>
 );
+
+export const Card = forwardRef(CardComponent);
diff --git a/src/components/common/v3/Card/types.ts b/src/components/common/v3/Card/types.ts
index 9150ddb11..d6b507812 100644
--- a/src/components/common/v3/Card/types.ts
+++ b/src/components/common/v3/Card/types.ts
@@ -4,4 +4,5 @@ export interface CardProps {
   header?: ReactNode;
   content: ReactNode;
   footer?: ReactNode;
+  className?: string;
 }

From 5b9432981338bfab6c358b0685ba2f486b7fab12 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 6 Mar 2024 18:57:39 +0200
Subject: [PATCH 05/10] Added tracking events

---
 src/components/Assets/index.tsx                  |  6 ++++++
 src/components/Assets/tracking.ts                |  3 ++-
 .../Insights/InsightsCatalog/index.tsx           | 16 ++++++++--------
 src/components/Insights/InsightsPage/types.ts    |  1 -
 .../Insights/common/InsightCard/index.tsx        | 10 ++++++++++
 src/components/Insights/tracking.ts              |  5 ++++-
 6 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx
index 6bd88a3aa..901fda2a2 100644
--- a/src/components/Assets/index.tsx
+++ b/src/components/Assets/index.tsx
@@ -13,6 +13,7 @@ import {
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
 import { FeatureFlag } from "../../types";
+import { sendTrackingEvent } from "../../utils/sendTrackingEvent";
 import { ConfigContext } from "../common/App/ConfigContext";
 import { EmptyState } from "../common/EmptyState";
 import { SearchInput } from "../common/SearchInput";
@@ -28,6 +29,7 @@ import { NoDataMessage } from "./NoDataMessage";
 import { ServicesFilter } from "./ServicesFilter";
 import { actions } from "./actions";
 import * as s from "./styles";
+import { trackingEvents } from "./tracking";
 import { DataRefresher } from "./types";
 
 export const Assets = () => {
@@ -113,6 +115,10 @@ export const Assets = () => {
   };
 
   const handleRefresh = () => {
+    sendTrackingEvent(trackingEvents.REFRESH_LIST, {
+      listType: !selectedAssetTypeId ? "Asset type list" : "Asset list"
+    });
+
     const currentRefresher = !selectedAssetTypeId
       ? assetTypeListDataRefresher
       : assetListDataRefresher;
diff --git a/src/components/Assets/tracking.ts b/src/components/Assets/tracking.ts
index c55fc99fd..51baedf85 100644
--- a/src/components/Assets/tracking.ts
+++ b/src/components/Assets/tracking.ts
@@ -5,7 +5,8 @@ const TRACKING_PREFIX = "assets";
 export const trackingEvents = addPrefix(
   TRACKING_PREFIX,
   {
-    FILTER_APPLIED: "filter applied"
+    FILTER_APPLIED: "filter applied",
+    REFRESH_LIST: "refresh assets list"
   },
   " "
 );
diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
index 94686ae1d..cb49e1122 100644
--- a/src/components/Insights/InsightsCatalog/index.tsx
+++ b/src/components/Insights/InsightsCatalog/index.tsx
@@ -4,6 +4,7 @@ import { usePrevious } from "../../../hooks/usePrevious";
 import { useTheme } from "styled-components";
 import { useDebounce } from "../../../hooks/useDebounce";
 import { isNumber } from "../../../typeGuards/isNumber";
+import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { Pagination } from "../../common/Pagination";
 import { SearchInput } from "../../common/SearchInput";
@@ -16,7 +17,7 @@ import { Direction } from "../../common/icons/types";
 import { Button } from "../../common/v3/Button";
 import { Tooltip } from "../../common/v3/Tooltip";
 import { InsightsPage } from "../InsightsPage";
-import { actions } from "../actions";
+import { trackingEvents } from "../tracking";
 import * as s from "./styles";
 import { InsightsCatalogProps, SORTING_CRITERION } from "./types";
 
@@ -60,13 +61,13 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
     [page, sorting, debouncedSearchInputValue, props]
   );
 
-  const handleDismissal = (insightId: string) => {
-    window.sendMessageToDigma({
-      action: actions.DISMISS,
-      payload: insightId
+  const handleRefreshButtonClick = () => {
+    sendTrackingEvent(trackingEvents.REFRESH_LIST, {
+      viewMode: mode
     });
-  };
 
+    refreshData();
+  };
   const handleViewModeChange = () => {
     const newMode = mode === ViewMode.All ? ViewMode.OnlyHidden : ViewMode.All;
     setMode(newMode);
@@ -147,7 +148,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
           <s.RefreshButton
             buttonType="tertiary"
             icon={RefreshIcon}
-            onClick={() => refreshData()}
+            onClick={handleRefreshButtonClick}
           />
         </Tooltip>
       </s.Toolbar>
@@ -175,7 +176,6 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
         }
         onJiraTicketCreate={onJiraTicketCreate}
         onRefresh={props.onRefresh}
-        onDismiss={handleDismissal}
       />
       <s.Footer>
         {totalCount > 0 && (
diff --git a/src/components/Insights/InsightsPage/types.ts b/src/components/Insights/InsightsPage/types.ts
index 00c89d41f..a12a2b305 100644
--- a/src/components/Insights/InsightsPage/types.ts
+++ b/src/components/Insights/InsightsPage/types.ts
@@ -9,7 +9,6 @@ export interface InsightPageProps {
   ) => void;
   onRefresh: () => void;
   page: number;
-  onDismiss: (insightId: string) => void;
 }
 
 export interface isInsightJiraTicketHintShownPayload {
diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index bf4e109df..79eeeb7b7 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -17,7 +17,9 @@ import { InsightHeader } from "./InsightHeader";
 import * as s from "./styles";
 import { InsightCardProps } from "./types";
 
+import { sendTrackingEvent } from "../../../../utils/sendTrackingEvent";
 import { actions } from "../../actions";
+import { trackingEvents } from "../../tracking";
 import { DismissInsightPayload, UndismissInsightPayload } from "../../types";
 
 const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds
@@ -98,6 +100,10 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleDismissClick = () => {
+    sendTrackingEvent(trackingEvents.DISMISS, {
+      insightType: props.insight.type
+    });
+
     window.sendMessageToDigma<DismissInsightPayload>({
       action: actions.DISMISS,
       payload: {
@@ -108,6 +114,10 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleShowClick = () => {
+    sendTrackingEvent(trackingEvents.UNDISMISS, {
+      insightType: props.insight.type
+    });
+
     window.sendMessageToDigma<UndismissInsightPayload>({
       action: actions.UNDISMISS,
       payload: {
diff --git a/src/components/Insights/tracking.ts b/src/components/Insights/tracking.ts
index 819c1c92b..628c9d72e 100644
--- a/src/components/Insights/tracking.ts
+++ b/src/components/Insights/tracking.ts
@@ -10,7 +10,10 @@ export const trackingEvents = addPrefix(
       "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"
+    JIRA_TICKET_HINT_CLOSED: "jira ticket hint closed",
+    DISMISS: "insights dismissed",
+    UNDISMISS: "insights unDismissed",
+    REFRESH_LIST: "REFRESH_INSIGHT_LIST"
   },
   " "
 );

From 51980417bf84ce3b1bb26e83b2addef6b5d03fb6 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 6 Mar 2024 19:09:35 +0200
Subject: [PATCH 06/10] fix dependent props

---
 src/components/Insights/InsightsCatalog/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
index cb49e1122..28d4b6c80 100644
--- a/src/components/Insights/InsightsCatalog/index.tsx
+++ b/src/components/Insights/InsightsCatalog/index.tsx
@@ -58,7 +58,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
         searchQuery: debouncedSearchInputValue,
         showDismissed: mode === ViewMode.OnlyHidden
       }),
-    [page, sorting, debouncedSearchInputValue, props]
+    [page, sorting, debouncedSearchInputValue, props, mode]
   );
 
   const handleRefreshButtonClick = () => {
@@ -99,7 +99,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
       (isNumber(previousPage) && previousPage !== page) ||
       (previousSorting && previousSorting !== sorting) ||
       previousSearchQuery !== debouncedSearchInputValue ||
-      previousMode !== mode
+      (previousMode && previousMode !== mode)
     ) {
       refreshData();
     }

From 843b8539f0f70327a4b05e93446a66a08067f6a2 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 6 Mar 2024 19:28:27 +0200
Subject: [PATCH 07/10] fix

---
 src/components/Insights/InsightsCatalog/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
index 28d4b6c80..166bda9bd 100644
--- a/src/components/Insights/InsightsCatalog/index.tsx
+++ b/src/components/Insights/InsightsCatalog/index.tsx
@@ -99,7 +99,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
       (isNumber(previousPage) && previousPage !== page) ||
       (previousSorting && previousSorting !== sorting) ||
       previousSearchQuery !== debouncedSearchInputValue ||
-      (previousMode && previousMode !== mode)
+      previousMode !== mode
     ) {
       refreshData();
     }

From 593bda54c489d06095307b1d83d53ba33ccc63c6 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 6 Mar 2024 19:58:40 +0200
Subject: [PATCH 08/10] fix comments

---
 src/components/Assets/index.tsx                 |  2 +-
 src/components/Assets/tracking.ts               |  2 +-
 .../Insights/InsightsCatalog/index.tsx          | 17 +++++++++--------
 .../Insights/common/InsightCard/index.tsx       |  8 ++++----
 .../Insights/common/InsightCard/styles.ts       |  8 ++++----
 .../Insights/common/InsightCard/types.ts        |  5 +++++
 src/components/Insights/tracking.ts             |  6 +++---
 7 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx
index 901fda2a2..9554f79e8 100644
--- a/src/components/Assets/index.tsx
+++ b/src/components/Assets/index.tsx
@@ -115,7 +115,7 @@ export const Assets = () => {
   };
 
   const handleRefresh = () => {
-    sendTrackingEvent(trackingEvents.REFRESH_LIST, {
+    sendTrackingEvent(trackingEvents.REFRESH_BUTTON_CLICKED, {
       listType: !selectedAssetTypeId ? "Asset type list" : "Asset list"
     });
 
diff --git a/src/components/Assets/tracking.ts b/src/components/Assets/tracking.ts
index 51baedf85..35b00b901 100644
--- a/src/components/Assets/tracking.ts
+++ b/src/components/Assets/tracking.ts
@@ -6,7 +6,7 @@ export const trackingEvents = addPrefix(
   TRACKING_PREFIX,
   {
     FILTER_APPLIED: "filter applied",
-    REFRESH_LIST: "refresh assets list"
+    REFRESH_BUTTON_CLICKED: "refresh button clicked"
   },
   " "
 );
diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
index 166bda9bd..87994f52c 100644
--- a/src/components/Insights/InsightsCatalog/index.tsx
+++ b/src/components/Insights/InsightsCatalog/index.tsx
@@ -24,7 +24,7 @@ import { InsightsCatalogProps, SORTING_CRITERION } from "./types";
 const PAGE_SIZE = 10;
 enum ViewMode {
   All,
-  OnlyHidden
+  OnlyDismissed
 }
 
 export const InsightsCatalog = (props: InsightsCatalogProps) => {
@@ -56,20 +56,21 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
         page,
         sorting,
         searchQuery: debouncedSearchInputValue,
-        showDismissed: mode === ViewMode.OnlyHidden
+        showDismissed: mode === ViewMode.OnlyDismissed
       }),
     [page, sorting, debouncedSearchInputValue, props, mode]
   );
 
   const handleRefreshButtonClick = () => {
-    sendTrackingEvent(trackingEvents.REFRESH_LIST, {
+    sendTrackingEvent(trackingEvents.REFRESH_BUTTON_CLICKED, {
       viewMode: mode
     });
 
     refreshData();
   };
   const handleViewModeChange = () => {
-    const newMode = mode === ViewMode.All ? ViewMode.OnlyHidden : ViewMode.All;
+    const newMode =
+      mode === ViewMode.All ? ViewMode.OnlyDismissed : ViewMode.All;
     setMode(newMode);
   };
 
@@ -99,7 +100,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
       (isNumber(previousPage) && previousPage !== page) ||
       (previousSorting && previousSorting !== sorting) ||
       previousSearchQuery !== debouncedSearchInputValue ||
-      previousMode !== mode
+      (previousMode && previousMode !== mode)
     ) {
       refreshData();
     }
@@ -152,7 +153,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
           />
         </Tooltip>
       </s.Toolbar>
-      {mode === ViewMode.OnlyHidden && (
+      {mode === ViewMode.OnlyDismissed && (
         <s.InsightsViewModeToolbar>
           <Button
             buttonType="tertiary"
@@ -201,9 +202,9 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
           icon={(props) => (
             <GroupIcon
               {...props}
-              crossOut={mode !== ViewMode.OnlyHidden}
+              crossOut={mode !== ViewMode.OnlyDismissed}
               color={
-                mode === ViewMode.OnlyHidden
+                mode === ViewMode.OnlyDismissed
                   ? theme.colors.v3.icon.brandSecondary
                   : props.color
               }
diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index 79eeeb7b7..4a2edc615 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -100,7 +100,7 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleDismissClick = () => {
-    sendTrackingEvent(trackingEvents.DISMISS, {
+    sendTrackingEvent(trackingEvents.DISMISS_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
 
@@ -114,7 +114,7 @@ export const InsightCard = (props: InsightCardProps) => {
   };
 
   const handleShowClick = () => {
-    sendTrackingEvent(trackingEvents.UNDISMISS, {
+    sendTrackingEvent(trackingEvents.UNDISMISS_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
 
@@ -236,8 +236,8 @@ export const InsightCard = (props: InsightCardProps) => {
       IS_NEW_TIME_LIMIT
     : false;
   return (
-    <s.InsightCard
-      $isHidden={props.insight.isDismissed}
+    <s.StyledInsightCard
+      $isDismissed={props.insight.isDismissed}
       header={
         <InsightHeader
           spanInfo={
diff --git a/src/components/Insights/common/InsightCard/styles.ts b/src/components/Insights/common/InsightCard/styles.ts
index b7d5df118..1f21c4073 100644
--- a/src/components/Insights/common/InsightCard/styles.ts
+++ b/src/components/Insights/common/InsightCard/styles.ts
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { subscriptRegularTypography } from "../../../common/App/typographies";
 import { Button } from "../../../common/v3/Button";
 import { Card } from "../../../common/v3/Card";
-import { CardProps } from "../../../common/v3/Card/types";
+import { StyledInsightCardProps } from "./types";
 
 export const InsightFooter = styled.div`
   display: flex;
@@ -39,9 +39,9 @@ export const ContentContainer = styled.div`
   gap: 8px;
 `;
 
-export const InsightCard = styled(Card)<CardProps & { $isHidden: boolean }>`
-  ${({ $isHidden, theme }) => {
-    if ($isHidden) {
+export const StyledInsightCard = styled(Card)<StyledInsightCardProps>`
+  ${({ $isDismissed, theme }) => {
+    if ($isDismissed) {
       return `background: ${theme.colors.v3.surface.sidePanelHeader}`;
     }
   }}
diff --git a/src/components/Insights/common/InsightCard/types.ts b/src/components/Insights/common/InsightCard/types.ts
index 91bb0beaa..dad41237d 100644
--- a/src/components/Insights/common/InsightCard/types.ts
+++ b/src/components/Insights/common/InsightCard/types.ts
@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { InsightType } from "../../../../types";
+import { CardProps } from "../../../common/Card/types";
 import { GenericCodeObjectInsight } from "../../types";
 
 export interface InsightCardProps {
@@ -26,3 +27,7 @@ export interface InsightCardProps {
   onJiraButtonClick?: (spanCodeObjectId: string, event: string) => void;
   onGoToSpan: (spanCodeObjectId: string) => void;
 }
+
+export interface StyledInsightCardProps extends CardProps {
+  $isDismissed: boolean;
+}
diff --git a/src/components/Insights/tracking.ts b/src/components/Insights/tracking.ts
index 628c9d72e..64849f1be 100644
--- a/src/components/Insights/tracking.ts
+++ b/src/components/Insights/tracking.ts
@@ -11,9 +11,9 @@ export const trackingEvents = addPrefix(
     JIRA_TICKET_ATTACHMENT_DOWNLOAD_BUTTON_CLICKED:
       "jira ticket attachment download button clicked",
     JIRA_TICKET_HINT_CLOSED: "jira ticket hint closed",
-    DISMISS: "insights dismissed",
-    UNDISMISS: "insights unDismissed",
-    REFRESH_LIST: "REFRESH_INSIGHT_LIST"
+    DISMISS_BUTTON_CLICKED: "insight dismiss button clicked",
+    UNDISMISS_BUTTON_CLICKED: "insight show button clicked",
+    REFRESH_BUTTON_CLICKED: "refresh button clicked"
   },
   " "
 );

From c92634b6e5dabe200fe7ca6ac3ef7ec45da26a8b Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com>
Date: Wed, 6 Mar 2024 19:09:03 +0100
Subject: [PATCH 09/10] Update src/components/Assets/index.tsx

---
 src/components/Assets/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx
index 9554f79e8..c1a382160 100644
--- a/src/components/Assets/index.tsx
+++ b/src/components/Assets/index.tsx
@@ -116,7 +116,7 @@ export const Assets = () => {
 
   const handleRefresh = () => {
     sendTrackingEvent(trackingEvents.REFRESH_BUTTON_CLICKED, {
-      listType: !selectedAssetTypeId ? "Asset type list" : "Asset list"
+      view: !selectedAssetTypeId ? "asset categories" : "assets"
     });
 
     const currentRefresher = !selectedAssetTypeId

From 66a7402ee7871a59046fa14f3027bbb137b5b14d Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 6 Mar 2024 20:09:05 +0200
Subject: [PATCH 10/10] fixed comments

---
 src/components/Assets/index.tsx                   | 2 +-
 src/components/Insights/InsightsCatalog/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx
index 9554f79e8..c1a382160 100644
--- a/src/components/Assets/index.tsx
+++ b/src/components/Assets/index.tsx
@@ -116,7 +116,7 @@ export const Assets = () => {
 
   const handleRefresh = () => {
     sendTrackingEvent(trackingEvents.REFRESH_BUTTON_CLICKED, {
-      listType: !selectedAssetTypeId ? "Asset type list" : "Asset list"
+      view: !selectedAssetTypeId ? "asset categories" : "assets"
     });
 
     const currentRefresher = !selectedAssetTypeId
diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
index 87994f52c..f36353dad 100644
--- a/src/components/Insights/InsightsCatalog/index.tsx
+++ b/src/components/Insights/InsightsCatalog/index.tsx
@@ -100,7 +100,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
       (isNumber(previousPage) && previousPage !== page) ||
       (previousSorting && previousSorting !== sorting) ||
       previousSearchQuery !== debouncedSearchInputValue ||
-      (previousMode && previousMode !== mode)
+      previousMode !== mode
     ) {
       refreshData();
     }