feat(ips): region selector (#14687)

ref: MANAGER-16479

Signed-off-by: Nicolas Pierre-charles <[email protected]>

packages/manager/apps/ips/.gitignore

@@ -0,0 +1 @@
+coverage

packages/manager/apps/ips/package.json

@@ -15,22 +15,21 @@
     "dev": "tsc && vite",
     "start": "lerna exec --stream --scope='@ovh-ux/manager-ips-app' --include-dependencies -- npm run build --if-present",
     "start:dev": "lerna exec --stream --scope='@ovh-ux/manager-ips-app' --include-dependencies -- npm run dev --if-present",
-    "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/manager-ips-app' --include-dependencies -- npm run dev:watch --if-present"
+    "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/manager-ips-app' --include-dependencies -- npm run dev:watch --if-present",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@ovh-ux/manager-config": "*",
     "@ovh-ux/manager-core-api": "*",
     "@ovh-ux/manager-core-utils": "*",
-    "@ovh-ux/manager-react-components": "2.1.0",
+    "@ovh-ux/manager-react-components": "^2.2.0",
     "@ovh-ux/manager-react-core-application": "*",
     "@ovh-ux/manager-react-shell-client": "^0.8.1",
-    "@ovh-ux/manager-tailwind-config": "*",
     "@ovh-ux/request-tagger": "^0.4.0",
-    "@ovhcloud/ods-common-core": "^17.2.2",
-    "@ovhcloud/ods-components": "18.3.0",
-    "@ovhcloud/ods-themes": "^18.3.0",
-    "axios": "^1.1.2",
-    "clsx": "^1.2.1",
+    "@ovhcloud/ods-components": "18.4.0",
+    "@ovhcloud/ods-themes": "^18.4.0",
+    "flag-icons": "^7.2.3",
     "i18next": "^23.8.2",
     "i18next-http-backend": "^2.4.2",
     "react": "^18.2.0",
@@ -39,13 +38,19 @@
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
-    "@cucumber/cucumber": "^10.3.1",
     "@ovh-ux/manager-vite-config": "*",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-devtools": "^5.51.21",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "element-internals-polyfill": "^1.3.12",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.1.6",
-    "vite": "^5.2.13"
+    "vite": "^5.2.13",
+    "vitest": "^1.2.0"
   },
   "regions": [
     "CA",

packages/manager/apps/ips/public/translations/region-selector/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"
+}

packages/manager/apps/ips/setup-test.tsx

@@ -0,0 +1,10 @@
+import { beforeAll, afterAll } from 'vitest';
+import 'element-internals-polyfill';
+
+beforeAll(() => {
+  global.__VERSION__ = null;
+});
+
+afterAll(() => {
+  delete global.__VERSION__;
+});

packages/manager/apps/ips/src/App.tsx

@@ -1,13 +1,10 @@
 import React, { useEffect, useContext } from 'react';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { odsSetup } from '@ovhcloud/ods-common-core';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { RouterProvider, createHashRouter } from 'react-router-dom';
 import { Routes } from './routes/routes';
 
-odsSetup();
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {