Update and improve fe-ionic (4.x)

CHANGELOG.md

@@ -19,6 +19,7 @@
 - Update fe-angular to Angular 13.3.0 ([#765](https://github.com/opendevstack/ods-quickstarters/issues/765))
 - Switch fe-angular, fe-ionic and be-typescript-express to Node.js 16 builder agent ([#763](https://github.com/opendevstack/ods-quickstarters/issues/763)
 - Update and improve e2e-cypress quickstarter ([#770](https://github.com/opendevstack/ods-quickstarters/issues/770))
+- Update fe-ionic to Ionic 6.19.0 ([#780](https://github.com/opendevstack/ods-quickstarters/issues/780))
 
 ### Fixed
 - inf-terraform-agent: fix pip update and epel installation

docs/modules/quickstarters/pages/fe-ionic.adoc

@@ -4,76 +4,80 @@ Ionic quickstarter project
 
 == Purpose of this quickstarter
 
-This quickstarter generates an Ionic 6.13.1 project, you can use it when you want to develop a cross platform mobile app (iOS, android and PWA) in one codebase using Web technologies like CSS, HTML and JavaScript/Typescript.
+This quickstarter generates an *Ionic 6.19.0* project, you can use it when you want to develop a cross platform mobile app (iOS, android and PWA) in one codebase using Web technologies like CSS, HTML and JavaScript/TypeScript.
 
 It contains the basic setup for https://www.docker.com/[Docker], https://jenkins.io/[Jenkins], https://www.sonarqube.org/[SonarQube] and https://www.openshift.com/[OpenShift], so you have your CI/CD process out of the box.
 
 == What files / architecture is generated?
 
-The files are generated using https://ionicframework.com/docs/cli/[Ionic CLI]. It scaffolds a tabbed app containing 3 basic pages (home, about and contact).
+The files are generated using https://ionicframework.com/docs/cli/[Ionic CLI].
 
 ----
 .
-├── Jenkinsfile - This file contains Jenkins build configuration settings
-├── README.md
-├── config - This folder contains Webpack and sass configuration settings
 ├── docker - This folder contains Docker configuration settings
 │   ├── Dockerfile
 │   └── nginx.vh.default.conf.nginx
 ├── e2e
 │   ├── test.e2e-specs.ts
+│   ├── protractor.conf.js
 │   └── tsconfig.json
-├── resources - This folder contains resources by platform ios, android
-├── package.json - This file contains scripts to run and node packages dependencies for project
-├── metadata.yml - Component metadata
-├── release-manager.yml - Configuration file for the Release Manager
-├── sonar-project.properties - This file contains SonarQube configuration settings
 ├── src
 │   ├── app
+│   │   ├── home
+│   │   │   ├── home-routing.module.ts
+│   │   │   ├── home.module.ts
+│   │   │   ├── home.page.html
+│   │   │   ├── home.page.scss
+│   │   │   ├── home.page.spec.ts
+│   │   │   └── home.page.ts
+│   │   ├── app-routing.module.ts
+│   │   ├── app.component.html
+│   │   ├── app.component.scss
+│   │   ├── app.component.spec.ts
 │   │   ├── app.component.ts
-│   │   ├── app.html
-│   │   ├── app.module.ts
-│   │   ├── app.scss
-│   │   └── main.ts
+│   │   └── app.module.ts
 │   ├── assets
 │   ├── environments
-│   │   ├── environment.dev.ts
-|   |   |__ environment.e2e.ts
+│   │   ├── environment.prod.ts
 │   │   └── environment.ts
-│   ├── pages
-│   ├── providers
 │   ├── theme
+│   │   └── variables.scss
+│   ├── global.scss
 │   ├── index.html
-│   ├── manifest.json
+│   ├── main.ts
 │   ├── polyfills.ts
-│   ├── service-worker.js
 │   ├── test.ts
-│   └── tsconfig.spec.json
-├── www
-├── .angular-cli.json - This file contains Angular project configuration settings
-├── config.xml - This file contains config settings for your mobile app, like package name and native preferences
-├── .ionic.config.json - This file contains Ionic project configuration
+│   └── zone-flags.ts
+├── angular.json - This file contains Angular project configuration settings
+├── capacitor.config.xml - This file contains config settings for your mobile app, like package name and native preferences
+├── ionic.config.json - This file contains Ionic project configuration
+├── Jenkinsfile - This file contains Jenkins build configuration settings
 ├── karma.conf.js
-├── protractor.conf.js
+├── metadata.yml - Component metadata
+├── package.json - This file contains scripts to run and node packages dependencies for project
+├── README.md
+├── release-manager.yml - Configuration file for the Release Manager
+├── sonar-project.properties - This file contains SonarQube configuration settings
+├── tsconfig.app.json
 ├── tsconfig.json
-└── tslint.json
+└── tsconfig.spec.json
 ----
 
 == Frameworks used
 
 * https://ionicframework.com/docs/cli/[Ionic CLI]
 * https://ionicframework.com/docs/[Ionic Framework]
 * https://angular.io/[Angular]
-* http://www.typescriptlang.org/[Typescript]
+* https://www.typescriptlang.org/[TypeScript]
 
 == Usage - how do you start after you provisioned this quickstarter
 
 As pre-requisite you'll need to have installed:
 
 * https://nodejs.org/en/download/[node]
-* npm which is bundled with the node installation
+* *npm* which is bundled with the node installation
 * https://git-scm.com/downloads[git]
-* Ionic CLI globally in your local environment by running: `npm install -g @ionic/cli`
+* *Ionic CLI* globally in your local environment by running: `npm install -g @ionic/cli`
 
 Once you have you developer environment set up you can simply:
 
@@ -91,14 +95,13 @@ The following are typical xref:quickstarters:metadata.adoc[metadata] values that
 Note that the xref:jenkins-shared-library:labelling.adoc[OpenShift resources will be labeled] based on this metadata.
 
 ```yaml
-name: <the component id (this is the default, if omitted)>
-description: "My Ionic-based mobile app"
-supplier: https://example.com
-version: 1.0.1
+name: Ionic
+component: frontend
+instance: <the component id (this is the default, if omitted)>
+description: "Ionic Framework is the free, open source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single codebase. Technologies: Ionic 6.19.x"
+supplier: https://ionicframework.com
 type: ods
-role: frontend
-runtime: ionic
-runtimeVersion: 6.13.1
+version: 6.19.x
 ```
 
 == How this quickstarter is built thru Jenkins
@@ -107,10 +110,10 @@ The `Jenkinsfile` contains the configuration that customizes the core pipeline i
 
 When the code in your git repository is updated the `Jenkinsfile` comes into action with the following main stages for this quickstarter:
 
-* *Build* - Installs the dependencies of your project with `yarn install`, generates the build by running `npm run ionic:build`, if the merged git branch is master it creates the production build with `npm run ionic:build --prod`. Finally, it copies the output folder `www` into `docker/dist`.
-* *Unit Test* - Runs unit test cases by executing `yarn test` command. If any test fails, the build is marked as failed. This will also create test coverage analysis data which will then be transfered to SonarQube.
-* *Lint* - Profiler that ensures code best practices by running `npm run lint` command, if linting is not passing, the build is marked as failed also.
-* *SonarQube Analysis* - Triggers a code quality analysis by transfering code and test coverage analysis data to SonarQube. By default files like `*.spec.ts`, `*.modules.ts` and `src/environments/**` are excluded from the analysis, since they usually don't contain logic. Please revisit `sonar-project.properties` to configure analysis inclusions and exclusions according to your project's needs.
+Build:: Installs *Ionic CLI* and the dependencies of your project with `npm install` and generates the build by running `ionic build`. If the merged git branch is `master`, it creates the production build with `ionic build --prod`. Finally, it copies the output folder `./www` into `./docker/dist`.
+Unit Test:: Runs unit test cases by executing `npm run test` command. If any test fails, the build is marked as failed. This will also create test coverage analysis data which will then be transfered to SonarQube.
+Lint:: Profiler that ensures code best practices by running `npm run lint` command, if linting is not passing, the build is marked as failed also.
+SonarQube Analysis:: Triggers a code quality analysis by transfering code and test coverage analysis data to SonarQube. By default files like `*.spec.ts`, `*.modules.ts` and `./src/environments/**` are excluded from the analysis, since they usually don't contain application logic. Please revisit `sonar-project.properties` to configure analysis inclusions and exclusions according to your project's needs.
 
 == Builder agent used
 

fe-angular/init.sh

@@ -26,7 +26,7 @@ echo "add additional task parameters to package.json"
 sed -i "s|\"test\": \"ng test\"|\"test\": \"ng test --watch=false --code-coverage --reporters=junit,coverage\"|" ./package.json
 
 echo "add required plugins to package.json"
-sed -i "s|\"typescript\"|\"karma-junit-reporter\": \"^1.2.0\",\n    \"typescript\"|" ./package.json
+sed -i "s|\"typescript\"|\"karma-junit-reporter\": \"^2.0.1\",\n    \"typescript\"|" ./package.json
 
 echo "configure headless chrome in karma.conf.js"
 read -r -d "" CHROME_CONFIG << EOM || true
@@ -45,8 +45,7 @@ read -r -d "" CHROME_CONFIG << EOM || true
       },\\
     },
 EOM
-sed -i "s|\s*browsers: \['Chrome'\],|$CHROME_CONFIG|" ./karma.conf.js
-sed -i "s|\(browsers:\)|    \1|g" ./karma.conf.js
+sed -i "s|\s*browsers: \['Chrome'\],|    $CHROME_CONFIG|" ./karma.conf.js
 
 echo "configure required plugins in karma.conf.js"
 sed -i "/plugins: \[/a\     \ require('karma-junit-reporter')," ./karma.conf.js
@@ -57,7 +56,6 @@ read -r -d "" UNIT_XML_CONFIG << EOM || true
       outputDir: './build/test-results/test',\\
       outputFile: 'test-results.xml',\\
       useBrowserName: false,\\
-      xmlVersion: 1\\
     },\\
     reporters: \['progress', 'kjhtml'\],
 EOM
@@ -66,5 +64,5 @@ sed -i "s|\s*reporters: \['progress', 'kjhtml'\],|    $UNIT_XML_CONFIG|" ./karma
 echo "configure coverage reporter in karma.conf.js"
 sed -i "s|{ type: 'text-summary' }|{ type: 'lcovonly' },\n        { type: 'text-summary' }|" ./karma.conf.js
 
-echo "copy custom files from quickstart to generated project"
+echo "copy files from quickstart to generated project"
 cp -rv $SCRIPT_DIR/files/. .

fe-ionic/Jenkinsfile

@@ -14,16 +14,16 @@ node {
 
 library("ods-jenkins-shared-library@${sharedLibraryRef}")
 
-def ionicVersion = "6.13.1"
-def eslintVersion = "7.24.0"
+def ionicVersion = "6.19.0"
 
 odsQuickstarterPipeline(
   imageStreamTag: "${odsNamespace}/jenkins-agent-nodejs16:${agentImageTag}",
+  resourceRequestMemory: '1Gi',
+  resourceLimitMemory: '2Gi',
 ) { context ->
 
   stage("update ionic cli") {
     sh "npm install -g @ionic/cli@${ionicVersion} && ionic version"
-    sh "npm install -g eslint@${eslintVersion} && eslint -v"
   }
 
   stage("init ionic project") {

fe-ionic/Jenkinsfile.template

@@ -22,7 +22,7 @@ odsComponentPipeline(
 def stageBuild(def context) {
   stage('Build') {
     withEnv(["TAGVERSION=${context.tagversion}", "NEXUS_HOST=${context.nexusHost}"]) {
-      sh 'npm i -g @ionic/cli@6.13.1'
+      sh 'npm i -g @ionic/cli@6.19.0'
       sh 'npm install'
       if ('master'.equals(context.gitBranch)) {
         sh 'ionic build --prod'

fe-ionic/files/README.md

@@ -1,5 +1,5 @@
 # Ionic Quickstarter
-Quickstarter created with Ionic CLI 6.13.1
+Quickstarter created with Ionic CLI 6.19.0
 
 ## Running unit tests
 All files with the ending `.spec.ts` in the src folder will be tested with karma

fe-ionic/files/docker/Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.20.1-alpine
+FROM nginx:1.21.6-alpine
 
 RUN chmod -R 777 /var/log/nginx /var/cache/nginx /var/run \
      && chgrp -R 0 /etc/nginx \

fe-ionic/files/metadata.yml

@@ -1,6 +1,6 @@
 ---
 name: Ionic
-description: "Ionic Framework is the free, open source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single codebase. Technologies: Ionic 6.13.1"
+description: "Ionic Framework is the free, open source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single codebase. Technologies: Ionic 6.19.x"
 supplier: https://ionicframework.com
-version: 4.x
 type: ods
+version: 6.19.x

fe-ionic/init.sh

@@ -32,13 +32,13 @@ cd ../$COMPONENT
 # remove empty temp-dir
 rm -r ../start_$COMPONENT
 
-echo "Copy browsers list "
-cp  ../fe-ionic/.browserslistrc .browserslistrc
+echo "add additional task parameters to package.json"
+sed -i "s|\"test\": \"ng test\"|\"test\": \"ng test --watch=false --code-coverage --reporters=junit,coverage\"|" ./package.json
 
-echo "Change test setup to single run in karma.conf.js"
-sed -i "s|\s*singleRun: false|singleRun: true|" ./karma.conf.js
+echo "add required plugins to package.json"
+sed -i "s|\"typescript\"|\"karma-junit-reporter\": \"^2.0.1\",\n    \"typescript\"|" ./package.json
 
-echo "Configure headless chrome in karma.conf.js"
+echo "configure headless chrome in karma.conf.js"
 read -r -d "" CHROME_CONFIG << EOM || true
     browsers: \['ChromeNoSandboxHeadless'\],\\
     customLaunchers: {\\
@@ -55,35 +55,39 @@ read -r -d "" CHROME_CONFIG << EOM || true
       },\\
     },
 EOM
-sed -i "s|\s*browsers: \['Chrome'\],|$CHROME_CONFIG|" ./karma.conf.js
-sed -i "s|\(browsers:\)|    \1|g" ./karma.conf.js
+sed -i "s|\s*browsers: \['Chrome'\],|    $CHROME_CONFIG|" ./karma.conf.js
 
-echo "Add required plugins in karma.conf.js"
+echo "configure required plugins in karma.conf.js"
 sed -i "/plugins: \[/a\     \ require('karma-junit-reporter')," ./karma.conf.js
 
-echo "Configure junit xml reporter in karma.conf.js"
+echo "configure junit xml reporter in karma.conf.js"
 read -r -d "" UNIT_XML_CONFIG << EOM || true
-    reporters: \['progress', 'junit', 'kjhtml'\],\\
-\\
     junitReporter: {\\
       outputDir: './build/test-results/test',\\
       outputFile: 'test-results.xml',\\
-      useBrowserName: false\\
-    },
+      useBrowserName: false,\\
+    },\\
+    reporters: \['progress', 'kjhtml'\],
 EOM
-sed -i "s|\s*reporters: \['progress', 'kjhtml'\],|$UNIT_XML_CONFIG|" ./karma.conf.js
-
-echo "Fix path for coverage analysis output"
-sed -i "s|\s*__dirname, '\.\./coverage'|__dirname, 'coverage'|" ./karma.conf.js
-
-echo "Adjust package.json to have the full test"
-sed -i "s|\s*\"test\": \"ng test\"|\"test\": \"ng test --code-coverage --reporters=junit --progress=false\"|" ./package.json
-sed -i "s|\s*\"devDependencies\": {|\"devDependencies\": { \"karma-junit-reporter\": \"^2.0.1\",|" ./package.json
-
-echo "fix nexus repo path"
-repo_path=$(echo "$GROUP" | tr . /)
-sed -i.bak "s|org/opendevstack/projectId|$repo_path|g" $SCRIPT_DIR/files/docker/Dockerfile
-rm $SCRIPT_DIR/files/docker/Dockerfile.bak
+sed -i "s|\s*reporters: \['progress', 'kjhtml'\],|    $UNIT_XML_CONFIG|" ./karma.conf.js
+
+echo "configure coverage reporter in karma.conf.js"
+sed -i "s|{ type: 'text-summary' }|{ type: 'lcovonly' },\n        { type: 'text-summary' }|" ./karma.conf.js
+
+echo "configure headless chrome in protractor.conf.js"
+read -r -d "" PROTRACTOR_CHROME_CONFIG << EOM || true
+    browserName: 'chrome',\\
+    chromeOptions: {\\
+      args: \[\\
+        'headless',\\
+        'no-sandbox',\\
+        'disable-web-security',\\
+        '--disable-gpu',\\
+        '--window-size=1024,768'\\
+      \]\\
+    }
+EOM
+sed -i "s|\s*browserName: 'chrome'|    $PROTRACTOR_CHROME_CONFIG|" ./e2e/protractor.conf.js
 
 echo "copy files from quickstart to generated project"
 cp -rv $SCRIPT_DIR/files/. .

fe-ionic/ocp.env

@@ -1,4 +1,4 @@
-MEMORY_LIMIT=256Mi
-MEMORY_REQUEST=128Mi
+MEMORY_LIMIT=2Gi
+MEMORY_REQUEST=1Gi
 CPU_REQUEST=50m
 CPU_LIMIT=100m

fe-ionic/sonar-project.properties.template

@@ -17,5 +17,5 @@ sonar.coverage.exclusions=**/*.spec.ts,**/*.module.ts,src/environments/**
 sonar.exclusions=**/*.html,**/*.scss,**/*.json,**/*.ico,**/*.svg
 
 # Define coverage information inside the Angular project
-sonar.javascript.lcov.reportPaths=coverage/lcov.info
+sonar.javascript.lcov.reportPaths=coverage/ngv/lcov.info