Skip to content

Commit 2e2d79e

Browse files
stif59100stif59100
committed
feat(web-hosting): add muk
ref: #PUWEPT-86 Signed-off-by: stif59100 <[email protected]>
1 parent 7abe33b commit 2e2d79e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+2024
-1897
lines changed

‎packages/manager-ui-kit/src/components/datagrid/useDatagrid.props.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@ export type UseDatagridTableProps<T> = {
2121
};
2222

2323
export interface ExpandableRow<T> {
24+
id: string;
2425
subRows?: T[];
2526
}

‎packages/manager-ui-kit/src/components/datagrid/useDatagrid.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@ export const useDatagrid = <T extends ExpandableRow<T>>({
5353
.setState()
5454
.setSubRows()
5555
.build();
56-
const table = useReactTable(builder);
56+
const table = useReactTable({
57+
...builder,
58+
getRowId: (row: T) => row.id,})
5759

5860
return {
5961
...table,

‎packages/manager/apps/web-hosting/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@
2323
"@hookform/resolvers": "^5.0.1",
2424
"@ovh-ux/manager-common-translations": "^0.21.0",
2525
"@ovh-ux/manager-config": "^8.6.7",
26-
"@ovh-ux/manager-core-api": "^0.11.1",
26+
"@ovh-ux/manager-core-api": "^0.19.0",
2727
"@ovh-ux/manager-core-utils": "^0.4.6",
28-
"@ovh-ux/manager-react-components": "^2.43.1",
28+
"@ovh-ux/muk": "^0.1.1",
2929
"@ovh-ux/manager-react-core-application": "^0.12.10",
3030
"@ovh-ux/manager-react-shell-client": "^0.9.3",
3131
"@ovh-ux/manager-tailwind-config": "^0.5.6",
3232
"@ovh-ux/request-tagger": "^0.5.6",
3333
"@ovh-ux/shell": "^4.7.12",
34-
"@ovhcloud/ods-components": "^18.6.2",
35-
"@ovhcloud/ods-themes": "^18.6.2",
34+
"@ovhcloud/ods-react": "^19.2.1",
35+
"@ovhcloud/ods-themes": "^19.2.1",
3636
"@tanstack/react-query": "^5.51.21",
3737
"@tanstack/react-table": "^8.20.1",
3838
"clsx": "2.1.1",

‎packages/manager/apps/web-hosting/src/components/badgeStatus/BadgeStatus.component.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React, { useMemo } from 'react';
22

33
import { useTranslation } from 'react-i18next';
44

5-
import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
5+
import { BADGE_COLOR } from '@ovhcloud/ods-react';
66

7-
import { Badge } from '@ovh-ux/manager-react-components';
87
import { ButtonType, PageLocation, useOvhTracking } from '@ovh-ux/manager-react-shell-client';
8+
import { Badge } from '@ovh-ux/muk';
99

1010
import { DnsStatus, GitStatus, ResourceStatus, ServiceStatus } from '@/data/types/status';
1111
import { DATAGRID_LINK, WEBSITE } from '@/utils/tracking.constants';
@@ -27,23 +27,23 @@ const getStatusColor = (status: Status) => {
2727
case ResourceStatus.READY:
2828
case ServiceStatus.ACTIVE:
2929
case DnsStatus.CONFIGURED:
30-
return ODS_BADGE_COLOR.success;
30+
return BADGE_COLOR.success;
3131
case GitStatus.CREATING:
3232
case GitStatus.DELETING:
3333
case GitStatus.DEPLOYING:
3434
case GitStatus.INITIALERROR:
3535
case DnsStatus.EXTERNAL:
36-
return ODS_BADGE_COLOR.warning;
36+
return BADGE_COLOR.warning;
3737
case GitStatus.DISABLED:
3838
case GitStatus.ERROR:
3939
case ResourceStatus.ERROR:
4040
case ResourceStatus.SUSPENDED:
4141
case ServiceStatus.NONE:
42-
return ODS_BADGE_COLOR.critical;
42+
return BADGE_COLOR.critical;
4343
case DnsStatus.NOT_CONFIGURED:
44-
return ODS_BADGE_COLOR.neutral;
44+
return BADGE_COLOR.neutral;
4545
default:
46-
return ODS_BADGE_COLOR.information;
46+
return BADGE_COLOR.information;
4747
}
4848
};
4949

@@ -72,9 +72,10 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
7272
}}
7373
data-testid={`badge-status-${itemStatus}`}
7474
color={statusColor}
75-
label={label || t(`web_hosting_status_${itemStatus.toLowerCase()}`)}
7675
className="mr-4 cursor-pointer inline-block"
7776
isLoading={isLoading}
78-
/>
77+
>
78+
{label || t(`web_hosting_status_${itemStatus.toLowerCase()}`)}
79+
</Badge>
7980
);
8081
};

‎packages/manager/apps/web-hosting/src/components/badgeStatus/BadgeStatus.spec.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe, expect, it, vi } from 'vitest';
22

3-
import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
3+
import { BADGE_COLOR } from '@ovhcloud/ods-react';
44

55
import { DnsStatus, GitStatus, ServiceStatus } from '@/data/types/status';
66
import { render, screen } from '@/utils/test.provider';
@@ -19,14 +19,14 @@ describe('BadgeStatus component', () => {
1919

2020
it('should render with all possible colors', () => {
2121
const testCases = [
22-
{ status: DnsStatus.CONFIGURED, color: ODS_BADGE_COLOR.success },
23-
{ status: DnsStatus.EXTERNAL, color: ODS_BADGE_COLOR.warning },
24-
{ status: DnsStatus.NOT_CONFIGURED, color: ODS_BADGE_COLOR.neutral },
25-
{ status: GitStatus.CREATED, color: ODS_BADGE_COLOR.success },
26-
{ status: GitStatus.DELETING, color: ODS_BADGE_COLOR.warning },
27-
{ status: GitStatus.ERROR, color: ODS_BADGE_COLOR.critical },
28-
{ status: ServiceStatus.ACTIVE, color: ODS_BADGE_COLOR.success },
29-
{ status: ServiceStatus.NONE, color: ODS_BADGE_COLOR.critical },
22+
{ status: DnsStatus.CONFIGURED, color: BADGE_COLOR.success },
23+
{ status: DnsStatus.EXTERNAL, color: BADGE_COLOR.warning },
24+
{ status: DnsStatus.NOT_CONFIGURED, color: BADGE_COLOR.neutral },
25+
{ status: GitStatus.CREATED, color: BADGE_COLOR.success },
26+
{ status: GitStatus.DELETING, color: BADGE_COLOR.warning },
27+
{ status: GitStatus.ERROR, color: BADGE_COLOR.critical },
28+
{ status: ServiceStatus.ACTIVE, color: BADGE_COLOR.success },
29+
{ status: ServiceStatus.NONE, color: BADGE_COLOR.critical },
3030
];
3131

3232
testCases.forEach(({ status, color }) => {

‎packages/manager/apps/web-hosting/src/components/breadcrumb/Breadcrumb.component.tsx‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,28 @@ import { useMatches } from 'react-router-dom';
44

55
import { useTranslation } from 'react-i18next';
66

7-
import { ODS_ICON_NAME, ODS_LINK_COLOR } from '@ovhcloud/ods-components';
8-
import { OdsBreadcrumb, OdsBreadcrumbItem } from '@ovhcloud/ods-components/react';
7+
import {
8+
BreadcrumbItem as BreadcrumbItemMuk,
9+
BreadcrumbLink,
10+
Breadcrumb as BreadcrumbMuk,
11+
ICON_NAME,
12+
} from '@ovhcloud/ods-react';
913

1014
import { ShellContext } from '@ovh-ux/manager-react-shell-client';
1115

1216
export type BreadcrumbItem = {
1317
label?: string;
14-
icon?: ODS_ICON_NAME;
18+
icon?: ICON_NAME;
1519
href: string;
1620
};
1721

18-
export const Breadcrumb: React.FC<{ namespace?: string | string[] }> = (
19-
{ namespace } = { namespace: 'common' },
20-
) => {
22+
export const Breadcrumb: React.FC<{ namespace?: string | string[] }> = ({
23+
namespace = 'common',
24+
}) => {
2125
const { t } = useTranslation(namespace);
2226
const matches = useMatches();
2327
const { shell } = useContext(ShellContext);
24-
const [href, setHref] = React.useState('#');
28+
const [, setHref] = React.useState('#');
2529

2630
useEffect(() => {
2731
const fetchUrl = async () => {
@@ -35,11 +39,6 @@ export const Breadcrumb: React.FC<{ namespace?: string | string[] }> = (
3539
void fetchUrl();
3640
}, [shell.navigation]);
3741

38-
const rootItem = {
39-
label: t('hosting'),
40-
href,
41-
};
42-
4342
const items = useMemo(() => {
4443
let crumbs = matches.reduce((acc, match) => {
4544
const handle = match.handle as Record<string, string>;
@@ -69,20 +68,18 @@ export const Breadcrumb: React.FC<{ namespace?: string | string[] }> = (
6968
...crumbs,
7069
];
7170
}
71+
7272
return crumbs;
7373
}, [matches, t]);
7474

7575
return (
76-
<OdsBreadcrumb data-testid="breadcrumb">
77-
{[rootItem, ...items].map((item, index) => (
78-
<OdsBreadcrumbItem
79-
{...item}
80-
color={ODS_LINK_COLOR.primary}
81-
target="_self"
82-
key={`${item.label}-${index}`}
83-
/>
76+
<BreadcrumbMuk data-testid="breadcrumb">
77+
{items.map((item, index) => (
78+
<BreadcrumbItemMuk key={`${item.label}-${index}`}>
79+
<BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
80+
</BreadcrumbItemMuk>
8481
))}
85-
</OdsBreadcrumb>
82+
</BreadcrumbMuk>
8683
);
8784
};
8885

‎packages/manager/apps/web-hosting/src/components/expirationDate/ExpirationDate.component.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ import { useParams } from 'react-router-dom';
22

33
import { Trans, useTranslation } from 'react-i18next';
44

5-
import { OdsText } from '@ovhcloud/ods-components/react';
6-
7-
import { useFormatDate } from '@ovh-ux/manager-react-components';
5+
import { Text, useFormatDate } from '@ovh-ux/muk';
86

97
import { useGetServiceInfos } from '@/data/hooks/webHostingDashboard/useWebHostingDashboard';
108
import { SERVICE_INFOS_STATUS } from '@/data/types/product/ssl';
@@ -26,13 +24,13 @@ export default function ExpirationDate() {
2624
{!isExpired &&
2725
isInAutoRenew &&
2826
(data?.renew?.deleteAtExpiration ? (
29-
<OdsText className="mb-7">
27+
<Text className="mb-7">
3028
<Trans t={t} i18nKey="expiration_resiliation_date" values={{ expirationDate }}></Trans>
31-
</OdsText>
29+
</Text>
3230
) : (
33-
<OdsText className="mb-7">
31+
<Text className="mb-7">
3432
<Trans t={t} i18nKey="expiration_renew_date" values={{ expirationDate }}></Trans>
35-
</OdsText>
33+
</Text>
3634
))}
3735
</>
3836
);

‎packages/manager/apps/web-hosting/src/components/expirationDate/ExpirationDate.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ vi.mock('react-i18next', async (importActual) => {
2929
};
3030
});
3131

32-
vi.mock('@ovh-ux/manager-react-components', () => ({
32+
vi.mock('@ovh-ux/muk', () => ({
3333
useFormatDate: () => (date: string) => {
3434
if (date === '2026-02-18') return '18 févr. 2026';
3535
return `formatted-${date}`;

‎packages/manager/apps/web-hosting/src/components/loading/Loading.component.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import React from 'react';
2-
3-
import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
4-
import { OdsSpinner } from '@ovhcloud/ods-components/react';
1+
import { SPINNER_SIZE, Spinner } from '@ovhcloud/ods-react';
52

63
export default function Loading() {
74
return (
85
<div data-testid="spinner" className="flex justify-center my-5">
9-
<OdsSpinner size={ODS_SPINNER_SIZE.md} inline-block></OdsSpinner>
6+
<Spinner size={SPINNER_SIZE.md} inline-block></Spinner>
107
</div>
118
);
129
}

‎packages/manager/apps/web-hosting/src/components/tabs/Tabs.component.tsx‎

Lines changed: 0 additions & 99 deletions
This file was deleted.

0 commit comments

Comments
 (0)