From 261b7a9be926eb615854c609c75cc1de1f735f1e Mon Sep 17 00:00:00 2001 From: FunamaYukina Date: Fri, 20 Dec 2024 17:01:33 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88=20Add=20cliVer=20parameter=20to=20?= =?UTF-8?q?log=20event=20functions=20and=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.changeset/eighty-bottles-hope.md | 6 +++++ .../AppBar/CopyLinkButton/CopyLinkButton.tsx | 5 +++- .../ERDRenderer/ERDContent/ERDContent.tsx | 25 +++++++++++++----- .../RelatedTables/RelatedTables.tsx | 3 +++ .../TableNode/TableDetail/TableDetail.tsx | 3 +++ .../Toolbar/FitviewButton/FitviewButton.tsx | 5 +++- .../Toolbar/ShowModeMenu/ShowModeMenu.tsx | 26 ++++++++++++------- .../Toolbar/TidyUpButton/TidyUpButton.tsx | 5 +++- .../Toolbar/ZoomControls/ZoomControls.tsx | 8 ++++-- .../components/ERDRenderer/ERDRenderer.tsx | 20 +++++++++----- .../TableNameMenuButton.tsx | 18 +++++++++---- .../TableNameMenuButton/VisibilityButton.tsx | 5 +++- .../src/features/gtm/utils/clickLogEvent.ts | 4 ++- .../gtm/utils/openRelatedTablesLogEvent.ts | 3 +++ .../gtm/utils/repositionTableLogEvent.ts | 3 +++ .../features/gtm/utils/selectTableLogEvent.ts | 4 ++- .../src/features/gtm/utils/toggleLogEvent.ts | 1 + .../gtm/utils/toolbarActionLogEvent.ts | 3 +++ 18 files changed, 111 insertions(+), 36 deletions(-) create mode 100644 frontend/.changeset/eighty-bottles-hope.md diff --git a/frontend/.changeset/eighty-bottles-hope.md b/frontend/.changeset/eighty-bottles-hope.md new file mode 100644 index 00000000..f530cfd8 --- /dev/null +++ b/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 diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/CopyLinkButton/CopyLinkButton.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/CopyLinkButton/CopyLinkButton.tsx index 2d4111f0..ac3373d4 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/CopyLinkButton/CopyLinkButton.tsx +++ b/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 ( diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx index 16fd370f..0f4feda5 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx +++ b/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 { @@ -80,10 +81,18 @@ export const ERDContentInner: FC = ({ 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) @@ -122,10 +131,14 @@ export const ERDContentInner: FC = ({ 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] diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx index 42e9d017..60b87837 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx +++ b/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, @@ -28,6 +29,7 @@ export const RelatedTables: FC = ({ table }) => { const handleClick = useCallback(() => { const visibleNodeIds: string[] = nodes.map((node) => node.id) const mainPaneNodes = getNodes() + const { cliVersion } = useCliVersion() const hiddenNodeIds = mainPaneNodes .filter((node) => !visibleNodeIds.includes(node.id)) .map((node) => node.id) @@ -36,6 +38,7 @@ export const RelatedTables: FC = ({ table }) => { updateActiveTableName(undefined) openRelatedTablesLogEvent({ tableId: table.name, + cliVer: cliVersion.version, }) }, [nodes, getNodes, table.name]) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx index 3720eda7..c2b23aee 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx +++ b/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 = ({ table }) => { + const { cliVersion } = useCliVersion() const handleDrawerClose = () => { clickLogEvent({ element: 'closeTableDetailButton', + cliVer: cliVersion.version, }) } diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx index 76f4e06a..19e3a7b8 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx +++ b/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 ( diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.tsx index d9b91dd7..8b1a9ffa 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.tsx +++ b/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 (
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx index bbc51774..abb2dba2 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx +++ b/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 ( diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ZoomControls/ZoomControls.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ZoomControls/ZoomControls.tsx index ee50ed25..c0451170 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ZoomControls/ZoomControls.tsx +++ b/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 (
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.tsx index ac8b5d29..6a9fb29f 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.tsx +++ b/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 (
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx index 6b6dcb17..1cf927de 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx +++ b/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 = ({ 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 ( = ({ tableName, hidden }) => { + const { cliVersion } = useCliVersion() const handleClick = useCallback( (event: MouseEvent) => { event.stopPropagation() @@ -18,9 +20,10 @@ export const VisibilityButton: FC = ({ tableName, hidden }) => { element: 'tableNameMenuButton', isShow: !!hidden, tableId: tableName, + cliVer: cliVersion.version, }) }, - [tableName, hidden], + [tableName, hidden, cliVersion.version], ) return ( diff --git a/frontend/packages/erd-core/src/features/gtm/utils/clickLogEvent.ts b/frontend/packages/erd-core/src/features/gtm/utils/clickLogEvent.ts index 056ecbb7..66bc5eaa 100644 --- a/frontend/packages/erd-core/src/features/gtm/utils/clickLogEvent.ts +++ b/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, }) } diff --git a/frontend/packages/erd-core/src/features/gtm/utils/openRelatedTablesLogEvent.ts b/frontend/packages/erd-core/src/features/gtm/utils/openRelatedTablesLogEvent.ts index 934fbb6e..2bc29ea1 100644 --- a/frontend/packages/erd-core/src/features/gtm/utils/openRelatedTablesLogEvent.ts +++ b/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, }) } diff --git a/frontend/packages/erd-core/src/features/gtm/utils/repositionTableLogEvent.ts b/frontend/packages/erd-core/src/features/gtm/utils/repositionTableLogEvent.ts index 7a7180f7..f0188db5 100644 --- a/frontend/packages/erd-core/src/features/gtm/utils/repositionTableLogEvent.ts +++ b/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, }) } diff --git a/frontend/packages/erd-core/src/features/gtm/utils/selectTableLogEvent.ts b/frontend/packages/erd-core/src/features/gtm/utils/selectTableLogEvent.ts index 3b7f034a..c59a9936 100644 --- a/frontend/packages/erd-core/src/features/gtm/utils/selectTableLogEvent.ts +++ b/frontend/packages/erd-core/src/features/gtm/utils/selectTableLogEvent.ts @@ -3,12 +3,14 @@ import { pushToDataLayer } from './pushToDataLayer' type SelectTable = { ref: 'leftPane' | 'mainArea' tableId: string + cliVer: string } -export const selectTableLogEvent = ({ ref, tableId }: SelectTable) => { +export const selectTableLogEvent = ({ ref, tableId, cliVer }: SelectTable) => { pushToDataLayer({ event: 'selectTable', ref, tableId, + cliVer, }) } diff --git a/frontend/packages/erd-core/src/features/gtm/utils/toggleLogEvent.ts b/frontend/packages/erd-core/src/features/gtm/utils/toggleLogEvent.ts index a2ae05a9..361d72f9 100644 --- a/frontend/packages/erd-core/src/features/gtm/utils/toggleLogEvent.ts +++ b/frontend/packages/erd-core/src/features/gtm/utils/toggleLogEvent.ts @@ -4,6 +4,7 @@ type ToggleLogEvent = { element: string isShow: boolean tableId?: string + cliVer: string } export const toggleLogEvent = (params: ToggleLogEvent) => { diff --git a/frontend/packages/erd-core/src/features/gtm/utils/toolbarActionLogEvent.ts b/frontend/packages/erd-core/src/features/gtm/utils/toolbarActionLogEvent.ts index 1a314c0e..c18f0215 100644 --- a/frontend/packages/erd-core/src/features/gtm/utils/toolbarActionLogEvent.ts +++ b/frontend/packages/erd-core/src/features/gtm/utils/toolbarActionLogEvent.ts @@ -4,17 +4,20 @@ type ToolbarActionLogEvent = { element: string zoomLevel?: string showMode?: string + cliVer: string } export const toolbarActionLogEvent = ({ element, zoomLevel, showMode, + cliVer, }: ToolbarActionLogEvent) => { pushToDataLayer({ event: 'toolbarAction', element, zoomLevel, showMode, + cliVer, }) }