Merge pull request #340 from liam-hq/add-cliver-logging

📈 Add cliVer parameter to log event functions and components

frontend/.changeset/eighty-bottles-hope.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+📈 Add cliVer parameter to log event functions and component.s

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/CopyLinkButton/CopyLinkButton.tsx

@@ -1,4 +1,5 @@
 import { clickLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import {
   Button,
   TooltipContent,
@@ -12,6 +13,7 @@ import { type FC, useCallback } from 'react'
 
 export const CopyLinkButton: FC = () => {
   const toast = useToast()
+  const { cliVersion } = useCliVersion()
   const handleCopyUrl = useCallback(() => {
     navigator.clipboard
       .writeText(window.location.href)
@@ -31,8 +33,9 @@ export const CopyLinkButton: FC = () => {
 
     clickLogEvent({
       element: 'copyLinkButton',
+      cliVer: cliVersion.version,
     })
-  }, [toast])
+  }, [toast, cliVersion.version])
 
   return (
     <TooltipProvider>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx

@@ -1,5 +1,6 @@
 import { selectTableLogEvent } from '@/features/gtm/utils'
 import { repositionTableLogEvent } from '@/features/gtm/utils/repositionTableLogEvent'
+import { useCliVersion } from '@/providers'
 import { updateActiveTableName, useUserEditingActiveStore } from '@/stores'
 import type { Relationships } from '@liam-hq/db-structure'
 import {
@@ -82,10 +83,18 @@ export const ERDContentInner: FC<Props> = ({
   useSyncHighlightsActiveTableChange()
   useSyncHiddenNodesChange()
 
-  const handleNodeClick = useCallback((tableId: string) => {
-    updateActiveTableName(tableId)
-    selectTableLogEvent({ ref: 'mainArea', tableId })
-  }, [])
+  const { cliVersion } = useCliVersion()
+  const handleNodeClick = useCallback(
+    (tableId: string) => {
+      updateActiveTableName(tableId)
+      selectTableLogEvent({
+        ref: 'mainArea',
+        tableId,
+        cliVer: cliVersion.version,
+      })
+    },
+    [cliVersion.version],
+  )
 
   const handlePaneClick = useCallback(() => {
     updateActiveTableName(undefined)
@@ -124,10 +133,14 @@ export const ERDContentInner: FC<Props> = ({
       const operationId = `id_${new Date().getTime()}`
       for (const node of nodes) {
         const tableId = node.id
-        repositionTableLogEvent({ tableId, operationId })
+        repositionTableLogEvent({
+          tableId,
+          operationId,
+          cliVer: cliVersion.version,
+        })
       }
     },
-    [],
+    [cliVersion.version],
   )
 
   const panOnDrag = [1, 2]

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx

@@ -1,5 +1,6 @@
 import { convertDBStructureToNodes } from '@/components/ERDRenderer/convertDBStructureToNodes'
 import { openRelatedTablesLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import {
   replaceHiddenNodeIds,
   updateActiveTableName,
@@ -25,6 +26,7 @@ export const RelatedTables: FC<Props> = ({ table }) => {
     showMode: 'TABLE_NAME',
   })
   const { getNodes } = useReactFlow()
+  const { cliVersion } = useCliVersion()
   const handleClick = useCallback(() => {
     const visibleNodeIds: string[] = nodes.map((node) => node.id)
     const mainPaneNodes = getNodes()
@@ -36,8 +38,9 @@ export const RelatedTables: FC<Props> = ({ table }) => {
     updateActiveTableName(undefined)
     openRelatedTablesLogEvent({
       tableId: table.name,
+      cliVer: cliVersion.version,
     })
-  }, [nodes, getNodes, table.name])
+  }, [nodes, getNodes, table.name, cliVersion.version])
 
   return (
     <div className={styles.wrapper}>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx

@@ -1,4 +1,5 @@
 import { clickLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import type { Table } from '@liam-hq/db-structure'
 import { DrawerClose, DrawerTitle, IconButton, XIcon } from '@liam-hq/ui'
 import type { FC } from 'react'
@@ -14,9 +15,11 @@ type Props = {
 }
 
 export const TableDetail: FC<Props> = ({ table }) => {
+  const { cliVersion } = useCliVersion()
   const handleDrawerClose = () => {
     clickLogEvent({
       element: 'closeTableDetailButton',
+      cliVer: cliVersion.version,
     })
   }
 

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx

@@ -1,4 +1,5 @@
 import { toolbarActionLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import { useUserEditingStore } from '@/stores'
 import { IconButton, Scan } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
@@ -8,14 +9,16 @@ import { type FC, useCallback } from 'react'
 export const FitviewButton: FC = () => {
   const { fitView } = useReactFlow()
   const { showMode } = useUserEditingStore()
+  const { cliVersion } = useCliVersion()
 
   const handleClick = useCallback(() => {
     toolbarActionLogEvent({
       element: 'fitview',
       showMode,
+      cliVer: cliVersion.version,
     })
     fitView()
-  }, [fitView, showMode])
+  }, [fitView, showMode, cliVersion.version])
 
   return (
     <ToolbarButton asChild onClick={handleClick}>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.tsx

@@ -1,4 +1,5 @@
 import { toolbarActionLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import { type ShowMode, showModeSchema } from '@/schemas/showMode'
 import { updateShowMode, useUserEditingStore } from '@/stores'
 import {
@@ -24,18 +25,23 @@ const OPTION_LIST: { value: ShowMode; label: string }[] = [
 export const ShowModeMenu: FC = () => {
   const { showMode } = useUserEditingStore()
 
-  const handleChangeValue = useCallback((value: string) => {
-    const parsed = safeParse(showModeSchema, value)
+  const { cliVersion } = useCliVersion()
+  const handleChangeValue = useCallback(
+    (value: string) => {
+      const parsed = safeParse(showModeSchema, value)
 
-    if (parsed.success) {
-      updateShowMode(parsed.output)
+      if (parsed.success) {
+        updateShowMode(parsed.output)
 
-      toolbarActionLogEvent({
-        element: 'changeShowMode',
-        showMode: value,
-      })
-    }
-  }, [])
+        toolbarActionLogEvent({
+          element: 'changeShowMode',
+          showMode: value,
+          cliVer: cliVersion.version,
+        })
+      }
+    },
+    [cliVersion.version],
+  )
 
   return (
     <div className={styles.wrapper}>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx

@@ -1,4 +1,5 @@
 import { toolbarActionLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import { useUserEditingStore } from '@/stores'
 import { IconButton, TidyUpIcon } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
@@ -8,13 +9,15 @@ import { useAutoLayout } from '../../useAutoLayout'
 export const TidyUpButton: FC = () => {
   const { handleLayout } = useAutoLayout()
   const { showMode } = useUserEditingStore()
+  const { cliVersion } = useCliVersion()
   const handleClick = useCallback(() => {
     toolbarActionLogEvent({
       element: 'tidyUp',
       showMode,
+      cliVer: cliVersion.version,
     })
     handleLayout()
-  }, [handleLayout, showMode])
+  }, [handleLayout, showMode, cliVersion.version])
 
   return (
     <ToolbarButton asChild>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ZoomControls/ZoomControls.tsx

@@ -1,4 +1,5 @@
 import { toolbarActionLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import { useUserEditingStore } from '@/stores'
 import { IconButton, Minus, Plus } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
@@ -10,24 +11,27 @@ export const ZoomControls: FC = () => {
   const zoomLevel = useStore((store) => store.transform[2])
   const { zoomIn, zoomOut } = useReactFlow()
   const { showMode } = useUserEditingStore()
+  const { cliVersion } = useCliVersion()
 
   const handleClickZoomOut = useCallback(() => {
     toolbarActionLogEvent({
       element: 'zoom',
       zoomLevel: zoomLevel.toFixed(2),
       showMode,
+      cliVer: cliVersion.version,
     })
     zoomOut()
-  }, [zoomOut, zoomLevel, showMode])
+  }, [zoomOut, zoomLevel, showMode, cliVersion.version])
 
   const handleClickZoomIn = useCallback(() => {
     toolbarActionLogEvent({
       element: 'zoom',
       zoomLevel: zoomLevel.toFixed(2),
       showMode: showMode,
+      cliVer: cliVersion.version,
     })
     zoomIn()
-  }, [zoomIn, zoomLevel, showMode])
+  }, [zoomIn, zoomLevel, showMode, cliVersion.version])
 
   return (
     <div className={styles.wrapper}>

frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.tsx

@@ -13,6 +13,7 @@ import styles from './ERDRenderer.module.css'
 import { LeftPane } from './LeftPane'
 import '@/styles/globals.css'
 import { toggleLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import { useDBStructureStore, useUserEditingStore } from '@/stores'
 // biome-ignore lint/nursery/useImportRestrictions: Fixed in the next PR.
 import { Toolbar } from './ERDContent/Toolbar'
@@ -30,13 +31,18 @@ export const ERDRenderer: FC = () => {
     showMode,
   })
 
-  const handleChangeOpen = useCallback((open: boolean) => {
-    setOpen(open)
-    toggleLogEvent({
-      element: 'leftPane',
-      isShow: open,
-    })
-  }, [])
+  const { cliVersion } = useCliVersion()
+  const handleChangeOpen = useCallback(
+    (open: boolean) => {
+      setOpen(open)
+      toggleLogEvent({
+        element: 'leftPane',
+        isShow: open,
+        cliVer: cliVersion.version,
+      })
+    },
+    [cliVersion.version],
+  )
 
   return (
     <div className={styles.wrapper}>

frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx

@@ -1,4 +1,5 @@
 import { selectTableLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import { updateActiveTableName, useUserEditingStore } from '@/stores'
 import { SidebarMenuButton, SidebarMenuItem, Table2 } from '@liam-hq/ui'
 import clsx from 'clsx'
@@ -7,11 +8,6 @@ import type { TableNodeType } from '../../ERDContent'
 import styles from './TableNameMenuButton.module.css'
 import { VisibilityButton } from './VisibilityButton'
 
-const handleClickMenuButton = (tableId: string) => () => {
-  updateActiveTableName(tableId)
-  selectTableLogEvent({ ref: 'leftPane', tableId })
-}
-
 type Props = {
   node: TableNodeType
 }
@@ -22,6 +18,18 @@ export const TableNameMenuButton: FC<Props> = ({ node }) => {
   } = useUserEditingStore()
   const name = node.data.table.name
 
+  // TODO: Move handleClickMenuButton outside of TableNameMenuButton
+  // after logging is complete
+  const { cliVersion } = useCliVersion()
+  const handleClickMenuButton = (tableId: string) => () => {
+    updateActiveTableName(tableId)
+    selectTableLogEvent({
+      ref: 'leftPane',
+      tableId,
+      cliVer: cliVersion.version,
+    })
+  }
+
   return (
     <SidebarMenuItem>
       <SidebarMenuButton

frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/VisibilityButton.tsx

@@ -1,4 +1,5 @@
 import { toggleLogEvent } from '@/features/gtm/utils'
+import { useCliVersion } from '@/providers'
 import { toggleHiddenNodeId } from '@/stores'
 import { Eye, EyeClosed, SidebarMenuAction } from '@liam-hq/ui'
 import { type FC, type MouseEvent, useCallback } from 'react'
@@ -10,6 +11,7 @@ type Props = {
 }
 
 export const VisibilityButton: FC<Props> = ({ tableName, hidden }) => {
+  const { cliVersion } = useCliVersion()
   const handleClick = useCallback(
     (event: MouseEvent) => {
       event.stopPropagation()
@@ -18,9 +20,10 @@ export const VisibilityButton: FC<Props> = ({ tableName, hidden }) => {
         element: 'tableNameMenuButton',
         isShow: !!hidden,
         tableId: tableName,
+        cliVer: cliVersion.version,
       })
     },
-    [tableName, hidden],
+    [tableName, hidden, cliVersion.version],
   )
 
   return (

frontend/packages/erd-core/src/features/gtm/utils/clickLogEvent.ts

@@ -2,11 +2,13 @@ import { pushToDataLayer } from './pushToDataLayer'
 
 type ClickLogEvent = {
   element: string
+  cliVer: string
 }
 
-export const clickLogEvent = ({ element }: ClickLogEvent) => {
+export const clickLogEvent = ({ element, cliVer }: ClickLogEvent) => {
   pushToDataLayer({
     event: 'click',
     element,
+    cliVer,
   })
 }

frontend/packages/erd-core/src/features/gtm/utils/openRelatedTablesLogEvent.ts

@@ -2,13 +2,16 @@ import { pushToDataLayer } from './pushToDataLayer'
 
 type OpenRelatedTablesLogEvent = {
   tableId: string
+  cliVer: string
 }
 
 export const openRelatedTablesLogEvent = ({
   tableId,
+  cliVer,
 }: OpenRelatedTablesLogEvent) => {
   pushToDataLayer({
     event: 'openRelatedTables',
     tableId,
+    cliVer,
   })
 }

frontend/packages/erd-core/src/features/gtm/utils/repositionTableLogEvent.ts

@@ -3,15 +3,18 @@ import { pushToDataLayer } from './pushToDataLayer'
 type RepositionTable = {
   tableId: string
   operationId: string
+  cliVer: string
 }
 
 export const repositionTableLogEvent = ({
   tableId,
   operationId,
+  cliVer,
 }: RepositionTable) => {
   pushToDataLayer({
     event: 'repositionTable',
     tableId,
     operationId,
+    cliVer,
   })
 }