-
Notifications
You must be signed in to change notification settings - Fork 98
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(pci-common): add 3AZ region and 1AZ chip
ref: TAPC-2357 Signed-off-by: Simon Chaumet <[email protected]>
- Loading branch information
1 parent
8d15795
commit aa4d503
Showing
13 changed files
with
498 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
...odules/manager-pci-common/src/components/region-selector/Region3AZChip.component.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { describe, it } from 'vitest'; | ||
| import { wrapper } from '@/wrapperRenders'; | ||
| import { Region3AZChip } from '@/components/region-selector/Region3AZChip.component'; | ||
| import { URL_INFO } from '@/components/region-selector/constants'; | ||
|
|
||
| describe('Region3AZChip', () => { | ||
| it.each([undefined, false, true])( | ||
| 'should render chip with showTooltip %s with correct texts and links', | ||
| (showTooltip: boolean | undefined) => { | ||
| render(<Region3AZChip showTooltip={showTooltip} />, { wrapper }); | ||
|
|
||
| expect( | ||
| screen.getByText('pci_project_flavors_zone_3AZ'), | ||
| ).toBeInTheDocument(); | ||
|
|
||
| if (showTooltip ?? true) { | ||
| expect( | ||
| screen.getByText('pci_project_flavors_zone_3AZ_tooltip'), | ||
| ).toBeInTheDocument(); | ||
|
|
||
| const link = screen.getByText('pci_project_flavors_zone_tooltip_link'); | ||
| expect(link).toBeInTheDocument(); | ||
| expect(link).toHaveAttribute('href', URL_INFO.REGION_3AZ.DEFAULT); | ||
| } else { | ||
| expect( | ||
| screen.queryByText('pci_project_flavors_zone_3AZ_tooltip'), | ||
| ).not.toBeInTheDocument(); | ||
| expect( | ||
| screen.queryByText('pci_project_flavors_zone_tooltip_link'), | ||
| ).not.toBeInTheDocument(); | ||
| } | ||
| }, | ||
| ); | ||
| }); |
78 changes: 78 additions & 0 deletions
78
...ger/modules/manager-pci-common/src/components/region-selector/Region3AZChip.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| 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 { | ||
| ODS_CHIP_SIZE, | ||
| ODS_ICON_NAME, | ||
| ODS_ICON_SIZE, | ||
| ODS_TEXT_LEVEL, | ||
| ODS_TEXT_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 Region3AZChip({ | ||
| showTooltip = true, | ||
| }: Readonly<{ | ||
| showTooltip?: boolean; | ||
| }>) { | ||
| const { t } = useTranslation('pci-region-selector'); | ||
| const context = useContext(ShellContext); | ||
| const { ovhSubsidiary } = context.environment.getUser(); | ||
| const documentURL = | ||
| URL_INFO.REGION_3AZ[ovhSubsidiary] || URL_INFO.REGION_3AZ.DEFAULT; | ||
|
|
||
| const chip = ( | ||
| <OsdsChip | ||
| size={ODS_CHIP_SIZE.sm} | ||
| class="chip-3AZ" | ||
| onClick={(event) => event.stopPropagation()} | ||
| > | ||
| <OsdsText level={ODS_TEXT_LEVEL.body} size={ODS_TEXT_SIZE._500}> | ||
| {t('pci_project_flavors_zone_3AZ')} | ||
| </OsdsText> | ||
| {showTooltip && ( | ||
| <OsdsIcon | ||
| name={ODS_ICON_NAME.HELP} | ||
| size={ODS_ICON_SIZE.xs} | ||
| className="ml-2" | ||
| /> | ||
| )} | ||
| </OsdsChip> | ||
| ); | ||
|
|
||
| if (showTooltip) { | ||
| return ( | ||
| <OsdsPopover> | ||
| <span slot="popover-trigger">{chip}</span> | ||
| <OsdsPopoverContent> | ||
| <OsdsText | ||
| color={ODS_THEME_COLOR_INTENT.text} | ||
| level={ODS_TEXT_LEVEL.body} | ||
| > | ||
| {t('pci_project_flavors_zone_3AZ_tooltip')} | ||
| </OsdsText> | ||
| | ||
| <Links | ||
| tab-index="-1" | ||
| label={t('pci_project_flavors_zone_tooltip_link')} | ||
| type={LinkType.external} | ||
| target={OdsHTMLAnchorElementTarget._blank} | ||
| href={documentURL} | ||
| /> | ||
| </OsdsPopoverContent> | ||
| </OsdsPopover> | ||
| ); | ||
| } | ||
|
|
||
| return chip; | ||
| } |
92 changes: 85 additions & 7 deletions
92
...manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,90 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { RegionGlobalzoneChip } from './RegionGlobalzoneChip.component'; | ||
| import { vi } from 'vitest'; | ||
| import { | ||
| useFeatureAvailability, | ||
| UseFeatureAvailabilityResult, | ||
| } from '@ovh-ux/manager-react-components'; | ||
| import { | ||
| FEATURE_REGION_1AZ, | ||
| RegionGlobalzoneChip, | ||
| } from './RegionGlobalzoneChip.component'; | ||
| import { wrapper } from '@/wrapperRenders'; | ||
| import { URL_INFO } from '@/components/region-selector/constants'; | ||
|
|
||
| vi.mock('@ovh-ux/manager-react-components', async (importOriginal) => { | ||
| const module = await importOriginal< | ||
| typeof import('@ovh-ux/manager-react-components') | ||
| >(); | ||
| return { ...module, useFeatureAvailability: vi.fn() }; | ||
| }); | ||
|
|
||
| enum ExpectedType { | ||
| GLOBAL_REGIONS = 'GLOBAL_REGIONS', | ||
| '1AZ_REGIONS' = '1AZ_REGIONS', | ||
| } | ||
|
|
||
| const EXPECTED_VALUES = { | ||
| [ExpectedType.GLOBAL_REGIONS]: { | ||
| label: 'pci_project_flavors_zone_global_region', | ||
| tooltip: 'pci_project_flavors_zone_globalregions_tooltip', | ||
| link: URL_INFO.GLOBAL_REGIONS.DEFAULT, | ||
| }, | ||
| [ExpectedType['1AZ_REGIONS']]: { | ||
| label: 'pci_project_flavors_zone_1AZ', | ||
| tooltip: 'pci_project_flavors_zone_1AZ_tooltip', | ||
| link: URL_INFO['1AZ_REGIONS'].DEFAULT, | ||
| }, | ||
| }; | ||
|
|
||
| describe('RegionGlobalzoneChip', () => { | ||
| it('renders chip with correct text', () => { | ||
| render(<RegionGlobalzoneChip />, { wrapper }); | ||
| expect( | ||
| screen.getByText('pci_project_flavors_zone_global_region'), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
| it.each([ | ||
| [undefined, undefined, ExpectedType.GLOBAL_REGIONS], | ||
| [undefined, false, ExpectedType.GLOBAL_REGIONS], | ||
| [undefined, true, ExpectedType['1AZ_REGIONS']], | ||
| [false, undefined, ExpectedType.GLOBAL_REGIONS], | ||
| [false, false, ExpectedType.GLOBAL_REGIONS], | ||
| [false, true, ExpectedType['1AZ_REGIONS']], | ||
| [true, undefined, ExpectedType.GLOBAL_REGIONS], | ||
| [true, false, ExpectedType.GLOBAL_REGIONS], | ||
| [true, true, ExpectedType['1AZ_REGIONS']], | ||
| ])( | ||
| 'should render chip with showTooltip %s show1AZ %s with correct texts and links', | ||
| ( | ||
| showTooltip: boolean | undefined, | ||
| show1AZ: boolean | undefined, | ||
| expectedType, | ||
| ) => { | ||
| 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), | ||
| ); | ||
|
|
||
| render(<RegionGlobalzoneChip showTooltip={showTooltip} />, { wrapper }); | ||
|
|
||
| expect(screen.getByText(expected.label)).toBeInTheDocument(); | ||
|
|
||
| if (showTooltip ?? true) { | ||
| expect(screen.getByText(expected.tooltip)).toBeInTheDocument(); | ||
|
|
||
| const link = screen.getByText('pci_project_flavors_zone_tooltip_link'); | ||
| expect(link).toBeInTheDocument(); | ||
| expect(link).toHaveAttribute('href', expected.link); | ||
| } else { | ||
| expect(screen.queryByText(expected.tooltip)).not.toBeInTheDocument(); | ||
| expect( | ||
| screen.queryByText('pci_project_flavors_zone_tooltip_link'), | ||
| ).not.toBeInTheDocument(); | ||
| } | ||
| }, | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.