Merge pull request #2 from toggle-corp/feat/capacity-and-resources

Feat/capacity and resources

Author: subinasr

.dockerignore

@@ -0,0 +1,16 @@
+# dotenv environment variables file
+.env
+.env*
+**/.env
+**/.env*
+
+# Sensitive Deploy Files
+deploy/eb/
+
+# tox
+./.tox
+
+
+# Backend
+backend
+!backend/schema.graphql

.github/pull_request_template.md

@@ -0,0 +1,25 @@
+- Addresses XXX
+- Depends on XXX
+
+## Changes
+
+- Detailed list or prose of changes
+- Breaking changes
+- Changes to configurations
+
+## This PR doesn't introduce any
+
+- [ ] temporary files, auto-generated files or secret keys
+- [ ] build works
+- [ ] eslint issues
+- [ ] typescript issues
+- [ ] codegen errors
+- [ ] `console.log` meant for debugging
+- [ ] typos
+- [ ] unwanted comments
+- [ ] conflict markers
+
+## This PR includes
+
+- [ ] Translation
+- [ ] Permission

.github/workflows/ci.yml

@@ -0,0 +1,66 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - "main"
+
+env:
+  APP_GRAPHQL_CODEGEN_ENDPOINT: "./backend/schema.graphql"
+  APP_GRAPHQL_ENDPOINT: "http://web:8000/graphql/"
+  APP_TITLE: "ERCS"
+  APP_ENVIRONMENT: "development"
+  GITHUB_WORKFLOW: true
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    env:
+      PIPELINE_TYPE: ci
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22.x"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+  build:
+    name: Build
+    needs: [lint]
+    runs-on: ubuntu-latest
+    env:
+      PIPELINE_TYPE: ci
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.x"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate Type
+        run: pnpm generate:type
+
+      - name: Build
+        run: pnpm build

.github/workflows/publish-web-app-serve.yml

@@ -0,0 +1,24 @@
+name: Publish web app serve
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+
+permissions:
+  packages: write
+
+jobs:
+  publish_image:
+    name: Publish Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Publish web-app-serve
+        uses: toggle-corp/web-app-serve-action@v0.1.1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitmodules

@@ -1,3 +1,9 @@
 [submodule "backend"]
 	path = backend
 	url = https://github.com/toggle-corp/ercs-backend.git
+[submodule "go-risk-module-api"]
+	path = go-risk-module-api
+	url = git@github.com:IFRCGo/go-risk-module-api.git
+[submodule "go-api"]
+	path = go-api
+	url = https://github.com/IFRCGo/go-api.git

Dockerfile

@@ -1,41 +1,43 @@
 FROM node:22-bookworm AS dev
 
 RUN apt-get update -y \
-    && apt-get install -y --no-install-recommends \
-        git bash g++ make \
-    && rm -rf /var/lib/apt/lists/*
-
-RUN corepack enable
+    && apt-get install -y --no-install-recommends git \
+    && rm -rf /var/lib/apt/lists/* \
+    # NOTE: yarn > 1.22.19 breaks yarn-install invoked by pnpm
+    && npm install -g pnpm@10.33.0 yarn@1.22.19 --force \
+    && git config --global --add safe.directory /code
 
 WORKDIR /code
-RUN git config --global --add safe.directory /code
-
-COPY package.json pnpm-lock.yaml /code/
-RUN corepack prepare pnpm@latest --activate
 
 # -------------------------- Nginx - Builder --------------------------------
-FROM dev AS nginx-build
+FROM dev AS web-app-serve-build
+
+COPY ./package.json ./pnpm-lock.yaml /code/
 
-RUN pnpm install --frozen-lockfile
+RUN pnpm install
 
-COPY . .
+COPY . /code/
 
-ENV APP_TITLE=APP_TITLE_PLACEHOLDER
-ENV APP_GRAPHQL_ENDPOINT=APP_GRAPHQL_ENDPOINT_PLACEHOLDER
+# # Build variables (Requires backend pulled)
+ENV APP_TITLE=ercs-eoc
+ENV APP_ENVIRONMENT=development
+ENV APP_GRAPHQL_ENDPOINT=http://localhost:8000
 ENV APP_GRAPHQL_CODEGEN_ENDPOINT=./backend/schema.graphql
+ENV APP_MAPBOX_TOKEN=APP_MAPBOX_TOKEN_PLACEHOLDER
+ENV APP_GO_API=WEB_APP_SERVE_PLACEHOLDER__APP_GO_API_PLACEHOLDER
+ENV APP_GO_URL=WEB_APP_SERVE_PLACEHOLDER__APP_GO_URL_PLACEHOLDER
+ENV APP_GO_RISK_API_ENDPOINT=WEB_APP_SERVE_PLACEHOLDER__APP_GO_RISK_API_ENDPOINT_PLACEHOLDER  
 
-RUN pnpm generate:type && pnpm build
+
+RUN pnpm generate:type && WEB_APP_SERVE_ENABLED=true pnpm build
 
 # ---------------------------------------------------------------------------
-FROM nginx:1 AS nginx-serve
+FROM ghcr.io/toggle-corp/web-app-serve:v0.1.2 AS web-app-serve
 
 LABEL maintainer="Togglecorp Dev"
 LABEL org.opencontainers.image.source="https://github.com/ToogleCorp/ercs-client"
 
-COPY ./nginx-serve/apply-config.sh /docker-entrypoint.d/
-COPY ./nginx-serve/nginx.conf.template /etc/nginx/templates/default.conf.template
-COPY --from=nginx-build /code/build /code/build
-
+# Env for apply-config script
 ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
-ENV APPLY_CONFIG__DESTINATION_DIRECTORY=/usr/share/nginx/html/
-ENV APPLY_CONFIG__OVERWRITE_DESTINATION=true
+
+COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"

app/App.css

@@ -1,70 +1,88 @@
 import {
     createBrowserRouter,
-    RouterProvider
-} from "react-router"
+    type RouteObject,
+    RouterProvider,
+} from 'react-router';
+import mapboxgl from 'mapbox-gl';
 
-import type { RouteConfig } from "#root/config/routes.ts";
-import routes from "#root/config/routes.ts";
-import PageError from "#views/PageError/index.tsx";
+import { mapboxToken } from '#config';
+import type { RouteConfig } from '#root/config/routes.ts';
+import routes from '#root/config/routes.ts';
+import PageError from '#views/PageError/index.tsx';
 
 const privateRoutes = Object.values(routes).filter(
-    ({ visibility }) => visibility === "is-authenticated",
+    ({ visibility }) => visibility === 'is-authenticated',
 );
 
 const publicRoutes = Object.values(routes).filter(
-    ({ visibility }) => visibility === "is-anything",
+    ({ visibility }) => visibility === 'is-anything',
 );
 
 const guestRoutes = Object.values(routes).filter(
-    ({ visibility }) => visibility === "is-not-authenticated",
+    ({ visibility }) => visibility === 'is-not-authenticated',
 );
 
-function mapRoute(routeConfig: RouteConfig) {
+function mapRoute(routeConfig: RouteConfig): RouteObject {
+    // Only truly index routes: no path, index: true
+    if (routeConfig.index && !routeConfig.path) {
+        return {
+            index: true,
+            lazy: async () => {
+                const { default: Component } = await routeConfig.load();
+                return { Component };
+            },
+        };
+    }
+
     return {
-        index: routeConfig.index,
         path: routeConfig.path,
         lazy: async () => {
             const { default: Component } = await routeConfig.load();
             return { Component };
         },
+        children: routeConfig.children?.map(mapRoute),
     };
 }
 
+mapboxgl.accessToken = mapboxToken ?? '';
+mapboxgl.setRTLTextPlugin(
+    'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
+    // eslint-disable-next-line no-console
+    (err) => { console.error(err); },
+    true,
+);
+
 const router = createBrowserRouter([
     {
         errorElement: <PageError />,
         lazy: async () => {
-            const { default: Component } = await import("./Root/index.tsx");
+            const { default: Component } = await import('./Root/index.tsx');
             return { Component };
         },
         children: [
             {
                 lazy: async () => {
-                    const { default: Component } =
-            await import("./views/RootLayout/index.tsx");
+                    const { default: Component } = await import('./views/RootLayout/index.tsx');
                     return { Component };
                 },
                 children: [
                     {
                         lazy: async () => {
-                            const { default: Component } =
-                await import("./views/GuestLayout/index.tsx");
+                            const { default: Component } = await import('./views/GuestLayout/index.tsx');
                             return { Component };
                         },
                         children: guestRoutes.map(mapRoute),
                     },
                     {
                         lazy: async () => {
-                            const { default: Component } =
-                await import("./views/PrivateLayout/index.tsx");
+                            const { default: Component } = await import('./views/PrivateLayout/index.tsx');
                             return { Component };
                         },
                         children: privateRoutes.map(mapRoute),
                     },
                     {
                         lazy: async () => {
-                            const { default: Component } =
-                await import("./views/PublicLayout/index.tsx");
+                            const { default: Component } = await import('./views/PublicLayout/index.tsx');
                             return { Component };
                         },
                         children: publicRoutes.map(mapRoute),