Skip to content

Commit 2897af0

Browse files
aTurmoaTurmo
committed
feat(pci-block-storage): add label to confirm action
ref: #TAPC-5344 Signed-off-by: Adrien Turmo <[email protected]>
1 parent 2029a3f commit 2897af0

File tree

5 files changed

+31
-8
lines changed

5 files changed

+31
-8
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
"pci_projects_project_storages_blocks_retype_encryption_not_available": "Le chiffrement n'est pas disponible dans cette région",
77
"pci_projects_project_storages_blocks_retype_confirm_action_label": "Entrer \"{{ confirmWord }}\" pour confirmer votre choix.",
88
"pci_projects_project_storages_blocks_retype_confirm_action_confirm_button": "Confirmer et continuer",
9-
"pci_projects_project_storages_blocks_retype_detach_volume": "Pour modifier votre type d'offre, vous devez détacher le volume de son instance {{ instance }}",
9+
"pci_projects_project_storages_blocks_retype_detach_volume_label": "Détacher votre instance",
10+
"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 }}",
1011
"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.",
11-
"pci_projects_project_storages_blocks_retype_delete_snapshots": "Pour modifier votre type d’offre vous devez avant supprimer les snapshots rattachés à votre volume.",
12+
"pci_projects_project_storages_blocks_retype_delete_snapshots_label": "Supprimer les snapshots",
13+
"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.",
1214
"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."
1315
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ describe('RetypeConfirmActionForm', () => {
99
it('should display warning message if not pending or error', () => {
1010
const { getByText, queryByText, queryByTestId } = render(
1111
<RetypeConfirmActionForm
12+
label="label"
1213
warningMessage="warning message"
1314
confirmWord="DETACH"
1415
errorElement={<div>error message</div>}
@@ -27,6 +28,7 @@ describe('RetypeConfirmActionForm', () => {
2728
it('should display confirmation input if not pending or error', () => {
2829
const { getByText, getByRole, queryByText, queryByTestId } = render(
2930
<RetypeConfirmActionForm
31+
label="label"
3032
warningMessage="warning message"
3133
confirmWord="DETACH"
3234
errorElement={<div>error message</div>}
@@ -50,6 +52,7 @@ describe('RetypeConfirmActionForm', () => {
5052
it('should display error message if on error', () => {
5153
const { getByText, queryByTestId, queryByText } = render(
5254
<RetypeConfirmActionForm
55+
label="label"
5356
warningMessage="warning message"
5457
confirmWord="DETACH"
5558
errorElement={<div>error message</div>}
@@ -68,6 +71,7 @@ describe('RetypeConfirmActionForm', () => {
6871
it('should display skeleton if on pending', () => {
6972
const { getByTestId, queryByText } = render(
7073
<RetypeConfirmActionForm
74+
label="label"
7175
warningMessage="warning message"
7276
confirmWord="DETACH"
7377
errorElement={<div>error message</div>}
@@ -87,6 +91,7 @@ describe('RetypeConfirmActionForm', () => {
8791
it('should not be displayed if input nothing has been done', () => {
8892
const { queryByText } = render(
8993
<RetypeConfirmActionForm
94+
label="label"
9095
warningMessage="warning message"
9196
confirmWord="DETACH"
9297
errorElement={<div>error message</div>}
@@ -103,6 +108,7 @@ describe('RetypeConfirmActionForm', () => {
103108
it('should not be displayed if input is different the confirm word not blured', async () => {
104109
const { queryByText, getByRole } = render(
105110
<RetypeConfirmActionForm
111+
label="label"
106112
warningMessage="warning message"
107113
confirmWord="DETACH"
108114
errorElement={<div>error message</div>}
@@ -121,6 +127,7 @@ describe('RetypeConfirmActionForm', () => {
121127
it('should be displayed if input is different the confirm word and blurred', async () => {
122128
const { getByText, getByRole } = render(
123129
<RetypeConfirmActionForm
130+
label="label"
124131
warningMessage="warning message"
125132
confirmWord="DETACH"
126133
errorElement={<div>error message</div>}
@@ -144,6 +151,7 @@ describe('RetypeConfirmActionForm', () => {
144151
it('should not be displayed if input is equal to the confirm word', async () => {
145152
const { getByText, queryByText, getByRole } = render(
146153
<RetypeConfirmActionForm
154+
label="label"
147155
warningMessage="warning message"
148156
confirmWord="DETACH"
149157
errorElement={<div>error message</div>}
@@ -169,6 +177,7 @@ describe('RetypeConfirmActionForm', () => {
169177
it('should be disabled if pending', () => {
170178
const { getByText } = render(
171179
<RetypeConfirmActionForm
180+
label="label"
172181
warningMessage="warning message"
173182
confirmWord="DETACH"
174183
errorElement={<div>error message</div>}
@@ -189,6 +198,7 @@ describe('RetypeConfirmActionForm', () => {
189198
it('should be disabled if error', () => {
190199
const { getByText } = render(
191200
<RetypeConfirmActionForm
201+
label="label"
192202
warningMessage="warning message"
193203
confirmWord="DETACH"
194204
errorElement={<div>error message</div>}
@@ -209,6 +219,7 @@ describe('RetypeConfirmActionForm', () => {
209219
it('should be disabled if input is empty', () => {
210220
const { getByText } = render(
211221
<RetypeConfirmActionForm
222+
label="label"
212223
warningMessage="warning message"
213224
confirmWord="DETACH"
214225
errorElement={<div>error message</div>}
@@ -229,6 +240,7 @@ describe('RetypeConfirmActionForm', () => {
229240
it('should be disabled if input is different from the conform word', async () => {
230241
const { getByText, getByRole } = render(
231242
<RetypeConfirmActionForm
243+
label="label"
232244
warningMessage="warning message"
233245
confirmWord="DETACH"
234246
errorElement={<div>error message</div>}
@@ -251,6 +263,7 @@ describe('RetypeConfirmActionForm', () => {
251263
it('should be enabled if input is equal to the confirm word', async () => {
252264
const { getByText, getByRole } = render(
253265
<RetypeConfirmActionForm
266+
label="label"
254267
warningMessage="warning message"
255268
confirmWord="DETACH"
256269
errorElement={<div>error message</div>}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@ import {
1010
MessageIcon,
1111
Skeleton,
1212
Text,
13+
TEXT_PRESET,
1314
} from '@ovhcloud/ods-react';
1415
import { useForm } from 'react-hook-form';
1516
import clsx from 'clsx';
1617
import { BaseRetypeForm } from './BaseRetypeForm.component';
1718

1819
type RetypeConfirmActionFormProps = {
20+
label: string;
1921
warningMessage: string;
2022
confirmWord: string;
2123
errorElement: React.ReactElement;
@@ -26,6 +28,7 @@ type RetypeConfirmActionFormProps = {
2628
};
2729

2830
export const RetypeConfirmActionForm: FC<RetypeConfirmActionFormProps> = ({
31+
label,
2932
warningMessage,
3033
confirmWord,
3134
errorElement,
@@ -77,6 +80,7 @@ export const RetypeConfirmActionForm: FC<RetypeConfirmActionFormProps> = ({
7780
)}
7881
{!isPending && !isError && (
7982
<>
83+
<Text preset={TEXT_PRESET.heading5}>{label}</Text>
8084
<Message
8185
color={MESSAGE_COLOR.warning}
8286
dismissible={false}
@@ -86,12 +90,12 @@ export const RetypeConfirmActionForm: FC<RetypeConfirmActionFormProps> = ({
8690
<MessageBody>{warningMessage}</MessageBody>
8791
</Message>
8892
<label className="flex flex-col gap-4">
89-
<span>
93+
<Text preset={TEXT_PRESET.label}>
9094
{t(
9195
'retype:pci_projects_project_storages_blocks_retype_confirm_action_label',
9296
{ confirmWord },
9397
)}
94-
</span>
98+
</Text>
9599
<Input
96100
{...register('confirmation', {
97101
required: true,

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { FC, useMemo } from 'react';
33
import { useNavigate } from 'react-router-dom';
44
import { NAMESPACES } from '@ovh-ux/manager-common-translations';
55
import { Link } from '@ovhcloud/ods-react';
6-
import { useForm } from 'react-hook-form';
76
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
87
import { useProjectUrl } from '@ovh-ux/manager-react-components';
98
import { TVolumeSnapshot } from '@/api/data/snapshot';
@@ -48,8 +47,11 @@ export const RetypeDeleteSnapshots: FC<RetypeDeleteSnapshotsProps> = ({
4847

4948
return (
5049
<RetypeConfirmActionForm
50+
label={t(
51+
'pci_projects_project_storages_blocks_retype_delete_snapshots_label',
52+
)}
5153
warningMessage={t(
52-
'retype:pci_projects_project_storages_blocks_retype_delete_snapshots',
54+
'retype:pci_projects_project_storages_blocks_retype_delete_snapshots_warning',
5355
)}
5456
confirmWord="DELETE"
5557
errorElement={

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { FC } from 'react';
33
import { useHref, useNavigate } from 'react-router-dom';
44
import { NAMESPACES } from '@ovh-ux/manager-common-translations';
55
import { Link } from '@ovhcloud/ods-react';
6-
import { useForm } from 'react-hook-form';
76
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
87
import { TAttachedInstance } from '@/api/select/instances';
98
import { useDetachVolume } from '@/api/hooks/useVolume';
@@ -43,8 +42,11 @@ export const RetypeDetachInstance: FC<RetypeDetachInstanceProps> = ({
4342

4443
return (
4544
<RetypeConfirmActionForm
45+
label={t(
46+
'pci_projects_project_storages_blocks_retype_detach_volume_label',
47+
)}
4648
warningMessage={t(
47-
'retype:pci_projects_project_storages_blocks_retype_detach_volume',
49+
'retype:pci_projects_project_storages_blocks_retype_detach_volume_warning',
4850
{
4951
instance: instance.name,
5052
},

0 commit comments

Comments
 (0)