Skip to content

Commit a7818cc

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

Some content is hidden

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

49 files changed

+1850
-1765
lines changed

‎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: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ 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 { ICON_NAME } from '@ovhcloud/ods-react';
98

109
import { ShellContext } from '@ovh-ux/manager-react-shell-client';
10+
import { Breadcrumb as BreadcrumbMuk } from '@ovh-ux/muk';
1111

1212
export type BreadcrumbItem = {
1313
label?: string;
14-
icon?: ODS_ICON_NAME;
14+
icon?: ICON_NAME;
1515
href: string;
1616
};
1717

@@ -72,18 +72,13 @@ export const Breadcrumb: React.FC<{ namespace?: string | string[] }> = (
7272
return crumbs;
7373
}, [matches, t]);
7474

75-
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-
/>
84-
))}
85-
</OdsBreadcrumb>
86-
);
75+
const breadcrumbProps = {
76+
appName: 'web-hosting',
77+
rootLabel: rootItem.label,
78+
items: [rootItem, ...items],
79+
};
80+
81+
return <BreadcrumbMuk {...breadcrumbProps} hideRootLabel />;
8782
};
8883

8984
export default Breadcrumb;

‎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.

‎packages/manager/apps/web-hosting/src/components/tabs/Tabs.module.css‎

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

0 commit comments

Comments
 (0)