feat(pci.private-network): add recommended tracking

ref: TAPC-2557 Signed-off-by: tsiorifamonjena <[email protected]>
ovh · Feb 14, 2025 · 187cbd5 · 187cbd5
1 parent acea1e7
commit 187cbd5
Show file tree

Hide file tree

Showing 18 changed files with 394 additions and 73 deletions.
diff --git a/packages/manager/apps/pci-private-network/src/components/global-regions/DatagridBodyRow.tsx b/packages/manager/apps/pci-private-network/src/components/global-regions/DatagridBodyRow.tsx
@@ -21,6 +21,11 @@ import {
 } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { useHref } from 'react-router-dom';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { TSubnet } from '@/api/data/subnets';
 import { TAggregatedNetwork } from '@/api/data/network';
 
@@ -34,6 +39,7 @@ export default function DataGridBodyRow({
   network,
 }: Readonly<TDataGridBodyRow>) {
   const { t } = useTranslation('listing');
+  const { trackClick } = useOvhTracking();
 
   const renderText = (
     text: string | number | JSX.Element,
@@ -63,6 +69,7 @@ export default function DataGridBodyRow({
     icon: ODS_ICON_NAME,
     tooltipContent: string,
     href?: string,
+    handleButtonClick?: () => void,
   ) => (
     <OsdsTooltip>
       <OsdsButton
@@ -71,6 +78,7 @@ export default function DataGridBodyRow({
         color={ODS_THEME_COLOR_INTENT.primary}
         data-testid="dataGridBodyRow-delete_button"
         href={href}
+        onClick={handleButtonClick}
       >
         <OsdsIcon
           name={icon}
@@ -103,6 +111,14 @@ export default function DataGridBodyRow({
             href={`${projectUrl}/gateway`}
             color={ODS_THEME_COLOR_INTENT.primary}
             className="block"
+            onClick={() =>
+              trackClick({
+                location: PageLocation.datagrid,
+                buttonType: ButtonType.button,
+                actionType: 'action',
+                actions: ['details_gateway'],
+              })
+            }
           >
             {subnetDetail.gatewayName}
           </OsdsLink>
@@ -131,13 +147,27 @@ export default function DataGridBodyRow({
             ODS_ICON_NAME.SETTINGS,
             t('pci_projects_project_network_private_assign_gateway'),
             `${projectUrl}/gateway/new?network=${subnetDetail.networkId}&region=${subnetDetail.region}`,
+            () =>
+              trackClick({
+                location: PageLocation.datagrid,
+                buttonType: ButtonType.button,
+                actionType: 'action',
+                actions: ['add_gateway'],
+              }),
           )}
         {renderTooltipButton(
           ODS_ICON_NAME.BIN,
           t('pci_projects_project_network_private_delete'),
           useHref(
             `./delete?networkId=${subnetDetail.networkId}&region=${subnetDetail.region}`,
           ),
+          () =>
+            trackClick({
+              location: PageLocation.datagrid,
+              buttonType: ButtonType.button,
+              actionType: 'action',
+              actions: ['delete_privateNetwork'],
+            }),
         )}
       </td>
     </tr>

diff --git a/...anager/apps/pci-private-network/src/components/global-regions/GlobalRegions.component.tsx b/...anager/apps/pci-private-network/src/components/global-regions/GlobalRegions.component.tsx
@@ -28,7 +28,11 @@ import {
 } from '@ovhcloud/ods-components/react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { useNavigate } from 'react-router-dom';
 import { useProjectRegions } from '@/api/hooks/useRegions';
 import {
@@ -73,6 +77,8 @@ export default function GlobalRegionsComponent({
     filters,
   );
 
+  const { trackClick } = useOvhTracking();
+
   return (
     <div>
       <Notifications />
@@ -85,7 +91,15 @@ export default function GlobalRegionsComponent({
           size={ODS_BUTTON_SIZE.sm}
           variant={ODS_BUTTON_VARIANT.flat}
           color={ODS_THEME_COLOR_INTENT.primary}
-          onClick={() => navigate('./new')}
+          onClick={() => {
+            navigate('./new');
+            trackClick({
+              location: PageLocation.page,
+              buttonType: ButtonType.button,
+              actionType: 'action',
+              actions: ['add_privateNetwork'],
+            });
+          }}
         >
           <OsdsIcon
             name={ODS_ICON_NAME.ADD}

diff --git a/...es/manager/apps/pci-private-network/src/components/local-zones/DeleteAction.component.tsx b/...es/manager/apps/pci-private-network/src/components/local-zones/DeleteAction.component.tsx
@@ -1,3 +1,8 @@
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
   ODS_BUTTON_SIZE,
@@ -25,6 +30,7 @@ export default function DeleteAction({
   region,
 }: Readonly<TDeleteAction>) {
   const { t } = useTranslation('listing');
+  const { trackClick } = useOvhTracking();
 
   const hrefDelete = useHref(
     `./delete?networkId=${networkId}&region=${region}`,
@@ -39,6 +45,14 @@ export default function DeleteAction({
           color={ODS_THEME_COLOR_INTENT.primary}
           data-testid="DeleteAction-deleteButton"
           href={hrefDelete}
+          onClick={() =>
+            trackClick({
+              location: PageLocation.datagrid,
+              buttonType: ButtonType.button,
+              actionType: 'action',
+              actions: ['delete_privateNetwork'],
+            })
+          }
         >
           <OsdsIcon
             name={ODS_ICON_NAME.BIN}

diff --git a/packages/manager/apps/pci-private-network/src/components/local-zones/LocalZone.component.tsx b/packages/manager/apps/pci-private-network/src/components/local-zones/LocalZone.component.tsx
@@ -30,6 +30,11 @@ import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FilterCategories, FilterComparator } from '@ovh-ux/manager-core-api';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { useNavigate } from 'react-router-dom';
 import {
   useAggregatedLocalNetworks,
@@ -71,6 +76,8 @@ export default function LocalZoneComponent({
 
   const columns = useDatagridColumn();
 
+  const { trackClick } = useOvhTracking();
+
   return (
     <div>
       <Notifications />
@@ -83,7 +90,15 @@ export default function LocalZoneComponent({
           size={ODS_BUTTON_SIZE.sm}
           variant={ODS_BUTTON_VARIANT.flat}
           color={ODS_THEME_COLOR_INTENT.primary}
-          onClick={() => navigate('../new')}
+          onClick={() => {
+            navigate('../new');
+            trackClick({
+              location: PageLocation.page,
+              buttonType: ButtonType.button,
+              actionType: 'action',
+              actions: ['add_privateNetwork'],
+            });
+          }}
         >
           <OsdsIcon
             name={ODS_ICON_NAME.ADD}

diff --git a/packages/manager/apps/pci-private-network/src/hooks/usePageTracking.ts b/packages/manager/apps/pci-private-network/src/hooks/usePageTracking.ts
diff --git a/packages/manager/apps/pci-private-network/src/pages/Layout.tsx b/packages/manager/apps/pci-private-network/src/pages/Layout.tsx
@@ -1,16 +1,23 @@
 import { ErrorBanner } from '@ovh-ux/manager-react-components';
-import { Suspense, useContext } from 'react';
-import { Outlet, useRouteError } from 'react-router-dom';
+import { Suspense, useContext, useEffect } from 'react';
+import { Outlet, useLocation, useRouteError } from 'react-router-dom';
 import { ResponseAPIError, useProject } from '@ovh-ux/manager-pci-common';
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import {
+  ShellContext,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import HidePreloader from '@/core/HidePreloader';
 import ShellRoutingSync from '@/core/ShellRoutingSync';
-import usePageTracking from '@/hooks/usePageTracking';
 
 export default function Layout() {
   const { isSuccess } = useProject();
 
-  usePageTracking();
+  const location = useLocation();
+  const { trackCurrentPage } = useOvhTracking();
+
+  useEffect(() => {
+    trackCurrentPage();
+  }, [location]);
 
   return (
     <div className="application">

diff --git a/packages/manager/apps/pci-private-network/src/pages/delete/DeleteNetwork.page.tsx b/packages/manager/apps/pci-private-network/src/pages/delete/DeleteNetwork.page.tsx
@@ -2,6 +2,12 @@ import { useNotifications } from '@ovh-ux/manager-react-components';
 import { Translation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { ApiError } from '@ovh-ux/manager-core-api';
+import {
+  ButtonType,
+  PageLocation,
+  PageType,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import DeleteModal from '@/components/delete/DeleteModal.component';
 import { useDeleteNetwork } from '@/api/hooks/useNetwork';
 
@@ -16,6 +22,8 @@ export default function DeleteLocalZone() {
   const networkId = searchParams.get('networkId');
   const region = searchParams.get('region');
 
+  const { trackClick, trackPage } = useOvhTracking();
+
   const onClose = () => navigate('..');
 
   const { deleteNetwork, isPending } = useDeleteNetwork({
@@ -34,6 +42,10 @@ export default function DeleteLocalZone() {
         true,
       );
       onClose();
+      trackPage({
+        pageName: `delete_privateNetwork::${region}`,
+        pageType: PageType.bannerSuccess,
+      });
     },
     onError: (error: ApiError) => {
       onClose();
@@ -47,15 +59,35 @@ export default function DeleteLocalZone() {
         </Translation>,
         true,
       );
+      trackPage({
+        pageName: `delete_privateNetwork::${region}`,
+        pageType: PageType.bannerError,
+      });
     },
   });
 
   return (
     <DeleteModal
       networkId={networkId}
       isPending={isPending}
-      onClose={onClose}
-      onConfirm={deleteNetwork}
+      onClose={() => {
+        onClose();
+        trackClick({
+          location: PageLocation.popup,
+          buttonType: ButtonType.button,
+          actionType: 'action',
+          actions: ['delete_privateNetwork', 'cancel', region],
+        });
+      }}
+      onConfirm={() => {
+        deleteNetwork();
+        trackClick({
+          location: PageLocation.popup,
+          buttonType: ButtonType.button,
+          actionType: 'action',
+          actions: ['delete_privateNetwork', 'confirm', region],
+        });
+      }}
     />
   );
 }
diff --git a/packages/manager/apps/pci-private-network/src/pages/new/New.page.tsx b/packages/manager/apps/pci-private-network/src/pages/new/New.page.tsx
@@ -9,6 +9,11 @@ import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { useHref } from 'react-router-dom';
 import { PciDiscoveryBanner, useProject } from '@ovh-ux/manager-pci-common';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { useForm, FormProvider } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { NewPrivateNetworkForm } from '@/types/private-network-form.type';
@@ -45,6 +50,8 @@ export default function NewPage(): JSX.Element {
     resolver: zodResolver(NEW_PRIVATE_NETWORK_FORM_SCHEMA),
   });
 
+  const { trackClick } = useOvhTracking();
+
   useEffect(() => {
     clearNotifications();
   }, [project]);
@@ -67,7 +74,16 @@ export default function NewPage(): JSX.Element {
         ]}
       />
       <div className="my-8">
-        <BackButton />
+        <BackButton
+          onClick={() => {
+            trackClick({
+              location: PageLocation.funnel,
+              buttonType: ButtonType.link,
+              actionType: 'action',
+              actions: ['add_privateNetwork', 'back_previous_page'],
+            });
+          }}
+        />
       </div>
 
       <div className="header mb-10 mt-8">