From e9927ab043418038596da615173129a1fa5a2400 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Thu, 7 Mar 2024 14:41:38 +0200
Subject: [PATCH 1/3] add dismissed dialog

---
 .vscode/settings.json                         |  3 +-
 src/components/Insights/actions.ts            |  4 +-
 .../InsightCard/InsightCard.stories.tsx       | 20 ++++
 .../Insights/common/InsightCard/index.tsx     | 99 ++++++++++++-------
 .../Insights/common/InsightCard/styles.ts     | 19 ++++
 .../Insights/common/InsightCard/types.ts      |  8 ++
 .../common/InsightCard/useDismissalHandler.ts | 59 +++++++++++
 7 files changed, 173 insertions(+), 39 deletions(-)
 create mode 100644 src/components/Insights/common/InsightCard/useDismissalHandler.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 765ecd323..0c01357f2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,6 @@
     "source.organizeImports": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "stylelint.validate": ["typescript"]
+  "stylelint.validate": ["typescript"],
+  "cSpell.words": ["Digma", "UNDISMISS"]
 }
diff --git a/src/components/Insights/actions.ts b/src/components/Insights/actions.ts
index 5b9d35536..a98ea9169 100644
--- a/src/components/Insights/actions.ts
+++ b/src/components/Insights/actions.ts
@@ -31,5 +31,7 @@ export const actions = addPrefix(ACTION_PREFIX, {
   SET_DATA_LIST: "SET_DATA_LIST",
   GET_DATA_LIST: "GET_DATA_LIST",
   DISMISS: "DISMISS",
-  UNDISMISS: "UNDISMISS"
+  UNDISMISS: "UNDISMISS",
+  DISMISSED: "DISMISSED",
+  UNDISMISSED: "UNDISMISSED"
 });
diff --git a/src/components/Insights/common/InsightCard/InsightCard.stories.tsx b/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
index de790f6ed..9483ed449 100644
--- a/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
+++ b/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
@@ -49,3 +49,23 @@ export const LinkedJiraTicket: Story = {
     onOpenHistogram: undefined
   }
 };
+
+export const Dismissed: Story = {
+  args: {
+    isAsync: true,
+    insight: {
+      ...mockedEndpointNPlusOneInsight,
+      criticality: 0.9,
+      isDismissed: true
+    },
+    jiraTicketInfo: {
+      ticketLink: "some",
+      spanCodeObjectId: "test",
+      isHintEnabled: false
+    },
+    onGoToLive: undefined,
+    onPin: undefined,
+    onGoToTrace: undefined,
+    onOpenHistogram: undefined
+  }
+};
diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index 0c818d99b..69cb6b49e 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { isString } from "../../../../typeGuards/isString";
 import { formatTimeDistance } from "../../../../utils/formatTimeDistance";
 import { TraceIcon } from "../../../common/icons/12px/TraceIcon";
@@ -17,15 +17,27 @@ import { InsightHeader } from "./InsightHeader";
 import * as s from "./styles";
 import { InsightCardProps } from "./types";
 
+import { usePrevious } from "../../../../hooks/usePrevious";
 import { sendTrackingEvent } from "../../../../utils/sendTrackingEvent";
-import { actions } from "../../actions";
+import { Spinner } from "../../../Navigation/CodeButtonMenu/Spinner";
 import { trackingEvents } from "../../tracking";
-import { DismissInsightPayload, UndismissInsightPayload } from "../../types";
+import { useDismissalHandler } from "./useDismissalHandler";
 
 const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds
 
 export const InsightCard = (props: InsightCardProps) => {
   const [isRecalculatingStarted, setIsRecalculatingStarted] = useState(false);
+  const [isDismissConfirmationOpened, setDismissConfirmationOpened] =
+    useState(false);
+  const { isLoading, dismiss, show } = useDismissalHandler(props.insight.id);
+  const previousLoading = usePrevious(isLoading);
+
+  useEffect(() => {
+    if (previousLoading && !isLoading) {
+      props.onRefresh(props.insight.type);
+    }
+  }, [isLoading, previousLoading, props.onRefresh]);
+
   const handleRefreshLinkClick = () => {
     props.onRefresh(props.insight.type);
   };
@@ -103,28 +115,15 @@ export const InsightCard = (props: InsightCardProps) => {
     sendTrackingEvent(trackingEvents.DISMISS_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
-
-    window.sendMessageToDigma<DismissInsightPayload>({
-      action: actions.DISMISS,
-      payload: {
-        insightId: props.insight.id
-      }
-    });
-    props.onRefresh(props.insight.type);
+    dismiss();
+    setDismissConfirmationOpened(false);
   };
 
   const handleShowClick = () => {
     sendTrackingEvent(trackingEvents.SHOW_BUTTON_CLICKED, {
       insightType: props.insight.type
     });
-
-    window.sendMessageToDigma<UndismissInsightPayload>({
-      action: actions.UNDISMISS,
-      payload: {
-        insightId: props.insight.id
-      }
-    });
-    props.onRefresh(props.insight.type);
+    show();
   };
 
   const renderActions = () => {
@@ -264,24 +263,50 @@ export const InsightCard = (props: InsightCardProps) => {
         </s.ContentContainer>
       }
       footer={
-        <s.InsightFooter>
-          {props.insight.isDismissible &&
-            (props.insight.isDismissed ? (
-              <s.DismissButton
-                label={"Show"}
-                buttonType={"tertiary"}
-                onClick={handleShowClick}
-              />
-            ) : (
-              <s.DismissButton
-                icon={CrossIcon}
-                label={"Dismiss"}
-                buttonType={"tertiary"}
-                onClick={handleDismissClick}
-              />
-            ))}
-          {renderActions()}
-        </s.InsightFooter>
+        <>
+          {!isDismissConfirmationOpened ? (
+            <s.InsightFooter>
+              {props.insight.isDismissible && (
+                <s.ButtonContainer>
+                  {props.insight.isDismissed ? (
+                    <s.DismissButton
+                      label={isLoading ? "Showing" : "Show"}
+                      buttonType={"tertiary"}
+                      isDisabled={isLoading}
+                      onClick={handleShowClick}
+                    />
+                  ) : (
+                    <s.DismissButton
+                      icon={CrossIcon}
+                      isDisabled={isLoading}
+                      label={isLoading ? "Dismissing" : "Dismiss"}
+                      buttonType={"tertiary"}
+                      onClick={() => setDismissConfirmationOpened(true)}
+                    />
+                  )}
+                  {isLoading && <Spinner />}
+                </s.ButtonContainer>
+              )}
+              {renderActions()}
+            </s.InsightFooter>
+          ) : (
+            <s.DismissDialog>
+              Dismiss insight?
+              <s.DismissDialogActions>
+                <Button
+                  label="No"
+                  buttonType="primary"
+                  onClick={() => setDismissConfirmationOpened(false)}
+                />
+                <Button
+                  label="Yes, dismiss"
+                  buttonType="secondary"
+                  onClick={handleDismissClick}
+                />
+              </s.DismissDialogActions>
+            </s.DismissDialog>
+          )}
+        </>
       }
     />
   );
diff --git a/src/components/Insights/common/InsightCard/styles.ts b/src/components/Insights/common/InsightCard/styles.ts
index 8505c5239..7b5845e53 100644
--- a/src/components/Insights/common/InsightCard/styles.ts
+++ b/src/components/Insights/common/InsightCard/styles.ts
@@ -51,3 +51,22 @@ export const StyledInsightCard = styled(Card)<StyledInsightCardProps>`
 export const DismissButton = styled(Button)`
   color: ${({ theme }) => theme.colors.v3.icon.tertiary};
 `;
+
+export const DismissDialog = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  align-items: center;
+  margin: -8px;
+  background: ${({ theme }) => theme.colors.v3.surface.sidePanelHeader};
+`;
+
+export const DismissDialogActions = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
diff --git a/src/components/Insights/common/InsightCard/types.ts b/src/components/Insights/common/InsightCard/types.ts
index 39f5d3e9d..7228c9a9a 100644
--- a/src/components/Insights/common/InsightCard/types.ts
+++ b/src/components/Insights/common/InsightCard/types.ts
@@ -31,3 +31,11 @@ export interface InsightCardProps {
 export interface StyledInsightCardProps extends CardProps {
   $isDismissed?: boolean;
 }
+
+export interface DismissedPayload {
+  insightId: string;
+}
+
+export interface UndismissedPayload {
+  insightId: string;
+}
diff --git a/src/components/Insights/common/InsightCard/useDismissalHandler.ts b/src/components/Insights/common/InsightCard/useDismissalHandler.ts
new file mode 100644
index 000000000..dcd47ab7f
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/useDismissalHandler.ts
@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import { dispatcher } from "../../../../dispatcher";
+import { actions } from "../../actions";
+import { DismissInsightPayload, UndismissInsightPayload } from "../../types";
+import { DismissedPayload, UndismissedPayload } from "./types";
+
+export const useDismissalHandler = (insightId: string) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const handleDismissed = (data: any) => {
+      if (insightId === (data as DismissedPayload).insightId) {
+        setIsLoading(false);
+      }
+    };
+
+    dispatcher.addActionListener(actions.DISMISSED, handleDismissed);
+
+    return () => {
+      dispatcher.removeActionListener(actions.DISMISSED, handleDismissed);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleUndismissed = (data: any) => {
+      if (insightId === (data as UndismissedPayload).insightId) {
+        setIsLoading(false);
+      }
+    };
+
+    dispatcher.addActionListener(actions.UNDISMISSED, handleUndismissed);
+
+    return () => {
+      dispatcher.removeActionListener(actions.UNDISMISSED, handleUndismissed);
+    };
+  }, []);
+
+  return {
+    isLoading,
+    dismiss: () => {
+      window.sendMessageToDigma<DismissInsightPayload>({
+        action: actions.DISMISS,
+        payload: {
+          insightId
+        }
+      });
+      setIsLoading(true);
+    },
+    show: () => {
+      window.sendMessageToDigma<UndismissInsightPayload>({
+        action: actions.UNDISMISS,
+        payload: {
+          insightId: insightId
+        }
+      });
+      setIsLoading(true);
+    }
+  };
+};

From deb810c1bb225ee55c9b2e59bae13b3170a47088 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Thu, 7 Mar 2024 15:02:00 +0200
Subject: [PATCH 2/3] fix comments

---
 src/components/Insights/actions.ts              |  4 ++--
 .../Insights/common/InsightCard/types.ts        |  4 ++++
 .../common/InsightCard/useDismissalHandler.ts   | 17 +++++++++++++----
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/Insights/actions.ts b/src/components/Insights/actions.ts
index a98ea9169..6cf2567ca 100644
--- a/src/components/Insights/actions.ts
+++ b/src/components/Insights/actions.ts
@@ -32,6 +32,6 @@ export const actions = addPrefix(ACTION_PREFIX, {
   GET_DATA_LIST: "GET_DATA_LIST",
   DISMISS: "DISMISS",
   UNDISMISS: "UNDISMISS",
-  DISMISSED: "DISMISSED",
-  UNDISMISSED: "UNDISMISSED"
+  SET_DISMISS_RESPONSE: "SET_DISMISS_RESPONSE",
+  SET_UNDISMISS_RESPONSE: "SET_UNDISMISS_RESPONSE"
 });
diff --git a/src/components/Insights/common/InsightCard/types.ts b/src/components/Insights/common/InsightCard/types.ts
index 7228c9a9a..b26d79684 100644
--- a/src/components/Insights/common/InsightCard/types.ts
+++ b/src/components/Insights/common/InsightCard/types.ts
@@ -34,8 +34,12 @@ export interface StyledInsightCardProps extends CardProps {
 
 export interface DismissedPayload {
   insightId: string;
+  status: "success" | "failure";
+  error?: string;
 }
 
 export interface UndismissedPayload {
   insightId: string;
+  status: "success" | "failure";
+  error?: string;
 }
diff --git a/src/components/Insights/common/InsightCard/useDismissalHandler.ts b/src/components/Insights/common/InsightCard/useDismissalHandler.ts
index dcd47ab7f..7ba4cbeb0 100644
--- a/src/components/Insights/common/InsightCard/useDismissalHandler.ts
+++ b/src/components/Insights/common/InsightCard/useDismissalHandler.ts
@@ -14,10 +14,13 @@ export const useDismissalHandler = (insightId: string) => {
       }
     };
 
-    dispatcher.addActionListener(actions.DISMISSED, handleDismissed);
+    dispatcher.addActionListener(actions.SET_DISMISS_RESPONSE, handleDismissed);
 
     return () => {
-      dispatcher.removeActionListener(actions.DISMISSED, handleDismissed);
+      dispatcher.removeActionListener(
+        actions.SET_DISMISS_RESPONSE,
+        handleDismissed
+      );
     };
   }, []);
 
@@ -28,10 +31,16 @@ export const useDismissalHandler = (insightId: string) => {
       }
     };
 
-    dispatcher.addActionListener(actions.UNDISMISSED, handleUndismissed);
+    dispatcher.addActionListener(
+      actions.SET_UNDISMISS_RESPONSE,
+      handleUndismissed
+    );
 
     return () => {
-      dispatcher.removeActionListener(actions.UNDISMISSED, handleUndismissed);
+      dispatcher.removeActionListener(
+        actions.SET_UNDISMISS_RESPONSE,
+        handleUndismissed
+      );
     };
   }, []);
 

From a22904df4358fd1153ab2c4f3ef82c7ea7f97e5d Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Thu, 7 Mar 2024 15:02:55 +0200
Subject: [PATCH 3/3] fix type name

---
 src/components/Insights/common/InsightCard/types.ts         | 4 ++--
 .../Insights/common/InsightCard/useDismissalHandler.ts      | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Insights/common/InsightCard/types.ts b/src/components/Insights/common/InsightCard/types.ts
index b26d79684..c23122bd5 100644
--- a/src/components/Insights/common/InsightCard/types.ts
+++ b/src/components/Insights/common/InsightCard/types.ts
@@ -32,13 +32,13 @@ export interface StyledInsightCardProps extends CardProps {
   $isDismissed?: boolean;
 }
 
-export interface DismissedPayload {
+export interface DismissResponsePayload {
   insightId: string;
   status: "success" | "failure";
   error?: string;
 }
 
-export interface UndismissedPayload {
+export interface UndismissResponsePayload {
   insightId: string;
   status: "success" | "failure";
   error?: string;
diff --git a/src/components/Insights/common/InsightCard/useDismissalHandler.ts b/src/components/Insights/common/InsightCard/useDismissalHandler.ts
index 7ba4cbeb0..87939e1a6 100644
--- a/src/components/Insights/common/InsightCard/useDismissalHandler.ts
+++ b/src/components/Insights/common/InsightCard/useDismissalHandler.ts
@@ -2,14 +2,14 @@ import { useEffect, useState } from "react";
 import { dispatcher } from "../../../../dispatcher";
 import { actions } from "../../actions";
 import { DismissInsightPayload, UndismissInsightPayload } from "../../types";
-import { DismissedPayload, UndismissedPayload } from "./types";
+import { DismissResponsePayload, UndismissResponsePayload } from "./types";
 
 export const useDismissalHandler = (insightId: string) => {
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const handleDismissed = (data: any) => {
-      if (insightId === (data as DismissedPayload).insightId) {
+      if (insightId === (data as DismissResponsePayload).insightId) {
         setIsLoading(false);
       }
     };
@@ -26,7 +26,7 @@ export const useDismissalHandler = (insightId: string) => {
 
   useEffect(() => {
     const handleUndismissed = (data: any) => {
-      if (insightId === (data as UndismissedPayload).insightId) {
+      if (insightId === (data as UndismissResponsePayload).insightId) {
         setIsLoading(false);
       }
     };