Merge pull request #475 from OpenConext/feature/frontend_nov_25

Update npm packages & tooling

Author: johanib

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 6.0.0
 - Upgrade from Symfony 6.4 to Symfony 7.3
 - Maintenance release, Update tooling, packages
+- Update npm packages and frontend tooling.
 
 Upgrade instructions:
  - Ensure the `database_server_version` setting in parameters.yaml is up-to-date with the production db server version. e.g. `10.6.23-MariaDB`

README.md

@@ -36,6 +36,15 @@ mock service was created for end to end test purposes, but could be utilized in
 3. Update the service definition to point to this class: `class: Surfnet\StepupGateway\ApiBundle\Tests\TestDouble\Service\YubikeyService` 
 4. Do not commit/push this change!
 
+### Frontend Development
+
+#### Template Preview
+For the purpose of testing the frontend templates a preview route is available to view all templates with mock data.
+
+Available in `smoketest` environment only.  
+Visit: `https://gateway.dev.openconext.local/preview/`
+
+
 ### Running Behat tests
 #### .env settings in devconf/stepup
 

composer.json

@@ -23,6 +23,7 @@
         "ext-json": "*",
         "ext-libxml": "*",
         "beberlei/assert": "^3.3.3",
+        "doctrine/annotations": "^2.0",
         "doctrine/common": "^3.5.0",
         "doctrine/dbal": "^3.10.3",
         "doctrine/doctrine-bundle": "^2.18.1",
@@ -99,6 +100,7 @@
         ],
         "check": [
             "@check-ci",
+            "@eslint",
             "@rector"
         ],
         "check-ci": [
@@ -128,9 +130,16 @@
         "rector":  "./ci/qa/rector.sh --dry-run",
         "rector-fix":  "./ci/qa/rector.sh",
         "dsv": "./bin/console doctrine:schema:validate --skip-sync",
+        "eslint": "yarn eslint public/typescript",
         "frontend-install": [
-            "yarn install --frozen-lockfile",
-            "yarn encore production"
+          "yarn install --frozen-lockfile",
+          "yarn encore production",
+          "./bin/console cache:clear",
+          "@fix-dev-permissions"
+        ],
+        "fix-dev-permissions": [
+          "chown -R www-data:www-data /var/www/html/var/log",
+          "chown -R www-data:www-data /var/www/html/var/cache"
         ],
         "security-tests": [
             "composer audit",

composer.lock

@@ -13,3 +13,7 @@ gateway_test_remote_idp_sso:
   methods:  [GET,POST]
   defaults: { _controller: Surfnet\StepupGateway\Behat\Controller\IdentityProviderController::ssoAction }
 
+template_preview_controller:
+  resource: Surfnet\StepupGateway\Behat\Controller\TemplatePreviewController
+  type: attribute
+  prefix: /

config/routes/smoketest/behat.yaml

@@ -44,6 +44,14 @@ services:
       - '@twig'
       - '@logger'
 
+  Surfnet\StepupGateway\Behat\Controller\TemplatePreviewController:
+    class: Surfnet\StepupGateway\Behat\Controller\TemplatePreviewController
+    calls:
+      - [setContainer, ['@Psr\Container\ContainerInterface']]
+    tags:
+      - 'controller.service_arguments'
+      - 'container.service_subscriber'
+
   ##### SSO on 2FA overrides #####
   # For end to end testing, we do not actually encrypt & decrypt the cookie value.
   # Allowing for more easily checking the cookie for correct contents without having

config/services_test.yaml

@@ -0,0 +1,38 @@
+import js from '@eslint/js';
+import typescriptEslint from 'typescript-eslint';
+
+export default [
+    {
+        ignores: [
+            'vendor/**',
+            'node_modules/**',
+            'var/**',
+            'public/build/**',
+            '.yarn-cache/**',
+            'build/**',
+            'dist/**',
+        ],
+    },
+    js.configs.recommended,
+    ...typescriptEslint.configs.recommendedTypeChecked,
+    {
+        files: ['**/*.ts', '**/*.tsx'],
+        languageOptions: {
+            parserOptions: {
+                project: './tsconfig.json',
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        rules: {
+            // Customize rules as needed
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-unused-vars': 'warn',
+        },
+    },
+    {
+        // Disable type-checking rules for JS files
+        files: ['**/*.js', '**/*.jsx'],
+        ...typescriptEslint.configs.disableTypeChecked,
+    },
+];
+

eslint.config.mjs

@@ -1,44 +1,46 @@
 {
-    "browserslist": "last 2 versions, ie 11, > 1%",
+    "browserslist": [
+        "last 2 versions",
+        "ie 11",
+        "> 1%"
+    ],
     "devDependencies": {
         "@babel/core": "^7.26.9",
         "@babel/preset-env": "^7.26.9",
-        "@symfony/webpack-encore": "^4",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "^9.39.1",
+        "@symfony/webpack-encore": "^5.3.1",
         "@types/bootstrap": "^5.0.0",
-        "@types/jest": "^27",
         "@types/jquery": "^3.5.32",
-        "@types/node": "^10",
-        "@types/popper.js": "^1.11.0",
-        "css-loader": "^6.11",
-        "eslint": "^7",
-        "eslint-config-airbnb": "^19.0",
-        "eslint-loader": "^4",
-        "eslint-plugin-import": "^2.31",
-        "eslint-webpack-plugin": "^3.2.0",
-        "jest": "^27",
-        "less": "^3.12.2",
-        "less-loader": "^11.1",
+        "@types/node": "^20.0.0",
+        "@typescript-eslint/eslint-plugin": "^8.47.0",
+        "@typescript-eslint/parser": "^8.47.0",
+        "autoprefixer": "^10.4.20",
+        "css-loader": "^7.1.2",
+        "eslint": "^9.39.1",
+        "eslint-webpack-plugin": "^5.0.2",
+        "less": "^4.4.2",
+        "less-loader": "^12.3.0",
         "loader-utils": "^3.3",
         "postcss": ">=8.4.31",
-        "sass": "^1.85.1",
-        "sass-loader": "^13",
-        "ts-jest": "^27",
+        "postcss-loader": "^8.1.1",
+        "sass": "^1.94.1",
+        "sass-loader": "^16.0.6",
         "ts-loader": "^9",
-        "typescript": "^4",
-        "webpack": "^5.98.0",
-        "webpack-cli": "^5.0.0",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.47.0",
+        "webpack": "^5.103.0",
+        "webpack-cli": "^6.0.1",
         "webpack-import-glob-loader": "^1.6.3"
     },
     "license": "Apache-2.0",
     "private": true,
     "dependencies": {
-        "bootstrap": "^3",
+        "bootstrap": "^5.3.3",
+        "core-js": "^3.37.0",
         "jquery": "^3.7.1",
-        "popper.js": "^1.16.1",
+        "regenerator-runtime": "^0.14.1",
         "select2": "^4.0.3",
         "yargs-parser": ">=18.1.2"
-    },
-    "resolutions": {
-        "json5": ">=2.2.2"
     }
 }