diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.tsx
index 2c3816540d91..7f7574e4737c 100644
--- a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.tsx
@@ -1,23 +1,13 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
import { Links, LinkType } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useTranslation } from 'react-i18next';
+import { OdsPopover, OdsTag, OdsText } from '@ovhcloud/ods-components/react';
import {
- ODS_CHIP_SIZE,
ODS_ICON_NAME,
- ODS_ICON_SIZE,
- ODS_TEXT_LEVEL,
- ODS_TEXT_SIZE,
+ ODS_TAG_COLOR,
+ ODS_TAG_SIZE,
} from '@ovhcloud/ods-components';
-import {
- OsdsChip,
- OsdsIcon,
- OsdsPopover,
- OsdsPopoverContent,
- OsdsText,
-} from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import { useTranslation } from 'react-i18next';
import { URL_INFO } from './constants';
export function RegionGlobalzoneChip() {
@@ -29,44 +19,29 @@ export function RegionGlobalzoneChip() {
URL_INFO[linkType as keyof typeof URL_INFO].DEFAULT;
return (
-
-
-
+
+ event.stopPropagation()}
- >
-
- {t('pci_project_flavors_zone_global_region')}
-
-
-
-
-
-
+ />
+
+
+
{t('pci_project_flavors_zone_globalregions_tooltip')}
-
+
-
-
+
+ >
);
}
diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionList.component.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionList.component.tsx
index 34953945564d..9b6c7034c338 100644
--- a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionList.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionList.component.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { OsdsTile } from '@ovhcloud/ods-components/react';
import clsx from 'clsx';
+import { OdsCard } from '@ovhcloud/ods-components/react';
import { TLocalisation } from './useRegions';
import {
regionContainer,
@@ -25,17 +24,16 @@ export function RegionList({
{regions.map((region) => (
-
- onClick(region)}
data-testid={`region-${region.name}`}
>
{render(region, selectedRegion === region)}
-
+
))}
diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.tsx
index f3a61fe38a9f..9d6e8bcf9f32 100644
--- a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.tsx
@@ -1,23 +1,13 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
import { Links, LinkType } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useTranslation } from 'react-i18next';
+import { OdsPopover, OdsTag, OdsText } from '@ovhcloud/ods-components/react';
import {
- ODS_CHIP_SIZE,
ODS_ICON_NAME,
- ODS_ICON_SIZE,
- ODS_TEXT_LEVEL,
- ODS_TEXT_SIZE,
+ ODS_TAG_COLOR,
+ ODS_TAG_SIZE,
} from '@ovhcloud/ods-components';
-import {
- OsdsChip,
- OsdsIcon,
- OsdsPopover,
- OsdsPopoverContent,
- OsdsText,
-} from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import { useTranslation } from 'react-i18next';
import { URL_INFO } from './constants';
export function RegionLocalzoneChip() {
@@ -29,44 +19,29 @@ export function RegionLocalzoneChip() {
URL_INFO[linkType as keyof typeof URL_INFO].DEFAULT;
return (
-
-
-
+
+ event.stopPropagation()}
- >
-
- {t('pci_project_flavors_zone_localzone')}
-
-
-
-
-
-
+ />
+
+
+
{t('pci_project_flavors_zone_localzone_tooltip')}
-
+
-
-
+
+ >
);
}
diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionSelector.component.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionSelector.component.tsx
index 0641f0612885..ca54924616e6 100644
--- a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionSelector.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionSelector.component.tsx
@@ -1,17 +1,8 @@
-import React from 'react';
-import { OsdsSpinner, OsdsText } from '@ovhcloud/ods-components/react';
-import {
- ODS_SPINNER_SIZE,
- ODS_TEXT_LEVEL,
- ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import {
- ODS_THEME_COLOR_INTENT,
- ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
import { TabsComponent } from '@ovh-ux/manager-react-components';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
+import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
+import { OdsSpinner, OdsText } from '@ovhcloud/ods-components/react';
import { TLocalisation } from './useRegions';
import { useRegionSelector } from './useRegionSelector';
import { RegionTile } from './RegionTile';
@@ -48,7 +39,7 @@ export function RegionSelector({
} = useRegionSelector({ projectId, onSelectRegion, regionFilter });
if (isPending) {
- return ;
+ return ;
}
return (
@@ -73,14 +64,9 @@ export function RegionSelector({
{microRegions?.length > 0 && (
<>
-
+
{t('pci_project_regions_list_region')}
-
+
)}
titleElement={(continent, isSelected) => (
-
-
- {continent.name}
-
-
+ {continent.name}
+
)}
onChange={setSelectedContinent}
/>
diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionSummary.component.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionSummary.component.tsx
index a65f6c261d24..6f8cd8e6c923 100644
--- a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionSummary.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionSummary.component.tsx
@@ -1,10 +1,4 @@
-import React from 'react';
-import { OsdsText, OsdsTile } from '@ovhcloud/ods-components/react';
-import {
- ODS_THEME_COLOR_INTENT,
- ODS_THEME_TYPOGRAPHY_LEVEL,
- ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
+import { OdsCard, OdsText } from '@ovhcloud/ods-components/react';
import { TLocalisation } from './useRegions';
import {
regionContainer,
@@ -20,29 +14,20 @@ export interface RegionSummaryProps {
export function RegionSummary({ region }: Readonly) {
return (
-
+
-
+
{region.macroLabel}
-
+
-
+
{region.microLabel}
-
+
-
+
);
}
diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionTile.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionTile.tsx
index bd59cfe37f38..e64533c9ddb1 100644
--- a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionTile.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionTile.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import clsx from 'clsx';
import { TLocalisation } from './useRegions';
import { RegionLocalzoneChip } from './RegionLocalzoneChip.component';
import { RegionGlobalzoneChip } from './RegionGlobalzoneChip.component';
@@ -19,13 +17,9 @@ export const RegionTile = ({
}: Readonly) => (
-
+
{region.isMacro ? region.macroLabel : region.microLabel}
-
+
{!isCompact && (
<>