Fix: queenv2 table (#72)

* fix: hasResponse for table * doc: add comment for dirty code * bumb: queenv2 to 1.1.3, drama-queen-container 1.3.15 * chore: create new constants (version from package.json) * build: switch to craco * build: upgrade lunatic to 2.7.6 * feat: use hasPageResponse * style: subsequence and table * build: fix conflicts
InseeFr · Nov 28, 2023 · f4e5e76 · f4e5e76
1 parent 3ad7b05
commit f4e5e76
Show file tree

Hide file tree

Showing 11 changed files with 4,187 additions and 297 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "drama-queen-container",
   "private": true,
-  "version": "1.3.14",
+  "version": "1.3.15",
   "workspaces": [
     "drama-queen",
     "queen-v2",

diff --git a/queen-v2/craco.config.js b/queen-v2/craco.config.js
@@ -1,39 +1,18 @@
-module.exports = {
-  babel: {
-    loaderOptions: babelLoaderOptions => {
-      const origBabelPresetCRAIndex = babelLoaderOptions.presets.findIndex(preset => {
-        return preset[0].includes('babel-preset-react-app');
-      });
-
-      const origBabelPresetCRA = babelLoaderOptions.presets[origBabelPresetCRAIndex];
-
-      babelLoaderOptions.presets[origBabelPresetCRAIndex] = function overridenPresetCRA(
-        api,
-        opts,
-        env
-      ) {
-        const babelPresetCRAResult = require(origBabelPresetCRA[0])(
-          api,
-          origBabelPresetCRA[1],
-          env
-        );
+const OVERLOAD = { fs: false, stream: false, os: false };
 
-        babelPresetCRAResult.presets.forEach(preset => {
-          // detect @babel/preset-react with {development: true, runtime: 'automatic'}
-          const isReactPreset =
-            preset &&
-            preset[1] &&
-            preset[1].runtime === 'automatic' &&
-            preset[1].development === true;
-          if (isReactPreset) {
-            preset[1].importSource = '@welldone-software/why-did-you-render';
-          }
-        });
+module.exports = {
+  webpack: {
+    configure: (config, { env, paths }) => {
+      const { resolve } = config;
+      const { fallback } = resolve;
 
-        return babelPresetCRAResult;
+      return {
+        ...config,
+        resolve: {
+          ...resolve,
+          fallback: { ...fallback, ...OVERLOAD },
+        },
       };
-
-      return babelLoaderOptions;
     },
   },
 };
diff --git a/queen-v2/package.json b/queen-v2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "queen-v2",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Web application for the management of questionnaires powered by Lunatic",
   "repository": {
     "type": "git",
@@ -11,8 +11,8 @@
   "private": true,
   "dependencies": {
     "@axa-fr/react-oidc-context": "^3.1.6",
-    "@craco/craco": "^6.4.0",
-    "@inseefr/lunatic": "^2.7.4",
+    "@craco/craco": "7.0.0",
+    "@inseefr/lunatic": "2.7.6",
     "@inseefr/trevas": "^0.1.16",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
@@ -28,7 +28,7 @@
     "react-keyboard-event-handler": "^1.5.4",
     "react-markdown": "^5.0.3",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-shadow": "^19.0.2",
     "workbox-cacheable-response": "^6.1.1",
     "workbox-core": "^6.1.1",
@@ -38,13 +38,12 @@
     "workbox-strategies": "^6.1.1"
   },
   "scripts": {
-    "prestart": "npx @inseefr/[email protected] workers",
-    "start": "cross-env PORT=5002 react-scripts start",
-    "start-dev": "cross-env PORT=5002 craco start",
-    "prebuild": "npx @inseefr/[email protected] workers",
-    "build": "react-scripts build && npm run post-build",
+    "prestart": "npx @inseefr/[email protected] workers",
+    "start": "cross-env PORT=5002 craco start",
+    "prebuild": "npx @inseefr/[email protected] workers",
+    "build": "craco build && npm run post-build",
     "post-build": "node ./configuration/build/build-sw.js && node ./configuration/build/manage-public-url.js && copy-and-watch configuration/files/* build",
-    "test": "react-scripts test",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "format": "prettier --write ."
   },
@@ -53,25 +52,8 @@
       "react-app",
       "react-app/jest",
       "prettier",
-      "plugin:react-hooks/recommended",
-      "plugin:jsx-a11y/recommended",
-      "plugin:import/warnings"
+      "plugin:react-hooks/recommended"
     ],
-    "plugins": [
-      "prettier",
-      "jsx-a11y"
-    ],
-    "rules": {
-      "react/prop-types": [
-        "off"
-      ],
-      "prettier/prettier": [
-        1,
-        {
-          "arrowParens": "avoid"
-        }
-      ]
-    },
     "globals": {
       "fetch": true,
       "window": true,

diff --git a/queen-v2/src/components/designSystem/AppVersion.js b/queen-v2/src/components/designSystem/AppVersion.js
@@ -1,6 +1,5 @@
 import { makeStyles } from '@material-ui/core';
-import React from 'react';
-import { version, dependencies } from '../../../package.json';
+import { LUNATIC_VERSION, QUEEN_VERSION } from 'utils/constants';
 
 const useStyles = makeStyles({
   root: {
@@ -15,9 +14,9 @@ const useStyles = makeStyles({
   },
 });
 
-const lunaticVersion = dependencies['@inseefr/lunatic'].replace('^', '');
-
 export const AppVersion = () => {
   const classes = useStyles();
-  return <div className={classes.root}>{`Queen : ${version} | Lunatic : ${lunaticVersion}`}</div>;
+  return (
+    <div className={classes.root}>{`Queen : ${QUEEN_VERSION} | Lunatic : ${LUNATIC_VERSION}`}</div>
+  );
 };
diff --git a/queen-v2/src/components/lightOrchestrator/lightOrchestrator.js b/queen-v2/src/components/lightOrchestrator/lightOrchestrator.js
@@ -4,7 +4,7 @@ import { memo, useEffect, useMemo, useRef } from 'react';
 import ButtonContinue from './buttons/continue/index';
 
 import D from 'i18n';
-import { componentHasResponse } from 'utils/components/deduceState';
+import { isSequenceOrSubsequenceComponent } from 'utils/components/deduceState';
 import { QUEEN_URL } from 'utils/constants';
 import { useConstCallback } from 'utils/hook/useConstCallback';
 import { LoopPanel } from './LoopPanel';
@@ -19,7 +19,6 @@ function noDataChange() {
 
 const preferences = ['COLLECTED'];
 const features = ['VTL', 'MD'];
-// const savingType = 'COLLECTED';
 
 const missingShortcut = { dontKnow: 'f2', refused: 'f4' };
 
@@ -107,6 +106,7 @@ function LightOrchestrator({
     loopVariables = [],
     Provider,
     pageTag,
+    hasPageResponse,
   } = lunaticStateRef.current;
 
   const components = getComponents();
@@ -166,7 +166,7 @@ function LightOrchestrator({
   };
 
   const firstComponent = useMemo(() => [...components]?.[0], [components]);
-  const hasResponse = componentHasResponse(firstComponent);
+  const hasResponse = hasPageResponse() || isSequenceOrSubsequenceComponent(firstComponent);
 
   const isLastReachedPage = pager !== undefined ? checkIfLastReachedPage() : false;
   const { maxPage, page, subPage, nbSubPages, iteration, nbIterations } = pager;

diff --git a/queen-v2/src/components/lightOrchestrator/lunaticStyle/style.js b/queen-v2/src/components/lightOrchestrator/lunaticStyle/style.js
@@ -19,6 +19,33 @@ export const useCustomLunaticStyles = makeStyles(theme => ({
       WebkitAppearance: 'none',
       margin: '0',
     },
+
+    // button-lunatic inside Loop
+    '&.Loop .button-lunatic': {
+      marginTop: '1em',
+    },
+
+    // table
+    '& .lunatic-table': {
+      '& .lunatic-table-tr, .lunatic-table-th, .lunatic-table-td': {
+        border: '0.15em solid #555',
+        padding: '0.2em 1em',
+      },
+    },
+
+    '&.Loop': {
+      display: 'block',
+    },
+
+    '& .subsequence-lunatic': {
+      backgroundColor: 'transparent',
+      fontSize: '1.2em',
+      color: 'black',
+      display: 'block',
+      margin: '1em 0em 1em 0em',
+      fontWeight: 'bold',
+      padding: '0.5em',
+    },
     /* Firefox */
     '& input[type=text]': {
       MozAppearance: 'textfield',

diff --git a/queen-v2/src/components/lightOrchestrator/navigation/component.js b/queen-v2/src/components/lightOrchestrator/navigation/component.js
@@ -8,7 +8,6 @@ import {
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useRef, useState } from 'react';
-import { dependencies, version } from '../../../../package.json';
 
 import { IconButton } from '@material-ui/core';
 import { Apps } from '@material-ui/icons';
@@ -17,6 +16,7 @@ import D from 'i18n';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
 import KeyboardEventHandler from 'react-keyboard-event-handler';
+import { LUNATIC_VERSION, QUEEN_VERSION } from 'utils/constants';
 import { useConstCallback } from 'utils/hook/useConstCallback';
 import { useStyles } from './component.style';
 import SequenceNavigation from './sequenceNavigation';
@@ -37,7 +37,6 @@ const Navigation = ({
   const [surveyOpen, setSurveyOpen] = useState(false);
   const [stopOpen, setStopOpen] = useState(false);
   const [selectedSequence, setSelectedSequence] = useState(undefined);
-  const lunaticVersion = dependencies['@inseefr/lunatic'].replace('^', '');
 
   const offset = 1;
 
@@ -176,7 +175,7 @@ const Navigation = ({
             </div>
             <div
               className={classes.version}
-            >{`Queen : ${version} | Lunatic : ${lunaticVersion}`}</div>
+            >{`Queen : ${QUEEN_VERSION} | Lunatic : ${LUNATIC_VERSION}`}</div>
           </>
         )}
       </div>

diff --git a/queen-v2/src/utils/components/deduceState.js b/queen-v2/src/utils/components/deduceState.js
@@ -1,34 +1,14 @@
-import {
-  COMP_TYPE_CHECK_BOX_BOOLEAN,
-  COMP_TYPE_CHECK_BOX_GROUP,
-  COMP_TYPE_INPUT_NUMBER,
-  COMP_TYPE_LOOP,
-  COMP_TYPE_SEQUENCE,
-  COMP_TYPE_SUBSEQUENCE,
-  COMP_TYPE_TABLE,
-  COMP_TYPE_TEXTAREA,
-} from 'utils/constants';
+import { COMP_TYPE_SEQUENCE, COMP_TYPE_SUBSEQUENCE } from 'utils/constants';
 
-export const componentHasResponse = component => {
+/**
+ * TODO: remove this code when this issue of Lunatic will be treated : https://github.com/InseeFr/Lunatic/issues/771
+ */
+export const isSequenceOrSubsequenceComponent = component => {
   if (component === undefined) return false;
 
   // check for missingResponse
   if (![undefined, null, {}].includes(component?.missingResponse?.value)) return true;
 
   const { componentType } = component;
-  switch (componentType) {
-    case COMP_TYPE_CHECK_BOX_GROUP:
-    case COMP_TYPE_TABLE:
-      return Object.values(component.value).some(val => val !== null);
-    case COMP_TYPE_INPUT_NUMBER:
-    case COMP_TYPE_CHECK_BOX_BOOLEAN:
-    case COMP_TYPE_TEXTAREA:
-      return component.value !== null;
-    case COMP_TYPE_LOOP:
-    case COMP_TYPE_SUBSEQUENCE:
-    case COMP_TYPE_SEQUENCE:
-      return true;
-    default:
-      return !!component.value;
-  }
+  return [COMP_TYPE_SEQUENCE, COMP_TYPE_SUBSEQUENCE].includes(componentType);
 };
diff --git a/queen-v2/src/utils/constants/index.js b/queen-v2/src/utils/constants/index.js
@@ -1,3 +1,8 @@
+import packageInfo from '../../../package.json';
+
+export const QUEEN_VERSION = packageInfo?.version;
+export const LUNATIC_VERSION = packageInfo?.dependencies['@inseefr/lunatic'].replace('^', '');
+
 export const KEYCLOAK = 'keycloak';
 export const ANONYMOUS = 'anonymous';
 export const OIDC = 'OIDC';

diff --git a/queen/package.json b/queen/package.json
@@ -52,28 +52,13 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
       "react-app/jest",
       "prettier",
       "plugin:react-hooks/recommended",
       "plugin:jsx-a11y/recommended",
-      "plugin:import/warnings"
+      "plugin:import/warnings",
+      "plugin:react-hooks/recommended"
     ],
-    "plugins": [
-      "prettier",
-      "jsx-a11y"
-    ],
-    "rules": {
-      "react/prop-types": [
-        "off"
-      ],
-      "prettier/prettier": [
-        1,
-        {
-          "arrowParens": "avoid"
-        }
-      ]
-    },
     "globals": {
       "fetch": true,
       "window": true,
@@ -116,7 +101,6 @@
     "copy-and-watch": "^0.1.4",
     "cross-env": "^7.0.3",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",