Merge pull request #14656 from overleaf/mj-table-generator-analytics

[visual] Add analytics to table generator

GitOrigin-RevId: ab5e9c9a870b76d2d51c74190f386b1de5153bb1

services/web/frontend/js/features/source-editor/components/table-generator/analytics.ts

@@ -0,0 +1,6 @@
+import { EditorView } from '@codemirror/view'
+import { emitCommandEvent } from '../../extensions/toolbar/utils/analytics'
+
+export function emitTableGeneratorEvent(view: EditorView, command: string) {
+  emitCommandEvent(view, 'codemirror-table-generator-event', command)
+}

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar-button.tsx

@@ -4,6 +4,7 @@ import { memo, useCallback } from 'react'
 import Tooltip from '../../../../../shared/components/tooltip'
 import MaterialIcon from '../../../../../shared/components/material-icon'
 import { useCodeMirrorViewContext } from '../../codemirror-editor'
+import { emitTableGeneratorEvent } from '../analytics'
 
 export const ToolbarButton = memo<{
   id: string
@@ -34,11 +35,12 @@ export const ToolbarButton = memo<{
   const handleClick = useCallback(
     event => {
       if (command) {
+        emitTableGeneratorEvent(view, id)
         event.preventDefault()
         command(view)
       }
     },
-    [command, view]
+    [command, view, id]
   )
 
   const button = (

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar-dropdown.tsx

@@ -1,9 +1,11 @@
-import { FC, useRef } from 'react'
+import { ButtonHTMLAttributes, FC, useCallback, useRef } from 'react'
 import useDropdown from '../../../../../shared/hooks/use-dropdown'
 import { Overlay, Popover } from 'react-bootstrap'
 import MaterialIcon from '../../../../../shared/components/material-icon'
 import Tooltip from '../../../../../shared/components/tooltip'
 import { useTabularContext } from '../contexts/tabular-context'
+import { emitTableGeneratorEvent } from '../analytics'
+import { useCodeMirrorViewContext } from '../../codemirror-editor'
 
 export const ToolbarDropdown: FC<{
   id: string
@@ -102,3 +104,27 @@ export const ToolbarDropdown: FC<{
     </>
   )
 }
+
+export const ToolbarDropdownItem: FC<
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+    command: () => void
+    id: string
+  }
+> = ({ children, command, id, ...props }) => {
+  const view = useCodeMirrorViewContext()
+  const onClick = useCallback(() => {
+    emitTableGeneratorEvent(view, id)
+    command()
+  }, [view, command, id])
+  return (
+    <button
+      className="ol-cm-toolbar-menu-item"
+      role="menuitem"
+      type="button"
+      {...props}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar.tsx

@@ -2,7 +2,7 @@ import { memo, useMemo } from 'react'
 import { useSelectionContext } from '../contexts/selection-context'
 import { ToolbarButton } from './toolbar-button'
 import { ToolbarButtonMenu } from './toolbar-button-menu'
-import { ToolbarDropdown } from './toolbar-dropdown'
+import { ToolbarDropdown, ToolbarDropdownItem } from './toolbar-dropdown'
 import MaterialIcon from '../../../../../shared/components/material-icon'
 import {
   BorderTheme,
@@ -68,46 +68,38 @@ export const Toolbar = memo(function Toolbar() {
         label={captionLabel}
         disabled={!tableEnvironment}
       >
-        <button
-          className="ol-cm-toolbar-menu-item"
-          role="menuitem"
-          type="button"
-          onClick={() => {
+        <ToolbarDropdownItem
+          id="table-generator-caption-none"
+          command={() => {
             removeCaption(view, tableEnvironment)
           }}
         >
           No caption
-        </button>
-        <button
-          className="ol-cm-toolbar-menu-item"
-          role="menuitem"
-          type="button"
-          onClick={() => {
+        </ToolbarDropdownItem>
+        <ToolbarDropdownItem
+          id="table-generator-caption-above"
+          command={() => {
             moveCaption(view, positions, 'above', tableEnvironment)
           }}
         >
           Caption above
-        </button>
-        <button
-          className="ol-cm-toolbar-menu-item"
-          role="menuitem"
-          type="button"
-          onClick={() => {
+        </ToolbarDropdownItem>
+        <ToolbarDropdownItem
+          id="table-generator-caption-below"
+          command={() => {
             moveCaption(view, positions, 'below', tableEnvironment)
           }}
         >
           Caption below
-        </button>
+        </ToolbarDropdownItem>
       </ToolbarDropdown>
       <ToolbarDropdown
         id="table-generator-borders-dropdown"
         label={borderDropdownLabel}
       >
-        <button
-          className="ol-cm-toolbar-menu-item"
-          role="menuitem"
-          type="button"
-          onClick={() => {
+        <ToolbarDropdownItem
+          id="table-generator-borders-fully-bordered"
+          command={() => {
             setBorders(
               view,
               BorderTheme.FULLY_BORDERED,
@@ -119,12 +111,10 @@ export const Toolbar = memo(function Toolbar() {
         >
           <MaterialIcon type="border_all" />
           <span className="table-generator-button-label">All borders</span>
-        </button>
-        <button
-          className="ol-cm-toolbar-menu-item"
-          role="menuitem"
-          type="button"
-          onClick={() => {
+        </ToolbarDropdownItem>
+        <ToolbarDropdownItem
+          id="table-generator-borders-no-borders"
+          command={() => {
             setBorders(
               view,
               BorderTheme.NO_BORDERS,
@@ -136,7 +126,7 @@ export const Toolbar = memo(function Toolbar() {
         >
           <MaterialIcon type="border_clear" />
           <span className="table-generator-button-label">No borders</span>
-        </button>
+        </ToolbarDropdownItem>
         <div className="table-generator-border-options-coming-soon">
           <div className="info-icon">
             <MaterialIcon type="info" />
@@ -231,11 +221,9 @@ export const Toolbar = memo(function Toolbar() {
           tooltip="Insert"
           disabled={!selection}
         >
-          <button
-            className="ol-cm-toolbar-menu-item"
-            role="menuitem"
-            type="button"
-            onClick={() => {
+          <ToolbarDropdownItem
+            id="table-generator-insert-column-left"
+            command={() => {
               setSelection(
                 insertColumn(view, selection, positions, false, table)
               )
@@ -246,12 +234,10 @@ export const Toolbar = memo(function Toolbar() {
                 ? 'Insert column left'
                 : `Insert ${columnsToInsert} columns left`}
             </span>
-          </button>
-          <button
-            className="ol-cm-toolbar-menu-item"
-            role="menuitem"
-            type="button"
-            onClick={() => {
+          </ToolbarDropdownItem>
+          <ToolbarDropdownItem
+            id="table-generator-insert-column-right"
+            command={() => {
               setSelection(
                 insertColumn(view, selection, positions, true, table)
               )
@@ -262,13 +248,11 @@ export const Toolbar = memo(function Toolbar() {
                 ? 'Insert column right'
                 : `Insert ${columnsToInsert} columns right`}
             </span>
-          </button>
+          </ToolbarDropdownItem>
           <hr />
-          <button
-            className="ol-cm-toolbar-menu-item"
-            role="menuitem"
-            type="button"
-            onClick={() => {
+          <ToolbarDropdownItem
+            id="table-generator-insert-row-above"
+            command={() => {
               setSelection(
                 insertRow(
                   view,
@@ -286,12 +270,10 @@ export const Toolbar = memo(function Toolbar() {
                 ? 'Insert row above'
                 : `Insert ${rowsToInsert} rows above`}
             </span>
-          </button>
-          <button
-            className="ol-cm-toolbar-menu-item"
-            role="menuitem"
-            type="button"
-            onClick={() => {
+          </ToolbarDropdownItem>
+          <ToolbarDropdownItem
+            id="table-generator-insert-row-below"
+            command={() => {
               setSelection(
                 insertRow(
                   view,
@@ -309,7 +291,7 @@ export const Toolbar = memo(function Toolbar() {
                 ? 'Insert row below'
                 : `Insert ${rowsToInsert} rows below`}
             </span>
-          </button>
+          </ToolbarDropdownItem>
         </ToolbarDropdown>
       </div>
       <div className="table-generator-button-group">

services/web/frontend/js/features/source-editor/components/toolbar/table-inserter-dropdown.tsx

@@ -7,6 +7,7 @@ import { useCodeMirrorViewContext } from '../codemirror-editor'
 import Tooltip from '../../../../shared/components/tooltip'
 import MaterialIcon from '../../../../shared/components/material-icon'
 import classNames from 'classnames'
+import { emitToolbarEvent } from '../../extensions/toolbar/utils/analytics'
 
 export const TableInserterDropdown: FC = () => {
   const { t } = useTranslation()
@@ -18,6 +19,7 @@ export const TableInserterDropdown: FC = () => {
     (sizeX: number, sizeY: number) => {
       onToggle(false)
       commands.insertTable(view, sizeX, sizeY)
+      emitToolbarEvent(view, 'table-generator-insert-table')
       view.focus()
     },
     [view, onToggle]