Merge pull request #324 from liam-hq/feat/toggle-log

📈: integrate toggle logging for sidebar and visibility button actions

frontend/.changeset/ninety-llamas-beam.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+📈: integrate toggle logging for sidebar and visibility button actions

frontend/.changeset/slimy-cycles-press.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+📈 : add toggleLogEvent utility for logging toggle actions

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

@@ -6,12 +6,13 @@ import {
   getSidebarStateFromCookie,
 } from '@liam-hq/ui'
 import { ReactFlowProvider } from '@xyflow/react'
-import type { FC } from 'react'
+import { type FC, useCallback, useState } from 'react'
 import { AppBar } from './AppBar'
 import { ERDContent } from './ERDContent'
 import styles from './ERDRenderer.module.css'
 import { LeftPane } from './LeftPane'
 import '@/styles/globals.css'
+import { toggleLogEvent } from '@/features/gtm/utils'
 import { useDBStructureStore, useUserEditingStore } from '@/stores'
 // biome-ignore lint/nursery/useImportRestrictions: Fixed in the next PR.
 import { Toolbar } from './ERDContent/Toolbar'
@@ -20,18 +21,32 @@ import { convertDBStructureToNodes } from './convertDBStructureToNodes'
 
 export const ERDRenderer: FC = () => {
   const defaultOpen = getSidebarStateFromCookie()
+  const [open, setOpen] = useState(defaultOpen)
+
   const { showMode } = useUserEditingStore()
   const dbStructure = useDBStructureStore()
   const { nodes, edges } = convertDBStructureToNodes({
     dbStructure,
     showMode,
   })
 
+  const handleChangeOpen = useCallback((open: boolean) => {
+    setOpen(open)
+    toggleLogEvent({
+      element: 'leftPane',
+      isShow: open,
+    })
+  }, [])
+
   return (
     <div className={styles.wrapper}>
       <ToastProvider>
         <AppBar />
-        <SidebarProvider defaultOpen={defaultOpen}>
+        <SidebarProvider
+          open={open}
+          defaultOpen={defaultOpen}
+          onOpenChange={handleChangeOpen}
+        >
           <ReactFlowProvider>
             <div className={styles.mainWrapper}>
               <LeftPane />

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

@@ -1,3 +1,4 @@
+import { toggleLogEvent } from '@/features/gtm/utils'
 import { toggleHiddenNodeId } from '@/stores'
 import { Eye, EyeClosed, SidebarMenuAction } from '@liam-hq/ui'
 import { type FC, type MouseEvent, useCallback } from 'react'
@@ -13,8 +14,13 @@ export const VisibilityButton: FC<Props> = ({ tableName, hidden }) => {
     (event: MouseEvent) => {
       event.stopPropagation()
       toggleHiddenNodeId(tableName)
+      toggleLogEvent({
+        element: 'tableNameMenuButton',
+        isShow: !!hidden,
+        tableId: tableName,
+      })
     },
-    [tableName],
+    [tableName, hidden],
   )
 
   return (

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

@@ -1,2 +1,3 @@
 export * from './clickLogEvent'
 export * from './selectTableLogEvent'
+export * from './toggleLogEvent'

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

@@ -0,0 +1,14 @@
+import { pushToDataLayer } from './pushToDataLayer'
+
+type ToggleLogEvent = {
+  element: string
+  isShow: boolean
+  tableId?: string
+}
+
+export const toggleLogEvent = (params: ToggleLogEvent) => {
+  pushToDataLayer({
+    event: 'toggle',
+    ...params,
+  })
+}