feat(tracking): add use ovh tracking in generator

ref: MANAGER-13929 Signed-off-by: Alex Boungnaseng <alex.boungnaseng.ext@corp.ovh.com>
ovh · Apr 22, 2024 · d2c01a6 · d2c01a6
1 parent 625c64e
commit d2c01a6
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 60 deletions.
diff --git a/packages/components/ovh-shell/src/plugin/tracking/tracking.ts b/packages/components/ovh-shell/src/plugin/tracking/tracking.ts
@@ -12,7 +12,7 @@ export type RegionsTrackingConfig = {
 
 export interface TrackingConfig {
   config: {
-    level1: string;
+    level1?: string;
     level2: string;
     level3?: string;
     level4?: string;

diff --git a/packages/manager/core/generator/app/conditional-templates/dashboard/_layout.tsx.hbs b/packages/manager/core/generator/app/conditional-templates/dashboard/_layout.tsx.hbs
@@ -65,24 +65,10 @@ export default function DashboardPage() {
     title: serviceName,
   };
 
-  const linkProps = {
-    label: t('manager_dashboard_back_link'),
-    href: '/',
-    target: OdsHTMLAnchorElementTarget._blank,
-    type: LinkType.back,
-  };
-
-  const onClickReturn = (href: string) => navigate(href);
-
   return (
     <div>
       <DashboardLayout
         header={header}
-        {{#if this.isPCI}}
-        {{else}}
-        linkProps={linkProps}
-        onClickReturn={() => onClickReturn(linkProps.href)}
-        {{/if}}
         tabs={
           <OsdsTabs panel={panel}>
             <OsdsTabBar slot="top">

diff --git a/packages/manager/core/generator/app/conditional-templates/onboarding/index.tsx.hbs b/packages/manager/core/generator/app/conditional-templates/onboarding/index.tsx.hbs
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Card, OnboardingLayout } from "@ovhcloud/manager-components";
-import { useGuideUtils } from '@/hooks/useGuideUtils';
+import useGuideUtils from '@/hooks/useGuideUtils';
 import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
 import onboardingImgSrc from "./onboarding-img.png";
 

diff --git a/packages/manager/core/generator/app/index.js b/packages/manager/core/generator/app/index.js
@@ -8,6 +8,7 @@ import {
   createTranslations,
   createApiQueryFilesActions,
 } from '../utils/create-structure-helpers.js';
+import { UNIVERSES, SUB_UNIVERSES, LEVEL2 } from './universes.constant.js';
 
 const appDirectory = dirname(fileURLToPath(import.meta.url));
 
@@ -190,7 +191,7 @@ export default (plop) => {
       {
         type: 'input',
         name: 'serviceKey',
-        message: 'What is the service key ?',
+        message: 'What is the service key in listing page ?',
         when: (data) => {
           // Add variables for templates
           data.hasListing = data.templates.includes('listing');
@@ -201,6 +202,33 @@ export default (plop) => {
         },
         validate: (input) => input.length > 0,
       },
+      {
+        type: 'list',
+        name: 'level2',
+        message: 'What is the level2 of the app ? (tracking)',
+        choices: Object.keys(LEVEL2).map((element) => ({
+          name: `${element} - ${LEVEL2[element]}`,
+          value: element,
+        })),
+      },
+      {
+        type: 'list',
+        name: 'universe',
+        message: 'What is the universe of the app ? (tracking)',
+        choices: UNIVERSES.map((element) => ({
+          name: element,
+          value: element,
+        })),
+      },
+      {
+        type: 'list',
+        name: 'subuniverse',
+        message: 'What is the subuniverse of the app ? (tracking)',
+        choices: SUB_UNIVERSES.map((element) => ({
+          name: element,
+          value: element,
+        })),
+      },
     ],
     actions: ({
       apiV6Endpoints,

diff --git a/packages/manager/core/generator/app/templates/src/index.tsx.hbs b/packages/manager/core/generator/app/templates/src/index.tsx.hbs
@@ -10,8 +10,19 @@ import '@ovhcloud/ods-theme-blue-jeans/dist/index.css';
 import './global.css';
 import './vite-hmr';
 
+import { UNIVERSE, SUB_UNIVERSE, APP_NAME, LEVEL2 } from './tracking.constant';
+
+const trackingContext = {
+  chapter1: UNIVERSE,
+  chapter2: SUB_UNIVERSE,
+  chapter3: APP_NAME,
+  appName: APP_NAME,
+  pageTheme: UNIVERSE,
+  level2Region: LEVEL2,
+};
+
 const init = async (appName: string) => {
-  const context = await initShellContext(appName);
+  const context = await initShellContext(appName, trackingContext);
 
   await initI18n({
     context,
@@ -21,6 +32,7 @@ const init = async (appName: string) => {
   });
 
   const region = context.environment.getRegion();
+  context.shell.tracking.setConfig(region, LEVEL2);
   try {
     await import(`./config-${region}.js`);
   } catch (error) {

diff --git a/packages/manager/core/generator/app/templates/src/pages/layout.tsx.hbs b/packages/manager/core/generator/app/templates/src/pages/layout.tsx.hbs
@@ -1,31 +1,32 @@
 import React, { useEffect, useContext } from 'react';
 import { defineCurrentPage } from '@ovh-ux/request-tagger';
 import { Outlet, useLocation, useMatches } from 'react-router-dom';
-import { useRouting } from '@ovh-ux/manager-react-shell-client';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import {
+  useOvhTracking,
+  useRouteSynchro,
+} from '@ovh-ux/manager-react-shell-client';
+import { LEVEL2 } from './../tracking.constant';
 
 export default function Layout() {
   const location = useLocation();
-  const routing = useRouting();
   const { shell } = useContext(ShellContext);
   const matches = useMatches();
+  const { trackCurrentPage } = useOvhTracking();
+  useRouteSynchro();
 
   useEffect(() => {
     const match = matches.slice(-1);
     defineCurrentPage(`app.{{appName}}-${match[0]?.id}`);
   }, [location]);
 
   useEffect(() => {
-    shell.ux.hidePreloader();
-  }, []);
+    trackCurrentPage();
+  }, [location]);
 
   useEffect(() => {
-    routing.stopListenForHashChange();
+    shell.ux.hidePreloader();
   }, []);
 
-  useEffect(() => {
-    routing.onHashChange();
-  }, [location]);
-
   return <Outlet />;
 }
diff --git a/packages/manager/core/generator/app/templates/src/routes.tsx.hbs b/packages/manager/core/generator/app/templates/src/routes.tsx.hbs
@@ -1,6 +1,7 @@
 import React from 'react';
 import { RouteObject } from 'react-router-dom';
 import NotFound from './pages/404';
+import { PageType } from '@ovh-ux/manager-react-shell-client';
 
 const lazyRouteConfig = (importFn: CallableFunction): Partial<RouteObject> => {
   return {
@@ -24,6 +25,12 @@ export const Routes: any = [
         id: 'listing',
         path: '',
         ...lazyRouteConfig(() => import('@/pages/listing')),
+        handle: {
+          tracking: {
+            pageName: 'listing',
+            pageType: PageType.listing,
+          },
+        },
       },
       {
         path: ':serviceName',
@@ -33,18 +40,36 @@ export const Routes: any = [
             id: 'dashboard',
             path: '',
             ...lazyRouteConfig(() => import('@/pages/dashboard/index')),
+            handle: {
+              tracking: {
+                pageName: 'dashboard',
+                pageType: PageType.dashboard,
+              },
+            },
           },
           {
-            id: 'dashboard.tab2',
+            id: 'tab2',
             path: 'Tab2',
             ...lazyRouteConfig(() => import('@/pages/dashboard/Tab2')),
+            handle: {
+              tracking: {
+                pageName: 'tab2',
+                pageType: PageType.dashboard,
+              },
+            },
           },
         ],
       },
       {
         id: 'onboarding',
         path: 'onboarding',
         ...lazyRouteConfig(() => import('@/pages/onboarding')),
+        handle: {
+          tracking: {
+            pageName: 'onboarding',
+            pageType: PageType.onboarding,
+          },
+        },
       },
     ],
   },
@@ -63,6 +88,12 @@ export const Routes: any = [
         id: 'listing',
         path: '',
         ...lazyRouteConfig(() => import('@/pages/listing')),
+        handle: {
+          tracking: {
+            pageName: 'listing',
+            pageType: PageType.listing,
+          },
+        },
       },
       {
         path: ':serviceName',
@@ -72,20 +103,38 @@ export const Routes: any = [
             id: 'dashboard',
             path: '',
             ...lazyRouteConfig(
-              () => import('@/pages/dashboard/index'))
+              () => import('@/pages/dashboard/index')),
+            handle: {
+              tracking: {
+                pageName: 'dashboard',
+                pageType: PageType.dashboard,
+              },
+            },
           },
           {
             id: 'dashboard.tab2',
             path: 'Tab2',
             ...lazyRouteConfig(
-              () => import('@/pages/dashboard/Tab2'))
+              () => import('@/pages/dashboard/Tab2')),
+            handle: {
+              tracking: {
+                pageName: 'tab2',
+                pageType: PageType.dashboard,
+              },
+            },
           },
         ],
       },
       {
         id: 'onboarding',
         path: 'onboarding',
         ...lazyRouteConfig(() => import('@/pages/onboarding')),
+        handle: {
+          tracking: {
+            pageName: 'onboarding',
+            pageType: PageType.onboarding,
+          },
+        },
       },
     ],
   },

diff --git a/packages/manager/core/generator/app/templates/src/tracking.constant.ts.hbs b/packages/manager/core/generator/app/templates/src/tracking.constant.ts.hbs
@@ -0,0 +1,20 @@
+export const LEVEL2 = {
+  EU: {
+    config: {
+      level2: '{{level2}}',
+    },
+  },
+  CA: {
+    config: {
+      level2: '{{level2}}',
+    },
+  },
+  US: {
+    config: {
+      level2: '{{level2}}',
+    },
+  },
+};
+export const UNIVERSE = '{{universe}}';
+export const SUB_UNIVERSE = '{{subuniverse}}';
+export const APP_NAME = '{{appName}}'
diff --git a/packages/manager/core/generator/app/universes.constant.js b/packages/manager/core/generator/app/universes.constant.js
@@ -0,0 +1,46 @@
+export const UNIVERSES = [
+  'Dedicated',
+  'Focus',
+  'Manager',
+  'Web',
+  'Server',
+  'Hub',
+  'Creation',
+  'Baremetal',
+  'HostedPrivatedCloud',
+  'PublicCloud',
+  'WebCloud',
+  'Telecom',
+  'Sunrise',
+  'Account-creation',
+];
+export const SUB_UNIVERSES = [
+  'Dedicated',
+  'Focus',
+  'Manager',
+  'Web',
+  'Server',
+  'Hub',
+  'Creation',
+  'Network',
+  'HostedPrivatedCloud',
+  'PublicCloud',
+  'WebCloud',
+  'Telecom',
+  'Sunrise',
+  'Account-creation',
+];
+export const LEVEL2 = {
+  0: '',
+  56: 'ManagerCloud',
+  57: 'ManagerDedicated',
+  67: 'Focus',
+  81: 'Manager',
+  84: 'ManagerWeb',
+  85: 'ManagerServer',
+  86: 'ManagerPublicCloud',
+  87: 'ManagerTelecom',
+  88: 'ManagerHub',
+  95: 'account-creation',
+  98: 'ManagerHostedPrivateCloud',
+};
diff --git a/packages/manager/core/shell-client/src/ShellContext.ts b/packages/manager/core/shell-client/src/ShellContext.ts
@@ -1,6 +1,7 @@
 import { Environment } from '@ovh-ux/manager-config';
 import { ShellClientApi } from '@ovh-ux/shell';
 import { createContext } from 'react';
+import { RegionsTrackingConfig } from '@ovh-ux/shell/dist/types/plugin/tracking/tracking';
 
 export type TrackingContextParams = {
   chapter1?: string;
@@ -9,6 +10,7 @@ export type TrackingContextParams = {
   pageTheme?: string;
   level2?: string;
   appName?: string;
+  level2Region?: RegionsTrackingConfig;
 };
 
 export type ShellContextType = {

diff --git a/packages/manager/core/shell-client/src/hooks/useOvhTracking.ts b/packages/manager/core/shell-client/src/hooks/useOvhTracking.ts
@@ -120,7 +120,9 @@ export const usePageTracking = () => {
 
 export const useOvhTracking = () => {
   const pageTracking = usePageTracking();
-  const { shell, tracking } = React.useContext(ShellContext);
+  const { shell, tracking, environment } = React.useContext(ShellContext);
+  const region = environment.getRegion();
+  const { level2 } = tracking.level2Region[region].config;
 
   return {
     trackCurrentPage: () => {
@@ -129,6 +131,7 @@ export const useOvhTracking = () => {
           getPageProps({
             ...tracking,
             ...pageTracking,
+            level2,
           }),
         );
       }
@@ -138,6 +141,7 @@ export const useOvhTracking = () => {
         getPageProps({
           ...tracking,
           ...params,
+          level2,
         }),
       );
     },
@@ -155,6 +159,7 @@ export const useOvhTracking = () => {
           buttonType,
           actionType,
           actions,
+          level2,
         }),
       );
     },