SDA-2571 Added correct BI events to screen annotate

spec/annotateArea.spec.tsx

@@ -126,13 +126,58 @@ describe('<AnnotateArea/>', () => {
         }]);
     });
 
-    it('should send capture_taken BI event on component mount', () => {
+    it('should send annotate_erased if clicked on path with tool eraser', () => {
         const spy = jest.spyOn(analyticsHandler.analytics, 'track');
-        const expectedValue = { action_type: 'annotate_added', element: 'ScreenSnippet' };
+        const pathProps = {
+            paths: [{
+                points: [{ x: 0, y: 0 }],
+                shouldShow: true,
+                strokeWidth: 5,
+                color: 'rgba(233, 0, 0, 0.64)',
+                key: 'path0',
+            }],
+            highlightColor: 'rgba(233, 0, 0, 0.64)',
+            penColor: 'rgba(38, 196, 58, 1)',
+            onChange: jest.fn(),
+            imageDimensions: { width: 800, height: 800 },
+            annotateAreaDimensions: { width: 800, height: 800 },
+            chosenTool: Tool.eraser,
+            screenSnippetPath: 'very-nice-path',
+        };
+        const wrapper = mount(<AnnotateArea {...pathProps} />);
+        const path = wrapper.find('[data-testid="path0"]');
+        const expectedValue = { action_type: 'annotate_erased', element: 'screen_capture_annotate' };
+        path.simulate('click');
+        expect(spy).toBeCalledWith(expectedValue);
+    });
+
+    it('should send annotate_added_pen event when drawn with pen', () => {
+        const spy = jest.spyOn(analyticsHandler.analytics, 'track');
+        const expectedValue = { action_type: 'annotate_added_pen', element: 'screen_capture_annotate' };
         const wrapper = mount(<AnnotateArea {...defaultProps} />);
         const area = wrapper.find('[data-testid="annotate-area"]');
         area.simulate('mousedown', { pageX: 2, pageY: 49 });
         area.simulate('mouseup');
         expect(spy).toBeCalledWith(expectedValue);
     });
+
+    it('should send annotate_added_highlight event when drawn with highlight', () => {
+        const highlightProps = {
+            paths: [],
+            highlightColor: 'rgba(233, 0, 0, 0.64)',
+            penColor: 'rgba(38, 196, 58, 1)',
+            onChange: jest.fn(),
+            imageDimensions: { width: 800, height: 800 },
+            annotateAreaDimensions: { width: 800, height: 800 },
+            chosenTool: Tool.highlight,
+            screenSnippetPath: 'very-nice-path',
+        };
+        const spy = jest.spyOn(analyticsHandler.analytics, 'track');
+        const expectedValue = { action_type: 'annotate_added_highlight', element: 'screen_capture_annotate' };
+        const wrapper = mount(<AnnotateArea {...highlightProps} />);
+        const area = wrapper.find('[data-testid="annotate-area"]');
+        area.simulate('mousedown', { pageX: 2, pageY: 49 });
+        area.simulate('mouseup');
+        expect(spy).toBeCalledWith(expectedValue);
+    });
 });

spec/snippingTool.spec.tsx

@@ -22,16 +22,16 @@ describe('Snipping Tool', () => {
     expect(spy).toBeCalledWith('snipping-tool-data', expect.any(Function));
   });
 
-  it('should send capture_taken BI event on component mount', () => {
+  it('should send screenshot_taken BI event on component mount', () => {
     const spy = jest.spyOn(analyticsHandler.analytics, 'track');
-    const expectedValue = { action_type: 'capture_taken', element: 'ScreenSnippet' };
+    const expectedValue = { action_type: 'screenshot_taken', element: 'screen_capture_annotate' };
     mount(React.createElement(SnippingTool));
     expect(spy).toBeCalledWith(expectedValue);
   });
 
   it('should send capture_sent BI event when clicking done', async () => {
     const spy = jest.spyOn(analyticsHandler.analytics, 'track');
-    const expectedValue = { action_type: 'capture_sent', element: 'ScreenSnippet' };
+    const expectedValue = { action_type: 'annotate_done', element: 'screen_capture_annotate' };
     const wrapper = mount(React.createElement(SnippingTool));
     wrapper.find('[data-testid="done-button"]').simulate('click');
     wrapper.update();
@@ -39,6 +39,16 @@ describe('Snipping Tool', () => {
     expect(spy).toBeCalledWith(expectedValue);
   });
 
+  it('should send annotate_cleared BI event when clicking clear', async () => {
+    const spy = jest.spyOn(analyticsHandler.analytics, 'track');
+    const expectedValue = { action_type: 'annotate_cleared', element: 'screen_capture_annotate' };
+    const wrapper = mount(React.createElement(SnippingTool));
+    wrapper.find('[data-testid="clear-button"]').simulate('click');
+    wrapper.update();
+    await waitForPromisesToResolve();
+    expect(spy).toBeCalledWith(expectedValue);
+  });
+
   it('should render pen color picker when clicked on pen', () => {
     const wrapper = shallow(React.createElement(SnippingTool));
     wrapper.find('[data-testid="pen-button"]').simulate('click');

src/app/analytics-handler.ts

@@ -14,9 +14,12 @@ export enum MenuActionTypes {
 }
 
 export enum ScreenSnippetActionTypes {
-    CAPTURE_TAKEN = 'capture_taken',
+    SCREENSHOT_TAKEN = 'screenshot_taken',
-    ANNOTATE_ADDED = 'annotate_added',
+    ANNOTATE_ADDED_PEN = 'annotate_added_pen',
-    CAPTURE_SENT = 'capture_sent',
+    ANNOTATE_ADDED_HIGHLIGHT = 'annotate_added_highlight',
+    ANNOTATE_DONE = 'annotate_done',
+    ANNOTATE_CLEARED = 'annotate_cleared',
+    ANNOTATE_ERASED = 'annotate_erased',
 }
 
 export enum AnalyticsActions {
@@ -26,7 +29,7 @@ export enum AnalyticsActions {
 
 export enum AnalyticsElements {
     MENU = 'Menu',
-    SCREEN_SNIPPET = 'ScreenSnippet',
+    SCREEN_CAPTURE_ANNOTATE = 'screen_capture_annotate',
 }
 
 const MAX_EVENT_QUEUE_LENGTH = 50;

src/renderer/components/annotate-area.tsx

@@ -50,6 +50,10 @@ const AnnotateArea: React.FunctionComponent<IAnnotateAreaProps> = ({
       updPaths.map((p) => {
         if (p && p.key === key) {
           p.shouldShow = false;
+          analytics.track({
+            element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE,
+            action_type: ScreenSnippetActionTypes.ANNOTATE_ERASED,
+          });
         }
         return p;
       });
@@ -227,10 +231,18 @@ const AnnotateArea: React.FunctionComponent<IAnnotateAreaProps> = ({
 
   const handleMouseUp = () => {
     stopDrawing();
+    if (chosenTool === Tool.pen) {
       analytics.track({
-      element: AnalyticsElements.SCREEN_SNIPPET,
+        element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE,
-      action_type: ScreenSnippetActionTypes.ANNOTATE_ADDED,
+        action_type: ScreenSnippetActionTypes.ANNOTATE_ADDED_PEN,
       });
+    }
+    if (chosenTool === Tool.highlight) {
+      analytics.track({
+        element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE,
+        action_type: ScreenSnippetActionTypes.ANNOTATE_ADDED_HIGHLIGHT,
+      });
+    }
   };
 
   const getAnnotateWrapperStyle = () => {

src/renderer/components/snipping-tool.tsx

@@ -92,8 +92,8 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({ existingPat
   useLayoutEffect(() => {
   ipcRenderer.once('snipping-tool-data', getSnipImageData);
     analytics.track({
-      element: AnalyticsElements.SCREEN_SNIPPET,
+      element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE,
-      action_type: ScreenSnippetActionTypes.CAPTURE_TAKEN,
+      action_type: ScreenSnippetActionTypes.SCREENSHOT_TAKEN,
     });
   return () => {
     ipcRenderer.removeListener('snipping-tool-data', getSnipImageData);
@@ -165,6 +165,10 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({ existingPat
       return p;
     });
     setPaths(updPaths);
+    analytics.track({
+      element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE,
+      action_type: ScreenSnippetActionTypes.ANNOTATE_CLEARED,
+    });
   };
 
   // Utility functions
@@ -199,8 +203,8 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({ existingPat
     const svg = document.getElementById('annotate-area');
     const mergedImageData = svg ? await svgAsPngUri(document.getElementById('annotate-area'), {}) : 'MERGE_FAIL';
     analytics.track({
-      element: AnalyticsElements.SCREEN_SNIPPET,
+      element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE,
-      action_type: ScreenSnippetActionTypes.CAPTURE_SENT,
+      action_type: ScreenSnippetActionTypes.ANNOTATE_DONE,
     });
     ipcRenderer.send('upload-snippet', { screenSnippetPath, mergedImageData });
   };