feat(pci-block-storage): add label to confirm action

ref: #TAPC-5344

Signed-off-by: Adrien Turmo <[email protected]>

Author: aTurmo

packages/manager/apps/pci-block-storage/public/translations/retype/Messages_fr_FR.json

@@ -6,8 +6,10 @@
   "pci_projects_project_storages_blocks_retype_encryption_not_available": "Le chiffrement n'est pas disponible dans cette région",
   "pci_projects_project_storages_blocks_retype_confirm_action_label": "Entrer \"{{ confirmWord }}\" pour confirmer votre choix.",
   "pci_projects_project_storages_blocks_retype_confirm_action_confirm_button": "Confirmer et continuer",
-  "pci_projects_project_storages_blocks_retype_detach_volume": "Pour modifier votre type d'offre, vous devez détacher le volume de son instance {{ instance }}",
+  "pci_projects_project_storages_blocks_retype_detach_volume_label": "Détacher votre instance",
+  "pci_projects_project_storages_blocks_retype_detach_volume_warning": "Pour modifier votre type d'offre, vous devez détacher le volume de son instance {{ instance }}",
   "pci_projects_project_storages_blocks_retype_detach_volume_error": "Une erreur s'est produite lors du détachement de l'instance. Nous vous invitons à vous rendre sur <0>la page block storage</0> afin de détacher l'instance manuellement.",
-  "pci_projects_project_storages_blocks_retype_delete_snapshots": "Pour modifier votre type d’offre vous devez avant supprimer les snapshots rattachés à votre volume.",
+  "pci_projects_project_storages_blocks_retype_delete_snapshots_label": "Supprimer les snapshots",
+  "pci_projects_project_storages_blocks_retype_delete_snapshots_warning": "Pour modifier votre type d’offre vous devez avant supprimer les snapshots rattachés à votre volume.",
   "pci_projects_project_storages_blocks_retype_delete_snapshots_error": "Une erreur s'est produite lors de la suppression des snapshots. Nous vous invitons à vous rendre sur <0>la page des snapshots</0> afin de les supprimer manuellement."
 }

packages/manager/apps/pci-block-storage/src/pages/retype/RetypeConfirmActionForm.component.tsx

@@ -10,12 +10,14 @@ import {
   MessageIcon,
   Skeleton,
   Text,
+  TEXT_PRESET,
 } from '@ovhcloud/ods-react';
 import { useForm } from 'react-hook-form';
 import clsx from 'clsx';
 import { BaseRetypeForm } from './BaseRetypeForm.component';
 
 type RetypeConfirmActionFormProps = {
+  label: string;
   warningMessage: string;
   confirmWord: string;
   errorElement: React.ReactElement;
@@ -26,6 +28,7 @@ type RetypeConfirmActionFormProps = {
 };
 
 export const RetypeConfirmActionForm: FC<RetypeConfirmActionFormProps> = ({
+  label,
   warningMessage,
   confirmWord,
   errorElement,
@@ -77,6 +80,7 @@ export const RetypeConfirmActionForm: FC<RetypeConfirmActionFormProps> = ({
         )}
         {!isPending && !isError && (
           <>
+            <Text preset={TEXT_PRESET.heading5}>{label}</Text>
             <Message
               color={MESSAGE_COLOR.warning}
               dismissible={false}
@@ -86,12 +90,12 @@ export const RetypeConfirmActionForm: FC<RetypeConfirmActionFormProps> = ({
               <MessageBody>{warningMessage}</MessageBody>
             </Message>
             <label className="flex flex-col gap-4">
-              <span>
+              <Text preset={TEXT_PRESET.label}>
                 {t(
                   'retype:pci_projects_project_storages_blocks_retype_confirm_action_label',
                   { confirmWord },
                 )}
-              </span>
+              </Text>
               <Input
                 {...register('confirmation', {
                   required: true,

packages/manager/apps/pci-block-storage/src/pages/retype/RetypeDeleteSnapshots.component.tsx

@@ -3,7 +3,6 @@ import { FC, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { Link } from '@ovhcloud/ods-react';
-import { useForm } from 'react-hook-form';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { useProjectUrl } from '@ovh-ux/manager-react-components';
 import { TVolumeSnapshot } from '@/api/data/snapshot';
@@ -48,8 +47,11 @@ export const RetypeDeleteSnapshots: FC<RetypeDeleteSnapshotsProps> = ({
 
   return (
     <RetypeConfirmActionForm
+      label={t(
+        'pci_projects_project_storages_blocks_retype_delete_snapshots_label',
+      )}
       warningMessage={t(
-        'retype:pci_projects_project_storages_blocks_retype_delete_snapshots',
+        'retype:pci_projects_project_storages_blocks_retype_delete_snapshots_warning',
       )}
       confirmWord="DELETE"
       errorElement={

packages/manager/apps/pci-block-storage/src/pages/retype/RetypeDetachInstance.component.tsx

@@ -3,7 +3,6 @@ import { FC } from 'react';
 import { useHref, useNavigate } from 'react-router-dom';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { Link } from '@ovhcloud/ods-react';
-import { useForm } from 'react-hook-form';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { TAttachedInstance } from '@/api/select/instances';
 import { useDetachVolume } from '@/api/hooks/useVolume';
@@ -43,8 +42,11 @@ export const RetypeDetachInstance: FC<RetypeDetachInstanceProps> = ({
 
   return (
     <RetypeConfirmActionForm
+      label={t(
+        'pci_projects_project_storages_blocks_retype_detach_volume_label',
+      )}
       warningMessage={t(
-        'retype:pci_projects_project_storages_blocks_retype_detach_volume',
+        'retype:pci_projects_project_storages_blocks_retype_detach_volume_warning',
         {
           instance: instance.name,
         },