feat(*): pci vouchers app in reactjs

 Migrating the existing Vouchers app from AngularJS to ReactJS
 Expose client typescript api type
 Add check for missing region in apps package json
 Make level2 attribute optional
 Create react shell client hooks
 Add paginated-datagrid & notifications
 Add test:turbo command
 Set alignment of osds-pagination to right
 uAPP url should be reachable directly
 ref: DTCORE-1675, DTCORE-1660

Signed-off-by: Florian Renaut <[email protected]>
Co-authored-by: Yoann Fievez <[email protected]>
Co-authored-by: Cyrille Bourgois <[email protected]>
Co-authored-by: Yann Lojewski <[email protected]>

Author: 4 people

jest.config.js

@@ -22,6 +22,7 @@ module.exports = {
         '^.+\\.module\\.(css|sass|scss)$',
         '<rootDir>/node_modules/(?!lodash-es|@stencil)',
       ],
+      testPathIgnorePatterns: ['/node_modules/', '/apps/pci-vouchers/'],
       moduleNameMapper: {
         '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
         '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':

package.json

@@ -41,6 +41,7 @@
     "start": "node -r esm scripts/start-application.js",
     "test:jest": "jest --runInBand",
     "test": "yarn lint",
+    "test:turbo": "turbo run test",
     "test:scripts": "make test",
     "test:playwright:run": "lerna run test:e2e:script --concurrency 1"
   },

packages/components/ovh-at-internet/src/track.ts

@@ -11,7 +11,7 @@ export interface LegacyTrackingData {
   chapter1?: string;
   chapter2?: string;
   chapter3?: string;
-  level2: string;
+  level2?: string;
   page?: any;
   [key: string]: any;
 }

packages/components/ovh-shell/src/client/index.ts

@@ -9,6 +9,7 @@ import { getHeaders } from '@ovh-ux/request-tagger';
 import ShellClient from './shell-client';
 import StandaloneShellClient from './standalone-shell-client';
 import IFrameMessageBus from '../message-bus/iframe';
+import { ShellClientApi } from './api';
 
 function fetchApplications(): Promise<Record<string, Application>> {
   return useReket(true).get('/applications', {
@@ -89,7 +90,9 @@ export function initStandaloneClientApi(
   return client.init().then(() => client.getApi());
 }
 
-export default function init(applicationId: ApplicationId) {
+export default async function init(
+  applicationId: ApplicationId,
+): Promise<ShellClientApi> {
   let initPromise;
 
   if (isTopLevelApplication()) {
@@ -100,7 +103,7 @@ export default function init(applicationId: ApplicationId) {
     initPromise = initIFrameClientApi(applicationId);
   }
 
-  return initPromise.then((shellApi) => {
+  return initPromise.then(async (shellApi) => {
     shellApi.ux.resetAccountSidebar();
     return shellApi.environment
       .setApplication(applicationId)

packages/manager-components/.storybook/i18n.ts

@@ -2,7 +2,7 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 i18n.use(initReactI18next).init({
-  fallbackLng: 'fr-FR',
+  fallbackLng: 'fr_FR',
   interpolation: {
     escapeValue: false,
   },

packages/manager-components/.storybook/preview.tsx

@@ -1,11 +1,16 @@
 import React, { Suspense, useEffect } from 'react';
 import { I18nextProvider } from 'react-i18next';
+import { odsSetup } from '@ovhcloud/ods-common-core';
 
 import { Preview } from '@storybook/react';
 import '../src/tailwind/theme.css';
 import '@ovhcloud/ods-theme-blue-jeans/dist/index.css';
 import i18n from './i18n';
 
+import '@ovhcloud/ods-theme-blue-jeans';
+
+odsSetup();
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -44,14 +49,14 @@ export const globalTypes = {
     toolbar: {
       icon: 'globe',
       items: [
-        { value: 'fr-FR', title: 'Francais' },
-        { value: 'en-GB', title: 'English' },
-        { value: 'de-DE', title: 'Deutsch' },
-        { value: 'es-ES', title: 'Espagne' },
-        { value: 'it-IT', title: 'Italy' },
-        { value: 'pt-PT', title: 'Portugal' },
-        { value: 'pl-PL', title: 'Poland' },
-        { value: 'fr-CA', title: 'Canada' },
+        { value: 'fr_FR', title: 'Francais' },
+        { value: 'en_GB', title: 'English' },
+        { value: 'de_DE', title: 'Deutsch' },
+        { value: 'es_ES', title: 'Espagne' },
+        { value: 'it_IT', title: 'Italy' },
+        { value: 'pt_PT', title: 'Portugal' },
+        { value: 'pl_PL', title: 'Poland' },
+        { value: 'fr_CA', title: 'Canada' },
       ],
       showName: true,
     },

packages/manager-components/jest.config.js

@@ -1,12 +1,12 @@
 module.exports = {
+  testMatch: ['<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}'],
   testEnvironment: 'jsdom',
   transformIgnorePatterns: [
     'node_modules/(?!lodash-es|@ovh-ux|@ovhcloud|@stencil)',
   ],
   setupFilesAfterEnv: ['./jest.setup.ts'],
-  collectCoverageFrom: ['src/components/**/**.component.tsx'],
+  collectCoverageFrom: ['src/components/**/*.component.tsx'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  testMatch: ['<rootDir>/src/components/**/**/*.spec.tsx'],
   moduleNameMapper: {
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
       '<rootDir>/src/_mock_/images.tsx',

packages/manager-components/package.json

@@ -24,11 +24,9 @@
     "@ovhcloud/ods-common-theming": "^17.1.0",
     "@ovhcloud/ods-components": "^17.1.0",
     "@ovhcloud/ods-theme-blue-jeans": "^17.1.0",
+    "@tanstack/react-table": "^8.11.6",
     "babel-preset-react-app": "^10.0.1",
-    "i18next": "^20.4.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-i18next": "^11.18.1",
     "sass": "1.71.0",
     "tailwindcss": "3.3.3"
   },
@@ -39,6 +37,7 @@
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/addon-interactions": "7.5.3",
     "@storybook/addon-links": "7.5.3",
+    "storybook-addon-react-router-v6": "^2.0.10",
     "@storybook/addon-styling": "1.3.6",
     "@storybook/blocks": "7.5.3",
     "@storybook/react": "7.5.3",
@@ -64,23 +63,31 @@
     "eslint-plugin-storybook": "0.6.13",
     "file-loader": "^6.2.0",
     "husky": "8.0.3",
+    "i18next": "^20.4.0",
     "jsdom": "22.1.0",
     "json": "11.0.0",
     "lint-staged": "13.2.3",
     "postcss": "8.4.27",
     "prettier": "3.0.1",
     "prop-types": "15.8.1",
+    "react-dom": "18.2.0",
+    "react-i18next": "^11.18.1",
+    "react-router-dom": "^6.21.0",
     "storybook": "7.5.3",
     "storybook-addon-react-router-v6": "^2.0.10",
     "ts-jest": "^29.1.1",
     "typescript": "^4.3.2",
     "vite": "4.4.9",
     "vite-plugin-dts": "3.5.1",
-    "vitest": "0.34.1"
+    "vitest": "0.34.1",
+    "zustand": "^4.5.0"
   },
-  "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+  "optionalDependencies": {
+    "i18next": "^20.4.0",
+    "react-dom": "18.2.0",
+    "react-i18next": "^11.18.1",
+    "react-router-dom": "^6.21.0",
+    "zustand": "^4.5.0"
   },
   "files": [
     "dist"