EPMRPP-90835 || Add GA4 events for Notifications (#3894)

* EPMRPP-90835 || Add GA4 events for Notifications * EPMRPP-90835 || code review fix -1
reportportal · Jul 2, 2024 · fb311c1 · fb311c1
1 parent 78cc0a6
commit fb311c1
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 43 deletions.
diff --git a/app/src/components/main/analytics/events/ga4Events/projectSettingsPageEvents.js b/app/src/components/main/analytics/events/ga4Events/projectSettingsPageEvents.js
@@ -103,58 +103,82 @@ export const PROJECT_SETTINGS_DEMO_DATA_EVENTS = {
 };
 
 export const PROJECT_SETTINGS_NOTIFICATIONS_EVENTS = {
-  CLICK_SAVE_BUTTON_IN_MODAL: ({ modalName, status, number, type, switcher }) => ({
+  CLICK_SAVE_BUTTON_IN_MODAL: ({ modalName, status, number, type, switcher, ruleId }) => ({
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
     element_name: 'button_save',
     modal: normalizeEventString(modalName),
     status: getStatus(status),
     type: normalizeEventString(type),
     switcher: getSwitcher(switcher),
+    icon_name: ruleId,
     ...(number !== undefined && { number }),
   }),
 
-  CLICK_CHECKBOX_AUTO_NOTIFICATIONS: (status) => ({
+  SWITCH_NOTIFICATION_RULE: (commChanelName, ruleId, switcher) => ({
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
-    element_name: 'checkbox_auto_email_notifications',
-    status: getStatus(status),
+    switcher: getSwitcher(switcher),
+    condition: commChanelName,
+    element_name: 'rule',
+    icon_name: ruleId,
   }),
 
-  SWITCH_NOTIFICATION_RULE: (switcher) => ({
+  SWITCH_PLUGIN_NOTIFICATIONS: (commChanelName, switcher) => ({
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
     switcher: getSwitcher(switcher),
+    element_name: `${commChanelName}_notifications`,
   }),
 
-  clickDocumentationLink: (place) => ({
+  SWITCH_ALL_NOTIFICATIONS: (switcher) => ({
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
-    ...(place && { place }),
-    link_name: 'documentation',
+    switcher: getSwitcher(switcher),
+    element_name: 'all_notifications',
   }),
 
-  CLICK_CREATE_RULE_BUTTON: {
+  CLICK_DISCOVER_PLUGINS_LINK: {
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
-    element_name: 'button_create_rule',
+    link_name: 'discover_plugins',
+  },
+
+  CLICK_INTEGRATION_SETTINGS_LINK: {
+    ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
+    element_name: 'integration_settings',
+  },
+
+  CLICK_CONFIGURE_INTEGRATION_LINK: {
+    ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
+    element_name: 'configure_integration',
   },
 
-  CLICK_TO_EXPAND_NOTIFICATIONS_DETAILS: {
+  CLICK_CREATE_RULE_BUTTON: (commChanelName) => ({
+    ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
+    element_name: 'button_create_rule',
+    condition: commChanelName,
+  }),
+
+  CLICK_TO_EXPAND_NOTIFICATIONS_DETAILS: (commChanelName) => ({
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
     element_name: 'notifications_name',
     status: 'open',
-  },
+    condition: commChanelName,
+  }),
 
-  CLICK_ICON_EDIT_NOTIFICATIONS: {
+  CLICK_ICON_EDIT_NOTIFICATIONS: (commChanelName) => ({
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
     icon_name: 'icon_edit',
-  },
+    condition: commChanelName,
+  }),
 
-  CLICK_ICON_DUPLICATE_NOTIFICATIONS: {
+  CLICK_ICON_DUPLICATE_NOTIFICATIONS: (commChanelName) => ({
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
     icon_name: 'icon_duplicate',
-  },
+    condition: commChanelName,
+  }),
 
-  CLICK_ICON_DELETE_NOTIFICATIONS: {
+  CLICK_ICON_DELETE_NOTIFICATIONS: (commChanelName) => ({
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
     icon_name: 'icon_delete',
-  },
+    condition: commChanelName,
+  }),
 };
 
 export const PROJECT_SETTINGS_DEFECT_TYPES_EVENTS = {

diff --git a/app/src/controllers/project/actionCreators.js b/app/src/controllers/project/actionCreators.js
@@ -169,9 +169,9 @@ export const fetchProjectNotificationsSuccessAction = (notifications) => ({
   payload: notifications,
 });
 
-export const addProjectNotificationAction = (notification) => ({
+export const addProjectNotificationAction = (notification, triggerAddingEvent = () => {}) => ({
   type: ADD_PROJECT_NOTIFICATION,
-  payload: notification,
+  payload: { notification, triggerAddingEvent },
 });
 
 export const addProjectNotificationSuccessAction = (notification) => ({

diff --git a/app/src/controllers/project/sagas.js b/app/src/controllers/project/sagas.js
@@ -201,7 +201,7 @@ function* updateNotificationState({
   yield put(updateConfigurationAttributesAction(updatedConfig));
 }
 
-function* addProjectNotification({ payload: notification }) {
+function* addProjectNotification({ payload: { notification, triggerAddingEvent = () => {} } }) {
   try {
     const projectId = yield select(projectIdSelector);
 
@@ -217,6 +217,7 @@ function* addProjectNotification({ payload: notification }) {
         type: NOTIFICATION_TYPES.SUCCESS,
       }),
     );
+    triggerAddingEvent(response.id);
     yield put(hideModalAction());
   } catch (error) {
     yield put(showDefaultErrorNotification(error));

diff --git a/...inside/projectSettingsPageContainer/content/notifications/LinkComponent/LinkComponent.jsx b/...inside/projectSettingsPageContainer/content/notifications/LinkComponent/LinkComponent.jsx
@@ -19,19 +19,30 @@ import PropTypes from 'prop-types';
 import Parser from 'html-react-parser';
 import classNames from 'classnames/bind';
 import Link from 'redux-first-router-link';
+import { trackEvent } from 'react-tracking';
 import styles from './LinkComponent.scss';
 import { isInternalLink } from '../utils';
 
 const cx = classNames.bind(styles);
 
-export const LinkComponent = ({ to, children, icon, className, automationId }) => {
+export const LinkComponent = ({ to, children, icon, className, event, automationId }) => {
+  const handleLinkTracking = () => {
+    trackEvent(event);
+  };
   return isInternalLink(to) ? (
-    <Link to={to} className={cx(className)} target={'_blank'} data-automation-id={automationId}>
+    <Link
+      to={to}
+      onClick={handleLinkTracking}
+      className={cx(className)}
+      target={'_blank'}
+      data-automation-id={automationId}
+    >
       {children}
       {icon && <i className={cx('icon')}>{Parser(icon)}</i>}
     </Link>
   ) : (
     <a
+      onClick={handleLinkTracking}
       href={to}
       className={cx(className)}
       target={'_blank'}
@@ -54,6 +65,7 @@ LinkComponent.propTypes = {
   ]).isRequired,
   children: PropTypes.node.isRequired,
   icon: PropTypes.string,
+  event: PropTypes.object,
   className: PropTypes.string,
   automationId: PropTypes.string,
 };

diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/notifications/footer/footer.jsx b/app/src/pages/inside/projectSettingsPageContainer/content/notifications/footer/footer.jsx
@@ -28,6 +28,7 @@ import { INTEGRATIONS } from 'common/constants/settingsTabs';
 import { useSelector } from 'react-redux';
 import { activeProjectSelector } from 'controllers/user';
 import { docsReferences } from 'common/utils';
+import { PROJECT_SETTINGS_NOTIFICATIONS_EVENTS } from 'components/main/analytics/events/ga4Events/projectSettingsPageEvents';
 import { messages } from '../messages';
 import styles from './footer.scss';
 import { HelpPanel } from '../helpPanel';
@@ -45,6 +46,7 @@ export const NotificationsFooter = () => {
       link: docsReferences.pluginsDocs,
       description: formatMessage(messages.discoverPluginsDescription),
       openIcon: openInNewTabIcon,
+      event: PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_DISCOVER_PLUGINS_LINK,
       automationId: 'documentationLink',
     },
     {
@@ -59,6 +61,7 @@ export const NotificationsFooter = () => {
       },
       description: formatMessage(messages.integrationSettingsDescription),
       openIcon: arrowRightIcon,
+      event: PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_INTEGRATION_SETTINGS_LINK,
       automationId: 'integrationSettingsLink',
     },
   ];

diff --git a/...c/pages/inside/projectSettingsPageContainer/content/notifications/helpPanel/helpPanel.jsx b/...c/pages/inside/projectSettingsPageContainer/content/notifications/helpPanel/helpPanel.jsx
@@ -26,13 +26,13 @@ const cx = classNames.bind(styles);
 export const HelpPanel = ({ items }) => {
   return (
     <div className={cx('help-panel-container')}>
-      {items.map(({ title, mainIcon, link, openIcon, automationId, description }) => (
+      {items.map(({ title, mainIcon, link, openIcon, automationId, description, event }) => (
         <div key={`info-item-${title}`} className={cx('info-item')}>
           <span className={cx('main-item-icon')}>
             <i className={cx('icon')}>{Parser(mainIcon)}</i>
           </span>
           <div className={cx('item-content-wrapper')}>
-            <LinkComponent to={link} icon={openIcon} automationId={automationId}>
+            <LinkComponent to={link} icon={openIcon} event={event} automationId={automationId}>
               <span className={cx('item-title')}>{title}</span>
             </LinkComponent>
             <p>{description}</p>

diff --git a/...tainer/content/notifications/modals/addEditNotificationModal/addEditNotificationModal.jsx b/...tainer/content/notifications/modals/addEditNotificationModal/addEditNotificationModal.jsx
@@ -17,7 +17,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { formValueSelector, reduxForm } from 'redux-form';
-import { useTracking } from 'react-tracking';
 import { useDispatch, useSelector } from 'react-redux';
 import className from 'classnames/bind';
 import { defineMessages, useIntl } from 'react-intl';
@@ -34,7 +33,6 @@ import { Dropdown } from 'componentLibrary/dropdown';
 import { hideModalAction } from 'controllers/modal';
 import { FieldText } from 'componentLibrary/fieldText';
 import { Checkbox } from '@reportportal/ui-kit';
-import { PROJECT_SETTINGS_NOTIFICATIONS_EVENTS } from 'analyticsEvents/projectSettingsPageEvents';
 import { AttributeListFormField } from 'components/containers/AttributeListFormField';
 import { RadioGroup } from 'componentLibrary/radioGroup';
 import { EMAIL } from 'common/constants/pluginNames';
@@ -216,7 +214,6 @@ const AddEditNotificationModal = ({
   dirty,
 }) => {
   const { formatMessage } = useIntl();
-  const { trackEvent } = useTracking();
   const dispatch = useDispatch();
   const [isEditorShown, setShowEditor] = React.useState(data.notification.attributes.length > 0);
   const attributesValue =
@@ -281,9 +278,7 @@ const AddEditNotificationModal = ({
       switcher,
       number: isEditorShown ? length : undefined,
     };
-
-    trackEvent(PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_SAVE_BUTTON_IN_MODAL(eventParameters));
-    onSave(newFormValues);
+    onSave(newFormValues, eventParameters);
   };
 
   const okButton = {

diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/notifications/notifications.jsx b/app/src/pages/inside/projectSettingsPageContainer/content/notifications/notifications.jsx
@@ -68,7 +68,7 @@ export const Notifications = () => {
   }, []);
 
   const toggleNotificationsEnabled = (isEnabled) => {
-    trackEvent(PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_CHECKBOX_AUTO_NOTIFICATIONS(isEnabled));
+    trackEvent(PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.SWITCH_ALL_NOTIFICATIONS(isEnabled));
     dispatch(updateNotificationStateAction(isEnabled));
   };
   // separate notifications by types
@@ -112,6 +112,3 @@ export const Notifications = () => {
     </SettingsPageContent>
   );
 };
-Notifications.propTypes = {
-  setHeaderTitleNode: PropTypes.func.isRequired,
-};
diff --git a/...c/pages/inside/projectSettingsPageContainer/content/notifications/ruleGroup/ruleGroup.jsx b/...c/pages/inside/projectSettingsPageContainer/content/notifications/ruleGroup/ruleGroup.jsx
@@ -103,7 +103,13 @@ export const RuleGroup = ({ pluginName, ruleDescription, rules, isPluginEnabled,
     pluginName === EMAIL && !isEmailIntegrationAvailable && isActivationRequired;
 
   const onToggleHandler = (isEnabled, notification) => {
-    trackEvent(PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.SWITCH_NOTIFICATION_RULE(isEnabled));
+    trackEvent(
+      PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.SWITCH_NOTIFICATION_RULE(
+        pluginNameInCamelCase,
+        notification.id,
+        isEnabled,
+      ),
+    );
 
     dispatch(
       updateProjectNotificationAction(
@@ -114,21 +120,39 @@ export const RuleGroup = ({ pluginName, ruleDescription, rules, isPluginEnabled,
 
   const handleRuleItemClick = (isShown) => {
     if (isShown) {
-      trackEvent(PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_TO_EXPAND_NOTIFICATIONS_DETAILS);
+      trackEvent(
+        PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_TO_EXPAND_NOTIFICATIONS_DETAILS(
+          pluginNameInCamelCase,
+        ),
+      );
     }
   };
 
   const togglePluginNotificationsEnabled = (isEnabled) => {
+    trackEvent(
+      PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.SWITCH_PLUGIN_NOTIFICATIONS(
+        pluginNameInCamelCase,
+        isEnabled,
+      ),
+    );
+
     dispatch(
       updateNotificationStateAction(
         isEnabled,
         NOTIFICATIONS_PLUGIN_ATTRIBUTE_ENABLED_KEY(pluginNameInCamelCase),
       ),
     );
   };
-  const confirmAdd = (newNotification) => {
+  const confirmAdd = (newNotification, eventParameters) => {
+    const trackAddingEvent = (id) =>
+      trackEvent(
+        PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_SAVE_BUTTON_IN_MODAL({
+          ...eventParameters,
+          ruleId: id,
+        }),
+      );
     const notification = convertNotificationCaseForSubmission(newNotification);
-    dispatch(addProjectNotificationAction(notification));
+    dispatch(addProjectNotificationAction(notification, trackAddingEvent));
   };
 
   const confirmDelete = (id) => {
@@ -147,7 +171,9 @@ export const RuleGroup = ({ pluginName, ruleDescription, rules, isPluginEnabled,
   };
 
   const onAdd = () => {
-    trackEvent(PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_CREATE_RULE_BUTTON);
+    trackEvent(
+      PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_CREATE_RULE_BUTTON(pluginNameInCamelCase),
+    );
 
     dispatch(
       showModalAction({
@@ -165,7 +191,9 @@ export const RuleGroup = ({ pluginName, ruleDescription, rules, isPluginEnabled,
   };
 
   const onEdit = (notification) => {
-    trackEvent(PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_ICON_EDIT_NOTIFICATIONS);
+    trackEvent(
+      PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_ICON_EDIT_NOTIFICATIONS(pluginNameInCamelCase),
+    );
 
     dispatch(
       showModalAction({
@@ -183,7 +211,9 @@ export const RuleGroup = ({ pluginName, ruleDescription, rules, isPluginEnabled,
   };
 
   const onDelete = (notification) => {
-    trackEvent(PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_ICON_DELETE_NOTIFICATIONS);
+    trackEvent(
+      PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_ICON_DELETE_NOTIFICATIONS(pluginNameInCamelCase),
+    );
 
     dispatch(
       showModalAction({
@@ -196,7 +226,11 @@ export const RuleGroup = ({ pluginName, ruleDescription, rules, isPluginEnabled,
     );
   };
   const onCopy = (notification) => {
-    trackEvent(PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_ICON_DUPLICATE_NOTIFICATIONS);
+    trackEvent(
+      PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_ICON_DUPLICATE_NOTIFICATIONS(
+        pluginNameInCamelCase,
+      ),
+    );
 
     const { id, ...newNotification } = flatRule(notification);
     dispatch(
@@ -289,6 +323,7 @@ export const RuleGroup = ({ pluginName, ruleDescription, rules, isPluginEnabled,
                       },
                     }}
                     icon={arrowRightIcon}
+                    event={PROJECT_SETTINGS_NOTIFICATIONS_EVENTS.CLICK_CONFIGURE_INTEGRATION_LINK}
                   >
                     {formatMessage(messages.configureIntegration)}
                   </LinkComponent>