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]>
ovh · Mar 13, 2024 · d6821ce · d6821ce
1 parent 3d2dc2f
commit d6821ce
Show file tree

Hide file tree

Showing 140 changed files with 6,658 additions and 2,012 deletions.
diff --git a/jest.config.js b/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)$':

diff --git a/package.json b/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"
   },

diff --git a/packages/components/ovh-at-internet/src/track.ts b/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;
 }

diff --git a/packages/components/ovh-shell/src/client/index.ts b/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)

diff --git a/packages/manager-components/.storybook/i18n.ts b/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,
   },

diff --git a/packages/manager-components/.storybook/preview.tsx b/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,
     },

diff --git a/packages/manager-components/jest.config.js b/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',

diff --git a/packages/manager-components/package.json b/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"