feat: add talking surveys (#258)

* build: add env var for talking surveys

* feat(#240): add capmi app to the router rules

* feat(#242): inject externalResources script at start

* feat(#238): add global variable before initalize with Lunatic

fix: #238

* fix: types in LunaticData

* fix: types again

We use only one function to initalize surveyUnit correctly

Co-Authored-By: Quentin Ruhier <[email protected]>

* feat(#231): add external service-worker in condition where VITE_EXTERNAL_RESOURCES_URL is defined (#252)

fix: #231

* feat: add talking questionnaires synchro (#246)

* feat: get externalResources during synchronization

* chore: add comments & remove unused imports/exports

* fix: get external resources only for needed questionnaires

* feat: delete external resources for not needed questionnaires

* feat: delete external resources root-cache if no external questionnaire needed

* feat: handle progress bar for external resources synchro

* fix: handle promises for external resources

* perf: optimize cache lookup during external resources synchronization

* feat : handle errors on fetching external url

* chore: remove unused functions & imports

* feat: delete old external resources caches

* docs: add external resources synchronization

* refactor: simplify externalResources functions

* test: set vitest

* test: add tests for external resources synchro

* fix: import const

* ci: add test in jobs

* ci: remove condition on target branch for pull_request

* ci: fix test job

* test : fix sonar config

* docs : update external resources synchro

* docs: improve external resources synchro

* refactor: remove multiple imports + uppercase constants (#257)

* refactor : set const for imports of env var VITE_EXTERNAL_RESOURCES_URL

* refactor: uppercase constants

* refactor: regroup core exported constants

* chore: remove unused import

* fix: duplicate export

* test(sonar) : fix coverage config

* ci : adapt CI for tests & sonar

* ci: rename ci & jobs

---------

Co-authored-by: Quentin Ruhier <[email protected]>
Co-authored-by: Quentin Ruhier <[email protected]>
Co-authored-by: Emmanuel DEMEY <[email protected]>

.env.drama.sample

@@ -1,4 +1,5 @@
 VITE_BASE_URL=http://localhost:5000
 VITE_QUEEN_API_URL=
+VITE_EXTERNAL_RESOURCES_URL=
 VITE_OIDC_ISSUER=
 VITE_OIDC_CLIENT_ID=

.github/workflows/ci.yaml

@@ -1,12 +1,12 @@
-name: ci
+name: Main CI
 on:
   push:
     branches: ["main", "2.*"]
   pull_request:
-    branches: ["main", "2.*"]
 
 jobs:
   build:
+    name: Build
     runs-on: ubuntu-latest
     if: github.event.head_commit.author.name != 'github-actions[bot]'
     environment: demo

.github/workflows/sonar.yaml

@@ -1,18 +1,39 @@
-name: Sonar
+name: Sonar analysis
 on:
   push:
     branches: ["main", "2.*"]
   pull_request:
     types: [opened, synchronize, reopened]
 
 jobs:
+  test:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: yarn
+      # Run tests sonar reports
+      - run: yarn test:coverage
+      - name: Upload coverage artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage
+          path: drama-queen/coverage
+
   sonarcloud:
     name: SonarCloud
     runs-on: ubuntu-latest
+    needs: test
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
+      - name: Download coverage artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: coverage
+          path: drama-queen/coverage
       - name: SonarCloud Scan
         uses: SonarSource/sonarcloud-github-action@master
         env:

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+coverage
 dist
 dist-ssr
 *.local

drama-queen/.env

@@ -1,4 +1,6 @@
 VITE_QUEEN_API_URL=
+# If no environment variable for external resources is provided, the application will not trigger external resources treatments.
+VITE_EXTERNAL_RESOURCES_URL=
 # If no environment variables for OIDC are provided, the application will use a mock OIDC.
 VITE_OIDC_ISSUER=
 VITE_OIDC_CLIENT_ID=

drama-queen/package.json

@@ -5,6 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 5001 --strictPort",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
     "build": "tsc && vite build",
     "postbuild": "node build/remote-env.cjs remoteEntry.js",
     "preview": "vite preview --port 5001 --strictPort",
@@ -37,16 +39,22 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^20.16.10",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/coverage-v8": "^2.1.3",
+    "jsdom": "^25.0.1",
     "prettier": "^3.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.2",
     "vite": "^5.4.8",
     "vite-envs": "^4.4.5",
     "vite-plugin-pwa": "^0.19.8",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^2.1.3"
   }
 }

drama-queen/src/bootstrap.tsx

@@ -37,4 +37,11 @@ const mount = ({
   return () => queueMicrotask(() => root.unmount())
 }
 
-export { mount }
+const mountExternalResources = (externalResourcesUrl: string) => {
+  console.log('Mount External resources')
+  const script = document.createElement('script')
+  script.src = `${externalResourcesUrl}/entry.js`
+  document.body.appendChild(script)
+}
+
+export { mount, mountExternalResources }

drama-queen/src/core/constants.ts

@@ -0,0 +1,4 @@
+export const DYNAMIC_PUBLIC_URL = new URL(import.meta.url).origin
+export const EXTERNAL_RESOURCES_URL = import.meta.env
+  .VITE_EXTERNAL_RESOURCES_URL
+export const LUNATIC_MODEL_VERSION_BREAKING = '2.2.10'

drama-queen/src/core/index.ts

@@ -8,5 +8,3 @@ import { bootstrapCore } from 'core/bootstrap'
 export const { createCoreProvider, useCore, useCoreState } = createReactApi({
   bootstrapCore,
 })
-
-export const DYNAMIC_PUBLIC_URL = new URL(import.meta.url).origin

drama-queen/src/core/model/ExternalResources.ts

@@ -0,0 +1,20 @@
+export type ExternalQuestionnaire = {
+  id: string
+  cacheName: string
+}
+
+export type ExternalQuestionnaires = ExternalQuestionnaire[]
+
+export type ExternalQuestionnairesWrapper = {
+  questionnaires: ExternalQuestionnaires
+  version?: string
+}
+
+export type ExternalQuestionnairesFiltered = {
+  neededQuestionnaires: ExternalQuestionnaires
+  notNeededQuestionnaires: ExternalQuestionnaires
+}
+
+export type Manifest = {
+  [key: string]: string
+}

drama-queen/src/core/model/index.ts

@@ -1,7 +1,8 @@
 export * from './Campaign'
+export * from './ExternalResources'
+export * from './IdAndQuestionnaireId'
 export * from './Nomenclature'
 export * from './Paradata'
 export * from './Questionnaire'
 export * from './SurveyUnit'
 export * from './SurveyUnitData'
-export * from './IdAndQuestionnaireId'

drama-queen/src/core/tools/SurveyModelBreaking.ts

@@ -1,8 +1,7 @@
+import { LUNATIC_MODEL_VERSION_BREAKING } from 'core/constants'
 import type { Questionnaire } from 'core/model'
 import { getTranslation } from 'i18n'
 
-export const lunaticModelVersionBreaking = '2.2.10'
-
 const { t } = getTranslation('errorMessage')
 
 const semverCompare = new Intl.Collator('en', { numeric: true }).compare
@@ -23,5 +22,7 @@ export const isSurveyCompatibleWithQueen = (params: {
     return true
   }
 
-  return semverCompare(lunaticModelVersion, lunaticModelVersionBreaking) === 1
+  return (
+    semverCompare(lunaticModelVersion, LUNATIC_MODEL_VERSION_BREAKING) === 1
+  )
 }