Skip to content

Commit 0d015d3

Browse files
aTurmoaTurmo
committed
feat(pci-block-storage): migrate retype page to ODS19 and drawer
ref: #TAPC-4915 Signed-off-by: Adrien Turmo <[email protected]>
1 parent 8588d14 commit 0d015d3

File tree

4 files changed

+195
-174
lines changed

4 files changed

+195
-174
lines changed

‎packages/manager/apps/pci-block-storage/src/components/Encryption.tsx

Lines changed: 43 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
1-
import React, { PropsWithChildren, useMemo } from 'react';
2-
import {
3-
OsdsRadio,
4-
OsdsRadioButton,
5-
OsdsRadioGroup,
6-
OsdsText,
7-
} from '@ovhcloud/ods-components/react';
8-
import { Subtitle } from '@ovh-ux/manager-react-components';
9-
import {
10-
ODS_RADIO_BUTTON_SIZE,
11-
ODS_TEXT_LEVEL,
12-
ODS_TEXT_SIZE,
13-
} from '@ovhcloud/ods-components';
14-
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
15-
import { Badge } from '@ovh-ux/manager-pci-common';
16-
import clsx from 'clsx';
1+
import { PropsWithChildren, useMemo } from 'react';
172
import { useTranslation } from 'react-i18next';
3+
import {
4+
Badge,
5+
BADGE_COLOR,
6+
BADGE_SIZE,
7+
Radio as OdsRadio,
8+
RadioControl,
9+
RadioGroup,
10+
RadioLabel,
11+
Text,
12+
TEXT_PRESET,
13+
} from '@ovhcloud/ods-react';
1814
import { EncryptionType } from '@/api/select/volume';
1915
import { useVolumeEncryptions } from '@/api/hooks/useCatalog';
2016

@@ -23,25 +19,14 @@ const Radio = ({
2319
value,
2420
disabled,
2521
}: PropsWithChildren<{ value: string; disabled?: boolean }>) => (
26-
<OsdsRadio
22+
<OdsRadio
2723
value={value}
28-
name="encryption"
24+
aria-label="encryption"
2925
{...(disabled ? { disabled: true } : {})}
3026
>
31-
<OsdsRadioButton
32-
size={ODS_RADIO_BUTTON_SIZE.xs}
33-
color={ODS_THEME_COLOR_INTENT.primary}
34-
>
35-
<OsdsText
36-
color={ODS_THEME_COLOR_INTENT.text}
37-
size={ODS_TEXT_SIZE._400}
38-
slot="end"
39-
className={clsx(!disabled && 'cursor-pointer')}
40-
>
41-
{children}
42-
</OsdsText>
43-
</OsdsRadioButton>
44-
</OsdsRadio>
27+
<RadioControl />
28+
<RadioLabel>{children}</RadioLabel>
29+
</OdsRadio>
4530
);
4631

4732
interface Props {
@@ -83,64 +68,49 @@ export const Encryption = ({
8368

8469
return (
8570
<fieldset className="border-0 p-0" role="radiogroup">
86-
<legend className="flex items-baseline p-0">
87-
<Subtitle>{title}</Subtitle>
71+
<legend className="flex items-center p-0 mb-4 gap-4">
72+
<Text preset={TEXT_PRESET.heading3}>{title}</Text>
8873
{isNew && (
89-
<Badge
90-
color="new"
91-
label={t('common:pci_projects_project_storages_blocks_new')}
92-
className="ml-4"
93-
/>
74+
<Badge color={BADGE_COLOR.new}>
75+
{t('common:pci_projects_project_storages_blocks_new')}
76+
</Badge>
9477
)}
9578
</legend>
9679

97-
{description && (
98-
<OsdsText
99-
size={ODS_TEXT_SIZE._400}
100-
level={ODS_TEXT_LEVEL.body}
101-
color={ODS_THEME_COLOR_INTENT.text}
102-
>
103-
{description}
104-
</OsdsText>
105-
)}
80+
{description && <Text>{description}</Text>}
10681

107-
<div>
108-
<OsdsRadioGroup
109-
name="encryption"
110-
value={encryptionType ?? 'none'}
111-
onOdsValueChange={({ detail }) =>
112-
onChange(
113-
detail.newValue === 'none'
114-
? null
115-
: (detail.newValue as EncryptionType),
116-
)
117-
}
118-
>
119-
{enabledEncryptions.map(({ value, label }) => (
120-
<Radio value={value} key={value}>
121-
{label}
122-
</Radio>
123-
))}
124-
</OsdsRadioGroup>
82+
<RadioGroup
83+
name="encryption"
84+
className="pl-6 mt-4"
85+
value={encryptionType ?? 'none'}
86+
onValueChange={({ value }) =>
87+
onChange(value === 'none' ? null : (value as EncryptionType))
88+
}
89+
>
90+
{enabledEncryptions.map(({ value, label }) => (
91+
<Radio value={value} key={value}>
92+
{label}
93+
</Radio>
94+
))}
12595
{/* We need to put it outside radio group because ODS does weird things with disable */}
12696
{disabledEncryptions.map(({ value, label, comingSoon }) => (
127-
<div key={value} className="flex items-baseline">
97+
<div key={value} className="flex items-center">
12898
<Radio value={value} disabled>
12999
{label}
130100
</Radio>
131101

132102
{comingSoon && (
133103
<Badge
134-
label={t(
135-
'common:pci_projects_project_storages_blocks_coming_soon',
136-
)}
137-
color="neutral"
104+
color={BADGE_COLOR.neutral}
138105
className="ml-5"
139-
/>
106+
size={BADGE_SIZE.sm}
107+
>
108+
{t('common:pci_projects_project_storages_blocks_coming_soon')}
109+
</Badge>
140110
)}
141111
</div>
142112
))}
143-
</div>
113+
</RadioGroup>
144114
</fieldset>
145115
);
146116
};

‎packages/manager/apps/pci-block-storage/src/components/VolumeModelTilesInput.component.tsx

Lines changed: 66 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { TilesInput, useBytes } from '@ovh-ux/manager-pci-common';
2-
import { useMemo } from 'react';
2+
import { useCallback, useMemo } from 'react';
33
import { useTranslation } from 'react-i18next';
4+
import clsx from 'clsx';
45
import { TVolumeModel } from '@/api/hooks/useCatalog';
56
import { TVolumeRetypeModel } from '@/api/hooks/useCatalogWithPreselection';
67

@@ -10,6 +11,7 @@ type Props<T = TVolumeModel | TVolumeRetypeModel> = {
1011
onChange: (value: T) => void;
1112
label: string;
1213
locked?: boolean;
14+
horizontal?: boolean;
1315
};
1416

1517
export const VolumeModelTilesInput = ({
@@ -18,22 +20,61 @@ export const VolumeModelTilesInput = ({
1820
onChange,
1921
label = '',
2022
locked = false,
23+
horizontal = false,
2124
}: Props) => {
2225
const { t } = useTranslation(['add', 'common']);
2326
const { formatBytes } = useBytes();
2427

28+
const getDescription = useCallback(
29+
(m: TVolumeModel | TVolumeRetypeModel) => {
30+
const zoneText = m.availabilityZonesCount
31+
? t(
32+
'add:pci_projects_project_storages_blocks_add_type_availability_zone',
33+
{ count: m.availabilityZonesCount },
34+
)
35+
: undefined;
36+
37+
const capacityMax = t(
38+
'add:pci_projects_project_storages_blocks_add_type_addon_capacity_max',
39+
{
40+
capacity: formatBytes(m.capacity.max),
41+
},
42+
);
43+
44+
if (horizontal) {
45+
// eslint-disable-next-line prettier/prettier
46+
return `${zoneText ? `${zoneText}.\n` : ''} ${m.iops}, ${capacityMax}`;
47+
}
48+
49+
return zoneText;
50+
},
51+
[t, formatBytes],
52+
);
53+
54+
const getFeatures = useCallback(
55+
(m: TVolumeModel | TVolumeRetypeModel) => {
56+
if (horizontal) return [];
57+
58+
return [
59+
m.iops,
60+
t(
61+
'add:pci_projects_project_storages_blocks_add_type_addon_capacity_max',
62+
{
63+
capacity: formatBytes(m.capacity.max),
64+
},
65+
),
66+
...(m.bandwidth ? [m.bandwidth] : []),
67+
];
68+
},
69+
[t, formatBytes],
70+
);
71+
2572
const volumeTypes = useMemo(
2673
() =>
2774
volumeModels.map((m) => ({
2875
...m,
2976
label: m.displayName,
30-
description:
31-
m.availabilityZonesCount !== null
32-
? t(
33-
'add:pci_projects_project_storages_blocks_add_type_availability_zone',
34-
{ count: m.availabilityZonesCount },
35-
)
36-
: undefined,
77+
description: getDescription(m),
3778
badges: [
3879
m.encrypted
3980
? {
@@ -53,18 +94,10 @@ export const VolumeModelTilesInput = ({
5394
icon: 'lock' as const,
5495
},
5596
],
56-
features: [
57-
m.iops,
58-
t(
59-
'add:pci_projects_project_storages_blocks_add_type_addon_capacity_max',
60-
{
61-
capacity: formatBytes(m.capacity.max),
62-
},
63-
),
64-
].concat(m.bandwidth ? [m.bandwidth] : []),
97+
features: getFeatures(m),
6598
price: m.hourlyPrice,
6699
})),
67-
[volumeModels, t, formatBytes],
100+
[volumeModels, t, getDescription, getFeatures],
68101
);
69102

70103
const volumeTypeValue = useMemo(
@@ -73,13 +106,20 @@ export const VolumeModelTilesInput = ({
73106
);
74107

75108
return (
76-
<TilesInput
77-
name="volume-type"
78-
label={label}
79-
value={volumeTypeValue}
80-
elements={volumeTypes}
81-
onChange={(e) => onChange(e)}
82-
locked={locked}
83-
/>
109+
<div
110+
className={clsx(
111+
horizontal && '[&_.config-card\\_\\_badges]:w-full whitespace-pre-line',
112+
)}
113+
>
114+
<TilesInput
115+
name="volume-type"
116+
label={label}
117+
value={volumeTypeValue}
118+
elements={volumeTypes}
119+
onChange={(e) => onChange(e)}
120+
locked={locked}
121+
horizontal={horizontal}
122+
/>
123+
</div>
84124
);
85125
};

‎packages/manager/apps/pci-block-storage/src/pages/new/components/VolumeTypeStep.component.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,9 @@ export function VolumeTypeStep({
9090
<Encryption
9191
encryptionType={encryptionType}
9292
onChange={setEncryptionType}
93-
title={t('common:pci_projects_project_storages_blocks_new')}
93+
title={t(
94+
'common:pci_projects_project_storages_blocks_encrypted_label',
95+
)}
9496
description={t(
9597
'add:pci_projects_project_storages_blocks_add_encryption_description',
9698
)}
@@ -110,7 +112,7 @@ export function VolumeTypeStep({
110112
)
111113
}
112114
actionName="select_volume_add"
113-
actionValues={[volumeType.name]}
115+
actionValues={[volumeModel.name]}
114116
className="w-fit"
115117
>
116118
{t('common_stepper_next_button_label')}

0 commit comments

Comments
 (0)