Add Clear data action in Recent activity (#883)

Add Clear data action in Recent activity
Fix icons
Update analytics
Add a blurred background for the Impact Waiting data card

src/api/index.ts

@@ -40,6 +40,12 @@ export const initializeDigmaMessageListener = (
 export const sendMessage = <T>(
   message: DigmaOutgoingMessageData<T>
 ): string | undefined => {
+  console.debug(
+    `Digma message to sent: ${message.action}
+  Raw message: %O`,
+    message
+  );
+
   switch (platform) {
     case "Web":
       sendMessageToWebService(message);

src/components/Highlights/Impact/index.tsx

@@ -20,7 +20,7 @@ import { Section } from "../common/Section";
 import { Table } from "../common/Table";
 import { TableText } from "../common/TableText";
 import { handleEnvironmentTableRowClick } from "../handleEnvironmentTableRowClick";
-import { trackingEvents } from "../tracking";
+import { trackingEventNames, trackingEvents } from "../tracking";
 import * as s from "./styles";
 import { EnvironmentImpactData } from "./types";
 import { useImpactData } from "./useImpactData";
@@ -146,7 +146,10 @@ export const Impact = () => {
   const renderCard = () => {
     const handleLearnMoreButtonClick = () => {
       sendUserActionTrackingEvent(
-        trackingEvents.IMPACT_CARD_LEARN_MORE_BUTTON_CLICKED
+        trackingEventNames.CARD_LEARN_MORE_BUTTON_CLICKED,
+        {
+          Source: "Impact analysis"
+        }
       );
       openURLInDefaultBrowser(PERFORMANCE_IMPACT_DOCUMENTATION_URL);
     };
@@ -176,6 +179,7 @@ export const Impact = () => {
           icon={RefreshIcon}
           title={"Waiting for more data"}
           text={"Impact analysis is in progress"}
+          blurredContent={renderImpactCard(demoData)}
         />
       );
     }

src/components/Highlights/Scaling/index.tsx

@@ -22,7 +22,7 @@ import { Section } from "../common/Section";
 import { Table } from "../common/Table";
 import { TableText } from "../common/TableText";
 import { handleEnvironmentTableRowClick } from "../handleEnvironmentTableRowClick";
-import { trackingEvents } from "../tracking";
+import { trackingEventNames, trackingEvents } from "../tracking";
 import * as s from "./styles";
 import { EnvironmentScalingData } from "./types";
 import { useScalingData } from "./useScalingData";
@@ -152,7 +152,10 @@ export const Scaling = () => {
   const renderCard = () => {
     const handleLearnMoreButtonClick = () => {
       sendUserActionTrackingEvent(
-        trackingEvents.SCALING_CARD_LEARN_MORE_BUTTON_CLICKED
+        trackingEventNames.CARD_LEARN_MORE_BUTTON_CLICKED,
+        {
+          Source: "Scaling Issue"
+        }
       );
 
       openURLInDefaultBrowser(SCALING_ISSUE_DOCUMENTATION_URL);

src/components/Highlights/tracking.ts

@@ -2,21 +2,20 @@ import { addPrefix } from "../../utils/addPrefix";
 
 const TRACKING_PREFIX = "highlights";
 
+export const trackingEventNames = {
+  VIEW_ALL_LINK_CLICKED: "view all link clicked",
+  TOP_ISSUES_CARD_ASSET_LINK_CLICKED: "top issues card asset link clicked",
+  TOP_ISSUES_CARD_TABLE_ROW_CLICKED: "top issues card table row clicked",
+  PERFORMANCE_CARD_TABLE_ROW_CLICKED: "performance card table row clicked",
+  IMPACT_CARD_TABLE_ROW_CLICKED: "impact card table row clicked",
+  CARD_LEARN_MORE_BUTTON_CLICKED: "Learn more clicked",
+  SCALING_CARD_TABLE_ROW_CLICKED: "scaling card table row clicked",
+  SCALING_CARD_VIEW_ANALYTICS_BUTTON_CLICKED:
+    "scaling card view analytics button clicked"
+};
+
 export const trackingEvents = addPrefix(
   TRACKING_PREFIX,
-  {
-    VIEW_ALL_LINK_CLICKED: "view all link clicked",
-    TOP_ISSUES_CARD_ASSET_LINK_CLICKED: "top issues card asset link clicked",
-    TOP_ISSUES_CARD_TABLE_ROW_CLICKED: "top issues card table row clicked",
-    PERFORMANCE_CARD_TABLE_ROW_CLICKED: "performance card table row clicked",
-    IMPACT_CARD_TABLE_ROW_CLICKED: "impact card table row clicked",
-    IMPACT_CARD_LEARN_MORE_BUTTON_CLICKED:
-      "impact card learn more button clicked",
-    SCALING_CARD_TABLE_ROW_CLICKED: "scaling card table row clicked",
-    SCALING_CARD_LEARN_MORE_BUTTON_CLICKED:
-      "scaling card learn more button clicked",
-    SCALING_CARD_VIEW_ANALYTICS_BUTTON_CLICKED:
-      "scaling card view analytics button clicked"
-  },
+  trackingEventNames,
   " "
 );

src/components/RecentActivity/ConfirmationDialog/ConfirmationDialog.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ConfirmationDialog } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof ConfirmationDialog> = {
+  title: "Recent Activity/ConfirmationDialog",
+  component: ConfirmationDialog,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const DeleteEnvironment: Story = {
+  args: {
+    title: "Delete environment",
+    message: "Are you sure that you want to delete this environment?",
+    confirmButtonText: "Delete"
+  }
+};
+
+export const ClearEnvironmentData: Story = {
+  args: {
+    title: "Clear Data?",
+    message:
+      "Are you sure you want to clear the data from this environment? This action cannot be undone.",
+    confirmButtonText: "Clear Data"
+  }
+};

src/components/RecentActivity/ConfirmationDialog/index.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from "react";
+import { isString } from "../../../typeGuards/isString";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
+import { Button } from "../../common/Button";
+import { CrossIcon } from "../../common/icons/CrossIcon";
+import { trackingEvents } from "../tracking";
+import * as s from "./styles";
+import { ConfirmationDialogProps } from "./types";
+
+export const ConfirmationDialog = ({
+  title,
+  message,
+  confirmButtonText,
+  onConfirm,
+  onCancel,
+  trackingData
+}: ConfirmationDialogProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleConfirmButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.CONFIRMATION_DIALOG_CONFIRM_BUTTON_CLICKED,
+      trackingData
+    );
+    onConfirm();
+  };
+
+  const handleCancelButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.CONFIRMATION_DIALOG_CANCEL_BUTTON_CLICKED,
+      trackingData
+    );
+    onCancel();
+  };
+
+  const handleCloseButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.CONFIRMATION_DIALOG_CLOSE_BUTTON_CLICKED,
+      trackingData
+    );
+    onCancel();
+  };
+
+  useEffect(() => {
+    containerRef.current?.focus();
+  }, []);
+
+  return (
+    <s.Container ref={containerRef} tabIndex={0}>
+      <s.Header>
+        <s.Title>{title}</s.Title>
+        <s.CloseButton onClick={handleCloseButtonClick}>
+          <CrossIcon color={"currentColor"} size={12} />
+        </s.CloseButton>
+      </s.Header>
+      {isString(message) && <span>{message}</span>}
+      <s.ButtonsContainer>
+        <Button buttonType={"secondary"} onClick={handleCancelButtonClick}>
+          Cancel
+        </Button>
+        <Button onClick={handleConfirmButtonClick}>
+          {confirmButtonText || "Confirm"}
+        </Button>
+      </s.ButtonsContainer>
+    </s.Container>
+  );
+};

src/components/RecentActivity/ConfirmationDialog/styles.ts

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import {
+  bodySemiboldTypography,
+  footnoteRegularTypography
+} from "../../common/App/typographies";
+
+export const Container = styled.div`
+  ${footnoteRegularTypography}
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 4px;
+  width: 339px;
+  height: fit-content;
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const Title = styled.span`
+  ${bodySemiboldTypography}
+
+  text-transform: capitalize;
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
+
+export const ButtonsContainer = styled.div`
+  display: flex;
+  padding-top: 8px;
+  gap: 8px;
+  justify-content: flex-end;
+`;
+
+export const CloseButton = styled.button`
+  display: flex;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;

src/components/RecentActivity/ConfirmationDialog/types.ts

@@ -0,0 +1,9 @@
+export interface ConfirmationDialogProps {
+  title: string;
+  message?: string;
+  confirmButtonText?: string;
+  trackingPrefix?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  trackingData?: Record<string, any>;
+}