EPMRPP-82207 || Add events for Documentation links in Project Settings

app/src/components/main/analytics/events/ga4Events/projectSettingsPageEvents.js

@@ -25,10 +25,7 @@ const DEFECT_TYPES = 'defect_types';
 const INTEGRATIONS = 'integrations';
 const PATTERN_ANALYSIS = 'pattern_analysis';
 const GENERAL = 'general';
-const BASIC_EVENT_PARAMETERS = {
-  ...getBasicClickEventParameters(PROJECT_SETTINGS),
-  element_name: 'button_submit',
-};
+const BASIC_EVENT_PARAMETERS_ANALYZER_TAB = getBasicClickEventParameters(PROJECT_SETTINGS);
 const BASIC_EVENT_PARAMETERS_NOTIFICATIONS = {
   ...getBasicClickEventParameters(PROJECT_SETTINGS),
   place: NOTIFICATIONS,
@@ -64,38 +61,48 @@ const getStatus = (status) => (status ? 'active' : 'disabled');
 const getSwitcher = (switcher) => (switcher ? 'on' : 'off');
 
 export const PROJECT_SETTINGS_ANALYZER_EVENTS = {
-  CLICK_SUBMIT_IN_INDEX_TAB: (number, status) => ({
-    ...BASIC_EVENT_PARAMETERS,
+  clickSubmitInIndexTab: (number, status) => ({
+    ...BASIC_EVENT_PARAMETERS_ANALYZER_TAB,
+    element_name: 'button_submit',
     place: `${ANALYZER}_index_settings`,
     number,
     status: getStatus(status),
   }),
 
-  CLICK_SUBMIT_IN_AUTO_ANALYZER_TAB: (number, status, condition) => ({
-    ...BASIC_EVENT_PARAMETERS,
+  clickSubmitInAutoAnalyzerTab: (number, status, condition) => ({
+    ...BASIC_EVENT_PARAMETERS_ANALYZER_TAB,
     place: `${ANALYZER}_auto_analyzer`,
+    element_name: 'button_submit',
     number,
     status: getStatus(status),
     condition: LAUNCH_ANALYZE_TYPES_TO_ANALYTICS_TITLES_MAP[condition],
   }),
 
-  CLICK_SUBMIT_IN_SIMILAR_ITEMS_TAB: (number) => ({
-    ...BASIC_EVENT_PARAMETERS,
+  clickSubmitInSimilarItemsTab: (number) => ({
+    ...BASIC_EVENT_PARAMETERS_ANALYZER_TAB,
     place: `${ANALYZER}_similar_items`,
+    element_name: 'button_submit',
     number,
   }),
 
-  CLICK_SUBMIT_IN_UNIQUE_ERRORS_TAB: (status, type) => ({
-    ...BASIC_EVENT_PARAMETERS,
+  clickSubmitInUniqueErrorsTab: (status, type) => ({
+    ...BASIC_EVENT_PARAMETERS_ANALYZER_TAB,
     place: `${ANALYZER}_unique_errors`,
     status: getStatus(status),
+    element_name: 'button_submit',
     type: type ? 'exclude' : 'include',
   }),
+
+  clickDocumentationLink: (place) => ({
+    ...BASIC_EVENT_PARAMETERS_ANALYZER_TAB,
+    place: `${ANALYZER}_${place}`,
+    link_name: 'documentation',
+  }),
 };
 
 export const PROJECT_SETTINGS_DEMO_DATA_EVENTS = {
   CLICK_GENERATE_DATA_IN_DEMO_DATA_TAB: {
-    ...BASIC_EVENT_PARAMETERS,
+    ...getBasicClickEventParameters(PROJECT_SETTINGS),
     element_name: 'button_generate_demo_data',
     place: 'demo_data',
   },
@@ -123,10 +130,11 @@ export const PROJECT_SETTINGS_NOTIFICATIONS_EVENTS = {
     switcher: getSwitcher(switcher),
   }),
 
-  CLICK_LINK_DOCUMENTATION: {
+  clickDocumentationLink: (place) => ({
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
+    ...(place && { place }),
     link_name: 'documentation',
-  },
+  }),
 
   CLICK_CREATE_RULE_BUTTON: {
     ...BASIC_EVENT_PARAMETERS_NOTIFICATIONS,
@@ -235,4 +243,9 @@ export const PROJECT_SETTINGS_PATTERN_ANALYSIS_EVENTS = {
     element_name: 'pattern_name',
     status: 'open',
   },
+  clickDocumentationLink: (place) => ({
+    ...BASIC_EVENT_PARAMETERS_PATTERN_ANALYSIS,
+    ...(place && { place }),
+    link_name: 'documentation',
+  }),
 };

app/src/pages/inside/profilePage/apiKeys/apiKeysBlock/apiKeysBlock.jsx

@@ -28,7 +28,6 @@ import { daysFromNow, createExternalLink } from 'common/utils';
 import { GhostButton } from 'components/buttons/ghostButton';
 import { docsReferences } from 'common/utils/referenceDictionary';
 import { PROFILE_EVENTS } from 'analyticsEvents/profilePageEvent';
-import { ENTER_KEY_CODE } from 'common/constants/keyCodes';
 import styles from './apiKeysBlock.scss';
 
 const cx = classNames.bind(styles);
@@ -79,22 +78,9 @@ export const ApiKeysBlock = ({ apiKeys }) => {
     }
   };
 
-  const onDocumentationKeyDown = (event) => {
-    const { keyCode } = event;
-    const { tagName } = event.target;
-
-    if (tagName === 'A' && keyCode === ENTER_KEY_CODE) {
-      trackEvent(PROFILE_EVENTS.CLICK_DOCUMENTATION_LINK_WITH_API_KEY);
-    }
-  };
-
   return (
     <>
-      <div
-        className={cx('description')}
-        onClick={onDocumentationClick}
-        onKeyDown={onDocumentationKeyDown}
-      >
+      <div className={cx('description')} onClick={onDocumentationClick}>
         {Parser(
           formatMessage(messages.description, {
             a: (data) =>

app/src/pages/inside/projectSettingsPageContainer/content/analyzerContainer/autoAnalysis/autoAnalysis.jsx

@@ -28,11 +28,10 @@ import { bindMessageToValidator, validate } from 'common/utils/validation';
 import { Dropdown } from 'componentLibrary/dropdown';
 import { Checkbox } from 'componentLibrary/checkbox';
 import { useTracking } from 'react-tracking';
-import Parser from 'html-react-parser';
 import { PROJECT_SETTINGS_ANALYZER_EVENTS } from 'analyticsEvents/projectSettingsPageEvents';
 import { docsReferences, createExternalLink } from 'common/utils';
 import { Layout } from '../../layout';
-import { FieldElement, LabeledPreloader } from '../../elements';
+import { FieldElement, LabeledPreloader, FormattedDescription } from '../../elements';
 import { messages } from './messages';
 import {
   ALL_MESSAGES_SHOULD_MATCH,
@@ -101,7 +100,7 @@ const AutoAnalysis = ({
     setPending(false);
 
     trackEvent(
-      PROJECT_SETTINGS_ANALYZER_EVENTS.CLICK_SUBMIT_IN_AUTO_ANALYZER_TAB(
+      PROJECT_SETTINGS_ANALYZER_EVENTS.clickSubmitInAutoAnalyzerTab(
         data[MIN_SHOULD_MATCH],
         data[ANALYZER_ENABLED],
         data[ANALYZER_MODE],
@@ -111,7 +110,7 @@ const AutoAnalysis = ({
     const numberOfLogLines = data[NUMBER_OF_LOG_LINES] === '-1' ? 'all' : data[NUMBER_OF_LOG_LINES];
 
     trackEvent(
-      PROJECT_SETTINGS_ANALYZER_EVENTS.CLICK_SUBMIT_IN_INDEX_TAB(
+      PROJECT_SETTINGS_ANALYZER_EVENTS.clickSubmitInIndexTab(
         numberOfLogLines,
         data[ALL_MESSAGES_SHOULD_MATCH],
       ),
@@ -122,12 +121,15 @@ const AutoAnalysis = ({
 
   return (
     <Layout
-      description={Parser(
-        formatMessage(messages.tabDescription, {
-          a: (data) =>
-            createExternalLink(data, docsReferences.autoAnalysisDocs, 'documentationLink'),
-        }),
-      )}
+      description={
+        <FormattedDescription
+          content={formatMessage(messages.tabDescription, {
+            a: (data) =>
+              createExternalLink(data, docsReferences.autoAnalysisDocs, 'documentationLink'),
+          })}
+          event={PROJECT_SETTINGS_ANALYZER_EVENTS.clickDocumentationLink('auto_analyzer')}
+        />
+      }
     >
       <form onSubmit={handleSubmit(submitHandler)}>
         <FieldElement

app/src/pages/inside/projectSettingsPageContainer/content/analyzerContainer/indexSettings/indexSettings.jsx

@@ -19,15 +19,15 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames/bind';
 import { reduxForm } from 'redux-form';
-import Parser from 'html-react-parser';
 import { Button } from 'componentLibrary/button';
 import { SETTINGS_PAGE_EVENTS } from 'components/main/analytics/events';
 import { useTracking } from 'react-tracking';
 import { showModalAction } from 'controllers/modal';
 import { useDispatch } from 'react-redux';
 import { docsReferences, createExternalLink } from 'common/utils';
+import { PROJECT_SETTINGS_ANALYZER_EVENTS } from 'analyticsEvents/projectSettingsPageEvents';
 import { Layout } from '../../layout';
-import { LabeledPreloader } from '../../elements';
+import { LabeledPreloader, FormattedDescription } from '../../elements';
 import { messages } from './messages';
 import styles from './indexSettings.scss';
 
@@ -52,12 +52,15 @@ const IndexSettings = ({ indexingRunning, analyzerUnavailableTitle, hasPermissio
 
   return (
     <Layout
-      description={Parser(
-        formatMessage(messages.tabDescription, {
-          a: (data) =>
-            createExternalLink(data, docsReferences.indexSettingsDocs, 'documentationLink'),
-        }),
-      )}
+      description={
+        <FormattedDescription
+          content={formatMessage(messages.tabDescription, {
+            a: (data) =>
+              createExternalLink(data, docsReferences.indexSettingsDocs, 'documentationLink'),
+          })}
+          event={PROJECT_SETTINGS_ANALYZER_EVENTS.clickDocumentationLink('index_settings')}
+        />
+      }
     >
       <div className={cx('index-block')}>
         <span className={cx('index-block-title')}>

app/src/pages/inside/projectSettingsPageContainer/content/analyzerContainer/similarItems/similarItems.jsx

@@ -18,7 +18,6 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { reduxForm } from 'redux-form';
-import Parser from 'html-react-parser';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
 import { Button } from 'componentLibrary/button';
 import { FieldNumber } from 'componentLibrary/fieldNumber';
@@ -29,7 +28,7 @@ import { PROJECT_SETTINGS_ANALYZER_EVENTS } from 'analyticsEvents/projectSetting
 import { docsReferences, createExternalLink } from 'common/utils';
 import { FIELD } from 'common/constants/dataAutomation';
 import { Layout } from '../../layout';
-import { LabeledPreloader, FieldElement } from '../../elements';
+import { LabeledPreloader, FieldElement, FormattedDescription } from '../../elements';
 import { messages } from './messages';
 import { SEARCH_LOGS_MIN_SHOULD_MATCH } from '../constants';
 
@@ -56,7 +55,7 @@ const SimilarItems = ({
     setPending(false);
 
     trackEvent(
-      PROJECT_SETTINGS_ANALYZER_EVENTS.CLICK_SUBMIT_IN_SIMILAR_ITEMS_TAB(
+      PROJECT_SETTINGS_ANALYZER_EVENTS.clickSubmitInSimilarItemsTab(
         data[SEARCH_LOGS_MIN_SHOULD_MATCH],
       ),
     );
@@ -66,12 +65,15 @@ const SimilarItems = ({
 
   return (
     <Layout
-      description={Parser(
-        formatMessage(messages.tabDescription, {
-          a: (data) =>
-            createExternalLink(data, docsReferences.similarItemsDocs, 'documentationLink'),
-        }),
-      )}
+      description={
+        <FormattedDescription
+          content={formatMessage(messages.tabDescription, {
+            a: (data) =>
+              createExternalLink(data, docsReferences.similarItemsDocs, 'documentationLink'),
+          })}
+          event={PROJECT_SETTINGS_ANALYZER_EVENTS.clickDocumentationLink('similar_items')}
+        />
+      }
     >
       <form onSubmit={handleSubmit(submitHandler)}>
         <FieldElement

app/src/pages/inside/projectSettingsPageContainer/content/analyzerContainer/uniqueErrors/uniqueErrors.jsx

@@ -18,15 +18,14 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { reduxForm } from 'redux-form';
-import Parser from 'html-react-parser';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
 import { Button } from 'componentLibrary/button';
 import { Dropdown } from 'componentLibrary/dropdown';
 import { Checkbox } from 'componentLibrary/checkbox';
 import { useTracking } from 'react-tracking';
 import { PROJECT_SETTINGS_ANALYZER_EVENTS } from 'analyticsEvents/projectSettingsPageEvents';
 import { docsReferences, createExternalLink } from 'common/utils';
-import { FieldElement, LabeledPreloader } from '../../elements';
+import { FieldElement, LabeledPreloader, FormattedDescription } from '../../elements';
 import { messages } from './messages';
 import { UNIQUE_ERROR_ENABLED, UNIQUE_ERROR_REMOVE_NUMBERS } from '../constants';
 import { formatFieldName } from '../utils';
@@ -73,7 +72,7 @@ const UniqueErrors = ({
     const type = JSON.parse(preparedData[UNIQUE_ERROR_REMOVE_NUMBERS]);
 
     trackEvent(
-      PROJECT_SETTINGS_ANALYZER_EVENTS.CLICK_SUBMIT_IN_UNIQUE_ERRORS_TAB(
+      PROJECT_SETTINGS_ANALYZER_EVENTS.clickSubmitInUniqueErrorsTab(
         preparedData[UNIQUE_ERROR_ENABLED],
         type,
       ),
@@ -84,12 +83,15 @@ const UniqueErrors = ({
 
   return (
     <Layout
-      description={Parser(
-        formatMessage(messages.tabDescription, {
-          a: (data) =>
-            createExternalLink(data, docsReferences.uniqueErrorsDocs, 'documentationLink'),
-        }),
-      )}
+      description={
+        <FormattedDescription
+          content={formatMessage(messages.tabDescription, {
+            a: (data) =>
+              createExternalLink(data, docsReferences.uniqueErrorsDocs, 'documentationLink'),
+          })}
+          event={PROJECT_SETTINGS_ANALYZER_EVENTS.clickDocumentationLink('unique_errors')}
+        />
+      }
     >
       <form onSubmit={handleSubmit(submitHandler)}>
         <FieldElement

app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypes.jsx

@@ -34,8 +34,7 @@ import { SystemMessage } from 'componentLibrary/systemMessage';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
 import { PROJECT_SETTINGS_DEFECT_TYPES_EVENTS } from 'analyticsEvents/projectSettingsPageEvents';
 import { docsReferences, createExternalLink } from 'common/utils';
-import { ENTER_KEY_CODE } from 'common/constants/keyCodes';
-import { Divider, TabDescription, MODAL_ACTION_TYPE_EDIT } from '../elements';
+import { Divider, TabDescription, MODAL_ACTION_TYPE_EDIT, FormattedDescription } from '../elements';
 import { MAX_DEFECT_TYPES_COUNT, WARNING_DEFECT_TYPES_COUNT } from './constants';
 import { SettingsPageContent } from '../settingsPageContent';
 import { DefectTypeRow } from './defectTypeRow';
@@ -98,20 +97,6 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
     );
   };
 
-  const handleDocumentationClick = (event) => {
-    const { tagName } = event.target;
-
-    if (tagName === 'A') {
-      trackEvent(PROJECT_SETTINGS_DEFECT_TYPES_EVENTS.CLICK_DOCUMENTATION_LINK);
-    }
-  };
-
-  const handleDocumentationKeyDown = ({ keyCode }) => {
-    if (keyCode === ENTER_KEY_CODE) {
-      trackEvent(PROJECT_SETTINGS_DEFECT_TYPES_EVENTS.CLICK_DOCUMENTATION_LINK);
-    }
-  };
-
   const defectTypesLength = useMemo(
     () => DEFECT_TYPES_SEQUENCE.reduce((acc, groupName) => defectTypes[groupName].length + acc, 0),
     [defectTypes],
@@ -159,13 +144,12 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
   return (
     <SettingsPageContent>
       <TabDescription>
-        <span onClick={handleDocumentationClick} onKeyDown={handleDocumentationKeyDown}>
-          {Parser(
-            formatMessage(messages.description, {
-              a: (data) => createExternalLink(data, docsReferences.workWithReports),
-            }),
-          )}
-        </span>
+        <FormattedDescription
+          content={formatMessage(messages.description, {
+            a: (data) => createExternalLink(data, docsReferences.workWithReports),
+          })}
+          event={PROJECT_SETTINGS_DEFECT_TYPES_EVENTS.CLICK_DOCUMENTATION_LINK}
+        />
       </TabDescription>
       <Divider />
       {(isInformationMessage || !canAddNewDefectType) && (