diff --git a/packages/manager-react-components/package.json b/packages/manager-react-components/package.json index f165a4ec5cc9..ffe5f748700e 100644 --- a/packages/manager-react-components/package.json +++ b/packages/manager-react-components/package.json @@ -39,6 +39,7 @@ "@tanstack/react-query": "^5.51.21", "@tanstack/react-table": "^8.20.1", "clsx": "^2.1.1", + "flag-icons": "^7.2.3", "lodash.isdate": "^4.0.1", "lodash.isequal": "^4.5.0", "react-i18next": "^14.0.5", @@ -53,7 +54,6 @@ "@mdx-js/react": "^3.0.1", "@ovh-ux/manager-core-api": "^0.9.0", "@ovh-ux/manager-react-shell-client": "^0.8.5", - "@ovh-ux/manager-tailwind-config": "^0.2.1", "@ovh-ux/manager-vite-config": "^0.8.3", "@ovhcloud/ods-components": "^18.3.0", "@ovhcloud/ods-themes": "^18.3.0", @@ -68,6 +68,7 @@ "@storybook/react-vite": "^7.5.3", "@testing-library/jest-dom": "6.4.2", "@testing-library/react": "14.0.0", + "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.5.5", "@types/lodash.isdate": "^4.0.9", "@types/lodash.isequal": "^4.5.0", @@ -113,8 +114,8 @@ "peerDependencies": { "@ovh-ux/manager-core-api": "^0.9.0-alpha.0", "@ovh-ux/manager-react-shell-client": "^0.8.5", - "@ovhcloud/ods-components": "^18.3.0", - "@ovhcloud/ods-themes": "^18.3.0", + "@ovhcloud/ods-components": "^18.4.1", + "@ovhcloud/ods-themes": "^18.4.1", "i18next": "^23.8.2", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/manager-react-components/src/components/index.ts b/packages/manager-react-components/src/components/index.ts index 94f8ee8b510d..3b4e52db0dd7 100644 --- a/packages/manager-react-components/src/components/index.ts +++ b/packages/manager-react-components/src/components/index.ts @@ -28,3 +28,4 @@ export * from './ManagerText/ManagerText'; export * from './pci-maintenance-banner'; export * from './region/region.component'; +export * from './region-selector/region-selector.component'; diff --git a/packages/manager-react-components/src/components/region-selector/__snapshots__/region-selector.spec.tsx.snap b/packages/manager-react-components/src/components/region-selector/__snapshots__/region-selector.spec.tsx.snap new file mode 100644 index 000000000000..b485af8ce352 --- /dev/null +++ b/packages/manager-react-components/src/components/region-selector/__snapshots__/region-selector.spec.tsx.snap @@ -0,0 +1,907 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`RegionSelector component > renders correctly 1`] = ` + +
+ + + region-selector-all-locations + + + region-selector-eu-filter + + + region-selector-ca-filter + + + region-selector-us-filter + + +
+ + +
+ + region-selector-country-name_fr + + + region-selector-city-name_eu-west-par + + + eu-west-par + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_eu-west-gra + + + eu-west-gra + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_eu-west-rbx + + + eu-west-rbx + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_eu-west-sbg + + + eu-west-sbg + +
+ + + +
+ + region-selector-country-name_de + + + region-selector-city-name_eu-west-lim + + + eu-west-lim + +
+ + + +
+ + region-selector-country-name_pl + + + region-selector-city-name_eu-central-waw + + + eu-central-waw + +
+ + + +
+ + region-selector-country-name_gb + + + region-selector-city-name_eu-west-eri + + + eu-west-eri + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-east-vin + + + us-east-vin + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-west-hil + + + us-west-hil + +
+ + + +
+ + region-selector-country-name_ca + + + region-selector-city-name_ca-east-bhs + + + ca-east-bhs + +
+ + + +
+ + region-selector-country-name_sg + + + region-selector-city-name_ap-southeast-sgp + + + ap-southeast-sgp + +
+ + + +
+ + region-selector-country-name_au + + + region-selector-city-name_ap-southeast-syd + + + ap-southeast-syd + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_eu-west-rbx-snc + + + eu-west-rbx-snc + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_eu-west-sbg-snc + + + eu-west-sbg-snc + +
+ + + +
+ + region-selector-country-name_ca + + + region-selector-city-name_ca-east-tor + + + ca-east-tor + +
+ + + +
+ + region-selector-country-name_in + + + region-selector-city-name_ap-south-mum + + + ap-south-mum + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_labeu-west-1-preprod + + + labeu-west-1-preprod + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_labeu-west-1-dev-2 + + + labeu-west-1-dev-2 + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_labeu-west-1-dev-1 + + + labeu-west-1-dev-1 + +
+ + + +
+ + region-selector-country-name_be + + + region-selector-city-name_eu-west-lz-bru + + + eu-west-lz-bru + +
+ + + +
+ + region-selector-country-name_es + + + region-selector-city-name_eu-west-lz-mad + + + eu-west-lz-mad + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_eu-west-gra-snc + + + eu-west-gra-snc + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-east-lz-dal + + + us-east-lz-dal + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-west-lz-lax + + + us-west-lz-lax + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-east-lz-chi + + + us-east-lz-chi + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-east-lz-nyc + + + us-east-lz-nyc + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-east-lz-mia + + + us-east-lz-mia + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-west-lz-pao + + + us-west-lz-pao + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-west-lz-den + + + us-west-lz-den + +
+ + + +
+ + region-selector-country-name_us + + + region-selector-city-name_us-east-lz-atl + + + us-east-lz-atl + +
+ + + +
+ + region-selector-country-name_fr + + + region-selector-city-name_eu-west-lz-mrs + + + eu-west-lz-mrs + +
+ +
+
+ +`; diff --git a/packages/manager-react-components/src/components/region-selector/region-selector.component.tsx b/packages/manager-react-components/src/components/region-selector/region-selector.component.tsx new file mode 100644 index 000000000000..43dfeb63ab22 --- /dev/null +++ b/packages/manager-react-components/src/components/region-selector/region-selector.component.tsx @@ -0,0 +1,91 @@ +import React from 'react'; +import { OdsCard, OdsText } from '@ovhcloud/ods-components/react'; +import { ODS_CARD_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components'; +import { useTranslation } from 'react-i18next'; +import { RegionTabs } from './region-tabs.component'; +import { + RegionFilter, + getCityNameKey, + getCountryCode, + getCountryKey, + isRegionInCa, + isRegionInEu, + isRegionInUs, + shadowColor, +} from './region-selector.utils'; +import './translations'; + +export type RegionSelectorProps = { + regionList: string[]; + selectedRegion?: string; + setSelectedRegion: React.Dispatch>; +}; + +export const RegionSelector: React.FC = ({ + regionList, + selectedRegion, + setSelectedRegion, +}) => { + const [currentFilter, setCurrentFilter] = React.useState(RegionFilter.all); + const { t } = useTranslation('region-selector'); + return ( +
+ setCurrentFilter(RegionFilter.all)} + setCaFilter={() => setCurrentFilter(RegionFilter.ca)} + setEuFilter={() => setCurrentFilter(RegionFilter.eu)} + setUsFilter={() => setCurrentFilter(RegionFilter.us)} + /> +
+ {regionList + .filter((region) => { + switch (currentFilter) { + case RegionFilter.eu: + return isRegionInEu(region); + case RegionFilter.ca: + return isRegionInCa(region); + case RegionFilter.us: + return isRegionInUs(region); + case RegionFilter.all: + default: + return true; + } + }) + .map((region) => { + const borderStyle = + selectedRegion === region + ? `region_selector_selected` + : `m-[1px] hover:shadow-md`; + + return ( + setSelectedRegion(region)} + color={ODS_CARD_COLOR.neutral} + > + +
+ + {t(getCountryKey(region))} + + + {t(getCityNameKey(region))} + + {region} +
+ + ); + })} +
+
+ ); +}; + +export default RegionSelector; diff --git a/packages/manager-react-components/src/components/region-selector/region-selector.scss b/packages/manager-react-components/src/components/region-selector/region-selector.scss new file mode 100644 index 000000000000..e1b42ce488d1 --- /dev/null +++ b/packages/manager-react-components/src/components/region-selector/region-selector.scss @@ -0,0 +1,4 @@ +.region_selector_selected { + border: 2px solid #0050d7; + margin: 0; +} diff --git a/packages/manager-react-components/src/components/region-selector/region-selector.spec.tsx b/packages/manager-react-components/src/components/region-selector/region-selector.spec.tsx new file mode 100644 index 000000000000..a5cbd811e9e0 --- /dev/null +++ b/packages/manager-react-components/src/components/region-selector/region-selector.spec.tsx @@ -0,0 +1,132 @@ +import { describe, it, vi, expect } from 'vitest'; +import { render, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { RegionSelector } from './region-selector.component'; +import '@testing-library/jest-dom'; + +vi.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: (translationKey: string) => translationKey, + }), +})); + +const regionList = [ + 'eu-west-par', + 'eu-west-gra', + 'eu-west-rbx', + 'eu-west-sbg', + 'eu-west-lim', + 'eu-central-waw', + 'eu-west-eri', + 'us-east-vin', + 'us-west-hil', + 'ca-east-bhs', + 'ap-southeast-sgp', + 'ap-southeast-syd', + 'eu-west-rbx-snc', + 'eu-west-sbg-snc', + 'ca-east-tor', + 'ap-south-mum', + 'labeu-west-1-preprod', + 'labeu-west-1-dev-2', + 'labeu-west-1-dev-1', + 'eu-west-lz-bru', + 'eu-west-lz-mad', + 'eu-west-gra-snc', + 'us-east-lz-dal', + 'us-west-lz-lax', + 'us-east-lz-chi', + 'us-east-lz-nyc', + 'us-east-lz-mia', + 'us-west-lz-pao', + 'us-west-lz-den', + 'us-east-lz-atl', + 'eu-west-lz-mrs', +]; + +describe('RegionSelector component', () => { + it('renders correctly', async () => { + const spy = vi.fn(); + const { asFragment, container, getByText } = render( + , + ); + + expect(container.querySelectorAll('ods-card')).toHaveLength( + regionList.length, + ); + expect(asFragment()).toMatchSnapshot(); + + const newRegion = 'us-west-lz-den'; + await waitFor(() => userEvent.click(getByText(newRegion))); + expect(spy).toHaveBeenCalledWith(newRegion); + }); + + it.each([ + { label: 'region-selector-eu-filter', cardNb: 16 }, + { label: 'region-selector-ca-filter', cardNb: 2 }, + { label: 'region-selector-us-filter', cardNb: 10 }, + ])('filters correctly', async ({ label, cardNb }) => { + const { getByText, container } = render( + , + ); + + const filterTab = getByText(label); + await waitFor(() => userEvent.click(filterTab)); + + expect(container.querySelectorAll('ods-card')).toHaveLength(cardNb); + + await waitFor(() => + userEvent.click(getByText('region-selector-all-locations')), + ); + expect(container.querySelectorAll('ods-card')).toHaveLength( + regionList.length, + ); + }); + + it('does not break if there is no region at all', () => { + const { getByText } = render( + , + ); + + expect(getByText('region-selector-all-locations')).toBeInTheDocument(); + }); + + it.each([ + { + list: ['us-west-lz-lax', 'us-east-lz-chi', 'us-east-lz-nyc'], + disabledFilters: ['eu', 'ca'], + }, + { + list: ['eu-west-par', 'eu-west-gra', 'eu-west-rbx'], + disabledFilters: ['us', 'ca'], + }, + { + list: [ + 'eu-west-par', + 'eu-west-gra', + 'eu-west-rbx', + 'ca-east-tor', + 'ap-south-mum', + ], + disabledFilters: ['us'], + }, + ])( + 'disable filters if there is no corresponding regions', + ({ list, disabledFilters }) => { + const { getByText } = render( + , + ); + + disabledFilters.forEach((tab) => { + expect(getByText(`region-selector-${tab}-filter`)).toHaveAttribute( + 'is-disabled', + 'true', + ); + }); + }, + ); +}); diff --git a/packages/manager-react-components/src/components/region-selector/region-selector.stories.tsx b/packages/manager-react-components/src/components/region-selector/region-selector.stories.tsx new file mode 100644 index 000000000000..1de6869a6d8d --- /dev/null +++ b/packages/manager-react-components/src/components/region-selector/region-selector.stories.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Story } from '@storybook/react'; +import { RegionSelector } from './region-selector.component'; + +const managerRegionSelector = { + title: 'Components/RegionSelector', + component: RegionSelector, +}; + +const Template: Story = (args) => { + const [selectedRegion, setSelectedRegion] = React.useState(null); + return ( + + ); +}; + +export const DemoRegionSelector = Template.bind({}); + +const regionList = [ + 'eu-west-par', + 'eu-west-gra', + 'eu-west-rbx', + 'eu-west-sbg', + 'eu-west-lim', + 'eu-central-waw', + 'eu-west-eri', + 'us-east-vin', + 'us-west-hil', + 'ca-east-bhs', + 'ap-southeast-sgp', + 'ap-southeast-syd', + 'eu-west-rbx-snc', + 'eu-west-sbg-snc', + 'ca-east-tor', + 'ap-south-mum', + 'labeu-west-1-preprod', + 'labeu-west-1-dev-2', + 'labeu-west-1-dev-1', + 'eu-west-lz-bru', + 'eu-west-lz-mad', + 'eu-west-gra-snc', + 'us-east-lz-dal', + 'us-west-lz-lax', + 'us-east-lz-chi', + 'us-east-lz-nyc', + 'us-east-lz-mia', + 'us-west-lz-pao', + 'us-west-lz-den', + 'us-east-lz-atl', + 'eu-west-lz-mrs', +]; + +DemoRegionSelector.args = { + regionList, +}; + +export default managerRegionSelector; diff --git a/packages/manager-react-components/src/components/region-selector/region-selector.utils.ts b/packages/manager-react-components/src/components/region-selector/region-selector.utils.ts new file mode 100644 index 000000000000..d6dfd49e2e6a --- /dev/null +++ b/packages/manager-react-components/src/components/region-selector/region-selector.utils.ts @@ -0,0 +1,84 @@ +export const isRegionInEu = (region: string) => + region.includes('eu-') || region.includes('labeu-'); + +export const isRegionInCa = (region: string) => region.includes('ca-'); + +export const isRegionInUs = (region: string) => region.includes('us-'); + +export enum RegionFilter { + all = 'all', + eu = 'eu', + ca = 'ca', + us = 'us', +} + +export const shadowColor = '#000E9C33'; + +export const countryCodeByRegion = { + par: 'fr', + gra: 'fr', + rbx: 'fr', + sbg: 'fr', + mrs: 'fr', + lim: 'de', + dln: 'de', + eri: 'gb', + mnc: 'gb', + waw: 'pl', + vie: 'at', + bru: 'be', + mad: 'es', + pra: 'cz', + ams: 'nl', + mil: 'it', + zrh: 'ch', + buh: 'ro', + preprod: 'fr', + 'dev-1': 'fr', + 'dev-2': 'fr', + sha: 'fr', + vin: 'us', + hil: 'us', + dal: 'us', + lax: 'us', + chi: 'us', + nyc: 'us', + mia: 'us', + pao: 'us', + den: 'us', + ind: 'us', + stl: 'us', + atl: 'us', + slc: 'us', + bna: 'us', + clt: 'us', + bos: 'us', + sea: 'us', + phd: 'us', + hou: 'us', + van: 'ca', + bhs: 'ca', + tor: 'ca', + sgp: 'sg', + syd: 'au', + mum: 'in', + blr: 'in', + rba: 'ma', + jkt: 'id', + tyo: 'jp', + dxb: 'ae', + lux: 'lu', + lau: 'ch', + hel: 'fi', +}; + +export const getCountryCode = (region: string) => + Object.entries(countryCodeByRegion).find(([regionPart]) => + region.includes(regionPart), + )?.[1]; + +export const getCountryKey = (region: string) => + `region-selector-country-name_${getCountryCode(region)}`; + +export const getCityNameKey = (region: string) => + `region-selector-city-name_${region}`; diff --git a/packages/manager-react-components/src/components/region-selector/region-tabs.component.tsx b/packages/manager-react-components/src/components/region-selector/region-tabs.component.tsx new file mode 100644 index 000000000000..da0a206decc5 --- /dev/null +++ b/packages/manager-react-components/src/components/region-selector/region-tabs.component.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { OdsTab, OdsTabs } from '@ovhcloud/ods-components/react'; +import { useTranslation } from 'react-i18next'; +import { + RegionFilter, + isRegionInCa, + isRegionInEu, + isRegionInUs, +} from './region-selector.utils'; + +export type RegionTabsProps = { + regionList?: string[]; + currentFilter: RegionFilter; + setEuFilter: () => void; + setCaFilter: () => void; + setUsFilter: () => void; + removeFilter: () => void; +}; + +export const RegionTabs: React.FC = ({ + regionList = [], + currentFilter, + setEuFilter, + setCaFilter, + setUsFilter, + removeFilter, +}) => { + const { t } = useTranslation('region-selector'); + const hasEu = regionList.some(isRegionInEu); + const hasCa = regionList.some(isRegionInCa); + const hasUs = regionList.some(isRegionInUs); + + return ( + + + {t('region-selector-all-locations')} + + hasEu && setEuFilter()} + > + {t('region-selector-eu-filter')} + + hasCa && setCaFilter()} + > + {t('region-selector-ca-filter')} + + hasUs && setUsFilter()} + > + {t('region-selector-us-filter')} + + + ); +}; + +export default RegionTabs; diff --git a/packages/manager-react-components/src/components/region-selector/translations/Messages_fr_FR.json b/packages/manager-react-components/src/components/region-selector/translations/Messages_fr_FR.json new file mode 100644 index 000000000000..8e191a67eebd --- /dev/null +++ b/packages/manager-react-components/src/components/region-selector/translations/Messages_fr_FR.json @@ -0,0 +1,85 @@ +{ + "region-selector-all-locations": "Toutes les regions", + "region-selector-eu-filter": "Europe", + "region-selector-ca-filter": "Canada", + "region-selector-us-filter": "USA", + "region-selector-country-name_fr": "France", + "region-selector-country-name_de": "Allemagne", + "region-selector-country-name_gb": "Royaume-Uni", + "region-selector-country-name_pl": "Pologne", + "region-selector-country-name_cz": "République Tchèque", + "region-selector-country-name_be": "Belgique", + "region-selector-country-name_nl": "Pays-Bas", + "region-selector-country-name_ch": "Suisse", + "region-selector-country-name_at": "Autriche", + "region-selector-country-name_it": "Italie", + "region-selector-country-name_es": "Espagne", + "region-selector-country-name_us": "USA", + "region-selector-country-name_ca": "Canada", + "region-selector-country-name_sg": "Singapour", + "region-selector-country-name_au": "Australie", + "region-selector-country-name_in": "Inde", + "region-selector-country-name_jp": "Japon", + "region-selector-country-name_id": "Indonésie", + "region-selector-country-name_lu": "Luxembourg", + "region-selector-country-name_ro": "Roumanie", + "region-selector-country-name_fi": "Finlande", + "region-selector-city-name_eu-west-par": "Paris", + "region-selector-city-name_eu-west-gra": "Gravelines", + "region-selector-city-name_eu-west-gra1": "Gravelines (GRA1)", + "region-selector-city-name_eu-west-sha": "Gravelines (SHADOW-EU-1)", + "region-selector-city-name_eu-west-rbx": "Roubaix", + "region-selector-city-name_eu-west-sbg": "Strasbourg", + "region-selector-city-name_eu-west-sbg1": "Strasbourg (SBG1)", + "region-selector-city-name_eu-west-lim": "Limburg", + "region-selector-city-name_eu-west-dln": "Dublin", + "region-selector-city-name_eu-west-vie": "Vienne", + "region-selector-city-name_eu-west-ams": "Amsterdam", + "region-selector-city-name_eu-west-eri": "Erith", + "region-selector-city-name_eu-west-mnc": "Manchester", + "region-selector-city-name_eu-west-lux": "Luxembourg", + "region-selector-city-name_eu-west-zrh": "Zurich", + "region-selector-city-name_eu-west-lau": "Lausanne", + "region-selector-city-name_eu-north-hel": "Helsinki", + "region-selector-city-name_eu-central-waw": "Varsovie", + "region-selector-city-name_eu-central-pra": "Prague", + "region-selector-city-name_eu-central-bug": "Bucarest", + "region-selector-city-name_eu-west-lz-bru": "Bruxelles (lz)", + "region-selector-city-name_eu-west-lz-mad": "Madrid (lz)", + "region-selector-city-name_eu-west-mil": "Milan", + "region-selector-city-name_eu-west-gra-snc": "Gravelines (snc)", + "region-selector-city-name_eu-west-rbx-snc": "Roubaix (snc)", + "region-selector-city-name_eu-west-sbg-snc": "Strasbourg (snc)", + "region-selector-city-name_eu-west-lz-mrs": "Marseille", + "region-selector-city-name_labeu-west-1-preprod": "Croix (preprod)", + "region-selector-city-name_labeu-west-1-dev-1": "Croix (dev-1)", + "region-selector-city-name_labeu-west-1-dev-2": "Croix (dev-2)", + "region-selector-city-name_us-east-vin": "Vint Hill", + "region-selector-city-name_us-west-hil": "Hillsboro", + "region-selector-city-name_us-east-lz-dal": "Dallas", + "region-selector-city-name_us-east-lz-hou": "Houston", + "region-selector-city-name_us-west-lz-lax": "Los Angeles", + "region-selector-city-name_us-west-lz-slc": "Salt Lake City", + "region-selector-city-name_us-east-lz-chi": "Chicago", + "region-selector-city-name_us-east-lz-stl": "Saint-Louis", + "region-selector-city-name_us-east-lz-ind": "Indianapolis", + "region-selector-city-name_us-east-lz-nyc": "New York", + "region-selector-city-name_us-east-lz-mia": "Miami", + "region-selector-city-name_us-west-lz-pao": "Palo Alto", + "region-selector-city-name_us-west-lz-den": "Denver", + "region-selector-city-name_us-west-lz-sea": "Seattle", + "region-selector-city-name_us-east-lz-atl": "Atlanta", + "region-selector-city-name_us-east-lz-bna": "Nashville", + "region-selector-city-name_us-east-lz-clt": "Charlotte", + "region-selector-city-name_us-east-lz-bos": "Boston", + "region-selector-city-name_us-east-lz-phd": "Philadelphie", + "region-selector-city-name_ca-east-bhs": "Beauharnois", + "region-selector-city-name_ca-east-van": "Vancouver", + "region-selector-city-name_ca-east-bhs1": "Beauharnois (BHS1)", + "region-selector-city-name_ca-east-tor": "Toronto", + "region-selector-city-name_ap-southeast-sgp": "Singapour", + "region-selector-city-name_ap-southeast-syd": "Sydney", + "region-selector-city-name_ap-south-mum": "Mumbai", + "region-selector-city-name_ap-south-blr": "Bangalore", + "region-selector-city-name_ap-north-tyo": "Tokyo" +} diff --git a/packages/manager-react-components/src/components/region-selector/translations/index.ts b/packages/manager-react-components/src/components/region-selector/translations/index.ts new file mode 100644 index 000000000000..8f1c921e051b --- /dev/null +++ b/packages/manager-react-components/src/components/region-selector/translations/index.ts @@ -0,0 +1,26 @@ +import i18next from 'i18next'; +// import de_DE from './Messages_de_DE.json'; +// import en_GB from './Messages_en_GB.json'; +// import es_ES from './Messages_es_ES.json'; +// import fr_CA from './Messages_fr_CA.json'; +import fr_FR from './Messages_fr_FR.json'; +// import it_IT from './Messages_it_IT.json'; +// import pl_PL from './Messages_pl_PL.json'; +// import pt_PT from './Messages_pt_PT.json'; + +function addTranslations() { + // i18next.addResources('de_DE', 'region-selector', de_DE); + // i18next.addResources('en_GB', 'region-selector', en_GB); + // i18next.addResources('es_ES', 'region-selector', es_ES); + // i18next.addResources('fr_CA', 'region-selector', fr_CA); + i18next.addResources('fr_FR', 'region-selector', fr_FR); + // i18next.addResources('it_IT', 'region-selector', it_IT); + // i18next.addResources('pl_PL', 'region-selector', pl_PL); + // i18next.addResources('pt_PT', 'region-selector', pt_PT); +} + +if (i18next.isInitialized) { + addTranslations(); +} else { + i18next.on('initialized', addTranslations); +} diff --git a/packages/manager-react-components/src/lib.scss b/packages/manager-react-components/src/lib.scss index 139bbd3adaf3..cef20e2f7061 100644 --- a/packages/manager-react-components/src/lib.scss +++ b/packages/manager-react-components/src/lib.scss @@ -1,3 +1,5 @@ @import './components/templates/error/error.scss'; @import './components/templates/update-name-modal/update-name-modal.scss'; @import './components/filters/filters.scss'; +@import './components/region-selector/region-selector.scss'; +@import 'flag-icons/css/flag-icons.min.css'; diff --git a/yarn.lock b/yarn.lock index 9fb440da49b0..cc151d29d609 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5939,19 +5939,7 @@ "@ovhcloud/ods-common-stencil" "17.2.2" "@ovhcloud/ods-common-theming" "17.2.2" -"@ovhcloud/ods-components@^18.3.0": - version "18.3.0" - resolved "https://registry.yarnpkg.com/@ovhcloud/ods-components/-/ods-components-18.3.0.tgz#f5fa856bb45ad7df3ebe421d64ab334f41c7206c" - integrity sha512-E2bDV7RDnNty8fR7Fbvkxug2pySmsy4BQIt9rY0VTZWtcbaUlazmKbr+l+TjeL7vRxiPR4+9xLidI1kwt26O9A== - dependencies: - "@floating-ui/dom" "1.6.11" - "@stencil/core" "4.16.0" - google-libphonenumber "3.2.35" - tom-select "2.3.1" - tslib "2.6.3" - vanillajs-datepicker "1.3.4" - -"@ovhcloud/ods-components@^18.4.1": +"@ovhcloud/ods-components@^18.3.0", "@ovhcloud/ods-components@^18.4.1": version "18.4.1" resolved "https://registry.yarnpkg.com/@ovhcloud/ods-components/-/ods-components-18.4.1.tgz#44e21d23fbf844348e94b966d2aa5c38d8376dc8" integrity sha512-aS7BArn0691hyHAn2/ND/7XYIX01gAmVCSvEl8uT9umT4iDDvodipkWRtGxBUin6ndvyED1Jx0BfCbtYsrKPeQ== @@ -5977,12 +5965,7 @@ dependencies: "@ovhcloud/ods-common-theming" "17.2.2" -"@ovhcloud/ods-themes@^18.3.0": - version "18.3.0" - resolved "https://registry.yarnpkg.com/@ovhcloud/ods-themes/-/ods-themes-18.3.0.tgz#804e3502e6791f7ec2efc24abb107d27cd4e02e0" - integrity sha512-mTxtcM4tCUPk98x65PeslXqGONJraTryXgkbgbZuvtOYf9SgVl+zFJfyisD2sYGuJvVf6hJP1NvJkyrxOUqtSw== - -"@ovhcloud/ods-themes@^18.4.1": +"@ovhcloud/ods-themes@^18.3.0", "@ovhcloud/ods-themes@^18.4.1": version "18.4.1" resolved "https://registry.yarnpkg.com/@ovhcloud/ods-themes/-/ods-themes-18.4.1.tgz#1c8dfeff1ba0b829fd61e8dea41af4cdbed46912" integrity sha512-bezBp/Bgbo19IFPJ/+a/bFt2IArjq8wGrHPshpk/bVVZsxkgpAiUfRERmftU+l7gYU3e+yvFdopNL6eRaJDPWQ== @@ -16015,6 +15998,11 @@ flag-icon-css@~0.8.5: resolved "https://registry.yarnpkg.com/flag-icon-css/-/flag-icon-css-0.8.6.tgz#7dab89f99040c2a1113108132a1eab8c1dea44c4" integrity sha512-OQdsWTHoPB1gi79Be6mLgKD1GprOLur/Qv370nh91+Lrw0rIhGMjYc+CVgS05ZhjaMYn/CEQUNreW4SN1giQQw== +flag-icons@^7.2.3: + version "7.2.3" + resolved "https://registry.yarnpkg.com/flag-icons/-/flag-icons-7.2.3.tgz#b67f379fa0ef28c4e605319a78035131bdd8ced7" + integrity sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg== + flagged-respawn@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-2.0.0.tgz#abf39719dcfe1ac06c86c9466081c541c682987b"