Skip to content

Commit

Permalink
fix(pci-common): add tooltip relative to 1AZ feature flipping
Browse files Browse the repository at this point in the history
Signed-off-by: Simon Chaumet <[email protected]>
  • Loading branch information
SimonChaumet committed Jan 9, 2025
1 parent 6cdd0bf commit 16c419a
Show file tree
Hide file tree
Showing 8 changed files with 141 additions and 69 deletions.
Original file line number Diff line number Diff line change
@@ -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<
Expand All @@ -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',
Expand Down Expand Up @@ -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(<RegionGlobalzoneChip showTooltip={showTooltip} />, { wrapper });

Expand Down Expand Up @@ -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);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,19 @@ 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,
}: Readonly<{
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;

Expand All @@ -52,11 +49,7 @@ export function RegionGlobalzoneChip({
onClick={(event) => event.stopPropagation()}
>
<OsdsText level={ODS_TEXT_LEVEL.body} size={ODS_TEXT_SIZE._500}>
{t(
`pci_project_flavors_zone_${
data?.[FEATURE_REGION_1AZ] ? '1AZ' : 'global_region'
}`,
)}
{t(`pci_project_flavors_zone_${is1AZ ? '1AZ' : 'global_region'}`)}
</OsdsText>
{showTooltip && (
<OsdsIcon
Expand All @@ -78,11 +71,11 @@ export function RegionGlobalzoneChip({
color={ODS_THEME_COLOR_INTENT.text}
level={ODS_TEXT_LEVEL.body}
>
{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`,
)}
</OsdsText>
Expand Down
Original file line number Diff line number Diff line change
@@ -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(<RegionLocalzoneChip showTooltip={showTooltip} />, { wrapper });

expect(
Expand All @@ -32,4 +37,14 @@ describe('RegionLocalzoneChip', () => {
}
},
);

it('should render chip with 3az link when is1AZ is enabled', () => {
vi.mocked(useIs1AZ).mockReturnValue(true);

render(<RegionLocalzoneChip showTooltip />, { wrapper });

expect(
screen.getByText('pci_project_flavors_zone_localzone_1AZ_tooltip'),
).toBeInTheDocument();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,15 @@ 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,
}: Readonly<{
showTooltip?: boolean;
}>) {
const { t } = useTranslation('pci-region-selector');
const is1AZ = useIs1AZ();
const context = useContext(ShellContext);
const { ovhSubsidiary } = context.environment.getUser();
const getDocumentUrl = (linkType: string) =>
Expand Down Expand Up @@ -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`,
)}
</OsdsText>
&nbsp;
<Links
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ describe('RegionTile', () => {
'size',
isSelected ? ODS_TEXT_SIZE._500 : ODS_TEXT_SIZE._400,
);
screen.debug();

const chip = screen.queryByText(`chip-${region.type}`);
if (isCompact) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,27 +50,48 @@ export const GLOBAL_REGIONS_INFO_URL: Record<string, string> = {
};

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 = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
});
});
Original file line number Diff line number Diff line change
@@ -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;
};

0 comments on commit 16c419a

Please sign in to comment.