UI & Feature update - July 2024

.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
     'import/prefer-default-export': 0,
     'import/no-duplicates': 'error',
     complexity: ['error', 8],
-    'max-lines': ['error', 200],
+    'max-lines': ['error', 250],
     'max-depth': ['error', 3],
     'max-params': ['error', 4],
     eqeqeq: ['error', 'smart'],

.github/workflows/ci.yml

@@ -36,9 +36,9 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4
         with:
-          version: 7.14.1
+          version: 9.4.0
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
@@ -61,9 +61,9 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4
         with:
-          version: 7.14.1
+          version: 9.4.0
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
@@ -72,7 +72,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Check for vulnerable dependencies
-        run: pnpm run security
+        run: pnpm run security --level 2
 
   frontend_build_and_deploy:
     needs: test
@@ -82,31 +82,41 @@ jobs:
       surge_url: wfp-dmp-${{ github.event.pull_request.number }}.surge.sh
     steps:
       - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2.2.3
+      - uses: pnpm/action-setup@v4.0.0
       - name: Setup Node.js
         id: setup-node
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'pnpm'
+      - name: Log pnpm version
+        run: pnpm --version
+      - name: Check lockfile version
+        run: |
+          if grep -q '"lockfileVersion":' ../../pnpm-lock.yaml; then
+            echo "Lockfile version: $(grep '"lockfileVersion":' ../../pnpm-lock.yaml)";
+          else
+            echo "Lockfile version not found";
+          fi
       - name: Install frontend dependencies
         run: pnpm install --frozen-lockfile
+      - name: Clean build folder
+        run: rm -rf apps/frontend/out
       - name: Build Interfaces & Frontend
         run: pnpm turbo build
         env:
-          NEXT_PUBLIC_API_BASE_URL: https://staging-api-dmp.ovio.org
+          NEXT_PUBLIC_API_BASE_URL: https://api-dmp.ovio.org
       - name: Export to static HTML
         run: |
           cd apps/frontend
           ./gen_env.sh staging
-          pnpm next export
           cd out
           cp index.html 200.html
       - name: Deploy on surge
         uses: dswistowski/surge-sh-action@v1
         with:
           domain: ${{ env.surge_url }}
-          project: "apps/frontend/out/."
+          project: 'apps/frontend/out/.'
           login: ${{ secrets.surge_login }}
           token: ${{ secrets.surge_token }}
       - name: Get current date

.github/workflows/merge-production.yml

@@ -23,7 +23,7 @@ jobs:
     timeout-minutes: 30
     steps:
       - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2.2.3
+      - uses: pnpm/action-setup@v4.0.0
       - name: Setup Node.js
         id: setup-node
         uses: actions/setup-node@v3
@@ -33,7 +33,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - name: Configure AWS Credentials (Authentication)
-        uses: aws-actions/configure-aws-credentials@v1
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-region: ${{ vars.AWS_REGION }}
           role-to-assume: ${{ secrets.AWS_ROLE_ARN }}

.github/workflows/merge-staging.yml

@@ -23,7 +23,7 @@ jobs:
     timeout-minutes: 30
     steps:
       - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2.2.3
+      - uses: pnpm/action-setup@v4.0.0
       - name: Setup Node.js
         id: setup-node
         uses: actions/setup-node@v3
@@ -33,7 +33,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - name: Configure AWS Credentials (Authentication)
-        uses: aws-actions/configure-aws-credentials@v1
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-region: ${{ vars.AWS_REGION }}
           role-to-assume: ${{ secrets.AWS_ROLE_ARN }}
@@ -50,7 +50,7 @@ jobs:
       surge_url: staging-wfp-dmp.surge.sh
     steps:
       - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2.2.3
+      - uses: pnpm/action-setup@v4.0.0
       - name: Setup Node.js
         id: setup-node
         uses: actions/setup-node@v3
@@ -67,11 +67,10 @@ jobs:
         run: |
           cd apps/frontend
           ./gen_env.sh staging
-          pnpm next export
       - name: Deploy on surge
         uses: dswistowski/surge-sh-action@v1
         with:
           domain: ${{ env.surge_url }}
-          project: "apps/frontend/out/."
+          project: 'apps/frontend/out/.'
           login: ${{ secrets.surge_login }}
           token: ${{ secrets.surge_token }}

.gitignore

@@ -26,3 +26,4 @@ npm-debug.log*
 pnpm-debug.log*
 pnpm-error.log*
 lerna-debug.log*
+.vscode

amplify.yml

@@ -5,7 +5,7 @@ applications:
         preBuild:
           commands:
             - nvm use 18
-            - npm install -g pnpm@^7
+            - npm install -g pnpm@^9
             - cd ../..
             - pnpm install --virtual-store-dir apps/frontend/node_modules/.pnpm
         build:
@@ -14,7 +14,6 @@ applications:
             - cd apps/frontend
             - env | grep -e NEXT_PUBLIC_ > .env.production
             - ./gen_env.sh production
-            - pnpm next export # export static files
             - cd out
             - cp index.html 200.html
             - cd ..

apps/backend/Dockerfile

@@ -1,8 +1,8 @@
-FROM node:hydrogen-alpine3.16 AS pnpm-installed
+FROM node:hydrogen-alpine3.20 AS pnpm-installed
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 ENV PNPM_HOME=/usr/local/.pnpm
 ENV PATH="$PATH:/usr/local/.pnpm"
-RUN corepack enable && corepack prepare pnpm@7.14.2 --activate
+RUN corepack enable && corepack prepare pnpm@9.4.0 --activate
 
 FROM pnpm-installed AS turbo-installed
 RUN apk add --no-cache libc6-compat
@@ -29,7 +29,9 @@ COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 COPY --from=builder /app/out/full/ .
 
 RUN HUSKY=0 pnpm install && \
-  pnpm build --scope='@wfp-dmp/backend' && \
+  cd packages/interfaces && pnpm build && \
+  cd ../../apps/backend && pnpm build && \
+  cd ../.. && \
   rm -rf **/src **/.turbo node_modules **/node_modules && \
   pnpm install --production
 

apps/backend/README.md

@@ -74,20 +74,7 @@ pnpm migration:run
 
 ## Telegram notifications
 
-To setup the Telegram notifications when a new form is available:
-
-Check first that the telegram secrets `/wfp/dmp/telegram/telegramNcdmChatId`, `/wfp/dmp/telegram/telegramPcdmChatId` and `/wfp/dmp/telegram/telegramBotToken` have been setup in the AWS Secret Manager.
-
-- In Kobo, for each form:
-  - Go to `SETTINGS`
-  - Click on `REST Services` and then on `REGISTER A NEW SERVICE`
-  - Add:
-    - A name
-    - An endpoint URL: `<Environment backend URL>/webhook/<FLOOD or DROUGHT or INCIDENT>`
-    - A custom http Headers `authorization` : `Bearer <dmpWebhookToken from the AWS SecretManager>`
-  - Click on `CREATE`
-
-# Create a bot
+### Create a Telegram bot
 
 - To create a bot follow this [tutorial](https://core.telegram.org/bots/tutorial).
   Keep in a safe place its associated token.
@@ -104,3 +91,21 @@ curl https://api.telegram.org/bot<BOT_TOKEN>/getUpdates
 If you cannot see the chat ids, remove the bot from the channels and add it again in the chats and run the command again
 
 You can now fill out `/wfp/dmp/telegram/telegramNcdmChatId`, `/wfp/dmp/telegram/telegramPcdmChatId` and `/wfp/dmp/telegram/telegramBotToken` in the AWS Secret Manager.
+
+### Kobo Webhook settings
+
+To setup the Telegram notifications when a new form is available:
+
+Check first that the telegram secrets `/wfp/dmp/telegram/telegramNcdmChatId`, `/wfp/dmp/telegram/telegramPcdmChatId` and `/wfp/dmp/telegram/telegramBotToken` have been setup in the AWS Secret Manager.
+
+- In Kobo, for each form:
+  - Go to `SETTINGS`
+  - Click on `REST Services` and then on `REGISTER A NEW SERVICE`
+  - Add:
+    - A name
+    - An endpoint URL: `<Environment backend URL>/webhook/<FLOOD or DROUGHT or INCIDENT>`
+    - A custom http Headers `authorization` : `Bearer <dmpWebhookToken from the AWS SecretManager>`
+  - Click on `CREATE`
+
+![](images/kobo_rest_services.png)
+![](images/kobo_rest_services_webhook.png)

apps/backend/package.json

@@ -21,7 +21,7 @@
     "schema:drop": ". ./.env.rc && typeorm -d datasource.js schema:drop",
     "start:debug": "pnpm start --debug",
     "start:prod": "node dist/main.js",
-    "test": ". ./.env.test.rc && jest * --maxWorkers=2",
+    "test": "TZ=UTC . ./.env.test.rc && jest * --maxWorkers=2",
     "test:circular": "depcruise --validate .dependency-cruiser.js src",
     "test:coverage": "docker compose up -d db-test && pnpm test -- --coverage",
     "test:debug": "NODE_OPTIONS='--inspect-brk' pnpm test",
@@ -54,7 +54,7 @@
     "cli-color": "2.0.3",
     "connect-typeorm": "^2.0.0",
     "cookie-parser": "1.4.6",
-    "express": "4.18.1",
+    "express": "4.20.0",
     "express-formidable": "1.2.0",
     "express-session": "1.17.3",
     "jsonwebtoken": "9.0.0",
@@ -97,7 +97,7 @@
     "ts-loader": "9.3.1",
     "tsconfig": "workspace:*",
     "typescript": "4.7.4",
-    "webpack": "5.74.0"
+    "webpack": "5.94.0"
   },
   "engines": {
     "node": "^18.12.1"

apps/backend/src/app.module.ts

@@ -66,6 +66,15 @@ const authenticate = async (email: string, password: string) => {
               companyName: 'Disaster Monitoring Platform',
               withMadeWithLove: false,
               favicon: 'https://dmp.ovio.org/favicon.ico',
+              theme: {
+                colors: {
+                  primary100: '#63B2BD', // Example color for primary buttons
+                  primary80: '#fff', // Example color for primary buttons on hover
+                  primary60: '#fff', // Example color for primary buttons on active
+                  primary40: '#fff', // Example color for primary buttons on focus
+                  primary20: '#fff', // Example color for primary buttons on disabled
+                },
+              },
             },
             locale: {
               language: 'en',

apps/backend/src/modules/kobo/kobo.controller.ts

@@ -1,6 +1,7 @@
 import { UseProvince } from '@auth/user.decorator';
 import { Get } from '@decorators/httpDecorators';
 import { Body, Controller, HttpException, HttpStatus, Param, Patch, Query } from '@nestjs/common';
+import { OriginGuard } from '@utils/originGuard';
 import {
   DisasterDtoType,
   DROUGHT,
@@ -17,6 +18,8 @@ import {
 
 import { KoboService } from './kobo.service';
 
+const AuthorizedPatchOrigin = /^https:\/\/dmp\.ovio\.org(\/.*)?$/;
+
 @Controller('kobo')
 export class KoboController {
   constructor(private readonly koboService: KoboService) {}
@@ -72,6 +75,7 @@ export class KoboController {
   }
 
   @Patch('form/validationStatus')
+  @OriginGuard(AuthorizedPatchOrigin)
   async patchValidationStatus(
     @Body() body: PatchValidationStatusDto,
   ): Promise<ValidationStatusDto> {
@@ -86,6 +90,7 @@ export class KoboController {
   }
 
   @Patch(`form/${FLOOD}/:id`)
+  @OriginGuard(AuthorizedPatchOrigin)
   async patchFloodForm(
     @Param('id') id: string,
     @Body() body: PatchFloodFormDto,
@@ -96,6 +101,7 @@ export class KoboController {
   }
 
   @Patch(`form/${DROUGHT}/:id`)
+  @OriginGuard(AuthorizedPatchOrigin)
   async patchDroughtForm(
     @Param('id') id: string,
     @Body() body: PatchDroughtFormDto,
@@ -106,6 +112,7 @@ export class KoboController {
   }
 
   @Patch(`form/${INCIDENT}/:id`)
+  @OriginGuard(AuthorizedPatchOrigin)
   async patchIncidentForm(
     @Param('id') id: string,
     @Body() body: PatchIncidentFormDto,

apps/backend/src/modules/kobo/kobo.service.ts

@@ -72,9 +72,9 @@ export class KoboService {
     endDate,
   }: {
     disTyps: string[];
-    province: string | undefined;
-    district?: string;
-    commune?: string;
+    province?: string | string[];
+    district?: string | string[];
+    commune?: string | string[];
     startDate?: string;
     endDate?: string;
   }): Promise<QueryResponse<T>> {
@@ -85,9 +85,13 @@ export class KoboService {
       {
         params: {
           query: {
-            [koboKeys[disasterType].province]: province,
-            [koboKeys[disasterType].district]: district,
-            [koboKeys[disasterType].commune]: commune,
+            [koboKeys[disasterType].province]: Array.isArray(province)
+              ? { $in: province }
+              : province,
+            [koboKeys[disasterType].district]: Array.isArray(district)
+              ? { $in: district }
+              : district,
+            [koboKeys[disasterType].commune]: Array.isArray(commune) ? { $in: commune } : commune,
             [koboKeys[disasterType].entryDate]: { $gte: startDate, $lte: endDate },
             [koboKeys[disasterType].disTyp]: { $in: disTyps },
           },

apps/backend/src/modules/kobo/tests/__mocks__/getForms.ts

@@ -18,9 +18,9 @@ export const getFormsMock = ({
   endDate,
 }: {
   disTyps: string[];
-  province?: string;
-  district?: string;
-  commune?: string;
+  province?: string | string[];
+  district?: string | string[];
+  commune?: string | string[];
   startDate?: string;
   endDate?: string;
 }) => {