From d50ed35ea974e79d1aa03155386877dabb9d7ebe Mon Sep 17 00:00:00 2001
From: maria-hambardzumian <maria_hambardzumyan@epam.com>
Date: Mon, 7 Oct 2024 14:41:51 +0400
Subject: [PATCH] EPMRPP-93709 || GA Sidebar events part 2

---
 .../analytics/events/sidebarFooterEvents.js   | 14 ++++
 .../organizationsControl.jsx                  | 78 +++++++++++--------
 .../organizationsPopover.jsx                  | 10 ++-
 .../projectSidebar/projectSidebar.jsx         |  1 +
 4 files changed, 68 insertions(+), 35 deletions(-)

diff --git a/app/src/components/main/analytics/events/sidebarFooterEvents.js b/app/src/components/main/analytics/events/sidebarFooterEvents.js
index 76826976aa..0beb0840c3 100644
--- a/app/src/components/main/analytics/events/sidebarFooterEvents.js
+++ b/app/src/components/main/analytics/events/sidebarFooterEvents.js
@@ -35,6 +35,16 @@ export const SIDEBAR_EVENTS = {
     place: 'hover',
     icon_name: 'open_project_page',
   },
+  CLICK_ALL_ORGANIZATION_PROJECTS: {
+    ...getBasicClickEventParameters(SIDEBAR),
+    place: 'popover',
+    element_name: 'all_organization',
+  },
+  CLICK_PROJECT_NAME: {
+    ...getBasicClickEventParameters(SIDEBAR),
+    place: 'hover',
+    element_name: 'project_name',
+  },
   CLICK_PRIVACY_POLICY_LINK: {
     ...getBasicClickEventParameters(SIDEBAR),
     icon_name: 'privacy_policy',
@@ -43,6 +53,10 @@ export const SIDEBAR_EVENTS = {
     ...getBasicSearchEventParameters(SIDEBAR),
     element_name: 'search',
   },
+  onClickLevelHigher: (isProjectLevel) => ({
+    ...getBasicClickEventParameters(SIDEBAR),
+    element_name: isProjectLevel ? 'organization_name' : 'all_organizations',
+  }),
   onClickUpdateLink: (type) => ({
     ...getBasicClickEventParameters(SIDEBAR),
     element_name: 'update',
diff --git a/app/src/layouts/organizationsControl/organizationsControl.jsx b/app/src/layouts/organizationsControl/organizationsControl.jsx
index 5b8397f49b..db98801619 100644
--- a/app/src/layouts/organizationsControl/organizationsControl.jsx
+++ b/app/src/layouts/organizationsControl/organizationsControl.jsx
@@ -19,6 +19,8 @@ import Parser from 'html-react-parser';
 import classNames from 'classnames/bind';
 import Link from 'redux-first-router-link';
 import { withPopover } from 'componentLibrary/popover';
+import { useTracking } from 'react-tracking';
+import { SIDEBAR_EVENTS } from 'components/main/analytics/events';
 import ArrowLeftIcon from './img/arrow-left-inline.svg';
 import OpenPopoverIcon from './img/open-popover-inline.svg';
 import { OrganizationsPopover } from './organizationsPopover/organizationsPopover';
@@ -33,41 +35,51 @@ export const OrganizationsControl = ({
   link,
   titles,
   isExtendedNav,
-}) => (
-  <div className={cx('organizations-control-wrapper')} onClick={onClick}>
-    <button className={cx('short-title', { 'no-uppercase': !isExtendedNav })}>
-      {titles.shortTitle}
-    </button>
-    <button className={cx('organizations-control')} tabIndex={-1}>
-      <div>
-        <div
-          className={cx('organization-btn-wrapper', {
-            'not-extended': !isExtendedNav,
+}) => {
+  const { trackEvent } = useTracking();
+  return (
+    <div className={cx('organizations-control-wrapper')} onClick={onClick}>
+      <button className={cx('short-title', { 'no-uppercase': !isExtendedNav })}>
+        {titles.shortTitle}
+      </button>
+      <button className={cx('organizations-control')} tabIndex={-1}>
+        <div>
+          <div
+            className={cx('organization-btn-wrapper', {
+              'not-extended': !isExtendedNav,
+            })}
+          >
+            {isExtendedNav ? (
+              <>
+                <i className={cx('arrow-icon')}>{Parser(ArrowLeftIcon)}</i>
+                <Link
+                  to={link}
+                  className={cx('organization-btn')}
+                  onClick={() => {
+                    closeSidebar();
+                    trackEvent(SIDEBAR_EVENTS.onClickLevelHigher(titles.isProjectLevel));
+                  }}
+                >
+                  <div className={cx('top-title')}>{titles.topTitle}</div>
+                </Link>
+              </>
+            ) : (
+              <div className={cx('extended-top-title')}>{titles.topTitle}</div>
+            )}
+          </div>
+          {isExtendedNav ? <div className={cx('bottom-title')}>{titles.bottomTitle}</div> : null}
+        </div>
+        <i
+          className={cx('open-popover', {
+            action: isPopoverOpen,
           })}
         >
-          {isExtendedNav ? (
-            <>
-              <i className={cx('arrow-icon')}>{Parser(ArrowLeftIcon)}</i>
-              <Link to={link} className={cx('organization-btn')} onClick={closeSidebar}>
-                <div className={cx('top-title')}>{titles.topTitle}</div>
-              </Link>
-            </>
-          ) : (
-            <div className={cx('extended-top-title')}>{titles.topTitle}</div>
-          )}
-        </div>
-        {isExtendedNav ? <div className={cx('bottom-title')}>{titles.bottomTitle}</div> : null}
-      </div>
-      <i
-        className={cx('open-popover', {
-          action: isPopoverOpen,
-        })}
-      >
-        {Parser(OpenPopoverIcon)}
-      </i>
-    </button>
-  </div>
-);
+          {Parser(OpenPopoverIcon)}
+        </i>
+      </button>
+    </div>
+  );
+};
 
 OrganizationsControl.propTypes = {
   isPopoverOpen: PropTypes.bool.isRequired,
diff --git a/app/src/layouts/organizationsControl/organizationsPopover/organizationsPopover.jsx b/app/src/layouts/organizationsControl/organizationsPopover/organizationsPopover.jsx
index b43fe4a88a..7b05fda389 100644
--- a/app/src/layouts/organizationsControl/organizationsPopover/organizationsPopover.jsx
+++ b/app/src/layouts/organizationsControl/organizationsPopover/organizationsPopover.jsx
@@ -122,7 +122,10 @@ export const OrganizationsPopover = ({ closePopover, closeSidebar }) => {
             <NavLink
               to={{ type: PROJECTS_PAGE }}
               className={cx('all-organizations-link')}
-              onClick={onClose}
+              onClick={() => {
+                onClose();
+                trackEvent(SIDEBAR_EVENTS.CLICK_ALL_ORGANIZATION_PROJECTS);
+              }}
               activeClassName={cx('active')}
             >
               {formatMessage(messages.allOrganizations)}
@@ -149,7 +152,10 @@ export const OrganizationsPopover = ({ closePopover, closeSidebar }) => {
               organizationName={organizationName}
               organizationSlug={organizationSlug}
               projects={projects}
-              onClick={onClose}
+              onClick={() => {
+                onClose();
+                trackEvent(SIDEBAR_EVENTS.CLICK_PROJECT_NAME);
+              }}
               isOpen={currentOrganization === organizationSlug}
               isActive={currentOrganization === organizationSlug && !projectSlug}
               currentProject={projectSlug}
diff --git a/app/src/layouts/projectLayout/projectSidebar/projectSidebar.jsx b/app/src/layouts/projectLayout/projectSidebar/projectSidebar.jsx
index a49579fc4c..30291650af 100644
--- a/app/src/layouts/projectLayout/projectSidebar/projectSidebar.jsx
+++ b/app/src/layouts/projectLayout/projectSidebar/projectSidebar.jsx
@@ -166,6 +166,7 @@ export const ProjectSidebar = ({ onClickNavBtn }) => {
     shortTitle: `${projectName[0]}${projectName[projectName.length - 1]}`,
     topTitle: `${formatMessage(messages.organization)}: ${organizationName}`,
     bottomTitle: projectName,
+    isProjectLevel: true,
   };
 
   const createMainBlock = (openSidebar, closeSidebar, getIsSidebarCollapsed) => (