From 8ed93654f2ef07837e11c2f081a97ccc8c309bf5 Mon Sep 17 00:00:00 2001 From: Mike Fortman Date: Tue, 24 Sep 2024 14:00:34 -0500 Subject: [PATCH] feat: add tracking and custom param label (#3902) * add tracking and custom param label * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .../components/NodeInputField/index.tsx | 65 +++++++++++-------- .../hooks/use-handle-new-value.tsx | 3 + .../components/custom-parameter.tsx | 14 ++++ .../components/NewFlowCardComponent/index.tsx | 2 +- .../components/undrawCards/index.tsx | 2 +- .../components/PageComponent/index.tsx | 8 ++- src/frontend/src/stores/flowStore.ts | 3 + 7 files changed, 66 insertions(+), 31 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx index bd7b104ea7e3..314772275c0a 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx @@ -2,6 +2,7 @@ import useHandleNodeClass from "@/CustomNodes/hooks/use-handle-node-class"; import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value"; import { CustomParameterComponent, + CustomParameterLabel, getCustomParameterTitle, } from "@/customization/components/custom-parameter"; import { useEffect, useRef } from "react"; @@ -104,42 +105,50 @@ export default function NodeInputField({ > {displayHandle && Handle}
-
- {proxy ? ( - {proxy.id}}> - { - - {getCustomParameterTitle({ title, nodeId: data.id })} - - } - - ) : ( -
- +
+
+ {proxy ? ( + {proxy.id}}> { {getCustomParameterTitle({ title, nodeId: data.id })} } - -
- )} - - {required ? "*" : ""} - -
- {info !== "" && ( - }> - {/* put div to avoid bug that does not display tooltip */} -
- -
+ ) : ( +
+ + { + + {getCustomParameterTitle({ title, nodeId: data.id })} + + } + +
)} + + {required ? "*" : ""} + +
+ {info !== "" && ( + }> + {/* put div to avoid bug that does not display tooltip */} +
+ +
+ + )} +
+
{data.node?.template[name] !== undefined && ( diff --git a/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx b/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx index 7d26d0dc2d00..dc2e2c309e18 100644 --- a/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx +++ b/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx @@ -1,4 +1,5 @@ import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value"; +import { track } from "@/customization/utils/analytics"; import useAlertStore from "@/stores/alertStore"; import useFlowStore from "@/stores/flowStore"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; @@ -45,6 +46,8 @@ const useHandleOnNewValue = ({ const newNode = cloneDeep(node); const template = newNode.template; + track("Component Edited", { nodeId }); + if (!template) { setErrorData({ title: "Template not found in the component" }); return; diff --git a/src/frontend/src/customization/components/custom-parameter.tsx b/src/frontend/src/customization/components/custom-parameter.tsx index d2358e5edf39..220ab9875f92 100644 --- a/src/frontend/src/customization/components/custom-parameter.tsx +++ b/src/frontend/src/customization/components/custom-parameter.tsx @@ -47,3 +47,17 @@ export function getCustomParameterTitle({ }) { return title; } + +export function CustomParameterLabel({ + name, + nodeId, + templateValue, + nodeClass, +}: { + name: string; + nodeId: string; + templateValue: any; + nodeClass: APIClassType; +}) { + return <>; +} diff --git a/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx b/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx index 98e0510bb98e..4820b0199c98 100644 --- a/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx +++ b/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx @@ -20,7 +20,7 @@ export default function NewFlowCardComponent() { addFlow().then((id) => { navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`); }); - track("New Flow Created: Blank Flow"); + track("New Flow Created", { template: "Blank Flow" }); }} className="h-64 w-80 cursor-pointer bg-background pt-4" data-testid="blank-flow" diff --git a/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx b/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx index a784552f08b3..8d4e8cc19834 100644 --- a/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx +++ b/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx @@ -145,7 +145,7 @@ export default function UndrawCardComponent({ addFlow({ flow }).then((id) => { navigate(`/flow/${id}/folder/${folderIdUrl}`); }); - track(`New Flow Created: ${flow.name} Template`); + track("New Flow Created", { template: `${flow.name} Template` }); }} className="h-64 w-80 cursor-pointer bg-background pt-4" > diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 17db926ff33b..a6fa1b18d3f9 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -259,6 +259,12 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { e.preventDefault(); (e as unknown as Event).stopImmediatePropagation(); takeSnapshot(); + if (lastSelection.edges?.length) { + track("Component Connection Deleted"); + } + if (lastSelection.nodes?.length) { + track("Component Deleted"); + } deleteNode(lastSelection.nodes.map((node) => node.id)); deleteEdge(lastSelection.edges.map((edge) => edge.id)); } @@ -341,7 +347,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { event.dataTransfer.getData(datakey!), ); - track(`Component Added: ${data.node?.display_name}`); + track("Component Added", { componentType: data.node?.display_name }); const newId = getNodeId(data.type); diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index cdc910a8e361..eb1dc22ebaee 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -2,6 +2,7 @@ import { BROKEN_EDGES_WARNING, componentsToIgnoreUpdate, } from "@/constants/constants"; +import { track } from "@/customization/utils/analytics"; import { brokenEdgeMessage } from "@/utils/utils"; import { cloneDeep, zip } from "lodash"; import { @@ -271,6 +272,7 @@ const useFlowStore = create((set, get) => ({ : !nodeId.includes(node.id), ), ); + track("Component Deleted", { nodeId }); }, deleteEdge: (edgeId) => { get().setEdges( @@ -280,6 +282,7 @@ const useFlowStore = create((set, get) => ({ : !edgeId.includes(edge.id), ), ); + track("Component Connection Deleted", { edgeId }); }, paste: (selection, position) => { if (