Merge pull request #2578 from statisticsnorway/develop

Prod deploy 2.4.0

.github/auto_assign.yml

@@ -18,8 +18,8 @@ assignees:
 # Uses numberOfReviewers if unset.
 numberOfAssignees: 1
 # A list of keywords to be skipped the process that add reviewers if pull requests include it
-# skipKeywords:
-#   - wip
+skipKeywords:
+  - dependabot
 
 # filterLabels:
 #   # Run

.github/workflows/deploy_nais.yaml

@@ -49,7 +49,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Give GitHub Actions acces to docker repo
-        uses: webfactory/ssh-agent@v0.8.0
+        uses: webfactory/ssh-agent@v0.9.0
         with:
           ssh-private-key: ${{ secrets.DOCKER_REPO_READ_KEY }}
       - name: Checkout docker
@@ -76,7 +76,7 @@ jobs:
 
       - id: "auth"
         name: "Authenticate to Google Cloud"
-        uses: "google-github-actions/auth@v2.0.1"
+        uses: "google-github-actions/auth@v2.1.2"
         with:
           workload_identity_provider: "projects/906675412832/locations/global/workloadIdentityPools/ssb-identity-pool/providers/github-oidc-provider"
           service_account: "[email protected]"

.github/workflows/manual_deploy_to_prod.yaml

@@ -15,7 +15,7 @@ jobs:
     environment: 'production'
     steps:
       - name: Download workflow artifact
-        uses: dawidd6/action-download-artifact@v3.0.0
+        uses: dawidd6/action-download-artifact@v3.1.2
         with:
           workflow: deploy_to_prod.yaml
           branch: master

.github/workflows/manual_deploy_to_qa.yaml

@@ -15,7 +15,7 @@ jobs:
     environment: 'QA'
     steps:
       - name: Download workflow artifact
-        uses: dawidd6/action-download-artifact@v3.0.0
+        uses: dawidd6/action-download-artifact@v3.1.2
         with:
           workflow: deploy_to_qa.yaml
           branch: develop

README.md

@@ -56,9 +56,9 @@ Run
 ```
 npm run dev
 ```
-to start multiple webpack watches in parallel that will watch for changes in TypeScript, JavaScript and SCSS files.
-
-Most changes to files should then be ready after page refresh in a few seconds.
+to start multiple watches in parallel that will watch for changes in TypeScript, JavaScript and SCSS files.
+A browserSync instace will also be started. If you have a page open (edit or preview mode) it should reload automatically on save.
+If not, most changes to files should be ready after page refresh after a few seconds. 
 
 #### Typescript interfaces Code-Gen
 We're using the `enonic-ts-codegen` library. This reads through all .xml config files and automatically creates interface files for all parts, layouts, pages, site-config, and content-types. This is a part of the gradle.build pipeline. So they will be regenerated and overwritten on every build. To change the interface you'll have to change the .xml, not the .ts interface files.

build.gradle

@@ -37,7 +37,7 @@ dependencies {
     include "com.enonic.xp:lib-cluster:${xpVersion}"
     include "com.enonic.xp:lib-mail:${xpVersion}"
     include "com.enonic.xp:lib-scheduler:${xpVersion}"
-    implementation 'commons-codec:commons-codec:1.16.0'
+    implementation 'commons-codec:commons-codec:1.16.1'
     include "no.item:wsutil-server:2.0.0"
     include "com.gravitondigital:featuretogglelib:0.3.0"
     include 'org.json:json:20231013'
@@ -65,54 +65,21 @@ node {
     version = '18.12.1'
 }
 
-task clientJsWebpack( type: NpxTask, dependsOn: npmInstall ) {
-    command =  'webpack'
-    environment = [ 'NODE_ENV': nodeEnvironment() ]
-    args = [ '--config', 'webpack.clientjs.config.js', '--color' ]
-    description = 'Build client-side js.'
-    outputs.cacheIf { true }
-    inputs.dir 'src/main/resources/assets/js'
-    outputs.file "${buildDir}/resources/main/assets/js/bundle.js"
+task compileAssets( type: NpmTask, dependsOn: npmInstall) {
+  args = [
+    'run',
+    'build:asset' // This script must exist in the package.json file
+  ]
+  description 'Compile asset resources'
 }
 
-task clientTsWebpack( type: NpxTask, dependsOn: npmInstall ) {
-    command  =  'webpack'
-    environment = [ 'NODE_ENV': nodeEnvironment() ]
-    args = [ '--config', 'webpack.clientts.config.js', '--color' ]
-    description = 'Build client-side ts.'
-    outputs.cacheIf { true }
-    inputs.dir 'src/main/resources/assets/ts'
-    outputs.file "${buildDir}/resources/main/assets/ts/bundle.js"
-}
 
-task stylesWebpack( type: NpxTask, dependsOn: npmInstall ) {
-    command  =  'webpack'
-    environment = [ 'NODE_ENV': nodeEnvironment() ]
-    args = [ '--config', 'webpack.styles.config.js', '--color' ]
-    description = 'Build client-side css.'
-    outputs.cacheIf { true }
-    inputs.dir 'src/main/resources/assets/styles'
-    outputs.file "${buildDir}/resources/main/assets/styles/bundle.css"
-}
-
-task serverWebpack( type: NpxTask, dependsOn: npmInstall ) {
-    command  =  'webpack'
-    environment = [ 'NODE_ENV': nodeEnvironment() ]
-    args = [ '--config', 'webpack.server.config.js', '--color']
-    description = 'Build server JS.'
-    outputs.cacheIf { true }
-    inputs.dir 'src/main/resources/tasks'
-    inputs.dir 'src/main/resources/lib'
-    inputs.dir 'src/main/resources/services'
-    inputs.dir 'src/main/resources/site'
-    inputs.dir 'src/main/resources/admin'
-    inputs.file 'src/main/resources/main.es6'
-    outputs.dir "${buildDir}/resources/main/tasks"
-    outputs.dir "${buildDir}/resources/main/lib"
-    outputs.dir "${buildDir}/resources/main/services"
-    outputs.dir "${buildDir}/resources/main/site"
-    outputs.dir "${buildDir}/resources/main/admin"
-    outputs.file "${buildDir}/resources/main/main.js"
+task compileServer( type: NpmTask, dependsOn: npmInstall) {
+  args = [
+    'run',
+    'build:server' // This script must exist in the package.json file
+  ]
+  description 'Compile server resources'
 }
 
 task react4xp(type: NpmTask, dependsOn: npmInstall) {
@@ -142,6 +109,7 @@ processResources {
     exclude '**/*.es'
     exclude '**/*.es6'
     exclude '**/*.ts'
+    exclude '**/*.test.js'
     exclude 'assets/js/**/*.js'
     include 'assets/js/bundle.js'
     exclude 'assets/styles/**/*.less'
@@ -156,17 +124,14 @@ jar {
     exclude 'assets/styles/**/*.scss'
     exclude 'assets/styles/**/*.js'
 
-    // serverWebpack.dependsOn += 'react4xp_components' // 'webpack_react4xp'
-    serverWebpack.dependsOn += generateTypeScript {
+    compileServer.dependsOn += generateTypeScript {
       singleQuote = true
       prependText = "/* eslint-disable prettier/prettier */ \n // WARNING: This file was automatically generated by no.item.xp.codegen. You may lose your changes if you edit it."
     }
 
     dependsOn += npmInstall
-    dependsOn += clientJsWebpack
-    dependsOn += clientTsWebpack
-    dependsOn += stylesWebpack
-    dependsOn += serverWebpack
+    dependsOn += compileAssets
+    dependsOn += compileServer
 }
 
 def nodeEnvironment() {

docs/BuildPipeline.md

@@ -5,9 +5,7 @@ Caching is enabled on most parts of the build, so it should only run the necessa
 Steps:
 1. npmInstall - installs npm packages
 2. generateTypeScriptInterfaces - generates ts interfaces from enonic xml configs
-3. clientJsWebpack - generates `/assets/js/bundle.js` from `/assets/js/main.es6`
-4. clientTsWebpack - generates `/assets/ts/bundle.js` from `/assets/ts/main.ts`
+3. compileAssets - generates compiled assets files from `/src/main/resources/assets`
+4. compileServer - generates compiled JS from `.ts` and `.es6` files to be used server-side on XP
 5. [react4xp](./React4xp.md)
-6. serverWebpack - transforms all .es6 and .ts files **not** in `/assets` to .js, but ignores all config files generated from `generateTypeScriptInterfaces`
-7. stylesWebpack - generates `/assets/styles/bundle.css` from `/assets/styles/main.scss`
-8. [testWebpack](./Testing.md)
+6. [testWebpack](./Testing.md)

docs/ErrorHandling.md

@@ -14,17 +14,17 @@ the part content and rendering in the try part, and a error rendering
 function in the catch part.
 
 ```&typescript
-const { renderError } = __non_webpack_require__( '/lib/error/error') 
+import { renderError } from '/lib/error/error' 
 
-export function get(req: Request): Response {
+export function get(req: XP.Request): XP.Response {
   try {
     return renderPart(req)
   } catch (e) {
     return renderError(req, 'Error in part', e)
   }
 }
 
-function renderPart(req: Request): Response {
+function renderPart(req: XP.Request): XP.Response {
 
   ... part logic ...
 }

docs/MimirXPRepo.md

@@ -17,12 +17,11 @@ _OBS_ : the examples are self-referential and use other functions from the same
 Execute `callback: () => T` using SuperUser credentials
 
 **Example**
-```javascript
-const repo: RepoLibrary = __non_webpack_require__('/lib/xp/repo')
-
+```typescript
+import { get } from '/lib/xp/repo'
 const getRepo = (repoName, branch) => {
   return withSuperUserContex(repoName, branch, () => {
-    return repo.get(repoName); 
+    return get(repoName); 
   });  
 }
 ``` 

docs/React4xp.md

@@ -1,19 +1,25 @@
 # React4xp
+
 ## Server-side Rendering (SSR)
-We should try to use server-side rendering for all react components because of crawlers or other that run the website without javascript. For now, there are at least one case where we can't use SSR for now, and that is where we need to use `dangerouslySetInnerHTML` for HTML Content. Ref. [issue](https://github.com/enonic/lib-react4xp/issues/33)
+
+We should try to use server-side rendering for all react components because of crawlers or other that run the website without javascript. For now, there are at least one case where we can't use SSR for now, and that is where we need to use `dangerouslySetInnerHTML` for HTML Content. Remember to always sanitize input before using it in dangerouslySetInnerHTML. Ref. [issue](https://github.com/enonic/lib-react4xp/issues/33)
 
 Example for SSR only: [Breadcrumbs.jsx](/src/main/resources/react4xp/_entries/Breadcrumb.jsx) and [default.es6](/src/main/resources/site/pages/default/default.es6)
 
 ## Hydrate (Without SSR)
+
 If there are problems where SSR doesn't work at all, `ssr: false` can be used in render functions. We should try to never use it, because then the part will never be visible/rendered for non-js users.
 
 ## SSR and Hydrate
+
 Hydration is needed for react components with client side interaction. You need to add pageContributions for this to work (ref. [factBox.ts](/src/main/resources/site/parts/factBox/factBox.ts)).
 
 ## LifeCycle and State
+
 If we want to make more complex components/containers for react we can create classes that extends the React.Component class. This will open of for the possibility to use [state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) and [lifecycles](https://reactjs.org/docs/react-component.html#the-component-lifecycle). Ref. [Header.jsx](/src/main/resources/react4xp/_entries/Header.jsx)
 
 ## Entries
+
 It is important that any file in `react4xp/_entries` is not imported into any other file. An entry is a bridge between XP and React, not a reusable React component. They should only be used through the various render methods in `lib-react4xp` in our controllers.
 
 After you've run `enonic project build` or `enonic project deploy` at least once, you'll have a file in your build folder with a list of all react4xp components available. `/build/resources/main/assets/react4xp/entries.json`

docs/i18n.md

@@ -18,12 +18,11 @@ information about how to use i18n functions in the controllers.
 
 Use `localize` to get the right phrases.
 
-```(javascript)
-const {localize} = __non_webpack_require__('/lib/xp/i18n')
-const {getLanguage} = __non_webpack_require__('/lib/language')
+```(typescript)
+import { localize } from '/lib/xp/i18n'
+import { getLanguage } from '/lib/language'
 
-exports.get = (req) => {
-    
+export function get(req: XP.Request) {
     const currentLanguage = getLanguage(req)    
 
     const searchPlaceholder = localize({

gradle.properties

@@ -1,6 +1,6 @@
 # Gradle Project settings
 projectName = mimir
-version = 2.3.0
+version = 2.4.0
 
 # XP App values
 appDisplayName = Mimir application

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  testMatch: ['**/src/**/*-test.[tj]s?(x)'],
+  testMatch: ['**/src/**/*.test.[tj]s?(x)'],
   moduleNameMapper: {
     // Example: If relying on relative imports in ts files to make test work one might need to map the module here
     '^/lib/vendor/(.*)$': '<rootDir>/src/main/resources/lib/vendor/$1',