From 75bdd73c15fe71a00007a070c04a593630ba3cf4 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Mon, 18 Dec 2023 15:06:58 +0200
Subject: [PATCH] feat: add plausible tracking to scheduling (#5668)

Adds plausible tracking with actions:
- scheduled-created
- scheduled-updated
- scheduled-rejected
- scheduled-applied

Closes #
[1-1630](https://linear.app/unleash/issue/1-1630/add-plausible-metrics)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../ChangeRequestOverview.tsx                 | 26 +++++++++++++++++++
 frontend/src/hooks/usePlausibleTracker.ts     |  3 ++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
index 7b979c2c3d..9e4ecb9cb7 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -31,6 +31,7 @@ import {
     ChangeRequestRejectScheduledDialogue,
 } from './ChangeRequestScheduledDialogs/changeRequestScheduledDialogs';
 import { ScheduleChangeRequestDialog } from './ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledAsideBox = styled(Box)(({ theme }) => ({
     width: '30%',
@@ -100,6 +101,7 @@ export const ChangeRequestOverview: FC = () => {
     const { isChangeRequestConfiguredForReview } =
         useChangeRequestsEnabled(projectId);
     const scheduleChangeRequests = useUiFlag('scheduledConfigurationChanges');
+    const { trackEvent } = usePlausibleTracker();
 
     if (!changeRequest) {
         return null;
@@ -109,6 +111,8 @@ export const ChangeRequestOverview: FC = () => {
         changeRequest.environment,
     );
 
+    const hasSchedule = Boolean(changeRequest.schedule?.scheduledAt);
+
     const onApplyChanges = async () => {
         try {
             await changeState(projectId, Number(id), {
@@ -122,12 +126,22 @@ export const ChangeRequestOverview: FC = () => {
                 title: 'Success',
                 text: 'Changes applied',
             });
+            if (hasSchedule) {
+                trackEvent('scheduled-configuration-changes', {
+                    props: {
+                        action: 'scheduled-applied',
+                    },
+                });
+            }
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
     };
 
     const onScheduleChangeRequest = async (scheduledDate: Date) => {
+        const plausibleAction = hasSchedule
+            ? 'scheduled-updated'
+            : 'scheduled-created';
         try {
             await changeState(projectId, Number(id), {
                 state: 'Scheduled',
@@ -141,6 +155,11 @@ export const ChangeRequestOverview: FC = () => {
                 title: 'Success',
                 text: 'Changes scheduled',
             });
+            trackEvent('scheduled-configuration-changes', {
+                props: {
+                    action: plausibleAction,
+                },
+            });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
@@ -193,6 +212,13 @@ export const ChangeRequestOverview: FC = () => {
             });
             refetchChangeRequest();
             refetchChangeRequestOpen();
+            if (hasSchedule) {
+                trackEvent('scheduled-configuration-changes', {
+                    props: {
+                        action: 'scheduled-rejected',
+                    },
+                });
+            }
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index 453c60a5e1..b6f50ea95a 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -51,7 +51,8 @@ export type CustomEvents =
     | 'project-mode'
     | 'dependent_features'
     | 'playground_token_input_used'
-    | 'search-filter';
+    | 'search-filter'
+    | 'scheduled-configuration-changes';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);