Standalone ngeo UI sbr

.dockerignore

@@ -17,3 +17,7 @@ geoportal/geomapfish_geoportal/locale/*.pot
 !package-lock.json
 !tsconfig.json
 !vite.config.ts
+!ui
+ui/dist/
+ui/node_modules/
+ui/static/fa-*

.github/renovate.json5

@@ -54,11 +54,18 @@
       versioning: 'regex:^(?<major>\\d+)(\\.(?<minor>\\d+)(\\.(?<patch>\\d+))?)?-(?<compatibility>.*)$',
       matchDepNames: ['node'],
     },
+    /** Parse Gdal Docker tag */
     {
       matchDatasources: ['docker'],
       versioning: 'regex:^(?<compatibility>.*)-(?<major>\\d+)\\.(?<minor>\\d+)\\.(?<patch>\\d+)?$',
       matchDepNames: ['ghcr.io/osgeo/gdal'],
     },
+    /** Parse Node Docker tag */
+    {
+      matchDatasources: ['docker'],
+      versioning: 'regex:^(?<major>\\d+)\\.(?<minor>\\d+)\\.(?<patch>\\d+)-(?<compatibility>.*)$',
+      matchDepNames: ['node'],
+    },
     /** Automerge the patch, the minor and the dev dependency */
     {
       matchBaseBranches: ['/^prod-2-7.*/', '/^prod-2-8.*/'],

.pre-commit-config.yaml

@@ -28,9 +28,17 @@ repos:
             |geoportal/webpack.apps.js
           )$
   - repo: https://github.com/sbrunner/integrity-updater
-    rev: 0.1.0
+    rev: 0.2.0
     hooks:
       - id: integrity-updater
+        include: |-
+          (?x)^(
+            geoportal/geomapfish_geoportal/static/.*
+            |ui/.*
+          )$
+        args:
+          - --pre-commit
+          - --blacklist=https://maps\.googleapis\.com/
   - repo: https://github.com/PyCQA/autoflake
     rev: v2.3.1
     hooks:
@@ -67,6 +75,10 @@ repos:
       - id: check-toml
       - id: check-yaml
       - id: check-json
+        exclude: |-
+          (?x)^(
+            ui/tsconfig\.json
+          )$
       - id: end-of-file-fixer
       - id: trailing-whitespace
       - id: mixed-line-ending
@@ -95,12 +107,14 @@ repos:
         exclude: |-
           (?x)^(
             (.*/)?poetry\.lock
+            |(.*/)?package-lock\.json
             |ci/cleanup
             |geoportal/geomapfish_geoportal/locale/.*
             |qgisserver/.*\.qg[sz]
             |geoportal/geomapfish_geoportal/static/story-map\.html
             |tilegeneration/config\.yaml\.tmpl
             |webcomponents/feedback\.ts
+            |ui/src/webcomponents/feedback\.ts
           )$
         args:
           - --ignore-words=.github/spell-ignore-words.txt

.python-version

@@ -1 +1 @@
-3.12
+3.11

.secretsignore

@@ -1 +1,2 @@
-/geoportal/interfaces/desktop_alt.html.mako
+[secrets]
+AIzaSyA3NVIy-HOYT0a0CkChA6nFwqEFqHYWBVk

Dockerfile

@@ -77,7 +77,7 @@ VOLUME /etc/geomapfish \
 
 ###############################################################################
 
-FROM node:21.2-slim AS custom-build
+FROM node:20.18.0-slim AS webcomponent-build
 
 WORKDIR /app
 COPY package.json package-lock.json ./
@@ -86,9 +86,26 @@ RUN npm install --ignore-scripts
 
 COPY tsconfig.json vite.config.ts ./
 COPY webcomponents/ ./webcomponents/
-RUN npm run build
+RUN NODE_ENV=production npm run build
+
+###############################################################################
+
+FROM node:20.18.0-slim AS ui-build
+
+WORKDIR /app
+COPY ui/package.json ui/package-lock.json ./
+
+RUN npm install --ignore-scripts
+
+COPY ui/ ./
+RUN NODE_ENV=production npm run build
 
 ###############################################################################
 
 FROM gmf_config AS config
-COPY --from=custom-build /app/dist/ /etc/geomapfish/static/custom/
+
+COPY --from=webcomponent-build /app/dist/ /etc/geomapfish/static/custom/
+
+COPY --from=ui-build /app/dist/* /etc/static-frontend/
+COPY --from=ui-build /app/node_modules/ngeo/dist/fa-* /etc/static-frontend/
+VOLUME /etc/static-frontend/

geoportal/vars.yaml

@@ -42,10 +42,19 @@ vars:
       default: True
     - name: mobile
     - name: iframe_api
+    - name: iframe_api_renovated
+      type: custom
+      html_filename: iframe_api.html
     - name: desktop_alt
       type: canvas
       layout: desktop
+    - name: desktop_renovated
+      type: custom
+      html_filename: desktop.html
     - name: mobile_alt
+    - name: mobile_renovated
+      type: custom
+      html_filename: mobile.html
     - name: oeedit
 
   interfaces_config:
@@ -361,6 +370,14 @@ vars:
         gmfShareOptions:
           enableEmail: False
 
+    desktop_renovated:
+      extends: desktop_alt
+      redirect_interface: mobile_renovated
+      constants:
+        # Those two lines should be commented in dev mode.
+        gmfCustomJavascriptUrl: ''
+        gmfCustomStylesheetUrl: ''
+
     mobile:
       constants:
         sentryOptions:
@@ -475,10 +492,17 @@ vars:
           autoRotate: True
           atLoadingTime: True
 
+    mobile_renovated:
+      extends: mobile_alt
+      redirect_interface: mobile_renovated
+
     iframe_api:
       constants:
         gmfOptions: *gmfOptions
 
+    iframe_api_renovated:
+      extends: iframe_api
+
     api:
       constants:
         # The resolutions list.
@@ -762,6 +786,8 @@ vars:
     - https://localhost
     - https://localhost:3000
     - https://localhost:3001
+    - http://localhost:3002
+    - https://localhost:3002
     - http://localhost
     - http://localhost:3000
     - http://localhost:3001
@@ -874,6 +900,7 @@ vars:
         - http://localhost
         - http://localhost:3000
         - http://localhost:3001
+        - http://localhost:3002
         - http://localhost:6006
         - https://localhost
         - https://localhost:3000

ui/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/public/fa-*

ui/.nvmrc

@@ -0,0 +1 @@
+20

ui/README.md

@@ -0,0 +1,36 @@
+# The renovate interface
+
+The renovate interface is the desktop, mobile and iframe_api interfaces from ngeo that uses the
+ngeo library directly (renovated).
+
+## Development
+
+The server application should be started previously, see the documentation from the main README.
+
+To start the development server, run:
+
+```bash
+npm install
+npm run dev
+```
+
+Open the application in your browser at [http://localhost:3002/static-frontend/desktop.html](http://localhost:3002/static-frontend/desktop.html), fir the desktop interface.
+
+## Integration in the application
+
+- [Build in the config image](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/Dockerfile#L92C1-L101C38).
+- [Put the files in the `/etc/static-frontend/` folder](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/Dockerfile#L111C8-L111C29).
+- The interfaces declaration [desktop](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/geoportal/vars.yaml#L51-L53), [mobile](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/geoportal/vars.yaml#L55-L57) and [iframe_api](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/geoportal/vars.yaml#L45-L47).
+- The interfaces configuration [desktop](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/geoportal/vars.yaml#L373-L379), [mobile](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/geoportal/vars.yaml#L495-L497) and [iframe_api](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/geoportal/vars.yaml#L503-L504).
+- The Interfaces should also be created in the admin interface.
+
+## Build details
+
+- [Alias required by ngeo](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/ui/vite.config.js#L41-L45).
+- [Alias created to reduce the build size](https://github.com/camptocamp/demo_geomapfish/blob/standalone-ngeo-ui-sbr/ui/vite.config.js#L47-L62).
+
+## Interfaces
+
+- The `desktop` interface is the `desktop alt` interface with more tools.
+- The `mobile` interface is the standard `mobile` interface.
+- The `iframe_api` interface is the standard `iframe_api` interface.