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..6cf2567ca 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", + SET_DISMISS_RESPONSE: "SET_DISMISS_RESPONSE", + SET_UNDISMISS_RESPONSE: "SET_UNDISMISS_RESPONSE" }); 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({ - 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({ - 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) => { } footer={ - - {props.insight.isDismissible && - (props.insight.isDismissed ? ( - - ) : ( - - ))} - {renderActions()} - + <> + {!isDismissConfirmationOpened ? ( + + {props.insight.isDismissible && ( + + {props.insight.isDismissed ? ( + + ) : ( + setDismissConfirmationOpened(true)} + /> + )} + {isLoading && } + + )} + {renderActions()} + + ) : ( + + Dismiss insight? + +