chore(okms): add tracking to download CA buttons

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',
     });
 

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<CertificateType, ButtonResource> = {
+    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<HTMLOdsLinkElement, MouseEvent>,
@@ -52,14 +69,22 @@ export const DownloadKmsPublicCaLink = ({
       const certificates = await getOkmsPublicCa(okms.id);
 
       const content: Record<CertificateType, string> = {
-        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 {

packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/KmipTile.tsx

@@ -19,7 +19,7 @@ const KmipTile = ({ okmsData }: KmipTileProps) => {
       value: (
         <div className="flex flex-col gap-2">
           <Clipboard className="block w-full" value={okmsData?.kmipEndpoint} />
-          <DownloadKmsPublicCaLink okms={okmsData} type={'publicCa'} />
+          <DownloadKmsPublicCaLink okms={okmsData} type={'publicCaKmip'} />
         </div>
       ),
     },
@@ -34,7 +34,7 @@ const KmipTile = ({ okmsData }: KmipTileProps) => {
             className="block w-full"
             value={okmsData.kmipRsaEndpoint}
           />
-          <DownloadKmsPublicCaLink okms={okmsData} type={'publicRsaCa'} />
+          <DownloadKmsPublicCaLink okms={okmsData} type={'publicCaRsaKmip'} />
         </div>
       ),
     });

packages/manager/apps/okms/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/RestApiTile.tsx

@@ -29,7 +29,7 @@ const RestApiTile = ({ okmsData }: RestApiTileProps) => {
       value: (
         <div className="flex flex-col gap-2">
           <Clipboard className="block w-full" value={okmsData?.restEndpoint} />
-          <DownloadKmsPublicCaLink okms={okmsData} type={'publicCa'} />
+          <DownloadKmsPublicCaLink okms={okmsData} type={'publicCaRest'} />
         </div>
       ),
     },