diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.spec.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.spec.tsx index b09924f88345..835452fcf7e3 100644 --- a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.spec.tsx +++ b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.spec.tsx @@ -1,16 +1,10 @@ import { render, screen } from '@testing-library/react'; import { vi } from 'vitest'; -import { - useFeatureAvailability, - UseFeatureAvailabilityResult, -} from '@ovh-ux/manager-react-components'; -import { - FEATURE_REGION_1AZ, - RegionGlobalzoneChip, -} from './RegionGlobalzoneChip.component'; +import { RegionGlobalzoneChip } from './RegionGlobalzoneChip.component'; import { wrapper } from '@/wrapperRenders'; import { URL_INFO } from '@/components/region-selector/constants'; import { useHas3AZ } from '@/hooks/useHas3AZ/useHas3AZ'; +import { useIs1AZ } from '@/hooks/useIs1AZ/useIs1AZ'; vi.mock('@ovh-ux/manager-react-components', async (importOriginal) => { const module = await importOriginal< @@ -20,6 +14,7 @@ vi.mock('@ovh-ux/manager-react-components', async (importOriginal) => { }); vi.mock('@/hooks/useHas3AZ/useHas3AZ'); +vi.mock('@/hooks/useIs1AZ/useIs1AZ'); enum ExpectedType { GLOBAL_REGIONS = 'GLOBAL_REGIONS', @@ -59,18 +54,7 @@ describe('RegionGlobalzoneChip', () => { ) => { const expected = EXPECTED_VALUES[expectedType]; - vi.mocked(useFeatureAvailability).mockImplementationOnce( - (features) => - ({ - data: { - ...Object.fromEntries( - features.map((feature) => [feature, false]), - ), - [FEATURE_REGION_1AZ]: show1AZ, - }, - isLoading: false, - } as UseFeatureAvailabilityResult), - ); + vi.mocked(useIs1AZ).mockReturnValue(show1AZ); render(, { wrapper }); @@ -99,18 +83,7 @@ describe('RegionGlobalzoneChip', () => { ])( 'should %s 3AZ tooltip text when feature availability is %s and 3AZ availability is %s', (expected: string, show1AZ: boolean, has3AZ: boolean) => { - vi.mocked(useFeatureAvailability).mockImplementationOnce( - (features) => - ({ - data: { - ...Object.fromEntries( - features.map((feature) => [feature, false]), - ), - [FEATURE_REGION_1AZ]: show1AZ, - }, - isLoading: false, - } as UseFeatureAvailabilityResult), - ); + vi.mocked(useIs1AZ).mockReturnValue(show1AZ); vi.mocked(useHas3AZ).mockReturnValue(has3AZ); 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 af3df76dde3f..e19e48ff1be0 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 @@ -24,8 +24,7 @@ import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core'; import { useTranslation } from 'react-i18next'; import { URL_INFO } from './constants'; import { useHas3AZ } from '../../hooks/useHas3AZ/useHas3AZ'; - -export const FEATURE_REGION_1AZ = 'public-cloud:region-1AZ'; +import { useIs1AZ } from '../../hooks/useIs1AZ/useIs1AZ'; export function RegionGlobalzoneChip({ showTooltip = true, @@ -33,13 +32,11 @@ export function RegionGlobalzoneChip({ showTooltip?: boolean; }>) { const { t } = useTranslation('pci-region-selector'); - const { data } = useFeatureAvailability([FEATURE_REGION_1AZ]); + const is1AZ = useIs1AZ(); const context = useContext(ShellContext); const { ovhSubsidiary } = context.environment.getUser(); - const linkType = data?.[FEATURE_REGION_1AZ] - ? '1AZ_REGIONS' - : 'GLOBAL_REGIONS'; + const linkType = is1AZ ? '1AZ_REGIONS' : 'GLOBAL_REGIONS'; const tooltipUrl = URL_INFO[linkType][ovhSubsidiary] || URL_INFO[linkType].DEFAULT; @@ -52,11 +49,7 @@ export function RegionGlobalzoneChip({ onClick={(event) => event.stopPropagation()} > - {t( - `pci_project_flavors_zone_${ - data?.[FEATURE_REGION_1AZ] ? '1AZ' : 'global_region' - }`, - )} + {t(`pci_project_flavors_zone_${is1AZ ? '1AZ' : 'global_region'}`)} {showTooltip && ( - {data?.[FEATURE_REGION_1AZ] && !has3AZ + {is1AZ && !has3AZ ? t('pci_project_flavors_zone_1AZ_with_3AZ_tooltip') : t( `pci_project_flavors_zone_${ - data?.[FEATURE_REGION_1AZ] ? '1AZ' : 'globalregions' + is1AZ ? '1AZ' : 'globalregions' }_tooltip`, )} diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.spec.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.spec.tsx index 10a00261ad7c..1cd75a4aadbf 100644 --- a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.spec.tsx +++ b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.spec.tsx @@ -1,13 +1,18 @@ import { render, screen } from '@testing-library/react'; -import { describe, it } from 'vitest'; +import { describe, it, vi } from 'vitest'; import { RegionLocalzoneChip } from './RegionLocalzoneChip.component'; import { wrapper } from '@/wrapperRenders'; import { URL_INFO } from '@/components/region-selector/constants'; +import { useIs1AZ } from '@/hooks/useIs1AZ/useIs1AZ'; + +vi.mock('@/hooks/useIs1AZ/useIs1AZ'); describe('RegionLocalzoneChip', () => { it.each([undefined, false, true])( 'should render chip with showTooltip %s with correct texts and links', (showTooltip: boolean | undefined) => { + vi.mocked(useIs1AZ).mockReturnValue(false); + render(, { wrapper }); expect( @@ -32,4 +37,14 @@ describe('RegionLocalzoneChip', () => { } }, ); + + it('should render chip with 3az link when is1AZ is enabled', () => { + vi.mocked(useIs1AZ).mockReturnValue(true); + + render(, { wrapper }); + + expect( + screen.getByText('pci_project_flavors_zone_localzone_1AZ_tooltip'), + ).toBeInTheDocument(); + }); }); 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 e4d7053a0c78..61268a11c373 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 @@ -19,6 +19,7 @@ import { import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core'; import { useTranslation } from 'react-i18next'; import { URL_INFO } from './constants'; +import { useIs1AZ } from '../../hooks/useIs1AZ/useIs1AZ'; export function RegionLocalzoneChip({ showTooltip = true, @@ -26,6 +27,7 @@ export function RegionLocalzoneChip({ showTooltip?: boolean; }>) { const { t } = useTranslation('pci-region-selector'); + const is1AZ = useIs1AZ(); const context = useContext(ShellContext); const { ovhSubsidiary } = context.environment.getUser(); const getDocumentUrl = (linkType: string) => @@ -60,7 +62,11 @@ export function RegionLocalzoneChip({ color={ODS_THEME_COLOR_INTENT.text} level={ODS_TEXT_LEVEL.body} > - {t('pci_project_flavors_zone_localzone_tooltip')} + {t( + `pci_project_flavors_zone_localzone${ + is1AZ ? '_1AZ' : '' + }_tooltip`, + )}   { 'size', isSelected ? ODS_TEXT_SIZE._500 : ODS_TEXT_SIZE._400, ); - screen.debug(); const chip = screen.queryByText(`chip-${region.type}`); if (isCompact) { diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/constants.ts b/packages/manager/modules/manager-pci-common/src/components/region-selector/constants.ts index 36417ce67894..a2e61346398e 100644 --- a/packages/manager/modules/manager-pci-common/src/components/region-selector/constants.ts +++ b/packages/manager/modules/manager-pci-common/src/components/region-selector/constants.ts @@ -50,27 +50,48 @@ export const GLOBAL_REGIONS_INFO_URL: Record = { }; export const EXPANSIONS_REGIONS_AZ = { - DEFAULT: 'https://www.ovhcloud.com/en/about-us/global-infrastructure/', - ASIA: 'https://www.ovhcloud.com/asia/about-us/global-infrastructure/', - AU: 'https://www.ovhcloud.com/en-au/about-us/global-infrastructure/', - CA: 'https://www.ovhcloud.com/en-ca/about-us/global-infrastructure/', - GB: 'https://www.ovhcloud.com/en-gb/about-us/global-infrastructure/', - IE: 'https://www.ovhcloud.com/en-ie/about-us/global-infrastructure/', - IN: 'https://www.ovhcloud.com/en-in/about-us/global-infrastructure/', - SG: 'https://www.ovhcloud.com/en-sg/about-us/global-infrastructure/', - DE: 'https://www.ovhcloud.com/de/about-us/global-infrastructure/', - ES: 'https://www.ovhcloud.com/es-es/about-us/global-infrastructure/', - FR: 'https://www.ovhcloud.com/fr/about-us/global-infrastructure/', - IT: 'https://www.ovhcloud.com/it/about-us/global-infrastructure/', - MA: 'https://www.ovhcloud.com/fr-ma/about-us/global-infrastructure/', - SN: 'https://www.ovhcloud.com/fr-sn/about-us/global-infrastructure/', - TN: 'https://www.ovhcloud.com/fr-tn/about-us/global-infrastructure/', - NL: 'https://www.ovhcloud.com/nl/about-us/global-infrastructure/', - PL: 'https://www.ovhcloud.com/nl/about-us/global-infrastructure/', - PT: 'https://www.ovhcloud.com/pt/about-us/global-infrastructure/', - QC: 'https://www.ovhcloud.com/fr-ca/about-us/global-infrastructure/', - US: 'https://www.ovhcloud.com/en/about-us/global-infrastructure/', - WS: 'https://www.ovhcloud.com/es/about-us/global-infrastructure/', + DEFAULT: + 'https://www.ovhcloud.com/en/about-us/global-infrastructure/expansion-regions-az/', + ASIA: + 'https://www.ovhcloud.com/asia/about-us/global-infrastructure/expansion-regions-az/', + AU: + ' https://www.ovhcloud.com/en-au/about-us/global-infrastructure/expansion-regions-az/', + CA: + 'https://www.ovhcloud.com/en-ca/about-us/global-infrastructure/expansion-regions-az/', + GB: + 'https://www.ovhcloud.com/en-gb/about-us/global-infrastructure/expansion-regions-az/', + IE: + 'https://www.ovhcloud.com/en-ie/about-us/global-infrastructure/expansion-regions-az/', + IN: + 'https://www.ovhcloud.com/en-in/about-us/global-infrastructure/expansion-regions-az/', + SG: + 'https://www.ovhcloud.com/en-sg/about-us/global-infrastructure/expansion-regions-az/', + DE: + 'https://www.ovhcloud.com/de/about-us/global-infrastructure/expansion-regions-az/', + ES: + 'https://www.ovhcloud.com/es-es/about-us/global-infrastructure/expansion-regions-az/', + FR: + 'https://www.ovhcloud.com/fr/about-us/global-infrastructure/expansion-regions-az/', + IT: + 'https://www.ovhcloud.com/it/about-us/global-infrastructure/expansion-regions-az/', + MA: + 'https://www.ovhcloud.com/fr-ma/about-us/global-infrastructure/expansion-regions-az/', + SN: + 'https://www.ovhcloud.com/fr-sn/about-us/global-infrastructure/expansion-regions-az/', + TN: + 'https://www.ovhcloud.com/fr-tn/about-us/global-infrastructure/expansion-regions-az/', + NL: + 'https://www.ovhcloud.com/nl/about-us/global-infrastructure/expansion-regions-az/', + PL: + 'https://www.ovhcloud.com/pl/about-us/global-infrastructure/expansion-regions-az/', + PT: + 'https://www.ovhcloud.com/pt/about-us/global-infrastructure/expansion-regions-az/', + QC: + 'https://www.ovhcloud.com/fr-ca/about-us/global-infrastructure/expansion-regions-az/', + US: + 'https://www.ovhcloud.com/en/about-us/global-infrastructure/expansion-regions-az/', + WS: + 'https://www.ovhcloud.com/es/about-us/global-infrastructure/expansion-regions-az/', }; export const URL_INFO = { diff --git a/packages/manager/modules/manager-pci-common/src/hooks/useIs1AZ/useIs1AZ.spec.ts b/packages/manager/modules/manager-pci-common/src/hooks/useIs1AZ/useIs1AZ.spec.ts new file mode 100644 index 000000000000..d12ecfe79bb8 --- /dev/null +++ b/packages/manager/modules/manager-pci-common/src/hooks/useIs1AZ/useIs1AZ.spec.ts @@ -0,0 +1,56 @@ +import { + useFeatureAvailability, + UseFeatureAvailabilityResult, +} from '@ovh-ux/manager-react-components'; +import { vi } from 'vitest'; +import { renderHook } from '@testing-library/react'; +import { FEATURE_REGION_1AZ, useIs1AZ } from './useIs1AZ'; + +vi.mock('@ovh-ux/manager-react-components'); + +describe('useIs1AZ', () => { + it('should return false if data is undefined', () => { + vi.mocked(useFeatureAvailability).mockImplementationOnce( + () => + ({ + data: undefined, + isLoading: true, + } as UseFeatureAvailabilityResult), + ); + + const { result } = renderHook(() => useIs1AZ()); + expect(result.current).toBe(false); + }); + + it('should return false if feature is set to false', () => { + vi.mocked(useFeatureAvailability).mockImplementationOnce( + (features) => + ({ + data: { + ...Object.fromEntries(features.map((feature) => [feature, false])), + [FEATURE_REGION_1AZ]: false, + }, + isLoading: false, + } as UseFeatureAvailabilityResult), + ); + + const { result } = renderHook(() => useIs1AZ()); + expect(result.current).toBe(false); + }); + + it('should return true if feature is set to true', () => { + vi.mocked(useFeatureAvailability).mockImplementationOnce( + (features) => + ({ + data: { + ...Object.fromEntries(features.map((feature) => [feature, false])), + [FEATURE_REGION_1AZ]: true, + }, + isLoading: false, + } as UseFeatureAvailabilityResult), + ); + + const { result } = renderHook(() => useIs1AZ()); + expect(result.current).toBe(true); + }); +}); diff --git a/packages/manager/modules/manager-pci-common/src/hooks/useIs1AZ/useIs1AZ.ts b/packages/manager/modules/manager-pci-common/src/hooks/useIs1AZ/useIs1AZ.ts new file mode 100644 index 000000000000..c05ce47f949c --- /dev/null +++ b/packages/manager/modules/manager-pci-common/src/hooks/useIs1AZ/useIs1AZ.ts @@ -0,0 +1,9 @@ +import { useFeatureAvailability } from '@ovh-ux/manager-react-components'; + +export const FEATURE_REGION_1AZ = 'public-cloud:region-1AZ'; + +export const useIs1AZ = () => { + const { data } = useFeatureAvailability([FEATURE_REGION_1AZ]); + + return data?.[FEATURE_REGION_1AZ] || false; +};