diff --git a/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx b/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx index 5fb25c28a604..0851c8d04889 100644 --- a/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx +++ b/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx @@ -87,10 +87,18 @@ export const DatagridActionMenu = (props: OKMS) => { export const DatagridServiceKeyCellName = (props: OkmsAllServiceKeys) => { const navigate = useNavigate(); + const { trackClick } = useOvhTracking(); + return (
{ + trackClick({ + location: PageLocation.datagrid, + buttonType: ButtonType.link, + actionType: 'navigation', + actions: ['details_encryption_key'], + }); navigate(`${props?.id}`); }} label={props?.name} diff --git a/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx b/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx index a6305aa312ca..c84df307cae9 100644 --- a/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx +++ b/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx @@ -9,6 +9,11 @@ import { Links, } from '@ovh-ux/manager-react-components'; import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { + ButtonType, + PageLocation, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import { OkmsCredential } from '@/types/okmsCredential.type'; import { useFormattedDate } from '@/hooks/useFormattedDate'; import { CredentialStatus } from '../credentialStatus/CredentialStatus.component'; @@ -19,10 +24,17 @@ import { kmsIamActions } from '@/utils/iam/iam.constants'; export const DatagridCredentialCellName = (credential: OkmsCredential) => { const navigate = useNavigate(); + const { trackClick } = useOvhTracking(); return (
{ + trackClick({ + location: PageLocation.datagrid, + buttonType: ButtonType.link, + actionType: 'action', + actions: ['details_access_certificate'], + }); navigate(`${credential.id}`); }} label={credential.name} @@ -86,7 +98,7 @@ export const DatagridCredentialCellActions = (credential: OkmsCredential) => { const { t } = useTranslation('key-management-service/credential'); const okms = useContext(OkmsContext); const navigate = useNavigate(); - + const { trackClick } = useOvhTracking(); const { filename, href, isDisabled } = getDownloadCredentialParameters( credential, ); @@ -98,6 +110,13 @@ export const DatagridCredentialCellActions = (credential: OkmsCredential) => { href, download: filename, disabled: isDisabled, + onClick: () => + trackClick({ + location: PageLocation.datagrid, + buttonType: ButtonType.link, + actionType: 'action', + actions: ['download_access_certificate'], + }), }, { id: 2, @@ -105,8 +124,15 @@ export const DatagridCredentialCellActions = (credential: OkmsCredential) => { color: ODS_THEME_COLOR_INTENT.error, iamActions: [kmsIamActions.credentialDelete], urn: okms.iam.urn, - onClick: () => - navigate(`${ROUTES_URLS.credentialDelete}/${credential.id}`), + onClick: () => { + trackClick({ + location: PageLocation.datagrid, + buttonType: ButtonType.link, + actionType: 'action', + actions: ['delete_access_certificate'], + }); + navigate(`${ROUTES_URLS.credentialDelete}/${credential.id}`); + }, }, ]; diff --git a/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyDeactivateModal.component.tsx b/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyDeactivateModal.component.tsx index 72326d854947..17d957fbb24a 100644 --- a/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyDeactivateModal.component.tsx +++ b/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyDeactivateModal.component.tsx @@ -16,6 +16,12 @@ import { } from '@ovhcloud/ods-components'; import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; import { useNotifications } from '@ovh-ux/manager-react-components'; +import { + ButtonType, + PageLocation, + PageType, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import Modal from '@/components/Modal/Modal'; import { useUpdateOkmsServiceKey } from '@/data/hooks/useUpdateOkmsServiceKey'; @@ -41,7 +47,7 @@ export const ServiceKeyDeactivateModal = ({ const { addSuccess, clearNotifications } = useNotifications(); const { t } = useTranslation('key-management-service/serviceKeys'); const { t: tCommon } = useTranslation('key-management-service/common'); - + const { trackClick, trackPage } = useOvhTracking(); const navigate = useNavigate(); const closeModal = () => navigate('..'); @@ -55,9 +61,19 @@ export const ServiceKeyDeactivateModal = ({ t('key_management_service_service-keys_deactivation_success'), true, ); + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'deactivate_encryption_key', + }); + closeModal(); + }, + onError: () => { + trackPage({ + pageType: PageType.bannerError, + pageName: 'deactivate_encryption_key', + }); closeModal(); }, - onError: closeModal, }); const onUpdateServiceKeyStatus = () => { @@ -140,6 +156,12 @@ export const ServiceKeyDeactivateModal = ({ variant={ODS_BUTTON_VARIANT.stroked} color={ODS_THEME_COLOR_INTENT.primary} onClick={() => { + trackClick({ + location: PageLocation.popup, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['cancel'], + }); navigate('..'); }} > @@ -149,7 +171,15 @@ export const ServiceKeyDeactivateModal = ({ disabled={!deactivationReason || isPending || undefined} slot="actions" color={ODS_THEME_COLOR_INTENT.primary} - onClick={onUpdateServiceKeyStatus} + onClick={() => { + trackClick({ + location: PageLocation.popup, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['confirm'], + }); + onUpdateServiceKeyStatus(); + }} aria-label="edit-name-okms" > {t('key_management_service_service-keys_deactivation_button_confirm')} diff --git a/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyEditNameModal.component.tsx b/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyEditNameModal.component.tsx index 7b259e3df195..fecdf3293d77 100644 --- a/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyEditNameModal.component.tsx +++ b/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyEditNameModal.component.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; +import { PageType, useOvhTracking } from '@ovh-ux/manager-react-shell-client'; import { OsdsButton, OsdsFormField, @@ -40,6 +41,7 @@ export const ServiceKeyEditNameModal = ({ const { addSuccess, clearNotifications } = useNotifications(); const { t } = useTranslation('key-management-service/serviceKeys'); const { t: tCommon } = useTranslation('key-management-service/common'); + const { trackPage } = useOvhTracking(); const navigate = useNavigate(); @@ -54,9 +56,19 @@ export const ServiceKeyEditNameModal = ({ t('key_management_service_service-keys_update_name_success'), true, ); + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'rename_encryption_key', + }); + closeModal(); + }, + onError: () => { + trackPage({ + pageType: PageType.bannerError, + pageName: 'rename_encryption_key', + }); closeModal(); }, - onError: closeModal, }); const getErrorMessage = (error: ServiceKeyNameErrorsType) => { diff --git a/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx b/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx index fc9c018140e2..786815747890 100644 --- a/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx +++ b/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx @@ -31,6 +31,17 @@ vi.mock('react-router-dom', () => ({ useNavigate: vi.fn(() => vi.fn()), })); +vi.mock('@ovh-ux/manager-react-shell-client', async (importOriginal) => { + const mod = await importOriginal< + typeof import('@ovh-ux/manager-react-shell-client') + >(); + + return { + ...mod, + useOvhTracking: vi.fn(() => vi.fn()), + }; +}); + vi.mock('@/data/hooks/useDeleteOkmsServiceKey', () => ({ useDeleteOkmsServiceKey: vi.fn(() => ({ deleteKmsServiceKey: vi.fn(), diff --git a/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx b/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx index 4fb4b11cc99e..84423c38b2d8 100644 --- a/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx +++ b/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx @@ -5,6 +5,12 @@ import { import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; +import { + ButtonType, + PageLocation, + PageType, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import { useDeleteOkmsServiceKey } from '@/data/hooks/useDeleteOkmsServiceKey'; import { useUpdateOkmsServiceKey } from '@/data/hooks/useUpdateOkmsServiceKey'; import { ROUTES_URLS } from '@/routes/routes.constants'; @@ -24,6 +30,9 @@ const useServiceKeyActionsList = ( const { t } = useTranslation('key-management-service/serviceKeys'); const { addSuccess, clearNotifications } = useNotifications(); const navigate = useNavigate(); + const { trackClick, trackPage } = useOvhTracking(); + const trackLocation = isListMode ? PageLocation.datagrid : PageLocation.page; + const { deleteKmsServiceKey, isPending: deleteIsPending, @@ -32,8 +41,17 @@ const useServiceKeyActionsList = ( keyId: okmsKey?.id, onSuccess: () => { navigate(`/${okms.id}/${ROUTES_URLS.keys}`); + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'delete_encryption_key', + }); + }, + onError: () => { + trackPage({ + pageType: PageType.bannerError, + pageName: 'delete_encryption_key', + }); }, - onError: () => {}, }); const { @@ -48,8 +66,17 @@ const useServiceKeyActionsList = ( t('key_management_service_service-keys_reactivate_success'), true, ); + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'reactivate_encryption_key', + }); + }, + onError: () => { + trackPage({ + pageType: PageType.bannerError, + pageName: 'reactivate_encryption_key', + }); }, - onError: () => {}, }); const items: ActionMenuItem[] = []; @@ -64,6 +91,14 @@ const useServiceKeyActionsList = ( JSON.stringify(okmsKey?.keys), )}`, download: `${okmsKey?.name}.jwk`, + onClick: () => { + trackClick({ + location: trackLocation, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['download_encryption_key'], + }); + }, }); } if (okmsKey?.state === OkmsServiceKeyState.active) { @@ -72,6 +107,12 @@ const useServiceKeyActionsList = ( label: t('key_management_service_service-keys_link_deactivate_key'), color: ODS_THEME_COLOR_INTENT.primary, onClick: () => { + trackClick({ + location: trackLocation, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['deactivate_encryption_key'], + }); return isListMode ? navigate(`${ROUTES_URLS.serviceKeyDeactivate}/${okmsKey?.id}`) : navigate( @@ -94,12 +135,20 @@ const useServiceKeyActionsList = ( label: t('key_management_service_service-keys_link_reactivate_key'), color: ODS_THEME_COLOR_INTENT.primary, disabled: updateIsPending, - onClick: () => updateKmsServiceKey({ state: OkmsServiceKeyState.active }), iamActions: [ kmsIamActions.serviceKeyUpdate, kmsIamActions.serviceKeyActivate, ], urn: okmsKey?.iam.urn, + onClick: () => { + trackClick({ + location: trackLocation, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['reactivate_encryption_key'], + }); + updateKmsServiceKey({ state: OkmsServiceKeyState.active }); + }, }); } if ( @@ -112,9 +161,17 @@ const useServiceKeyActionsList = ( color: ODS_THEME_COLOR_INTENT.error, disabled: okmsKey?.state === OkmsServiceKeyState.active || deleteIsPending, - onClick: () => deleteKmsServiceKey(), iamActions: [kmsIamActions.serviceKeyDelete], urn: okmsKey?.iam.urn, + onClick: () => { + trackClick({ + location: trackLocation, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['delete_encryption_key'], + }); + deleteKmsServiceKey(); + }, }); } return items; diff --git a/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx index b3347561389d..7040c4c6a4d7 100644 --- a/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx +++ b/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx @@ -8,6 +8,11 @@ import { useOutletContext, useParams, } from 'react-router-dom'; +import { + ButtonType, + PageLocation, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import { BaseLayout, ErrorBanner, @@ -42,6 +47,7 @@ export function useOutletCredential() { } const CredentialDashboard = () => { + const { trackClick } = useOvhTracking(); const navigate = useNavigate(); const { t } = useTranslation('key-management-service/credential'); const [activePanel, setActivePanel] = useState(''); @@ -118,13 +124,29 @@ const CredentialDashboard = () => { 'key_management_service_credential_dashboard_backlink', )} message={} - onClickReturn={() => navigate(`/${okmsId}/${ROUTES_URLS.credentials}`)} + onClickReturn={() => { + navigate(`/${okmsId}/${ROUTES_URLS.credentials}`); + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.link, + actionType: 'navigation', + actions: ['return_listing_page'], + }); + }} tabs={ { + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.tab, + actionType: 'navigation', + actions: ['general-informations'], + }); + }} > { { + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.tab, + actionType: 'navigation', + actions: ['identities'], + }); + }} > (false); const { userList, groupList, serviceAccountList } = useIdentityData(); const { nichandle } = useContext(ShellContext).environment.getUser(); + const { trackClick } = useOvhTracking(); useEffect(() => { if (isRootAccount) { @@ -96,6 +102,12 @@ const CreateAddIdentities = ({ color={ODS_THEME_COLOR_INTENT.primary} size={ODS_BUTTON_SIZE.sm} onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['cancel'], + }); navigate(`/${okmsId}/${ROUTES_URLS.credentials}`); }} > @@ -108,7 +120,15 @@ const CreateAddIdentities = ({ variant={ODS_BUTTON_VARIANT.ghost} color={ODS_THEME_COLOR_INTENT.primary} size={ODS_BUTTON_SIZE.sm} - onClick={prevStep} + onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['previous'], + }); + prevStep(); + }} > {t( 'key_management_service_credential_create_identities_button_back_label', @@ -118,7 +138,15 @@ const CreateAddIdentities = ({ inline color={ODS_THEME_COLOR_INTENT.primary} size={ODS_BUTTON_SIZE.sm} - onClick={nextStep} + onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['confirm'], + }); + nextStep(); + }} disabled={ identityURNs.length > 25 || identityURNs.length === 0 || undefined } diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx index bdd13278305b..1be630be133c 100644 --- a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx +++ b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx @@ -1,4 +1,5 @@ import React, { Suspense, useEffect, useState } from 'react'; +import { PageType, useOvhTracking } from '@ovh-ux/manager-react-shell-client'; import { BaseLayout, ErrorBanner, @@ -21,6 +22,7 @@ import { OkmsCredential } from '@/types/okmsCredential.type'; const CreateCredential = () => { const navigate = useNavigate(); + const { trackPage } = useOvhTracking(); const { okmsId } = useParams(); const { data: okms, isLoading, error } = useOKMSById(okmsId); const { t } = useTranslation('key-management-service/credential'); @@ -36,8 +38,17 @@ const CreateCredential = () => { okmsId, onSuccess: (credential) => { setOkmsCredential(credential); + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'create_access_certificate', + }); + }, + onError: () => { + trackPage({ + pageType: PageType.bannerError, + pageName: 'create_access_certificate', + }); }, - onError: () => {}, }); const breadcrumbItems: BreadcrumbItem[] = [ diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateGeneralInformations.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateGeneralInformations.component.tsx index 2ccfe170541c..ce4d29461b59 100644 --- a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateGeneralInformations.component.tsx +++ b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateGeneralInformations.component.tsx @@ -5,6 +5,11 @@ import { OsdsButton } from '@ovhcloud/ods-components/react'; import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components'; import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; import { useNavigate, useParams } from 'react-router-dom'; +import { + ButtonType, + PageLocation, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import { ROUTES_URLS } from '@/routes/routes.constants'; import { validateCredentialName } from '@/utils/credential/validateCredentialName'; import { validateCredentialDescription } from '@/utils/credential/validateCredentialDescription'; @@ -46,6 +51,8 @@ const CreateGeneralInformations = ({ const { t } = useTranslation('key-management-service/credential'); const { okmsId } = useParams(); const navigate = useNavigate(); + const { trackClick } = useOvhTracking(); + const credentialNameError = validateCredentialName(name); const credentialDescriptionError = validateCredentialDescription(description); const credentialValidityError = validateValidityDate(validity); @@ -100,6 +107,12 @@ const CreateGeneralInformations = ({ variant={ODS_BUTTON_VARIANT.stroked} color={ODS_THEME_COLOR_INTENT.primary} onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['cancel'], + }); navigate(`/${okmsId}/${ROUTES_URLS.credentials}`); }} > @@ -109,7 +122,15 @@ const CreateGeneralInformations = ({ size={ODS_BUTTON_SIZE.md} inline color={ODS_THEME_COLOR_INTENT.primary} - onClick={nextStep} + onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['next'], + }); + nextStep(); + }} disabled={ !!credentialNameError || !!credentialDescriptionError || diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsCreationMethod.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsCreationMethod.component.tsx index 10533a5c089f..31a4fbf0e9f3 100644 --- a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsCreationMethod.component.tsx +++ b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsCreationMethod.component.tsx @@ -3,6 +3,11 @@ import { Description, Subtitle, } from '@ovh-ux/manager-react-components'; +import { + ButtonType, + PageLocation, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import { ODS_THEME_TYPOGRAPHY_SIZE, ODS_THEME_COLOR_INTENT, @@ -41,6 +46,7 @@ const CreateGeneralInformationsCreationMethod = ({ credentialCreationMethodError, }: CreateGeneralInformationsCreationMethodProps) => { const { t } = useTranslation('key-management-service/credential'); + const { trackClick } = useOvhTracking(); const getCreationMethodErrorMessage = ( error: CredentialCreationMethodErrorsType, @@ -65,7 +71,15 @@ const CreateGeneralInformationsCreationMethod = ({ setIsCustomCsr(false)} + onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['select_type_key', 'ovh_generated'], + }); + setIsCustomCsr(false); + }} > setIsCustomCsr(true)} + onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['select_type_key', 'custom'], + }); + setIsCustomCsr(true); + }} > { const { t } = useTranslation('key-management-service/credential'); + const { trackClick } = useOvhTracking(); return ( { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['toggle_root_identity', !isRootAccount ? 'on' : 'off'], + }); setIsRootAccount(!isRootAccount); }} > diff --git a/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/delete/DeleteCredentialModal.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/delete/DeleteCredentialModal.page.tsx index edbace35ce5b..a34fde526f73 100644 --- a/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/delete/DeleteCredentialModal.page.tsx +++ b/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/delete/DeleteCredentialModal.page.tsx @@ -1,20 +1,34 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate, useParams } from 'react-router-dom'; +import { PageType, useOvhTracking } from '@ovh-ux/manager-react-shell-client'; import { DeleteModal } from '@ovh-ux/manager-react-components'; import { useDeleteOkmsCredential } from '@/data/hooks/useDeleteOkmsCredential'; import { ROUTES_URLS } from '@/routes/routes.constants'; const DeleteCredentialPage = () => { const navigate = useNavigate(); + const { trackPage } = useOvhTracking(); const { okmsId, credentialId } = useParams(); const { t } = useTranslation('key-management-service/credential'); const { mutate, isPending } = useDeleteOkmsCredential({ okmsId, credentialId, - onError: () => navigate('..'), - onSuccess: () => navigate(`/${okmsId}/${ROUTES_URLS.credentials}`), + onSuccess: () => { + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'delete_access_certificate', + }); + navigate(`/${okmsId}/${ROUTES_URLS.credentials}`); + }, + onError: () => { + trackPage({ + pageType: PageType.bannerError, + pageName: 'delete_access_certificate', + }); + navigate('..'); + }, }); const onClose = () => { diff --git a/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/generalInformations.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/generalInformations.page.tsx index f8fc5507fba4..5ef8420a7c76 100644 --- a/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/generalInformations.page.tsx +++ b/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/generalInformations.page.tsx @@ -10,6 +10,11 @@ import { DashboardTileBlockItem, ManagerButton, } from '@ovh-ux/manager-react-components'; +import { + ButtonType, + PageLocation, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import { CredentialStatus } from '@/components/credential/credentialStatus/CredentialStatus.component'; import { TileValueDate } from '@/components/dashboard/tile-value-date/tileValueDate.component'; import CredentialCreationMethod from '@/components/credential/credentialCreationMethod/credentialCreationMethod.component'; @@ -32,6 +37,7 @@ const CredentialGeneralInformations = () => { const { okms, credential } = useOutletCredential(); const navigate = useNavigate(); const { t } = useTranslation('key-management-service/credential'); + const { trackClick } = useOvhTracking(); const { filename, href, isDisabled } = getDownloadCredentialParameters( credential, @@ -86,6 +92,14 @@ const CredentialGeneralInformations = () => { href={href} download={filename} disabled={isDisabled || undefined} + onClick={() => + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['download_access_certificate'], + }) + } > {t('key_management_service_credential_download')} @@ -93,8 +107,16 @@ const CredentialGeneralInformations = () => { size={ODS_BUTTON_SIZE.sm} color={ODS_THEME_COLOR_INTENT.error} variant={ODS_BUTTON_VARIANT.ghost} - onClick={() => navigate(ROUTES_URLS.credentialDelete)} iamActions={[kmsIamActions.credentialDelete]} + onClick={() => { + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['delete_access_certificate'], + }); + navigate(ROUTES_URLS.credentialDelete); + }} urn={okms.iam.urn} > {t('key_management_service_credential_delete')} diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx index 8906c7b5f36e..ca60f9670f2d 100644 --- a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx +++ b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx @@ -14,6 +14,11 @@ import { ODS_ICON_NAME, ODS_ICON_SIZE, } from '@ovhcloud/ods-components'; +import { + ButtonType, + PageLocation, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import Loading from '@/components/Loading/Loading'; import CredentialDatagrid from '../../../components/credential/credentialDatagrid/CredentialDatagrid'; import { ROUTES_URLS } from '@/routes/routes.constants'; @@ -24,6 +29,7 @@ const CredentialList = () => { const { t } = useTranslation('key-management-service/credential'); const navigate = useNavigate(); const okms = useContext(OkmsContext); + const { trackClick } = useOvhTracking(); const { isAuthorized, isLoading: isLoadingIam } = useAuthorizationIam( [kmsIamActions.credentialGet], @@ -44,6 +50,12 @@ const CredentialList = () => { variant={ODS_BUTTON_VARIANT.stroked} className={'w-fit'} onClick={() => { + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['create_access_certificate'], + }); navigate(ROUTES_URLS.createCredential); }} iamActions={[kmsIamActions.credentialCreate]} diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/delete/DeleteCredentialModal.page.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/delete/DeleteCredentialModal.page.tsx index 23470905d773..65fa99cbbcd9 100644 --- a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/delete/DeleteCredentialModal.page.tsx +++ b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/delete/DeleteCredentialModal.page.tsx @@ -1,19 +1,33 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate, useParams } from 'react-router-dom'; +import { PageType, useOvhTracking } from '@ovh-ux/manager-react-shell-client'; import { DeleteModal } from '@ovh-ux/manager-react-components'; import { useDeleteOkmsCredential } from '@/data/hooks/useDeleteOkmsCredential'; const DeleteCredentialPage = () => { const navigate = useNavigate(); + const { trackPage } = useOvhTracking(); const { okmsId, credentialId } = useParams(); const { t } = useTranslation('key-management-service/credential'); const { mutate, isPending } = useDeleteOkmsCredential({ okmsId, credentialId, - onError: () => navigate('..'), - onSuccess: () => navigate('..'), + onSuccess: () => { + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'delete_access_certificate', + }); + navigate('..'); + }, + onError: () => { + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'delete_access_certificate', + }); + navigate('..'); + }, }); const onClose = () => { diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx index aef8e9406129..7616dd5872c0 100644 --- a/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx +++ b/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx @@ -18,6 +18,11 @@ import { useDatagridSearchParams, } from '@ovh-ux/manager-react-components'; import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { + ButtonType, + PageLocation, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import { DatagridCellType, DatagridCreationDate, @@ -37,6 +42,8 @@ export default function Keys() { const { t } = useTranslation('key-management-service/serviceKeys'); const { t: tError } = useTranslation('error'); const navigate = useNavigate(); + const { trackClick } = useOvhTracking(); + const columns = [ { id: 'name', @@ -111,6 +118,12 @@ export default function Keys() { color={ODS_THEME_COLOR_INTENT.primary} variant={ODS_BUTTON_VARIANT.stroked} onClick={() => { + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['create_encryption_key'], + }); navigate(ROUTES_URLS.createKmsServiceKey); }} urn={okms.iam.urn} diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/CreateKey.page.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/CreateKey.page.tsx index 5c21e02cc45f..47d381448d1a 100644 --- a/packages/manager/apps/key-management-service/src/pages/serviceKey/CreateKey.page.tsx +++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/CreateKey.page.tsx @@ -29,6 +29,12 @@ import { } from '@ovhcloud/ods-components/react'; import { useTranslation } from 'react-i18next'; import { Outlet, useNavigate, useParams } from 'react-router-dom'; +import { + ButtonType, + PageLocation, + PageType, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import { ROUTES_URLS } from '@/routes/routes.constants'; import { OkmsServiceKeyReference } from '@/types/okmsServiceKeyReference.type'; import { @@ -82,13 +88,22 @@ export default function CreateKey() { >(); const [keyDisplayName, setKeyDisplayName] = useState(''); const serviceKeyNameError = validateServiceKeyName(keyDisplayName); - + const { trackClick, trackPage } = useOvhTracking(); const { createKmsServiceKey, isPending } = useCreateOkmsServiceKey({ okmsId, onSuccess: () => { navigate(`/${okmsId}/${ROUTES_URLS.keys}`); + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'create_encryption_key', + }); + }, + onError: () => { + trackPage({ + pageType: PageType.bannerError, + pageName: 'create_encryption_key', + }); }, - onError: () => {}, }); const getErrorMessage = (error: ServiceKeyNameErrorsType) => { @@ -298,7 +313,15 @@ export default function CreateKey() { > selectKeyType(reference)} + onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['select_type_key', reference.type], + }); + selectKeyType(reference); + }} /> ); @@ -407,21 +430,37 @@ export default function CreateKey() { OdsCheckboxCheckedChangeEventDetail >, ) => { + trackPage({ + pageType: PageType.bannerSuccess, + pageName: 'deactivate_encryption_key', + }); + let newOperations: OkmsServiceKeyOperations[][]; + if (event.detail.checked) { - setKeyOperations((prev) => [ - ...prev, - operation.value, - ]); + setKeyOperations((prev) => { + newOperations = [...prev, operation.value]; + return newOperations; + }); } else { const operationIndex = keyOperations.indexOf( operation.value, ); - const newOperations = [...keyOperations]; + newOperations = [...keyOperations]; newOperations.splice(operationIndex, 1); setKeyOperations(newOperations); } + + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: [ + 'select_use_key', + newOperations.flat().join('_'), + ], + }); }} > @@ -437,6 +476,12 @@ export default function CreateKey() { variant={ODS_BUTTON_VARIANT.stroked} color={ODS_THEME_COLOR_INTENT.primary} onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['cancel'], + }); navigate(`/${okmsId}/${ROUTES_URLS.keys}`); }} > @@ -446,7 +491,15 @@ export default function CreateKey() { size={ODS_BUTTON_SIZE.md} inline color={ODS_THEME_COLOR_INTENT.primary} - onClick={submitCreateKey} + onClick={() => { + trackClick({ + location: PageLocation.funnel, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['confirm'], + }); + submitCreateKey(); + }} disabled={ !!serviceKeyNameError || keyOperations.length === 0 || diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx index ef77e33875ca..1e531ae4d7c1 100644 --- a/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx +++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx @@ -21,6 +21,11 @@ import { ODS_ICON_SIZE, } from '@ovhcloud/ods-components'; import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { + ButtonType, + PageLocation, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import Breadcrumb from '@/components/Breadcrumb/Breadcrumb'; import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader'; import { useOkmsServiceKeyById } from '@/data/hooks/useOkmsServiceKeys'; @@ -46,6 +51,7 @@ export default function Key() { const { t } = useTranslation('key-management-service/serviceKeys'); const queryClient = useQueryClient(); const navigate = useNavigate(); + const { trackClick } = useOvhTracking(); const { data: okms, @@ -115,6 +121,12 @@ export default function Key() { }} onClickReturn={() => { navigate(`/${okmsId}/${ROUTES_URLS.keys}`); + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.link, + actionType: 'navigation', + actions: ['return_listing_page'], + }); }} backLinkLabel={t('key_management_service_service_keys_back_link')} message={} @@ -148,9 +160,17 @@ export default function Key() { circle variant={ODS_BUTTON_VARIANT.stroked} color={ODS_THEME_COLOR_INTENT.primary} - onClick={() => navigate(ROUTES_URLS.serviceKeyEditName)} urn={serviceKey.data.iam.urn} iamActions={[kmsIamActions.serviceKeyUpdate]} + onClick={() => { + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.button, + actionType: 'action', + actions: ['rename_encryption_key'], + }); + navigate(ROUTES_URLS.serviceKeyEditName); + }} > import('@/pages/dashboard/serviceKeyList/ServiceKeyList.page'), ), + handle: { + tracking: { + pageName: 'encryption_keys', + pageType: PageType.listing, + }, + }, children: [ { path: `${ROUTES_URLS.serviceKeyDeactivate}/${ROUTES_URLS.keyId}`, @@ -108,6 +120,12 @@ export default [ '@/pages/serviceKey/deactivateServiceKeyModal/DeactivateServiceKeyModal.page' ), ), + handle: { + tracking: { + pageName: 'deactivate_encryption_key', + pageType: PageType.popup, + }, + }, }, ], }, @@ -116,6 +134,12 @@ export default [ ...lazyRouteConfig(() => import('@/pages/dashboard/credentialList/CredentialList.page'), ), + handle: { + tracking: { + pageName: 'access_certificates', + pageType: PageType.listing, + }, + }, children: [ { path: `${ROUTES_URLS.credentialDelete}/${ROUTES_URLS.credentialId}`, @@ -124,6 +148,12 @@ export default [ '@/pages/dashboard/credentialList/delete/DeleteCredentialModal.page' ), ), + handle: { + tracking: { + pageName: 'delete_access_certificate', + pageType: PageType.popup, + }, + }, }, ], }, @@ -132,12 +162,24 @@ export default [ { path: `${ROUTES_URLS.okmsId}/${ROUTES_URLS.keys}/${ROUTES_URLS.createKmsServiceKey}`, ...lazyRouteConfig(() => import('@/pages/serviceKey/CreateKey.page')), + handle: { + tracking: { + pageName: 'create_encryption_key', + pageType: PageType.funnel, + }, + }, }, { path: `${ROUTES_URLS.okmsId}/${ROUTES_URLS.credentials}/${ROUTES_URLS.createCredential}`, ...lazyRouteConfig(() => import('@/pages/credential/create/CreateCredential.page'), ), + handle: { + tracking: { + pageName: 'create_access_certificate', + pageType: PageType.funnel, + }, + }, children: [ { path: ROUTES_URLS.createCredentialAddUserModal, @@ -176,6 +218,12 @@ export default [ '@/pages/credential/generalInformations/generalInformations.page' ), ), + handle: { + tracking: { + pageName: 'details_access_certificate', + pageType: PageType.dashboard, + }, + }, children: [ { path: ROUTES_URLS.credentialDelete, @@ -184,6 +232,12 @@ export default [ '@/pages/credential/generalInformations/delete/DeleteCredentialModal.page' ), ), + handle: { + tracking: { + pageName: 'delete_access_certificate', + pageType: PageType.popup, + }, + }, }, ], }, @@ -192,12 +246,24 @@ export default [ ...lazyRouteConfig(() => import('@/pages/credential/identities/identities.page'), ), + handle: { + tracking: { + pageName: 'details_identities', + pageType: PageType.dashboard, + }, + }, }, ], }, { path: `${ROUTES_URLS.okmsId}/${ROUTES_URLS.keys}/${ROUTES_URLS.keyId}`, ...lazyRouteConfig(() => import('@/pages/serviceKey/ServiceKey.page')), + handle: { + tracking: { + pageName: 'details_encryption_key', + pageType: PageType.dashboard, + }, + }, children: [ { path: ROUTES_URLS.serviceKeyEditName, @@ -206,6 +272,12 @@ export default [ '@/pages/serviceKey/editServiceKeyNameModal/EditServiceKeyNameModal.page' ), ), + handle: { + tracking: { + pageName: 'rename_encryption_key', + pageType: PageType.popup, + }, + }, }, { path: ROUTES_URLS.serviceKeyDeactivate, @@ -214,6 +286,12 @@ export default [ '@/pages/serviceKey/deactivateServiceKeyModal/DeactivateServiceKeyModal.page' ), ), + handle: { + tracking: { + pageName: 'deactivate_encryption_key', + pageType: PageType.popup, + }, + }, }, ], },