Add ability to specify ID for skill reporting event

Merge pull request #233 from NationalSecurityAgency/dependabot/npm_and_yarn/skills-client-js/axios-1.6.0
Bump axios from 0.27.2 to 1.6.0 in /skills-client-js
2026-11-12 13:10:46 -10:00 · 2023-12-15 13:35:08 -05:00 · 2023-12-14 08:09:56 -05:00 · 2023-12-13 12:41:41 -05:00 · 2023-12-13 10:10:36 -05:00 · 2023-12-08 15:21:40 -05:00
298 changed files with 15167 additions and 3357 deletions
@@ -0,0 +1,134 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Continuous Integration expired token tests
+
+on:
+  schedule:
+    - cron: '0 8 * * *'
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        # Docker Hub image
+        image: postgres
+        # Provide the password for postgres
+        env:
+          POSTGRES_PASSWORD: skillsPassword
+          POSTGRES_DB: skills
+        # Set health checks to wait until postgres has started
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          # Maps tcp port 5432 on service container to the host
+          - 5432:5432
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+    - uses: actions/checkout@v2
+
+    - uses: actions/setup-node@v2-beta
+      with:
+        node-version: '14'
+
+    - uses: actions/setup-java@v1
+      with:
+        java-version: '19' # The JDK version to make available on the path.
+
+    - name: Print Versions
+      run: |
+        mvn --version
+        java -version
+        npm -version
+        node --version
+
+    - name: Cache local Maven repository
+      uses: actions/cache@v2
+      with:
+        path: ~/.m2/repository
+        key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
+        restore-keys: |
+          ${{ runner.os }}-maven-
+
+    - name: Cache npm
+      uses: actions/cache@v2
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
+#    - name: build skill-service
+#      run: ./.github/workflows/scripts/getSkillsService.sh
+    - name: download skill-service
+      run: |
+        mkdir skills-service
+        cd skills-service
+        curl -s https://api.github.com/repos/NationalSecurityAgency/skills-service/releases/latest | grep browser_download_url | cut -d '"' -f 4 | wget -qi -
+        ls ./
+        cd ..
+
+    - name: setup npm links
+      run: ./.github/workflows/scripts/setupNpmLinks.sh
+
+    - name: build integration test apps
+      run: |
+        cd ./skills-client-integration
+        mvn --batch-mode clean install
+        cd ../
+
+    - name: start services for cypress tests
+      run: |
+        cd skills-client-integration/skills-int-e2e-test
+        npm install
+        npm run cyServices:start:skills-service:ci:expired-token
+        npm run cyServices:start:integration-apps
+        cd ../../
+
+#    - name: Run Cypress tests
+#      uses: cypress-io/github-action@v2
+#      with:
+#        working-directory: skills-client-integration/skills-int-e2e-test
+#        record: true
+#        parallel: false
+#        group: 'skills-client expired token tests'
+#        tag: "${{ github.workflow }}"
+#        spec: cypress/integration/timeout.specs.js
+#        env: 'timeout=true'
+#      env:
+#        # pass the Dashboard record key as an environment variable
+#        CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+#        # pass GitHub token to allow accurately detecting a build vs a re-run build
+#        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Run Cypress tests
+      run: |
+        cd skills-client-integration/skills-int-e2e-test
+        npm run cy:run:timeout
+        cd ../../
+
+    - name: upload result artifacts
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: result artifacts
+        path: |
+          ./skills-service/*.jar
+          ./skills-client-integration/skills-int-service/target/*.jar
+          ./skills-client-integration/skills-int-e2e-test/target/logs/*.out
+          ./skills-client-integration/skills-int-e2e-test/cypress/videos/*.mp4
+          ./skills-client-integration/skills-int-e2e-test/cypress/screenshots/**/*.png
+          ./skills-client-integration/skills-int-e2e-test/logs
+          ./skills-client-integration/skills-int-e2e-test/cypress/videos
+          ./skills-client-integration/skills-int-e2e-test/cypress/screenshots
+          ./skills-client-integration/skills-int-e2e-test/cypress/snapshots/**/**/__diff_output__/*.png
+          ./skills-client-integration/skills-int-e2e-test/cypress/snapshots/**/__diff_output__/*.png
@@ -0,0 +1,169 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Continuous Integration with OAuth
+
+on:
+  schedule:
+    - cron: '0 7 * * *'
+  workflow_dispatch:
+#on:
+#  push:
+#    paths-ignore:
+#      - 'README.md'
+#      - .github/workflows/skills-service-backward-compat.yml
+#      - .github/workflows/client-libs-backward-compat.yml
+#  pull_request:
+#    paths-ignore:
+#      - 'README.md'
+#      - .github/workflows/skills-service-backward-compat.yml
+#      - .github/workflows/client-libs-backward-compat.yml
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        # Docker Hub image
+        image: postgres
+        # Provide the password for postgres
+        env:
+          POSTGRES_PASSWORD: skillsPassword
+          POSTGRES_DB: skills
+        # Set health checks to wait until postgres has started
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          # Maps tcp port 5432 on service container to the host
+          - 5432:5432
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+    - uses: actions/checkout@v2
+
+    - uses: actions/setup-node@v2-beta
+      with:
+        node-version: '14'
+
+    - uses: actions/setup-java@v1
+      with:
+        java-version: '19' # The JDK version to make available on the path.
+
+    - name: Print Versions
+      run: |
+        mvn --version
+        java -version
+        npm -version
+        node --version
+
+    - name: Cache local Maven repository
+      uses: actions/cache@v2
+      with:
+        path: ~/.m2/repository
+        key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
+        restore-keys: |
+          ${{ runner.os }}-maven-
+
+    - name: Cache npm
+      uses: actions/cache@v2
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
+    - name: download skill-service
+      run: |
+        mkdir skills-service
+        cd skills-service
+        curl -s https://api.github.com/repos/NationalSecurityAgency/skills-service/releases/latest | grep browser_download_url | cut -d '"' -f 4 | wget -qi -
+        ls ./
+        cd ..
+
+    - name: setup npm links
+      run: ./.github/workflows/scripts/setupNpmLinks.sh
+
+    - name: build integration test apps
+      run: |
+        cd ./skills-client-integration
+        mvn --batch-mode clean install
+        cd ../
+
+    - name: run hyrda oauth service
+      run: ./.github/workflows/scripts/runHydra.sh
+
+    - name: Check running containers
+      run: docker ps -a
+
+    - name: Caputre Hydra Oauth Service logs
+      run: |
+        mkdir -p ./skills-client-integration/skills-int-e2e-test/target/logs
+        docker logs hydra > ./skills-client-integration/skills-int-e2e-test/target/logs/hydra.out &
+        docker container logs -f hydra_consent > ./skills-client-integration/skills-int-e2e-test/target/logs/hydra_consent.out &
+        docker container logs -f hydra_postgres > ./skills-client-integration/skills-int-e2e-test/target/logs/hydra_postgres.out &
+
+    - name: Register hydra client
+      run: |
+        cd skills-client-integration/skills-int-e2e-test/hydra
+        docker-compose -f quickstart.yml exec -T hydra \
+        	hydra clients create \
+            --endpoint http://localhost:4445/ \
+            --id skilltree-test \
+            --secret client-secret \
+            --grant-types authorization_code,refresh_token \
+            --response-types code \
+            --scope openid \
+            --callbacks http://localhost:8080/login/oauth2/code/hydra
+
+    - name: start services for OAuth cypress tests
+      run: |
+        cd skills-client-integration/skills-int-e2e-test
+        npm install
+        npm run cyServices:start:skills-service:ci:oauth
+        npm run cyServices:start:integration-apps:oauth
+        cd ../../
+
+#    - name: Run Cypress tests using OAuth
+#      uses: cypress-io/github-action@v2
+#      with:
+#        working-directory: skills-client-integration/skills-int-e2e-test
+#        record: true
+#        parallel: false
+#        group: 'skills-client oauth tests'
+#        tag: "${{ github.workflow }}"
+#        env: 'authMode=oauth'
+#      env:
+#        # pass the Dashboard record key as an environment variable
+#        CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+#        # pass GitHub token to allow accurately detecting a build vs a re-run build
+#        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Run Cypress tests
+      run: |
+        cd skills-client-integration/skills-int-e2e-test
+        npm run cy:run:oauth
+        cd ../../
+
+    - name: upload result artifacts
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: result artifacts
+        path: |
+          ./skills-service/*.jar
+          ./skills-client-integration/skills-int-service/target/*.jar
+          ./skills-client-integration/skills-int-e2e-test/target/logs/*.out
+          ./skills-client-integration/skills-int-e2e-test/cypress/videos/*.mp4
+          ./skills-client-integration/skills-int-e2e-test/cypress/screenshots/**/*.png
+          ./skills-client-integration/skills-int-e2e-test/logs
+          ./skills-client-integration/skills-int-e2e-test/cypress/videos
+          ./skills-client-integration/skills-int-e2e-test/cypress/screenshots
+          ./skills-client-integration/skills-int-e2e-test/cypress/snapshots/**/**/__diff_output__/*.png
+          ./skills-client-integration/skills-int-e2e-test/cypress/snapshots/**/__diff_output__/*.png
@@ -0,0 +1,128 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Continuous Integration
+
+on:
+  push:
+    paths-ignore:
+      - 'README.md'
+      - .github/workflows/skills-service-backward-compat.yml
+      - .github/workflows/client-libs-backward-compat.yml
+  pull_request:
+    paths-ignore:
+      - 'README.md'
+      - .github/workflows/skills-service-backward-compat.yml
+      - .github/workflows/client-libs-backward-compat.yml
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        # Docker Hub image
+        image: postgres
+        # Provide the password for postgres
+        env:
+          POSTGRES_PASSWORD: skillsPassword
+          POSTGRES_DB: skills
+        # Set health checks to wait until postgres has started
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          # Maps tcp port 5432 on service container to the host
+          - 5432:5432
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+    - uses: actions/checkout@v2
+
+    - uses: actions/setup-node@v2-beta
+      with:
+        node-version: '14'
+
+    - uses: actions/setup-java@v1
+      with:
+        java-version: '19' # The JDK version to make available on the path.
+
+    - name: Print Versions
+      run: |
+        mvn --version
+        java -version
+        npm -version
+        node --version
+
+    - name: Cache local Maven repository
+      uses: actions/cache@v2
+      with:
+        path: ~/.m2/repository
+        key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
+        restore-keys: |
+          ${{ runner.os }}-maven-
+
+    - name: Cache npm
+      uses: actions/cache@v2
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
+    - name: download skill-service
+      run: |
+        mkdir skills-service
+        cd skills-service
+        curl -s https://api.github.com/repos/NationalSecurityAgency/skills-service/releases/latest | grep browser_download_url | cut -d '"' -f 4 | wget -qi -
+        ls ./
+        cd ..
+
+    - name: setup npm links
+      run: ./.github/workflows/scripts/setupNpmLinks.sh
+
+    - name: build integration test apps
+      env:
+        MAVEN_OPTS: -Xmx2048m
+      run: |
+        cd ./skills-client-integration
+        mvn --batch-mode clean install
+        cd ../
+
+    - name: start services for cypress tests
+      run: |
+        cd skills-client-integration/skills-int-e2e-test
+        npm install
+        npm run cyServices:start:skills-service:ci
+        npm run cyServices:start:integration-apps
+        cd ../../
+
+
+    - name: Run Cypress tests
+      run: |
+        cd skills-client-integration/skills-int-e2e-test
+        npm run cy:run
+        cd ../../
+
+    - name: upload result artifacts
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: result artifacts
+        path: |
+          ./skills-service/*.jar
+          ./skills-client-integration/skills-int-service/target/*.jar
+          ./skills-client-integration/skills-int-e2e-test/target/logs/*.out
+          ./skills-client-integration/skills-int-e2e-test/cypress/videos/*.mp4
+          ./skills-client-integration/skills-int-e2e-test/cypress/screenshots/**/*.png
+          ./skills-client-integration/skills-int-e2e-test/logs
+          ./skills-client-integration/skills-int-e2e-test/cypress/videos
+          ./skills-client-integration/skills-int-e2e-test/cypress/screenshots
+          ./skills-client-integration/skills-int-e2e-test/cypress/snapshots/**/**/__diff_output__/*.png
+          ./skills-client-integration/skills-int-e2e-test/cypress/snapshots/**/__diff_output__/*.png
@@ -0,0 +1,114 @@
+# This is a basic workflow to help you get started with Actions
+
+name:  Client Libs Backward Compatibility
+
+#on:
+#  push:
+#    paths-ignore:
+#      - 'README.md'
+#  pull_request:
+#    paths-ignore:
+#      - 'README.md'
+on:
+  schedule:
+    - cron: '0 5 * * *'
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  test-client-libs-backward-compat:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        # Docker Hub image
+        image: postgres
+        # Provide the password for postgres
+        env:
+          POSTGRES_PASSWORD: skillsPassword
+          POSTGRES_DB: skills
+        # Set health checks to wait until postgres has started
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          # Maps tcp port 5432 on service container to the host
+          - 5432:5432
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+    - uses: actions/checkout@v2
+
+    - uses: actions/setup-node@v2-beta
+      with:
+        node-version: '14'
+
+    - uses: actions/setup-java@v1
+      with:
+        java-version: '19' # The JDK version to make available on the path.
+
+    - name: Print Versions
+      run: |
+        mvn --version
+        java -version
+        npm -version
+        node --version
+
+    - name: Cache local Maven repository
+      uses: actions/cache@v2
+      with:
+        path: ~/.m2/repository
+        key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
+        restore-keys: |
+          ${{ runner.os }}-maven-
+
+    - name: Cache npm
+      uses: actions/cache@v2
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
+    - name: Download Releases to Test
+      run: |
+        mkdir -p skills-service-versions
+        cd skills-service-versions
+        curl -s https://api.github.com/repos/NationalSecurityAgency/skills-service/releases | grep browser_download_url | cut -d '"' -f 4 | wget -qi -
+        ls ./
+        cd ../
+
+    - name: setup npm links
+      run: ./.github/workflows/scripts/setupNpmLinks.sh
+
+    - name: build integration test apps
+      run: |
+        cd ./skills-client-integration
+        mvn --batch-mode clean install
+        cd ../
+
+    - name: run backwards compat tests
+      run: |
+        cd skills-client-integration/skills-int-e2e-test
+        mvn --batch-mode clean package
+        export NO_COLOR=1
+        export CYPRESS_RECORD_KEY=${{ secrets.CYPRESS_RECORD_KEY }}
+        java -cp target/skills-int-e2e-test-*.jar -Dloader.main=skills.TestClientLibsBackwardsCompat org.springframework.boot.loader.launch.PropertiesLauncher -record -tag "${{ github.workflow }}" --minVersion "1.9.0"
+        cd ../../
+
+    - name: upload result artifacts
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: result artifacts
+        path: |
+          ./skills-client-integration/skills-int-e2e-test/target/logs/*
+          ./skills-client-integration/skills-int-e2e-test/target/skills-client/skills-client-integration/skills-int-e2e-test/cypress/videos/*.mp4
+          ./skills-client-integration/skills-int-e2e-test/target/skills-client/skills-client-integration/skills-int-e2e-test/cypress/screenshots/**/*.png
+          ./skills-client-integration/skills-int-e2e-test/cypress/videos/*.mp4
+          ./skills-client-integration/skills-int-e2e-test/cypress/screenshots/**/*.png
@@ -0,0 +1,66 @@
+# Copyright 2020 SkillTree
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#!/usr/bin/env bash
+
+echo "------- START: Build skills-service jar -------"
+# exit if a command returns non-zero exit code
+set -e
+#set -o pipefail
+
+BRANCH_NAME=$(git branch | grep \*)
+myGitBranch=${BRANCH_NAME:2}
+echo "My Git Branch: [${myGitBranch}]"
+
+if [[ "$myGitBranch" == *"HEAD detached at pull"* ]]; then
+  echo 'We are on a pull-request branch'
+  pullNumber=$(echo "$myGitBranch" | gawk -F'/' '{print $2}' | cat)
+  echo "Looking for branch associated with PR#${pullNumber}"
+  myGitBranch=$(curl -s https://api.github.com/repos/NationalSecurityAgency/skills-client/pulls/"${pullNumber}" | jq -r '.head.ref')
+  echo "Found new Git Branch: [${myGitBranch}]"
+
+  echo "Checkout skill-service code and build it."
+  git clone https://github.com/NationalSecurityAgency/skills-service.git
+  cd ./skills-service/
+
+  echo "Default branch to consider [${myGitBranch}]"
+  matchingBranch=`git branch -a | grep "remotes/origin/${myGitBranch}" | gawk -F'remotes/origin/' '{print $2}' | cat`
+  echo "Matching branch to consider [${matchingBranch}]"
+  if [[ "$myGitBranch" == *\.X ]] || [[ "$myGitBranch" == "master" ]] || [[ -z "$matchingBranch" ]]
+  then
+      echo 'Did not find a matching branch. Downloading latest skills-service release'
+      mkdir skills-service
+      cd skills-service
+      curl -s https://api.github.com/repos/NationalSecurityAgency/skills-service/releases/latest | grep browser_download_url | cut -d '"' -f 4 | wget -qi -
+      ls ./
+      cd ..
+  else
+      switchToBranch=$matchingBranch
+      echo "Found matching branch [${switchToBranch}]"
+
+      echo "Checking out [${switchToBranch}]"
+      git checkout ${switchToBranch} --
+
+      echo "git status:"
+      git status
+
+      export MAVEN_OPTS="-Xmx2048m"
+      mvn --batch-mode package -DskipTests
+      jar=$(ls ./service/target/*.jar)
+      mv $jar ./
+
+      cd ../
+  fi
+fi
+
+echo "------- DONE: Build skills-service jar -------"
@@ -21,12 +21,13 @@ cd skills-client-integration/skills-int-e2e-test
 npm install

 # start services and wait
-npm run backend:start:ci &
-npm run integration:start &
-npm run backend:waitToStart
-npm run integration:waitToStart
+npm run cyServices:start:skills-service:ci
+npm run cyServices:start:integration-apps

 # run tests
 npm run cy:run
+
+npm run cyServices:kill
 cd ../../
 echo "------- DONE: Run Cypress Tests -------"
+
@@ -0,0 +1,39 @@
+#!/bin/bash
+# exit if a command returns non-zero exit code
+set -e
+set -o pipefail
+
+DB=${DB:-postgres}
+TRACING=${TRACING:-false}
+PROMETHEUS=${PROMETHEUS:-false}
+echo "PWD: "
+echo $(pwd)
+cd ./skills-client-integration/skills-int-e2e-test/hydra
+DC="docker-compose -f quickstart.yml"
+if [[ $DB == "mysql" ]]; then
+    DC+=" -f quickstart-mysql.yml"
+fi
+if [[ $DB == "postgres" ]]; then
+    DC+=" -f quickstart-postgres.yml"
+fi
+if [[ $TRACING == true ]]; then
+    DC+=" -f quickstart-tracing.yml"
+fi
+if [[ $PROMETHEUS == true ]]; then
+    DC+=" -f quickstart-prometheus.yml"
+fi
+DC+=" up --build -d"
+
+$DC
+
+declare -r HOST="localhost:4445/clients"
+
+wait-for-url() {
+  echo "Waiting for hydra service $1 ..."
+  timeout -s TERM 45 bash -c \
+  'while [[ "$(curl -X GET -s -o /dev/null -w ''%{http_code}'' ${0})" != "200" ]];\
+  do echo "Waiting for ${0}" && sleep 2;\
+  done' ${1}
+  echo "OK!"
+}
+wait-for-url http://${HOST}
@@ -18,10 +18,10 @@ set -o pipefail

 echo "------- START: Setup npm links -------"
 cd skills-client-integration/skills-int-e2e-test
-mvn --batch-mode clean package
+mvn --batch-mode clean package -Dorg.slf4j.simpleLogger.log.org.apache.maven.cli.transfer.Slf4jMavenTransferListener=warn
 ls -la target/skills-int-e2e-test-*.jar
 du -sh target/*
 java --version
-java -cp target/skills-int-e2e-test-*.jar -Dloader.main=skills.SetupNpmLinks org.springframework.boot.loader.PropertiesLauncher
+java -cp target/skills-int-e2e-test-*.jar -Dloader.main=skills.SetupNpmLinks org.springframework.boot.loader.launch.PropertiesLauncher
 cd ../../
 echo "------- DONE: Setup npm links -------"
@@ -0,0 +1,110 @@
+# This is a basic workflow to help you get started with Actions
+
+name:  Skills-service Backward Compatibility
+
+#on:
+#  push:
+#    paths-ignore:
+#      - 'README.md'
+#  pull_request:
+#    paths-ignore:
+#      - 'README.md'
+on:
+  schedule:
+    - cron: '0 6 * * *'
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  test-skill-service-backward-compat:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        # Docker Hub image
+        image: postgres
+        # Provide the password for postgres
+        env:
+          POSTGRES_PASSWORD: skillsPassword
+          POSTGRES_DB: skills
+        # Set health checks to wait until postgres has started
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          # Maps tcp port 5432 on service container to the host
+          - 5432:5432
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+    - uses: actions/checkout@v2
+
+    - uses: actions/setup-node@v2-beta
+      with:
+        node-version: '14'
+
+    - uses: actions/setup-java@v3
+      with:
+        distribution: 'temurin'
+        java-version: |
+          11
+          19
+
+    - name: Print Versions
+      run: |
+        mvn --version
+        java -version
+        npm -version
+        node --version
+
+    - name: Cache local Maven repository
+      uses: actions/cache@v2
+      with:
+        path: ~/.m2/repository
+        key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
+        restore-keys: |
+          ${{ runner.os }}-maven-
+
+    - name: Cache npm
+      uses: actions/cache@v2
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
+#    - name: build skill-service
+#      run: ./.github/workflows/scripts/getSkillsService.sh
+    - name: download skill-service
+      run: |
+        mkdir skills-service
+        cd skills-service
+        curl -s https://api.github.com/repos/NationalSecurityAgency/skills-service/releases/latest | grep browser_download_url | cut -d '"' -f 4 | wget -qi -
+        ls ./
+        cd ..
+
+    - name: run backwards compat tests
+      run: |
+        cd skills-client-integration/skills-int-e2e-test
+        mvn --batch-mode clean package
+        export NO_COLOR=1
+        java -jar target/skills-int-e2e-test-*.jar
+        cd ../../
+
+    - name: upload result artifacts
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: result artifacts
+        path: |
+          ./skills-client-integration/skills-int-e2e-test/target/logs/*
+          ./skills-client-integration/skills-int-e2e-test/target/skills-client/skills-client-integration/skills-int-e2e-test/cypress/videos/*.mp4
+          ./skills-client-integration/skills-int-e2e-test/target/skills-client/skills-client-integration/skills-int-e2e-test/cypress/screenshots/**/*.png
+          ./skills-client-integration/skills-int-e2e-test/cypress/videos/*.mp4
+          ./skills-client-integration/skills-int-e2e-test/cypress/screenshots/**/*.png
+          /home/runner/.npm/_logs/*
@@ -6,3 +6,12 @@

 .history
 /target/
+/skills-client-integration/skills-int-e2e-test/logs/
+/skills-client-integration/skills-int-e2e-test/cypress/videos/
+/skills-client-integration/skills-int-e2e-test/nohup.out
+/skills-client-vue/package-lock.json
+/skills-client-react/package-lock.json
+/skills-client-js/package-lock.json
+/skills-client-ng/package-lock.json
+/skills-client-ng/dist/
+/skills-client-ng/projects/skilltree/skills-client-ng/src/version.js
@@ -1,82 +0,0 @@
-stages:
-  - build
-  - testCypress
-  - pushToNexus
-  - deploy
-
-build:
-  image: maven:3.6.0-jdk-11
-  stage: build
-  before_script:
-    - ./skills-client-integration/ci/setupNode.sh
-    - ./skills-client-integration/ci/setupRepos.sh
-  script:
-    - ./skills-client-integration/ci/getSkillsService.sh
-    - ./skills-client-integration/ci/setupNpmLinks.sh
-    - cd ./skills-client-integration
-    - mvn --batch-mode clean install
-    - cd ../
-  artifacts:
-    paths:
-      - ./skills-client-integration/skills-int-service/target/*.jar
-      - ./skills-client-integration/skills-int-service/target/*.log
-      - ./skills-client-integration/skills-int-e2e-test/target/*.jar
-      - ./skills-client-integration/skills-int-e2e-test/target/*.log
-      - ./skills-client-integration/target/*.log
-      - ./skills-service/*.jar
-
-testCypress:
-  image: olehsrh/cypress:1
-  stage: testCypress
-  before_script:
-    - ./skills-client-integration/ci/setupRepos.sh
-  script:
-    - ./skills-client-integration/ci/runCypressTests.sh
-  artifacts:
-    when: always
-    paths:
-      - ./skills-client-integration/skills-int-e2e-test/cypress/videos/*.mp4
-      - ./skills-client-integration/skills-int-e2e-test/cypress/screenshots/**/*.png
-    expire_in: 1 day
-
-pushToNexus:
-  image: maven:3.6.0-jdk-11
-  stage: pushToNexus
-  before_script:
-    - ./skills-client-integration/ci/setupRepos.sh
-  script:
-    - cd skills-client-integration/skills-int-service
-    - jar=$(ls ./target/skills-int-service-*.jar)
-    - echo $jar
-    - mvn --batch-mode deploy:deploy-file -DpomFile=./pom.xml -Dfile=${jar} -Durl=http://${NEXUS_SERVER}/repository/maven-snapshots/ -DrepositoryId=nexus-snapshots
-  artifacts:
-    paths:
-      - skills-client-integration/skills-int-service/target/skills-int-service-*.jar
-  only:
-    refs:
-      - branches
-    variables:
-      - $BRANCH_TO_DEPLOY_SKILLS_CLIENT == $CI_COMMIT_REF_NAME
-
-deploy:
-  image: alpine:latest
-  stage: deploy
-  before_script:
-    - apk --update --no-cache add sshpass openssh git
-  script:
-    - git clone https://${GITLAB_DEPLOY_USERNAME}:${GITLAB_DEPLOY_PASSWORD}@gitlab.evoforge.org/skills/skills-deploy.git
-    - TIMESTAMP=`date +%s`
-    - TMP_DIR="skills-int-service_${TIMESTAMP}"
-    - DEST_PATH="/home/${CI_USERNAME}/$TMP_DIR"
-    - sshpass -p $CI_PASSWORD ssh -o StrictHostKeyChecking=no -o PreferredAuthentications=password -o PubkeyAuthentication=no $CI_USERNAME@$CI_IP "rm -rf /home/${CI_USERNAME}/skills-int-service_* && mkdir -p ${DEST_PATH}"
-    - cp skills-client-integration/skills-int-service/target/skills-int-service-*.jar skills-int-service.jar
-    - sshpass -p $CI_PASSWORD scp -r skills-deploy ${CI_USERNAME}@${CI_IP}:${DEST_PATH}
-    - sshpass -p $CI_PASSWORD scp -r skills-int-service.jar ${CI_USERNAME}@${CI_IP}:${DEST_PATH}/skills-deploy/skills-client-integration/
-    - sshpass -p $CI_PASSWORD ssh -o StrictHostKeyChecking=no -o PreferredAuthentications=password -o PubkeyAuthentication=no $CI_USERNAME@$CI_IP "cd ${DEST_PATH}/skills-deploy/skills-client-integration && ./runDeploy.sh"
-  only:
-    refs:
-      - branches
-    variables:
-      - $BRANCH_TO_DEPLOY_SKILLS_CLIENT == $CI_COMMIT_REF_NAME
-
-
@@ -0,0 +1,12 @@
+
+## Legal
+
+Consistent with Section D.6. of the GitHub Terms of Service as of 2019, and Section 5. of the Apache License, Version 2.0, the project maintainer for this project accepts contributions using the inbound=outbound model.
+When you submit a pull request to this repository (inbound), you are agreeing to license your contribution under the same terms as specified in [LICENSE] (outbound).
+
+This is an open source project.
+Contributions you make to this public U.S. Government ("USG") repository are completely voluntary.
+When you submit an issue, bug report, question, enhancement, pull request, etc., you are offering your contribution without expectation of payment, you expressly waive any future pay claims against the USG related to your contribution, and you acknowledge that this does not create an obligation on the part of the USG of any kind.
+Furthermore, your contributing to this project does not create an employer-employee relationship between the United States ("U.S.") Government and the contributor.
+
+[LICENSE]: LICENSE.txt
@@ -0,0 +1,13 @@
+# Disclaimer of Warranty
+
+This Work is provided "AS IS."
+Any express or implied warranties, including but not limited to, the implied warranties of merchantability and fitness for a particular purpose are disclaimed.
+In no event shall the United States Government be liable for any direct, indirect, incidental, special, exemplary or consequential damages (including, but not limited to, procurement of substitute goods or services, loss of use, data or profits, or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise) arising in any way out of the use of this Work, even if advised of the possibility of such damage.
+
+The User of this Work agrees to hold harmless and indemnify the United States Government, its agents and employees from every claim or liability (whether in tort or in contract), including attorney's fees, court costs, and expenses, arising in direct consequence of Recipient's use of the item, including, but not limited to, claims or liabilities made for injury to or death of personnel of User or third parties, damage to or destruction of property of User or third parties, and infringement or other violations of intellectual property or technical data rights.
+
+# Disclaimer of Endorsement
+
+Nothing in this Work is intended to constitute an endorsement, explicit or implied, by the United States Government of any particular manufacturer's product or service.
+
+Reference herein to any specific commercial product, process, or service by trade name, trademark, manufacturer, or otherwise, in this Work does not constitute an endorsement, recommendation, or favoring by the United States Government and shall not be used for advertising or product endorsement purposes.
@@ -0,0 +1,19 @@
+## Licensing Intent
+
+The intent is that this software and documentation ("Project") should be treated
+as if it is licensed under the license associated with the Project ("License")
+in the LICENSE file. However, because we are part of the United States (U.S.)
+Federal Government, it is not that simple.
+
+The portions of this Project written by U.S. Federal Government employees within
+the scope of their federal employment are ineligible for copyright protection in
+the U.S.; this is generally understood to mean that these portions of the
+Project are placed in the public domain.
+
+In countries where copyright protection is available (which does not include the
+U.S.), contributions made by U.S. Federal Government employees are released
+under the License. Merged contributions from private contributors are released
+under the License.
+
+The SkillTree software is released under the Apache License, Version 2.0
+("Apache 2.0").
@@ -0,0 +1,23 @@
+# SkillTree Client Libraries
+
+SkillTree is an innovative approach to implementing application training. SkillTree skills-client project is an assembly of 
+client libraries that facilitate rapid integration with the SkillTree service. 
+
+To learn about the SkillTree platform please visit our [Official Documentation](https://code.nsa.gov/skills-docs/). 
+These pages provide in-depth guidance on the installation, usage and contribution.  
+
+## Workflow Status
+
+[![CI Badge](https://github.com/NationalSecurityAgency/skills-client/workflows/Continuous%20Integration/badge.svg)](https://github.com/NationalSecurityAgency/skills-client/actions?query=workflow%3A%22Continuous+Integration%22)
+
+[![Run integration tests using OAuth](https://github.com/NationalSecurityAgency/skills-client/workflows/Continuous%20Integration%20with%20OAuth/badge.svg)](https://github.com/NationalSecurityAgency/skills-client/actions?query=workflow%3A%22Continuous+Integration+with+OAuth%22)
+
+[![Run integration tests for expired tokens](https://github.com/NationalSecurityAgency/skills-client/workflows/Continuous%20Integration%20expired%20token%20tests/badge.svg)](https://github.com/NationalSecurityAgency/skills-client/actions?query=workflow%3A%22Continuous+Integration+expired+token+tests%22)
+
+[![Skills-service Backward Compatibility](https://github.com/NationalSecurityAgency/skills-client/workflows/Skills-service%20Backward%20Compatibility/badge.svg)](https://github.com/NationalSecurityAgency/skills-client/actions?query=workflow%3A%22Skills-service+Backward+Compatibility%22)
+
+[![Client Libs Backward Compatibility](https://github.com/NationalSecurityAgency/skills-client/workflows/Client%20Libs%20Backward%20Compatibility/badge.svg)](https://github.com/NationalSecurityAgency/skills-client/actions?query=workflow%3A%22Client+Libs+Backward+Compatibility%22)
+
+
+
+
@@ -1,2 +0,0 @@
-# skills-client
-
@@ -7,6 +7,7 @@ target
 skills-example-service/src/main/resources/public/native
 skills-example-service/src/main/resources/public/vuejs
 skills-example-service/src/main/resources/public/react
+skills-example-service/src/main/resources/public/angular

 .DS_Store
 node_modules
@@ -1,58 +0,0 @@
-# Copyright 2020 SkillTree
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#    https://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-#!/usr/bin/env bash
-
-echo "------- START: Build skills-service jar -------"
-# exit if a command returns non-zero exit code
-set -e
-#set -o pipefail
-
-apt-get install -y gawk
-
-myGitBranch=${CI_COMMIT_REF_NAME}
-echo "My Git Branch: [${myGitBranch}]"
-
-echo "Checkout skill-service code and build it."
-git clone https://${DEPLOY_TOKEN_SKILLS_SERVICE}:${DEPLOY_TOKEN_SKILLS_SERVICE_PASS}@gitlab.evoforge.org/skills/skills-service.git
-cd ./skills-service/
-
-switchToBranch=$BRANCH_TO_DEPLOY_SKILLS_SERVICE
-echo "Default branch to consider [${switchToBranch}]"
-matchingBranch=`git branch -a | grep "remotes/origin/${myGitBranch}" | gawk -F'remotes/origin/' '{print $2}' | cat`
-echo "Matching branch to consider [${matchingBranch}]"
-if [[ "$myGitBranch" == *\.X ]] || [[ "$myGitBranch" == "master" ]] || [[ -z "$matchingBranch" ]]
-then
-    echo "Building skill-service from configured [${switchToBranch}] branch"
-else
-    switchToBranch=$matchingBranch
-    echo "Found matching branch [${switchToBranch}]"
-fi
-
-if [[ -z "$switchToBranch" ]]
-then
-    exit -1
-fi
-
-echo "Checking out [${switchToBranch}]"
-git checkout ${switchToBranch} --
-
-echo "git status:"
-git status
-
-mvn --batch-mode package -DskipTests
-jar=$(ls ./backend/target/*.jar)
-mv $jar ./
-
-cd ../
-echo "------- DONE: Build skills-service jar -------"
@@ -1,24 +0,0 @@
-# Copyright 2020 SkillTree
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#    https://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-#!/usr/bin/env bash
-# exit if a command returns non-zero exit code
-set -e
-set -o pipefail
-echo "------- START: Setup Repos -------"
-echo "@skills:registry=http://$NEXUS_SERVER/repository/skills-registry/" > ~/.npmrc
-cat ~/.npmrc
-mkdir -p ~/.m2
-cat ./skills-client-integration/skills-int-e2e-test/serverConfigs/settings.xml | sed s/NEXUS_SERVER/$NEXUS_SERVER/ | sed s/NEXUS_PASS/$NEXUS_PASS/ > ~/.m2/settings.xml
-cat ~/.m2/settings.xml
-echo "------- DONE: Setup Repos -------"
@@ -2,7 +2,8 @@
  "ignore": [ ".git", "coverage", ".*/**", ".*", "*.iml", "babel.config.js",
    "rollup.config.js", "app/assets/**", "target/**", "pom.xml",
    "build/**", "**/robots.txt", "**.svg", "vue.config.js",
-    "cypress/videos/**", "**/*.jar", "**.xml", "src/license/*.properties"
+    "cypress/videos/**", "**/*.jar", "**.xml", "src/license/*.properties",
+    "nohup.out", "logs/*", "**.patch", "**.yml"
  ],
  "license": "../license-add/LICENSE-HEADER.txt",
  "licenseFormats": {
@@ -7,13 +7,13 @@
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
-        <version>2.1.6.RELEASE</version>
+        <version>3.2.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>skills</groupId>
    <artifactId>skills-client-integration</artifactId>
    <packaging>pom</packaging>
-    <version>2.0.0-SNAPSHOT</version>
+    <version>3.5.0-SNAPSHOT</version>

    <licenses>
        <license>
@@ -25,34 +25,15 @@

    <modules>
 	    <module>skills-int-client-js</module>
-        <module>skills-int-client-vue</module>
-        <module>skills-int-client-react</module>
        <module>skills-int-service</module>
        <module>skills-int-e2e-test</module>
    </modules>
    <properties>
        <!--suppress UnresolvedMavenProperty -->
        <nexusServer>${nexus.url}</nexusServer>
-        <node.version>v11.6.0</node.version>
+        <frontend-maven-plugin.version>1.10.3</frontend-maven-plugin.version>
+        <node.version>v14.15.0</node.version>
+        <java.version>19</java.version>
    </properties>

-    <distributionManagement>
-        <repository>
-            <id>nexus-releases</id>
-            <name>Release Repository</name>
-            <uniqueVersion>false</uniqueVersion>
-            <url>
-                ${nexusServer}/repository/maven-releases/
-            </url>
-        </repository>
-        <snapshotRepository>
-            <id>nexus-snapshots</id>
-            <name>Snapshot Repository</name>
-            <uniqueVersion>true</uniqueVersion>
-            <url>
-                ${nexusServer}/repository/maven-snapshots/
-            </url>
-        </snapshotRepository>
-    </distributionManagement>
-
 </project>
@@ -27,15 +27,19 @@ limitations under the License.
  <script type="text/javascript" src="./assets/js/js-beautify/js/lib/beautify.js"></script>
  <script type="text/javascript" src="./assets/js/bootstrap/dist/js/bootstrap.bundle.js"></script>

-  <script type="text/javascript" src="assets/js/@skills/skills-client-js/dist/skills-client-js.umd.min.js"></script>
+  <script type="text/javascript" src="assets/js/@skilltree/skills-client-js/dist/skills-client-js.umd.min.js"></script>

  <script type="text/javascript">
    const params = new URLSearchParams(window.location.search);
    const isSummaryOnly = params.get('isSummaryOnly') ? JSON.parse(params.get('isSummaryOnly')) : false;
+    const internalBackButton = params.get('internalBackButton') ? JSON.parse(params.get('internalBackButton')) : false;
+
+    let clientDisplay = null;

    const options = {
      autoScrollStrategy: 'top-of-page',
      isSummaryOnly,
+      internalBackButton,
    };
    const themes = {
      default: {
@@ -85,6 +89,16 @@ limitations under the License.
      window.location.search = params;
    };

+    const navigate = () => {
+      clientDisplay.navigate('/subjects/subj0');
+    }
+
+    const setInternalBackButton = () => {
+      const params = new URLSearchParams(window.location.search);
+      params.set('internalBackButton', !options.internalBackButton);
+      window.location.search = params;
+    }
+
    const getTheme = () => {
      const params = new URLSearchParams(window.location.search);
      let themeName = params.get('themeName') ? params.get('themeName') : 'Bright (default)';
@@ -98,6 +112,9 @@ limitations under the License.
      return version;
    };

+    const handleRouteChanged = (newPath) => {
+      document.querySelector('#skillsDisplayPath').innerHTML = `Skills Display Path: [${newPath}]`;
+    };
    axios.get("/api/config")
      .then((result) => {
        SkillsClient.SkillsConfiguration.configure(result.data);
@@ -116,10 +133,11 @@ limitations under the License.
          defaultThemeElement.classList.add('active');
        }

-        const clientDisplay = new SkillsClient.SkillsDisplayJS({
+        clientDisplay = new SkillsClient.SkillsDisplayJS({
          options,
          version: getVersion(),
          theme: theme.theme,
+          handleRouteChanged: handleRouteChanged,
        });
        clientDisplay.attachTo(document.querySelector('#skills-client-display'));
      };
@@ -143,10 +161,10 @@ limitations under the License.

        <ul class="navbar-nav flex-row mr-auto">
          <li class="nav-item pr-3">
-            <a class="nav-link" href="index.html">Report Skill Events</a>
+            <a class="nav-link" href="index.html" data-cy="reportSkillsLink">Report Skill Events</a>
          </li>
          <li class="nav-item active pr-3">
-            <a class="nav-link" href="javascript:void(0)">User Display</a>
+            <a class="nav-link" href="javascript:void(0)" data-cy="userDisplayLink">User Display</a>
          </li>
        </ul>
      </nav>
@@ -169,7 +187,17 @@ limitations under the License.
            <input type="checkbox" class="custom-control-input" id="displayTypeControl" onclick="setDisplayType()" checked>
            <label class="custom-control-label" for="displayTypeControl">Summary Only</label>
          </div>
+          <div class="d-inline custom-control custom-checkbox mx-2">
+            <input type="checkbox" class="custom-control-input" id="internalBackButtonControl" onclick="setInternalBackButton()" checked>
+            <label class="custom-control-label" for="internalBackButtonControl">Internal Back Button</label>
+          </div>

+          <button class="btn btn-outline-primary" type="button" data-cy="navigateButton" onclick="navigate()">
+            Navigate
+          </button>
+        </div>
+        <div>
+          <span id="skillsDisplayPath" data-cy="skillsDisplayPath"></span>
        </div>
        <div
          style="min-height: 860px">
@@ -192,4 +220,5 @@ limitations under the License.

 <script type="text/javascript">
  document.getElementById("displayTypeControl").checked = isSummaryOnly;
+  document.getElementById("internalBackButtonControl").checked = internalBackButton;
 </script>
@@ -0,0 +1,91 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Skills Examples - Native Javascript</title>
+
+  <link rel="stylesheet" type="text/css" href="./assets/app.css"/>
+  <link rel="stylesheet" type="text/css" href="./assets/js/bootstrap/dist/css/bootstrap.css">
+
+  <script type="text/javascript" src="./assets/js/jquery/dist/jquery.js"></script>
+  <script type="text/javascript" src="./assets/js/axios/dist/axios.min.js"></script>
+  <script type="text/javascript" src="./assets/js/js-beautify/js/lib/beautify.js"></script>
+  <script type="text/javascript" src="./assets/js/bootstrap/dist/js/bootstrap.bundle.js"></script>
+
+  <script type="text/javascript" src="assets/js/@skilltree/skills-client-js/dist/skills-client-js.umd.min.js"></script>
+
+  <script type="text/javascript">
+    axios.get("/api/config")
+      .then((result) => {
+        SkillsClient.SkillsConfiguration.configure(result.data);
+      });
+
+    SkillsClient.SkillsConfiguration.afterConfigure().then(() => {
+      const initializeSkillsDisplay = () => {
+        const clientDisplay = new SkillsClient.SkillsDisplayJS();
+        clientDisplay.attachTo(document.querySelector('#skills-client-display'));
+      };
+      if (document.readyState === "complete"
+        || document.readyState === "loaded"
+        || document.readyState === "interactive") {
+        initializeSkillsDisplay();
+      } else {
+        document.addEventListener("DOMContentLoaded", initializeSkillsDisplay);
+      }
+    });
+  </script>
+</head>
+<body>
+
+<div id="app">
+  <div>
+    <div>
+      <nav class="navbar navbar-dark bg-info">
+        <a href="#" class="navbar-brand">Native Javascript Integration Examples</a>
+
+        <ul class="navbar-nav flex-row mr-auto">
+          <li class="nav-item pr-3">
+            <a class="nav-link" href="index.html" data-cy="reportSkillsLink">Report Skill Events</a>
+          </li>
+          <li class="nav-item active pr-3">
+            <a class="nav-link" href="javascript:void(0)" data-cy="userDisplayLink">User Display</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+
+    <div class="container-fluid mt-3">
+      <div class="container">
+        <div
+          style="min-height: 860px">
+          <div id="skills-client-display" />
+        </div>
+      </div>
+    </div>
+
+    <footer class="text-muted bg-light py-5">
+      <div class="container">
+        <p>Native Javascript Examples Guide</p>
+        <p></p>
+      </div>
+    </footer>
+  </div>
+</div>
+
+</body>
+</html>
@@ -26,14 +26,18 @@ limitations under the License.
  <script type="text/javascript" src="./assets/js/js-beautify/js/lib/beautify.js"></script>

  <script type="module">
-    import { SkillsReporter, SkillsConfiguration } from './assets/js/@skills/skills-client-js/dist/skills-client-js.esm.min.js'
+    import { SkillsReporter, SkillsConfiguration, SkillsLevelJS, Logger } from './assets/js/@skilltree/skills-client-js/dist/skills-client-js.esm.min.js'

    axios.get("/api/config")
      .then((result) => {
        SkillsConfiguration.configure(result.data);
      });

-      SkillsReporter.addSuccessHandler((result) => {
+    SkillsReporter.addSuccessHandler((result) => {
+      document.querySelector('#global-event-result-container-js').innerHTML = JSON.stringify(result, null, 2);
+    });
+
+    SkillsReporter.addErrorHandler((result) => {
      document.querySelector('#global-event-result-container-js').innerHTML = JSON.stringify(result, null, 2);
    });

@@ -41,15 +45,30 @@ limitations under the License.
      SkillsReporter.reportSkill(skillId)
        .then((response) => {
          document.querySelector('#report-result-container').innerHTML = JSON.stringify(response, null, 2);
-        });
+        }).catch((err) => {
+          document.querySelector('#report-result-container').innerHTML = JSON.stringify(err, null, 2);
+      });
    };
-    document.querySelector('#exampleDirectiveClickEvent').addEventListener('click', () => { reportSkill('IronMan'); });
+
+    document.querySelector('#exampleDirectiveClickEvent').addEventListener('click', () => {
+      var skillId = document.getElementById('skillId').value;
+      reportSkill(skillId);
+    });

    const toggleAllEvents = () => {
      const notifyIfSkillNotApplied = document.querySelector('#all-events-check').checked
      SkillsReporter.configure( { notifyIfSkillNotApplied });
    }
    document.querySelector('#all-events-check').addEventListener('click', toggleAllEvents);
+    toggleAllEvents();
+    SkillsConfiguration.afterConfigure()
+      .then(() => {
+        if (window.Cypress) {
+          window.skillsLogger = Logger;
+        }
+        const skillLevel = new SkillsLevelJS();
+        skillLevel.attachTo('#skillLevel')
+      });
  </script>

 </head>
@@ -63,12 +82,15 @@ limitations under the License.

        <ul class="navbar-nav flex-row mr-auto">
          <li class="nav-item active pr-3">
-            <a class="nav-link" href="javascript:void(0)">Report Skill Events</a>
+            <a class="nav-link" href="javascript:void(0)" data-cy="reportSkillsLink">Report Skill Events</a>
          </li>
          <li class="nav-item pr-3">
-            <a class="nav-link" href="clientDisplay.html">User Display</a>
+            <a class="nav-link" href="clientDisplay.html" data-cy="userDisplayLink">User Display</a>
          </li>
        </ul>
+        <button type="button" class="btn btn-primary">
+          <span id="skillLevel"/>
+        </button>
      </nav>
    </div>

@@ -77,13 +99,13 @@ limitations under the License.
        <h2>Report Skills Examples</h2>
        <div class="text-primary">Global Event Result:</div>
        <div>
-          Include Skills Not Applied: <input type="checkbox" id="all-events-check">
+          Include Skills Not Applied: <input type="checkbox" id="all-events-check" checked>
        </div>
        <div id="globalEventResultDiv" class="border rounded p-3 mb-5 bg-light">
          <pre id="global-event-result-container-js" data-cy="globalEventResult"></pre>
        </div>
        <div>
-          <h5 class="text-info"><strong>Skills Directive - Click Event</strong></h5>
+          <h5 class="text-info"><strong>Report Any Skill</strong></h5>
          <div class="card card-body bg-light">
            <pre class="m-0 sample-code">
 <code class="javascript">SkillsReporter.reportSkill(this.skill)
@@ -93,11 +115,18 @@ limitations under the License.

          </div>
          <div class="card card-body mt-3">
+            <div class="text-primary">Skill Id:</div>
+            <div class="code-example">
+              <input class="form-control" id="skillId" type="text" value="IronMan" />
+            </div>
+            <div>
            <div id="exampleDirectiveClickEvent">
-              <button
-                class="btn btn-outline-primary">
-                Report Skill
-              </button>
+                <button
+                  data-cy="exampleDirectiveClickEventButton"
+                  class="btn btn-outline-primary">
+                  Report Skill
+                </button>
+              </div>
            </div>
            <hr>
            <div class="text-primary">Result:</div>
@@ -1,12 +1,12 @@
 {
    "name": "skills-int-client-js",
-    "version": "2.0.0",
+    "version": "3.5.0",
    "license": "Apache-2.0",
    "description": "SkillTree Client Lib Integration Tests - Native JS",
    "main": "index.js",
    "scripts": {
        "postinstall": "node copyDeps.js",
-        "serve": "npx live-server --no-browser --port=8092 --open=app --cors --proxy=/api:http://localhost:8090/api --proxy=/native:http://localhost:8092/app --proxy=/assets:http://localhost:8092/app/assets",
+        "serve": "npm install && npx live-server --no-browser --port=8092 --open=app --cors --proxy=/api:http://localhost:8090/api --proxy=/native:http://localhost:8092/app --proxy=/assets:http://localhost:8092/app/assets",
        "test": "npm run test",
        "licenseDepCheck": "license-checker --production --onlyAllow='MIT;ISC;Apache-2.0' --summary",
        "licenseHeaderCheck": "license-check-and-add check -f '../license-add/license-add-config.json'",
@@ -16,16 +16,16 @@
    },
    "author": "SkillTree Team",
    "dependencies": {
-        "@skills/skills-client-js": "2.0.0",
-        "axios": "^0.19.0",
-        "bootstrap": "4.3.1",
-        "jquery": "^3.4.1",
-        "js-beautify": "1.10.2"
+        "@skilltree/skills-client-js": "3.5.0",
+        "axios": "1.6.0",
+        "bootstrap": "4.5.2",
+        "jquery": "3.5.1",
+        "js-beautify": "1.13.0"
    },
    "devDependencies": {
-        "fs-extra": "^8.1.0",
-        "license-check-and-add": "^3.0.4",
-        "license-checker": "^25.0.1",
+        "fs-extra": "8.1.0",
+        "license-check-and-add": "3.0.4",
+        "license-checker": "25.0.1",
        "live-server": "1.2.1"
    }
 }
@@ -7,7 +7,7 @@
    <parent>
        <groupId>skills</groupId>
        <artifactId>skills-client-integration</artifactId>
-        <version>2.0.0-SNAPSHOT</version>
+        <version>3.5.0-SNAPSHOT</version>
    </parent>
    <artifactId>skills-int-client-js</artifactId>

@@ -21,7 +21,7 @@
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
-                <version>1.6</version>
+                <version>${frontend-maven-plugin.version}</version>
                <configuration>
                    <installDirectory>target</installDirectory>
                </configuration>
@@ -0,0 +1,18 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
@@ -0,0 +1,49 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+package-lock.json
+
+projects/skilltree/skills-client-ng/src/version.js
@@ -0,0 +1 @@
+package-lock=false
@@ -0,0 +1,42 @@
+<!---
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+ -->
+# SkillsIntClientNg
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
@@ -0,0 +1,129 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "skills-int-client-ng": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "allowedCommonJsDependencies": [
+              "axios",
+              "highlight.js",
+              "lodash/debounce",
+              "js-beautify"
+            ],
+            "preserveSymlinks": true,
+            "outputPath": "dist/skills-int-client-ng",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css",
+              "./node_modules/bootstrap/dist/css/bootstrap.css",
+              "./node_modules/highlight.js/styles/github.css"
+            ],
+            "scripts": [
+              "./node_modules/jquery/dist/jquery.min.js",
+              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "skills-int-client-ng:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "skills-int-client-ng:build:production"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "skills-int-client-ng:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "skills-int-client-ng:serve:production"
+            }
+          }
+        }
+      }
+    }},
+  "defaultProject": "skills-int-client-ng"
+}
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2020 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({
+      spec: {
+        displayStacktrace: StacktraceOption.PRETTY
+      }
+    }));
+  }
+};
@@ -0,0 +1,38 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('skills-int-client-ng app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});
@@ -0,0 +1,26 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl) as Promise<unknown>;
+  }
+
+  getTitleText(): Promise<string> {
+    return element(by.css('app-root .content span')).getText() as Promise<string>;
+  }
+}
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es2018",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2020 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/skills-int-client-ng'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
@@ -0,0 +1,13 @@
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
@@ -0,0 +1,23 @@
+{
+  "ignore": [ ".git", "coverage", ".*/**", ".*", "*.iml", "tsconfig.*", "skills.d.ts", "angular.json", "pom.xml"],
+  "license": "license-add/LICENSE-HEADER.txt",
+  "licenseFormats": {
+    "js": {
+      "prepend": "/*",
+      "append": " */",
+      "eachLine": {
+        "prepend": " * "
+      }
+    },
+    "dotfile": {
+      "eachLine": {
+        "prepend": "# "
+      }
+    },
+    "md": {
+      "prepend": "<!---",
+      "append": " -->"
+    }
+  },
+  "trailingWhitespace": "TRIM"
+}
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2020 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+module.exports = {
+  packages: {
+    '@skilltree/skills-client-ng':  {
+      ignorableDeepImportMatchers: [
+        /lodash\//
+      ]
+    },
+    'ngx-highlightjs':  {
+      ignorableDeepImportMatchers: [
+        /highlight/
+      ]
+    },
+  }
+};
@@ -0,0 +1,67 @@
+{
+    "name": "skills-int-client-ng",
+    "version": "3.6.0",
+    "license": "Apache-2.0",
+    "description": "SkillTree Client Lib - Angular",
+    "author": "SkillTree Team",
+    "scripts": {
+        "licenseDepCheck2": "license-checker --production --onlyAllow='MIT;ISC;Apache-2.0;0BSD' --summary",
+        "licenseDepCheck": "license-checker --production --onlyAllow='MIT;ISC;BSD-3-Clause;Apache-2.0;0BSD;CC-BY-4.0' --summary",
+        "licenseHeaderCheck": "license-check-and-add check -f '../license-add/license-add-config.json'",
+        "licenseHeaderAdd": "license-check-and-add add -f ../license-add/license-add-config.json",
+        "licenseCheck": "npm run licenseHeaderCheck && npm run licenseDepCheck ",
+        "ng": "ng",
+        "start": "ng serve --proxy-config proxy.conf.json",
+        "serve": "npm run start",
+        "build": "npm run licenseCheck && ng build --configuration production --deploy-url=/angular/",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "dependencies": {
+        "@angular/animations": "14.3.0",
+        "@angular/common": "14.3.0",
+        "@angular/compiler": "14.3.0",
+        "@angular/core": "14.3.0",
+        "@angular/forms": "14.3.0",
+        "@angular/platform-browser": "14.3.0",
+        "@angular/platform-browser-dynamic": "14.3.0",
+        "@angular/router": "14.3.0",
+        "@ng-bootstrap/ng-bootstrap": "13.0.0",
+        "@popperjs/core": "2.11.8",
+        "@skilltree/skills-client-ng": "3.6.0",
+        "@types/js-beautify": "1.11.0",
+        "axios": "1.6.0",
+        "bootstrap": "4.5.3",
+        "highlight.js": "11.3.1",
+        "jquery": "3.5.1",
+        "js-beautify": "1.13.0",
+        "ngx-highlightjs": "4.1.2",
+        "popper.js": "^1.16.1",
+        "rxjs": "6.6.3",
+        "tslib": "2.0.3",
+        "zone.js": "0.12.0"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "14.2.11",
+        "@angular/cli": "14.2.11",
+        "@angular/compiler-cli": "14.3.0",
+        "@types/jasmine": "3.6.0",
+        "@types/jasminewd2": "2.0.8",
+        "@types/node": "14.11.8",
+        "codelyzer": "6.0.1",
+        "jasmine-core": "3.6.0",
+        "jasmine-spec-reporter": "6.0.0",
+        "karma": "6.4.1",
+        "karma-chrome-launcher": "3.1.0",
+        "karma-coverage-istanbul-reporter": "3.0.3",
+        "karma-jasmine": "4.0.1",
+        "karma-jasmine-html-reporter": "1.5.4",
+        "license-check-and-add": "3.0.4",
+        "license-checker": "25.0.1",
+        "protractor": "7.0.0",
+        "ts-node": "9.0.0",
+        "tslint": "6.1.3",
+        "typescript": "4.6.2"
+    }
+}
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>skills</groupId>
+        <artifactId>skills-client-integration</artifactId>
+        <version>3.5.0-SNAPSHOT</version>
+    </parent>
+    <artifactId>skills-int-client-ng</artifactId>
+
+    <properties>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
+    </properties>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>com.github.eirslett</groupId>
+                <artifactId>frontend-maven-plugin</artifactId>
+                <version>${frontend-maven-plugin.version}</version>
+                <configuration>
+                    <installDirectory>target</installDirectory>
+                </configuration>
+                <executions>
+                    <execution>
+                        <id>install node and npm</id>
+                        <goals>
+                            <goal>install-node-and-npm</goal>
+                        </goals>
+                        <configuration>
+                            <nodeVersion>${node.version}</nodeVersion>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm install</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>generate-resources</phase>
+                        <configuration>
+                            <arguments>install</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm run build</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>run build</arguments>
+                        </configuration>
+                    </execution>
+
+                    <!--TODO: uncomment when we have at least 1 unit test-->
+                    <!--<execution>-->
+                    <!--<id>npm run test</id>-->
+                    <!--<goals>-->
+                    <!--<goal>npm</goal>-->
+                    <!--</goals>-->
+                    <!--<phase>test</phase>-->
+                    <!--<configuration>-->
+                    <!--<arguments>run unit</arguments>-->
+                    <!--</configuration>-->
+                    <!--</execution>-->
+                </executions>
+
+            </plugin>
+        </plugins>
+    </build>
+
+</project>
@@ -0,0 +1,7 @@
+{
+  "/api":
+  {
+      "target": "http://localhost:8090",
+      "secure": false
+  } 
+}
@@ -0,0 +1,39 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ReportSkillsComponent } from './components/report-skills/report-skills.component';
+import { SkillsDisplayComponent } from './components/skills-display/skills-display.component';
+
+
+const routes: Routes = [{
+  path: '',
+  redirectTo: 'reportSkills',
+  pathMatch: 'full'
+}, {
+  path: 'angular/reportSkills',
+  component: ReportSkillsComponent
+}, {
+  path: 'angular/showSkills',
+  component: SkillsDisplayComponent
+}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled'})],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
@@ -13,12 +13,3 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-package skills.backwardsCompat
-
-import groovy.transform.ToString
-
-@ToString(includeNames = true)
-class TestDeps {
-    String projName
-    List<Deps> runWithDeps
-}
@@ -0,0 +1,21 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div>
+  <app-navigation></app-navigation>
+  <div class="container-fluid mt-3">
+    <router-outlet></router-outlet>
+  </div>
+</div>
@@ -0,0 +1,50 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'skills-int-client-ng'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('skills-int-client-ng');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('skills-int-client-ng app is running!');
+  });
+});
@@ -0,0 +1,25 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'skills-int-client-ng';
+}
@@ -0,0 +1,72 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
+import { SkillsLevelModule, SkillsDisplayModule, SkilltreeModule } from '@skilltree/skills-client-ng'
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { NavigationComponent } from './components/navigation/navigation.component';
+import { CodeExampleLayoutComponent } from './components/report-skills/code-example/code-example-layout.component';
+import { ButtonCodeExampleComponent } from './components/report-skills/code-example/button-code-example.component';
+import { InputCodeExampleComponent } from './components/report-skills/code-example/input-code-example.component';
+import { AnySkillCodeExampleComponent } from './components/report-skills/code-example/anyskill-code-example.component';
+import { ExampleService } from './components/report-skills/code-example/example.service';
+import { ReportSkillsComponent } from './components/report-skills/report-skills.component';
+import { SkillsDisplayComponent } from './components/skills-display/skills-display.component';
+import { PlaceholderDirective } from './directives/placeholder.directive';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    ReportSkillsComponent,
+    NavigationComponent,
+    SkillsDisplayComponent,
+    CodeExampleLayoutComponent,
+    ButtonCodeExampleComponent,
+    AnySkillCodeExampleComponent,
+    InputCodeExampleComponent,
+    PlaceholderDirective
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    NgbModule,
+    FormsModule,
+    HighlightModule,
+    SkillsLevelModule,
+    SkilltreeModule,
+    SkillsDisplayModule,
+    RouterModule.forRoot([
+      { path: '', component: ReportSkillsComponent },
+    ])
+  ],
+  providers: [
+    ExampleService,
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        fullLibraryLoader: () => import('highlight.js'),
+      }
+    }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
@@ -13,13 +13,3 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-package skills.backwardsCompat
-
-import groovy.transform.ToString
-
-@ToString(includeNames = true)
-class Deps {
-    String uuid = UUID.randomUUID().toString()
-    List<Dep> deps
-    String projName
-}
@@ -0,0 +1,35 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div>
+  <div>
+    <nav class="navbar navbar-dark bg-info">
+      <a href="/angular/reportSkills" class="navbar-brand">Angular Integration Examples</a>
+
+      <ul class="navbar-nav flex-row mr-auto">
+        <li [routerLinkActive]="['active']" class="nav-item active pr-3">
+          <a class="nav-link" routerLink="/angular/reportSkills">Report Skill Events</a>
+        </li>
+        <li [routerLinkActive]="['active']" class="nav-item pr-3">
+          <a class="nav-link" routerLink="/angular/showSkills">User Display</a>
+        </li>
+      </ul>
+      <button type="button" class="btn btn-primary">
+        <span id="skillLevel"></span>
+        <skills-level></skills-level>
+      </button>
+    </nav>
+  </div>
+</div>
@@ -0,0 +1,40 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationComponent } from './navigation.component';
+
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavigationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,32 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.css']
+})
+export class NavigationComponent implements OnInit {
+
+  constructor(public route: ActivatedRoute) { 
+  }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
@@ -0,0 +1,22 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div data-cy="anySkillDropDown" ngbDropdown class="d-inline-block mx-2">
+  <button data-cy="anySkillDropDownButton" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>{{skillId}}</button>
+  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+    <button data-cy="anySkillDropDownItemButton" ngbDropdownItem *ngFor="let selectedSkill of available" (click)="setSelectedSkill(selectedSkill)">{{selectedSkill}}</button>
+  </div>
+</div>
+<button class="btn btn-outline-primary" [disabled]="!hasSelectedSkill()" (click)="reportSkill()">Report Skill</button>
@@ -0,0 +1,73 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import axios from 'axios';
+import { Example } from './example';
+import { SkillsReporter } from '@skilltree/skills-client-ng';
+
+@Component({
+  selector: 'app-anyskill-code-example',
+  templateUrl: './anyskill-code-example.component.html',
+  styleUrls: ['./anyskill-code-example.component.css']
+})
+export class AnySkillCodeExampleComponent implements OnInit {
+
+  @Input() example: Example
+  placeholder: string = 'Select a skill id';
+  skillId: string;
+  available: string[] = [''];
+
+  @Output() skillReportSuccess = new EventEmitter<string>();
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.skillId = this.placeholder;
+
+    axios.get("/api/skills")
+    .then((result) => {
+        this.available = result.data as string[];
+    });
+  }
+
+  hasSelectedSkill() {
+    return this.skillId && this.skillId !== this.placeholder;
+  }
+
+  setSelectedSkill(selectedSkill: string) {
+    this.skillId = selectedSkill;
+  }
+
+  reportSkill() {
+    SkillsReporter.reportSkill(this.skillId)
+        .then((res) => {
+          this.skillReportSuccess.emit(res);
+        })
+        .catch((res) => {
+          this.skillReportSuccess.emit(res);
+        });
+  }
+
+  getSampleCode() {
+    let sampleCode = `SkillsReporter.reportSkill(this.skill)
+    .then((res) => {
+        this.reportResult = res;
+    });`;
+    sampleCode = 'SkillsReporter.reportSkill(this.skill)\n  .then((res) => {\n    this.reportResult = res;\n  \});';
+    return sampleCode;
+  }
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
@@ -0,0 +1,16 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<button class="btn btn-outline-primary" [skilltree]="skillId" (skills-report-success)="onReporterResponse($event)" (skills-report-error)="onReporterResponse($event)" >Report Skill</button>
@@ -0,0 +1,50 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Example } from './example';
+
+@Component({
+  selector: 'app-button-code-example',
+  templateUrl: './button-code-example.component.html',
+  styleUrls: ['./button-code-example.component.css']
+})
+export class ButtonCodeExampleComponent implements OnInit {
+
+  @Input() example: Example
+  skillId: string
+
+  @Output() skillReportSuccess = new EventEmitter<string>();
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.skillId = this.example.skillId;
+  }
+
+  onReporterResponse(event) {
+    this.skillReportSuccess.emit(event.detail)
+  }
+
+  getSampleCode() {
+    let sampleCode = `<button \n [skilltree]="\'${this.example.skillId}\'" \n (skills-report-success)="onReporterResponse($event)"`;    
+    if (this.example.handleError) {
+      sampleCode += '\n (skills-report-error)="onReporterError($event)"';
+    }
+    sampleCode += '>\n  Report Skill\n</button>'
+    return sampleCode
+  }
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
@@ -0,0 +1,33 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div>
+  <h5 class="text-info"><strong>{{ title }}</strong></h5>
+  <div class="card card-body bg-light">
+      <pre><code [highlight]="sampleCode" [languages]="['html', 'javascript']"></code></pre>
+  </div>
+  <div class="card card-body mt-3" [id]="formatId(title)">
+      <div id="exampleDirectiveClickEvent">
+        <div class="code-example">
+          <ng-template appPlaceholder></ng-template>
+        </div>
+      </div>
+      <hr>
+      <div class="text-primary">Result:</div>
+      <div class="border rounded p-3 bg-light">
+        <pre>{{ reportResult }}</pre>
+      </div>
+  </div>
+</div>
@@ -0,0 +1,63 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component, OnInit, AfterViewInit, Input, ViewChild, ComponentFactoryResolver } from '@angular/core';
+import { PlaceholderDirective } from 'src/app/directives/placeholder.directive';
+import { Example } from './example';
+
+@Component({
+  selector: 'app-code-example-layout',
+  templateUrl: './code-example-layout.component.html',
+  styleUrls: ['./code-example-layout.component.css']
+})
+export class CodeExampleLayoutComponent implements OnInit, AfterViewInit {
+
+  @ViewChild(PlaceholderDirective) codeExampleHost: PlaceholderDirective;
+
+  @Input() example: Example;
+  skillId: string;
+  title: string;
+  sampleCode: string;
+  reportResult: string = "";
+  
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) { 
+  }
+
+  formatId(title: string) {
+    return title.replace(/ /gi,'').replace(/-/g,'');
+  }
+
+  ngOnInit(): void {
+    this.skillId = this.example.skillId;
+    this.title = this.example.title;
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.viewLoaded();
+    });
+  }
+
+  viewLoaded() {
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.example.component);
+    const viewContainerRef = this.codeExampleHost.viewContainerRef;
+    viewContainerRef.clear();
+    const componentRef = viewContainerRef.createComponent(componentFactory);
+    componentRef.instance.example = this.example;
+    this.sampleCode = componentRef.instance.getSampleCode();
+    componentRef.instance.skillReportSuccess.subscribe(val => this.reportResult = JSON.stringify(val, null, ' '));
+  }
+
+}
@@ -0,0 +1,57 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Injectable } from '@angular/core';
+
+import { Example } from './example'
+import { ButtonCodeExampleComponent } from './button-code-example.component';
+import { InputCodeExampleComponent } from './input-code-example.component';
+import { AnySkillCodeExampleComponent } from './anyskill-code-example.component';
+
+@Injectable()
+export class ExampleService {
+  getExamples() {
+    return [
+      new Example(
+        ButtonCodeExampleComponent,
+        'Skills Directive - Click Event',
+        'IronMan',
+      ),
+      new Example(
+        InputCodeExampleComponent,
+        'Skills Directive - Input Event',
+        'Thor',
+      ),
+      new Example(
+        ButtonCodeExampleComponent,
+        'Skills Directive - Error with Button',
+        'DoesNotExist',
+        true
+      ),
+      new Example(
+        InputCodeExampleComponent,
+        'Skills Directive - Error with Input',
+        'DoesNotExist',
+        true
+      ),
+      new Example(
+        AnySkillCodeExampleComponent,
+        'Pure JS - Report Any Skill',
+        '',
+        true
+      )
+    ];
+  }
+}
@@ -0,0 +1,25 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Type } from "@angular/core";
+
+export class Example {
+  constructor(
+    public component: Type<any>,
+    public title: string,
+    public skillId: string,
+    // public sampleCode: string,
+    public handleError: boolean = false) { }
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
@@ -0,0 +1,16 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<input class="form-control" type="text" [skilltree]="skillId" (skills-report-success)="onReporterResponse($event)" (skills-report-error)="onReporterResponse($event)"/>
@@ -0,0 +1,50 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Example } from './example';
+
+@Component({
+  selector: 'app-input-code-example',
+  templateUrl: './input-code-example.component.html',
+  styleUrls: ['./input-code-example.component.css']
+})
+export class InputCodeExampleComponent implements OnInit {
+
+  @Input() example: Example
+  skillId: string
+
+  @Output() skillReportSuccess = new EventEmitter<string>();
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.skillId = this.example.skillId;
+  }
+
+  onReporterResponse(event) {
+    this.skillReportSuccess.emit(event.detail)
+  }
+
+  getSampleCode() {
+    let sampleCode = `<input \n type="text" \n [skilltree]="\'${this.example.skillId}\'" \n (skills-report-success)="onReporterResponse($event)"`;
+    if (this.example.handleError) {
+      sampleCode += '\n (skills-report-error)="onReporterError($event)"';
+    }
+    sampleCode += ' />'
+    return sampleCode;
+  }
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
@@ -0,0 +1,35 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="container">
+  <h2>Report Skills Examples</h2>
+  <div class="text-primary">Global Event Result:</div>
+  <div id="globalEventResultDiv" class="border rounded p-3 bg-light">
+    <pre data-cy="globalEventResult">{{ globalEventResult }}</pre>
+  </div>
+
+  <div class="mt-5 mb-5" *ngFor="let example of examples">
+    <ng-template #examplesTarget></ng-template>
+  </div>
+</div>
+
+<footer class="text-muted bg-light py-5">
+  <div class="container">
+    <p class="float-right">
+      <a href="angular/reportSkills#">Back to top</a>
+    </p>
+    <p>Angular Examples Guide</p>
+  </div>
+</footer>
@@ -0,0 +1,40 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportSkillsComponent } from './report-skills.component';
+
+describe('ReportSkillsComponent', () => {
+  let component: ReportSkillsComponent;
+  let fixture: ComponentFixture<ReportSkillsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReportSkillsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportSkillsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,87 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import {
+  Component,
+  OnInit,
+  AfterViewInit,
+  OnDestroy,
+  ComponentFactoryResolver,
+  ViewChildren,
+  ViewContainerRef,
+  QueryList,
+  ChangeDetectorRef
+} from '@angular/core';
+import { Example } from './code-example/example'
+import { ExampleService } from './code-example/example.service';
+import { CodeExampleLayoutComponent } from './code-example/code-example-layout.component'
+import { SkillsReporter } from '@skilltree/skills-client-ng';
+
+@Component({
+  selector: 'app-report-skills',
+  templateUrl: './report-skills.component.html',
+  styleUrls: ['./report-skills.component.css']
+})
+export class ReportSkillsComponent implements OnInit, AfterViewInit, OnDestroy {
+
+  globalEventResult: string = ''
+  examples: Example[]
+  private loadedComponents = [];
+
+  @ViewChildren('examplesTarget', { read: ViewContainerRef }) exampleTargets: QueryList<ViewContainerRef>;
+
+  constructor(private exampleService: ExampleService, private componentFactoryResolver: ComponentFactoryResolver, private ref: ChangeDetectorRef) { }
+
+  ngOnInit() {
+    SkillsReporter.addSuccessHandler(result => {
+      this.globalEventResult = JSON.stringify(result, null, ' ')
+
+      // force change detection
+      this.ref.detectChanges();
+    });
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.viewLoaded();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.loadedComponents.forEach(component => component.destroy());
+  }
+
+  async viewLoaded() {
+    this.exampleTargets.changes.subscribe(() => {
+      this.loadExampleComponents();
+    });
+    await this.loadExamples();
+  }
+
+  async loadExamples() {
+    this.examples = this.exampleService.getExamples();
+  }
+
+  private loadExampleComponents() {
+    this.exampleTargets.toArray().forEach((viewContainerRef, i) => {
+      let example = this.examples[i];
+      let componentFactory = this.componentFactoryResolver.resolveComponentFactory(CodeExampleLayoutComponent);
+      let componentRef = viewContainerRef.createComponent(componentFactory);
+      componentRef.instance.example = example;
+      componentRef.changeDetectorRef.detectChanges();
+      this.loadedComponents.push(componentRef);
+    });
+  }
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
@@ -0,0 +1,65 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="container">
+  <div class="d-flex align-items-center mb-3">
+
+    <div ngbDropdown class="d-inline-block">
+      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Change Theme</button>
+      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+        <button ngbDropdownItem *ngFor="let themeItem of themes"
+          (click)="setIsThemeUrlParam(themeItem)">{{themeItem.name}}</button>
+      </div>
+    </div>
+
+    <div class="custom-control custom-switch d-inline-block ml-3 border-right pr-2">
+      <input type="checkbox" class="custom-control-input" id="customSwitch1" (click)="setIsSummaryOnlyUrlParam()"
+        [checked]="displayOptions.isSummaryOnly">
+      <label class="custom-control-label" for="customSwitch1">Summary Only</label>
+    </div>
+
+    <div class="custom-control custom-switch d-inline-block ml-3 border-right pr-2">
+      <input type="checkbox" class="custom-control-input" id="customSwitch2" (click)="setInternalBackButtonUrlParam()"
+             [checked]="displayOptions.internalBackButton">
+      <label class="custom-control-label" for="customSwitch2">Internal Back Button</label>
+    </div>
+
+    <button class="btn btn-outline-primary" id="navButton" data-cy="navigateButton" (click)="navigate()">Navigate</button>
+
+    <a href="javascript:void(0)" class="ml-2" (click)="scrollTo('sample-code')">Show Source</a>
+  </div>
+  <div>
+    <span id="skillsDisplayPath" data-cy="skillsDisplayPath">Skills Display Path: [{{ skillsDisplayRoutePath }}]</span>
+  </div>
+
+  <div class="border rounded">
+    <skills-display #skillsDisplay *ngIf="selectedTheme" [options]="displayOptions" [version]="version" [theme]="selectedTheme.theme" [handleRouteChanged]="skillsDisplayRouteChanged">
+    </skills-display>
+  </div>
+
+  <div [hidden]="!showSampleCode" id="sample-code" class="row">
+    <div class="col-12">
+      <div class="mb-5 mt-5 card bg-light">
+        <h5 class=" card-header text-info">
+          <strong>Sample Code</strong>
+        </h5>
+        <div class="card-body py-0">
+          <pre><code [highlight]="getSampleCode()" [languages]="['html', 'javascript']"></code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
@@ -0,0 +1,40 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SkillsDisplayComponent } from './skills-display.component';
+
+describe('SkillsDisplayComponent', () => {
+  let component: SkillsDisplayComponent;
+  let fixture: ComponentFixture<SkillsDisplayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SkillsDisplayComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SkillsDisplayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,120 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { themes } from './themes'
+import { ViewportScroller } from '@angular/common';
+import { js_beautify } from 'js-beautify'
+
+@Component({
+  selector: 'app-skills-display',
+  templateUrl: './skills-display.component.html',
+  styleUrls: ['./skills-display.component.css']
+})
+export class SkillsDisplayComponent implements OnInit {
+
+  @ViewChild('skillsDisplay')
+  skillsDisplay: any;
+
+
+  displayOptions: any;
+  version: number;
+  selectedTheme: any;
+  themes: Array<any> = themes;
+  showSampleCode: boolean = false;
+  skillsDisplayRoutePath: string = '/';
+
+  constructor(private route: ActivatedRoute, private router: Router, private viewportScroller: ViewportScroller) { }
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe(params => {
+      this.version = params['skillsVersion'] ? JSON.parse(params['skillsVersion']) : 1000;
+      this.displayOptions = {
+        autoScrollStrategy: 'top-of-page',
+        isSummaryOnly: params['isSummaryOnly'] ? JSON.parse(params['isSummaryOnly']) : false,
+        internalBackButton: params['internalBackButton'] ? JSON.parse(params['internalBackButton']) : false,
+      };
+      this.selectedTheme = params['themeName'] ? this.findTheme(params['themeName']) : this.themes[0];
+    });
+  }
+  navigate() {
+    this.skillsDisplay.navigate('/subjects/subj0')
+  }
+
+  findTheme(name: string) {
+    return this.themes.find((item) => item.name === name);
+  }
+
+  skillsDisplayRouteChanged = (newPath: string) => {
+    this.skillsDisplayRoutePath = newPath;
+  }
+
+  refreshPage() {
+    setTimeout(() => {
+      document.location.reload();
+    }, 250);
+  }
+
+  setIsThemeUrlParam(theme) {
+    this.router.navigate(['angular/showSkills'], { queryParams: { themeName: theme.name }, queryParamsHandling: 'merge' });
+    this.refreshPage();
+  }
+
+  setIsSummaryOnlyUrlParam() {
+    this.displayOptions.isSummaryOnly = !this.displayOptions.isSummaryOnly;
+    this.router.navigate(['angular/showSkills'], { queryParams: { isSummaryOnly: this.displayOptions.isSummaryOnly }, queryParamsHandling: 'merge' });
+    this.refreshPage();
+  }
+
+  setInternalBackButtonUrlParam() {
+    this.displayOptions.internalBackButton = !this.displayOptions.internalBackButton;
+    this.router.navigate(['angular/showSkills'], { queryParams: { internalBackButton: this.displayOptions.internalBackButton }, queryParamsHandling: 'merge' });
+    this.refreshPage();
+  }
+  scrollTo(elementId: string) {
+    this.showSampleCode = true;
+    setTimeout(() => {
+      this.viewportScroller.scrollToAnchor(elementId);
+    }, 250);
+  }
+
+  getSampleCode() {
+    let sampleCode = `
+<template>
+   <skills-level /> <!-- You can display the user's current Level using the SkillsLevel component -->
+   <skills-display :theme="selectedTheme" ${(this.displayOptions.isSummaryOnly || this.displayOptions.internalBackButton) ? ':options="displayOptions"' : ''}/>
+</template>
+
+<script>
+${js_beautify(`
+import { SkillsDisplay, SkillsLevel } from '@skilltree/skills-client-vue';
+
+export default {
+  components: {
+    SkillsDisplay,
+  },
+  data() {
+    return {${this.displayOptions.isSummaryOnly ? '\ndisplayOptions: { isSummaryOnly: true, },' : ''}
+      selectedTheme: ${JSON.stringify(this.selectedTheme, null, '  ')}
+    };
+  },
+};
+`)}
+</script>
+    `;
+    return sampleCode;
+  }
+}
@@ -0,0 +1,65 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/*
+ * Copyright 2020 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const themes : Array<any> = [
+  {
+    name: 'Bright (default)',
+    theme: {
+      backgroundColor: '#f7f7f7',
+    },
+  },
+  {
+    name: 'Dark Blue',
+    theme: {
+      backgroundColor: '#626d7d',
+      pageTitleTextColor: 'white',
+      textSecondaryColor: 'white',
+      textPrimaryColor: 'white',
+      stars: {
+        unearnedColor: '#787886',
+        earnedColor: 'gold',
+      },
+      progressIndicators: {
+        beforeTodayColor: '#3e4d44',
+        earnedTodayColor: '#667da4',
+        completeColor: '#59ad52',
+        incompleteColor: '#cdcdcd',
+      },
+      charts: {
+        axisLabelColor: 'white',
+      },
+      tiles: {
+        backgroundColor:'#152E4d',
+        watermarkIconColor: '#a6c5f7',
+      },
+      graphLegendBorderColor: '1px solid grey',
+    },
+  }
+];
@@ -0,0 +1,23 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { PlaceholderDirective } from './placeholder.directive';
+
+describe('PlaceholderDirective', () => {
+  it('should create an instance', () => {
+    const directive = new PlaceholderDirective();
+    expect(directive).toBeTruthy();
+  });
+});
@@ -0,0 +1,25 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[appPlaceholder]'
+})
+export class PlaceholderDirective {
+
+  constructor(public viewContainerRef: ViewContainerRef) { }
+
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
@@ -0,0 +1,18 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+export const environment = {
+  production: true
+};
@@ -0,0 +1,31 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
@@ -0,0 +1,28 @@
+<!--
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>SkillsIntClientNg</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
@@ -0,0 +1,37 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import axios from 'axios';
+import { SkillsConfiguration, Logger } from '@skilltree/skills-client-ng'
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+axios.get("/api/config")
+  .then((result) => {
+    SkillsConfiguration.configure(result.data);
+  })
+  .then(() => {
+    if ((<any> window).Cypress) {
+      (<any> window).skillsLogger = Logger;
+    }
+    platformBrowserDynamic().bootstrapModule(AppModule)
+      .catch(err => console.error(err));
+  })
@@ -0,0 +1,82 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+// import '@angular/localize/init';
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
@@ -0,0 +1,16 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/* You can add global styles to this file, and also import other style files */
@@ -0,0 +1,40 @@
+/*
+Copyright 2020 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": [ "node"]
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
@@ -0,0 +1,20 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  }
+}
@@ -0,0 +1,20 @@
+/*
+  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./e2e/tsconfig.json"
+    }
+]
+}
@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
@@ -0,0 +1,152 @@
+{
+  "extends": "tslint:recommended",
+  "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
+    "array-type": false,
+    "arrow-return-shorthand": true,
+    "curly": true,
+    "deprecation": {
+      "severity": "warning"
+    },
+    "component-class-suffix": true,
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "eofline": true,
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
+    "max-classes-per-file": false,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-empty": false,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-non-null-assertion": true,
+    "no-redundant-jsdoc": true,
+    "no-switch-case-fall-through": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
+    "typedef": [
+      true,
+      "call-signature"
+    ],
+    "typedef-whitespace": {
+      "options": [
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    },
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
+    "no-outputs-metadata-property": true,
+    "template-banana-in-box": true,
+    "template-no-negated-async": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true
+  },
+  "rulesDirectory": [
+    "codelyzer"
+  ]
+}
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    alias: {
+      'react': path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom'),
+    },
+  },
+};
@@ -1,32 +1,36 @@
 {
    "name": "skills-int-client-react",
-    "version": "2.0.0",
+    "version": "3.5.0",
    "license": "Apache-2.0",
    "description": "SkillTree Client Lib Integration Tests - React",
    "homepage": "/react/",
    "dependencies": {
-        "@skills/skills-client-react": "2.0.0",
-        "axios": "0.19.0",
-        "bootstrap": "4.3.1",
-        "core-js": "3.2.1",
-        "highlightjs": "9.12.0",
-        "js-beautify": "1.10.2",
-        "react": "16.11.0",
-        "react-bootstrap": "1.0.0-beta.14",
-        "react-dom": "16.11.0",
+        "@skilltree/skills-client-react": "3.5.0",
+        "axios": "1.6.0",
+        "bootstrap": "4.5.3",
+        "core-js": "3.6.5",
+        "highlightjs": "9.16.2",
+        "js-beautify": "1.13.0",
+        "prop-types": "15.7.2",
+        "react": "16.13.1",
+        "react-bootstrap": "1.3.0",
+        "react-dom": "16.13.1",
        "react-highlight": "0.12.0",
-        "react-router": "5.1.2",
-        "react-router-dom": "5.1.2"
+        "react-router": "5.2.0",
+        "react-router-dom": "5.2.0"
    },
    "scripts": {
-        "start": "PORT=8083 react-scripts start",
+        "serve": "PORT=8083 craco start",
+        "buildDepsAndServe": "cd ../../skills-client-js/ && npm run build && cd ../skills-client-react/ && npm run build && cd ../skills-client-integration/skills-int-client-react/ && npm run serve",
        "licenseDepCheck": "license-checker --production --onlyAllow='MIT;ISC;BSD-3;BSD-2-Clause;Apache-2.0' --summary",
        "licenseHeaderCheck": "license-check-and-add check -f '../license-add/license-add-config.json'",
        "licenseHeaderAdd": "license-check-and-add add -f ../license-add/license-add-config.json",
        "licenseCheck": "npm run licenseHeaderCheck && npm run licenseDepCheck ",
-        "build": "npm run licenseCheck && react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
+        "clean": "find  node_modules/ -maxdepth 1 ! -name \"@skilltree\" ! -name node_modules -exec rm -rf {} \\;",
+        "reinstall": "npm run clean && npm install",
+        "build": "npm run licenseCheck && craco build",
+        "test": "craco test",
+        "eject": "craco eject"
    },
    "eslintConfig": {
        "extends": "react-app"
@@ -44,8 +48,9 @@
        ]
    },
    "devDependencies": {
-        "license-check-and-add": "^3.0.4",
-        "license-checker": "^25.0.1",
-        "react-scripts": "3.2.0"
+        "license-check-and-add": "3.0.4",
+        "license-checker": "25.0.1",
+        "react-scripts": "4.0.3",
+        "@craco/craco": "6.4.0"
    }
 }
@@ -7,7 +7,7 @@
    <parent>
        <groupId>skills</groupId>
        <artifactId>skills-client-integration</artifactId>
-        <version>2.0.0-SNAPSHOT</version>
+        <version>3.5.0-SNAPSHOT</version>
    </parent>
    <artifactId>skills-int-client-react</artifactId>

@@ -21,7 +21,7 @@
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
-                <version>1.6</version>
+                <version>${frontend-maven-plugin.version}</version>
                <configuration>
                    <installDirectory>target</installDirectory>
                </configuration>
@@ -32,7 +32,7 @@
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
-                            <nodeVersion>${node.version}</nodeVersion>
+                            <nodeVersion>v12.6.0</nodeVersion>
                        </configuration>
                    </execution>
                    <execution>
@@ -20,14 +20,19 @@ import './index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-import { SkillsConfiguration } from '@skills/skills-client-react';
+import { SkillsConfiguration, Logger } from '@skilltree/skills-client-react';

 axios.get("/api/config")
  .then((result) => {
    SkillsConfiguration.configure(result.data);
  })
  .then(() => {
-    ReactDOM.render(<App />, document.getElementById('root'));
+    SkillsConfiguration.afterConfigure().then(() => {
+      if (window.Cypress) {
+        window.skillsLogger = Logger;
+      }
+      ReactDOM.render(<App />, document.getElementById('root'));
+    })
  });

 // If you want your app to work offline and load faster, you can change
@@ -17,7 +17,7 @@ import React from "react";
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from "react-bootstrap/Nav";
 import Button from "react-bootstrap/Button"
-import { SkillsLevel } from '@skills/skills-client-react';
+import { SkillsLevel } from '@skilltree/skills-client-react';

 import {
  NavLink
@@ -40,7 +40,7 @@ const Navigation = () => {
        <Navbar.Collapse id="nav-collapse" is-nav="true">
          <Nav>
            <NavLink activeClassName="router-link-active" className="nav-link" to="/">Report Skill Events</NavLink>
-            <NavLink activeClassName="router-link-active" className="nav-link" to="/showSkills">User Display</NavLink>
+            <NavLink activeClassName="router-link-active" className="nav-link" to="/showSkills?isSummaryOnly=false&internalBackButton=false&themeName=Bright%20(default)&skillsVersion=">User Display</NavLink>
          </Nav>
        </Navbar.Collapse>
          <Button variant="primary">
@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 import React from 'react';
-import { SkillsReporter } from '@skills/skills-client-react';
+import { SkillsReporter } from '@skilltree/skills-client-react';
 import axios from 'axios';

 const beautify = require('js-beautify').js;
@@ -30,7 +30,7 @@ const SampleCode = ({options, selectedTheme}) => {
 `,{indent_size: 4, indent_level: 2, end_with_newline: false, "html.format.contentUnformatted": "", "html.format.unformatted": ""});

        const js =  beautify(`
-import { SkillsDisplay } from '@skills/skills-client-react';
+import { SkillsDisplay } from '@skilltree/skills-client-react';
    const selectedThemeObj = ${JSON.stringify(selectedTheme)};
    const MyComponent = () => {
        return (
@@ -16,7 +16,7 @@
 import React from 'react';
 import SkillsDisplayThemeFactory from './ThemeFactory.js';
 import SampleCode from './SampleCode';
-import { SkillsDisplay } from '@skills/skills-client-react';
+import { SkillsDisplay } from '@skilltree/skills-client-react';
 import DropdownButton from "react-bootstrap/DropdownButton";
 import Dropdown from 'react-bootstrap/Dropdown';
 import Button from 'react-bootstrap/Button';
@@ -32,6 +32,10 @@ const findTheme = (name) => {

 const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);

+const handleRouteChanged = (newPath) => {
+    document.querySelector('#skillsDisplayPath').innerHTML = `Skills Display Path: [${newPath}]`;
+};
+
 function usePrevious(value){
    const ref = React.useRef();
    React.useEffect(() => {
@@ -63,6 +67,15 @@ const ShowSkill = () => {
        }
        return false;
    });
+
+    const [internalBackButton, setInternalBackButton] = React.useState(() => {
+        const urlInternalBackButton = getUrlParam('internalBackButton');
+        if ( urlInternalBackButton ) {
+            return JSON.parse(urlInternalBackButton)
+        }
+        return false;
+    });
+
    const [skillsVersion] = React.useState(() => {
        const skillsVersion = getUrlParam("skillsVersion");
        if(skillsVersion) {
@@ -71,9 +84,10 @@ const ShowSkill = () => {
        return '';
    });

-    const [options, setOptions] = React.useState({ isSummaryOnly: isSummaryOnly, autoScrollStrategy: 'top-offset', scrollTopOffset: 110 });
+    const [options, setOptions] = React.useState({ isSummaryOnly: isSummaryOnly, internalBackButton: internalBackButton, autoScrollStrategy: 'top-offset', scrollTopOffset: 134 });

    const previousIsSummaryOnly = usePrevious(isSummaryOnly);
+    const previousInternalBackButton = usePrevious(internalBackButton);
    const previousSelectedTheme = usePrevious(selectedTheme);
    const previousSkillsVersion = usePrevious(skillsVersion);

@@ -84,18 +98,23 @@ const ShowSkill = () => {
                params+=`${key}=${paramsObj[key]}&`;
            });
            params = params.replace(/&$/,'');
-            history.push({pathname:history.location.pathname, search: params});
+            history.replace({pathname:history.location.pathname, search: params});
        };

-        if (isSummaryOnly !== previousIsSummaryOnly || selectedTheme !== previousSelectedTheme) {
-            saveUrlParam({'isSummaryOnly': isSummaryOnly, 'themeName': selectedTheme.name, 'skillsVersion': skillsVersion});
+        if (isSummaryOnly !== previousIsSummaryOnly || internalBackButton !== previousInternalBackButton || selectedTheme !== previousSelectedTheme) {
+            saveUrlParam({'isSummaryOnly': isSummaryOnly, 'internalBackButton': internalBackButton, 'themeName': selectedTheme.name, 'skillsVersion': skillsVersion});
        }

-    }, [isSummaryOnly, selectedTheme, skillsVersion, previousIsSummaryOnly, previousSelectedTheme, previousSkillsVersion, history]);
+    }, [isSummaryOnly, internalBackButton, selectedTheme, skillsVersion, previousIsSummaryOnly, previousInternalBackButton, previousSelectedTheme, previousSkillsVersion, history]);

    const sampleCodeRef = React.createRef();
+    const skillsDisplayRef = React.createRef();
    const executeScroll = () => scrollToRef(sampleCodeRef);

+    const navigate = () => {
+        skillsDisplayRef.current.navigate('/subjects/subj0');
+    };
+
    const style = {
        paddingTop: '55px'
    };
@@ -121,12 +140,22 @@ const ShowSkill = () => {
                </DropdownButton>
                <Button variant={isSummaryOnly ? 'primary' : 'outline-primary'}
                        onClick={() => { setIsSummaryOnly(!isSummaryOnly);
-                        setOptions({isSummaryOnly:!isSummaryOnly,autoScrollStrategy: 'top-offset', scrollTopOffset: 110}) }}>Summary Only</Button>
+                        setOptions({isSummaryOnly:!isSummaryOnly,internalBackButton:internalBackButton,autoScrollStrategy: 'top-offset', scrollTopOffset: 134}) }}>Summary Only</Button>
+
+                <Button variant={internalBackButton ? 'primary' : 'outline-primary'}
+                        onClick={() => { setInternalBackButton(!internalBackButton);
+                            setOptions({isSummaryOnly:isSummaryOnly,internalBackButton:!internalBackButton,autoScrollStrategy: 'top-offset', scrollTopOffset: 134}) }}>Internal Back Button</Button>
+
+                <Button variant={internalBackButton ? 'primary' : 'outline-primary'}
+                        onClick={navigate} data-cy="navigateButton">Navigate</Button>
+
                <Button variant="link" onClick={executeScroll}>Show Source</Button>
            </div>
-
+            <div>
+                <span id="skillsDisplayPath" data-cy="skillsDisplayPath"></span>
+            </div>
            <div className="border rounded">
-                <SkillsDisplay options={options} theme={selectedTheme.theme} version={skillsVersion}/>
+                <SkillsDisplay ref={skillsDisplayRef} options={options} theme={selectedTheme.theme} version={skillsVersion} handleRouteChanged={handleRouteChanged}/>
            </div>

            <div ref={sampleCodeRef}>