Add dismissed dialog.

.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"]
 }

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",
+  SET_DISMISS_RESPONSE: "SET_DISMISS_RESPONSE",
+  SET_UNDISMISS_RESPONSE: "SET_UNDISMISS_RESPONSE"
 });

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

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

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

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

@@ -31,3 +31,15 @@ export interface InsightCardProps {
 export interface StyledInsightCardProps extends CardProps {
   $isDismissed?: boolean;
 }
+
+export interface DismissResponsePayload {
+  insightId: string;
+  status: "success" | "failure";
+  error?: string;
+}
+
+export interface UndismissResponsePayload {
+  insightId: string;
+  status: "success" | "failure";
+  error?: string;
+}

src/components/Insights/common/InsightCard/useDismissalHandler.ts

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { dispatcher } from "../../../../dispatcher";
+import { actions } from "../../actions";
+import { DismissInsightPayload, UndismissInsightPayload } 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 DismissResponsePayload).insightId) {
+        setIsLoading(false);
+      }
+    };
+
+    dispatcher.addActionListener(actions.SET_DISMISS_RESPONSE, handleDismissed);
+
+    return () => {
+      dispatcher.removeActionListener(
+        actions.SET_DISMISS_RESPONSE,
+        handleDismissed
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleUndismissed = (data: any) => {
+      if (insightId === (data as UndismissResponsePayload).insightId) {
+        setIsLoading(false);
+      }
+    };
+
+    dispatcher.addActionListener(
+      actions.SET_UNDISMISS_RESPONSE,
+      handleUndismissed
+    );
+
+    return () => {
+      dispatcher.removeActionListener(
+        actions.SET_UNDISMISS_RESPONSE,
+        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);
+    }
+  };
+};