Merge pull request #648 from geoadmin/develop

New Release v1.5.0 - #minor

.env.development

@@ -7,7 +7,6 @@ VITE_WMTS_BASE_URL=https://sys-wmts.dev.bgdi.ch/
 VITE_WMS_BASE_URL=https://sys-wms.dev.bgdi.ch/
 VITE_API_SERVICES_BASE_URL=https://sys-map.dev.bgdi.ch/api/
 VITE_API_SERVICE_KML_BASE_URL=https://sys-public.dev.bgdi.ch/
-VITE_API_SERVICE_KML_STORAGE_BASE_URL=https://sys-public.dev.bgdi.ch/
 VITE_APP_API_SERVICE_SHORTLINK_BASE_URL=https://sys-s.dev.bgdi.ch/
 VITE_APP_3D_TILES_BASE_URL=https://sys-3d.dev.bgdi.ch/
 VITE_APP_VECTORTILES_BASE_URL=https://sys-verctortiles.dev.bgdi.ch/

.env.integration

@@ -6,7 +6,6 @@ VITE_WMTS_BASE_URL=https://sys-wmts.int.bgdi.ch/
 VITE_WMS_BASE_URL=https://sys-wms.int.bgdi.ch/
 VITE_API_SERVICES_BASE_URL=https://sys-map.int.bgdi.ch/api/
 VITE_API_SERVICE_KML_BASE_URL=https://sys-public.int.bgdi.ch/
-VITE_API_SERVICE_KML_STORAGE_BASE_URL=https://sys-public.int.bgdi.ch/
 VITE_APP_API_SERVICE_SHORTLINK_BASE_URL=https://sys-s.int.bgdi.ch/
 VITE_APP_3D_TILES_BASE_URL=https://sys-3d.int.bgdi.ch/
 VITE_APP_VECTORTILES_BASE_URL=https://sys-verctortiles.int.bgdi.ch/

.env.production

@@ -6,7 +6,6 @@ VITE_WMTS_BASE_URL=https://wmts.geo.admin.ch/
 VITE_WMS_BASE_URL=https://wms.geo.admin.ch/
 VITE_API_SERVICES_BASE_URL=https://map.geo.admin.ch/api/
 VITE_API_SERVICE_KML_BASE_URL=https://public.geo.admin.ch/
-VITE_API_SERVICE_KML_STORAGE_BASE_URL=https://public.geo.admin.ch/
 VITE_APP_API_SERVICE_SHORTLINK_BASE_URL=https://s.geo.admin.ch/
 VITE_APP_3D_TILES_BASE_URL=https://3d.geo.admin.ch/
 VITE_APP_VECTORTILES_BASE_URL=https://vectortiles.geo.admin.ch/

.eslintrc.js → .eslintrc.cjs

@@ -2,30 +2,39 @@
 require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
+    parserOptions: {
+        sourceType: 'module',
+    },
     root: true,
     ignorePatterns: ['node_modules', '.github', 'dist'],
+    plugins: ['simple-import-sort', 'mocha'],
     extends: [
         'eslint:recommended',
         'plugin:vue/vue3-recommended',
         'plugin:cypress/recommended',
-        'prettier',
+        'plugin:prettier-vue/recommended',
     ],
     env: {
         node: true,
         'vue/setup-compiler-macros': true,
     },
     rules: {
+        'no-var': 'error', // no var allowed, only let and const keywords
         'no-unused-vars': [
             'error',
             {
                 argsIgnorePattern: '^_',
                 destructuredArrayIgnorePattern: '^_',
             },
         ],
+        'simple-import-sort/imports': 'error',
+        'simple-import-sort/exports': 'error',
+        'mocha/no-exclusive-tests': 'error', // Do not allow it.only() tests
     },
     globals: {
         VITE_ENVIRONMENT: true,
         __APP_VERSION__: true,
+        defineModel: 'readonly',
     },
     overrides: [
         {

.github/workflows/add-testlink-to-pr.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Create/update test link on DEV
-        if: ${{ github.base_ref == 'develop' || startsWith(github.base_ref, 'develop-') }}
+        if: ${{ github.base_ref != 'master' }}
         uses: tzkhan/pr-update-action@v2
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"

.gitignore

@@ -23,9 +23,9 @@ yarn-error.log*
 *.code-*
 
 # Cypress and friends
-tests/e2e-cypress/downloads
-tests/e2e-cypress/videos
-tests/e2e-cypress/screenshots
+tests/cypress/downloads
+tests/cypress/videos
+tests/cypress/screenshots
 tests/results/*
 
 # Git

.nvmrc

@@ -1 +1 @@
-v14
+v18.18

README.md

@@ -1,9 +1,10 @@
 # web-mapviewer
 
-| Branch  | Status                                                                                                                                                                                                                                                                                                                      | Deployed version             |
-| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
-| develop | ![Build Status](https://codebuild.eu-central-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiSFlMY3hpUEwvTGkzMDJaMzF1QUdxUm54MmdvR3JKMzVTT3JDdHRaK2JLaXFNZkxjVkoyM3JOaE1DSkJuRzR2MU5RRDdMNFczMWVXSEgvd291cXNkS3dZPSIsIml2UGFyYW1ldGVyU3BlYyI6Im9qVDhwZ2h1VnhSOU5GWE0iLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=develop) | <https://sys-map.dev.bgdi.ch/> |
-| master  | ![Build Status](https://codebuild.eu-central-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiSFlMY3hpUEwvTGkzMDJaMzF1QUdxUm54MmdvR3JKMzVTT3JDdHRaK2JLaXFNZkxjVkoyM3JOaE1DSkJuRzR2MU5RRDdMNFczMWVXSEgvd291cXNkS3dZPSIsIml2UGFyYW1ldGVyU3BlYyI6Im9qVDhwZ2h1VnhSOU5GWE0iLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=master)  | <https://sys-map.int.bgdi.ch/> |
+<!-- prettier-ignore -->
+| Branch  | CI Status  | E2E Tests | Deployed version |
+| ------- | ---------- | --------- | ---------------- |
+| develop | ![Build Status](https://codebuild.eu-central-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiSFlMY3hpUEwvTGkzMDJaMzF1QUdxUm54MmdvR3JKMzVTT3JDdHRaK2JLaXFNZkxjVkoyM3JOaE1DSkJuRzR2MU5RRDdMNFczMWVXSEgvd291cXNkS3dZPSIsIml2UGFyYW1ldGVyU3BlYyI6Im9qVDhwZ2h1VnhSOU5GWE0iLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=develop) | [![web-mapviewer](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fj2ezv/develop&style=plastic&logo=cypress)](https://cloud.cypress.io/projects/fj2ezv/runs) | <https://sys-map.dev.bgdi.ch/> |
+| master  | ![Build Status](https://codebuild.eu-central-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiSFlMY3hpUEwvTGkzMDJaMzF1QUdxUm54MmdvR3JKMzVTT3JDdHRaK2JLaXFNZkxjVkoyM3JOaE1DSkJuRzR2MU5RRDdMNFczMWVXSEgvd291cXNkS3dZPSIsIml2UGFyYW1ldGVyU3BlYyI6Im9qVDhwZ2h1VnhSOU5GWE0iLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=master) | [![web-mapviewer](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fj2ezv/master&style=plastic&logo=cypress)](https://cloud.cypress.io/projects/fj2ezv/runs) | <https://sys-map.int.bgdi.ch/> |
 
 The next generation map viewer application of geo.admin.ch: Digital data can be viewed, printed out, ordered and supplied by means of web-mapviewer. The required data is available in the form of digital maps and imagery, vector data and also as online services.
 
@@ -102,16 +103,17 @@ The structure of the file should be :
 ```vue
 <script setup>
 // 1. First put the imports
-import { computed, defineProps, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import { useStore } from 'vuex'
 
 // 2. Put all the props (input)
-const {myProp} = defineProps({
+const props = defineProps({
   myProp: {
-    type: Boolean
-    default: false
-  }
+    type: Boolean,
+    default: false,
+  },
 })
+const { myProp } = toRefs(props)
 
 // 3. reactive data
 const myData = ref('My reactive value')
@@ -133,9 +135,7 @@ onMounted(() => {
 })
 
 // 8. Methods
-function myMethod() {
-
-}
+function myMethod() {}
 </script>
 
 <template>
@@ -158,7 +158,7 @@ See [its README.md](src/store/README.md) for more details.
 
 Unit testing is done through the VueCLI unit test helper, and integration testing is done with Cypress.io.
 All things related to tests are in the `/tests` folder.
-See [TESTING.md](cypress/TESTING.md) for more documentation on testing in this project.
+See [README.md](./tests/README.md) for more documentation on testing in this project.
 
 ## Project setup
 
@@ -211,21 +211,24 @@ The file `secrets.yml` will tell `summon` which keys to get from `gopass`.
 ### List of npm scripts
 
 <!-- prettier-ignore -->
-| command                          | what it does                                                                                                                                                               |
-|----------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| command                          | what it does                                                  |
+|----------------------------------|---------------------------------------------------------------|
 | `npm run dev`                    | Compiles and hot-reloads for development. Will serve the project under `http://localhost:8080` (or the next available port if `8080` is already used, see console output). |
-| `npm run build`                  | Compiles all file without bundling and minification                                                                                                                        |
-| `npm run build:(dev\|int\|prod)` | Compiles all file for the according `mode`                                                                                                                                 |
-| `npm run lint`                   | Lints and fixes files                                                                                                                                                      |
-| `npm run format`                 | Format (with Prettier) source files                                                                                                                                        |
-| `npm run format-lint`            | run both target above in succession                                                                                                                                        |
-| `npm run test:unit`              | Runs unit tests from vitest.                                                                                                                                               |
-| `npm run test:unit:watch`        | Runs unit tests and then watch for changes, re-running any part of the tests that is edited (or tests linked to parts of the app that has changed).                        |
-| `npm run test:e2e`               | Opens up the cypress app with a mobile sized view                                                                                                                          |
-| `npm run test:e2e:tablet`        | Opens up the cypress app with a iPad sized view                                                                                                                            |
-| `npm run test:e2e:desktop`       | Opens up the cypress app with a 1080p sized view                                                                                                                           |
-| `npm run test:e2e:ci`            | Starts a local server, and run cypress tests on the served URL (this used by the CI to run tests). Only tests the mobile sized view.                                       |
-| `npm run update:translations`    | Update translation files according to our Google Spreadsheet. See [above](#tooling-for-translation-update) for required tools.                                             |
+| `npm run build`                  | Compiles all file without bundling and minification           |
+| `npm run build:(dev\|int\|prod)` | Compiles all file for the according `mode`                    |
+| `npm run lint`                   | Format, lints and fixes                                       |
+| `npm run lint:no-fix`            | Check formatting and linting without auto fixes               |
+| `npm run test:unit`              | Runs unit tests from vitest.                                  |
+| `npm run test:unit:watch`        | Runs unit tests and then watch for changes, re-running any part of the tests that is edited (or tests linked to parts of the app that has changed). |
+| `npm run test:e2e`               | Opens up the cypress app with a mobile sized view             |
+| `npm run test:e2e:headless`      | Run cypress E2E tests in headless mode with a mobile sized view |
+| `npm run test:e2e:tablet`        | Opens up the cypress app with a iPad sized view               |
+| `npm run test:e2e:desktop`       | Opens up the cypress app with a 1080p sized view              |
+| `npm run test:e2e:ci`            | Run cypress E2E tests on the served URL (NOTE: the server should be started before). Only tests the mobile sized view. |
+| `npm run test:component`         | Opens up the cypress component tests |
+| `npm run test:component:headless` | Run cypress component tests in headless mode |
+| `npm run test:component:ci`      | Run cypress component tests |
+| `npm run update:translations`    | Update translation files according to our Google Spreadsheet. See [above](#tooling-for-translation-update) for required tools. |
 
 All script commands starting a webserver or using one (`dev` and all things related to cypress) will determine the port to use by looking for the next one available starting at `8080`.
 
@@ -285,7 +288,7 @@ Depending on the target (`dev|int|prod`), you will have to build and bundle/mini
 
 ## Check External Layer Provider list
 
-In the `Import` tool we provide an hardcoded list of provider via the [src/modules/infobox/utils/external-layer-providers.json](./src/modules/infobox/utils/external-layer-providers.json) file. Because we have quite a lot of provider, we have a CLI tool in order to
+In the `Import` tool we provide an hardcoded list of provider via the [src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json](./src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json) file. Because we have quite a lot of provider, we have a CLI tool in order to
 check their validity. The tool can also be used with a single url as input parameter to see the url would be valid
 for our application.
 

adr/2024_01_31_drawing_icon_size.md

@@ -0,0 +1,106 @@
+# Drawing Label/Icon Size
+
+> Status: accepted
+
+> Date: 31.01.2024
+
+> Author: Brice Schaffner, Pascal Barth, Christoph Böcklin
+
+## Context
+
+On the legacy viewer [geoadmin/mf-geoadmin3](https://github.com/geoadmin/mf-geoadmin3) we have only three UI size in the drawing
+
+- small
+- medium
+- big
+
+Those size can be set to the text and/or icon size.
+
+Based on user comments that wanted bigger icons a 4th UI size has been added in this viewer:
+
+- very small
+- small
+- medium
+- big
+
+On the legacy viewer, the icons were served by [geoadmin/mf-chsdi3](https://github.com/geoadmin/mf-chsdi3) at a fix size of `48px` while on this viewer icons are served by [geoadmin/service-icons](https://github.com/geoadmin/service-icons) using a dynamic size depending on the selected UI size.
+
+Therefore we need to do some conversion between legacy and current viewer.
+
+Here below is a table about the size, the value for the new viewer are per `31.01.2024` and might change.
+
+### Label Size
+
+Scale in the KML style:
+
+| Size       | Legacy KML Scale | New KML Scale |
+| ---------- | ---------------- | ------------- |
+| very small | -                | 1             |
+| small      | 1                | 1.25          |
+| medium     | 1.5              | 1.5           |
+| big        | 2                | 2             |
+
+### Icon Size
+
+| Size       | Leg. KML Scale | Leg. KML Size | Leg. Icon Size\* | Leg. Real Size | New KML Scale | New KML Size | New Icon Size\* | New Icon size x scale | New Style size x scale |
+| ---------- | -------------- | ------------- | ---------------- | -------------- | ------------- | ------------ | --------------- | --------------------- | ---------------------- |
+| very small | -              | -             | -                | -              | 0.75          | 24           | 0.5x (24px)     | 36                    | 18                     |
+| small      | 0.5            | 48            | 24@2x (48px)     | 24             | 1.125         | 36           | 0.75x (36px)    | 81                    | 40.5                   |
+| medium     | 0.75           | 48            | 24@2x (48px)     | 36             | 1.5           | 48           | 1x (48px)       | 144                   | 72                     |
+| big        | 1              | 48            | 24@2x (48px)     | 48             | 2.25          | 72           | 1.5x (72px)     | 324                   | 162                    |
+
+\* This is the size of the Icon return by the backend with the scale value asked in the backend.
+
+NOTE: the KML scale is not the same as the open layer `IconStyle.scale` because this one is normalized for an icon of size 32px. The open layer `IconStyle.scale` is computed as follow:
+
+- `kml_scale` := scale in the KML file
+- `size` := size of the icon retrieved from the URL
+- `scale` := `kml_scale` / (32 / `size`)
+  See [/openlayers/openlayers/src/ol/format/KML.js#L2727](https://github.com/openlayers/openlayers/blob/7670a67fd013a0002bf84442e96d7399eb2403cc/src/ol/format/KML.js#L2727) and [openlayers/openlayers/src/ol/format/KML.js#L325](https://github.com/openlayers/openlayers/blob/7670a67fd013a0002bf84442e96d7399eb2403cc/src/ol/format/KML.js#L325)
+
+NOTE: The actual size of the icons on the backend `service-icons` is 96px but they are reduced to 48px for the scale 1x !
+
+## Descision
+
+Because the 4th UI size has been added to have bigger icons and not smaller icon it has been decided by Brice Schaffner and Pascal Barth to change the UI sizes as follow:
+
+- small => 24px
+- medium => 36px
+- large => 48px
+- xlarge => 60px
+
+The final size will not changes from the actual size used in test.map.geo.admin.ch but it has the advantage that
+an icon of size small from the old viewer still has the size small in the new viewer. This make the code and usage more clear.
+
+It has also been decided to keep the same logic as the old viewer where the frontend always get one icon size (48px => 1x scale on backend) and use the frontend scale to change its size. This has the advantage that browser cache can be better used for lots of icons at different sizes, especially if we support in future scaling with a scaling bar instead of predefined scale.
+
+So here below would be the new size table
+
+### New Icon Size
+
+| Size   | Leg. KML Scale | Leg. KML Style Size | Leg. Icon Size | Leg. Real Size | New KML Scale | New KML Style Size | New Icon Size | New Real Size |
+| ------ | -------------- | ------------------- | -------------- | -------------- | ------------- | ------------------ | ------------- | ------------- |
+| small  | 0.5            | 48                  | 24@2x (48px)   | 24             | 0.5           | 48                 | 1x (48px)     | 24            |
+| medium | 0.75           | 48                  | 24@2x (48px)   | 36             | 0.75          | 48                 | 1x (48px)     | 36            |
+| large  | 1              | 48                  | 24@2x (48px)   | 48             | 1             | 48                 | 1x (48px)     | 48            |
+| xlarge | -              | -                   | -              | -              | 1.25          | 48                 | 1x (48px)     | 60            |
+
+With table and following the openlayer scale formulas our Icon size should be
+
+| Icon Size | Ol Icon Scale | KML Scale\* | Real size [px] |
+| --------- | ------------- | ----------- | -------------- |
+| small     | 0.5           | 0.75        | 24             |
+| medium    | 0.75          | 1.125       | 36             |
+| large     | 1             | 1.5         | 48             |
+| xlarge    | 1.25          | 1.875       | 60             |
+
+\* `kml_scale` := `ol_scale` \* `size` / 32 => `ol_scale` \* 1.5
+
+### New Label Size
+
+| Size   | Legacy Scale | New Scale |
+| ------ | ------------ | --------- |
+| small  | 1            | 1         |
+| medium | 1.5          | 1.5       |
+| large  | 2            | 2         |
+| xlarge | -            | 2.5       |