Review Workflow Settings: track events

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/ReviewWorkflows.js

@@ -3,7 +3,12 @@ import { FormikProvider, useFormik, Form } from 'formik';
 import { useIntl } from 'react-intl';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { CheckPagePermissions, ConfirmDialog, SettingsPageTitle } from '@strapi/helper-plugin';
+import {
+  CheckPagePermissions,
+  ConfirmDialog,
+  SettingsPageTitle,
+  useTracking,
+} from '@strapi/helper-plugin';
 import { Button, ContentLayout, HeaderLayout, Layout, Loader, Main } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 
@@ -17,6 +22,7 @@ import { getWorkflowValidationSchema } from './utils/getWorkflowValidationSchema
 import adminPermissions from '../../../../../../admin/src/permissions';
 
 export function ReviewWorkflowsPage() {
+  const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
   const { workflows: workflowsData, updateWorkflowStages, refetchWorkflow } = useReviewWorkflows();
@@ -67,6 +73,10 @@ export function ReviewWorkflowsPage() {
     dispatch(setWorkflows({ status: workflowsData.status, data: workflowsData.data }));
   }, [workflowsData.status, workflowsData.data, dispatch]);
 
+  useEffect(() => {
+    trackUsage('didViewWorkflow');
+  }, [trackUsage]);
+
   return (
     <CheckPagePermissions permissions={adminPermissions.settings['review-workflows'].main}>
       <Layout>

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js

@@ -12,12 +12,14 @@ import {
   IconButton,
   TextInput,
 } from '@strapi/design-system';
+import { useTracking } from '@strapi/helper-plugin';
 import { Trash } from '@strapi/icons';
 
 import { deleteStage, updateStage } from '../../../actions';
 
 function Stage({ id, name, index, canDelete, isOpen: isOpenDefault = false }) {
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
   const [isOpen, setIsOpen] = useState(isOpenDefault);
   const fieldIdentifier = `stages.${index}.name`;
   const [field, meta] = useField(fieldIdentifier);
@@ -27,7 +29,13 @@ function Stage({ id, name, index, canDelete, isOpen: isOpenDefault = false }) {
     <Accordion
       size="S"
       variant="primary"
-      onToggle={() => setIsOpen(!isOpen)}
+      onToggle={() => {
+        setIsOpen(!isOpen);
+
+        if (!isOpen) {
+          trackUsage('willEditStage');
+        }
+      }}
       expanded={isOpen}
       shadow="tableShadow"
     >

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stages.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Box, Flex } from '@strapi/design-system';
+import { useTracking } from '@strapi/helper-plugin';
 
 import { addStage } from '../../actions';
 import { AddStage } from '../AddStage';
@@ -23,6 +24,7 @@ const Background = styled(Box)`
 function Stages({ stages }) {
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
+  const { trackUsage } = useTracking();
 
   return (
     <Flex direction="column" gap={6} width="100%">
@@ -56,7 +58,13 @@ function Stages({ stages }) {
       </StagesContainer>
 
       <Flex direction="column" gap={6}>
-        <AddStage type="button" onClick={() => dispatch(addStage({ name: '' }))}>
+        <AddStage
+          type="button"
+          onClick={() => {
+            dispatch(addStage({ name: '' }));
+            trackUsage('willCreateStage');
+          }}
+        >
           {formatMessage({
             id: 'Settings.review-workflows.stage.add',
             defaultMessage: 'Add new stage',