diff --git a/next/.env b/next/.env
new file mode 100644
index 000000000..b80f9a85e
--- /dev/null
+++ b/next/.env
@@ -0,0 +1 @@
+VITE_POGUES_LEGACY=http://localhost:5145
\ No newline at end of file
diff --git a/next/.gitignore b/next/.gitignore
new file mode 100644
index 000000000..508db045c
--- /dev/null
+++ b/next/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.__mf__temp
diff --git a/next/Dockerfile b/next/Dockerfile
new file mode 100644
index 000000000..f73ad9eca
--- /dev/null
+++ b/next/Dockerfile
@@ -0,0 +1,22 @@
+
+FROM nginxinc/nginx-unprivileged:1.27-alpine
+
+# Non root user
+ENV NGINX_USER_ID=101
+ENV NGINX_GROUP_ID=101
+ENV NGINX_USER=nginx
+
+USER $NGINX_USER_ID
+
+# Add build to nginx root webapp
+COPY --chown=$NGINX_USER:$NGINX_USER dist /usr/share/nginx/html
+
+# Copy nginx configuration
+RUN rm etc/nginx/conf.d/default.conf
+COPY --chown=$NGINX_USER:$NGINX_USER nginx.conf etc/nginx/conf.d/
+RUN chmod 755 /usr/share/nginx/html/vite-envs.sh
+
+USER $NGINX_USER_ID
+EXPOSE 8080
+
+ENTRYPOINT sh -c "/usr/share/nginx/html/vite-envs.sh && nginx -g 'daemon off;'"
\ No newline at end of file
diff --git a/next/README.md b/next/README.md
new file mode 100644
index 000000000..1e5a46b4e
--- /dev/null
+++ b/next/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+ languageOptions: {
+ // other options...
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ },
+});
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react';
+
+export default tseslint.config({
+ // Set the react version
+ settings: { react: { version: '18.3' } },
+ plugins: {
+ // Add the react plugin
+ react,
+ },
+ rules: {
+ // other rules...
+ // Enable its recommended rules
+ ...react.configs.recommended.rules,
+ ...react.configs['jsx-runtime'].rules,
+ },
+});
+```
diff --git a/next/eslint.config.js b/next/eslint.config.js
new file mode 100644
index 000000000..170537f04
--- /dev/null
+++ b/next/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+ { ignores: ['dist'] },
+ {
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
+ files: ['**/*.{ts,tsx}'],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ plugins: {
+ 'react-hooks': reactHooks,
+ 'react-refresh': reactRefresh,
+ },
+ rules: {
+ ...reactHooks.configs.recommended.rules,
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+ },
+);
diff --git a/next/index.html b/next/index.html
new file mode 100644
index 000000000..13f9687cf
--- /dev/null
+++ b/next/index.html
@@ -0,0 +1,13 @@
+
+
+
+ Pogues
+
+
+
+
+
+
diff --git a/next/mfe/plugin.ts b/next/mfe/plugin.ts
new file mode 100644
index 000000000..2af214c6c
--- /dev/null
+++ b/next/mfe/plugin.ts
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+
+import type { ImportMetaEnv } from '../src/vite-env';
+
+const devModeConfig = {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ get: (_id: string) => {
+ return () => ({
+ Main: () => {
+ return '=====> Pogues Legacy is not available on dev mode <=====';
+ },
+ });
+ },
+ init: () => {},
+};
+
+// @ts-ignore
+const runtimePlugin: () => FederationRuntimePlugin = function () {
+ return {
+ name: 'my-runtime-plugin',
+ async loadEntry({ remoteInfo }) {
+ // @ts-ignore
+ const ENV = (window.__VITE_ENVS || {}) as ImportMetaEnv;
+ if (ENV.DEV) {
+ return devModeConfig;
+ } else {
+ const originalEntryFile = new URL(remoteInfo.entry).pathname;
+ const finalEntry = `${ENV.VITE_POGUES_LEGACY}/${originalEntryFile}`;
+ console.log('finalEntry', finalEntry);
+ return await import(/* @vite-ignore */ finalEntry);
+ }
+ },
+ };
+};
+export default runtimePlugin;
diff --git a/next/nginx.conf b/next/nginx.conf
new file mode 100644
index 000000000..b2ce63a2b
--- /dev/null
+++ b/next/nginx.conf
@@ -0,0 +1,27 @@
+server {
+ listen 8080 default_server;
+
+ root /usr/share/nginx/html;
+ index index.html;
+
+ location ~* \.(?:manifest|appcache|html?|xml|json)$ {
+ expires -1;
+ # access_log logs/static.log; # I don't usually include a static log
+ }
+
+ location ~* \.(?:css|js)$ {
+ try_files $uri =404;
+ expires 1y;
+ access_log off;
+ }
+
+ # Any route containing a file extension (e.g. /devicesfile.js)
+ location ~ ^.+\..+$ {
+ try_files $uri =404;
+ }
+
+ # Any route that doesn't have a file extension (e.g. /devices)
+ location / {
+ try_files $uri $uri/ /index.html;
+ }
+}
\ No newline at end of file
diff --git a/next/package.json b/next/package.json
new file mode 100644
index 000000000..10b14fa9a
--- /dev/null
+++ b/next/package.json
@@ -0,0 +1,34 @@
+{
+ "name": "pogues",
+ "private": true,
+ "version": "2.0.0-rc.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "lint": "eslint .",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@tanstack/react-router": "^1.95.1",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "react-error-boundary": "^5.0.0",
+ "vite-envs": "^4.4.10"
+ },
+ "devDependencies": {
+ "@eslint/js": "^9.17.0",
+ "@module-federation/enhanced": "^0.8.8",
+ "@module-federation/vite": "^1.2.1",
+ "@types/react": "^18.3.18",
+ "@types/react-dom": "^18.3.5",
+ "@vitejs/plugin-react": "^4.3.4",
+ "eslint": "^9.17.0",
+ "eslint-plugin-react-hooks": "^5.0.0",
+ "eslint-plugin-react-refresh": "^0.4.16",
+ "globals": "^15.14.0",
+ "typescript": "~5.6.2",
+ "typescript-eslint": "^8.18.2",
+ "vite": "^6.0.5"
+ }
+}
diff --git a/next/public/favicon.ico b/next/public/favicon.ico
new file mode 100644
index 000000000..c555987fa
Binary files /dev/null and b/next/public/favicon.ico differ
diff --git a/next/public/pogues-logo.png b/next/public/pogues-logo.png
new file mode 100644
index 000000000..6ccdae642
Binary files /dev/null and b/next/public/pogues-logo.png differ
diff --git a/next/src/App.css b/next/src/App.css
new file mode 100644
index 000000000..4aa8fdfbc
--- /dev/null
+++ b/next/src/App.css
@@ -0,0 +1,24 @@
+body {
+ background-color: #f7f7f7;
+}
+
+#latest-pogues {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 13em;
+ margin: auto;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
diff --git a/next/src/main.tsx b/next/src/main.tsx
new file mode 100644
index 000000000..264ec397b
--- /dev/null
+++ b/next/src/main.tsx
@@ -0,0 +1,29 @@
+import { StrictMode } from 'react';
+
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import ReactDOM from 'react-dom/client';
+
+import { routeTree } from './routes/root';
+
+// Import the generated route tree
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+// declare module "@tanstack/react-router" {
+// interface Register {
+// router: typeof router;
+// }
+// }
+
+// Render the app
+const rootElement = document.getElementById('root')!;
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(
+
+ ,
+ );
+}
diff --git a/next/src/routes/home.tsx b/next/src/routes/home.tsx
new file mode 100644
index 000000000..806b7f1c0
--- /dev/null
+++ b/next/src/routes/home.tsx
@@ -0,0 +1,22 @@
+import { createRoute } from '@tanstack/react-router';
+
+import '../App.css';
+import { RouteRoot } from './root';
+import poguesLogo from '/pogues-logo.png';
+
+export const RouteIndex = createRoute({
+ getParentRoute: () => RouteRoot,
+ path: '/',
+ component: App,
+});
+
+function App() {
+ return (
+
+
+
+
Bienvenue sur la nouvelle interface de Pogues !
+
Le vieux Pogues n'est pas disponible en mode dev.}
+ >
+
+ );
+}
diff --git a/next/src/routes/root.tsx b/next/src/routes/root.tsx
new file mode 100644
index 000000000..f370dcdab
--- /dev/null
+++ b/next/src/routes/root.tsx
@@ -0,0 +1,36 @@
+import { Link, Outlet, createRootRoute } from '@tanstack/react-router';
+
+import { RouteIndex } from './home';
+import {
+ RouteQuestionnaire,
+ RouteQuestionnaireCompo,
+ RouteQuestionnaireMerge,
+ RouteQuestionnaireTcmCompo,
+} from './pogues-legacy';
+
+export const RouteRoot = createRootRoute({
+ component: () => (
+ <>
+
+
+
+
+
+ ),
+});
+
+export const routeTree = RouteRoot.addChildren([
+ RouteIndex,
+ RouteQuestionnaire,
+ RouteQuestionnaireCompo,
+ RouteQuestionnaireTcmCompo,
+ RouteQuestionnaireMerge,
+]);
diff --git a/next/src/vite-env.d.ts b/next/src/vite-env.d.ts
new file mode 100644
index 000000000..6f30ccc6d
--- /dev/null
+++ b/next/src/vite-env.d.ts
@@ -0,0 +1,31 @@
+///
-
-
-
-
-
-
- ,
- );
-};
-
-// Instead of Promise.resolve, deal with a public API endpoint
-
-getInit().then((res) => renderApp(res));
+ReactDOM.createRoot(document.getElementById('root')).render(
+
+ ,
+);
diff --git a/src/layout/app/components/app.jsx b/src/layout/app/components/app.jsx
index cd5eefbd2..33c390bc0 100644
--- a/src/layout/app/components/app.jsx
+++ b/src/layout/app/components/app.jsx
@@ -10,6 +10,9 @@ import Header from '../../header/header';
const { COMPONENT_ID } = APP;
+const isOnlyLegacyApp =
+ new URL(import.meta.url || '').origin === window.location.origin;
+
const App = ({ children, loadUnitsIfNeeded }) => {
const oidc = useOidc();
const token = oidc.oidcTokens.accessToken;
@@ -19,7 +22,7 @@ const App = ({ children, loadUnitsIfNeeded }) => {
return (
-
+ {isOnlyLegacyApp && }
{children}
diff --git a/src/layout/confirm-dialog/confirm-dialog.jsx b/src/layout/confirm-dialog/confirm-dialog.jsx
index 3706c99af..284d9c739 100644
--- a/src/layout/confirm-dialog/confirm-dialog.jsx
+++ b/src/layout/confirm-dialog/confirm-dialog.jsx
@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import ReactModal from 'react-modal';
+import { domSelectorForModal } from '../../constants/dom-constants';
import Dictionary from '../../utils/dictionary/dictionary';
const ConfirmDialog = (props) => {
@@ -37,6 +38,7 @@ const ConfirmDialog = (props) => {
return (
{
{/* Create questionnaire modal */}
{
{children}
{
{/* Questionnaire edit */}
{
{/* Versions */}
{
{/* Component edit */}
{
)}
- ,
+
+
+
+
,
);
const questionnaireNav = document.querySelector(`.${COMPONENT_CLASS}`);
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 000000000..336e043aa
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,20 @@
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+
+import './index.css';
+import Router from './router';
+import configureStore from './store/configure-store';
+import { OidcProvider } from './utils/oidc';
+
+export const Main = () => {
+ const store = configureStore({});
+ return (
+
+
+
+
+
+
+ );
+};
diff --git a/src/scss/pogues.scss b/src/scss/pogues.scss
index db6f32753..0251c0ab1 100644
--- a/src/scss/pogues.scss
+++ b/src/scss/pogues.scss
@@ -1,54 +1,58 @@
-@import 'bootstrap-sass/assets/stylesheets/bootstrap';
-@import 'font-awesome/scss/font-awesome';
+#pogues-legacy {
+ font-family: sans-serif;
-@import '_variables';
-@import '_mixins';
-@import '_typo';
-@import '_global';
+ @import 'bootstrap-sass/assets/stylesheets/bootstrap';
+ @import 'font-awesome/scss/font-awesome';
-// Common
-@import 'inc/_header';
-@import 'inc/_forms';
+ @import '_variables';
+ @import '_mixins';
+ @import '_typo';
+ @import '_global';
-// Pages
-@import 'inc/_page-home';
-@import 'inc/_page-questionnaire';
-@import 'inc/_questionnaire-composition';
-@import 'inc/_duplicate-variables';
+ // Common
+ @import 'inc/_header';
+ @import 'inc/_forms';
-//Elements
-@import 'inc/_user-connection';
-@import 'inc/_questionnaire-list';
-@import 'inc/_arbo-simplifield';
-@import 'inc/_confirm-dialog';
-@import 'inc/_questionnaire-nav';
-@import 'inc/_generic-input';
-@import 'inc/_errors-integrity';
+ // Pages
+ @import 'inc/_page-home';
+ @import 'inc/_page-questionnaire';
+ @import 'inc/_questionnaire-composition';
+ @import 'inc/_duplicate-variables';
-//Widgets
-@import 'inc/widgets/_statistical-context-criteria';
-@import 'inc/widgets/_input-filter-with-criteria';
-@import 'inc/widgets/_search-results';
-@import 'inc/widgets/_codes-lists';
-@import 'inc/widgets/_validation-errors';
-@import 'inc/widgets/_search-codes-lists';
-@import 'inc/widgets/_tabs';
-@import 'inc/widgets/_questionnaire-new-edit';
-@import 'inc/widgets/_component-new-edit';
-@import 'inc/widgets/_errors-panel';
-@import 'inc/widgets/_list-with-input-panel';
-@import 'inc/widgets/_dropdown';
+ //Elements
+ @import 'inc/_user-connection';
+ @import 'inc/_questionnaire-list';
+ @import 'inc/_arbo-simplifield';
+ @import 'inc/_confirm-dialog';
+ @import 'inc/_questionnaire-nav';
+ @import 'inc/_generic-input';
+ @import 'inc/_errors-integrity';
-//Controls
-@import 'inc/controls/_common';
-@import 'inc/controls/_ctrl-with-suggestions';
-@import 'inc/controls/_ctrl-textarea';
-@import 'inc/controls/_ctrl-rich-textarea';
-@import 'inc/controls/_ctrl-input';
-@import 'inc/controls/_ctrl-input-autocomplete';
-@import 'inc/controls/_ctrl-list-radios';
-@import 'inc/controls/_ctrl-select';
-@import 'inc/controls/_ctrl-tree-select';
-@import 'inc/controls/_ctrl-vtl-editor';
-@import 'inc/controls/_ctrl-list-checkboxes';
-@import 'inc/controls/_ctrl-checkbox';
+ //Widgets
+ @import 'inc/widgets/_statistical-context-criteria';
+ @import 'inc/widgets/_input-filter-with-criteria';
+ @import 'inc/widgets/_search-results';
+ @import 'inc/widgets/_codes-lists';
+ @import 'inc/widgets/_validation-errors';
+ @import 'inc/widgets/_search-codes-lists';
+ @import 'inc/widgets/_tabs';
+ @import 'inc/widgets/_questionnaire-new-edit';
+ @import 'inc/widgets/_component-new-edit';
+ @import 'inc/widgets/_errors-panel';
+ @import 'inc/widgets/_list-with-input-panel';
+ @import 'inc/widgets/_dropdown';
+
+ //Controls
+ @import 'inc/controls/_common';
+ @import 'inc/controls/_ctrl-with-suggestions';
+ @import 'inc/controls/_ctrl-textarea';
+ @import 'inc/controls/_ctrl-rich-textarea';
+ @import 'inc/controls/_ctrl-input';
+ @import 'inc/controls/_ctrl-input-autocomplete';
+ @import 'inc/controls/_ctrl-list-radios';
+ @import 'inc/controls/_ctrl-select';
+ @import 'inc/controls/_ctrl-tree-select';
+ @import 'inc/controls/_ctrl-vtl-editor';
+ @import 'inc/controls/_ctrl-list-checkboxes';
+ @import 'inc/controls/_ctrl-checkbox';
+}
diff --git a/src/widgets/codes-lists/components/codes-lists-codes.jsx b/src/widgets/codes-lists/components/codes-lists-codes.jsx
index fd39289da..51468ac6b 100644
--- a/src/widgets/codes-lists/components/codes-lists-codes.jsx
+++ b/src/widgets/codes-lists/components/codes-lists-codes.jsx
@@ -5,7 +5,10 @@ import ReactModal from 'react-modal';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';
-import { WIDGET_CODES_LISTS } from '../../../constants/dom-constants';
+import {
+ WIDGET_CODES_LISTS,
+ domSelectorForModal,
+} from '../../../constants/dom-constants';
import { markdownVtlToHtml } from '../../../forms/controls/rich-textarea';
import Dictionary from '../../../utils/dictionary/dictionary';
import {
@@ -334,6 +337,7 @@ function CodesListsCodes(props) {
{showInputCode && !editing && renderInputCode()}
Should disable the button 1`] = `
-
-
-
- Visualise
-
-
-
-
-
-
- Visualise
-
-
-
-
-
-
- Visualise
-
-
-
-
-
- Visualise
-
-
+
+ Visualise
+
+
+
+
`;
@@ -85,80 +92,87 @@ exports[`Visualize Dropdown Component: > Should disable the button 1`] = `
exports[`Visualize Dropdown Component: > Should display the dropdown on top 1`] = `
-
- Visualise
-
-
+
+ Visualise
+
+
+
+
`;
@@ -166,80 +180,87 @@ exports[`Visualize Dropdown Component: > Should display the dropdown on top 1`]
exports[`Visualize Dropdown Component: > Should return the right HTML 1`] = `
-
- Visualise
-
-
+
+ Visualise
+
+
+
+
`;
diff --git a/src/widgets/visualize-dropdown/components/visualize-dropdown.tsx b/src/widgets/visualize-dropdown/components/visualize-dropdown.tsx
index a0dcb95ef..65da29023 100644
--- a/src/widgets/visualize-dropdown/components/visualize-dropdown.tsx
+++ b/src/widgets/visualize-dropdown/components/visualize-dropdown.tsx
@@ -4,6 +4,7 @@ import ReactModal from 'react-modal';
import { Link } from 'react-router-dom';
import { VisualizationKind } from '@/api/visualize';
+import { domSelectorForModal } from '@/constants/dom-constants';
import { useClickAway } from '@/hooks/useClickAway';
import Dictionary from '@/utils/dictionary/dictionary';
import { hasDuplicateVariables } from '@/utils/variables/variables-utils';
@@ -132,6 +133,7 @@ export default function VisualizeDropdown({
)}
{
@@ -16,7 +17,11 @@ describe('Visualize Dropdown Component: ', () => {
componentId: 'component-id',
};
- const { container } = render(
+
,
+ );
expect(container).toMatchSnapshot();
});
@@ -30,7 +35,11 @@ describe('Visualize Dropdown Component: ', () => {
componentId: 'component-id',
};
- const { container } = render(
+
,
+ );
expect(container).toMatchSnapshot();
});
@@ -44,7 +53,11 @@ describe('Visualize Dropdown Component: ', () => {
componentId: 'component-id',
};
- const { container } = render(
+
,
+ );
expect(container).toMatchSnapshot();
});
@@ -58,21 +71,23 @@ describe('Visualize Dropdown Component: ', () => {
componentId: 'component-id',
};
- render(
+
,
+ );
const dropdownButton = screen.queryByRole('button', {
name: /visualise/i,
});
expect(dropdownButton).not.toBeNull();
- expect(dropdownButton.getAttribute('aria-expanded')).toBe('false');
+ expect(dropdownButton?.getAttribute('aria-expanded')).toBe('false');
- await userEvent.click(dropdownButton);
+ if (dropdownButton) await userEvent.click(dropdownButton);
+ expect(dropdownButton?.getAttribute('aria-expanded')).toBe('true');
+ if (dropdownButton) await userEvent.click(dropdownButton);
- expect(dropdownButton.getAttribute('aria-expanded')).toBe('true');
-
- await userEvent.click(dropdownButton);
-
- expect(dropdownButton.getAttribute('aria-expanded')).toBe('false');
+ expect(dropdownButton?.getAttribute('aria-expanded')).toBe('false');
});
test('Should call the visualizeActiveQuestionnaire method and hide the dropdown', async () => {
@@ -83,7 +98,11 @@ describe('Visualize Dropdown Component: ', () => {
top: false,
componentId: 'component-id',
};
- render(
+
,
+ );
const allAnchors = screen.getAllByRole('link');
const firstAnchor = allAnchors[0];