Merge remote-tracking branch 'upstream/main' into main

Author: dixyushi

.github/workflows/syntaxCheckPullRequest.yml

@@ -4,9 +4,42 @@ on:
   pull_request_target:
     branches: [ main ]
 jobs:
-  build:
+  setup-matrix:
     runs-on: ubuntu-latest
+    env:
+      PR_NUMBER: ${{github.event.number}}
+      
+    steps:
+      - name: Checkout playbooks
+        uses: actions/checkout@v2
+      - name: Install node environment
+        uses: actions/setup-node@v2-beta
+      - name: npm install
+        run: npm install
+      - name: Select Changed Files
+        id: changedfiles
+        run: |
+          node selectChangedFiles.js
+      - name: Setup matrix combinations
+        id: setup-matrix-combinations
+        run: |
+          dirs=()
+          for changed_file in ${{ steps.changedfiles.outputs.changedFiles }}; do
+            dir="$(echo $changed_file | cut -d/ -f1)"
+            if [[ ! " ${dirs[@]} " =~ " ${dir} " ]]; then
+              MATRIX_PARAMS_COMBINATIONS=$MATRIX_PARAMS_COMBINATIONS'{"tutorial": "'$dir'"},'
+            fi
+            dirs+=($dir)
+          done
+          echo ::set-output name=matrix-combinations::{\"include\":[$MATRIX_PARAMS_COMBINATIONS]}
+    outputs:
+      matrix-combinations: ${{ steps.setup-matrix-combinations.outputs.matrix-combinations }}
 
+  build:
+    runs-on: ubuntu-latest
+    needs: setup-matrix
+    strategy:
+      matrix: ${{ fromJson(needs.setup-matrix.outputs.matrix-combinations) }}
     steps:
       - name: Checkout tutorial-compiler
         uses: actions/checkout@v2
@@ -28,19 +61,30 @@ jobs:
         run: npm install
 
       - name: run buildRun.sh --user ${{ github.actor }} --branch ${{ github.event.pull_request_target.head.ref }} --checkSyntax
-        run: sh buildRun.sh --user ${{ github.actor }} --branch ${{ github.event.pull_request_target.head.ref }} --checkSyntax -e katacoda
-
+        run: |
+          sh buildRun.sh --user ${{ github.actor }} --branch ${{ github.event.pull_request_target.head.ref }} --checkSyntax -p ${{ matrix.tutorial }} -e test_console
+      
+      - name: Check error file existence
+        id: check_files
+        uses: andstor/file-existence-action@v1
+        with:
+          files: "./build/errors/syntaxErrors.md"
+          
       - name: Get message
         id: get_message
+        if: steps.check_files.outputs.files_exists == 'true'
         run: |
           message=`cat ./build/errors/syntaxErrors.md`
-          echo ${message}
+          message="${message//'%'/'%25'}"
+          message="${message//$'\n'/'%0A'}"
+          message="${message//$'\r'/'%0D'}"
+          echo "${message}"
           echo "::set-output name=message::$message"
 
       - name: Request changes
         if:  ${{ steps.get_message.outputs.message != '' }}
         uses: andrewmusgrave/automatic-pull-request-review@0.0.2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          event: REQUEST_CHANGES
+          event: COMMENT
           body: ${{ steps.get_message.outputs.message }}

devon4ng-architecture/files/cloneProject.ps1

@@ -0,0 +1,2 @@
+cd devonfw/workspaces/main
+git clone https://github.com/devonfw/devon4ng-application-template.git

devon4ng-architecture/files/cloneProject.sh

@@ -0,0 +1,2 @@
+cd devonfw/workspaces/main
+git clone https://github.com/devonfw/devon4ng-application-template.git

devon4ng-architecture/files/core-shared-modules.md

@@ -0,0 +1 @@
+In the `CoreModule`, you can see services like `TranslocoRootModule` (translation service), `HttpRequestInterceptorService` (HTTP interceptor sesrvice) and Angular Material related modules being part of this core module. This core module is then imported into every other module as the services are used throughout the application.

devon4ng-architecture/files/core-shared-modules2.md

@@ -0,0 +1,3 @@
+In the `LayoutModule`, you can see components like `NavBar` and `Header` being part of this module. This module is comparable to a **shared** module which holds common components used throughout the application. The shared module is imported into other (feature) modules where the common components will be used.
+
+You can study in more detail about Angular architecture by following [this document](https://devonfw.com/website/pages/docs/master-devon4ng.asciidoc_architecture.html#meta-architecture.asciidoc_devonfw-reference-client-architecture).

devon4ng-architecture/files/layers-explained.md

@@ -0,0 +1,5 @@
+The applciation you see here is a clone of devon4ng-application-template. You can find it here [here](https://github.com/devonfw/devon4ng-application-template)
+
+The `SampleDataModule` is a nice exmple of the different layers explained. It holds some components (representing the *components* layer) and also has a `SampleDataService` (representing the *service* layer) which is imported in the required components.
+
+The service acts as the adapter element explained earlier (used to make XHR calls). 

devon4ng-architecture/files/layers.md

@@ -0,0 +1,7 @@
+The architecture describes two layers:
+
+* [Components Layer](https://devonfw.com/website/pages/docs/master-devon4ng.asciidoc_layers.html#components-layer.asciidoc) encapsulates components which present the current application state. Components are separated into [Smart and Dumb Components](https://devonfw.com/website/pages/docs/master-devon4ng.asciidoc_layers.html#components-layer.asciidoc_smart-and-dumb-components). The only logic present is view logic inside Smart Components.
+
+* [Services Layer](https://devonfw.com/website/pages/docs/master-devon4ng.asciidoc_layers.html#services-layer.asciidoc) is more or less what we call 'business logic layer' on the server side. The layer defines the applications state, the transitions between state and classic business logic. Stores contain application state over time to which Smart Components subscribe to. Adapters are used to perform XHRs, WebSocket connections, etc. The business model is described inside the module. Use case services perform business logic needed for use cases. A use case services interacts with the store and adapters. Methods of use case services are the API for Smart Components. Those methods are Actions in reactive terminology.
+
+Let us refer the application to understand the above concepts.

devon4ng-architecture/files/modules.md

@@ -0,0 +1,13 @@
+Every Angular application requires a module called app which is the main entrance to an application at runtime - this module gets bootstrapped. Angular Styleguide defines feature modules and two special modules - core and shared.
+
+* A **feature** module is basically a vertical cut through both layers.
+
+* The **shared** module consists of components shared across feature modules.
+
+* The **core** module holds services shared across modules.
+
+So core module is a module only having a services layer and shared module is a module only having a components layer.
+
+The `SampleDataModule` which we visitied earlier is a typical example of a **feature** module
+
+Let us refer the application again for examples on **core** module and **shared** module.

devon4ng-architecture/files/overview.md

@@ -0,0 +1,10 @@
+An Angular application is component based like [devon4j](https://github.com/devonfw/devon4j), but different terminology is used as compared to devon4j. Primarily the term used is **module** instead of **component**.
+To clarify this:
+
+* A **component** describes an UI element containing HTML, CSS and JavaScript - structure, design and logic encapsulated inside a reusable container called component.
+
+* A **module** describes an applications feature area. The application flight-app may have a module called booking.
+
+An application developed using Angular consists of multiple modules. There are feature modules and special modules - *core* and *shared*. Angular or Angular Styleguide give no guidance on how to structure a module internally. This is where this architecture comes in.
+
+We will refer a devon4ng application for better understanding. But before that, let us understand the Architectural Layers of a devon4ng application.