Add some frontend view/click events (pinterest#1118)

* Add frontend event logging

* add some view events

* fix one element type

* refactor

* add search resutls view events

* comment

components/DataDoc/DataDoc.tsx

@@ -16,6 +16,7 @@ import {
     ISearchAndReplaceHandles,
     SearchAndReplace,
 } from 'components/SearchAndReplace/SearchAndReplace';
+import { ComponentType, ElementType } from 'const/analytics';
 import {
     CELL_TYPE,
     DataCellUpdateFields,
@@ -27,6 +28,7 @@ import {
 } from 'const/datadoc';
 import { ISearchOptions, ISearchResult } from 'const/searchAndReplace';
 import { DataDocContext, IDataDocContextType } from 'context/DataDoc';
+import { trackClick, trackView } from 'lib/analytics';
 import {
     deserializeCopyCommand,
     serializeCopyCommand,
@@ -339,6 +341,11 @@ class DataDocComponent extends React.PureComponent<IProps, IState> {
 
     @bind
     public async pasteCellAt(pasteIndex: number) {
+        trackClick({
+            component: ComponentType.DATADOC_PAGE,
+            element: ElementType.PASTE_CELL_BUTTON,
+        });
+
         let clipboardContent = null;
         try {
             if (navigator.clipboard.readText) {
@@ -378,6 +385,12 @@ class DataDocComponent extends React.PureComponent<IProps, IState> {
 
     @bind
     public copyCellAt(index: number, cut: boolean) {
+        trackClick({
+            component: ComponentType.DATADOC_PAGE,
+            element: cut
+                ? ElementType.CUT_CELL_BUTTON
+                : ElementType.COPY_CELL_BUTTON,
+        });
         copy(
             serializeCopyCommand({
                 cellId: this.props.dataDoc.cells[index],
@@ -399,6 +412,10 @@ class DataDocComponent extends React.PureComponent<IProps, IState> {
             if (numberOfCells > 0) {
                 const shouldConfirm = !cellIsEmpty;
                 const deleteCell = async () => {
+                    trackClick({
+                        component: ComponentType.DATADOC_PAGE,
+                        element: ElementType.DELETE_CELL_BUTTON,
+                    });
                     try {
                         await dataDocActions.deleteDataDocCell(docId, cell.id);
                     } catch (e) {
@@ -450,7 +467,11 @@ class DataDocComponent extends React.PureComponent<IProps, IState> {
             header: 'Clone DataDoc?',
             message:
                 'You will be redirected to the new Data Doc after cloning.',
-            onConfirm: () =>
+            onConfirm: () => {
+                trackClick({
+                    component: ComponentType.DATADOC_PAGE,
+                    element: ElementType.CLONE_DATADOC_BUTTON,
+                });
                 toast.promise(
                     cloneDataDoc(id).then((dataDoc) =>
                         history.push(
@@ -462,7 +483,8 @@ class DataDocComponent extends React.PureComponent<IProps, IState> {
                         success: 'Clone Success!',
                         error: 'Cloning failed.',
                     }
-                ),
+                );
+            },
             cancelColor: 'default',
             confirmIcon: 'Copy',
         });
@@ -783,6 +805,7 @@ class DataDocComponent extends React.PureComponent<IProps, IState> {
     }
 
     public componentDidMount() {
+        trackView(ComponentType.DATADOC_PAGE);
         this.autoFocusCell({}, this.props);
         this.openDataDoc(this.props.docId);
         this.publishDataDocTitle(this.props.dataDoc?.title);

components/DataDoc/DataDocCellControl.tsx

@@ -2,8 +2,10 @@ import clsx from 'clsx';
 import React, { useCallback } from 'react';
 import toast from 'react-hot-toast';
 
+import { ComponentType, ElementType } from 'const/analytics';
 import { IDataCellMeta } from 'const/datadoc';
 import { useBoundFunc } from 'hooks/useBoundFunction';
+import { trackClick } from 'lib/analytics';
 import { copy, sleep, titleize } from 'lib/utils';
 import { getShortcutSymbols, KeyMap } from 'lib/utils/keyboard';
 import { AsyncButton } from 'ui/AsyncButton/AsyncButton';
@@ -76,13 +78,21 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
         React.useState(false);
 
     const handleToggleDefaultCollapsed = React.useCallback(() => {
+        trackClick({
+            component: ComponentType.DATADOC_PAGE,
+            element: ElementType.COLLAPSE_CELL_BUTTON,
+        });
         setAnimateDefaultChange(true);
         Promise.all([sleep(500), toggleDefaultCollapsed()]).then(() =>
             setAnimateDefaultChange(false)
         );
     }, [toggleDefaultCollapsed]);
 
     const handleShare = useCallback(() => {
+        trackClick({
+            component: ComponentType.DATADOC_PAGE,
+            element: ElementType.SHARE_CELL_BUTTON,
+        });
         copy(shareUrl);
         toast('Url Copied!');
     }, [shareUrl]);
@@ -269,7 +279,16 @@ const InsertCellButtons: React.FC<{
     index: number;
 }> = React.memo(({ insertCellAt, index }) => {
     const handleInsertcell = useCallback(
-        (cellType: string) => insertCellAt(index, cellType, null, null),
+        (cellType: string) => {
+            trackClick({
+                component: ComponentType.DATADOC_PAGE,
+                element: ElementType.INSERT_CELL_BUTTON,
+                aux: {
+                    type: cellType,
+                },
+            });
+            return insertCellAt(index, cellType, null, null);
+        },
         [insertCellAt, index]
     );
 

components/DataDocBoardsButton/DataDocBoardsButton.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 
+import { DataDocBoardsModal } from 'components/DataDocBoardsModal/DataDocBoardsModal';
+import { ComponentType, ElementType } from 'const/analytics';
 import { IDataDoc } from 'const/datadoc';
+import { trackClick } from 'lib/analytics';
 import { IconButton } from 'ui/Button/IconButton';
-import { DataDocBoardsModal } from 'components/DataDocBoardsModal/DataDocBoardsModal';
 
 interface IProps {
     dataDoc: IDataDoc;
@@ -17,7 +19,13 @@ export const DataDocBoardsButton: React.FunctionComponent<IProps> = ({
         <div>
             <IconButton
                 icon="List"
-                onClick={() => setShowBoards(true)}
+                onClick={() => {
+                    trackClick({
+                        component: ComponentType.DATADOC_PAGE,
+                        element: ElementType.LISTS_BUTTON,
+                    });
+                    setShowBoards(true);
+                }}
                 tooltip="View Lists"
                 tooltipPos="left"
                 title="Lists"

components/DataDocCell/DataDocCell.tsx

@@ -8,6 +8,7 @@ import { DataDocChartCell } from 'components/DataDocChartCell/DataDocChartCell';
 import { DataDocQueryCell } from 'components/DataDocQueryCell/DataDocQueryCell';
 import { DataDocTextCell } from 'components/DataDocTextCell/DataDocTextCell';
 import { UserAvatar } from 'components/UserBadge/UserAvatar';
+import { ComponentType, ElementType } from 'const/analytics';
 import {
     DataCellUpdateFields,
     IDataCell,
@@ -16,6 +17,7 @@ import {
 import { DataDocContext } from 'context/DataDoc';
 import { useMakeSelector } from 'hooks/redux/useMakeSelector';
 import { useBoundFunc } from 'hooks/useBoundFunction';
+import { trackClick } from 'lib/analytics';
 import { getShareUrl } from 'lib/data-doc/data-doc-utils';
 import * as dataDocActions from 'redux/dataDoc/action';
 import * as dataDocSelectors from 'redux/dataDoc/selector';
@@ -113,6 +115,10 @@ export const DataDocCell: React.FunctionComponent<IDataDocCellProps> =
 
             const handleMoveCell = React.useCallback(
                 (fromIndex: number, toIndex: number) => {
+                    trackClick({
+                        component: ComponentType.DATADOC_PAGE,
+                        element: ElementType.MOVE_CELL_BUTTON,
+                    });
                     dataDocActions.moveDataDocCell(docId, fromIndex, toIndex);
                 },
                 [docId]

components/DataDocDAGExporter/DataDocDAGExporterButton.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { ComponentType, ElementType } from 'const/analytics';
+import { trackClick } from 'lib/analytics';
 import { IconButton } from 'ui/Button/IconButton';
 import { Modal } from 'ui/Modal/Modal';
 
@@ -18,7 +20,13 @@ export const DataDocDAGExporterButton: React.FunctionComponent<IProps> = ({
         <>
             <IconButton
                 icon="Network"
-                onClick={() => setShowModal(true)}
+                onClick={() => {
+                    trackClick({
+                        component: ComponentType.DATADOC_PAGE,
+                        element: ElementType.DAG_EXPORTER_BUTTON,
+                    });
+                    setShowModal(true);
+                }}
                 tooltip="DAG Exporter"
                 tooltipPos="left"
                 title="Exporter"

components/DataDocQueryCell/DataDocQueryCell.tsx

@@ -21,8 +21,10 @@ import { QuerySnippetInsertionModal } from 'components/QuerySnippetInsertionModa
 import { TemplatedQueryView } from 'components/TemplateQueryView/TemplatedQueryView';
 import { TranspileQueryModal } from 'components/TranspileQueryModal/TranspileQueryModal';
 import { UDFForm } from 'components/UDFForm/UDFForm';
+import { ComponentType, ElementType } from 'const/analytics';
 import { IDataQueryCellMeta, TDataDocMetaVariables } from 'const/datadoc';
 import type { IQueryEngine, IQueryTranspiler } from 'const/queryEngine';
+import { trackClick } from 'lib/analytics';
 import CodeMirror from 'lib/codemirror';
 import { createSQLLinter } from 'lib/codemirror/codemirror-lint';
 import {
@@ -102,6 +104,7 @@ interface IState {
     showQuerySnippetModal: boolean;
     showRenderedTemplateModal: boolean;
     showUDFModal: boolean;
+    hasLintError: boolean;
 
     transpilerConfig?: {
         toEngine: IQueryEngine;
@@ -125,6 +128,7 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
             showQuerySnippetModal: false,
             showRenderedTemplateModal: false,
             showUDFModal: false,
+            hasLintError: false,
         };
     }
 
@@ -260,6 +264,13 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
         }
     }
 
+    @bind
+    public onLintCompletion(hasError: boolean) {
+        this.setState({
+            hasLintError: hasError,
+        });
+    }
+
     @decorate(memoizeOne)
     public createGetLintAnnotations(
         engineId: number,
@@ -384,6 +395,13 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
 
     @bind
     public async onRunButtonClick() {
+        trackClick({
+            component: ComponentType.DATADOC_QUERY_CELL,
+            element: ElementType.RUN_QUERY_BUTTON,
+            aux: {
+                lintError: this.state.hasLintError,
+            },
+        });
         return runQuery(
             await this.getTransformedQuery(),
             this.engineId,
@@ -400,6 +418,11 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
 
     @bind
     public formatQuery(options = {}) {
+        trackClick({
+            component: ComponentType.DATADOC_QUERY_CELL,
+            element: ElementType.FORMAT_BUTTON,
+            aux: options,
+        });
         if (this.queryEditorRef.current) {
             this.queryEditorRef.current.formatQuery(options);
         }
@@ -729,6 +752,7 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
                               )
                             : null
                     }
+                    onLintCompletion={this.onLintCompletion}
                 />
                 {openSnippetDOM}
             </div>

components/DataDocRightSidebar/DataDocRightSidebar.tsx

@@ -5,9 +5,11 @@ import { DataDocBoardsButton } from 'components/DataDocBoardsButton/DataDocBoard
 import { DataDocDAGExporterButton } from 'components/DataDocDAGExporter/DataDocDAGExporterButton';
 import { DataDocTemplateButton } from 'components/DataDocTemplateButton/DataDocTemplateButton';
 import { DataDocUIGuide } from 'components/UIGuide/DataDocUIGuide';
+import { ComponentType, ElementType } from 'const/analytics';
 import { IDataDoc, IDataDocMeta } from 'const/datadoc';
 import { useAnnouncements } from 'hooks/redux/useAnnouncements';
 import { useScrollToTop } from 'hooks/ui/useScrollToTop';
+import { trackClick } from 'lib/analytics';
 import { fetchDAGExporters } from 'redux/dataDoc/action';
 import { IStoreState } from 'redux/store/types';
 import { IconButton } from 'ui/Button/IconButton';
@@ -87,7 +89,13 @@ export const DataDocRightSidebar: React.FunctionComponent<IProps> = ({
                 <IconButton
                     icon="ArrowUp"
                     className={showScrollToTop ? '' : 'hide-button'}
-                    onClick={scrollToTop}
+                    onClick={() => {
+                        trackClick({
+                            component: ComponentType.DATADOC_PAGE,
+                            element: ElementType.GO_TO_TOP_BUTTON,
+                        });
+                        scrollToTop();
+                    }}
                 />
                 <IconButton
                     icon={defaultCollapse ? 'Maximize2' : 'Minimize2'}
@@ -97,7 +105,13 @@ export const DataDocRightSidebar: React.FunctionComponent<IProps> = ({
                             : 'Collapse query cells'
                     }
                     tooltipPos="left"
-                    onClick={onCollapse}
+                    onClick={() => {
+                        trackClick({
+                            component: ComponentType.DATADOC_PAGE,
+                            element: ElementType.COLLAPSE_DATADOC_BUTTON,
+                        });
+                        onCollapse();
+                    }}
                 />
                 <DataDocUIGuide />
                 <IconButton

components/DataDocRightSidebar/DataDocRunAllButton.tsx

@@ -1,8 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
 import toast from 'react-hot-toast';
 
+import { ComponentType, ElementType } from 'const/analytics';
 import { useQueryCells } from 'hooks/dataDoc/useQueryCells';
 import { useMakeSelector } from 'hooks/redux/useMakeSelector';
+import { trackClick } from 'lib/analytics';
 import { sendConfirm } from 'lib/querybookUI';
 import { makeLatestQueryExecutionsSelector } from 'redux/queryExecutions/selector';
 import { DataDocResource } from 'resource/dataDoc';
@@ -49,6 +51,10 @@ export const DataDocRunAllButton: React.FunctionComponent<IProps> = ({
             header: 'Run All Cells',
             message: ConfirmMessageDOM(),
             onConfirm: () => {
+                trackClick({
+                    component: ComponentType.DATADOC_PAGE,
+                    element: ElementType.RUN_ALL_CELLS_BUTTON,
+                });
                 toast.promise(DataDocResource.run(docId), {
                     loading: null,
                     success: 'DataDoc execution started!',

components/DataDocRightSidebar/DataDocScheduleButton.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { ComponentType, ElementType } from 'const/analytics';
+import { trackClick } from 'lib/analytics';
 import { IconButton } from 'ui/Button/IconButton';
 
 import { DataDocScheduleModal } from './DataDocScheduleModal';
@@ -19,7 +21,13 @@ export const DataDocScheduleButton: React.FunctionComponent<IProps> = ({
         <div>
             <IconButton
                 icon="Clock"
-                onClick={() => setShowModal(true)}
+                onClick={() => {
+                    trackClick({
+                        component: ComponentType.DATADOC_PAGE,
+                        element: ElementType.SCHEDULE_DATADOC_BUTTON,
+                    });
+                    setShowModal(true);
+                }}
                 tooltip="Schedule DataDoc"
                 tooltipPos="left"
                 title="Schedule"

components/DataDocRightSidebar/DeleteDataDocButton.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
 
+import { ComponentType, ElementType } from 'const/analytics';
 import { TooltipDirection } from 'const/tooltip';
+import { trackClick } from 'lib/analytics';
 import { sendConfirm } from 'lib/querybookUI';
 import { navigateWithinEnv } from 'lib/utils/query-string';
 import * as dataDocActions from 'redux/dataDoc/action';
@@ -27,6 +29,10 @@ export const DeleteDataDocButton: React.FunctionComponent<
                 header: 'Delete DataDoc?',
                 message: 'This action is irreversible.',
                 onConfirm: () => {
+                    trackClick({
+                        component: ComponentType.DATADOC_PAGE,
+                        element: ElementType.DELETE_DATADOC_BUTTON,
+                    });
                     toast.promise(
                         dispatch(dataDocActions.deleteDataDoc(docId)).then(() =>
                             navigateWithinEnv('/datadoc/')