EPMRPP-95676 || Add events for the search field and filter

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

@@ -31,4 +31,11 @@ export const ORGANIZATION_PAGE_EVENTS = {
     place: 'all_users',
     element_name: 'search',
   },
+  clickApplyFilterButton: (type, condition) => ({
+    ...BASIC_EVENT_PARAMETERS,
+    modal: 'filter_organization',
+    element_name: 'apply',
+    condition,
+    type,
+  }),
 };

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getBasicClickEventParameters } from '../common/ga4Utils';
+
+const PROJECTS_PAGE = 'project_page';
+
+const BASIC_EVENT_PARAMETERS = getBasicClickEventParameters(PROJECTS_PAGE);
+
+export const PROJECTS_PAGE_EVENTS = {
+  SEARCH_PROJECTS_FIELD: {
+    ...BASIC_EVENT_PARAMETERS,
+    place: 'projects',
+    element_name: 'search',
+  },
+  clickApplyFilterButton: (type, condition) => ({
+    ...BASIC_EVENT_PARAMETERS,
+    modal: 'filter_project_page',
+    element_name: 'apply',
+    condition,
+    type,
+  }),
+};

app/src/components/main/filterButton/filterButton.jsx

@@ -31,6 +31,7 @@ export const FilterButton = ({
   defaultFilters,
   initialState,
   filteredAction,
+  event,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -49,6 +50,7 @@ export const FilterButton = ({
           defaultFilters={defaultFilters}
           filteredAction={filteredAction}
           initialState={initialState}
+          event={event}
         />
       }
       placement="bottom-end"
@@ -88,4 +90,9 @@ FilterButton.propTypes = {
   defaultFilters: PropTypes.object,
   initialState: PropTypes.object.isRequired,
   filteredAction: PropTypes.func.isRequired,
+  event: PropTypes.func,
+};
+
+FilterButton.defaultProps = {
+  event: null,
 };

app/src/components/main/filterButton/filterContent/filterContent.jsx

@@ -16,6 +16,7 @@
 
 import classNames from 'classnames/bind';
 import { reduxForm } from 'redux-form';
+import { useTracking } from 'react-tracking';
 import { Button } from '@reportportal/ui-kit';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
@@ -40,8 +41,10 @@ export const FilterContentWrapped = ({
   reset,
   submitting,
   handleSubmit,
+  event,
 }) => {
   const { formatMessage } = useIntl();
+  const { trackEvent } = useTracking();
   const isDisabled = pristine || submitting;
 
   useEffect(() => {
@@ -70,6 +73,10 @@ export const FilterContentWrapped = ({
     setAppliedFiltersCount(appliedFiltersCount);
     filteredAction();
     setIsOpen(false);
+
+    if (event) {
+      trackEvent(event(fields));
+    }
   };
 
   return (
@@ -116,6 +123,11 @@ FilterContentWrapped.propTypes = {
   submitting: PropTypes.bool.isRequired,
   reset: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
+  event: PropTypes.func,
+};
+
+FilterContentWrapped.defaultProps = {
+  event: null,
 };
 
 export const FilterContent = reduxForm({

app/src/pages/instance/organizationsPage/organizationsPageHeader/organizationsFilter/organizationsFilter.jsx

@@ -19,6 +19,7 @@ import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { CONDITION_BETWEEN } from 'components/filterEntities/constants';
 import { fetchFilteredOrganizationsAction } from 'controllers/instance/organizations';
+import { ORGANIZATION_PAGE_EVENTS } from 'components/main/analytics/events/ga4Events/organizationsPageEvents';
 import {
   FilterButton,
   LAUNCHES_FILTER_NAME,
@@ -96,6 +97,15 @@ export const OrganizationsFilter = ({
     },
   };
 
+  const eventHandler = (fields) => {
+    const type = Object.keys(fields)
+      .filter((field) => fields[field].value)
+      .join('#');
+    const condition = fields[LAST_RUN_DATE_FILTER_NAME]?.value;
+
+    return ORGANIZATION_PAGE_EVENTS.clickApplyFilterButton(type, condition);
+  };
+
   const initialFilterState = {
     [LAST_RUN_DATE_FILTER_NAME]: entities[LAST_RUN_DATE_FILTER_NAME]?.value || timeRange[0].value,
     [LAUNCHES_FILTER_NAME]: entities[LAUNCHES_FILTER_NAME]?.value || '',
@@ -115,6 +125,7 @@ export const OrganizationsFilter = ({
       onFilterChange={onFilterChange}
       initialState={initialFilterState}
       filteredAction={() => dispatch(fetchFilteredOrganizationsAction())}
+      event={eventHandler}
     />
   );
 };

app/src/pages/organization/organizationProjectsPage/projectsPageHeader/projectsFilter/projectsFilter.jsx

@@ -30,6 +30,7 @@ import {
   messages as helpMessage,
 } from 'components/main/filterButton';
 import { fetchFilteredProjectAction } from 'controllers/organization/projects';
+import { PROJECTS_PAGE_EVENTS } from 'components/main/analytics/events/ga4Events/projectsPageEvents';
 import { messages } from './messages';
 
 export const ProjectsFilter = ({
@@ -96,6 +97,15 @@ export const ProjectsFilter = ({
     },
   };
 
+  const eventHandler = (fields) => {
+    const type = Object.keys(fields)
+      .filter((field) => fields[field].value)
+      .join('#');
+    const condition = fields[LAST_RUN_DATE_FILTER_NAME]?.value;
+
+    return PROJECTS_PAGE_EVENTS.clickApplyFilterButton(type, condition);
+  };
+
   const initialFilterState = {
     [LAST_RUN_DATE_FILTER_NAME]: entities[LAST_RUN_DATE_FILTER_NAME]?.value || timeRange[0].value,
     [LAUNCHES_FILTER_NAME]: entities[LAUNCHES_FILTER_NAME]?.value || '',
@@ -115,6 +125,7 @@ export const ProjectsFilter = ({
       onFilterChange={onFilterChange}
       initialState={initialFilterState}
       filteredAction={() => dispatch(fetchFilteredProjectAction())}
+      event={eventHandler}
     />
   );
 };

app/src/pages/organization/organizationProjectsPage/projectsPageHeader/projectsPageHeader.jsx

@@ -28,6 +28,7 @@ import { SearchField } from 'components/fields/searchField';
 import { SEARCH_KEY, NAMESPACE } from 'controllers/organization/projects/constants';
 import { withFilter } from 'controllers/filter';
 import { createFilterEntitiesURLContainer } from 'components/filterEntities/containers';
+import { PROJECTS_PAGE_EVENTS } from 'components/main/analytics/events/ga4Events/projectsPageEvents';
 import { ProjectsFilter } from './projectsFilter';
 import projectsIcon from './img/projects-inline.svg';
 import userIcon from './img/user-inline.svg';
@@ -99,6 +100,7 @@ export const ProjectsPageHeader = ({
                 searchValue={searchValue}
                 setSearchValue={setSearchValue}
                 placeholder={formatMessage(messages.searchPlaceholder)}
+                event={PROJECTS_PAGE_EVENTS.SEARCH_PROJECTS_FIELD}
               />
               <FilterEntitiesURLContainer
                 debounced={false}