chore: release management plausible events (#9230)

https://linear.app/unleash/issue/2-2834/plausible

Adds the following Plausible events to the Release management feature:
 - Add plan
 - Start milestone
 - Remove plan
 - Create template
 - Edit template
 - Delete template

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx

@@ -93,16 +93,16 @@ export const FeatureReleasePlanCard = ({
                 });
                 refetch();
             }
+
+            trackEvent('release-management', {
+                props: {
+                    eventType: 'add-plan',
+                    plan: releasePlanTemplate.name,
+                },
+            });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
-
-        trackEvent('release-plans', {
-            props: {
-                eventType: 'add',
-                name: releasePlanTemplate.name,
-            },
-        });
     };
 
     return (

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx

@@ -21,6 +21,7 @@ import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useCh
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
 import { RemoveReleasePlanChangeRequestDialog } from './ChangeRequest/RemoveReleasePlanChangeRequestDialog';
 import { StartMilestoneChangeRequestDialog } from './ChangeRequest/StartMilestoneChangeRequestDialog';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledContainer = styled('div', {
     shouldForwardProp: (prop) => prop !== 'readonly',
@@ -100,6 +101,7 @@ export const ReleasePlan = ({
     const { removeReleasePlanFromFeature, startReleasePlanMilestone } =
         useReleasePlansApi();
     const { setToastData, setToastApiError } = useToast();
+    const { trackEvent } = usePlausibleTracker();
 
     const [removeOpen, setRemoveOpen] = useState(false);
     const [changeRequestDialogRemoveOpen, setChangeRequestDialogRemoveOpen] =
@@ -169,6 +171,13 @@ export const ReleasePlan = ({
         } else {
             setRemoveOpen(true);
         }
+
+        trackEvent('release-management', {
+            props: {
+                eventType: 'remove-plan',
+                plan: name,
+            },
+        });
     };
 
     const onRemoveConfirm = async () => {
@@ -183,6 +192,7 @@ export const ReleasePlan = ({
                 text: `Release plan "${name}" has been removed from ${featureName} in ${environment}`,
                 type: 'success',
             });
+
             refetch();
             setRemoveOpen(false);
         } catch (error: unknown) {
@@ -215,6 +225,14 @@ export const ReleasePlan = ({
                 setToastApiError(formatUnknownError(error));
             }
         }
+
+        trackEvent('release-management', {
+            props: {
+                eventType: 'start-milestone',
+                plan: name,
+                milestone: milestone.name,
+            },
+        });
     };
 
     const activeIndex = milestones.findIndex(

frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCard/ReleasePlanTemplateCardActions.tsx

@@ -20,6 +20,7 @@ import { TemplateDeleteDialog } from '../TemplateDeleteDialog';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Link } from 'react-router-dom';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledActions = styled('div')(({ theme }) => ({
     margin: theme.spacing(-1),
@@ -41,6 +42,7 @@ export const ReleasePlanTemplateCardActions = ({
     const { deleteReleasePlanTemplate } = useReleasePlanTemplatesApi();
     const { refetch } = useReleasePlanTemplates();
     const { setToastData, setToastApiError } = useToast();
+    const { trackEvent } = usePlausibleTracker();
     const [deleteOpen, setDeleteOpen] = useState(false);
     const deleteReleasePlan = useCallback(async () => {
         try {
@@ -50,6 +52,13 @@ export const ReleasePlanTemplateCardActions = ({
                 type: 'success',
                 text: 'Release plan template deleted',
             });
+
+            trackEvent('release-management', {
+                props: {
+                    eventType: 'delete-template',
+                    template: template.name,
+                },
+            });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }

frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx

@@ -12,6 +12,7 @@ import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useUiFlag } from 'hooks/useUiFlag';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledButtonContainer = styled('div')(() => ({
     marginTop: 'auto',
@@ -29,6 +30,7 @@ export const CreateReleasePlanTemplate = () => {
     const { setToastApiError, setToastData } = useToast();
     const navigate = useNavigate();
     const { createReleasePlanTemplate } = useReleasePlanTemplatesApi();
+    const { trackEvent } = usePlausibleTracker();
     usePageTitle('Create release plan template');
     const {
         name,
@@ -61,6 +63,14 @@ export const CreateReleasePlanTemplate = () => {
                     type: 'success',
                     text: 'Release plan template created',
                 });
+
+                trackEvent('release-management', {
+                    props: {
+                        eventType: 'create-template',
+                        template: template.name,
+                    },
+                });
+
                 navigate('/release-management');
             } catch (error: unknown) {
                 setToastApiError(formatUnknownError(error));

frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx

@@ -12,6 +12,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import useToast from 'hooks/useToast';
 import useReleasePlanTemplatesApi from 'hooks/api/actions/useReleasePlanTemplatesApi/useReleasePlanTemplatesApi';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledButtonContainer = styled('div')(() => ({
     marginTop: 'auto',
@@ -29,6 +30,7 @@ export const EditReleasePlanTemplate = () => {
     const templateId = useRequiredPathParam('templateId');
     const { template, loading, error, refetch } =
         useReleasePlanTemplate(templateId);
+    const { trackEvent } = usePlausibleTracker();
     usePageTitle(`Edit release template`);
     const navigate = useNavigate();
     const { setToastApiError, setToastData } = useToast();
@@ -68,6 +70,14 @@ export const EditReleasePlanTemplate = () => {
                     type: 'success',
                     text: 'Release plan template updated',
                 });
+
+                trackEvent('release-management', {
+                    props: {
+                        eventType: 'edit-template',
+                        template: template.name,
+                    },
+                });
+
                 navigate('/release-management');
             } catch (error: unknown) {
                 setToastApiError(formatUnknownError(error));

frontend/src/hooks/usePlausibleTracker.ts

@@ -73,7 +73,7 @@ export type CustomEvents =
     | 'order-environments'
     | 'project-navigation'
     | 'productivity-report'
-    | 'release-plans';
+    | 'release-management';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);