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-07 14:06:36 -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
154 changed files with 6803 additions and 2065 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
@@ -25,6 +25,24 @@ jobs:
    # 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
@@ -36,13 +54,14 @@ jobs:

    - uses: actions/setup-java@v1
      with:
-        java-version: '11.X.X' # The JDK version to make available on the path.
+        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
@@ -60,8 +79,13 @@ jobs:
        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
@@ -106,20 +130,26 @@ jobs:
        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 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() }}
@@ -132,3 +162,8 @@ jobs:
          ./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
@@ -22,6 +22,24 @@ jobs:
    # 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
@@ -33,13 +51,14 @@ jobs:

    - uses: actions/setup-java@v1
      with:
-        java-version: '11.X.X' # The JDK version to make available on the path.
+        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
@@ -57,13 +76,20 @@ jobs:
        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
+      env:
+        MAVEN_OPTS: -Xmx2048m
      run: |
        cd ./skills-client-integration
        mvn --batch-mode clean install
@@ -77,19 +103,12 @@ jobs:
        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 tests'
-        tag: "${{ github.workflow }}"
-      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 }}
+      run: |
+        cd skills-client-integration/skills-int-e2e-test
+        npm run cy:run
+        cd ../../

    - name: upload result artifacts
      if: ${{ always() }}
@@ -102,3 +121,8 @@ jobs:
          ./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
@@ -21,6 +21,24 @@ jobs:
    # 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
@@ -32,13 +50,14 @@ jobs:

    - uses: actions/setup-java@v1
      with:
-        java-version: '13.X.X' # The JDK version to make available on the path.
+        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
@@ -79,7 +98,7 @@ jobs:
        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.PropertiesLauncher -record -tag "${{ github.workflow }}"
+        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
@@ -28,38 +28,39 @@ if [[ "$myGitBranch" == *"HEAD detached at pull"* ]]; then
  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 "Checkout skill-service code and build it."
-git clone https://github.com/NationalSecurityAgency/skills-service.git
-cd ./skills-service/
-
-switchToBranch="master"
-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 "Building skill-service from [master] 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 ./service/target/*.jar)
-mv $jar ./
-
-cd ../
 echo "------- DONE: Build skills-service jar -------"
@@ -22,6 +22,6 @@ mvn --batch-mode clean package -Dorg.slf4j.simpleLogger.log.org.apache.maven.cli
 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 -------"
@@ -21,6 +21,24 @@ jobs:
    # 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
@@ -30,15 +48,19 @@ jobs:
      with:
        node-version: '14'

-    - uses: actions/setup-java@v1
+    - uses: actions/setup-java@v3
      with:
-        java-version: '13.X.X' # The JDK version to make available on the path.
+        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
@@ -56,16 +78,22 @@ jobs:
        restore-keys: |
          ${{ runner.os }}-node-

-    - name: build skill-service
-      run: ./.github/workflows/scripts/getSkillsService.sh
+#    - 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
-        export CYPRESS_RECORD_KEY=${{ secrets.CYPRESS_RECORD_KEY }}
-        java -cp target/skills-int-e2e-test-*.jar -Dloader.main=skills.TestDashboardBackwardCompat org.springframework.boot.loader.PropertiesLauncher -record -tag "${{ github.workflow }}"
+        java -jar target/skills-int-e2e-test-*.jar
        cd ../../

    - name: upload result artifacts
@@ -79,3 +107,4 @@ jobs:
          ./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/*
@@ -12,6 +12,8 @@ These pages provide in-depth guidance on the installation, usage and contributio

 [![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)
@@ -3,7 +3,7 @@
    "rollup.config.js", "app/assets/**", "target/**", "pom.xml",
    "build/**", "**/robots.txt", "**.svg", "vue.config.js",
    "cypress/videos/**", "**/*.jar", "**.xml", "src/license/*.properties",
-    "nohup.out", "logs/*", "**.patch"
+    "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.3.4.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>3.1.1-SNAPSHOT</version>
+    <version>3.5.0-SNAPSHOT</version>

    <licenses>
        <license>
@@ -25,9 +25,6 @@

    <modules>
 	    <module>skills-int-client-js</module>
-        <module>skills-int-client-vue</module>
-        <module>skills-int-client-react</module>
-        <module>skills-int-client-ng</module>
        <module>skills-int-service</module>
        <module>skills-int-e2e-test</module>
    </modules>
@@ -36,25 +33,7 @@
        <nexusServer>${nexus.url}</nexusServer>
        <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>
@@ -32,10 +32,14 @@ limitations under the License.
  <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>
@@ -60,10 +60,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>
@@ -33,7 +33,11 @@ limitations under the License.
        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,16 +45,22 @@ 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) {
@@ -72,10 +82,10 @@ 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">
@@ -89,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)
@@ -105,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,6 +1,6 @@
 {
    "name": "skills-int-client-js",
-    "version": "3.1.1",
+    "version": "3.5.0",
    "license": "Apache-2.0",
    "description": "SkillTree Client Lib Integration Tests - Native JS",
    "main": "index.js",
@@ -16,16 +16,16 @@
    },
    "author": "SkillTree Team",
    "dependencies": {
-        "@skilltree/skills-client-js": "3.1.1",
-        "axios": "^0.21.1",
+        "@skilltree/skills-client-js": "3.5.0",
+        "axios": "1.6.0",
        "bootstrap": "4.5.2",
-        "jquery": "^3.5.1",
+        "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>3.1.1-SNAPSHOT</version>
+        <version>3.5.0-SNAPSHOT</version>
    </parent>
    <artifactId>skills-int-client-js</artifactId>

@@ -51,7 +51,6 @@
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
-              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
@@ -82,12 +81,6 @@
            }
          }
        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "skills-int-client-ng:build"
-          }
-        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
@@ -1,55 +1,58 @@
 {
    "name": "skills-int-client-ng",
-    "version": "3.1.1",
+    "version": "3.6.0",
    "license": "Apache-2.0",
    "description": "SkillTree Client Lib - Angular",
    "author": "SkillTree Team",
    "scripts": {
-        "licenseDepCheck": "license-checker --production --onlyAllow='MIT;ISC;BSD-3-Clause;Apache-2.0;0BSD' --summary",
+        "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 --prod --deploy-url=/angular/",
+        "build": "npm run licenseCheck && ng build --configuration production --deploy-url=/angular/",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "dependencies": {
-        "@angular/animations": "10.1.5",
-        "@angular/common": "10.1.5",
-        "@angular/compiler": "10.1.5",
-        "@angular/core": "10.1.5",
-        "@angular/forms": "10.1.5",
-        "@angular/localize": "10.1.5",
-        "@angular/platform-browser": "10.1.5",
-        "@angular/platform-browser-dynamic": "10.1.5",
-        "@angular/router": "10.0.14",
-        "@ng-bootstrap/ng-bootstrap": "7.0.0",
-        "@skilltree/skills-client-ng": "3.1.1",
+        "@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": "0.21.1",
+        "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.11.1"
+        "zone.js": "0.12.0"
    },
    "devDependencies": {
-        "@angular-devkit/build-angular": "0.1001.6",
-        "@angular/cli": "10.1.6",
-        "@angular/compiler-cli": "10.1.5",
-        "@types/jasmine": "3.5.14",
+        "@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": "5.2.3",
+        "karma": "6.4.1",
        "karma-chrome-launcher": "3.1.0",
        "karma-coverage-istanbul-reporter": "3.0.3",
        "karma-jasmine": "4.0.1",
@@ -59,6 +62,6 @@
        "protractor": "7.0.0",
        "ts-node": "9.0.0",
        "tslint": "6.1.3",
-        "typescript": "4.0.3"
+        "typescript": "4.6.2"
    }
-}
+}
@@ -7,7 +7,7 @@
    <parent>
        <groupId>skills</groupId>
        <artifactId>skills-client-integration</artifactId>
-        <version>3.1.1-SNAPSHOT</version>
+        <version>3.5.0-SNAPSHOT</version>
    </parent>
    <artifactId>skills-int-client-ng</artifactId>

@@ -18,7 +18,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { HighlightModule } from 'ngx-highlightjs';
+import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 import { SkillsLevelModule, SkillsDisplayModule, SkilltreeModule } from '@skilltree/skills-client-ng'

 import { AppComponent } from './app.component';
@@ -58,7 +58,15 @@ import { PlaceholderDirective } from './directives/placeholder.directive';
      { path: '', component: ReportSkillsComponent },
    ])
  ],
-  providers: [ExampleService],
+  providers: [
+    ExampleService,
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        fullLibraryLoader: () => import('highlight.js'),
+      }
+    }
+  ],
  bootstrap: [AppComponent]
 })
 export class AppModule { }
@@ -40,7 +40,7 @@ export class AnySkillCodeExampleComponent implements OnInit {

    axios.get("/api/skills")
    .then((result) => {
-        this.available = result.data;
+        this.available = result.data as string[];
    });
  }

@@ -66,8 +66,8 @@ export class AnySkillCodeExampleComponent implements OnInit {
    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
+    return sampleCode;
  }
 }
@@ -13,7 +13,17 @@ 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 } from '@angular/core';
+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'
@@ -32,11 +42,14 @@ export class ReportSkillsComponent implements OnInit, AfterViewInit, OnDestroy {

  @ViewChildren('examplesTarget', { read: ViewContainerRef }) exampleTargets: QueryList<ViewContainerRef>;

-  constructor(private exampleService: ExampleService, private componentFactoryResolver: ComponentFactoryResolver) { }
+  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();
    });
  }

@@ -30,11 +30,22 @@ limitations under the License.
      <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 *ngIf="selectedTheme" [options]="displayOptions" [version]="version" [theme]="selectedTheme.theme">
+    <skills-display #skillsDisplay *ngIf="selectedTheme" [options]="displayOptions" [version]="version" [theme]="selectedTheme.theme" [handleRouteChanged]="skillsDisplayRouteChanged">
    </skills-display>
  </div>

@@ -51,4 +62,4 @@ limitations under the License.
    </div>
  </div>

-</div>
+</div>
@@ -13,7 +13,7 @@ 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 { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { themes } from './themes'
 import { ViewportScroller } from '@angular/common';
@@ -26,11 +26,16 @@ import { js_beautify } from 'js-beautify'
 })
 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) { }

@@ -40,15 +45,23 @@ export class SkillsDisplayComponent implements OnInit {
      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();
@@ -66,6 +79,11 @@ export class SkillsDisplayComponent implements OnInit {
    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(() => {
@@ -77,7 +95,7 @@ export class SkillsDisplayComponent implements OnInit {
    let sampleCode = `
 <template>
   <skills-level /> <!-- You can display the user's current Level using the SkillsLevel component -->
-   <skills-display :theme="selectedTheme" ${this.displayOptions.isSummaryOnly ? ':options="displayOptions"' : ''}/>
+   <skills-display :theme="selectedTheme" ${(this.displayOptions.isSummaryOnly || this.displayOptions.internalBackButton) ? ':options="displayOptions"' : ''}/>
 </template>

 <script>
@@ -16,7 +16,7 @@ limitations under the License.
 /***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
-import '@angular/localize/init';
+// 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.
@@ -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,26 +1,26 @@
 {
    "name": "skills-int-client-react",
-    "version": "3.1.1",
+    "version": "3.5.0",
    "license": "Apache-2.0",
    "description": "SkillTree Client Lib Integration Tests - React",
    "homepage": "/react/",
    "dependencies": {
-        "@skilltree/skills-client-react": "3.1.1",
-        "axios": "0.21.1",
+        "@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.2.0",
-        "react-router-dom": "5.2.0",
-        "prop-types": "15.7.2"
+        "react-router-dom": "5.2.0"
    },
    "scripts": {
-        "serve": "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'",
@@ -28,9 +28,9 @@
        "licenseCheck": "npm run licenseHeaderCheck && npm run licenseDepCheck ",
        "clean": "find  node_modules/ -maxdepth 1 ! -name \"@skilltree\" ! -name node_modules -exec rm -rf {} \\;",
        "reinstall": "npm run clean && npm install",
-        "build": "npm run licenseCheck && react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
+        "build": "npm run licenseCheck && craco build",
+        "test": "craco test",
+        "eject": "craco eject"
    },
    "eslintConfig": {
        "extends": "react-app"
@@ -48,8 +48,9 @@
        ]
    },
    "devDependencies": {
-        "license-check-and-add": "^3.0.4",
-        "license-checker": "^25.0.1",
-        "react-scripts": "3.4.3"
+        "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>3.1.1-SNAPSHOT</version>
+        <version>3.5.0-SNAPSHOT</version>
    </parent>
    <artifactId>skills-int-client-react</artifactId>

@@ -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">
@@ -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}>
@@ -13,7 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-export default {
+const exported = {
  default: {
    name: 'Bright (default)',
    theme: {
@@ -47,4 +47,5 @@ export default {
      graphLegendBorderColor: '1px solid grey',
    },
  }
-}
+};
+export default exported;
@@ -0,0 +1 @@
+BROWSER=none
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/skills-int-client-react.iml
@@ -0,0 +1 @@
+package-lock=false
@@ -0,0 +1,83 @@
+<!---
+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 project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
@@ -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'),
+    },
+  },
+};
@@ -0,0 +1,56 @@
+{
+    "name": "skills-int-client-react17",
+    "version": "3.5.0",
+    "license": "Apache-2.0",
+    "description": "SkillTree Client Lib Integration Tests - React",
+    "homepage": "/react17/",
+    "dependencies": {
+        "@skilltree/skills-client-react": "3.5.0",
+        "axios": "1.6.0",
+        "bootstrap": "5.1.3",
+        "core-js": "3.6.5",
+        "highlightjs": "9.16.2",
+        "js-beautify": "1.14.0",
+        "prop-types": "15.7.2",
+        "react": "17.0.2",
+        "react-bootstrap": "2.0.0",
+        "react-dom": "17.0.2",
+        "react-highlight": "0.14.0",
+        "react-router": "5.2.1",
+        "react-router-dom": "5.3.0"
+    },
+    "scripts": {
+        "serve": "PORT=8084 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;0BSD;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 ",
+        "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"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "license-check-and-add": "3.0.4",
+        "license-checker": "25.0.1",
+        "react-scripts": "4.0.3",
+        "@craco/craco": "6.4.0"
+    }
+}
@@ -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-react17</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>v12.6.0</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,60 @@
+<!--
+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" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link rel="stylesheet" href="~highlight.js/styles/darcula.css">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
@@ -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.
+*/
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #09d3ac;
+}
@@ -0,0 +1,45 @@
+/*
+ * 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 React from 'react';
+import Navigation from "./skillsDisplay/Navigation";
+import './App.css';
+import {
+    HashRouter as Router,
+    Switch,
+    Route,
+} from "react-router-dom";
+import ShowSkills from "./skillsDisplay/ShowSkills";
+import ReportSkill from "./skillsDisplay/ReportSkill";
+
+export default function App() {
+  return (
+    <Router>
+      <div className="App">
+        <Navigation projectId="movies"/>
+      </div>
+      <Switch>
+        <Route exact path="/showSkills">
+          <ShowSkills/>
+        </Route>
+        <Route exact path="/">
+          <ReportSkill/>
+        </Route>
+          {/*<Route exact path="/reportSkillEvent">
+        </Route>*/}
+      </Switch>
+    </Router>
+  );
+}
@@ -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.
+*/
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
@@ -0,0 +1,41 @@
+/*
+ * 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 React from 'react';
+import ReactDOM from 'react-dom';
+import axios from 'axios';
+import './index.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+import { SkillsConfiguration, Logger } from '@skilltree/skills-client-react';
+
+axios.get("/api/config")
+  .then((result) => {
+    SkillsConfiguration.configure(result.data);
+  })
+  .then(() => {
+    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
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.96 159.93"><defs><style>.cls-1{fill:#09d3ac;}</style></defs><path class="cls-1" d="M141.35,73.27c0-6.89-8.11-13-20.58-16.73,3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63s8.12,13,20.59,16.72c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26C133.27,86.18,141.34,80.12,141.35,73.27ZM96.56,42.06c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM71.77,78.94c.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88c-2.71-.39-5.34-.88-7.84-1.46C69.86,84,70.75,81.5,71.77,78.94ZM69,59.9c2.53-.59,5.18-1.08,7.93-1.46-1,1.48-1.86,3-2.76,4.59s-1.69,3-2.46,4.52Q70.18,63.65,69,59.9Zm5.21,13.34q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55s2.88,5.22,4.12,7.83c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55S75.5,75.85,74.25,73.24Zm32.86-14.77c2.72.38,5.35.87,7.84,1.45-.74,2.47-1.62,5-2.64,7.55-.79-1.5-1.61-3-2.48-4.51S108,59.93,107.11,58.47Zm2.76,24.92q1.29-2.27,2.46-4.53c1,2.6,2,5.16,2.7,7.66-2.52.59-5.17,1.07-7.92,1.45Q108.52,85.75,109.87,83.39ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Zm-22.18-12A4.82,4.82,0,0,1,72.29,34a13.11,13.11,0,0,1,5.19,1.31,39.07,39.07,0,0,1,10,6.78l1.17,1.07a98.49,98.49,0,0,0-8.16,10,98.88,98.88,0,0,0-12.65,2.06c-.44-1.94-.8-3.84-1-5.67C65.8,42,67,36.24,69.81,34.6ZM64.53,85.26a58.75,58.75,0,0,1-5.54-2c-7.1-3-11.5-6.85-11.5-10.14S51.91,66,59,63.05a57.63,57.63,0,0,1,5.44-1.94A97.93,97.93,0,0,0,69,73.25,98.72,98.72,0,0,0,64.53,85.26Zm23,19.1c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm4.57-4.51c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm10.8-28.44c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14,98.1,98.1,0,0,0,4.49-12,58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14S132.17,80.42,125.07,83.37ZM92,82.39a9.18,9.18,0,1,0-9.17-9.19A9.17,9.17,0,0,0,92,82.39ZM31,17.88V128.53H153.07V17.88ZM148.3,123.77H35.78V22.65H148.3Zm-85-33.9c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26,12.41-3.72,20.48-9.78,20.49-16.63s-8.11-13-20.58-16.73c3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63S50.84,86.13,63.31,89.87Zm24.21,14.49c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm24.79-36.89c-.79-1.5-1.61-3-2.48-4.51s-1.8-3-2.72-4.49c2.72.38,5.35.87,7.84,1.45C114.21,62.39,113.33,64.92,112.31,67.47Zm2.72,19c-2.52.59-5.17,1.07-7.92,1.45q1.41-2.22,2.76-4.58t2.46-4.53C113.37,81.46,114.28,84,115,86.52Zm-5.21-13.35c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55s-2.87-5.22-4.12-7.83q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55S108.58,70.56,109.82,73.17ZM77,88c-2.71-.39-5.34-.88-7.84-1.46.74-2.46,1.63-5,2.65-7.55.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88ZM74.21,63c-.87,1.5-1.69,3-2.46,4.52Q70.18,63.65,69,59.9c2.53-.59,5.18-1.08,7.93-1.46C76,59.92,75.11,61.45,74.21,63ZM92.09,99.85c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm5.28-50.66a58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14s-4.41,7.16-11.51,10.11c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14A98.1,98.1,0,0,0,119.55,61.15Zm-23-19.09c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Line truncated
@@ -0,0 +1,150 @@
+/*
+ * 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 optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
@@ -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 proxy = require('http-proxy-middleware');
+module.exports = function(app) {
+  app.use(
+    '/api',
+    proxy({
+      target: 'http://localhost:8090',
+      changeOrigin: true,
+    })
+  );
+};
@@ -0,0 +1,54 @@
+/*
+ * 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 React from "react";
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from "react-bootstrap/Nav";
+import Button from "react-bootstrap/Button"
+import { SkillsLevel } from '@skilltree/skills-client-react';
+
+import {
+  NavLink
+} from "react-router-dom";
+
+const Navigation = () => {
+
+  const tmpStyle = {
+    position:'fixed',
+    zIndex:1100,
+    right:0,
+    left:0,
+  };
+
+  return (
+    <div style={tmpStyle}>
+      <Navbar bg="info" variant="dark">
+        <Navbar.Brand>React v17 Integration Examples</Navbar.Brand>
+        <Navbar.Toggle target="nav-collapse"></Navbar.Toggle>
+        <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?isSummaryOnly=false&internalBackButton=false&themeName=Bright%20(default)&skillsVersion=">User Display</NavLink>
+          </Nav>
+        </Navbar.Collapse>
+          <Button variant="primary">
+              <SkillsLevel />
+          </Button>
+      </Navbar>
+    </div>
+  );
+};
+
+export default Navigation;
@@ -0,0 +1,112 @@
+/*
+ * 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 React from 'react';
+import { SkillsReporter } from '@skilltree/skills-client-react';
+import axios from 'axios';
+
+const beautify = require('js-beautify').js;
+let selectedSkillId = '';
+
+const ReportSkill = () => {
+    const reportSkill = (skillId, resultContainer) => {
+        SkillsReporter.reportSkill(skillId)
+            .then((response) => {
+                document.querySelector(resultContainer).innerHTML = JSON.stringify(response, null, 2);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    };
+
+    const sampleCode = () => {
+        return beautify(`SkillsReporter.reportSkill(this.skill)
+              .then((res) => {
+                    this.reportResult = res;
+                });`, {indent_size: 2, indent_level: 1, end_with_newline: false})
+    };
+
+    const handleInputChange = (inputValue) => {
+        selectedSkillId = inputValue.target.value;
+    };
+
+    const [selectData, setSelectData] = React.useState([]);
+
+    React.useEffect(()=>{
+        axios.get("/api/skills")
+            .then((result) => {
+                setSelectData(result.data);
+                if (result.data && result.data.length > 0) {
+                    selectedSkillId = result.data[0];
+                }
+            });
+        SkillsReporter.addSuccessHandler((result) => {
+            document.querySelector('#global-event-result-container').innerHTML = JSON.stringify(result, null, 2);
+        });
+    }, []);
+
+    const style = {
+        paddingTop: '55px'
+    };
+
+    return (
+        <div className="container-fluid" style={style}>
+            <div className="container">
+                <h2>Report Skills Examples</h2>
+                <div className="text-primary">Global Event Result:</div>
+                <div id="globalEventResultDiv" className="border rounded p-3 mb-5 bg-light">
+                    <pre id="global-event-result-container" data-cy="globalEventResult"></pre>
+                </div>
+                <div>
+                    <h5 className="text-info"><strong>Report Any Skill</strong></h5>
+                    <div className="card card-body bg-light">
+                    <pre className="m-0 sample-code">
+                    <code className="javascript">{sampleCode()}</code></pre>
+
+                </div>
+                <div className="card card-body mt-3">
+                    <div id="exampleDirectiveClickEvent">
+                        <div className="float-left mr-3">
+                            <select onChange={(event) => handleInputChange(event)} className="custom-select custom-select-m mb-3">
+                                {selectData.map((skill)=>{
+                                    return <option key={skill} value={skill}>{skill}</option>
+                                })}
+                            </select>
+                        </div>
+                        <div className="float-left">
+                            <button
+                                    className="btn btn-outline-primary"
+                                    onClick={() => reportSkill(selectedSkillId, '#report-result-container')}>
+                                Report Skill
+                            </button>
+                        </div>
+                    </div>
+                    <hr />
+                    <div className="text-primary">Result:</div>
+                    <div className="border rounded p-3 bg-light">
+                        <pre id="report-result-container"></pre>
+                    </div>
+                </div>
+            </div>
+
+
+            <div className="mt-5"></div>
+
+        </div>
+</div>
+    )
+};
+
+export default ReportSkill;
@@ -0,0 +1,68 @@
+/*
+ * 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 React from 'react';
+import Highlight from 'react-highlight';
+import PropTypes from 'prop-types';
+
+const beautify = require('js-beautify').js;
+const beautifyHtml = require('js-beautify').html;
+
+const SampleCode = ({options, selectedTheme}) => {
+
+    const sampleCode = () => {
+        const tags = beautifyHtml(`
+         <div id="myApp">
+                <SkillsDisplay options="${JSON.stringify(options)}" theme={selectedThemeObj.theme} />
+            </div>
+`,{indent_size: 4, indent_level: 2, end_with_newline: false, "html.format.contentUnformatted": "", "html.format.unformatted": ""});
+
+        const js =  beautify(`
+import { SkillsDisplay } from '@skilltree/skills-client-react';
+    const selectedThemeObj = ${JSON.stringify(selectedTheme)};
+    const MyComponent = () => {
+        return (
+            placeholder
+        )
+    };`, {indent_size: 2, indent_level: 1, end_with_newline: false});
+
+        const replacedText = js.replace('placeholder', tags);
+        return replacedText;
+    };
+
+    return (
+    <div id="sample-code" className="row">
+        <div className="col-12">
+            <div className="mb-5 mt-5 card bg-light">
+                <h5 className=" card-header text-info">
+                    <strong>Sample Code</strong>
+                </h5>
+                <div className="card-body py-0">
+                    <Highlight className="javascript">
+                        <pre><code className="javascript p-0 m-0">{sampleCode()}</code></pre>
+                    </Highlight>
+                </div>
+            </div>
+        </div>
+    </div>
+    );
+};
+
+SampleCode.propTypes = {
+    options: PropTypes.object.isRequired,
+    selectedTheme: PropTypes.object.isRequired
+};
+
+export default React.memo(SampleCode);
@@ -0,0 +1,168 @@
+/*
+ * 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 React from 'react';
+import SkillsDisplayThemeFactory from './ThemeFactory.js';
+import SampleCode from './SampleCode';
+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';
+import { useHistory } from "react-router-dom";
+
+const getThemes = () => {
+    return Object.values(SkillsDisplayThemeFactory);
+};
+
+const findTheme = (name) => {
+    return getThemes().find((item) => item.name === 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(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+
+const ShowSkill = () => {
+    const history = useHistory();
+
+    const getUrlParam = (name) => {
+        const urlSearchParams = new URLSearchParams(history.location.search);
+        return urlSearchParams.get(name);
+    };
+
+    const [selectedTheme, saveSelectedTheme] = React.useState(() => {
+        const urlTheme = getUrlParam("themeName");
+        if(urlTheme) {
+         return findTheme(urlTheme);
+        }
+        return getThemes()[0];
+    });
+
+    const [isSummaryOnly, setIsSummaryOnly] = React.useState(() => {
+        const urlSummaryOnly = getUrlParam('isSummaryOnly');
+        if ( urlSummaryOnly ) {
+            return JSON.parse(urlSummaryOnly)
+        }
+        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) {
+            return skillsVersion;
+        }
+        return '';
+    });
+
+    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);
+
+    React.useEffect(() => {
+        const saveUrlParam = (paramsObj) => {
+            let params = '?';
+            Object.keys(paramsObj).forEach((key) =>{
+                params+=`${key}=${paramsObj[key]}&`;
+            });
+            params = params.replace(/&$/,'');
+            history.replace({pathname:history.location.pathname, search: params});
+        };
+
+        if (isSummaryOnly !== previousIsSummaryOnly || internalBackButton !== previousInternalBackButton || selectedTheme !== previousSelectedTheme) {
+            saveUrlParam({'isSummaryOnly': isSummaryOnly, 'internalBackButton': internalBackButton, 'themeName': selectedTheme.name, 'skillsVersion': skillsVersion});
+        }
+
+    }, [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'
+    };
+
+    return (
+        <div className="container" style={style}>
+            <div className="d-flex align-items-center">
+                <DropdownButton
+                    id="dropdown-1"
+                    className="mb-3"
+                    title="Theme"
+                    variant="Primary">
+
+                    { getThemes().map ( (theme) => {
+                        return <Dropdown.Item
+                        onClick={() => saveSelectedTheme(theme)}
+                        key={theme.name}
+                        eventKey={theme.name} {... (selectedTheme.name === theme.name ? {disabled:true} : "")}>
+                            {theme.name}
+                        </Dropdown.Item>
+                    })}
+
+                </DropdownButton>
+                <Button variant={isSummaryOnly ? 'primary' : 'outline-primary'}
+                        onClick={() => { setIsSummaryOnly(!isSummaryOnly);
+                        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 ref={skillsDisplayRef} options={options} theme={selectedTheme.theme} version={skillsVersion} handleRouteChanged={handleRouteChanged}/>
+            </div>
+
+            <div ref={sampleCodeRef}>
+                <SampleCode options={options} selectedTheme={selectedTheme}/>
+            </div>
+        </div>
+    );
+};
+
+export default ShowSkill;
@@ -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.
+ */
+const exportedObj = {
+  default: {
+    name: 'Bright (default)',
+    theme: {
+      backgroundColor: '#f7f7f7',
+    },
+  },
+  darkBlue: {
+    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',
+    },
+  }
+};
+export default exportedObj;
@@ -0,0 +1 @@
+BROWSER=none
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/skills-int-client-react.iml
@@ -0,0 +1 @@
+package-lock=false
@@ -0,0 +1,83 @@
+<!---
+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 project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
@@ -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'),
+    },
+  },
+};
@@ -0,0 +1,55 @@
+{
+    "name": "skills-int-client-react18",
+    "version": "3.5.0",
+    "license": "Apache-2.0",
+    "description": "SkillTree Client Lib Integration Tests - React",
+    "homepage": "/react18/",
+    "dependencies": {
+        "@skilltree/skills-client-react": "3.5.0",
+        "axios": "1.6.0",
+        "bootstrap": "5.1.3",
+        "core-js": "3.6.5",
+        "js-beautify": "1.14.0",
+        "prop-types": "15.7.2",
+        "react": "18.2.0",
+        "react-bootstrap": "2.5.0",
+        "react-dom": "18.2.0",
+        "react-highlight": "0.14.0",
+        "react-router": "6.3.0",
+        "react-router-dom": "6.3.0"
+    },
+    "scripts": {
+        "serve": "PORT=8085 craco start",
+        "buildDepsAndServe": "cd ../../skills-client-js/ && npm run build && cd ../skills-client-react/ && npm run build && cd ../skills-client-integration/skills-int-client-react18/ && npm run serve",
+        "licenseDepCheck": "license-checker --production --onlyAllow='MIT;ISC;0BSD;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 ",
+        "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"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "license-check-and-add": "3.0.4",
+        "license-checker": "25.0.1",
+        "react-scripts": "4.0.3",
+        "@craco/craco": "6.4.5"
+    }
+}
@@ -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-react18</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>v12.6.0</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,60 @@
+<!--
+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" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link rel="stylesheet" href="~highlight.js/styles/darcula.css">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
@@ -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.
+*/
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #09d3ac;
+}
@@ -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 React from 'react';
+import Navigation from "./skillsDisplay/Navigation";
+import './App.css';
+import {
+    HashRouter as Router,
+    Routes,
+    Route,
+} from "react-router-dom";
+import ShowSkills from "./skillsDisplay/ShowSkills";
+import ReportSkill from "./skillsDisplay/ReportSkill";
+
+export default function App() {
+  return (
+    <Router>
+      <div className="App">
+        <Navigation projectId="movies"/>
+      </div>
+      <Routes>
+        <Route path="/showSkills" element={<ShowSkills/>} />
+        <Route path="/" element={<ReportSkill/>} />
+      </Routes>
+    </Router>
+  );
+}
@@ -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.
+*/
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
@@ -0,0 +1,41 @@
+/*
+ * 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 React from 'react';
+import { createRoot } from 'react-dom/client';
+import axios from 'axios';
+import './index.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import App from './App';
+// import * as serviceWorker from './serviceWorker';
+import { SkillsConfiguration, Logger } from '@skilltree/skills-client-react';
+
+SkillsConfiguration.afterConfigure().then(() => {
+  if (window.Cypress) {
+    window.skillsLogger = Logger;
+  }
+  const container = document.getElementById('root');
+  const root = createRoot(container); // createRoot(container!) if you use TypeScript
+  root.render(<App />);
+})
+axios.get("/api/config")
+  .then((result) => {
+    SkillsConfiguration.configure(result.data);
+  })
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+// serviceWorker.unregister();
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.96 159.93"><defs><style>.cls-1{fill:#09d3ac;}</style></defs><path class="cls-1" d="M141.35,73.27c0-6.89-8.11-13-20.58-16.73,3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63s8.12,13,20.59,16.72c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26C133.27,86.18,141.34,80.12,141.35,73.27ZM96.56,42.06c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM71.77,78.94c.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88c-2.71-.39-5.34-.88-7.84-1.46C69.86,84,70.75,81.5,71.77,78.94ZM69,59.9c2.53-.59,5.18-1.08,7.93-1.46-1,1.48-1.86,3-2.76,4.59s-1.69,3-2.46,4.52Q70.18,63.65,69,59.9Zm5.21,13.34q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55s2.88,5.22,4.12,7.83c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55S75.5,75.85,74.25,73.24Zm32.86-14.77c2.72.38,5.35.87,7.84,1.45-.74,2.47-1.62,5-2.64,7.55-.79-1.5-1.61-3-2.48-4.51S108,59.93,107.11,58.47Zm2.76,24.92q1.29-2.27,2.46-4.53c1,2.6,2,5.16,2.7,7.66-2.52.59-5.17,1.07-7.92,1.45Q108.52,85.75,109.87,83.39ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Zm-22.18-12A4.82,4.82,0,0,1,72.29,34a13.11,13.11,0,0,1,5.19,1.31,39.07,39.07,0,0,1,10,6.78l1.17,1.07a98.49,98.49,0,0,0-8.16,10,98.88,98.88,0,0,0-12.65,2.06c-.44-1.94-.8-3.84-1-5.67C65.8,42,67,36.24,69.81,34.6ZM64.53,85.26a58.75,58.75,0,0,1-5.54-2c-7.1-3-11.5-6.85-11.5-10.14S51.91,66,59,63.05a57.63,57.63,0,0,1,5.44-1.94A97.93,97.93,0,0,0,69,73.25,98.72,98.72,0,0,0,64.53,85.26Zm23,19.1c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm4.57-4.51c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm10.8-28.44c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14,98.1,98.1,0,0,0,4.49-12,58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14S132.17,80.42,125.07,83.37ZM92,82.39a9.18,9.18,0,1,0-9.17-9.19A9.17,9.17,0,0,0,92,82.39ZM31,17.88V128.53H153.07V17.88ZM148.3,123.77H35.78V22.65H148.3Zm-85-33.9c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26,12.41-3.72,20.48-9.78,20.49-16.63s-8.11-13-20.58-16.73c3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63S50.84,86.13,63.31,89.87Zm24.21,14.49c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm24.79-36.89c-.79-1.5-1.61-3-2.48-4.51s-1.8-3-2.72-4.49c2.72.38,5.35.87,7.84,1.45C114.21,62.39,113.33,64.92,112.31,67.47Zm2.72,19c-2.52.59-5.17,1.07-7.92,1.45q1.41-2.22,2.76-4.58t2.46-4.53C113.37,81.46,114.28,84,115,86.52Zm-5.21-13.35c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55s-2.87-5.22-4.12-7.83q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55S108.58,70.56,109.82,73.17ZM77,88c-2.71-.39-5.34-.88-7.84-1.46.74-2.46,1.63-5,2.65-7.55.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88ZM74.21,63c-.87,1.5-1.69,3-2.46,4.52Q70.18,63.65,69,59.9c2.53-.59,5.18-1.08,7.93-1.46C76,59.92,75.11,61.45,74.21,63ZM92.09,99.85c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm5.28-50.66a58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14s-4.41,7.16-11.51,10.11c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14A98.1,98.1,0,0,0,119.55,61.15Zm-23-19.09c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Line truncated
@@ -0,0 +1,150 @@
+/*
+ * 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 optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
@@ -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 proxy = require('http-proxy-middleware');
+module.exports = function(app) {
+  app.use(
+    '/api',
+    proxy({
+      target: 'http://localhost:8090',
+      changeOrigin: true,
+    })
+  );
+};
@@ -0,0 +1,54 @@
+/*
+ * 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 React from "react";
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from "react-bootstrap/Nav";
+import Button from "react-bootstrap/Button"
+import { SkillsLevel } from '@skilltree/skills-client-react';
+
+import {
+  NavLink
+} from "react-router-dom";
+
+const Navigation = () => {
+
+  const tmpStyle = {
+    position:'fixed',
+    zIndex:1100,
+    right:0,
+    left:0,
+  };
+
+  return (
+    <div style={tmpStyle}>
+      <Navbar bg="info" variant="dark">
+        <Navbar.Brand>React v18 Integration Examples</Navbar.Brand>
+        <Navbar.Toggle target="nav-collapse"></Navbar.Toggle>
+        <Navbar.Collapse id="nav-collapse" is-nav="true">
+          <Nav>
+            <NavLink data-cy="reportSkillsLink" className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")} to="/">Report Skill Events</NavLink>
+            <NavLink data-cy="skillsDisplayLink" className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")} to="/showSkills?isSummaryOnly=false&internalBackButton=false&themeName=Bright%20(default)&skillsVersion=">User Display</NavLink>
+          </Nav>
+        </Navbar.Collapse>
+          <Button variant="primary">
+              <SkillsLevel />
+          </Button>
+      </Navbar>
+    </div>
+  );
+};
+
+export default Navigation;
@@ -0,0 +1,112 @@
+/*
+ * 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 React from 'react';
+import { SkillsReporter } from '@skilltree/skills-client-react';
+import axios from 'axios';
+
+const beautify = require('js-beautify').js;
+let selectedSkillId = '';
+
+const ReportSkill = () => {
+    const reportSkill = (skillId, resultContainer) => {
+        SkillsReporter.reportSkill(skillId)
+            .then((response) => {
+                document.querySelector(resultContainer).innerHTML = JSON.stringify(response, null, 2);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    };
+
+    const sampleCode = () => {
+        return beautify(`SkillsReporter.reportSkill(this.skill)
+              .then((res) => {
+                    this.reportResult = res;
+                });`, {indent_size: 2, indent_level: 1, end_with_newline: false})
+    };
+
+    const handleInputChange = (inputValue) => {
+        selectedSkillId = inputValue.target.value;
+    };
+
+    const [selectData, setSelectData] = React.useState([]);
+
+    React.useEffect(()=>{
+        axios.get("/api/skills")
+            .then((result) => {
+                setSelectData(result.data);
+                if (result.data && result.data.length > 0) {
+                    selectedSkillId = result.data[0];
+                }
+            });
+        SkillsReporter.addSuccessHandler((result) => {
+            document.querySelector('#global-event-result-container').innerHTML = JSON.stringify(result, null, 2);
+        });
+    }, []);
+
+    const style = {
+        paddingTop: '55px'
+    };
+
+    return (
+        <div className="container-fluid" style={style}>
+            <div className="container">
+                <h2>Report Skills Examples</h2>
+                <div className="text-primary">Global Event Result:</div>
+                <div id="globalEventResultDiv" className="border rounded p-3 mb-5 bg-light">
+                    <pre id="global-event-result-container" data-cy="globalEventResult"></pre>
+                </div>
+                <div>
+                    <h5 className="text-info"><strong>Report Any Skill</strong></h5>
+                    <div className="card card-body bg-light">
+                    <pre className="m-0 sample-code">
+                    <code className="javascript">{sampleCode()}</code></pre>
+
+                </div>
+                <div className="card card-body mt-3">
+                    <div id="exampleDirectiveClickEvent">
+                        <div className="float-left mr-3">
+                            <select onChange={(event) => handleInputChange(event)} className="custom-select custom-select-m mb-3">
+                                {selectData.map((skill)=>{
+                                    return <option key={skill} value={skill}>{skill}</option>
+                                })}
+                            </select>
+                        </div>
+                        <div className="float-left">
+                            <button
+                                    className="btn btn-outline-primary"
+                                    onClick={() => reportSkill(selectedSkillId, '#report-result-container')}>
+                                Report Skill
+                            </button>
+                        </div>
+                    </div>
+                    <hr />
+                    <div className="text-primary">Result:</div>
+                    <div className="border rounded p-3 bg-light">
+                        <pre id="report-result-container"></pre>
+                    </div>
+                </div>
+            </div>
+
+
+            <div className="mt-5"></div>
+
+        </div>
+</div>
+    )
+};
+
+export default ReportSkill;
@@ -0,0 +1,68 @@
+/*
+ * 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 React from 'react';
+import Highlight from 'react-highlight';
+import PropTypes from 'prop-types';
+
+const beautify = require('js-beautify').js;
+const beautifyHtml = require('js-beautify').html;
+
+const SampleCode = ({options, selectedTheme}) => {
+
+    const sampleCode = () => {
+        const tags = beautifyHtml(`
+         <div id="myApp">
+                <SkillsDisplay options="${JSON.stringify(options)}" theme={selectedThemeObj.theme} />
+            </div>
+`,{indent_size: 4, indent_level: 2, end_with_newline: false, "html.format.contentUnformatted": "", "html.format.unformatted": ""});
+
+        const js =  beautify(`
+import { SkillsDisplay } from '@skilltree/skills-client-react';
+    const selectedThemeObj = ${JSON.stringify(selectedTheme)};
+    const MyComponent = () => {
+        return (
+            placeholder
+        )
+    };`, {indent_size: 2, indent_level: 1, end_with_newline: false});
+
+        const replacedText = js.replace('placeholder', tags);
+        return replacedText;
+    };
+
+    return (
+    <div id="sample-code" className="row">
+        <div className="col-12">
+            <div className="mb-5 mt-5 card bg-light">
+                <h5 className=" card-header text-info">
+                    <strong>Sample Code</strong>
+                </h5>
+                <div className="card-body py-0">
+                    <Highlight className="javascript">
+                        <pre><code className="javascript p-0 m-0">{sampleCode()}</code></pre>
+                    </Highlight>
+                </div>
+            </div>
+        </div>
+    </div>
+    );
+};
+
+SampleCode.propTypes = {
+    options: PropTypes.object.isRequired,
+    selectedTheme: PropTypes.object.isRequired
+};
+
+export default React.memo(SampleCode);
@@ -0,0 +1,168 @@
+/*
+ * 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 React from 'react';
+import SkillsDisplayThemeFactory from './ThemeFactory.js';
+import SampleCode from './SampleCode';
+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';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const getThemes = () => {
+    return Object.values(SkillsDisplayThemeFactory);
+};
+
+const findTheme = (name) => {
+    return getThemes().find((item) => item.name === 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(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+const ShowSkill = () => {
+    const location = useLocation();
+    const navigator = useNavigate();
+
+    const getUrlParam = (name) => {
+            const urlSearchParams = new URLSearchParams(location.search);
+            return urlSearchParams.get(name);
+    };
+
+    const [selectedTheme, saveSelectedTheme] = React.useState(() => {
+        const urlTheme = getUrlParam("themeName");
+        if(urlTheme) {
+            return findTheme(urlTheme);
+        }
+        return getThemes()[0];
+    });
+
+    const [isSummaryOnly, setIsSummaryOnly] = React.useState(() => {
+        const urlSummaryOnly = getUrlParam('isSummaryOnly');
+        if ( urlSummaryOnly ) {
+            return JSON.parse(urlSummaryOnly)
+        }
+        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) {
+            return skillsVersion;
+        }
+        return '';
+    });
+
+    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);
+
+    React.useEffect(() => {
+        const saveUrlParam = (paramsObj) => {
+            let params = '?';
+            Object.keys(paramsObj).forEach((key) =>{
+                params+=`${key}=${paramsObj[key]}&`;
+            });
+            params = params.replace(/&$/,'');
+            navigator({pathname:location.pathname, search: params}, {replace: true});
+        };
+
+        if (isSummaryOnly !== previousIsSummaryOnly || internalBackButton !== previousInternalBackButton || selectedTheme !== previousSelectedTheme) {
+            saveUrlParam({'isSummaryOnly': isSummaryOnly, 'internalBackButton': internalBackButton, 'themeName': selectedTheme.name, 'skillsVersion': skillsVersion});
+        }
+
+    }, [isSummaryOnly, internalBackButton, selectedTheme, skillsVersion, previousIsSummaryOnly, previousInternalBackButton, previousSelectedTheme, previousSkillsVersion, location, navigator]);
+
+    const sampleCodeRef = React.createRef();
+    const skillsDisplayRef = React.createRef();
+    const executeScroll = () => scrollToRef(sampleCodeRef);
+
+    const navigate = () => {
+        skillsDisplayRef.current.navigate('/subjects/subj0');
+    };
+
+    const style = {
+        paddingTop: '55px'
+    };
+
+    return (
+          <div className="container" style={style}>
+              <div className="d-flex align-items-center">
+                  <DropdownButton
+                    id="dropdown-1"
+                    className="mb-3"
+                    title="Theme"
+                    variant="Primary">
+
+                      { getThemes().map ( (theme) => {
+                          return <Dropdown.Item
+                            onClick={() => saveSelectedTheme(theme)}
+                            key={theme.name}
+                            eventKey={theme.name} {... (selectedTheme.name === theme.name ? {disabled:true} : "")}>
+                              {theme.name}
+                          </Dropdown.Item>
+                      })}
+
+                  </DropdownButton>
+                  <Button variant={isSummaryOnly ? 'primary' : 'outline-primary'}
+                          onClick={() => { setIsSummaryOnly(!isSummaryOnly);
+                              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 ref={skillsDisplayRef} options={options} theme={selectedTheme.theme} version={skillsVersion} handleRouteChanged={handleRouteChanged}/>
+              </div>
+
+              <div ref={sampleCodeRef}>
+                  <SampleCode options={options} selectedTheme={selectedTheme}/>
+              </div>
+          </div>
+        );
+};
+
+export default ShowSkill;
@@ -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.
+ */
+const exportedObj = {
+  default: {
+    name: 'Bright (default)',
+    theme: {
+      backgroundColor: '#f7f7f7',
+    },
+  },
+  darkBlue: {
+    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',
+    },
+  }
+};
+export default exportedObj;
@@ -1,12 +1,12 @@
 {
    "name": "skills-int-client-vue",
-    "version": "3.1.1",
+    "version": "3.5.0",
    "license": "Apache-2.0",
    "description": "SkillTree Client Lib Integration Tests - Vue",
    "scripts": {
        "serve": "vue-cli-service serve",
        "buildDepsAndServe": "cd ../../skills-client-js/ && npm run build && cd ../skills-client-vue/ && npm run build && cd ../skills-client-integration/skills-int-client-vue/ && npm run serve",
-        "licenseDepCheck": "license-checker --production --onlyAllow='MIT;ISC;BSD-3-Clause;Apache-2.0' --summary",
+        "licenseDepCheck": "license-checker --production --onlyAllow='MIT;ISC;BSD-2-Clause;BSD-3-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 ",
@@ -14,11 +14,11 @@
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
-        "@skilltree/skills-client-vue": "3.1.1",
-        "axios": "0.21.1",
+        "@skilltree/skills-client-vue": "3.5.0",
+        "axios": "1.6.0",
        "bootstrap": "4.5.3",
        "bootstrap-vue": "2.17.3",
-        "core-js": "^3.2.1",
+        "core-js": "3.2.1",
        "highlightjs": "9.16.2",
        "js-beautify": "1.13.0",
        "vue": "2.6.12",
@@ -29,11 +29,11 @@
        "vuex": "3.5.1"
    },
    "devDependencies": {
-        "@vue/cli-plugin-babel": "4.5.7",
-        "@vue/cli-plugin-eslint": "4.5.7",
-        "@vue/cli-service": "4.5.7",
+        "@vue/cli-plugin-babel": "4.5.13",
+        "@vue/cli-plugin-eslint": "4.5.13",
+        "@vue/cli-service": "4.5.13",
        "babel-eslint": "10.1.0",
-        "eslint": "7.11.0",
+        "eslint": "6.2.0",
        "eslint-plugin-vue": "7.0.1",
        "license-check-and-add": "3.0.4",
        "license-checker": "25.0.1",
@@ -50,18 +50,14 @@
            "plugin:vue/essential",
            "eslint:recommended"
        ],
-        "rules": {
-            
-        },
+        "rules": {},
        "parserOptions": {
            "parser": "babel-eslint"
        }
    },
    "postcss": {
        "plugins": {
-            "autoprefixer": {
-                
-            }
+            "autoprefixer": {}
        }
    }
-}
+}
@@ -7,7 +7,7 @@
    <parent>
        <groupId>skills</groupId>
        <artifactId>skills-client-integration</artifactId>
-        <version>3.1.1-SNAPSHOT</version>
+        <version>3.5.0-SNAPSHOT</version>
    </parent>
    <artifactId>skills-int-client-vue</artifactId>

@@ -107,8 +107,11 @@ limitations under the License.
    },
    data() {
      const existingAuthenticator = SkillsConfiguration.getAuthenticator();
-      const authenticator = existingAuthenticator.replace(/\/users\/user1/, '/users/proj2/user2')
-      const projectId = "proj2"
+      const projectId = this.$store.state.proxiedProjectId;
+      const proxiedUser = this.$store.state.proxiedUserId;
+      const replaceRegex = /users\/[^/]+\/token/;
+
+      const authenticator = existingAuthenticator.replace(replaceRegex, `users/${projectId}/${proxiedUser}/token`);
      return {
        token: '',
        version: this.$route.query.skillsVersion ? JSON.parse(this.$route.query.skillsVersion) : 1000,
@@ -34,6 +34,13 @@ limitations under the License.
                switch>
            Summary Only
        </b-form-checkbox>
+      <b-form-checkbox class="d-inline-block ml-3 border-right pr-2"
+                       v-model="displayOptions.internalBackButton"
+                       switch>
+        Internal Back Button
+      </b-form-checkbox>
+
+      <b-button variant="outline-primary" data-cy="navigateButton" @click="navigate">Navigate</b-button>

      <b-link
        class="ml-2"
@@ -41,12 +48,17 @@ limitations under the License.
        v-scroll-to="'#sample-code'"
        @click="showSampleCode = true">Show Source</b-link>
    </div>
+    <div>
+      <span id="skillsDisplayPath" data-cy="skillsDisplayPath">Skills Display Path: [{{skillsDisplayPath}}]</span>
+    </div>
    <div class="border rounded">
-      <skills-display
+      <skills-display ref="skillsDisplayRef"
        v-if="selectedTheme"
        :options="displayOptions"
        :version="version"
-        :theme="selectedTheme.theme"/>
+        :theme="selectedTheme.theme"
+        @route-changed="skillsDisplayRouteChanged"
+      />
    </div>
    <div
      v-if="selectedTheme && showSampleCode"
@@ -112,8 +124,10 @@ limitations under the License.
        displayOptions: {
          autoScrollStrategy: 'top-of-page',
          isSummaryOnly: this.$route.query.isSummaryOnly ? JSON.parse(this.$route.query.isSummaryOnly) : false,
+          internalBackButton: this.$route.query.internalBackButton ? JSON.parse(this.$route.query.internalBackButton) : false,
        },
        showSampleCode: false,
+        skillsDisplayPath: '',
        themes: this.getThemes(),
        selectedTheme: this.$route.query.themeName ? this.findTheme(this.$route.query.themeName) : this.getThemes()[0],
      };
@@ -138,6 +152,9 @@ limitations under the License.
      'displayOptions.isSummaryOnly'() {
        this.setIsSummaryOnlyUrlParam();
      },
+      'displayOptions.internalBackButton'() {
+        this.setInternalBackButtonUrlParam();
+      },
    },
    methods: {
      getThemes() {
@@ -159,7 +176,19 @@ limitations under the License.
        this.$router.push({
          query: {
            themeName: this.selectedTheme.name,
-            isSummaryOnly: this.displayOptions.isSummaryOnly
+            isSummaryOnly: this.displayOptions.isSummaryOnly,
+            internalBackButton: this.displayOptions.internalBackButton,
+          }
+        });
+        this.refreshPage();
+      },
+
+      setInternalBackButtonUrlParam() {
+        this.$router.push({
+          query: {
+            themeName: this.selectedTheme.name,
+            isSummaryOnly: this.displayOptions.isSummaryOnly,
+            internalBackButton: this.displayOptions.internalBackButton,
          }
        });
        this.refreshPage();
@@ -169,6 +198,14 @@ limitations under the License.
        return this.getThemes().find((item) => item.name === name);

      },
+
+      skillsDisplayRouteChanged(newPath) {
+        this.skillsDisplayPath = newPath;
+      },
+
+      navigate() {
+        this.$refs.skillsDisplayRef.navigate('/subjects/subj0');
+      },
    },
  }
 </script>
@@ -21,6 +21,7 @@ import router from './router';
 import axios from 'axios';
 import { SkillsDirective, SkillsConfiguration, Logger } from '@skilltree/skills-client-vue';
 import VueHighlightJS from 'vue-highlightjs'
+import store from './store';

 Vue.config.productionTip = false

@@ -33,15 +34,23 @@ Vue.use(VueHighlightJS)
 axios.get("/api/config")
  .then((result) => {
    SkillsConfiguration.configure(result.data);
+    SkillsConfiguration.configure(result.data);
+    SkillsConfiguration.configure(result.data);
+    store.commit('projectId', result.data.projectId);
+    store.commit('authenticator', result.data.authenticator);
+    store.commit('proxiedUserId', result.data.proxiedUserId);
+    store.commit('proxiedProjectId', result.data.proxiedProjectId);
  })
  .then(() => {
    SkillsConfiguration.afterConfigure().then(() => {
+      console.log('afterConfigure() - this should only be called once!');
      if (window.Cypress) {
        window.skillsLogger = Logger;
      }
      new Vue({
        render: h => h(App),
        router,
+        store,
      }).$mount('#app');
    })
  });
@@ -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.
+ */
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    projectId: '',
+    authenticator: '',
+    proxiedUserId: '',
+    proxiedProjectId: '',
+  },
+  mutations: {
+    projectId(state, projectId) {
+      state.projectId = projectId;
+    },
+    authenticator(state, projectSearch) {
+      state.projectSearch = projectSearch;
+    },
+    proxiedUserId(state, proxiedUserId) {
+      state.proxiedUserId = proxiedUserId;
+    },
+    proxiedProjectId(state, proxiedProjectId) {
+      state.proxiedProjectId = proxiedProjectId;
+    }
+  },
+});
@@ -1,334 +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.
- */
-import Utils from "./Utils";
-
-const homePage = '/angular/reportSkills'
-
-context('Angular Tests', () => {
-
-    const laterThan_1_4_0 = Utils.skillsServiceVersionLaterThan('1.4.0');
-    const missingSkillErrorCode = laterThan_1_4_0 ? 404 : 400;
-    const noThemeBackground = laterThan_1_4_0 ? 'rgba(0, 0, 0, 0)' : 'rgb(255, 255, 255)';
-
-    it('level component should be reactive', () => {
-        cy.createDefaultProject()
-        const sendEventViaDropdownId = '#PureJSReportAnySkill';
-        Cypress.Commands.add("clickSubmit", () => {
-            cy.get(`${sendEventViaDropdownId} .btn`).contains('Report Skill').click()
-        })
-        Cypress.Commands.add("selectSkill", (skill) => {
-            cy.get('[data-cy=anySkillDropDownButton]').click()
-            cy.get('[data-cy=anySkillDropDownItemButton]').contains(skill).click()//.select(`${skill}`)
-        })
-
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.selectSkill('IronMan')
-        cy.clickSubmit()
-        cy.contains('Level 1')
-
-        cy.selectSkill('Thor')
-        cy.clickSubmit()
-        cy.contains('Level 2')
-
-        cy.selectSkill('subj1_skill0')
-        cy.clickSubmit()
-        cy.contains('Level 3')
-
-        cy.selectSkill('subj1_skill1')
-        cy.clickSubmit()
-        cy.contains('Level 3')
-
-        cy.selectSkill('subj2_skill0')
-        cy.clickSubmit()
-        cy.contains('Level 4')
-
-        cy.selectSkill('subj2_skill1')
-        cy.clickSubmit()
-        cy.contains('Level 5')
-    })
-
-    it('level component should load initial level', () => {
-        cy.createDefaultProject()
-        // cy.reportSkill('subj1_skill0')
-
-        // this will increment levels for [email protected] but Level and display components display data for the proxyUser
-        // validate that level is still 0
-        cy.reportSkillForUser('IronMan', '[email protected]')
-        cy.visitHomePage(homePage);
-        cy.contains('Level 0')
-
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-        cy.visitHomePage(homePage);
-        cy.contains('Level 1')
-    })
-
-    it('level component should be reactive (skills reported directly to backend endpoint)', () => {
-        cy.createDefaultProject()
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-        cy.contains('Level 1')
-
-        cy.reportSkillForUser('Thor', Cypress.env('proxyUser'))
-        cy.contains('Level 2')
-
-        cy.reportSkillForUser('subj1_skill0', Cypress.env('proxyUser'))
-        cy.contains('Level 3')
-
-        cy.reportSkillForUser('subj1_skill1', Cypress.env('proxyUser'))
-        cy.contains('Level 3')
-
-        cy.reportSkillForUser('subj2_skill0', Cypress.env('proxyUser'))
-        cy.contains('Level 4')
-
-        cy.reportSkillForUser('subj2_skill1', Cypress.env('proxyUser'))
-        cy.contains('Level 5')
-    })
-
-    it('global event show correct results', () => {
-        cy.createDefaultProject()
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-
-        cy.contains('Level 1')
-        cy.get('[data-cy=globalEventResult]').contains('"skillId": "IronMan"')
-        cy.get('[data-cy=globalEventResult]').contains('"pointsEarned": 50')
-        cy.get('[data-cy=globalEventResult]').contains('"skillApplied": true')
-        cy.get('[data-cy=globalEventResult]').contains(/completed": [[][^]*"type": "Overall",[^]\s*"level": 1/)
-    })
-
-    it('global event does not update when skill reported for a different project', () => {
-        cy.createDefaultProject()
-        cy.createDefaultTinyProject('proj2')
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'), 'proj2')
-
-        cy.contains('Level 0')
-        cy.get('[data-cy=globalEventResult]').should('be.empty');
-    })
-
-    it('global event is not reported when skill is not applied', () => {
-        cy.createDefaultProject()
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 1')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-        cy.contains('Level 1')
-
-        cy.get('[data-cy=globalEventResult]').should('be.empty');
-    })
-
-    it('level component should not update when admin reports skill for other user', () => {
-
-        cy.createDefaultProject()
-        Cypress.Commands.add("reportSkill", (skillId) => {
-            cy.backendPost(`/api/projects/proj1/skills/${skillId}`)
-        })
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', '[email protected]')
-        cy.contains('Level 0')
-    })
-
-    it('skilltree directive on click', () => {
-        cy.createDefaultProject(1, 2, 50, 2)
-
-        cy.intercept('POST', '/api/projects/proj1/skills/IronMan').as('postSkill')
-
-        cy.visitHomePage(homePage);
-
-        Cypress.Commands.add("clickOnDirectiveBtn", (skillApplied = true) => {
-            cy.get('#SkillsDirectiveClickEvent button').click()
-            cy.wait('@postSkill').then((intercept) => {
-                expect(intercept.response.statusCode).to.eq(200)
-                expect(intercept.response.body).to.have.property('skillApplied').to.eq(skillApplied)
-            });
-        })
-
-        cy.clickOnDirectiveBtn()
-        cy.clickOnDirectiveBtn()
-        cy.clickOnDirectiveBtn(false)
-    })
-
-
-    it('skilltree directive on input', () => {
-        cy.createDefaultProject(1, 2, 50, 2)
-        cy.intercept('POST', '/api/projects/proj1/skills/Thor').as('postSkill')
-
-        cy.visitHomePage(homePage);
-
-        Cypress.Commands.add("typeToInput", (skillApplied = true) => {
-            cy.get('#SkillsDirectiveInputEvent input').type('h')
-            cy.wait('@postSkill').then((intercept) => {
-                expect(intercept.response.statusCode).to.eq(200)
-                expect(intercept.response.body).to.have.property('skillApplied').to.eq(skillApplied)
-            });
-        })
-
-        cy.typeToInput()
-        cy.typeToInput()
-        cy.typeToInput(false)
-    })
-
-    it('skilltree directive on click with error', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept('POST', '/api/projects/proj1/skills/DoesNotExist').as('postSkill')
-
-        cy.visitHomePage(homePage);
-
-        cy.get('#SkillsDirectiveErrorwithButton button').click()
-        cy.wait('@postSkill').then((intercept) => {
-            expect(intercept.response.statusCode).to.eq(missingSkillErrorCode)
-            expect(intercept.response.body).to.have.property('explanation').to.eq('Failed to report skill event because skill definition does not exist.')
-        });
-    })
-
-    it('skilltree directive on input with error', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept('POST', '/api/projects/proj1/skills/DoesNotExist').as('postSkill')
-
-        cy.visitHomePage(homePage);
-
-        cy.get('#SkillsDirectiveErrorwithInput input').type('h')
-        cy.wait('@postSkill').then((intercept) => {
-            expect(intercept.response.statusCode).to.eq(missingSkillErrorCode)
-            expect(intercept.response.body).to.have.property('explanation').to.eq('Failed to report skill event because skill definition does not exist.')
-        });
-    })
-
-    it('skill display', () => {
-        cy.createDefaultTinyProject()
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/angular/showSkills')
-        cy.clientDisplay(true).contains('My Level')
-        cy.clientDisplay().contains('50 Points earned Today')
-        cy.clientDisplay().contains('Subject 0')
-
-        // verify that there is no background set
-        // cypress always validates against rgb
-        cy.clientDisplay().find('.skills-page-title-text-color')
-          .should('have.css', 'background-color').and('equal', noThemeBackground);
-    })
-
-    it('skill display - summary only', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/angular/showSkills?isSummaryOnly=true')
-        cy.clientDisplay(true).contains('My Level')
-        cy.clientDisplay().contains('50 Points earned Today')
-        cy.clientDisplay().contains('Subject 0').should('not.exist')
-
-        // verify that there is no background set
-        // cypress always validates against rgb
-        cy.clientDisplay().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', noThemeBackground);
-    })
-
-    it('skill display - theme', () => {
-        cy.createDefaultTinyProject()
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/angular/showSkills?themeName=Dark Blue')
-        cy.clientDisplay(true).contains('My Level')
-        cy.clientDisplay().contains('50 Points earned Today')
-        cy.clientDisplay().contains('Subject 0')
-
-        // verify dark blue background of hex #152E4d
-        // cypress always validates against rgb
-        cy.clientDisplay().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', 'rgb(21, 46, 77)');
-    })
-
-    it('skill display - summary only - theme', () => {
-        cy.createDefaultTinyProject()
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/angular/showSkills?themeName=Dark Blue&isSummaryOnly=true')
-        cy.clientDisplay(true).contains('My Level')
-        cy.clientDisplay().contains('50 Points earned Today')
-        cy.clientDisplay().contains('Subject 0').should('not.exist')
-
-        // verify dark blue background of hex #152E4d
-        // cypress always validates against rgb
-        cy.clientDisplay().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', 'rgb(21, 46, 77)');
-    })
-
-    it('client display should display an error if skills service is down', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept('/public/status',
-        {
-            statusCode: 503, // server is down
-            body: {}
-        }).as('getStatus')
-        cy.visit('/angular/showSkills')
-        cy.wait('@getStatus')
-
-        cy.contains('Could NOT reach Skilltree Service')
-    });
-
-    it('only display skills up-to the provided version', () => {
-        cy.createDefaultTinyProject()
-        cy.backendAddSkill('skillv1', 1)
-        cy.backendAddSkill('skillv2', 2)
-
-        cy.visit('/angular/showSkills')
-        cy.clientDisplay(true).contains('Earn up to 200 points')
-
-        cy.visit('/angular/reportSkills')
-        cy.get('#globalEventResultDiv').should('be.visible');
-
-        cy.visit('/angular/showSkills?skillsVersion=1')
-        cy.clientDisplay().contains('Earn up to 150 points')
-
-        cy.visit('/angular/reportSkills')
-        cy.get('#globalEventResultDiv').should('be.visible');
-
-        cy.visit('/angular/showSkills?skillsVersion=0')
-        cy.clientDisplay().contains('Earn up to 100 points')
-    });
-
-    it('skillsClientVersion is reported correctly', () => {
-        cy.createDefaultProject()
-        cy.intercept('POST', '/api/projects/proj1/skillsClientVersion', (req) => {
-            expect(req.body).to.have.property('skillsClientVersion').and.to.contain('@skilltree/skills-client-ng-')
-            req.reply((res) => {
-                expect(res.statusCode).to.eq(200)
-                expect(res.body).to.have.property('success').to.eq(true)
-            })
-        }).as('reportClientVersion')
-
-        cy.visit(homePage)
-        cy.wait('@reportClientVersion')
-    })
-
-})
@@ -20,7 +20,9 @@ const homePage = '/native/index.html'
 context("Native JS Tests", () => {

    const laterThan_1_4_0 = Utils.skillsServiceVersionLaterThan('1.4.0');
+    const laterThan_1_11_1 = Utils.skillsServiceVersionLaterThan('1.11.1');
    const noThemeBackground = laterThan_1_4_0 ? 'rgba(0, 0, 0, 0)' : 'rgb(255, 255, 255)';
+    const rankDetailsTitle = laterThan_1_11_1 ? 'My Rank' : 'Rank Overview'

    it("global event show correct results", () => {
        cy.createDefaultProject();
@@ -78,6 +80,7 @@ context("Native JS Tests", () => {
        Cypress.Commands.add("clickSubmit", () => {
            cy.get(`${sendEventViaDropdownId} .btn`).click();
        });
+        cy.get('[type="checkbox"]').uncheck()
        cy.clickSubmit()

        cy.get('pre[data-cy=globalEventResult]').should('be.empty');
@@ -283,8 +286,167 @@ context("Native JS Tests", () => {
        cy.contains('Level 0')

        cy.reportSkillForUser('subj1_skill0', Cypress.env('proxyUser'))
-        cy.visitHomePage(homePage);
+        // cy.visitHomePage(homePage);
        cy.contains('Level 1')
    })

+    if (Utils.skillsServiceVersionLaterThan('1.5.0')) {
+        it('internal back button when when returning from an external page', () => {
+            cy.createDefaultTinyProject()
+            cy.intercept(Cypress.env('tokenUrl')).as('getToken')
+            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
+
+            // visit client display
+            cy.visit('/native/clientDisplay.html?internalBackButton=true');
+            // cy.wait('@getToken')
+
+            cy.clientDisplay(true).find('[data-cy=back]').should('not.exist');
+            cy.clientDisplay().contains('User Skills');
+
+            // navigate to Rank Overview that contains the back button
+            cy.clientDisplay().find('[data-cy=myRank]').click();
+            cy.clientDisplay().contains(rankDetailsTitle);
+            cy.clientDisplay().find('[data-cy=back]').should('exist');
+
+            // now visit the "Report Skills" (external) page
+            cy.get('[data-cy=reportSkillsLink]').click()
+            cy.contains('Report Skills Examples');
+
+            // switch back to the the client display
+            cy.get('[data-cy=userDisplayLink]').click()
+        });
+
+        it('internal back button when when returning from an external page - multiple layers deep', () => {
+            cy.createDefaultTinyProject()
+            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
+
+            // visit client display
+            cy.visit('/native/clientDisplay.html?internalBackButton=true');
+
+            cy.clientDisplay().find('[data-cy=back]').should('not.exist');
+            cy.clientDisplay().contains('User Skills');
+
+            // to subject page
+            cy.cdClickSubj(0, 'Subject 0');
+
+            // navigate to Rank Overview that contains the back button
+            cy.clientDisplay().find('[data-cy=myRank]').click();
+            cy.clientDisplay().contains(rankDetailsTitle);
+            cy.clientDisplay().find('[data-cy=back]').should('exist');
+
+            // click the back button and verify that we are still in the
+            // client display (Subject page)
+            cy.cdBack('Subject 0');
+
+            // then back one more time and we should be back on the client display home page
+            cy.cdBack('User Skills');
+        });
+
+        it('browser back button works correctly when internal back button is not present', () => {
+            cy.createDefaultTinyProject()
+            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
+
+            // visit client display
+            cy.visit("/native/clientDisplay.html?internalBackButton=false");
+
+            cy.clientDisplay().find('[data-cy=back]').should('not.exist');
+            cy.clientDisplay().contains('User Skills');
+
+            // to subject page
+            cy.cdClickSubj(0, 'Subject 0');
+
+            // navigate to Rank Overview and that it does NOT contains the internal back button
+            cy.clientDisplay().find('[data-cy=myRank]').click();
+            cy.clientDisplay().contains(rankDetailsTitle);
+            cy.clientDisplay().find('[data-cy=back]').should('not.exist');
+
+            // click the browser back button and verify that we are still in the
+            // client display (Subject page)
+            cy.go('back')  // browser back button
+            cy.clientDisplay().contains('Subject 0');
+
+            // then back one more time and we should be back on the client display home page
+            cy.go('back')  // browser back button
+            cy.clientDisplay().contains('User Skills');
+        });
+
+        it('deep link and reload', () => {
+            cy.createDefaultTinyProject()
+            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
+
+            // navigate to Rank Overview via direct link
+            cy.visit('/native/clientDisplay.html?skillsClientDisplayPath=%2Frank#/showSkills');
+            cy.clientDisplay().contains(rankDetailsTitle);
+
+            // reload and confirm we are still on Rank Overview page
+            cy.reload();
+            cy.clientDisplay().contains(rankDetailsTitle);
+        });
+
+        it('back button after reload', () => {
+            cy.createDefaultTinyProject()
+            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
+
+            // visit client display
+            cy.visit("/native/clientDisplay.html?internalBackButton=false");
+
+            cy.clientDisplay().find('[data-cy=back]').should('not.exist');
+            cy.clientDisplay().contains('User Skills');
+
+            // to subject page
+            cy.cdClickSubj(0, 'Subject 0');
+
+            // navigate to Rank Overview and that it does NOT contains the internal back button
+            cy.clientDisplay().find('[data-cy=myRank]').click();
+            cy.clientDisplay().contains(rankDetailsTitle);
+            cy.clientDisplay().find('[data-cy=back]').should('not.exist');
+
+            cy.reload();
+            cy.clientDisplay().contains(rankDetailsTitle);
+
+            // click the browser back button and verify that we are still in the
+            // client display (Subject page)
+            cy.go('back')  // browser back button
+            cy.clientDisplay().contains('Subject 0');
+
+            // then back one more time and we should be back on the client display home page
+            cy.go('back')  // browser back button
+            cy.clientDisplay().contains('User Skills');
+        });
+
+        it('route change is passed to the client app', () => {
+            cy.createDefaultTinyProject()
+            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
+
+            // visit client display
+            cy.visit('/native/clientDisplay.html?internalBackButton=true');
+            cy.get('[data-cy=skillsDisplayPath]').contains('Skills Display Path: [/]');
+
+            // to subject page
+            cy.cdClickSubj(0, 'Subject 0');
+            cy.get('[data-cy=skillsDisplayPath]').contains('Skills Display Path: [/subjects/subj0]');
+
+            // navigate to Rank Overview and that it does NOT contains the internal back button
+            cy.clientDisplay().find('[data-cy=myRank]').click();
+            cy.clientDisplay().contains(rankDetailsTitle);
+
+            cy.get('[data-cy=skillsDisplayPath]').contains('Skills Display Path: [/subjects/subj0/rank]');
+        });
+
+    }
+
+    if (Utils.skillsServiceVersionLaterThan('1.6.0')) {
+        it('navigate skills-display programatically', () => {
+            cy.createDefaultTinyProject()
+            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
+
+            // visit client display
+            cy.visit('/native/clientDisplay.html?internalBackButton=true');
+            cy.get('[data-cy=skillsDisplayPath]').contains('Skills Display Path: [/]');
+
+            // to subject page
+            cy.get('[data-cy=navigateButton]').click();
+            cy.get('[data-cy=skillsDisplayPath]').contains('Skills Display Path: [/subjects/subj0]');
+        });
+    }
 });
@@ -1,259 +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.
- */
-import Utils from "./Utils";
-
-const homePage = '/react/index.html#/'
-
-context('React Tests', () => {
-
-    const laterThan_1_4_0 = Utils.skillsServiceVersionLaterThan('1.4.0');
-    const noThemeBackground = laterThan_1_4_0 ? 'rgba(0, 0, 0, 0)' : 'rgb(255, 255, 255)';
-
-    it('level component should be reactive (skills reported directly to backend endpoint)', () => {
-        cy.createDefaultProject()
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-        cy.contains('Level 1')
-
-        cy.reportSkillForUser('Thor', Cypress.env('proxyUser'))
-        cy.contains('Level 2')
-
-        cy.reportSkillForUser('subj1_skill0', Cypress.env('proxyUser'))
-        cy.contains('Level 3')
-
-        cy.reportSkillForUser('subj1_skill1', Cypress.env('proxyUser'))
-        cy.contains('Level 3')
-
-        cy.reportSkillForUser('subj2_skill0', Cypress.env('proxyUser'))
-        cy.contains('Level 4')
-
-        cy.reportSkillForUser('subj2_skill1', Cypress.env('proxyUser'))
-        cy.contains('Level 5')
-    })
-
-    it('level component should load initial level', () => {
-        cy.createDefaultProject()
-        // cy.reportSkill('subj1_skill0')
-
-        // this will increment levels for the default user = [email protected] but Level and display components display data for Cypress.env('proxyUser')
-        // validate that level is still 0
-        cy.reportSkillForUser('IronMan', '[email protected]')
-        cy.visitHomePage(homePage);
-        cy.contains('Level 0')
-
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-        cy.visitHomePage(homePage);
-        cy.contains('Level 1')
-    })
-
-    it('global event show correct results', () => {
-        cy.createDefaultProject()
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-        cy.contains('Level 1')
-
-        cy.get('[data-cy=globalEventResult]').contains('"skillId": "IronMan"')
-        cy.get('[data-cy=globalEventResult]').contains('"pointsEarned": 50')
-        cy.get('[data-cy=globalEventResult]').contains('"skillApplied": true')
-        cy.get('[data-cy=globalEventResult]').contains(/completed": [[][^]*"type": "Overall",[^]\s*"level": 1/)
-    })
-
-    it('level component should be reactive', () => {
-        cy.createDefaultProject()
-        const sendEventViaDropdownId = '#exampleDirectiveClickEvent';
-        Cypress.Commands.add("clickSubmit", () => {
-            cy.get(`${sendEventViaDropdownId} .btn`).click()
-        })
-        Cypress.Commands.add("selectSkill", (skill) => {
-            cy.get(`${sendEventViaDropdownId} select`).select(`${skill}`)
-        })
-
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.selectSkill('IronMan')
-        cy.clickSubmit()
-        cy.contains('Level 1')
-
-        cy.selectSkill('Thor')
-        cy.clickSubmit()
-        cy.contains('Level 2')
-
-        cy.selectSkill('subj1_skill0')
-        cy.clickSubmit()
-        cy.contains('Level 3')
-
-        cy.selectSkill('subj1_skill1')
-        cy.clickSubmit()
-        cy.contains('Level 3')
-
-        cy.selectSkill('subj2_skill0')
-        cy.clickSubmit()
-        cy.contains('Level 4')
-
-        cy.selectSkill('subj2_skill1')
-        cy.clickSubmit()
-        cy.contains('Level 5')
-    })
-
-    it('global event does not update when skill reported for a different project', () => {
-        cy.createDefaultProject()
-        cy.createDefaultTinyProject('proj2')
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'), 'proj2')
-
-        cy.contains('Level 0')
-        cy.get('[data-cy=globalEventResult]').should('be.empty');
-    })
-
-    it('level component should not update when admin reports skill for other user', () => {
-        cy.createDefaultProject()
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', '[email protected]')
-        cy.contains('Level 0')
-    })
-
-    it('skill display', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/react/index.html#/showSkills')
-        cy.wait('@getToken')
-        cy.wait('@getToken')
-        cy.wrapIframe().contains('My Level')
-        cy.wrapIframe().contains('50 Points earned Today')
-        cy.wrapIframe().contains('Subject 0')
-
-        // verify that there is no background set
-        // cypress always validates against rgb
-        cy.wrapIframe().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', noThemeBackground);
-    })
-
-    it('skill display - summary only', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/react/index.html#/showSkills?isSummaryOnly=true')
-        cy.wait('@getToken')
-        cy.wait('@getToken')
-        cy.wrapIframe().contains('My Level')
-        cy.wrapIframe().contains('50 Points earned Today')
-        cy.wrapIframe().contains('Subject 0').should('not.exist')
-
-        // verify that there is no background set
-        // cypress always validates against rgb
-        cy.wrapIframe().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', noThemeBackground);
-    })
-
-    it('skill display - theme', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/react/index.html#/showSkills?themeName=Dark Blue')
-        cy.wait('@getToken')
-        cy.wait('@getToken')
-        cy.wrapIframe().contains('My Level')
-        cy.wrapIframe().contains('50 Points earned Today')
-        cy.wrapIframe().contains('Subject 0')
-
-        // verify dark blue background of hex #152E4d
-        // cypress always validates against rgb
-        cy.wrapIframe().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', 'rgb(21, 46, 77)');
-    })
-
-    it('skill display - summary only - theme', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/react/index.html#/showSkills?themeName=Dark Blue&isSummaryOnly=true')
-        cy.wait('@getToken')
-        cy.wait('@getToken')
-        cy.wrapIframe().contains('My Level')
-        cy.wrapIframe().contains('50 Points earned Today')
-        cy.wrapIframe().contains('Subject 0').should('not.exist')
-
-        // verify dark blue background of hex #152E4d
-        // cypress always validates against rgb
-        cy.wrapIframe().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', 'rgb(21, 46, 77)');
-    })
-
-    it('client display should display an error if skills service is down', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept('/public/status',
-        {
-            statusCode: 503, // server is down
-            body: {}
-        }).as('getStatus')
-        cy.visit('/react/index.html#/showSkills')
-        cy.wait('@getStatus')
-
-        cy.contains('Could NOT reach Skilltree Service')
-    });
-
-    it('only display skills up-to the provided version', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-        cy.backendAddSkill('skillv1', 1)
-        cy.backendAddSkill('skillv2', 2)
-        cy.visit('/react/index.html#/showSkills')
-        cy.wait('@getToken')
-        cy.wait('@getToken')
-        cy.wrapIframe().contains('Earn up to 200 points')
-
-        cy.visit('/react/index.html#/')
-        cy.visit('/react/index.html#/showSkills?skillsVersion=1')
-        cy.wait('@getToken')
-        cy.wrapIframe().contains('Earn up to 150 points')
-
-        cy.visit('/react/index.html#/')
-        cy.visit('/react/index.html#/showSkills?skillsVersion=0')
-        cy.wait('@getToken')
-        cy.wrapIframe().contains('Earn up to 100 points')
-
-    });
-
-    it('skillsClientVersion is reported correctly', () => {
-        cy.createDefaultProject()
-        cy.intercept('POST', '/api/projects/proj1/skillsClientVersion', (req) => {
-            expect(req.body).to.have.property('skillsClientVersion').and.to.contain('@skilltree/skills-client-react-')
-            req.reply((res) => {
-                expect(res.statusCode).to.eq(200)
-                expect(res.body).to.have.property('success').to.eq(true)
-            })
-        }).as('reportClientVersion')
-
-        cy.visit('/react/index.html#/')
-        cy.wait('@reportClientVersion')
-    })
-})
@@ -0,0 +1,61 @@
+/*
+ * 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 homePage = '/native/index.html'
+
+context("Token timeout JS Tests", () => {
+
+  if (Cypress.env('timeout') === true || Cypress.env('timeout') === 'true') {
+    it("report skill with expired token, retry checker will resend with new token", () => {
+      cy.createDefaultProject();
+      cy.intercept(Cypress.env('tokenUrl')).as("getToken");
+      cy.visitHomePage(homePage);
+
+      cy.wait("@getToken");
+      cy.wait(71000)  // wait 71 seconds to ensure the token has expired
+      cy.get('[data-cy="exampleDirectiveClickEventButton"]').click();
+
+      cy.get('pre[data-cy=globalEventResult]').should('be.empty');
+
+      cy.wait("@getToken", { timeout: 60000 }); // wait ~ another 50 seconds to all for the RetryChecker to resubmit
+
+      cy.get('pre[data-cy=globalEventResult]').contains('"skillId": "IronMan"')
+      cy.get('pre[data-cy=globalEventResult]').contains('"pointsEarned": 50')
+      cy.get('pre[data-cy=globalEventResult]').contains('"skillApplied": true')
+      cy.get('pre[data-cy=globalEventResult]').contains(/completed": [[][^]*"type": "Overall",[^]\s*"level": 1/)
+    });
+
+    it('skill display - navigate after token expires', () => {
+      cy.createDefaultTinyProject()
+      cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
+
+      // visit client display
+      cy.visit("/native/clientDisplay.html");
+
+      cy.clientDisplay().contains('User Skills');
+
+      // to subject page
+      cy.wait(10000)  // wait 10 seconds to ensure the token has expired
+      cy.cdClickSubj(0, 'Subject 0');
+    });
+
+  } else {
+
+    it('timeout var not set, not tests to run', () => {
+      cy.log(`timeout env var is not true [${Cypress.env('timeout')}], skipping test.`)
+    });
+  }
+});
@@ -1,471 +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.
- */
-import Utils from "./Utils";
-
-const homePage = '/vuejs#/'
-
-context('Vue Tests', () => {
-
-    const laterThan_1_4_0 = Utils.skillsServiceVersionLaterThan('1.4.0');
-    const missingSkillErrorCode = laterThan_1_4_0 ? 404 : 400;
-    const noThemeBackground = laterThan_1_4_0 ? 'rgba(0, 0, 0, 0)' : 'rgb(255, 255, 255)';
-
-    it('level component should be reactive', () => {
-        // cy.window().then(win => {
-        //     const skillsLogger = win.skillsLogger;
-        //     skillsLogger.info('enter: level component should be reactive');
-        // })
-        cy.createDefaultProject()
-        const sendEventViaDropdownId = '#PureJSReportAnySkill';
-        Cypress.Commands.add("clickSubmit", () => {
-            cy.get(`${sendEventViaDropdownId} .btn`).click()
-        })
-        Cypress.Commands.add("selectSkill", (skill) => {
-            cy.get(`${sendEventViaDropdownId} .multiselect`).type(`${skill}{enter}`)
-        })
-
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.selectSkill('IronMan')
-        cy.clickSubmit()
-        cy.contains('Level 1')
-
-        cy.selectSkill('Thor')
-        cy.clickSubmit()
-        cy.contains('Level 2')
-
-        cy.selectSkill('subj1_skill0')
-        cy.clickSubmit()
-        cy.contains('Level 3')
-
-        cy.selectSkill('subj1_skill1')
-        cy.clickSubmit()
-        cy.contains('Level 3')
-
-        cy.selectSkill('subj2_skill0')
-        cy.clickSubmit()
-        cy.contains('Level 4')
-
-        cy.selectSkill('subj2_skill1')
-        cy.clickSubmit()
-        cy.contains('Level 5')
-    })
-
-    it('level component should load initial level', () => {
-        cy.createDefaultProject()
-        // cy.reportSkill('subj1_skill0')
-
-        // this will increment levels for [email protected] but Level and display components display data for the proxyUser
-        // validate that level is still 0
-        cy.reportSkillForUser('IronMan', '[email protected]')
-        cy.visitHomePage(homePage);
-        cy.contains('Level 0')
-
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-        cy.visitHomePage(homePage);
-        cy.contains('Level 1')
-    })
-
-    it('level component should be reactive (skills reported directly to backend endpoint)', () => {
-        cy.createDefaultProject()
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-        cy.contains('Level 1')
-
-        cy.reportSkillForUser('Thor', Cypress.env('proxyUser'))
-        cy.contains('Level 2')
-
-        cy.reportSkillForUser('subj1_skill0', Cypress.env('proxyUser'))
-        cy.contains('Level 3')
-
-        cy.reportSkillForUser('subj1_skill1', Cypress.env('proxyUser'))
-        cy.contains('Level 3')
-
-        cy.reportSkillForUser('subj2_skill0', Cypress.env('proxyUser'))
-        cy.contains('Level 4')
-
-        cy.reportSkillForUser('subj2_skill1', Cypress.env('proxyUser'))
-        cy.contains('Level 5')
-    })
-
-    it('global event show correct results', () => {
-        cy.createDefaultProject()
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-
-        cy.contains('Level 1')
-        cy.get('[data-cy=globalEventResult]').contains('"skillId": "IronMan"')
-        cy.get('[data-cy=globalEventResult]').contains('"pointsEarned": 50')
-        cy.get('[data-cy=globalEventResult]').contains('"skillApplied": true')
-        cy.get('[data-cy=globalEventResult]').contains(/completed": [[][^]*"type": "Overall",[^]\s*"level": 1/)
-    })
-
-    it('global event does not update when skill reported for a different project', () => {
-        cy.createDefaultProject()
-        cy.createDefaultTinyProject('proj2')
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'), 'proj2')
-
-        cy.contains('Level 0')
-        cy.get('[data-cy=globalEventResult]').should('be.empty');
-    })
-
-    it('global event is not reported when skill is not applied', () => {
-        cy.createDefaultProject()
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 1')
-
-        cy.reportSkillForUser('IronMan', Cypress.env('proxyUser'))
-        cy.contains('Level 1')
-
-        cy.get('[data-cy=globalEventResult]').should('be.empty');
-    })
-
-    it('level component should not update when admin reports skill for other user', () => {
-
-        cy.createDefaultProject()
-        Cypress.Commands.add("reportSkill", (skillId) => {
-            cy.backendPost(`/api/projects/proj1/skills/${skillId}`)
-        })
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.reportSkillForUser('IronMan', '[email protected]')
-        cy.contains('Level 0')
-    })
-
-    it('v-skill directive on click', () => {
-        cy.createDefaultProject(1, 2, 50, 2)
-
-        cy.intercept('POST', '/api/projects/proj1/skills/IronMan').as('postSkill')
-
-        cy.visit('/vuejs#/')
-
-        Cypress.Commands.add("clickOnDirectiveBtn", (skillApplied = true) => {
-            cy.get('#SkillsDirectiveClickEvent button').click()
-            cy.wait('@postSkill').then((intercept) => {
-                expect(intercept.response.statusCode).to.eq(200)
-                expect(intercept.response.body).to.have.property('skillApplied').to.eq(skillApplied)
-            });
-        })
-
-        cy.clickOnDirectiveBtn()
-        cy.clickOnDirectiveBtn()
-        cy.clickOnDirectiveBtn(false)
-    })
-
-    it('v-skill directive on input', () => {
-        cy.createDefaultProject(1, 2, 50, 2)
-        cy.intercept('POST', '/api/projects/proj1/skills/Thor').as('postSkill')
-
-        cy.visitHomePage(homePage);
-
-        Cypress.Commands.add("typeToInput", (skillApplied = true) => {
-            cy.get('#SkillsDirectiveInputEvent input').type('h')
-            cy.wait('@postSkill').then((intercept) => {
-                expect(intercept.response.statusCode).to.eq(200)
-                expect(intercept.response.body).to.have.property('skillApplied').to.eq(skillApplied)
-            });
-        })
-
-        cy.typeToInput()
-        cy.typeToInput()
-        cy.typeToInput(false)
-    })
-
-    it('v-skill directive on click with error', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept('POST', '/api/projects/proj1/skills/DoesNotExist').as('postSkill')
-
-        cy.visitHomePage(homePage);
-
-        cy.get('#SkillsDirectiveErrorwithButton button').click()
-        cy.wait('@postSkill').then((intercept) => {
-            expect(intercept.response.statusCode).to.eq(missingSkillErrorCode)
-            expect(intercept.response.body).to.have.property('explanation').to.eq('Failed to report skill event because skill definition does not exist.')
-        });
-    })
-
-    it('v-skill directive on input with error', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept('POST', '/api/projects/proj1/skills/DoesNotExist').as('postSkill')
-
-        cy.visitHomePage(homePage);
-
-        cy.get('#SkillsDirectiveErrorwithInput input').type('h')
-        cy.wait('@postSkill').then((intercept) => {
-            expect(intercept.response.statusCode).to.eq(missingSkillErrorCode)
-            expect(intercept.response.body).to.have.property('explanation').to.eq('Failed to report skill event because skill definition does not exist.')
-        });
-    })
-
-    it('skill display', () => {
-        cy.createDefaultTinyProject()
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/vuejs#/showSkills')
-        cy.clientDisplay(true).contains('My Level')
-        cy.clientDisplay().contains('50 Points earned Today')
-        cy.clientDisplay().contains('Subject 0')
-
-        // verify that there is no background set
-        // cypress always validates against rgb
-        cy.clientDisplay().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', noThemeBackground);
-    })
-
-    it('Proxy Skills Display', () => {
-        if (!Cypress.env('oauthMode')) {
-            cy.createDefaultTinyProject()
-            cy.createDefaultTinyProject('proj2')
-
-            cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-            cy.intercept('/api/users/proj2/user2/token').as('getToken2')
-            cy.intercept('api/projects/proj1/rank').as('getRankUser2')
-            cy.intercept('api/projects/proj1/pointHistory').as('getPointsHistoryUser2')
-            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-            cy.visit('/vuejs#/showSkills')
-            cy.wait('@getToken')
-            // cy.wait('@getToken')
-            cy.clientDisplay(true).contains('My Level')
-            cy.clientDisplay().contains('50 Points earned Today')
-            cy.clientDisplay().contains('Subject 0')
-
-            // verify that there is no background set
-            // cypress always validates against rgb
-            cy.clientDisplay().find('.skills-page-title-text-color')
-                .should('have.css', 'background-color').and('equal', noThemeBackground);
-
-            cy.visit('/vuejs#/proxyShowSkills')
-            cy.wait('@getToken2')
-            cy.wait('@getRankUser2')
-            cy.wait('@getPointsHistoryUser2')
-            cy.clientDisplay().contains('My Level')
-            cy.clientDisplay().contains('0 Points earned Today')
-        }
-    })
-
-    it('skill display - summary only', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/vuejs#/showSkills?isSummaryOnly=true')
-        cy.clientDisplay(true).contains('My Level')
-        cy.clientDisplay().contains('50 Points earned Today')
-        cy.clientDisplay().contains('Subject 0').should('not.exist')
-
-        // verify that there is no background set
-        // cypress always validates against rgb
-        cy.clientDisplay().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', noThemeBackground);
-    })
-
-    it('skill display - theme', () => {
-        cy.createDefaultTinyProject()
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/vuejs#/showSkills?themeName=Dark Blue')
-        cy.clientDisplay(true).contains('My Level')
-        cy.clientDisplay().contains('50 Points earned Today')
-        cy.clientDisplay().contains('Subject 0')
-
-        // verify dark blue background of hex #152E4d
-        // cypress always validates against rgb
-        cy.clientDisplay().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', 'rgb(21, 46, 77)');
-    })
-
-    it('skill display - summary only - theme', () => {
-        cy.createDefaultTinyProject()
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.visit('/vuejs#/showSkills?themeName=Dark Blue&isSummaryOnly=true')
-        cy.clientDisplay(true).contains('My Level')
-        cy.clientDisplay().contains('50 Points earned Today')
-        cy.clientDisplay().contains('Subject 0').should('not.exist')
-
-        // verify dark blue background of hex #152E4d
-        // cypress always validates against rgb
-        cy.clientDisplay().find('.skills-page-title-text-color')
-            .should('have.css', 'background-color').and('equal', 'rgb(21, 46, 77)');
-    })
-
-    it('client display should display an error if skills service is down', () => {
-        cy.createDefaultTinyProject()
-        cy.intercept('/public/status',
-        {
-            statusCode: 503, // server is down
-            body: {}
-        }).as('getStatus')
-        cy.visit('/vuejs#/showSkills')
-        cy.wait('@getStatus')
-
-        cy.contains('Could NOT reach Skilltree Service')
-    });
-
-    it('only display skills up-to the provided version', () => {
-        cy.createDefaultTinyProject()
-        cy.backendAddSkill('skillv1', 1)
-        cy.backendAddSkill('skillv2', 2)
-
-        cy.visit('/vuejs#/showSkills')
-        cy.clientDisplay(true).contains('Earn up to 200 points')
-
-        cy.visit('/vuejs#/')
-        cy.get('[data-cy=reportSkillsLink]').should('be.visible');
-
-        cy.visit('/vuejs#/showSkills?skillsVersion=1')
-        cy.clientDisplay().contains('Earn up to 150 points')
-
-        cy.visit('/vuejs#/')
-        cy.get('[data-cy=reportSkillsLink]').should('be.visible');
-
-        cy.visit('/vuejs#/showSkills?skillsVersion=0')
-        cy.clientDisplay().contains('Earn up to 100 points')
-    });
-
-    it('skillsClientVersion is reported correctly', () => {
-        cy.createDefaultProject()
-        cy.intercept('POST', '/api/projects/proj1/skillsClientVersion', (req) => {
-            expect(req.body).to.have.property('skillsClientVersion').and.to.contain('@skilltree/skills-client-vue-')
-            req.reply((res) => {
-                expect(res.statusCode).to.eq(200)
-                expect(res.body).to.have.property('success').to.eq(true)
-            })
-        }).as('reportClientVersion')
-
-        cy.visit('/vuejs#/')
-        cy.wait('@reportClientVersion')
-    })
-
-    /*it('Proxy User Display', () => {
-        cy.createDefaultProject()
-        cy.createDefaultTinyProject('proj2')
-        //need a view that is the default user and a view to show another user
-        const sendEventViaDropdownId = '#PureJSReportAnySkill';
-        Cypress.Commands.add("clickSubmit", () => {
-            cy.get(`${sendEventViaDropdownId} .btn`).click()
-        })
-        Cypress.Commands.add("selectSkill", (skill) => {
-            cy.get(`${sendEventViaDropdownId} .multiselect`).type(`${skill}{enter}`)
-        })
-
-        cy.visitHomePage(homePage);
-
-        cy.contains('Level 0')
-
-        cy.selectSkill('IronMan')
-        cy.clickSubmit()
-        cy.contains('Level 1')
-
-        cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-        cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-        cy.get('[data-cy=userDisplayLink]').click();
-        //cy.contains('User Display').click();
-        /!*cy.wait('@getToken')
-        console.log('got token')
-        cy.iframe((body) => {
-            cy.wait('@getToken')
-            console.log('got token again')
-
-            cy.wrap(body).contains('My Level')
-
-            // verify that there is no background set
-            // cypress always validates against rgb
-            cy.wrap(body).find('.skills-page-title-text-color')
-              .should('have.css', 'background-color').and('equal', 'rgb(255, 255, 255)');
-        });*!/
-    })*/
-
-    if (Utils.skillsServiceVersionLaterThan('1.2.0')) {
-        it('back button when when returning from an external page', () => {
-            cy.createDefaultTinyProject()
-            cy.intercept(Cypress.env('tokenUrl')).as('getToken')
-            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-
-            // visit client display
-            cy.visit('/vuejs#/showSkills?refreshPage=false')
-            // cy.wait('@getToken')
-
-            cy.clientDisplay(true).find('[data-cy=back]').should('not.exist');
-            cy.clientDisplay().contains('User Skills');
-
-            // navigate to Rank Overview that contains the back button
-            cy.clientDisplay().find('[data-cy=myRank]').click();
-            cy.clientDisplay().contains('Rank Overview');
-            cy.clientDisplay().find('[data-cy=back]').should('exist');
-
-            // now visit the "Report Skills" (external) page
-            cy.get('[data-cy=reportSkillsLink]').click()
-            cy.contains('Report Skills Examples');
-
-            // switch back to the the client display
-            cy.get('[data-cy=userDisplayLink]').click()
-        });
-    }
-
-    if (Utils.skillsServiceVersionLaterThan('1.2.0')) {
-        it('back button when when returning from an external page - multiple layers deep', () => {
-            cy.createDefaultTinyProject()
-            cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
-
-            // visit client display
-            cy.visit('/vuejs#/showSkills?refreshPage=false')
-
-            cy.clientDisplay().find('[data-cy=back]').should('not.exist');
-            cy.clientDisplay().contains('User Skills');
-
-            // to subject page
-            cy.cdClickSubj(0, 'Subject 0');
-
-            // navigate to Rank Overview that contains the back button
-            cy.clientDisplay().find('[data-cy=myRank]').click();
-            cy.clientDisplay().contains('Rank Overview');
-            cy.clientDisplay().find('[data-cy=back]').should('exist');
-
-            // now visit the "Report Skills" (external) page
-            cy.get('[data-cy=reportSkillsLink]').click()
-            cy.contains('Report Skills Examples');
-
-            // switch back to the the client display
-            cy.get('[data-cy=userDisplayLink]').click()
-            // verify we are still on the Rank Overview page
-            cy.clientDisplay(true).contains('Rank Overview');
-
-            // click the back button and verify that we are still in the
-            // client display (Subject page)
-            cy.cdBack('Subject 0');
-
-            // then back one more time and we should be back on the client display home page
-            cy.cdBack('User Skills');
-        });
-    }
-
-
-})
@@ -153,22 +153,16 @@ Cypress.Commands.add("iframe", (handleIframeBody) => {
 });

 Cypress.Commands.add('visitHomePage', (homepage) => {
-  let skillsWebsocketConnected = null;
+  const winMessage = cy.stub().as('message')
  cy.visit(homepage, {
    onBeforeLoad(win) {
-      skillsWebsocketConnected = cy.spy().as('skillsWebsocketConnected')
-      const postMessage = win.postMessage.bind(win)
-      win.postMessage = (what, target) => {
-        if (Cypress._.isPlainObject(what) && what.skillsWebsocketConnected) {
-          skillsWebsocketConnected(what)
-        }
-        return postMessage(what, target)
-      }
-      cy.spy(win, 'postMessage').as('postMessage')
+      win.addEventListener('message', (e) => {
+        winMessage(e.data)
+      })
    }
-  });
+  })
  // wait for web socket to connect
-  cy.get('@skillsWebsocketConnected').its('lastCall.args.0').its('skillsWebsocketConnected').should('eq', true);
+  cy.get('@message').should('have.been.calledWith', {skillsWebsocketConnected:true})
  cy.window().should('have.property', 'skillsLogger')
  cy.skillsLog(`Visit Home page for test [${Cypress.mocha.getRunner().test.title}]`)
 });
@@ -19,7 +19,7 @@ services:
    mem_limit: 512m
    container_name: hydra_migrate
    environment:
-      - DSN=postgres://hydra:secret@postgresd:5432/hydra?sslmode=disable&max_conns=20&max_idle_conns=4
+      - DSN=postgres://hydra:secret@postgresd:5433/hydra?sslmode=disable&max_conns=20&max_idle_conns=4
    command:
      migrate sql -e --yes
    restart: on-failure
@@ -28,15 +28,17 @@ services:
    depends_on:
      - hydra-migrate
    environment:
-      - DSN=postgres://hydra:secret@postgresd:5432/hydra?sslmode=disable&max_conns=20&max_idle_conns=4
+      - DSN=postgres://hydra:secret@postgresd:5433/hydra?sslmode=disable&max_conns=20&max_idle_conns=4

  postgresd:
    image: postgres:9.6
    mem_limit: 512m
    container_name: hydra_postgres
    ports:
-      - "5432:5432"
+      - "5433:5433"
    environment:
      - POSTGRES_USER=hydra
      - POSTGRES_PASSWORD=secret
      - POSTGRES_DB=hydra
+      - POSTGRES_PORT=5433
+      - PGPORT=5433
@@ -13,9 +13,9 @@
    "test": "echo \"Error: no test specified\" && exit 1",
    "cy:open": "cypress open",
    "cy:run": "npm run licenseCheck && cypress run",
-    "cy:open:dev:vue": "cypress open --config baseUrl=http://localhost:8091",
+    "cy:run:oauth": "npm run licenseCheck && cypress run --env authMode=oauth",
+    "cy:run:timeout": "npm run licenseCheck && cypress run --env timeout=true --spec \"cypress/integration/timeout.specs.js\"",
    "cy:open:dev:js": "cypress open --config baseUrl=http://localhost:8092",
-    "cy:open:dev:react": "cypress open --config baseUrl=http://localhost:8083",
    "cy:open:dev:ng": "cypress open --config baseUrl=http://localhost:4200",
    "integration:start": "java -Dspring.config.location=classpath:/application.properties,file:serverConfigs/integration_application.properties -jar ../skills-int-service/target/skills-int-service-*.jar",
    "integration:start:oauth": "java -Dskills.service.authenticator=hydra -Dspring.config.location=classpath:/application.properties,file:serverConfigs/integration_application.properties -jar ../skills-int-service/target/skills-int-service-*.jar",
@@ -27,24 +27,28 @@
    "backend:start:background": "mkdir -p ./target/logs && npm run backend:start | awk '/ClientLoggingController/{ print > \"./target/logs/skills-client.out\" }!/ClientLoggingController/{ print > \"./target/logs/skills-service.out\" }' &",
    "backend:start:ci": "java  -Dspring.config.location=classpath:/application.yml,file:serverConfigs/backend_application.properties -jar ../../skills-service/skills-service-*.jar",
    "backend:start:ci:oauth": "java  -Dspring.config.location=classpath:/application.yml,file:serverConfigs/backend_application.properties,file:serverConfigs/backend_oauth_application.properties -jar ../../skills-service/skills-service-*.jar",
+    "backend:start:ci:rabbitmq": "java -Dspring.config.location=classpath:/application.yml,file:serverConfigs/backend_application.properties -Dsecurity.oauth2.jwt.accessTokenValiditySeconds=10 -Dskills.websocket.enableStompBrokerRelay=true -Dskills.websocket.relayHost=localhost -Dlogging.level.org.springframework.web.socket=TRACE -jar ../../skills-service/skills-service-*.jar",
+    "backend:start:ci:expired-token": "java -Dspring.config.location=classpath:/application.yml,file:serverConfigs/backend_application.properties -Dsecurity.oauth2.jwt.accessTokenValiditySeconds=10 -Dlogging.level.org.springframework.web.socket=TRACE -jar ../../skills-service/skills-service-*.jar",
    "backend:start:ci:background": "mkdir -p ./target/logs && npm run backend:start:ci | awk '/ClientLoggingController/{ print > \"./target/logs/skills-client.out\" }!/ClientLoggingController/{ print > \"./target/logs/skills-service.out\" }' &",
    "backend:start:ci:background:oauth": "mkdir -p ./target/logs && npm run backend:start:ci:oauth | awk '/ClientLoggingController/{ print > \"./target/logs/skills-client.out\" }!/ClientLoggingController/{ print > \"./target/logs/skills-service.out\" }' &",
+    "backend:start:ci:background:expired-token": "mkdir -p ./target/logs && npm run backend:start:ci:expired-token | awk '/ClientLoggingController/{ print > \"./target/logs/skills-client.out\" }!/ClientLoggingController/{ print > \"./target/logs/skills-service.out\" }' &",
    "backend:start:release": "java -Dspring.config.location=classpath:/application.yml,file:serverConfigs/backend_application.properties -jar ./target/servicesJars/skills-service-*.jar",
-    "backend:waitToStart": "npx wait-port -v -t 60000 localhost:8080",
-    "backend:resetDb": "java -cp ./db/h2-1.4.200.jar org.h2.tools.RunScript -url jdbc:h2:tcp://localhost:9090/mem:skills -user sa -script ./db/reset.sql",
+    "backend:waitToStart": "npx wait-port -t 60000 localhost:8080",
+    "backend:resetDb": "export PGPASSWORD=skillsPassword && psql -U postgres -h localhost -d skills -f ./db/reset.sql",
    "release": "release-it --dry-run",
    "cyServices:start:skills-service": "npm run backend:start:background && npm run backend:waitToStart && echo 'skill-service started!!'",
    "cyServices:start:skills-service:ci": "npm run backend:start:ci:background && npm run backend:waitToStart && echo 'skill-service started!!'",
    "cyServices:start:skills-service:ci:oauth": "npm run backend:start:ci:background:oauth && npm run backend:waitToStart && echo 'skill-service started!!'",
+    "cyServices:start:skills-service:ci:expired-token": "npm run backend:start:ci:background:expired-token && npm run backend:waitToStart && echo 'skill-service started!!'",
    "cyServices:start:integration-apps": "npm run integration:start:background && npm run integration:waitToStart && echo 'integration apps started!!'",
    "cyServices:start:integration-apps:oauth": "npm run integration:start:background:oauth && npm run integration:waitToStart && echo 'integration apps started!!'",
    "cyServices:start": "npm run cyServices:start:skills-service && npm run cyServices:start:integration-apps",
    "cyServices:kill": "for procid in $(ps -aux | grep \"serverConfigs/.*properties\" | grep \"jar$\" | awk '{print $2}'); do echo \"killing ${procid}\"; kill -9 $procid; done",
-    "dev:setupNpmLinks": "mvn --batch-mode clean package && java -cp target/skills-int-e2e-test-*.jar -Dloader.main=skills.SetupNpmLinks org.springframework.boot.loader.PropertiesLauncher",
-    "dev:removeNpmLinks": "mvn --batch-mode clean package && java -cp target/skills-int-e2e-test-*.jar -Dloader.main=skills.RemoveNpmLinks org.springframework.boot.loader.PropertiesLauncher"
+    "dev:setupNpmLinks": "mvn --batch-mode clean package && java -cp target/skills-int-e2e-test-*.jar -Dloader.main=skills.SetupNpmLinks org.springframework.boot.loader.launch.PropertiesLauncher",
+    "dev:removeNpmLinks": "mvn --batch-mode clean package && java -cp target/skills-int-e2e-test-*.jar -Dloader.main=skills.RemoveNpmLinks org.springframework.boot.loader.launch.PropertiesLauncher"
  },
  "devDependencies": {
-    "cypress": "6.2.0",
+    "cypress": "6.6.0",
    "license-check-and-add": "3.0.4",
    "license-checker": "25.0.1",
    "semver": "7.3.2",
@@ -5,30 +5,35 @@
    <parent>
        <groupId>skills</groupId>
        <artifactId>skills-client-integration</artifactId>
-        <version>3.1.1-SNAPSHOT</version>
+        <version>3.5.0-SNAPSHOT</version>
    </parent>
    <artifactId>skills-int-e2e-test</artifactId>
    <description>End to End tests for Skills client libs using skills-int-service app</description>

    <properties>
+        <groovy.version>4.0.7</groovy.version>
    </properties>
    <dependencies>
        <dependency>
-            <groupId>org.codehaus.groovy</groupId>
+            <groupId>org.apache.groovy</groupId>
            <artifactId>groovy</artifactId>
+            <version>${groovy.version}</version>
        </dependency>
        <dependency>
-            <groupId>org.codehaus.groovy</groupId>
+            <groupId>org.apache.groovy</groupId>
            <artifactId>groovy-json</artifactId>
+            <version>${groovy.version}</version>
        </dependency>
        <dependency>
-            <groupId>org.codehaus.groovy</groupId>
-            <artifactId>groovy-json-direct</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>org.codehaus.groovy</groupId>
+            <groupId>org.apache.groovy</groupId>
            <artifactId>groovy-xml</artifactId>
+            <version>${groovy.version}</version>
        </dependency>
+<!--        <dependency>-->
+<!--            <groupId>org.apache.groovy</groupId>-->
+<!--            <artifactId>groovy-json-direct</artifactId>-->
+<!--            <version>2.5.13</version>-->
+<!--        </dependency>-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
@@ -43,25 +48,6 @@
            <artifactId>zt-exec</artifactId>
            <version>1.12</version>
        </dependency>
-        <!--<dependency>-->
-            <!--<groupId>profile</groupId>-->
-            <!--<artifactId>call-stack-profiler</artifactId>-->
-            <!--<version>1.0.2</version>-->
-            <!--<exclusions>-->
-                <!--<exclusion>-->
-                    <!--<groupId>org.slf4j</groupId>-->
-                    <!--<artifactId>slf4j-api</artifactId>-->
-                <!--</exclusion>-->
-                <!--<exclusion>-->
-                    <!--<groupId>log4j</groupId>-->
-                    <!--<artifactId>log4j</artifactId>-->
-                <!--</exclusion>-->
-                <!--<exclusion>-->
-                    <!--<groupId>org.slf4j</groupId>-->
-                    <!--<artifactId>slf4j-log4j12</artifactId>-->
-                <!--</exclusion>-->
-            <!--</exclusions>-->
-        <!--</dependency>-->
        <dependency>
            <groupId>com.vdurmont</groupId>
            <artifactId>semver4j</artifactId>
@@ -73,13 +59,14 @@
            <version>1.3</version>
        </dependency>
        <dependency>
-            <groupId>org.codehaus.groovy</groupId>
+            <groupId>org.apache.groovy</groupId>
            <artifactId>groovy-cli-picocli</artifactId>
+            <version>${groovy.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-text</artifactId>
-            <version>1.9</version>
+            <version>1.10.0</version>
            <scope>compile</scope>
        </dependency>
    </dependencies>
@@ -90,13 +77,13 @@
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
-                    <mainClass>skills.NpmProjBuilder</mainClass>
+                    <mainClass>skills.TestDashboardBackwardCompat</mainClass>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.codehaus.gmavenplus</groupId>
                <artifactId>gmavenplus-plugin</artifactId>
-                <version>1.11.0</version>
+                <version>2.1.0</version>
                <executions>
                    <execution>
                        <goals>
@@ -150,6 +137,7 @@
                            <licenseMerges>
                                <licenseMerge>The Apache Software License, Version 2.0|Apache License, Version 2.0</licenseMerge>
                                <licenseMerge>The Apache Software License, Version 2.0|Apache 2</licenseMerge>
+                                <licenseMerge>The Apache Software License, Version 2.0|Apache-2.0</licenseMerge>
                                <licenseMerge>The Apache Software License, Version 2.0|The Apache License, Version 2.0</licenseMerge>
                                <licenseMerge>The Apache Software License, Version 2.0|The Apache Software License, version 2.0</licenseMerge>
                                <licenseMerge>Eclipse Public License - Version 1.0|Eclipse Public License 1.0</licenseMerge>
@@ -11,10 +11,9 @@
 # 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.
-spring.datasource.url=jdbc:h2:mem:skills
-spring.datasource.driverClassName=org.h2.Driver
-spring.datasource.username=sa
-spring.datasource.password=
+spring.datasource.username = postgres
+spring.datasource.url = jdbc:postgresql://localhost:5432/skills
+spring.datasource.password = skillsPassword
 spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.web.servlet.error.ErrorMvcAutoConfiguration

 logging.level.org.springframework.security.web.access.intercept.FilterSecurityInterceptor=DEBUG
@@ -1,3 +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.

 spring.security.oauth2.client.registration.hydra.client-id: skilltree-test
 spring.security.oauth2.client.registration.hydra.client-secret: client-secret
@@ -16,4 +16,6 @@ skills.service.password=password
 skills.service.serviceUrl=http://localhost:8080
 skills.service.projectId=proj1
 skills.service.authenticator=http://localhost:8090/api/users/user1/token
+skills.service.proxiedProjectId=proj2
+skills.service.proxiedUserId=user2
 logging.pattern.console=EXAMPLES-APP %clr(%d{yy-MM-dd E HH:mm:ss.SSS}){blue} %clr(%-5p) %clr(${PID}){faint} %clr(---){faint} %clr([%8.15t]){cyan} %clr(%-40.40logger{0}){blue} %clr(:){red} %clr(%m){faint}%n
@@ -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.
+*/
+package skills
+
+import org.springframework.boot.context.properties.ConfigurationProperties
+import org.springframework.stereotype.Component
+
+@Component
+@ConfigurationProperties(prefix="skills")
+class Config {
+
+    List<VersionProps> versionProps
+
+    static class VersionProps {
+        String version
+        String altJavaHomeEnv
+    }
+
+}
@@ -30,14 +30,6 @@ class NpmProj {
    // indicates whether it has node_modules/@skilltree/
    boolean hasLinksToOtherProjects = true

-    // need extra npm link setup for react apps/modules
-    boolean reactModule = false
-    boolean reactApp = false
-
-    // need extra npm link setup for angular apps/modules
-    boolean angularModule = false
-    boolean angularApp = false
-
    // for backwards compatibility testing
    String initialVersion

@@ -65,24 +57,6 @@ class NpmProj {
        return skillsModules
    }

-    File getReactModuleDir(boolean checkForExistence = true) {
-        File reactModule = new File(getNodeModulesDir(checkForExistence), "react/")
-        if (checkForExistence) {
-            assert reactModule.exists()
-        }
-        return reactModule
-    }
-
-    File getAngularModuleLinkDir(boolean checkForExistence = true) {
-        // dist/skilltree/skills-client-ng
-        File ngModuleLinkDir = new File(new File(new File(loc, "dist/"), "skilltree"), this.name)
-        if (checkForExistence) {
-            assert ngModuleLinkDir.exists()
-        }
-        return ngModuleLinkDir
-    }
-
-
    static JsonSlurper slurper = new JsonSlurper()

    def getPackageJson() {
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.96 159.93"><defs><style>.cls-1{fill:#09d3ac;}</style></defs><path class="cls-1" d="M141.35,73.27c0-6.89-8.11-13-20.58-16.73,3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63s8.12,13,20.59,16.72c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26C133.27,86.18,141.34,80.12,141.35,73.27ZM96.56,42.06c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM71.77,78.94c.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88c-2.71-.39-5.34-.88-7.84-1.46C69.86,84,70.75,81.5,71.77,78.94ZM69,59.9c2.53-.59,5.18-1.08,7.93-1.46-1,1.48-1.86,3-2.76,4.59s-1.69,3-2.46,4.52Q70.18,63.65,69,59.9Zm5.21,13.34q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55s2.88,5.22,4.12,7.83c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55S75.5,75.85,74.25,73.24Zm32.86-14.77c2.72.38,5.35.87,7.84,1.45-.74,2.47-1.62,5-2.64,7.55-.79-1.5-1.61-3-2.48-4.51S108,59.93,107.11,58.47Zm2.76,24.92q1.29-2.27,2.46-4.53c1,2.6,2,5.16,2.7,7.66-2.52.59-5.17,1.07-7.92,1.45Q108.52,85.75,109.87,83.39ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Zm-22.18-12A4.82,4.82,0,0,1,72.29,34a13.11,13.11,0,0,1,5.19,1.31,39.07,39.07,0,0,1,10,6.78l1.17,1.07a98.49,98.49,0,0,0-8.16,10,98.88,98.88,0,0,0-12.65,2.06c-.44-1.94-.8-3.84-1-5.67C65.8,42,67,36.24,69.81,34.6ZM64.53,85.26a58.75,58.75,0,0,1-5.54-2c-7.1-3-11.5-6.85-11.5-10.14S51.91,66,59,63.05a57.63,57.63,0,0,1,5.44-1.94A97.93,97.93,0,0,0,69,73.25,98.72,98.72,0,0,0,64.53,85.26Zm23,19.1c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm4.57-4.51c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm10.8-28.44c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14,98.1,98.1,0,0,0,4.49-12,58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14S132.17,80.42,125.07,83.37ZM92,82.39a9.18,9.18,0,1,0-9.17-9.19A9.17,9.17,0,0,0,92,82.39ZM31,17.88V128.53H153.07V17.88ZM148.3,123.77H35.78V22.65H148.3Zm-85-33.9c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26,12.41-3.72,20.48-9.78,20.49-16.63s-8.11-13-20.58-16.73c3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63S50.84,86.13,63.31,89.87Zm24.21,14.49c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm24.79-36.89c-.79-1.5-1.61-3-2.48-4.51s-1.8-3-2.72-4.49c2.72.38,5.35.87,7.84,1.45C114.21,62.39,113.33,64.92,112.31,67.47Zm2.72,19c-2.52.59-5.17,1.07-7.92,1.45q1.41-2.22,2.76-4.58t2.46-4.53C113.37,81.46,114.28,84,115,86.52Zm-5.21-13.35c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55s-2.87-5.22-4.12-7.83q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55S108.58,70.56,109.82,73.17ZM77,88c-2.71-.39-5.34-.88-7.84-1.46.74-2.46,1.63-5,2.65-7.55.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88ZM74.21,63c-.87,1.5-1.69,3-2.46,4.52Q70.18,63.65,69,59.9c2.53-.59,5.18-1.08,7.93-1.46C76,59.92,75.11,61.45,74.21,63ZM92.09,99.85c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm5.28-50.66a58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14s-4.41,7.16-11.51,10.11c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14A98.1,98.1,0,0,0,119.55,61.15Zm-23-19.09c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Line truncated