diff --git a/packages/manager/apps/okms/src/components/dashboard/downloadKmsPublicCaLink/DownloadKmsPublicCaLink.spec.tsx b/packages/manager/apps/okms/src/components/dashboard/downloadKmsPublicCaLink/DownloadKmsPublicCaLink.spec.tsx index b04da6492153..6bc885e02f7f 100644 --- a/packages/manager/apps/okms/src/components/dashboard/downloadKmsPublicCaLink/DownloadKmsPublicCaLink.spec.tsx +++ b/packages/manager/apps/okms/src/components/dashboard/downloadKmsPublicCaLink/DownloadKmsPublicCaLink.spec.tsx @@ -28,6 +28,10 @@ vi.mock('@/utils/dom/download', () => ({ initiateTextFileDownload: vi.fn(), })); +vi.mock('@ovh-ux/manager-react-shell-client', () => ({ + useOvhTracking: () => ({ trackClick: vi.fn() }), +})); + const mockOkms = { id: 'test-okms-id', region: 'test-region', @@ -55,6 +59,7 @@ const renderComponentAndGetLink = async ({ container, label, isLink: true, + timeout: 2000, }); return { downloadLink }; @@ -69,25 +74,38 @@ describe('DownloadKmsPublicCaLink component tests suite', () => { vi.clearAllMocks(); }); - test('should render publicCa download link correctly', async () => { - const { downloadLink } = await renderComponentAndGetLink({ - type: 'publicCa', + const buttons: { + type: CertificateType; + label: string; + }[] = [ + { + type: 'publicCaRest', label: 'key_management_service_dashboard_button_label_download_ca', - }); - expect(downloadLink).toBeInTheDocument(); - }); - - test('should render publicRsaCa download link correctly', async () => { - const { downloadLink } = await renderComponentAndGetLink({ - type: 'publicRsaCa', + }, + { + type: 'publicCaKmip', + label: 'key_management_service_dashboard_button_label_download_ca', + }, + { + type: 'publicCaRsaKmip', label: 'key_management_service_dashboard_button_label_download_rsa_ca', - }); - expect(downloadLink).toBeInTheDocument(); - }); + }, + ]; + + test.each(buttons)( + 'should render $type download link correctly', + async ({ type, label }) => { + const { downloadLink } = await renderComponentAndGetLink({ + type, + label, + }); + expect(downloadLink).toBeInTheDocument(); + }, + ); test('should download publicCa certificate when clicked', async () => { const { downloadLink } = await renderComponentAndGetLink({ - type: 'publicCa', + type: 'publicCaRest', label: 'key_management_service_dashboard_button_label_download_ca', }); @@ -108,7 +126,7 @@ describe('DownloadKmsPublicCaLink component tests suite', () => { test('should download publicRsaCa certificate when clicked', async () => { const { downloadLink } = await renderComponentAndGetLink({ - type: 'publicRsaCa', + type: 'publicCaRsaKmip', label: 'key_management_service_dashboard_button_label_download_rsa_ca', }); @@ -134,7 +152,7 @@ describe('DownloadKmsPublicCaLink component tests suite', () => { ); const { downloadLink } = await renderComponentAndGetLink({ - type: 'publicCa', + type: 'publicCaRest', label: 'key_management_service_dashboard_button_label_download_ca', }); diff --git a/packages/manager/apps/okms/src/components/dashboard/downloadKmsPublicCaLink/DownloadKmsPublicCaLink.tsx b/packages/manager/apps/okms/src/components/dashboard/downloadKmsPublicCaLink/DownloadKmsPublicCaLink.tsx index 1293074da863..f3eec50611cd 100644 --- a/packages/manager/apps/okms/src/components/dashboard/downloadKmsPublicCaLink/DownloadKmsPublicCaLink.tsx +++ b/packages/manager/apps/okms/src/components/dashboard/downloadKmsPublicCaLink/DownloadKmsPublicCaLink.tsx @@ -1,8 +1,13 @@ -import React, { useMemo, useState } from 'react'; +import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNotifications } from '@ovh-ux/manager-react-components'; import { OdsLink, OdsSpinner } from '@ovhcloud/ods-components/react'; import { ODS_BUTTON_COLOR } from '@ovhcloud/ods-components'; +import { + ButtonType, + PageLocation, + useOvhTracking, +} from '@ovh-ux/manager-react-shell-client'; import { getOkmsPublicCa } from '@/data/api/okms'; import { initiateTextFileDownload } from '@/utils/dom/download'; import { @@ -11,7 +16,16 @@ import { } from './downloadKmsPublicCaLink.constants'; import { OKMS } from '@/types/okms.type'; -export type CertificateType = 'publicCa' | 'publicRsaCa'; +export type CertificateType = + | 'publicCaRest' + | 'publicCaKmip' + | 'publicCaRsaKmip'; + +type ButtonResource = { + label: string; + filename: string; + tracking: string; +}; type DownloadCaButtonProps = { okms: OKMS; @@ -25,22 +39,25 @@ export const DownloadKmsPublicCaLink = ({ const { t } = useTranslation('key-management-service/dashboard'); const [loading, setLoading] = useState(false); const { addError } = useNotifications(); + const { trackClick } = useOvhTracking(); - const resources = useMemo( - () => ({ - publicCa: { - label: t('key_management_service_dashboard_button_label_download_ca'), - filename: PUBLIC_CA_FILENAME, - }, - publicRsaCa: { - label: t( - 'key_management_service_dashboard_button_label_download_rsa_ca', - ), - filename: PUBLIC_RSA_CA_FILENAME, - }, - }), - [], - ); + const resources: Record = { + publicCaRest: { + label: t('key_management_service_dashboard_button_label_download_ca'), + filename: PUBLIC_CA_FILENAME, + tracking: 'download_rest-api-endpoint-ca', + }, + publicCaKmip: { + label: t('key_management_service_dashboard_button_label_download_ca'), + filename: PUBLIC_RSA_CA_FILENAME, + tracking: 'download_kmip-endpoint-ca', + }, + publicCaRsaKmip: { + label: t('key_management_service_dashboard_button_label_download_rsa_ca'), + filename: PUBLIC_RSA_CA_FILENAME, + tracking: 'download_kmip-endpoint-ca-rsa', + }, + }; const handleDownloadCa = async ( event: React.MouseEvent, @@ -52,14 +69,22 @@ export const DownloadKmsPublicCaLink = ({ const certificates = await getOkmsPublicCa(okms.id); const content: Record = { - publicCa: certificates.publicCA, - publicRsaCa: certificates.publicRsaCA, + publicCaRest: certificates.publicCA, + publicCaKmip: certificates.publicRsaCA, + publicCaRsaKmip: certificates.publicRsaCA, }; initiateTextFileDownload({ text: content[type], filename: resources[type].filename.replace('{region}', okms.region), }); + + trackClick({ + location: PageLocation.page, + buttonType: ButtonType.button, + actionType: 'navigation', + actions: [resources[type].tracking], + }); } catch { addError(t('key_management_service_dashboard_error_download_ca')); } finally { diff --git a/packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/KmipTile.tsx b/packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/KmipTile.tsx index e3a73e75c3be..676af357f7da 100644 --- a/packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/KmipTile.tsx +++ b/packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/KmipTile.tsx @@ -19,7 +19,7 @@ const KmipTile = ({ okmsData }: KmipTileProps) => { value: (
- +
), }, @@ -34,7 +34,7 @@ const KmipTile = ({ okmsData }: KmipTileProps) => { className="block w-full" value={okmsData.kmipRsaEndpoint} /> - + ), }); diff --git a/packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/RestApiTile.tsx b/packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/RestApiTile.tsx index aeca3affddd5..9e025d7a4b6c 100644 --- a/packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/RestApiTile.tsx +++ b/packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/RestApiTile.tsx @@ -29,7 +29,7 @@ const RestApiTile = ({ okmsData }: RestApiTileProps) => { value: (
- +
), },