From 092ba2a6255a3c2f390ca9dbdfc3eaa7c38e0e57 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 16 Oct 2023 10:57:55 +0200
Subject: [PATCH] feat: track add and remove dependencies (#5041)

---
 .../Dependencies/AddDependencyDialogue.tsx    | 31 +++++++++++++++++--
 .../DependencyRow.tsx                         | 12 +++++++
 frontend/src/hooks/usePlausibleTracker.ts     |  3 +-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx b/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx
index 1a61ca3b08..43499ff04a 100644
--- a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx
+++ b/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx
@@ -12,6 +12,7 @@ import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useCh
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IAddDependencyDialogueProps {
     project: string;
@@ -64,6 +65,7 @@ const useManageDependency = (
     parent: string,
     onClose: () => void,
 ) => {
+    const { trackEvent } = usePlausibleTracker();
     const { addChange } = useChangeRequestApi();
     const { refetch: refetchChangeRequests } =
         usePendingChangeRequests(project);
@@ -90,6 +92,11 @@ const useManageDependency = (
                     payload: { feature: parent },
                 },
             ]);
+            trackEvent('dependent_features', {
+                props: {
+                    eventType: 'dependency added',
+                },
+            });
         }
         if (actionType === 'deleteDependency') {
             await addChange(project, environment, [
@@ -110,16 +117,34 @@ const useManageDependency = (
     const manageDependency = async () => {
         try {
             if (isChangeRequestConfiguredInAnyEnv()) {
-                await handleAddChange(
+                const actionType =
                     parent === REMOVE_DEPENDENCY_OPTION.key
                         ? 'deleteDependency'
-                        : 'addDependency',
-                );
+                        : 'addDependency';
+                await handleAddChange(actionType);
+                trackEvent('dependent_features', {
+                    props: {
+                        eventType:
+                            actionType === 'addDependency'
+                                ? 'add dependency added to change request'
+                                : 'delete dependency added to change request',
+                    },
+                });
             } else if (parent === REMOVE_DEPENDENCY_OPTION.key) {
                 await removeDependencies(featureId);
+                trackEvent('dependent_features', {
+                    props: {
+                        eventType: 'dependency removed',
+                    },
+                });
                 setToastData({ title: 'Dependency removed', type: 'success' });
             } else {
                 await addDependency(featureId, { feature: parent });
+                trackEvent('dependent_features', {
+                    props: {
+                        eventType: 'dependency added',
+                    },
+                });
                 setToastData({ title: 'Dependency added', type: 'success' });
             }
         } catch (error) {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/DependencyRow.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/DependencyRow.tsx
index 7d044d7729..1366e355ef 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/DependencyRow.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/DependencyRow.tsx
@@ -16,8 +16,10 @@ import useToast from 'hooks/useToast';
 import { useHighestPermissionChangeRequestEnvironment } from 'hooks/useHighestPermissionChangeRequestEnvironment';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { formatUnknownError } from 'utils/formatUnknownError';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const useDeleteDependency = (project: string, featureId: string) => {
+    const { trackEvent } = usePlausibleTracker();
     const { addChange } = useChangeRequestApi();
     const { refetch: refetchChangeRequests } =
         usePendingChangeRequests(project);
@@ -46,6 +48,11 @@ const useDeleteDependency = (project: string, featureId: string) => {
         try {
             if (isChangeRequestConfiguredInAnyEnv()) {
                 await handleAddChange();
+                trackEvent('dependent_features', {
+                    props: {
+                        eventType: 'delete dependency added to change request',
+                    },
+                });
                 setToastData({
                     text: `${featureId} dependency will be removed`,
                     type: 'success',
@@ -54,6 +61,11 @@ const useDeleteDependency = (project: string, featureId: string) => {
                 await refetchChangeRequests();
             } else {
                 await removeDependencies(featureId);
+                trackEvent('dependent_features', {
+                    props: {
+                        eventType: 'dependency removed',
+                    },
+                });
                 setToastData({ title: 'Dependency removed', type: 'success' });
                 await refetchFeature();
             }
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index 0cfccdf2c3..41453deed4 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -48,7 +48,8 @@ export type CustomEvents =
     | 'project-metrics'
     | 'open-integration'
     | 'feature-naming-pattern'
-    | 'project-mode';
+    | 'project-mode'
+    | 'dependent_features';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);