fix(ci): update lighthouse appLoc

fix: build issues (#245 )
- resolve HOT v17 render loops caused by unstable settings bind - tests: pin locale to en-GB - improve accessibility - improve initial bundle size, split and lazy-load feature modules Reviewed-on: #245 Co-authored-by: s <sead@4gl.io> Co-committed-by: s <sead@4gl.io>
2026-06-16 23:51:10 +02:00 · 2026-06-16 21:41:24 +00:00 · 2026-06-15 14:42:18 +02:00 · 2026-06-15 13:42:57 +02:00 · 2026-06-15 13:40:38 +02:00 · 2026-06-15 13:10:13 +02:00
257 changed files with 25140 additions and 20953 deletions
@@ -3,10 +3,21 @@
 # Using `--silent` helps for showing any errs in the first line of the response
 # The first line is picked up by the VS Code GIT UI popup when rc is not 0

-if npm run --silent lint:silent ; then
+if npm run --silent lint:check:silent ; then
    exit 0
 else
-    npm run --silent lint:fix
+    npm run --silent lint:fix:silent
    echo "❌ Prettier check failed! We ran lint:fix for you. Please add & commit again."
    exit 1
 fi
+
+## Avoid large commits
+# https://www.backblaze.com/blog/how-many-bytes-are-in-a-megabyte-really/
+size_limit=$((2 * 2**20)) # 2mbs
+# https://git-scm.com/docs/git-rev-list#Documentation/git-rev-list.txt---disk-usage
+commit_size=$(git rev-list --disk-usage HEAD^..HEAD)
+test "$commit_size" -lt "$size_limit" || (
+  echo "Commit size is too large: $commit_size > $size_limit"
+  echo "Force commit using --no-verify"
+  exit 1
+)
@@ -0,0 +1 @@
+* text=auto eol=lf
@@ -2,39 +2,53 @@ name: Build
 run-name: Running Lint Check and Licence checker on Pull Request
 on: [pull_request]

+env:
+  NODE_VERSION: '24.15.0'
+
 jobs:
  Build-and-ng-test:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 20.14.0
+          node-version: ${{ env.NODE_VERSION }}

      - name: Install Google Chrome
        run: |
-          wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
-          echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
          apt-get update
-          apt-get install -y google-chrome-stable xvfb
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb

      - name: Write .npmrc file
-        run: echo "$NPMRC" > client/.npmrc
+        run: echo "$NPMRC" >> client/.npmrc
        shell: bash
        env:
          NPMRC: ${{ secrets.NPMRC}}

-      - name: Lint check
-        run: npm run lint:check
-
      - name: Install dependencies
        run: |
          cd client
          # Decrypt and Install sheet
-          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
+          echo "${{ secrets.SHEET_PWD }}" | \
+            gpg --batch --yes --passphrase-fd 0 \
+            --output ./libraries/sheet-crypto.tgz \
+            --decrypt ./libraries/sheet-crypto.tgz.gpg
          npm ci

+      - name: Check audit
+        # Audit should fail and stop the CI if critical vulnerability found
+        run: |
+          npm audit --audit-level=critical --omit=dev
+          cd ./sas
+          npm audit --audit-level=critical --omit=dev
+          cd ../client
+          npm audit --audit-level=critical --omit=dev
+
+      - name: Lint check
+        run: npm run lint:check
+
      - name: Licence checker
        run: |
          cd client
@@ -52,26 +66,33 @@ jobs:

  Build-and-test-development:
    runs-on: ubuntu-latest
-    needs: Build-production-and-ng-test
+    needs: Build-and-ng-test
+    env:
+      CHROME_BIN: /usr/bin/google-chrome
+      # Pin OS locale
+      LANG: en_GB.UTF-8
+      LC_ALL: en_GB.UTF-8

    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 20.14.0
+          node-version: ${{ env.NODE_VERSION }}

      - name: Write .npmrc file
        run: |
          touch client/.npmrc
          echo '${{ secrets.NPMRC}}' > client/.npmrc

-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
-      - run: apt -y install jq
+      - name: Install system dependencies
+        run: |
+          apt-get update
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
+          apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb jq zip locales
+          # Generate the en_GB.UTF-8 locale referenced by LANG/LC_ALL
+          locale-gen en_GB.UTF-8
+          update-locale LANG=en_GB.UTF-8 LC_ALL=en_GB.UTF-8

      - name: Write cypress credentials
        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
@@ -86,17 +107,18 @@ jobs:
          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
          npm ci

-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
+      - name: Setup and start SASjs server
+        run: |
+          npm i -g pm2
+          curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+          unzip linux.zip
+          touch .env
+          echo RUN_TIMES=js >> .env
+          echo NODE_PATH=node >> .env
+          echo CORS=enable >> .env
+          echo WHITELIST=http://localhost:4200 >> .env
+          cat .env
+          pm2 start api-linux --wait-ready

      - name: Deploy mocked services
        run: |
@@ -106,12 +128,8 @@ jobs:
          sasjs cbd -t server-ci
          # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json

-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
      - name: Prepare and run frontend and cypress
+        timeout-minutes: 35
        run: |
          cd ./client
          mv ./cypress.env.example.json ./cypress.env.json
@@ -126,11 +144,14 @@ jobs:
          replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
          cat ./cypress.config.ts
          # Start frontend and run cypress
-          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
+          # timeout 1800: SIGTERM after 30 min so Cypress can flush video/screenshots
+          # before the outer timeout-minutes hard-kills the step (avoids silent multi-hour hangs)
+          npx ng serve --host 0.0.0.0 --port 4200 & npx wait-on http://localhost:4200 && timeout 1800 npx cypress run --browser chrome --spec "cypress/e2e/csv-limited.cy.ts,cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"

      - name: Zip Cypress videos
        if: always()
        run: |
+          mkdir -p ./client/cypress/videos
          zip -r cypress-videos ./client/cypress/videos

      - name: Add cypress videos artifacts
@@ -0,0 +1,91 @@
+name: Lighthouse Checks
+run-name: Running Lighthouse Performance and Accessibility Checks on Pull Request
+on: [pull_request]
+
+env:
+  NODE_VERSION: '24.15.0'
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install Google Chrome
+        run: |
+          apt-get update
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
+
+      - name: Install global packages
+        run: npm i -g pm2 @sasjs/cli wait-on
+
+      - name: Setup and start SASjs server
+        run: |
+          touch .env
+          echo RUN_TIMES=js >> .env
+          echo NODE_PATH=node >> .env
+          echo CORS=enable >> .env
+          echo WHITELIST=http://localhost:4200 >> .env
+          cat .env
+          curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+          unzip linux.zip
+          pm2 start api-linux --wait-ready
+
+      - name: Write .npmrc file
+        run: echo "$NPMRC" > client/.npmrc
+        shell: bash
+        env:
+          NPMRC: ${{ secrets.NPMRC}}
+
+      - name: Install npm dependencies
+        run: |
+          cd client
+          # Decrypt and Install sheet
+          echo "${{ secrets.SHEET_PWD }}" | \
+            gpg --batch --yes --passphrase-fd 0 \
+            --output ./libraries/sheet-crypto.tgz \
+            --decrypt ./libraries/sheet-crypto.tgz.gpg
+          npm ci
+          npm install -g replace-in-files-cli
+
+      - name: Update appLoc in index.html
+        run: |
+          cd client
+          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/Public/app/devtest"' ./src/index.html
+
+      - name: Build Frontend
+        run: |
+          cd client
+          npm run build
+
+      - name: Deploy JS mocked services and frontend to the local SASjs Server instance
+        run: |
+          cd sas/mocks
+          npm ci
+          sasjs cbd -t server-ci
+
+      - name: Start frontend server
+        run: |
+          cd client
+          npx ng serve --host 0.0.0.0 --port 4200 &
+          wait-on http://localhost:4200
+
+      - name: Run Lighthouse CI
+        run: |
+          cd client
+          npx lhci autorun
+
+      - name: Lighthouse Result Artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: Lighthouse results
+          path: client/lighthouse-reports
+          include-hidden-files: true
@@ -5,27 +5,31 @@ on:
    branches:
      - main

+env:
+  NODE_VERSION: '24.5.0'
+
 jobs:
  Build-production-and-ng-test:
    runs-on: ubuntu-latest
+    env:
+      CHROME_BIN: /usr/bin/google-chrome

    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 20.14.0
+          node-version: ${{ env.NODE_VERSION }}

      - name: Write .npmrc file
        run: |
-         touch client/.npmrc
-         echo '${{ secrets.NPMRC}}' > client/.npmrc
+          touch client/.npmrc
+          echo '${{ secrets.NPMRC}}' > client/.npmrc

      - name: Install Chrome for Angular tests
        run: |
          apt-get update
          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-          apt install -y ./google-chrome*.deb;
-          export CHROME_BIN=/usr/bin/google-chrome
+          apt install -y ./google-chrome*.deb

      - name: Write cypress credentials
        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
@@ -41,11 +45,11 @@ jobs:
          npm ci

      - name: Check audit
-      # Audit should fail and stop the CI if critical vulnerability found
+        # Audit should fail and stop the CI if critical vulnerability found
        run: |
-          npm audit --audit-level=critical --omit=dev
+          npm audit --omit=dev
          cd ./sas
-          npm audit --audit-level=critical --omit=dev
+          npm audit --omit=dev
          cd ../client
          npm audit --audit-level=critical --omit=dev

@@ -63,25 +67,32 @@ jobs:
  Build-and-test-development:
    runs-on: ubuntu-latest
    needs: Build-production-and-ng-test
+    env:
+      CHROME_BIN: /usr/bin/google-chrome
+      # Pin OS locale
+      LANG: en_GB.UTF-8
+      LC_ALL: en_GB.UTF-8

    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 20.14.0
+          node-version: ${{ env.NODE_VERSION }}

      - name: Write .npmrc file
        run: |
-         touch client/.npmrc
-         echo '${{ secrets.NPMRC}}' > client/.npmrc
+          touch client/.npmrc
+          echo '${{ secrets.NPMRC}}' > client/.npmrc

-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
-      - run: apt -y install jq
+      - name: Install system dependencies
+        run: |
+          apt-get update
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb
+          apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb jq zip locales
+          # Generate the en_GB.UTF-8 locale referenced by LANG/LC_ALL
+          locale-gen en_GB.UTF-8
+          update-locale LANG=en_GB.UTF-8 LC_ALL=en_GB.UTF-8

      - name: Write cypress credentials
        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
@@ -96,17 +107,18 @@ jobs:
          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
          npm ci

-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
+      - name: Setup and start SASjs server
+        run: |
+          npm i -g pm2
+          curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+          unzip linux.zip
+          touch .env
+          echo RUN_TIMES=js >> .env
+          echo NODE_PATH=node >> .env
+          echo CORS=enable >> .env
+          echo WHITELIST=http://localhost:4200 >> .env
+          cat .env
+          pm2 start api-linux --wait-ready

      - name: Deploy mocked services
        run: |
@@ -116,11 +128,6 @@ jobs:
          sasjs cbd -t server-ci
          # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json

-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
      - name: Prepare and run frontend and cypress
        run: |
          cd ./client
@@ -136,11 +143,12 @@ jobs:
          replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
          cat ./cypress.config.ts
          # Start frontend and run cypress
-          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
+          npx ng serve --host 0.0.0.0 --port 4200 & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/csv-limited.cy.ts,cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"

      - name: Zip Cypress videos
        if: always()
        run: |
+          mkdir -p ./client/cypress/videos
          zip -r cypress-videos ./client/cypress/videos

      - name: Add cypress videos artifacts
@@ -155,10 +163,10 @@ jobs:
    needs: [Build-production-and-ng-test, Build-and-test-development]

    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 20.14.0
+          node-version: ${{ env.NODE_VERSION }}

      - name: Write .npmrc file
        run: |
@@ -168,17 +176,11 @@ jobs:
        env:
          NPMRC: ${{ secrets.NPMRC}}

-      - name: Install packages
+      - name: Install system packages
        run: |
          apt-get update
-          apt-get install zip -y
-          # sasjs cli is used to compile & build the SAS services
+          apt-get install -y zip jq doxygen
          npm i -g @sasjs/cli
-          # jq is used to parse the release JSON
-          apt-get install jq -y
-          # doxygen is used for the SASJS docs
-          apt-get update
-          apt-get install doxygen -y

      - name: Frontend Preliminary Build
        description: We want to prevent creating empty release if frontend fails
@@ -228,6 +230,8 @@ jobs:
          cp sasjs/utils/favicon.ico ../client/dist/favicon.ico
          sasjs c -t server
          rm -rf sasjsbuild/tests
+          server_apploc="/Public/app/dc"
+          sed -i "s|apploc=\"[^\"]*\"|apploc=\"${server_apploc}\"|g" sasjsbuild/services/web/index.html
          sasjs b -t server
          cp sasjsbuild/server.json.zip ./sasjs_server.json.zip

@@ -14,6 +14,7 @@ client/documentation
 client/**/sheet-crypto.tgz
 client/.nx
 client/libraries/sheet-crypto.tgz
+client/lighthouse-reports
 cypress.env.json
 sasjsbuild
 sasjsresults
@@ -21,3 +22,4 @@ sasjsresults
 .sasjsrc
 client/.npmrc
 *~
+.lighthouseci
@@ -1 +1,4 @@
 legacy-peer-deps=true
+ignore-scripts=true
+save-exact=true
+fund=false
@@ -1,3 +1,267 @@
+## [7.8.2](https://git.datacontroller.io/dc/dc/compare/v7.8.1...v7.8.2) (2026-05-20)
+
+
+### Bug Fixes
+
+* bumping ws package ([2382a55](https://git.datacontroller.io/dc/dc/commit/2382a559a5ac32b0f815776a90207650d5809ba6))
+* enabling version restore for non admin users ([5d889d8](https://git.datacontroller.io/dc/dc/commit/5d889d824cc2f8e4ea089cbb578453125dc4ba6c))
+
+## [7.8.1](https://git.datacontroller.io/dc/dc/compare/v7.8.0...v7.8.1) (2026-05-15)
+
+
+### Bug Fixes
+
+* **sasjs:** enable runAsTask ([f1a26e1](https://git.datacontroller.io/dc/dc/commit/f1a26e132eba7fa2ac64754940b52ea46c6619b3))
+
+# [7.8.0](https://git.datacontroller.io/dc/dc/compare/v7.7.3...v7.8.0) (2026-05-15)
+
+
+### Bug Fixes
+
+* enabling DSN=*ALL* in MPE_SECURITY ([7d94cb2](https://git.datacontroller.io/dc/dc/commit/7d94cb2ae4a3f6c1fa1011ae0fced7083a2f2793))
+* providing default values for RULE_ACTIVE on MPE_VALIDATIONS ([f031b4e](https://git.datacontroller.io/dc/dc/commit/f031b4eb8925397e60dcc739a721cfbbb6da8dff))
+* switch away from api usage for CASLIB metadata ([ce921a0](https://git.datacontroller.io/dc/dc/commit/ce921a032a8970b8078a463a41da884e1fa71bc3))
+* use correct debug param for runAsTask ([bb80476](https://git.datacontroller.io/dc/dc/commit/bb8047676749814d3b86eea666726dbe4bf5f270))
+
+
+### Features
+
+* add runAsTask config attribute parser ([1635bc9](https://git.datacontroller.io/dc/dc/commit/1635bc9c451bc221f386241007f594096f114b4f))
+* enabling *ALL* option by default in MPE_SECURITY (DSN col) ([93d4ab6](https://git.datacontroller.io/dc/dc/commit/93d4ab65acce7b5b35e448146f9893964ad2cca3))
+
+## [7.7.3](https://git.datacontroller.io/dc/dc/compare/v7.7.2...v7.7.3) (2026-05-12)
+
+
+### Bug Fixes
+
+* move cas session assign to settings.sas and abort when lib is unassigned ([65f0b97](https://git.datacontroller.io/dc/dc/commit/65f0b979a401277b3e070d409659ae3fae2ff8c0))
+
+## [7.7.2](https://git.datacontroller.io/dc/dc/compare/v7.7.1...v7.7.2) (2026-05-07)
+
+
+### Bug Fixes
+
+* **client:** bundle Metropolis font locally to satisfy CSP ([9546fcd](https://git.datacontroller.io/dc/dc/commit/9546fcd6312f3e81f746ef6e32ef398810ed434a))
+* **client:** clear angular build cache on font strip to avoid stale dist ([503cb08](https://git.datacontroller.io/dc/dc/commit/503cb08b2fa40397434189f9c20eff3358eb7010))
+* **client:** postinstall removal of Metropolis [@font-face](https://git.datacontroller.io/font-face) from @clr/ui ([e6397ce](https://git.datacontroller.io/dc/dc/commit/e6397cecc13afe2a9238bdfb2b4b9b81f38d055c))
+* **client:** serve text-security-disc font locally ([80ce80e](https://git.datacontroller.io/dc/dc/commit/80ce80ece40012e59c7cd0340b4aa9a9aca46443))
+* **editor:** preserve numeric type for SAS num cols with static SOFTSELECT/HARDSELECT ([05a3289](https://git.datacontroller.io/dc/dc/commit/05a328976ea3d1d6ef7559850369aa580f0d067f))
+
+## [7.7.1](https://git.datacontroller.io/dc/dc/compare/v7.7.0...v7.7.1) (2026-05-05)
+
+
+### Bug Fixes
+
+* **client:** bump adapter ([d26f7d2](https://git.datacontroller.io/dc/dc/commit/d26f7d2511008634124c7d6fde115abb43db9c43))
+* **sas:** bump cli ([d60029d](https://git.datacontroller.io/dc/dc/commit/d60029deae0ec21f3b8570461e2a4ca041d58f72))
+
+# [7.7.0](https://git.datacontroller.io/dc/dc/compare/v7.6.0...v7.7.0) (2026-05-04)
+
+
+### Bug Fixes
+
+* bump adapter to 4.16.6 ([1707f38](https://git.datacontroller.io/dc/dc/commit/1707f3802a97de8c659f1a88c92fc917e8a30615))
+* remove data:image/svg+xml CSP violation, use class instead changing style directly ([d66eb5d](https://git.datacontroller.io/dc/dc/commit/d66eb5dfc2dbb01f1e6c0c7d15fc2ad2a39dd829))
+* remove WORK, SASUSER and CASUSER as library options.  [#224](https://git.datacontroller.io/dc/dc/issues/224) ([ec66631](https://git.datacontroller.io/dc/dc/commit/ec66631a33aabb8ab2f92fe22c15440127085782))
+
+
+### Features
+
+* auto-save CAS tables [#224](https://git.datacontroller.io/dc/dc/issues/224) ([40d04a5](https://git.datacontroller.io/dc/dc/commit/40d04a53c4c00183116bdbd08397e0f2ffb1f578))
+* autoload CAS tables. [#224](https://git.datacontroller.io/dc/dc/issues/224) ([d5ebb01](https://git.datacontroller.io/dc/dc/commit/d5ebb01ce381f5f4ec06de041f3ab9e632c02e43))
+
+# [7.6.0](https://git.datacontroller.io/dc/dc/compare/v7.5.0...v7.6.0) (2026-04-03)
+
+
+### Bug Fixes
+
+* add label and tooltip for libref download, sanitise input ([52d5803](https://git.datacontroller.io/dc/dc/commit/52d58036a40e25847e900f9b04a77dbcc409c12b))
+
+
+### Features
+
+* configurable email alerts.  Closes [#217](https://git.datacontroller.io/dc/dc/issues/217) ([2ccf0d1](https://git.datacontroller.io/dc/dc/commit/2ccf0d11000129629a0665421135b7530af9892f))
+
+# [7.5.0](https://git.datacontroller.io/dc/dc/compare/v7.4.1...v7.5.0) (2026-04-03)
+
+
+### Bug Fixes
+
+* add workflow audits, update deps ([66e98a9](https://git.datacontroller.io/dc/dc/commit/66e98a96cbd092e762b94a04660f8e17ca003ceb))
+* allow CSV uploads with licence row limit ([5b260e4](https://git.datacontroller.io/dc/dc/commit/5b260e49153dd85bc0023ad94d8a5f57b8ffa6dc)), closes [#213](https://git.datacontroller.io/dc/dc/issues/213)
+* bumping cli and pinning versions in .npmrc ([80039f4](https://git.datacontroller.io/dc/dc/commit/80039f4876c8e09dc477678e1eff58329094c9e9))
+* guard CSV upload with fileUpload licence flag ([ed40df6](https://git.datacontroller.io/dc/dc/commit/ed40df62953c3055770b5cbf50738f4a48b943cd))
+* parse embed param from window.location.hash for hash router compatibility ([0269c24](https://git.datacontroller.io/dc/dc/commit/0269c2421db245f7f5405678605cb4d4587e2a67))
+* quote CSV char values.  Closes [#215](https://git.datacontroller.io/dc/dc/issues/215) ([d9980e8](https://git.datacontroller.io/dc/dc/commit/d9980e866d1a2fe7a731ff279d73accd35003e67))
+* resolve outer promise in parseCsvFile for non-WLATIN1 path ([4ee15e1](https://git.datacontroller.io/dc/dc/commit/4ee15e1b6e83f27f279fc345e6998452a8f64d7e))
+* use XLSX for CSV row truncation to handle new lines in values ([6d590c0](https://git.datacontroller.io/dc/dc/commit/6d590c050dcd593a73464fae5604f774f016b10d))
+
+
+### Features
+
+* add embed URL parameter to hide header and back button ([b0dc441](https://git.datacontroller.io/dc/dc/commit/b0dc441d681369e06eee58288dbdbb236f930bdc)), closes [#214](https://git.datacontroller.io/dc/dc/issues/214)
+* add target libref input to config download ([a89657b](https://git.datacontroller.io/dc/dc/commit/a89657b0b81b9c531f64c0dda2714b4eb16c4bc9)), closes [#212](https://git.datacontroller.io/dc/dc/issues/212)
+* export config service to allow dclib swapping.  Closes [#212](https://git.datacontroller.io/dc/dc/issues/212) ([326c26f](https://git.datacontroller.io/dc/dc/commit/326c26fddfa88a0dc4ca79d3bd0c77c4d807f37c))
+
+## [7.4.1](https://git.datacontroller.io/dc/dc/compare/v7.4.0...v7.4.1) (2026-03-12)
+
+
+### Bug Fixes
+
+* support for SASIOSNF engine (SNOW alias) plus meta assignment ([7694d1b](https://git.datacontroller.io/dc/dc/commit/7694d1b0fb2bd0407c8598147fbae87a00d889a8))
+
+# [7.4.0](https://git.datacontroller.io/dc/dc/compare/v7.3.0...v7.4.0) (2026-02-20)
+
+
+### Bug Fixes
+
+* cli bump for mf_getscheme support ([a84ba41](https://git.datacontroller.io/dc/dc/commit/a84ba41ea9f0c97ae24f0a572b8cf5ec200f2132))
+* missing upcase on SNOW section, plus local sasjs target ([dc20064](https://git.datacontroller.io/dc/dc/commit/dc200646f7df2fd1910841f392c314532aae7581))
+
+
+### Features
+
+* SAS code changes for snowflake support ([e273e87](https://git.datacontroller.io/dc/dc/commit/e273e870efbf7875db869b760f2c7b1f39d571ae))
+
+# [7.3.0](https://git.datacontroller.io/dc/dc/compare/v7.2.8...v7.3.0) (2026-02-10)
+
+
+### Bug Fixes
+
+* bump xlsx, add crypto-shim ([8dc18b1](https://git.datacontroller.io/dc/dc/commit/8dc18b155abfc20fd0b043e0d70bbbc17e6b6811))
+* correctly applying deletes on viya, also ([46cdeb0](https://git.datacontroller.io/dc/dc/commit/46cdeb0babee6870553a41877cbe85204e7099c4))
+* crypto module requirement for sheetjs/crypto package ([505d0af](https://git.datacontroller.io/dc/dc/commit/505d0af2b3b3c1c79c65045dcaffc263e0f8e796))
+* disable parsing excel in web worker beacuse it breaks in the stream apps ([280bdee](https://git.datacontroller.io/dc/dc/commit/280bdeeb1b82f00689f46c68a3cde3f2d24bc18f))
+* Display all contexts when installing DC on Viya ([d41f88f](https://git.datacontroller.io/dc/dc/commit/d41f88f8bf5bb2c725ee3edba085e8961ab8c727))
+* **edit:** use cellValidation keys and hotDataSchema to fill in defaults on add row ([4957548](https://git.datacontroller.io/dc/dc/commit/495754816c0e757b8f8b1c0ad51246dc7b65d957))
+* enabling closeouts for UPDATE in CAS tables ([8b8e8ae](https://git.datacontroller.io/dc/dc/commit/8b8e8aec159ff2f50cfa4683bcd7a25aabb75bf8))
+* enabling rollback when the table has formatted values ([815d6e9](https://git.datacontroller.io/dc/dc/commit/815d6e97a8e304d79d48cc949ba126e02a318dc1))
+* improvements to validations ([6ceb681](https://git.datacontroller.io/dc/dc/commit/6ceb6814633691b6d4ac2cb898cfb75e9d609102))
+* remove IE checks and conditions ([ece6bd1](https://git.datacontroller.io/dc/dc/commit/ece6bd1d787d722531334fc4f1396a94cf6d92ec))
+* updates to demodata to enable auto CAS promote ([7740d2a](https://git.datacontroller.io/dc/dc/commit/7740d2ac8694295b33b40a30603d8239818896f5))
+* upgrade angular core and compiler ([aecd597](https://git.datacontroller.io/dc/dc/commit/aecd5976875a7c01189248c5f5aa3478b28c1ab2))
+* using fcopy instead of binary copy for file upload, for Viya 2026 compatibility ([716ee6e](https://git.datacontroller.io/dc/dc/commit/716ee6eba0a28f4f0a7a96b0719caf15da9b6e78))
+* **viewer:** search causing blank Handsontable ([338c7a2](https://git.datacontroller.io/dc/dc/commit/338c7a2e418c47e34331bd04718cd816f978837c)), closes [#206](https://git.datacontroller.io/dc/dc/issues/206)
+
+
+### Features
+
+* adding demo data job ([8c2aeac](https://git.datacontroller.io/dc/dc/commit/8c2aeacc85da5c106c356709cefcb412ed0a71db))
+* **dq rules:** notnull validation when invalid cell, will auto populate a default value ([96f2518](https://git.datacontroller.io/dc/dc/commit/96f2518af9e547956be5862a1322d9ab8e07369b))
+
+## [7.2.8](https://git.datacontroller.io/dc/dc/compare/v7.2.7...v7.2.8) (2026-02-06)
+
+
+### Bug Fixes
+
+* bump adapter version ([f4c8699](https://git.datacontroller.io/dc/dc/commit/f4c8699aaf0b1e01b447296978a4f6dedc8903f9))
+
+## [7.2.7](https://git.datacontroller.io/dc/dc/compare/v7.2.6...v7.2.7) (2026-02-05)
+
+
+### Bug Fixes
+
+* dclib not found error in getchangeinfo job ([86791db](https://git.datacontroller.io/dc/dc/commit/86791dbaca39034a19bf8f34efbddf898c57f2f7))
+
+## [7.2.6](https://git.datacontroller.io/dc/dc/compare/v7.2.5...v7.2.6) (2026-01-05)
+
+
+### Bug Fixes
+
+* **deps:** update angular and moment ([8c5b357](https://git.datacontroller.io/dc/dc/commit/8c5b357dd286db331a6dcdeb3fd499fe3b634288))
+
+## [7.2.5](https://git.datacontroller.io/dc/dc/compare/v7.2.4...v7.2.5) (2025-12-09)
+
+
+### Bug Fixes
+
+* (build) rebuilt package-lock files ([bfbfd55](https://git.datacontroller.io/dc/dc/commit/bfbfd55fe7e2dff3ce707763a2c7939ff365318b))
+* (deps) bump @sasjs/cli and @sasjs/core ([d7c7302](https://git.datacontroller.io/dc/dc/commit/d7c7302c12ac60f355ab9b3b1b461fcf7d0719b8))
+* (deps) bumped @sasjs/core, @sasjs/cli, @sasjs/utils and @sasjs/adapter ([af1657e](https://git.datacontroller.io/dc/dc/commit/af1657e226a4efd22cc87401a3850c4a665c2680))
+* configurable audit table on restore check ([26ce95f](https://git.datacontroller.io/dc/dc/commit/26ce95f7c1d2260f81c240cd6b058db154d997e4)), closes [#193](https://git.datacontroller.io/dc/dc/issues/193)
+* improved testing ([fb3c49a](https://git.datacontroller.io/dc/dc/commit/fb3c49aa8bfdc6acf2ae3034b885010dcdce32a6))
+* output values to intended macro variables ([43ae73c](https://git.datacontroller.io/dc/dc/commit/43ae73c5f3ad919394201f54984b61bb2a52fcfe))
+
+## [7.2.4](https://git.datacontroller.io/dc/dc/compare/v7.2.3...v7.2.4) (2025-10-14)
+
+
+### Bug Fixes
+
+* ensure reload after applying licence key ([cb1978b](https://git.datacontroller.io/dc/dc/commit/cb1978bcaf23b0bf45b5d3b78b9707fd4e48a5f4))
+* snyk report security patches ([387f512](https://git.datacontroller.io/dc/dc/commit/387f5122f1ea6dff55d23c9223f17737283a94d3))
+
+## [7.2.3](https://git.datacontroller.io/dc/dc/compare/v7.2.2...v7.2.3) (2025-10-02)
+
+
+### Bug Fixes
+
+* opening second table in viewer throws an error ([6c6b1cb](https://git.datacontroller.io/dc/dc/commit/6c6b1cbf460e5291ec746af017e764b894fff8d5))
+
+## [7.2.2](https://git.datacontroller.io/dc/dc/compare/v7.2.1...v7.2.2) (2025-09-23)
+
+
+### Bug Fixes
+
+* jsrsasign,  @sasjs/cli bump ([365f129](https://git.datacontroller.io/dc/dc/commit/365f12996db3ef50a4f4f099d5af15696c43bb42))
+
+## [7.2.1](https://git.datacontroller.io/dc/dc/compare/v7.2.0...v7.2.1) (2025-08-08)
+
+
+### Bug Fixes
+
+* removing localhost from index.html ([225e693](https://git.datacontroller.io/dc/dc/commit/225e693d1fd4381f2b8ce42fecb508f0a9e9dad8))
+
+# [7.2.0](https://git.datacontroller.io/dc/dc/compare/v7.1.1...v7.2.0) (2025-08-08)
+
+
+### Bug Fixes
+
+* **ci:** cypress dependency package not available anymore ([26cdd73](https://git.datacontroller.io/dc/dc/commit/26cdd733315ef8babe9498ce93f6eb29c587dabd))
+* **hot v16 migration:** multi dataset fixed issues, and cypress tests adapted ([712b384](https://git.datacontroller.io/dc/dc/commit/712b3848480a8769d149e00b0d2de91396022b66))
+* obsolete cypress deps ([2ba4b53](https://git.datacontroller.io/dc/dc/commit/2ba4b5383e23bff8dfeb82b0ef473e5871c94709))
+* remaining hot migrations - handsontable/angular-wrapper ([b419cd5](https://git.datacontroller.io/dc/dc/commit/b419cd507837e846e9dfcc6b729254d56cc196e6))
+
+
+### Features
+
+* lighthouse accessibility check pipeline ([670ec2c](https://git.datacontroller.io/dc/dc/commit/670ec2c71cb2d24e9d79e297a8cbc6136aa315c8))
+
+## [7.1.1](https://git.datacontroller.io/dc/dc/compare/v7.1.0...v7.1.1) (2025-07-24)
+
+
+### Bug Fixes
+
+* **viewboxes:** hot v16 fails to load because of relative height `100%` ([672dd6d](https://git.datacontroller.io/dc/dc/commit/672dd6d4f1fda27e3706dd7caa42b45922319497))
+
+# [7.1.0](https://git.datacontroller.io/dc/dc/compare/v7.0.3...v7.1.0) (2025-07-23)
+
+
+### Bug Fixes
+
+* adapter bump ([b495c41](https://git.datacontroller.io/dc/dc/commit/b495c41626c85b7c4141d9361e4d3a826efd6c05))
+* bumping CLI to 4.12.10 ([a08a717](https://git.datacontroller.io/dc/dc/commit/a08a717ca8d49e8a7d63f3fd91c6a7d42a1d6d8b))
+* bumping sasjs/core and sasjs/cli ([63e9af4](https://git.datacontroller.io/dc/dc/commit/63e9af402ed65f6be4426e76ee1376a40e6ed097))
+
+
+### Features
+
+* improving accessibility score up to 100, hot update to v16.0.1 ([71c308d](https://git.datacontroller.io/dc/dc/commit/71c308d052400ecedc03f8020a5a69471ac6b116))
+
+## [7.0.3](https://git.datacontroller.io/dc/dc/compare/v7.0.2...v7.0.3) (2025-06-26)
+
+
+### Bug Fixes
+
+* makedata vars ([e7cb471](https://git.datacontroller.io/dc/dc/commit/e7cb471c0b60058b03fe8cbed5e3e2e70dd72e26))
+* viya deploy makedata missing params ([7a82316](https://git.datacontroller.io/dc/dc/commit/7a8231615cb56710351fae5868e8fdeed54d180c))
+
+## [7.0.2](https://git.datacontroller.io/dc/dc/compare/v7.0.1...v7.0.2) (2025-06-21)
+
+
+### Bug Fixes
+
+* **viya deploy:** run makedata in new window to ensure logs are available for the user ([0b4042a](https://git.datacontroller.io/dc/dc/commit/0b4042af6011fdc65cfaaa5d4b1d8f48cd67f3b3))
+
 ## [7.0.1](https://git.datacontroller.io/dc/dc/compare/v7.0.0...v7.0.1) (2025-06-11)


@@ -38,4 +38,27 @@ For further information:
 * Docs:  https://docs.datacontroller.io
 * Code: https://code.datacontroller.io

-For support, contact support@4gl.io or reach out on [Matrix](https://matrix.to/#/#dc:4gl.io)!
+For support, contact support@4gl.io or reach out on [Matrix](https://matrix.to/#/#dc:4gl.io)!
+
+## Development
+
+### Lighthouse CI
+
+This project includes automated Lighthouse performance and accessibility checks that run on pull requests. The checks ensure:
+
+- **Accessibility Score**: Minimum 1.0 (100%) median score across all tested pages
+
+The Lighthouse CI workflow:
+1. Sets up the development environment with SASjs server and mocked services
+2. Builds and serves the Angular frontend
+3. Installs Chrome and runs `lhci autorun` (Lighthouse CI) against key pages
+4. Uploads results as artifacts for review
+
+To run Lighthouse checks locally:
+```bash
+cd client
+npm install
+npm run lighthouse
+```
+
+Configuration is in `client/lighthouserc.js` (URL list, `desktop` preset, Chrome flags, assertions).
@@ -25,6 +25,7 @@
          "options": {
            "allowedCommonJsDependencies": [
              "handsontable",
+              "exceljs",
              "core-js",
              "pikaday",
              "querystring",
@@ -41,6 +42,8 @@
              "zone.js",
              "text-encoding",
              "crypto-js/md5",
+              "crypto-js/sha1",
+              "crypto-js/sha512",
              "buffer",
              "numbro",
              "@clr/icons",
@@ -51,26 +54,23 @@
              "base64-arraybuffer",
              "@handsontable/formulajs"
            ],
-            "polyfills": [
-              "src/polyfills.ts",
-              "zone.js"
-            ],
+            "polyfills": ["src/polyfills.ts", "zone.js"],
            "outputPath": "dist",
-            "resourcesOutputPath": "images",
            "index": "src/index.html",
-            "main": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
-              "src/images"
+              {
+                "glob": "**/*",
+                "input": "src/images",
+                "output": "images",
+                "ignore": ["spinner.svg", "caret.svg"]
+              }
            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "node_modules/marked/marked.min.js"
-            ],
-            "webWorkerTsConfig": "tsconfig.worker.json"
+            "styles": ["src/styles.scss"],
+            "scripts": ["node_modules/marked/marked.min.js"],
+            "webWorkerTsConfig": "tsconfig.worker.json",
+            "main": "src/main.ts"
          },
          "configurations": {
            "production": {
@@ -103,9 +103,7 @@
              }
            },
            "development": {
-              "vendorChunk": true,
              "extractLicenses": false,
-              "buildOptimizer": false,
              "sourceMap": true,
              "optimization": false,
              "namedChunks": true
@@ -134,20 +132,11 @@
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
-            "polyfills": [
-              "src/polyfills.ts",
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["src/polyfills.ts", "zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
            "scripts": [],
            "karmaConfig": "karma.conf.js",
            "webWorkerTsConfig": "tsconfig.worker.json"
@@ -156,10 +145,7 @@
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
      }
@@ -1,13 +1,13 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress'

 export default defineConfig({
-  reporter: "mochawesome",
+  reporter: 'mochawesome',

  reporterOptions: {
-    reportDir: "cypress/results",
+    reportDir: 'cypress/results',
    overwrite: false,
    html: true,
-    json: false,
+    json: false
  },
  viewportHeight: 900,
  viewportWidth: 1600,
@@ -16,24 +16,32 @@ export default defineConfig({
  defaultCommandTimeout: 30000,

  env: {
-    hosturl: "http://localhost:4200",
-    appLocation: "",
-    site_id_SAS9: "70221618",
-    site_id_SASVIYA: "70253615",
-    site_id_SASJS: "123",
-    serverType: "SASJS",
-    libraryToOpenIncludes_SASVIYA: "viya",
-    libraryToOpenIncludes_SAS9: "dc",
-    libraryToOpenIncludes_SASJS: "dc",
+    hosturl: 'http://localhost:4200',
+    appLocation: '',
+    site_id_SAS9: '70221618',
+    site_id_SASVIYA: '70253615',
+    site_id_SASJS: '123',
+    serverType: 'SASJS',
+    libraryToOpenIncludes_SASVIYA: 'viya',
+    libraryToOpenIncludes_SAS9: 'dc',
+    libraryToOpenIncludes_SASJS: 'dc',
    debug: false,
    screenshotOnRunFailure: false,
    longerCommandTimeout: 50000,
-    testLicenceUserLimits: false,
+    testLicenceUserLimits: false
  },

  e2e: {
+    video: true,
    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
-  },
-});
+      // Pin the browser locale so locale-formatted cells (intl-date/time/datetime)
+      // render deterministically regardless of the runner's system locale.
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.family === 'chromium' && browser.name !== 'electron') {
+          launchOptions.args.push('--lang=en-GB')
+        }
+        return launchOptions
+      })
+    }
+  }
+})
@@ -0,0 +1,95 @@
+const username = Cypress.env('username')
+const password = Cypress.env('password')
+const hostUrl = Cypress.env('hosturl')
+const appLocation = Cypress.env('appLocation')
+const longerCommandTimeout = Cypress.env('longerCommandTimeout')
+const serverType = Cypress.env('serverType')
+const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
+const fixturePath = 'csvs/'
+
+context('csv file upload restriction (free tier): ', function () {
+  this.beforeEach(() => {
+    cy.visit(hostUrl + appLocation)
+
+    cy.get('body').then(($body) => {
+      const usernameInput = $body.find('input.username')[0]
+
+      if (usernameInput && !Cypress.dom.isHidden(usernameInput)) {
+        cy.get('input.username').type(username)
+        cy.get('input.password').type(password)
+        cy.get('.login-group button').click()
+      }
+    })
+
+    cy.get('.app-loading', { timeout: longerCommandTimeout }).should(
+      'not.exist'
+    )
+
+    // Skip licensing page if presented - continue with free tier
+    cy.url().then((url) => {
+      if (url.includes('licensing')) {
+        cy.get('button').contains('Continue with free tier').click()
+      }
+    })
+
+    visitPage('home')
+  })
+
+  it('1 | File upload is restricted on free tier', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    // Click upload button - should show feature locked modal
+    cy.get('.buttonBar button:last-child').should('exist').click()
+
+    cy.get('.modal-title').should('contain', 'Locked Feature (File Upload)')
+  })
+})
+
+const openTableFromTree = (libNameIncludes: string, tablename: string) => {
+  cy.get('.app-loading', { timeout: longerCommandTimeout })
+    .should('not.exist')
+    .then(() => {
+      cy.get('.nav-tree clr-tree > clr-tree-node', {
+        timeout: longerCommandTimeout
+      }).then((treeNodes: any) => {
+        let targetLib
+
+        for (let node of treeNodes) {
+          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
+            targetLib = node
+            break
+          }
+        }
+
+        cy.get(targetLib).within(() => {
+          cy.get('.clr-tree-node-content-container > button').click()
+
+          cy.get('.clr-treenode-link').then((innerNodes: any) => {
+            for (let innerNode of innerNodes) {
+              if (innerNode.innerText.toLowerCase().includes(tablename)) {
+                innerNode.click()
+                break
+              }
+            }
+          })
+        })
+      })
+    })
+}
+
+const attachFile = (filename: string, callback?: any) => {
+  cy.get('.buttonBar button:last-child')
+    .should('exist')
+    .click()
+    .then(() => {
+      cy.get('input[type="file"]#file-upload')
+        .attachFile(`/${fixturePath}/${filename}`)
+        .then(() => {
+          if (callback) callback()
+        })
+    })
+}
+
+const visitPage = (url: string) => {
+  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
+}
@@ -32,27 +32,26 @@ context('excel tests: ', function () {
    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')

    attachExcelFile('regular.csv', () => {
-      cy.get('#approval-btn', { timeout: 60000 })
-        .should('be.visible')
-        // .then(() => {
-        //   cy.get('#hotInstance', { timeout: 30000 })
-        //     .find('div.ht_master.handsontable')
-        //     .find('div.wtHolder')
-        //     .find('div.wtHider')
-        //     .find('div.wtSpreader')
-        //     .find('table.htCore')
-        //     .find('tbody')
-        //     .then((data) => {
-        //       let cell: any = data[0].children[0].children[1]
-        //       expect(cell.innerText).to.equal('0')
-        //       cell = data[0].children[0].children[2]
-        //       expect(cell.innerText).to.equal('44')
-        //       cell = data[0].children[0].children[3]
-        //       expect(cell.innerText).to.equal('abc')
-        //       cell = data[0].children[0].children[6]
-        //       expect(cell.innerText).to.equal('Option abc')
-        //     })
-        // })
+      cy.get('#approval-btn', { timeout: 60000 }).should('be.visible')
+      // .then(() => {
+      //   cy.get('#hotInstance', { timeout: 30000 })
+      //     .find('div.ht_master.handsontable')
+      //     .find('div.wtHolder')
+      //     .find('div.wtHider')
+      //     .find('div.wtSpreader')
+      //     .find('table.htCore')
+      //     .find('tbody')
+      //     .then((data) => {
+      //       let cell: any = data[0].children[0].children[1]
+      //       expect(cell.innerText).to.equal('0')
+      //       cell = data[0].children[0].children[2]
+      //       expect(cell.innerText).to.equal('44')
+      //       cell = data[0].children[0].children[3]
+      //       expect(cell.innerText).to.equal('abc')
+      //       cell = data[0].children[0].children[6]
+      //       expect(cell.innerText).to.equal('Option abc')
+      //     })
+      // })
    })
  })

@@ -217,11 +217,7 @@ const rejectExcel = (callback?: any) => {
    .should('contain', 'Approve')
    .then((allButtons: any) => {
      for (let approvalButton of allButtons) {
-        if (
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('approve')
-        ) {
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
          approvalButton.click()
          break
        }
@@ -34,93 +34,162 @@ context('excel multi load tests: ', function () {

  it('1 | Uploads Excel file with multiple sheets, 3 sheets including data, 2 sheets matched with dataset', (done) => {
    attachExcelFile('multi_load_test_2.xlsx', () => {
-      checkHotUserDatasetTable('hotTableUserDataset', [
-        [library, mpeXTestTable],
-        [library, mpeTablesTable]
-      ], () => {
-        cy.get('#continue-btn').trigger('click').then(() => {
-          checkIfTreeHasTables([`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`], undefined, (includes: boolean) => {
-            if (includes) {
-              // MPE_TABLES sheet does not have data so 1 error image must be shown
-              hasErrorTables(1, (valid: boolean) => {
-                if (valid) done()
-              })
-            }
-          })
-        })
-      })
+      checkHotUserDatasetTable(
+        'hotTableUserDataset',
+        [
+          [library, mpeXTestTable],
+          [library, mpeTablesTable]
+        ],
+        () => {
+          cy.get('#continue-btn')
+            .trigger('click')
+            .then(() => {
+              checkIfTreeHasTables(
+                [`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`],
+                undefined,
+                (includes: boolean) => {
+                  if (includes) {
+                    // MPE_TABLES sheet does not have data so 1 error image must be shown
+                    hasErrorTables(1, (valid: boolean) => {
+                      if (valid) done()
+                    })
+                  }
+                }
+              )
+            })
+        }
+      )
    })
  })

  it('2 | Uploads Excel file with multiple sheets, 2 sheets matched with dataset, 1 matched sheet does not have data', (done) => {
    attachExcelFile('multi_load_test_1.xlsx', () => {
-      checkHotUserDatasetTable('hotTableUserDataset', [
-        [library, mpeXTestTable],
-        [library, mpeTablesTable]
-      ], () => {
-        cy.get('#continue-btn').trigger('click').then(() => {
-          checkIfTreeHasTables([`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`], `${library}.${mpeXTestTable}`, (includes: boolean) => {
-            if (includes) {
-              cy.get('#hotTable').should('be.visible').then(() => {
-                checkHotUserDatasetTable('hotTable', [
-                  ['No', '1', 'more dummy data'],
-                  ['No', '1', 'It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told:'],
-                  ['No', '1', 'if you can fill the unforgiving minute']
-                ], () => {
-                  submitTables()
+      checkHotUserDatasetTable(
+        'hotTableUserDataset',
+        [
+          [library, mpeXTestTable],
+          [library, mpeTablesTable]
+        ],
+        () => {
+          cy.get('#continue-btn')
+            .trigger('click')
+            .then(() => {
+              checkIfTreeHasTables(
+                [`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`],
+                `${library}.${mpeXTestTable}`,
+                (includes: boolean) => {
+                  if (includes) {
+                    cy.get('#hotTable')
+                      .should('be.visible')
+                      .then(() => {
+                        checkHotUserDatasetTable(
+                          'hotTable',
+                          [
+                            ['No', '1', 'more dummy data'],
+                            [
+                              'No',
+                              '1',
+                              'It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told:'
+                            ],
+                            [
+                              'No',
+                              '1',
+                              'if you can fill the unforgiving minute'
+                            ]
+                          ],
+                          () => {
+                            submitTables()

-                  hasSuccessSubmits(2, (valid: boolean) => {
-                    if (valid) done()
-                  })
-
-                })
-              })
-            }
-          })
-        })
-      })
+                            hasSuccessSubmits(2, (valid: boolean) => {
+                              if (valid) done()
+                            })
+                          }
+                        )
+                      })
+                  }
+                }
+              )
+            })
+        }
+      )
    })
  })

  it('3 | Uploads Excel file with multiple sheets, 1 sheets has 2 tables', (done) => {
    attachExcelFile('multi_load_test_1.xlsx', () => {
-      checkHotUserDatasetTable('hotTableUserDataset', [
-        [library, mpeXTestTable],
-        [library, mpeTablesTable]
-      ], () => {
-        cy.get('#continue-btn').trigger('click').then(() => {
-          checkIfTreeHasTables([`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`], `${library}.${mpeXTestTable}`, (includes: boolean) => {
-            if (includes) {
-              cy.get('#hotTable').should('be.visible').then(() => {
-                checkHotUserDatasetTable('hotTable', [
-                  ['No', '1', 'more dummy data'],
-                  ['No', '1', 'It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told:'],
-                  ['No', '1', 'if you can fill the unforgiving minute']
-                ], () => {
-                  clickOnTreeNode('DC996664.MPE_TABLES', () => {
-                    cy.wait(1000).then(() => {
-                      cy.get('#hotTable').should('be.visible').then(() => {
-                        checkHotUserDatasetTable('hotTable', [
-                          ['No', 'DC914286', 'MPE_COLUMN_LEVEL_SECURITY'],
-                          ['No', 'DC914286', 'MPE_XLMAP_INFO'],
-                          ['No', 'DC914286', 'MPE_XLMAP_RULES']
-                        ], () => {
-                          submitTables()
+      checkHotUserDatasetTable(
+        'hotTableUserDataset',
+        [
+          [library, mpeXTestTable],
+          [library, mpeTablesTable]
+        ],
+        () => {
+          cy.get('#continue-btn')
+            .trigger('click')
+            .then(() => {
+              checkIfTreeHasTables(
+                [`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`],
+                `${library}.${mpeXTestTable}`,
+                (includes: boolean) => {
+                  if (includes) {
+                    cy.get('#hotTable')
+                      .should('be.visible')
+                      .then(() => {
+                        checkHotUserDatasetTable(
+                          'hotTable',
+                          [
+                            ['No', '1', 'more dummy data'],
+                            [
+                              'No',
+                              '1',
+                              'It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told:'
+                            ],
+                            [
+                              'No',
+                              '1',
+                              'if you can fill the unforgiving minute'
+                            ]
+                          ],
+                          () => {
+                            clickOnTreeNode('DC996664.MPE_TABLES', () => {
+                              cy.wait(1000).then(() => {
+                                cy.get('#hotTable')
+                                  .should('be.visible')
+                                  .then(() => {
+                                    checkHotUserDatasetTable(
+                                      'hotTable',
+                                      [
+                                        [
+                                          'No',
+                                          'DC914286',
+                                          'MPE_COLUMN_LEVEL_SECURITY'
+                                        ],
+                                        ['No', 'DC914286', 'MPE_XLMAP_INFO'],
+                                        ['No', 'DC914286', 'MPE_XLMAP_RULES']
+                                      ],
+                                      () => {
+                                        submitTables()

-                          hasSuccessSubmits(2, (valid: boolean) => {
-                            if (valid) done()
-                          })
-
-                        })
+                                        hasSuccessSubmits(
+                                          2,
+                                          (valid: boolean) => {
+                                            if (valid) done()
+                                          }
+                                        )
+                                      }
+                                    )
+                                  })
+                              })
+                            })
+                          }
+                        )
                      })
-                    })
-                  })
-                })
-              })
-            }
-          })
-        })
-      })
+                  }
+                }
+              )
+            })
+        }
+      )
    })
  })

@@ -142,25 +211,31 @@ const attachExcelFile = (excelFilename: string, callback?: any) => {
    })
 }

-const checkHotUserDatasetTable = (hotId: string, dataToContain: any[][], callback?: () => void) => {
+const checkHotUserDatasetTable = (
+  hotId: string,
+  dataToContain: any[][],
+  callback?: () => void
+) => {
  cy.get(`#${hotId}`, { timeout: longerCommandTimeout })
-  .find('div.ht_master.handsontable')
-  .find('div.wtHolder')
-  .find('div.wtHider')
-  .find('div.wtSpreader')
-  .find('table.htCore')
-  .find('tbody')
-  .then((data) => {
-    cy.wait(2000).then(() => {
-      for (let rowI = 0; rowI < dataToContain.length; rowI++) {
-        for (let colI = 0; colI < dataToContain[rowI].length; colI++) {
-          expect(data[0].children[rowI].children[colI]).to.contain(dataToContain[rowI][colI])
+    .find('div.ht_master.handsontable')
+    .find('div.wtHolder')
+    .find('div.wtHider')
+    .find('div.wtSpreader')
+    .find('table.htCore')
+    .find('tbody')
+    .then((data) => {
+      cy.wait(2000).then(() => {
+        for (let rowI = 0; rowI < dataToContain.length; rowI++) {
+          for (let colI = 0; colI < dataToContain[rowI].length; colI++) {
+            expect(data[0].children[rowI].children[colI]).to.contain(
+              dataToContain[rowI][colI]
+            )
+          }
        }
-      }

-      if (callback) callback()
+        if (callback) callback()
+      })
    })
-  })
 }

 const clickOnTreeNode = (clickOnNode: string, callback?: () => void) => {
@@ -174,7 +249,11 @@ const clickOnTreeNode = (clickOnNode: string, callback?: () => void) => {
  })
 }

-const checkIfTreeHasTables = (tables: string[], clickOnNode?: string, callback?: (includes: boolean) => void) => {
+const checkIfTreeHasTables = (
+  tables: string[],
+  clickOnNode?: string,
+  callback?: (includes: boolean) => void
+) => {
  cy.get('.nav-tree clr-tree > clr-tree-node').then((treeNodes: any) => {
    let datasets = tables
    let nodesCorrect = true
@@ -207,16 +286,26 @@ const submitTables = () => {
  cy.wait(1000)
 }

-const hasSuccessSubmits = (expectedNoOfSubmits: number, callback: (valid: boolean) => void) => {
-  cy.get('.nav-tree clr-tree > clr-tree-node cds-icon[status="success"]').should('be.visible').then(($nodes) => {
-    callback(expectedNoOfSubmits === $nodes.length)
-  })
+const hasSuccessSubmits = (
+  expectedNoOfSubmits: number,
+  callback: (valid: boolean) => void
+) => {
+  cy.get('.nav-tree clr-tree > clr-tree-node cds-icon[status="success"]')
+    .should('be.visible')
+    .then(($nodes) => {
+      callback(expectedNoOfSubmits === $nodes.length)
+    })
 }

-const hasErrorTables = (expectedNoOfErrors: number, callback: (valid: boolean) => void) => {
-  cy.get('.nav-tree clr-tree > clr-tree-node cds-icon[status="danger"]').should('be.visible').then(($nodes) => {
-    callback(expectedNoOfErrors === $nodes.length)
-  })
+const hasErrorTables = (
+  expectedNoOfErrors: number,
+  callback: (valid: boolean) => void
+) => {
+  cy.get('.nav-tree clr-tree > clr-tree-node cds-icon[status="danger"]')
+    .should('be.visible')
+    .then(($nodes) => {
+      callback(expectedNoOfErrors === $nodes.length)
+    })
 }

 const visitPage = (url: string) => {
@@ -234,7 +234,7 @@ context('excel tests: ', function () {
      cy.get('.btn-upload-preview', { timeout: 60000 })
        .should('be.visible')
        .then(() => {
-          cy.get('#hotInstance', { timeout: 30000 })
+          cy.get('#hotTable', { timeout: 30000 })
            .find('div.ht_master.handsontable')
            .find('div.wtHolder')
            .find('div.wtHider')
@@ -283,7 +283,7 @@ context('excel tests: ', function () {
      cy.get('.btn-upload-preview', { timeout: 60000 })
        .should('be.visible')
        .then(() => {
-          cy.get('#hotInstance', { timeout: 30000 })
+          cy.get('#hotTable', { timeout: 30000 })
            .find('div.ht_master.handsontable')
            .find('div.wtHolder')
            .find('div.wtHider')
@@ -309,6 +309,83 @@ context('excel tests: ', function () {
    })
  })

+  it('22 | Uploads password protected Excel and unlocks with correct password', (done) => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    cy.get('.buttonBar button:last-child')
+      .should('exist')
+      .click()
+      .then(() => {
+        cy.get('input[type="file"]#file-upload')
+          .attachFile(`/${fixturePath}/regular_excel_password.xlsx`)
+          .then(() => {
+            // Wait for password modal to appear
+            cy.get('#filePasswordInput', { timeout: 10000 })
+              .should('be.visible')
+              .type('123123')
+
+            // Click Unlock button
+            cy.get('.btn.btn-success-outline').should('not.be.disabled').click()
+
+            // Click away the overlay
+            cy.get('.modal-footer .btn.btn-primary', { timeout: 5000 }).click()
+
+            // Verify file loads successfully
+            cy.get('.btn-upload-preview', { timeout: 60000 })
+              .should('be.visible')
+              .then(() => {
+                submitExcel()
+                rejectExcel(done)
+              })
+          })
+      })
+  })
+
+  it('23 | Uploads password protected Excel and handles wrong password', (done) => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    cy.get('.buttonBar button:last-child')
+      .should('exist')
+      .click()
+      .then(() => {
+        cy.get('input[type="file"]#file-upload')
+          .attachFile(`/${fixturePath}/regular_excel_password.xlsx`)
+          .then(() => {
+            // First attempt: Enter wrong password
+            cy.get('#filePasswordInput', { timeout: 10000 })
+              .should('be.visible')
+              .type('wrongpassword')
+
+            cy.get('.btn.btn-success-outline').should('not.be.disabled').click()
+
+            // Verify error message appears
+            cy.get('.modal-footer .color-red', { timeout: 10000 })
+              .should('be.visible')
+              .should('contain', "Sorry that didn't work, try again.")
+
+            // Modal should still be open for retry
+            cy.get('#filePasswordInput')
+              .should('be.visible')
+              .clear()
+              .type('123123')
+
+            // Second attempt: Enter correct password
+            cy.get('.btn.btn-success-outline').should('not.be.disabled').click()
+
+            // Click away the overlay
+            cy.get('.modal-footer .btn.btn-primary', { timeout: 5000 }).click()
+
+            // Verify file loads successfully
+            cy.get('.btn-upload-preview', { timeout: 60000 })
+              .should('be.visible')
+              .then(() => {
+                submitExcel()
+                rejectExcel(done)
+              })
+          })
+      })
+  })
+
  // Large files break Cypress

  // it ('? | Uploads Excel with size of 5MB', (done) => {
@@ -399,11 +476,7 @@ const rejectExcel = (callback?: any) => {
    .should('contain', 'Approve')
    .then((allButtons: any) => {
      for (let approvalButton of allButtons) {
-        if (
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('approve')
-        ) {
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
          approvalButton.click()
          break
        }
@@ -432,11 +505,7 @@ const acceptExcel = (callback?: any) => {
    .should('contain', 'Approve')
    .then((allButtons: any) => {
      for (let approvalButton of allButtons) {
-        if (
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('approve')
-        ) {
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
          approvalButton.click()
          break
        }
@@ -455,7 +524,7 @@ const acceptExcel = (callback?: any) => {
 }

 const checkResultOfFormulaUpload = (callback?: any) => {
-  cy.get('#hotInstance', { timeout: longerCommandTimeout })
+  cy.get('#hotTable', { timeout: longerCommandTimeout })
    .find('div.ht_master.handsontable')
    .find('div.wtHolder')
    .find('div.wtHider')
@@ -470,8 +539,10 @@ const checkResultOfFormulaUpload = (callback?: any) => {
 }

 const checkResultOfXLSUpload = (callback?: any) => {
-  cy.viewport(1280, 720)
-  cy.get('#hotInstance', { timeout: 30000 })
+  // Config-default width — wide enough that the date/datetime/time columns are
+  // not virtualized away (the old 1280 width hid the trailing time columns).
+  cy.viewport(1600, 900)
+  cy.get('#hotTable', { timeout: 30000 })
    .find('div.ht_master.handsontable')
    .find('div.wtHolder')
    .find('div.wtHider')
@@ -488,19 +559,20 @@ const checkResultOfXLSUpload = (callback?: any) => {
      expect(cell.innerText).to.equal('▼\nOption 1')
      cell = data[0].children[0].children[5]
      expect(cell.innerText).to.equal('42')
+      // Cells render locale-formatted (Cypress pins --lang=en-GB); stored value
+      // stays raw ISO. date -> dd/mm/yyyy, datetime -> dd/mm/yyyy, HH:mm:ss,
+      // time -> HH:mm:ss (en-GB 24h, identical to the raw ISO time).
      cell = data[0].children[0].children[6]
-      expect(cell.innerText).to.equal('▼\n1960-02-12')
-      // When CI detached browser screen is smaller, below cells are not visible so test fails
-      // Commenting it out now until we figure out workaround
-      // cell = data[0].children[0].children[7]
-      // expect(cell.innerText).to.equal('▼\n1960-01-01 00:00:42')
-      // cell = data[0].children[0].children[8]
-      // expect(cell.innerText).to.equal('00:00:42')
+      expect(cell.innerText).to.equal('12/02/1960')
+      cell = data[0].children[0].children[7]
+      expect(cell.innerText).to.equal('01/01/1960, 00:00:42')
+      cell = data[0].children[0].children[8]
+      expect(cell.innerText).to.equal('00:00:42')

      if (callback) callback()
    })

-  cy.get('#hotInstance', { timeout: 30000 })
+  cy.get('#hotTable', { timeout: 30000 })
    .find('div.ht_master.handsontable')
    .find('div.wtHolder')
    .scrollTo('right')
@@ -16,7 +16,6 @@ context('filtering tests: ', function () {
  this.beforeEach(() => {
    cy.visit(hostUrl + appLocation, { timeout: longerCommandTimeout })

-
    visitPage('home')
  })

@@ -299,14 +298,16 @@ const setFilterWithValue = (
        cy.get('.no-values')
          .should('not.exist')
          .then(() => {
-            cy.get('.in-values-modal clr-checkbox-wrapper input').then((inputs: any) => {
-              inputs[0].click()
-              cy.get('.in-values-modal .modal-footer button').click()
+            cy.get('.in-values-modal clr-checkbox-wrapper input').then(
+              (inputs: any) => {
+                inputs[0].click()
+                cy.get('.in-values-modal .modal-footer button').click()

-              cy.get('.modal-footer .btn-success-outline').click()
+                cy.get('.modal-footer .btn-success-outline').click()

-              if (callback) callback()
-            })
+                if (callback) callback()
+              }
+            )
          })
      })

@@ -23,7 +23,6 @@ interface EditConfigTableCells {

 context('licensing tests: ', function () {
  this.beforeAll(() => {
-
    cy.loginAndUpdateValidKey()
  })

@@ -371,8 +370,6 @@ context('licensing tests: ', function () {
      })
    })
  }
-
-
 })

 const logout = (callback?: any) => {
@@ -697,11 +694,7 @@ const approveTable = (callback?: any) => {
    .should('contain', 'Approve')
    .then((allButtons: any) => {
      for (let approvalButton of allButtons) {
-        if (
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('approve')
-        ) {
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
          approvalButton.click()
          break
        }
@@ -18,7 +18,6 @@ context('liveness tests: ', function () {
  this.beforeEach(() => {
    cy.visit(hostUrl + appLocation)

-
    visitPage('home')
  })

@@ -125,11 +124,7 @@ const rejectExcel = (callback?: any) => {
    .should('contain', 'Approve')
    .then((allButtons: any) => {
      for (let approvalButton of allButtons) {
-        if (
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('approve')
-        ) {
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
          approvalButton.click()
          break
        }
@@ -76,7 +76,8 @@ context('editor tests: ', function () {
    cy.get('.viewbox-open').click()
    openTableFromViewboxTree(
      libraryToOpenIncludes,
-      viewboxes.map((viewbox) => viewbox.viewbox_table))
+      viewboxes.map((viewbox) => viewbox.viewbox_table)
+    )
    cy.get('.open-viewbox').then((viewboxNodes: any) => {
      let found = 0

@@ -91,32 +92,34 @@ context('editor tests: ', function () {

      if (found < viewboxes.length) return

-      cy.get('.viewboxes-container .viewbox', { withinSubject: null }).then((viewboxNodes: any) => {
-        for (let viewboxNode of viewboxNodes) {
-          cy.get(viewboxNode).within(() => {
-            cy.get('.table-title').then((tableTitle) => {
-              const title = tableTitle[0].innerText
-              const viewbox = viewboxes.find((vb) =>
-                title.toLowerCase().includes(vb.viewbox_table)
-              )
-
-              if (viewbox) {
-                cy.get('.ht_master.handsontable .htCore thead tr').then(
-                  (viewboxColNodes: any) => {
-                    let allColsHtml = viewboxColNodes[0].innerHTML
-
-                    for (let col of viewbox?.columns) {
-                      if (!allColsHtml.includes(col)) return
-                    }
-
-                    done()
-                  }
+      cy.get('.viewboxes-container .viewbox', { withinSubject: null }).then(
+        (viewboxNodes: any) => {
+          for (let viewboxNode of viewboxNodes) {
+            cy.get(viewboxNode).within(() => {
+              cy.get('.table-title').then((tableTitle) => {
+                const title = tableTitle[0].innerText
+                const viewbox = viewboxes.find((vb) =>
+                  title.toLowerCase().includes(vb.viewbox_table)
                )
-              }
+
+                if (viewbox) {
+                  cy.get('.ht_master.handsontable .htCore thead tr').then(
+                    (viewboxColNodes: any) => {
+                      let allColsHtml = viewboxColNodes[0].innerHTML
+
+                      for (let col of viewbox?.columns) {
+                        if (!allColsHtml.includes(col)) return
+                      }
+
+                      done()
+                    }
+                  )
+                }
+              })
            })
-          })
+          }
        }
-      })
+      )
    })
  })

@@ -395,11 +398,13 @@ context('editor tests: ', function () {
 })

 const removeAllColumns = () => {
-  cy.get('.configuration-wrapper clr-icon[shape="trash"]').then(removeNodes => {
-    for (let removeNode of removeNodes) {
-      removeNode.click()
+  cy.get('.configuration-wrapper clr-icon[shape="trash"]').then(
+    (removeNodes) => {
+      for (let removeNode of removeNodes) {
+        removeNode.click()
+      }
    }
-  })
+  )
 }

 const checkColumns = (columns: string[], callback: () => void) => {
@@ -412,7 +417,7 @@ const checkColumns = (columns: string[], callback: () => void) => {
              console.log('viewboxColNode', viewboxColNodes)
              console.log('columns', columns)
              for (let i = 0; i < viewboxColNodes.length; i++) {
-                const col = columns[i]|| ''
+                const col = columns[i] || ''
                const colNode = viewboxColNodes[i]

                if (
@@ -4,7 +4,11 @@ PRIMARY_KEY_FIELD,SOME_CHAR,SOME_DROPDOWN,SOME_NUM,SOME_DATE,SOME_DATETIME,SOME_
 2,even more dummy data,Option 3,42,12FEB1960,01JAN1960:00:00:42,0:02:22,3,44
 3,"It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told:",Option 2,1613.001,27FEB1961,01JAN1960:00:07:03,0:00:44,3,44
 4,if you can fill the unforgiving minute,Option 1,1613.0011235,02AUG1971,29MAY1973:06:12:03,0:06:52,3,44
-1010,10 bottles of beer on the wall,Option 1,0.9153696885,04MAR1962,01JAN1960:12:47:55,0:01:40,92,76
+1010,"10 bottles of beer
+
+
+
+ on the wall",Option 1,0.9153696885,04MAR1962,01JAN1960:12:47:55,0:01:40,92,76
 1011,11 bottles of beer on the wall,Option 1,0.3531217558,29MAR1960,01JAN1960:03:33:24,0:01:03,80,29
 1012,12 bottles of beer on the wall,Option 1,0.6743748717,02AUG1962,01JAN1960:07:25:59,0:00:10,16,98
 1013,13 bottles of beer on the wall,Option 1,0.1305445992,11SEP1960,01JAN1960:13:51:32,0:00:35,73,15
@@ -1,255 +0,0 @@
-const username = Cypress.env('username')
-const password = Cypress.env('password')
-const hostUrl = Cypress.env('hosturl')
-const appLocation = Cypress.env('appLocation')
-const longerCommandTimeout = Cypress.env('longerCommandTimeout')
-const serverType = Cypress.env('serverType')
-const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
-const fixturePath = 'excels_general/'
-const downloadsFolder = Cypress.config('downloadsFolder')
-
-import { deleteDownloadsFolder } from '../util/deleteDownloadFolder'
-
-context('download files test: ', function () {
-  this.beforeAll(() => {
-    cy.visit(`${hostUrl}/SASLogon/logout`)
-    cy.loginAndUpdateValidKey()
-  })
-
-  this.beforeEach(() => {
-    cy.visit(hostUrl + appLocation)
-    cy.get('input.username').type(username)
-    cy.get('input.password').type(password)
-    cy.get('.login-group button').click()
-
-    visitPage('home')
-  })
-
-  this.afterEach(() => {
-    deleteDownloadsFolder()
-  })
-
-  it('1 | downloads audit file', (done) => {
-    visitPage('approve/toapprove')
-
-    cy.get('.app-loading', { timeout: longerCommandTimeout })
-      .should('not.exist')
-      .then(() => {
-        cy.get('.btn.btn-success')
-          .should('be.visible')
-          .then((buttons) => {
-            buttons[0].click()
-            const id = buttons[0].id
-
-            checkForFileDownloaded(id, 'zip', () => done())
-          })
-      })
-  })
-
-  it('2 | downloads viewer csv', (done) => {
-    visitPage('view/data')
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openDownloadModal(() => {
-      cy.get('select')
-        .select('CSV')
-        .then(() => {
-          cy.get('.btn.btn-sm.btn-success-outline').then((button) => {
-            button.trigger('click')
-
-            const id = button[0].id
-
-            checkForFileDownloaded(id, 'csv', () => done())
-          })
-        })
-    })
-  })
-
-  it('3 | downloads viewer excel', (done) => {
-    visitPage('view/data')
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openDownloadModal(() => {
-      cy.get('select')
-        .select('Excel')
-        .then(() => {
-          cy.get('.btn.btn-sm.btn-success-outline').then((button) => {
-            button.trigger('click')
-
-            const id = button[0].id
-
-            checkForFileDownloaded(id, 'xlsx', () => done())
-          })
-        })
-    })
-  })
-
-  it('4 | downloads viewer SAS Datalines', (done) => {
-    visitPage('view/data')
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openDownloadModal(() => {
-      cy.get('select')
-        .select('SAS Datalines')
-        .then(() => {
-          cy.get('.btn.btn-sm.btn-success-outline').then((button) => {
-            button.trigger('click')
-
-            const id = button[0].id
-
-            checkForFileDownloaded(id, 'sas', () => done())
-          })
-        })
-    })
-  })
-
-  it('5 | downloads viewer SAS DDL', (done) => {
-    visitPage('view/data')
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openDownloadModal(() => {
-      cy.get('select')
-        .select('SAS DDL')
-        .then(() => {
-          cy.get('.btn.btn-sm.btn-success-outline').then((button) => {
-            button.trigger('click')
-
-            const id = button[0].id
-
-            checkForFileDownloaded(id, 'ddl', () => done(), '_')
-          })
-        })
-    })
-  })
-
-  it('6 | downloads viewer TSQL DDL', (done) => {
-    visitPage('view/data')
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openDownloadModal(() => {
-      cy.get('select')
-        .select('TSQL DDL')
-        .then(() => {
-          cy.get('.btn.btn-sm.btn-success-outline').then((button) => {
-            button.trigger('click')
-
-            const id = button[0].id
-
-            checkForFileDownloaded(id, 'ddl', () => done(), '_')
-          })
-        })
-    })
-  })
-
-  it('7 | downloads viewer PGSQL DDL', (done) => {
-    visitPage('view/data')
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openDownloadModal(() => {
-      cy.get('select')
-        .select('PGSQL DDL')
-        .then(() => {
-          cy.get('.btn.btn-sm.btn-success-outline').then((button) => {
-            button.trigger('click')
-
-            const id = button[0].id
-
-            checkForFileDownloaded(id, 'ddl', () => done(), '_')
-          })
-        })
-    })
-  })
-
-  this.afterEach(() => {
-    cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
-
-  this.afterAll(() => {
-    cy.visit(`https://sas.4gl.io/mihmed/cypress_finish`)
-  })
-})
-
-const visitPage = (url: string) => {
-  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
-}
-
-const checkForFileDownloaded = (
-  id: string,
-  extension: string,
-  callback?: any,
-  libDivider: string = '.'
-) => {
-  cy.on('url:changed', (newUrl) => {
-    console.log('newUrl', newUrl)
-  })
-
-  id = id.replace('.', libDivider)
-
-  const filename = downloadsFolder + '/' + id + '.' + extension
-  // browser might take a while to download the file,
-  // so use "cy.readFile" to retry until the file exists
-  // and has length - and we assume that it has finished downloading then
-  cy.readFile(filename, { timeout: longerCommandTimeout })
-    .should('have.length.gt', 10)
-    .then((file) => {
-      if (callback) callback()
-    })
-}
-
-const openDownloadModal = (callback?: any) => {
-  cy.get('.btn.btn-sm.btn-outline.filterSide.dropdown-toggle')
-    .click()
-    .then(() => {
-      cy.get('clr-dropdown-menu button').then((buttons) => {
-        for (let button of buttons) {
-          if (button.innerText.toLowerCase().includes('download')) {
-            button.click()
-
-            if (callback) callback()
-          }
-        }
-      })
-    })
-}
-
-const openTableFromTree = (libNameIncludes: string, tablename: string) => {
-  cy.get('.app-loading', { timeout: longerCommandTimeout })
-    .should('not.exist')
-    .then(() => {
-      cy.get('.nav-tree clr-tree > clr-tree-node', {
-        timeout: longerCommandTimeout
-      }).then((treeNodes: any) => {
-        let viyaLib
-
-        for (let node of treeNodes) {
-          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
-            viyaLib = node
-            break
-          }
-        }
-
-        console.log('viyaLib', viyaLib)
-
-        cy.get(viyaLib).within(() => {
-          cy.get(
-            '.clr-tree-node-content-container .clr-treenode-content p'
-          ).click()
-
-          cy.get('.clr-treenode-link').then((innerNodes: any) => {
-            for (let innerNode of innerNodes) {
-              if (innerNode.innerText.toLowerCase().includes(tablename)) {
-                innerNode.click()
-                break
-              }
-            }
-          })
-        })
-      })
-    })
-}
@@ -1,246 +0,0 @@
-const username = Cypress.env('username')
-const password = Cypress.env('password')
-const hostUrl = Cypress.env('hosturl')
-const appLocation = Cypress.env('appLocation')
-const longerCommandTimeout = Cypress.env('longerCommandTimeout')
-const serverType = Cypress.env('serverType')
-const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
-const fixturePath = 'excels_general/'
-
-context('editor tests: ', function () {
-  this.beforeAll(() => {
-    cy.visit(`${hostUrl}/SASLogon/logout`)
-    cy.loginAndUpdateValidKey()
-  })
-
-  this.beforeEach(() => {
-    cy.visit(hostUrl + appLocation)
-
-    visitPage('home')
-  })
-
-  it('1 | Submits duplicate primary keys', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_datadictionary')
-
-    attachExcelFile('MPE_DATADICTIONARY_duplicate_keys.xlsx', () => {
-      clickOnUploadPreview(() => {
-        confirmEditPreviewFile(() => {
-          submitTable(() => {
-            cy.get('.modal-body').then((modalBody: any) => {
-              if (modalBody[0].innerText.includes(`Duplicates found:`)) {
-                done()
-              }
-            })
-          })
-        })
-      })
-    })
-  })
-
-  it('2 | Submits null cells which must not be null', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    clickOnEdit(() => {
-      cy.get('.btn.btn-sm.btn-icon.btn-outline-danger', {
-        timeout: longerCommandTimeout
-      }).then(() => {
-        cy.get('.ht_master tbody tr').then((rows: any) => {
-          cy.get(rows[1].childNodes[2])
-            .dblclick({ force: true })
-            .then(() => {
-              cy.focused()
-                .clear()
-                .type('{enter}')
-                .then(() => {
-                  submitTable(() => {
-                    cy.get('.modal-body').then((modalBody: any) => {
-                      if (
-                        modalBody[0].innerHTML
-                          .toLowerCase()
-                          .includes(`invalid values are present`)
-                      ) {
-                        done()
-                      }
-                    })
-                  })
-                })
-            })
-        })
-      })
-    })
-  })
-
-  it('3 | Gets basic dynamic cell validation', () => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    clickOnEdit(() => {
-      cy.get('.btn.btn-sm.btn-icon.btn-outline-danger', {
-        timeout: longerCommandTimeout
-      }).then(() => {
-        cy.get('.ht_master tbody tr').then((rows: any) => {
-          cy.get(rows[1].childNodes[5])
-            .click({ force: true })
-            .then(($td) => {
-              cy.get('.htAutocompleteArrow', { withinSubject: $td }).should(
-                'exist'
-              )
-            })
-        })
-      })
-    })
-  })
-
-  it('4 | Gets advanced dynamic cell validation', () => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_tables')
-
-    clickOnEdit(() => {
-      cy.get('.btn.btn-sm.btn-icon.btn-outline-danger', {
-        timeout: longerCommandTimeout
-      }).then(() => {
-        cy.get('.ht_master tbody tr').then((rows: any) => {
-          cy.get(rows[1].childNodes[3])
-            .click({ force: true })
-            .then(($td) => {
-              cy.get('.htAutocompleteArrow', { withinSubject: $td }).should(
-                'exist'
-              )
-              cy.get('.htAutocompleteArrow', {
-                withinSubject: rows[1].childNodes[7]
-              }).should('exist')
-              cy.get('.htAutocompleteArrow', {
-                withinSubject: rows[1].childNodes[8]
-              }).should('exist')
-            })
-        })
-      })
-    })
-  })
-})
-
-const clickOnEdit = (callback?: any) => {
-  cy.get('.btnCtrl button.btn-primary', { timeout: longerCommandTimeout })
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const openTableFromTree = (libNameIncludes: string, tablename: string) => {
-  cy.get('.app-loading', { timeout: longerCommandTimeout })
-    .should('not.exist')
-    .then(() => {
-      cy.get('.nav-tree clr-tree > clr-tree-node', {
-        timeout: longerCommandTimeout
-      }).then((treeNodes: any) => {
-        let viyaLib
-
-        for (let node of treeNodes) {
-          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
-            viyaLib = node
-            break
-          }
-        }
-
-        cy.get(viyaLib).within(() => {
-          cy.get('.clr-tree-node-content-container > button').click()
-
-          cy.get('.clr-treenode-link').then((innerNodes: any) => {
-            for (let innerNode of innerNodes) {
-              if (innerNode.innerText.toLowerCase().includes(tablename)) {
-                innerNode.click()
-                break
-              }
-            }
-          })
-        })
-      })
-    })
-}
-
-const attachExcelFile = (excelFilename: string, callback?: any) => {
-  cy.get('.buttonBar button:last-child')
-    .click()
-    .then(() => {
-      cy.get('input[type="file"]#file-upload')
-        .attachFile(`/${fixturePath}/${excelFilename}`)
-        .then(() => {
-          cy.get('.modal-footer .btn.btn-primary').then((modalBtn) => {
-            modalBtn.click()
-            if (callback) callback()
-          })
-        })
-    })
-}
-
-const clickOnUploadPreview = (callback?: any) => {
-  cy.get('.buttonBar button.btn-primary.btn-upload-preview')
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const confirmEditPreviewFile = (callback?: any) => {
-  cy.get('.modal-footer button.btn-success-outline')
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const submitTable = (callback?: any) => {
-  cy.get('.btnCtrl button.btn-primary')
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const submitTableMessage = (callback?: any) => {
-  cy.get('.modal-footer .btn.btn-sm.btn-success-outline')
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const submitExcel = (callback?: any) => {
-  cy.get('.buttonBar button.preview-submit')
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const rejectExcel = (callback?: any) => {
-  cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Approve')
-    .then((allButtons: any) => {
-      for (let approvalButton of allButtons) {
-        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.click()
-          break
-        }
-      }
-
-      cy.get('button.btn-danger')
-        .should('exist')
-        .should('not.be.disabled')
-        .click()
-        .then(() => {
-          cy.get('.modal-footer button.btn-success-outline')
-            .click()
-            .then(() => {
-              cy.get('app-history')
-                .should('exist')
-                .then(() => {
-                  if (callback) callback()
-                })
-            })
-        })
-    })
-}
-
-const visitPage = (url: string) => {
-  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
-}
@@ -1,527 +0,0 @@
-import { Callbacks } from 'cypress/types/jquery/index'
-
-const username = Cypress.env('username')
-const password = Cypress.env('password')
-const hostUrl = Cypress.env('hosturl')
-const appLocation = Cypress.env('appLocation')
-const longerCommandTimeout = Cypress.env('longerCommandTimeout')
-const serverType = Cypress.env('serverType')
-const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
-const fixturePath = 'excels/'
-
-// TODO: 4 and 9 failing
-
-context('excel tests: ', function () {
-  this.beforeAll(() => {
-    cy.visit(`${hostUrl}/SASLogon/logout`)
-    cy.loginAndUpdateValidKey()
-  })
-
-  this.beforeEach(() => {
-    cy.visit(hostUrl + appLocation)
-
-    visitPage('home')
-
-    colorLog(
-      `TEST START ---> ${
-        Cypress.mocha.getRunner().suite.ctx.currentTest.title
-      }`,
-      '#3498DB'
-    )
-  })
-
-  it('1 | Uploads regular Excel file', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('regular_excel.xlsx', () => {
-      submitExcel()
-      rejectExcel(done)
-    })
-  })
-
-  it('2 | Uploads Excel with data on the 7th tab', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('7th_tab_excel.xlsx', () => {
-      submitExcel()
-      rejectExcel(done)
-    })
-  })
-
-  it('3 | Uploads Excel with missing columns (should fail)', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('missing_columns_excel.xlsx', () => {
-      cy.get('.abortMsg', { timeout: longerCommandTimeout })
-        .should('exist')
-        .then((elements: any) => {
-          if (elements[0]) {
-            if (elements[0].innerText.toLowerCase().includes('missing')) done()
-          }
-        })
-    })
-  })
-
-  it('4 | Uploads Excel with formulas', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_datadictionary')
-
-    attachExcelFile('formulas_excel.xlsx', () => {
-      checkResultOfFormulaUpload(done)
-    })
-  })
-
-  it('5 | Uploads Excel with no data rows', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('nodata_rows_excel.xlsx', () => {
-      cy.get('.abortMsg', { timeout: longerCommandTimeout })
-        .should('exist')
-        .then((elements: any) => {
-          if (elements[0]) {
-            if (
-              elements[0].innerText
-                .toLowerCase()
-                .includes('no relevant data found')
-            )
-              done()
-          }
-        })
-    })
-  })
-
-  it('6 | Uploads Excel with a table that is surrounded by other data', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('surrounded_data_excel.xlsx', () => {
-      submitExcel()
-      rejectExcel(done)
-    })
-  })
-
-  it('7 | Uploads Excel with a extra columns in the middle', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('extra_column_excel.xlsx', () => {
-      submitExcel()
-      rejectExcel(done)
-    })
-  })
-
-  it('8 | Uploads Excel with a duplicate column', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('duplicate_column_excel.xlsx', () => {
-      cy.get('.abortMsg', { timeout: longerCommandTimeout })
-        .should('exist')
-        .then((elements: any) => {
-          if (elements[0]) {
-            if (elements[0].innerText.toLowerCase().includes('missing')) done()
-          }
-        })
-    })
-  })
-
-  // it('9 | Uploads Excel with a duplicate row', (done) => {
-  //   openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-  //   attachExcelFile('duplicate_row_excel.xlsx', () => {
-  //     submitExcel(() => {
-  //       cy.get('.abortMsg', { timeout: longerCommandTimeout })
-  //         .should('exist')
-  //         .then((elements: any) => {
-  //           if (elements[0]) {
-  //             if (elements[0].innerText.toLowerCase().includes('duplicates'))
-  //               done()
-  //           }
-  //         })
-  //     })
-  //   })
-  // })
-
-  it('10 | Uploads Excel with a mixed content', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('mixed_content_excel.xlsx', () => {
-      submitExcel(() => {
-        cy.get('.modal-body').then((modalBody: any) => {
-          if (
-            modalBody[0].innerHTML
-              .toLowerCase()
-              .includes(`invalid values are present`)
-          ) {
-            done()
-          }
-        })
-      })
-    })
-  })
-
-  it('11 | Uploads Excel with a blank columns', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('blank_columns_excel.xlsx', () => {
-      cy.get('.abortMsg', { timeout: longerCommandTimeout })
-        .should('exist')
-        .then((elements: any) => {
-          if (elements[0]) {
-            if (elements[0].innerText.toLowerCase().includes('missing')) done()
-          }
-        })
-    })
-  })
-
-  it('12 | Uploads Excel xls extension', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('regular_excel_xls.xls', () => {
-      submitExcel()
-      rejectExcel(done)
-    })
-  })
-
-  // For some strange reason this file breaks cypress. When uploaded manually in DC it is working.
-  // it('13 | Uploads Excel xlsm extension', (done) => {
-  //   openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-  //   attachExcelFile('regular_excel_macro.xlsm', () => {
-  //     submitExcel()
-  //     rejectExcel(done)
-  //   })
-  // })
-
-  it('14 | Uploads Excel with composite primary key', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_datadictionary')
-
-    attachExcelFile('MPE_DATADICTIONARY_composite_keys.xlsx', () => {
-      submitExcel()
-      rejectExcel(done)
-    })
-  })
-
-  it('15 | Uploads Excel with missing row (empty table)', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_datadictionary')
-
-    attachExcelFile('MPE_DATADICTIONARY_missing_row.xlsx', () => {
-      cy.get('.abortMsg', { timeout: longerCommandTimeout })
-        .should('exist')
-        .then((elements: any) => {
-          if (elements[0]) {
-            if (
-              elements[0].innerText
-                .toLowerCase()
-                .includes('no relevant data found')
-            )
-              done()
-          }
-        })
-    })
-  })
-
-  it('16 | Uploads Excel with merged cells', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_datadictionary')
-
-    attachExcelFile('MPE_DATADICTIONARY_merged_cells.xlsx', () => {
-      submitExcel()
-      rejectExcel(done)
-    })
-  })
-
-  it('17 | Check uploaded values from excel with xls extension', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('regular_excel_xls.xls', () => {
-      checkResultOfXLSUpload(done)
-    })
-  })
-
-  it('18 | Uploads Excel with missing row (empty table)', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('blank_column_with_header.xlsx', () => {
-      cy.get('.btn-upload-preview', { timeout: 60000 })
-        .should('be.visible')
-        .then(() => {
-          cy.get('#hotInstance', { timeout: 30000 })
-            .find('div.ht_master.handsontable')
-            .find('div.wtHolder')
-            .find('div.wtHider')
-            .find('div.wtSpreader')
-            .find('table.htCore')
-            .find('tbody')
-            .should((data) => {
-              let allEmpty = true
-
-              for (let col = 0; col < data[0].children.length; col++) {
-                const cell: any = data[0].children[col].children[5]
-
-                if (cell.innerText !== '') {
-                  allEmpty = false
-
-                  break
-                }
-              }
-
-              if (allEmpty) done()
-            })
-        })
-    })
-  })
-
-  it('19 | Uploads Excel with data on random sheet surrounded with all empty cells', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('surrounded_data_all_cells_empty_excel.xlsx', () => {
-      checkResultOfXLSUpload(done)
-    })
-  })
-
-  it('20 | Uploads Excel with data surrounded with empty cells ', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('surrounded_data_empty_cells_excel.xlsx', () => {
-      checkResultOfXLSUpload(done)
-    })
-  })
-
-  it('21 | Uploads regular Excel file with first row marked for Delete (yes)', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    attachExcelFile('regular_excel_with_delete.xlsx', () => {
-      cy.get('.btn-upload-preview', { timeout: 60000 })
-        .should('be.visible')
-        .then(() => {
-          cy.get('#hotInstance', { timeout: 30000 })
-            .find('div.ht_master.handsontable')
-            .find('div.wtHolder')
-            .find('div.wtHider')
-            .find('div.wtSpreader')
-            .find('table.htCore')
-            .find('tbody')
-            .should((data: JQuery<HTMLTableSectionElement>) => {
-              const firstRowFirstCol: Partial<HTMLElement> =
-                data[0].children[0].children[1]
-
-              if (
-                firstRowFirstCol.innerText &&
-                !firstRowFirstCol.innerText.toLowerCase().includes('yes')
-              ) {
-                done('Delete? column from file not applied')
-              }
-            })
-            .then(() => {
-              submitExcel()
-              rejectExcel(done)
-            })
-        })
-    })
-  })
-
-  // Large files break Cypress
-
-  // it ('? | Uploads Excel with size of 5MB', (done) => {
-  //     attachExcelFile('5mb_excel.xlsx', () => {
-  //         submitExcel();
-  //         rejectExcel(done);
-  //     });
-  // })
-
-  // it ('? | Uploads Excel with size of 15MB', (done) => {
-  //     attachExcelFile('15mb_excel.xlsx', () => {
-  //         submitExcel();
-  //         rejectExcel(done);
-  //     });
-  // })
-
-  //Large files tests end
-
-  this.afterEach(() => {
-    colorLog(`TEST END -------------`, '#3498DB')
-  })
-})
-
-const openTableFromTree = (libNameIncludes: string, tablename: string) => {
-  cy.get('.app-loading', { timeout: longerCommandTimeout })
-    .should('not.exist')
-    .then(() => {
-      cy.get('.nav-tree clr-tree > clr-tree-node', {
-        timeout: longerCommandTimeout
-      }).then((treeNodes: any) => {
-        let viyaLib
-
-        for (let node of treeNodes) {
-          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
-            viyaLib = node
-            break
-          }
-        }
-
-        cy.get(viyaLib).within(() => {
-          cy.get('.clr-tree-node-content-container > button').click()
-
-          cy.get('.clr-treenode-link').then((innerNodes: any) => {
-            for (let innerNode of innerNodes) {
-              if (innerNode.innerText.toLowerCase().includes(tablename)) {
-                innerNode.click()
-                break
-              }
-            }
-          })
-        })
-      })
-    })
-}
-
-const attachExcelFile = (excelFilename: string, callback?: any) => {
-  cy.get('.buttonBar button:last-child')
-    .should('exist')
-    .click()
-    .then(() => {
-      cy.get('input[type="file"]#file-upload')
-        .attachFile(`/${fixturePath}/${excelFilename}`)
-        .then(() => {
-          cy.get('.clr-abort-modal .modal-title').then((modalTitle) => {
-            if (!modalTitle[0].innerHTML.includes('Abort Message')) {
-              cy.get('.modal-footer .btn.btn-primary').then((modalBtn) => {
-                modalBtn.click()
-                if (callback) callback()
-              })
-            } else {
-              if (callback) callback()
-            }
-          })
-        })
-    })
-}
-
-const submitExcel = (callback?: any) => {
-  cy.get('.buttonBar button.preview-submit', { timeout: longerCommandTimeout })
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const rejectExcel = (callback?: any) => {
-  cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Approve')
-    .then((allButtons: any) => {
-      for (let approvalButton of allButtons) {
-        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.click()
-          break
-        }
-      }
-
-      cy.get('button.btn-danger')
-        .should('exist')
-        .should('not.be.disabled')
-        .click()
-        .then(() => {
-          cy.get('.modal-footer button.btn-success-outline')
-            .click()
-            .then(() => {
-              cy.get('app-history')
-                .should('exist')
-                .then(() => {
-                  if (callback) callback()
-                })
-            })
-        })
-    })
-}
-
-const acceptExcel = (callback?: any) => {
-  cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Approve')
-    .then((allButtons: any) => {
-      for (let approvalButton of allButtons) {
-        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.click()
-          break
-        }
-      }
-
-      cy.get('#acceptBtn')
-        .should('exist')
-        .should('not.be.disabled')
-        .click()
-        .then(() => {
-          if (callback) {
-            callback()
-          }
-        })
-    })
-}
-
-const checkResultOfFormulaUpload = (callback?: any) => {
-  cy.get('#hotInstance', { timeout: longerCommandTimeout })
-    .find('div.ht_master.handsontable')
-    .find('div.wtHolder')
-    .find('div.wtHider')
-    .find('div.wtSpreader')
-    .find('table.htCore')
-    .find('tbody')
-    .should((data) => {
-      const cell: any = data[0].children[0].children[5]
-      expect(cell.innerText).to.equal('=1+1')
-      if (callback) callback()
-    })
-}
-
-const checkResultOfXLSUpload = (callback?: any) => {
-  cy.viewport(1280, 720)
-  cy.get('#hotInstance', { timeout: 30000 })
-    .find('div.ht_master.handsontable')
-    .find('div.wtHolder')
-    .find('div.wtHider')
-    .find('div.wtSpreader')
-    .find('table.htCore')
-    .find('tbody')
-    .should((data) => {
-      let cell: any = data[0].children[0].children[2]
-
-      expect(cell.innerText).to.equal('0')
-      cell = data[0].children[0].children[3]
-      expect(cell.innerText).to.equal('this is dummy data changed in excel')
-      cell = data[0].children[0].children[4]
-      expect(cell.innerText).to.equal('▼\nOption 1')
-      cell = data[0].children[0].children[5]
-      expect(cell.innerText).to.equal('42')
-      cell = data[0].children[0].children[6]
-      expect(cell.innerText).to.equal('▼\n1960-02-12')
-      cell = data[0].children[0].children[7]
-      expect(cell.innerText).to.equal('▼\n1960-01-01 00:00:42')
-      cell = data[0].children[0].children[8]
-      expect(cell.innerText).to.equal('00:00:42')
-      cell = data[0].children[0].children[9]
-      expect(cell.innerText).to.equal('3')
-
-      if (callback) callback()
-    })
-
-  cy.get('#hotInstance', { timeout: 30000 })
-    .find('div.ht_master.handsontable')
-    .find('div.wtHolder')
-    .scrollTo('right')
-    .find('div.wtHider')
-    .find('div.wtSpreader')
-    .find('table.htCore')
-    .find('tbody')
-    .should((data) => {
-      let cell: any = data[0].children[0].children[1]
-
-      cell = data[0].children[0].children[9]
-
-      expect(cell.innerText).to.equal('44')
-
-      if (callback) callback()
-    })
-}
-
-const visitPage = (url: string) => {
-  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
-}
-
-const colorLog = (msg: string, color: string) => {
-  console.log('%c' + msg, 'color:' + color + ';font-weight:bold;')
-}
@@ -1,376 +0,0 @@
-const username = Cypress.env('username')
-const password = Cypress.env('password')
-const hostUrl = Cypress.env('hosturl')
-const appLocation = Cypress.env('appLocation')
-const longerCommandTimeout = Cypress.env('longerCommandTimeout')
-const serverType = Cypress.env('serverType')
-const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
-const fixturePath = 'excels_general/'
-
-context('filtering tests: ', function () {
-  this.beforeAll(() => {
-    cy.visit(`${hostUrl}/SASLogon/logout`, { timeout: longerCommandTimeout })
-    cy.loginAndUpdateValidKey()
-  })
-
-  this.beforeEach(() => {
-    cy.visit(hostUrl + appLocation, { timeout: longerCommandTimeout })
-
-    visitPage('home')
-  })
-
-  it('1 | filter char field', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue('SOME_CHAR', 'this is dummy data', 'value', () => {
-        checkInfoBarIncludes(
-          `AND,AND,0,SOME_CHAR,=,"'this is dummy data'"`,
-          (includes: boolean) => {
-            if (includes) done()
-          }
-        )
-      })
-    })
-  })
-
-  it('2 | filter number field', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue('SOME_NUM', '42', 'value', () => {
-        checkInfoBarIncludes(`AND,AND,0,SOME_NUM,=,42`, (includes: boolean) => {
-          if (includes) done()
-        })
-      })
-    })
-  })
-
-  it.only('3 | filter time field', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue('SOME_TIME', '00:00:42', 'time', () => {
-        checkInfoBarIncludes(
-          `AND,AND,0,SOME_TIME,=,42`,
-          (includes: boolean) => {
-            if (includes) done()
-          }
-        )
-      })
-    })
-  })
-
-  it('3.1 | Non picker - filter time field', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue('SOME_TIME', '42', 'value', () => {
-        checkInfoBarIncludes(
-          `AND,AND,0,SOME_TIME,=,42`,
-          (includes: boolean) => {
-            if (includes) done()
-          }
-        )
-      })
-    }, false)
-  })
-
-  it('4 | filter date field', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue('SOME_DATE', '12/02/1960', 'date', () => {
-        checkInfoBarIncludes(
-          `AND,AND,0,SOME_DATE,=,42`,
-          (includes: boolean) => {
-            if (includes) done()
-          }
-        )
-      })
-    })
-  })
-
-  it('4.1 | Non picker - filter date field', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue('SOME_DATE', '42', 'value', () => {
-        checkInfoBarIncludes(
-          `AND,AND,0,SOME_DATE,=,42`,
-          (includes: boolean) => {
-            if (includes) done()
-          }
-        )
-      })
-    }, false)
-  })
-
-  it('5 | filter datetime field', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue(
-        'SOME_DATETIME',
-        '01/01/1960 00:00:42',
-        'datetime',
-        () => {
-          checkInfoBarIncludes(
-            `AND,AND,0,SOME_DATETIME,=,42`,
-            (includes: boolean) => {
-              if (includes) done()
-            }
-          )
-        }
-      )
-    })
-  })
-
-  it('5.1 | Non picker - filter datetime field', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue('SOME_DATETIME', '42', 'value', () => {
-        checkInfoBarIncludes(
-          `AND,AND,0,SOME_DATETIME,=,42`,
-          (includes: boolean) => {
-            if (includes) done()
-          }
-        )
-      })
-    }, false)
-  })
-
-  it('6 | filter date field IN', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue('SOME_DATE', '', 'in', () => {
-        checkInfoBarIncludes(
-          `AND,AND,0,SOME_DATE,IN,(0)`,
-          (includes: boolean) => {
-            if (includes) done()
-          }
-        )
-      })
-    })
-  })
-
-  it('7 | filter bestnum field BETWEEN', (done) => {
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    openFilterPopup(() => {
-      setFilterWithValue('SOME_BESTNUM', '0-10', 'between', () => {
-        checkInfoBarIncludes(
-          `AND,AND,0,SOME_BESTNUM,BETWEEN,0 AND 10`,
-          (includes: boolean) => {
-            if (includes) done()
-          }
-        )
-      })
-    })
-  })
-})
-
-const checkInfoBarIncludes = (text: string, callback: any) => {
-  cy.get('.infoBar b', { timeout: longerCommandTimeout }).then((el: any) => {
-    const includes = el[0].innerText.toLowerCase().includes(text.toLowerCase())
-
-    if (callback) callback(includes)
-  })
-}
-
-const openFilterPopup = (
-  callback?: any,
-  usePickers: boolean = true,
-  isViewerFiltering: boolean = false
-) => {
-  const filterButton = isViewerFiltering
-    ? '.btn-outline.filterSide'
-    : '.btnCtrl .btnView'
-
-  cy.get(filterButton, { timeout: longerCommandTimeout }).then(
-    (optionsButton: any) => {
-      optionsButton.click()
-
-      if (isViewerFiltering) {
-        cy.wait(300)
-
-        cy.get('.dropdown-menu button').then(async (dropdownButtons: any) => {
-          let filterButton = null
-
-          for (let btn of dropdownButtons) {
-            if (btn.innerText.toLowerCase().includes('filter')) {
-              filterButton = btn
-
-              break
-            }
-          }
-
-          if (filterButton) {
-            filterButton.click()
-
-            if (usePickers) turnOnPickers()
-
-            if (callback) callback()
-
-            return
-          }
-        })
-      }
-
-      if (usePickers) turnOnPickers()
-      if (callback) callback()
-    }
-  )
-}
-
-const turnOnPickers = () => {
-  cy.get('#usePickers')
-    .should('exist')
-    .then((picker: any) => {
-      picker[0].click()
-    })
-}
-
-const setFilterWithValue = (
-  variableValue: string,
-  valueString: string,
-  valueField: 'value' | 'time' | 'date' | 'datetime' | 'in' | 'between',
-  callback?: any
-) => {
-  cy.wait(600)
-
-  cy.focused().type(variableValue)
-  cy.wait(100)
-  // cy.focused().trigger('input')
-  cy.get('.variable-col .autocomplete-wrapper', { withinSubject: null })
-    .first()
-    .trigger('keydown', { key: 'ArrowDown' })
-  cy.get('.variable-col .autocomplete-wrapper', {
-    withinSubject: null
-  }).trigger('keydown', { key: 'Enter' })
-  cy.focused().tab()
-  cy.wait(100)
-
-  if (valueField === 'in') {
-    cy.focused().select(valueField.toUpperCase()).trigger('change')
-  } else if (valueField === 'between') {
-    cy.focused().select(valueField.toUpperCase()).trigger('change')
-  } else {
-    cy.focused().tab()
-    cy.wait(100)
-  }
-
-  switch (valueField) {
-    case 'value': {
-      cy.focused().type(valueString)
-
-      break
-    }
-    case 'time': {
-      cy.focused().type(valueString)
-
-      break
-    }
-    case 'date': {
-      cy.focused().type(valueString)
-      cy.focused().tab()
-
-      break
-    }
-    case 'datetime': {
-      const date = valueString.split(' ')[0]
-      const time = valueString.split(' ')[1]
-
-      cy.focused().type(date)
-      cy.focused().tab()
-      cy.focused().tab()
-      cy.focused().type(time)
-
-      break
-    }
-    case 'in': {
-      cy.get('.checkbox-vals').then(() => {
-        cy.focused().tab()
-        cy.focused().click()
-        cy.get('.no-values')
-          .should('not.exist')
-          .then(() => {
-            cy.get('clr-checkbox-wrapper input').then((inputs: any) => {
-              inputs[0].click()
-              cy.get('.in-values-modal .modal-footer button').click()
-
-              cy.get('.modal-footer .btn-success-outline').click()
-
-              if (callback) callback()
-            })
-          })
-      })
-
-      break
-    }
-    case 'between': {
-      cy.focused().tab()
-
-      const start = valueString.split('-')[0]
-      const end = valueString.split('-')[1]
-
-      cy.focused().type(start)
-      cy.focused().tab()
-      cy.focused().type(end)
-    }
-    default: {
-      break
-    }
-  }
-
-  cy.wait(100)
-  cy.focused().tab()
-  cy.wait(100)
-  cy.focused().tab()
-  cy.wait(100)
-  cy.focused().tab()
-  cy.wait(100)
-  cy.focused().tab()
-  cy.wait(100)
-  cy.focused().click()
-
-  if (callback) callback()
-}
-
-const openTableFromTree = (libNameIncludes: string, tablename: string) => {
-  cy.get('.app-loading', { timeout: longerCommandTimeout })
-    .should('not.exist')
-    .then(() => {
-      cy.get('.nav-tree clr-tree > clr-tree-node', {
-        timeout: longerCommandTimeout
-      }).then((treeNodes: any) => {
-        let viyaLib
-
-        for (let node of treeNodes) {
-          if (new RegExp(libNameIncludes).test(node.innerText.toLowerCase())) {
-            viyaLib = node
-            break
-          }
-        }
-
-        cy.get(viyaLib).within(() => {
-          cy.get('.clr-tree-node-content-container p').click()
-
-          cy.get('.clr-treenode-link').then((innerNodes: any) => {
-            for (let innerNode of innerNodes) {
-              if (innerNode.innerText.toLowerCase().includes(tablename)) {
-                innerNode.click()
-                break
-              }
-            }
-          })
-        })
-      })
-    })
-}
-
-const visitPage = (url: string) => {
-  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
-}
@@ -1,719 +0,0 @@
-import { arrayBufferToBase64 } from './../util/helper-functions'
-import * as moment from 'moment'
-
-const username = Cypress.env('username')
-const password = Cypress.env('password')
-const hostUrl = Cypress.env('hosturl')
-const appLocation = Cypress.env('appLocation')
-const longerCommandTimeout = Cypress.env('longerCommandTimeout')
-const fixturePath = 'excels_general/'
-const serverType = Cypress.env('serverType')
-const site_id = Cypress.env(`site_id_${serverType}`)
-const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
-const testLicenceUserLimits = Cypress.env('testLicenceUserLimits')
-
-/** IMPORTANT NOTICE
- * Before running tests, make sure that table `MPE_USERS` is present
- */
-
-interface EditConfigTableCells {
-  varName: string
-  varValue: string
-}
-
-context('licensing tests: ', function () {
-  this.beforeAll(() => {
-    cy.loginAndUpdateValidKey()
-  })
-
-  this.beforeEach(() => {
-    cy.visit(hostUrl + appLocation)
-
-    visitPage('home')
-  })
-
-  it('1 | key valid, not expired', (done) => {
-    let keyData = {
-      valid_until: moment().add(1, 'year').format('YYYY-MM-DD'),
-      users_allowed: 4,
-      hot_license_key: '',
-      demo: false,
-      site_id: site_id
-    }
-
-    let keys: { licenseKey: any; activationKey: any }
-    generateKeys(keyData, (keysGen: any) => {
-      keys = keysGen
-
-      cy.wait(2000)
-
-      isLicensingPage((result: boolean) => {
-        if (result) {
-          inputLicenseKeyPage(keys.licenseKey, keys.activationKey)
-
-          cy.wait(2000)
-        }
-
-        acceptTermsIfPresented((result: boolean) => {
-          if (result) {
-            cy.wait(10000)
-          }
-
-          visitPage('home')
-
-          cy.get('.nav-tree clr-tree > clr-tree-node', {
-            timeout: longerCommandTimeout
-          }).then((treeNodes: any) => {
-            done()
-          })
-        })
-      })
-    })
-  })
-
-  it('2 | Key will expire in less then 14 days, not free tier', (done) => {
-    // make 2 separate for this one
-    let keyData = {
-      valid_until: moment().add(10, 'day').format('YYYY-MM-DD'),
-      users_allowed: 4,
-      hot_license_key: '',
-      demo: false,
-      site_id: site_id
-    }
-
-    let keys: { licenseKey: any; activationKey: any }
-    generateKeys(keyData, (keysGen: any) => {
-      keys = keysGen
-      console.log('keys', keys)
-
-      cy.wait(2000)
-
-      acceptTermsIfPresented((result: boolean) => {
-        if (result) {
-          cy.wait(20000)
-        }
-        updateLicenseKeyQuick(keysGen, () => {
-          cy.wait(2000)
-          acceptTermsIfPresented((result: boolean) => {
-            if (result) {
-              cy.wait(20000)
-            }
-            verifyLicensingWarning('This license key will expire in ', () => {
-              done()
-            })
-          })
-        })
-      })
-    })
-  })
-
-  it('3 | key expired, free tier works', (done) => {
-    let keyData = {
-      valid_until: moment().subtract(1, 'day').format('YYYY-MM-DD'),
-      users_allowed: 4,
-      hot_license_key: '',
-      demo: false,
-      site_id: site_id
-    }
-
-    let keys: { licenseKey: any; activationKey: any }
-    generateKeys(keyData, (keysGen: any) => {
-      keys = keysGen
-
-      cy.wait(2000)
-
-      acceptTermsIfPresented((result: boolean) => {
-        if (result) {
-          cy.wait(20000)
-        }
-        cy.wait(2000)
-        updateLicenseKeyQuick(keysGen, () => {
-          cy.wait(2000)
-          acceptTermsIfPresented((result: boolean) => {
-            if (result) {
-              cy.wait(20000)
-            }
-            verifyLicensingPage(
-              'Licence key is expired - please contact',
-              (success: boolean) => {
-                if (success) {
-                  verifyLicensingWarning(
-                    '(FREE Tier) - Problem with licence',
-                    () => {
-                      done()
-                    }
-                  )
-                }
-              }
-            )
-          })
-        })
-      })
-    })
-  })
-
-  it('4 | key invalid, free tier works', (done) => {
-    let keyData = {
-      valid_until: moment().subtract(1, 'day').format('YYYY-MM-DD'),
-      users_allowed: 4,
-      hot_license_key: '',
-      demo: false,
-      site_id: site_id
-    }
-
-    let keys: { licenseKey: any; activationKey: any }
-    generateKeys(keyData, (keysGen: any) => {
-      keys = keysGen
-      keys.activationKey = 'invalid' + keys.activationKey
-
-      cy.wait(2000)
-
-      acceptTermsIfPresented((result: boolean) => {
-        if (result) {
-          cy.wait(20000)
-        }
-        cy.wait(2000)
-        updateLicenseKeyQuick(keysGen, () => {
-          cy.wait(2000)
-          acceptTermsIfPresented((result: boolean) => {
-            if (result) {
-              cy.wait(20000)
-            }
-            verifyLicensingPage(
-              'Licence key is invalid - please contact',
-              (success: boolean) => {
-                if (success) {
-                  verifyLicensingWarning(
-                    '(FREE Tier) - Problem with licence',
-                    () => {
-                      done()
-                    }
-                  )
-                }
-              }
-            )
-          })
-        })
-      })
-    })
-  })
-
-  it('5 | key for wrong organisation, free tier works', (done) => {
-    let keyData = {
-      valid_until: moment().add(1, 'year').format('YYYY-MM-DD'),
-      users_allowed: 4,
-      hot_license_key: '',
-      demo: false,
-      site_id: 100
-    }
-
-    let keys: { licenseKey: any; activationKey: any }
-    generateKeys(keyData, (keysGen: any) => {
-      keys = keysGen
-      keys.activationKey = keys.activationKey
-
-      cy.wait(2000)
-
-      acceptTermsIfPresented((result: boolean) => {
-        if (result) {
-          cy.wait(20000)
-        }
-        cy.wait(2000)
-        updateLicenseKeyQuick(keysGen, () => {
-          cy.wait(2000)
-          acceptTermsIfPresented((result: boolean) => {
-            if (result) {
-              cy.wait(20000)
-            }
-            verifyLicensingPage(
-              'SYSSITE (below) is not found',
-              (success: boolean) => {
-                if (success) {
-                  verifyLicensingWarning(
-                    '(FREE Tier) - Problem with licence',
-                    () => {
-                      done()
-                    }
-                  )
-                }
-              }
-            )
-          })
-        })
-      })
-    })
-  })
-
-  if (testLicenceUserLimits) {
-    it('4 | User try to register when limit is reached', (done) => {
-      let keyData = {
-        valid_until: moment().add(1, 'month').format('YYYY-MM-DD'),
-        users_allowed: 10,
-        hot_license_key: '',
-        demo: false,
-        site_id: site_id
-      }
-      let keyData2 = {
-        valid_until: moment().add(1, 'month').format('YYYY-MM-DD'),
-        users_allowed: 1,
-        hot_license_key: '',
-        demo: false,
-        site_id: site_id
-      }
-      generateKeys(keyData, (keysGen: any) => {
-        generateKeys(keyData2, (keysGen2: any) => {
-          cy.wait(2000)
-
-          acceptTermsIfPresented((result: boolean) => {
-            if (result) {
-              cy.wait(20000)
-            }
-            updateLicenseKeyQuick(keysGen, () => {
-              cy.wait(2000)
-              acceptTermsIfPresented((result: boolean) => {
-                if (result) {
-                  cy.wait(20000)
-                }
-
-                updateLicenseKeyQuick(keysGen2, () => {
-                  cy.wait(2000)
-
-                  const random = Cypress._.random(0, 1000)
-                  const newUser = {
-                    username: `randomusername${random}notregistered`,
-                    last_seen_at: moment().add(1, 'month').format('YYYY-MM-DD'),
-                    registered_at: moment().add(1, 'month').format('YYYY-MM-DD')
-                  }
-                  updateUsersTable(
-                    { deleteAll: true, newUsers: [newUser] },
-                    () => {
-                      logout(() => {
-                        cy.visit(hostUrl + appLocation)
-                        // cy.get('input.username').type(username)
-                        // cy.get('input.password').type(password)
-                        // cy.get('.login-group button').click()
-
-                        visitPage('home')
-
-                        cy.wait(2000)
-
-                        verifyLicensingPage(
-                          'The registered number of users reached the limit specified for your licence.',
-                          (success: boolean) => {
-                            if (success) done()
-                          }
-                        )
-                      })
-                    }
-                  )
-                })
-              })
-            })
-          })
-        })
-      })
-    })
-
-    it('5 | Show warning banner when limit is exceeded', (done) => {
-      let keyData = {
-        valid_until: moment().add(1, 'month').format('YYYY-MM-DD'),
-        users_allowed: 10,
-        hot_license_key: '',
-        demo: false,
-        site_id: site_id
-      }
-      let keyData2 = {
-        valid_until: moment().add(1, 'month').format('YYYY-MM-DD'),
-        users_allowed: 1,
-        hot_license_key: '',
-        demo: false,
-        site_id: site_id
-      }
-
-      generateKeys(keyData, (keysGen: any) => {
-        generateKeys(keyData2, (keysGen2: any) => {
-          cy.wait(2000)
-          acceptTermsIfPresented((result: boolean) => {
-            if (result) {
-              cy.wait(20000)
-            }
-            updateLicenseKeyQuick(keysGen, () => {
-              cy.wait(2000)
-              acceptTermsIfPresented((result: boolean) => {
-                if (result) {
-                  cy.wait(20000)
-                }
-                const random = Cypress._.random(0, 1000)
-                const newUser = {
-                  username: `randomusername${random}`,
-                  last_seen_at: moment().add(1, 'month').format('YYYY-MM-DD'),
-                  registered_at: moment().add(1, 'month').format('YYYY-MM-DD')
-                }
-                updateUsersTable(
-                  { deleteAll: true, keep: username, newUsers: [newUser] },
-                  () => {
-                    updateLicenseKeyQuick(keysGen2, () => {
-                      cy.wait(2000)
-                      verifyLicensingWarning(
-                        'The registered number of users exceeds the limit specified for your license.',
-                        () => {
-                          done()
-                        }
-                      )
-                    })
-                  }
-                )
-              })
-            })
-          })
-        })
-      })
-    })
-  }
-})
-
-const logout = (callback?: any) => {
-  cy.get('.header-actions .dropdown-toggle')
-    .click()
-    .then(() => {
-      cy.get('.header-actions .dropdown-menu > .separator')
-        .next()
-        .click()
-        .then(() => {
-          if (callback) callback()
-        })
-    })
-}
-
-const acceptTermsIfPresented = (callback?: any) => {
-  cy.url().then((url: string) => {
-    if (url.includes('licensing/register')) {
-      cy.get('.card-block')
-        .scrollTo('bottom')
-        .then(() => {
-          cy.get('#checkbox1')
-            .click()
-            .then(() => {
-              if (callback) callback(true)
-            })
-        })
-    } else {
-      if (callback) callback(false)
-    }
-  })
-}
-
-const isLicensingPage = (callback: any) => {
-  return cy.url().then((url: string) => {
-    callback(
-      url.includes('#/licensing/') && !url.includes('licensing/register')
-    )
-  })
-}
-
-const verifyLicensingPage = (text: string, callback: any) => {
-  // visitPage('home')
-
-  cy.wait(1000)
-  isLicensingPage((result: boolean) => {
-    if (result) {
-      cy.get('p.key-error')
-        .should('contain', text)
-        .then((treeNodes: any) => {
-          callback(true)
-        })
-    }
-  })
-}
-
-const verifyLicensingWarning = (text: string, callback: any) => {
-  visitPage('home')
-
-  cy.wait(1000)
-  cy.get("div[role='alert'] .alert-text")
-    .invoke('text')
-    .should('contain', text)
-    .then(() => {
-      callback()
-    })
-}
-
-const inputLicenseKeyPage = (licenseKey: string, activationKey: string) => {
-  cy.get('button').contains('Paste licence').click()
-
-  cy.get('.license-key-form textarea', { timeout: longerCommandTimeout })
-    .invoke('val', licenseKey)
-    .trigger('input')
-    .should('not.be.undefined')
-  cy.get('.activation-key-form textarea', { timeout: longerCommandTimeout })
-    .invoke('val', activationKey)
-    .trigger('input')
-    .should('not.be.undefined')
-  cy.get('button.apply-keys').click()
-}
-
-const updateUsersTable = (options: any, callback?: any) => {
-  visitPage('home')
-  openTableFromTree(libraryToOpenIncludes, 'mpe_users')
-
-  clickOnEdit(() => {
-    cy.get('.ht_master tbody tr').then((rows: any) => {
-      if (options.deleteAll) {
-        for (let row of rows) {
-          const user_id = row.childNodes[2]
-          if (!options.keep || user_id.innerText !== options.keep) {
-            cy.get(row.childNodes[1])
-              .dblclick()
-              .then(() => {
-                cy.focused().type('{selectall}').type('Yes').type('{enter}')
-              })
-          }
-        }
-      }
-      if (options.newUsers && options.newUsers.length) {
-        for (let newUser of options.newUsers) {
-          clickOnAddRow(() => {
-            cy.get('#hotInstance tbody tr:last-child').then((rows: any) => {
-              cy.get(rows[0].childNodes[2])
-                .dblclick()
-                .then(() => {
-                  cy.focused()
-                    .type('{selectall}')
-                    .type(newUser.username)
-                    .type('{enter}')
-                })
-              // cy.get(rows[0].childNodes[3])
-              //   .dblclick()
-              //   .then(() => {
-              //     cy.focused()
-              //       .type('{selectall}')
-              //       .type(newUser.last_seen_at)
-              //       .type('{enter}')
-              //   })
-              // cy.get(rows[0].childNodes[4])
-              //   .dblclick()
-              //   .then(() => {
-              //     cy.focused()
-              //       .type('{selectall}')
-              //       .type(newUser.registered_at)
-              //       .type('{enter}')
-              //   })
-              submitTable(() => {
-                cy.wait(2000)
-                approveTable(callback)
-              })
-            })
-          })
-        }
-      }
-    })
-  })
-}
-
-const changeLicenseKeyTable = (keys: any, callback?: any) => {
-  visitPage('home')
-  openTableFromTree(libraryToOpenIncludes, 'mpe_config')
-
-  clickOnEdit(() => {
-    editTableField(
-      [
-        { varName: 'DC_ACTIVATION_KEY', varValue: keys.activationKey },
-        { varName: 'DC_LICENCE_KEY', varValue: keys.licenseKey }
-      ],
-      () => {
-        submitTable(() => {
-          cy.wait(2000)
-          approveTable(() => {
-            cy.reload()
-            if (callback) callback()
-          })
-        })
-      }
-    )
-  })
-}
-
-const updateLicenseKeyQuick = (keys: any, callback: any) => {
-  isLicensingPage((result: boolean) => {
-    if (!result) {
-      visitPage('licensing/update')
-      cy.wait(2000)
-    }
-    inputLicenseKeyPage(keys.licenseKey, keys.activationKey)
-
-    callback()
-  })
-}
-
-const generateKeys = async (licenseData: any, resultCallback?: any) => {
-  let keyPair = await window.crypto.subtle.generateKey(
-    {
-      name: 'RSA-OAEP',
-      modulusLength: 2024,
-      publicExponent: new Uint8Array([1, 0, 1]),
-      hash: 'SHA-256'
-    },
-    true,
-    ['encrypt', 'decrypt']
-  )
-
-  const encoded = new TextEncoder().encode(JSON.stringify(licenseData))
-
-  const cipher = await window.crypto.subtle
-    .encrypt(
-      {
-        name: 'RSA-OAEP'
-      },
-      keyPair.publicKey,
-      encoded
-    )
-    .then(
-      (value) => {
-        return value
-      },
-      (err) => {
-        console.log('Encrpyt error', err)
-      }
-    )
-
-  if (!cipher) {
-    alert('Encryptin keys failed')
-    throw new Error('Encryptin keys failed')
-  }
-
-  const privateKeyBytes = await window.crypto.subtle.exportKey(
-    'pkcs8',
-    keyPair.privateKey
-  )
-
-  const activationKey = await arrayBufferToBase64(privateKeyBytes)
-  const licenseKey = await arrayBufferToBase64(cipher)
-
-  if (resultCallback)
-    resultCallback({
-      activationKey,
-      licenseKey
-    })
-}
-
-const editTableField = (edits: EditConfigTableCells[], callback?: any) => {
-  cy.get('td').then((tdNodes: any) => {
-    for (let edit of edits) {
-      let correctRow = false
-
-      for (let node of tdNodes) {
-        if (correctRow) {
-          cy.get(node)
-            .dblclick()
-            .then(() => {
-              // textarea update on long keys
-              cy.focused().invoke('val', edit.varValue).type('{enter}')
-            })
-
-          correctRow = false
-          break
-        }
-
-        if (node.innerText.includes(edit.varName)) {
-          correctRow = true
-        }
-      }
-    }
-
-    if (callback) callback()
-  })
-}
-
-const openTableFromTree = (
-  libNameIncludes: string,
-  tablename: string,
-  callback?: any
-) => {
-  cy.get('.app-loading', { timeout: longerCommandTimeout })
-    .should('not.exist')
-    .then(() => {
-      cy.get('.nav-tree clr-tree > clr-tree-node', {
-        timeout: longerCommandTimeout
-      }).then((treeNodes: any) => {
-        let viyaLib
-
-        for (let node of treeNodes) {
-          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
-            viyaLib = node
-            break
-          }
-        }
-
-        cy.get(viyaLib).within(() => {
-          cy.get('.clr-tree-node-content-container > button').click()
-
-          cy.get('.clr-treenode-link').then((innerNodes: any) => {
-            for (let innerNode of innerNodes) {
-              if (innerNode.innerText.toLowerCase().includes(tablename)) {
-                innerNode.click()
-                if (callback) callback()
-                break
-              }
-            }
-          })
-        })
-      })
-    })
-}
-
-const clickOnAddRow = (callback?: any) => {
-  cy.get('.btnCtrl button.btn-success')
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const clickOnEdit = (callback?: any) => {
-  cy.get('.btnCtrl button.btn-primary', { timeout: longerCommandTimeout })
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const submitTable = (callback?: any) => {
-  cy.get('.btnCtrl button.btn-primary', { timout: longerCommandTimeout })
-    .click()
-    .then(() => {
-      cy.get(".modal.ng-star-inserted button[type='submit']")
-        .click()
-        .then(() => {
-          if (callback) callback()
-        })
-    })
-}
-
-const approveTable = (callback?: any) => {
-  cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Approve')
-    .then((allButtons: any) => {
-      for (let approvalButton of allButtons) {
-        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.click()
-          break
-        }
-      }
-
-      cy.get('button#acceptBtn', { timeout: longerCommandTimeout })
-        .should('exist')
-        .should('not.be.disabled')
-        .click()
-        .then(() => {
-          cy.get('app-history', { timeout: longerCommandTimeout })
-            .should('exist')
-            .then(() => {
-              if (callback) callback()
-            })
-        })
-    })
-}
-
-const visitPage = (url: string) => {
-  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
-}
@@ -1,149 +0,0 @@
-const username = Cypress.env('username')
-const password = Cypress.env('password')
-const hostUrl = Cypress.env('hosturl')
-const appLocation = Cypress.env('appLocation')
-const longerCommandTimeout = Cypress.env('longerCommandTimeout')
-const serverType = Cypress.env('serverType')
-const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
-const fixturePath = 'excels/'
-
-context('liveness tests: ', function () {
-  this.beforeAll(() => {
-    if (serverType !== 'SASJS') {
-      cy.visit(`${hostUrl}/SASLogon/logout`)
-    }
-    cy.loginAndUpdateValidKey(true)
-  })
-
-  this.beforeEach(() => {
-    cy.visit(hostUrl + appLocation)
-
-    visitPage('home')
-  })
-
-  it('1 | Login and submit test', (done) => {
-    cy.get('.nav-tree clr-tree > clr-tree-node', {
-      timeout: longerCommandTimeout
-    }).then((treeNodes: any) => {
-      libraryExistsInTree('viya', treeNodes)
-        ? openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-        : openTableFromTree('dc', 'mpe_x_test')
-
-      attachExcelFile('regular_excel.xlsx', () => {
-        submitExcel()
-        rejectExcel(done)
-      })
-    })
-  })
-
-  /**
-   * Thist part will be needed if we add more tests in future
-   */
-  // this.afterEach(() => {
-  //     cy.visit('https://sas.4gl.io/SASLogon/logout');
-  // })
-})
-
-const visitPage = (url: string) => {
-  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
-}
-
-const libraryExistsInTree = (libName: string, nodes: any) => {
-  for (let node of nodes) {
-    if (node.innerText.toLowerCase().includes(libName.toLowerCase()))
-      return true
-  }
-
-  return false
-}
-
-const openTableFromTree = (
-  libNameIncludes: string,
-  tablename: string,
-  finish: any
-) => {
-  cy.get('.app-loading', { timeout: longerCommandTimeout })
-    .should('not.exist')
-    .then(() => {
-      cy.get('.nav-tree clr-tree > clr-tree-node', {
-        timeout: longerCommandTimeout
-      }).then((treeNodes: any) => {
-        let viyaLib
-
-        for (let node of treeNodes) {
-          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
-            viyaLib = node
-            break
-          }
-        }
-
-        if (!viyaLib && finish) finish(false)
-
-        cy.get(viyaLib).within(() => {
-          cy.get('.clr-tree-node-content-container > button').click()
-
-          cy.get('.clr-treenode-link').then((innerNodes: any) => {
-            for (let innerNode of innerNodes) {
-              if (innerNode.innerText.toLowerCase().includes(tablename)) {
-                innerNode.click()
-                if (finish) finish(true)
-                break
-              }
-            }
-          })
-        })
-      })
-    })
-}
-
-const attachExcelFile = (excelFilename: string, callback?: any) => {
-  cy.get('.buttonBar button:last-child')
-    .should('exist')
-    .click()
-    .then(() => {
-      cy.get('input[type="file"]#file-upload').attachFile(
-        `/${fixturePath}/${excelFilename}`
-      )
-      cy.get('.modal-footer .btn.btn-primary').then((modalBtn) => {
-        modalBtn.click()
-        if (callback) callback()
-      })
-    })
-}
-
-const submitExcel = (callback?: any) => {
-  cy.get('.buttonBar button.preview-submit', { timeout: longerCommandTimeout })
-    .click()
-    .then(() => {
-      if (callback) callback()
-    })
-}
-
-const rejectExcel = (callback?: any) => {
-  cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Approve')
-    .then((allButtons: any) => {
-      for (let approvalButton of allButtons) {
-        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.click()
-          break
-        }
-      }
-
-      cy.get('button.btn-danger')
-        .should('exist')
-        .should('not.be.disabled')
-        .click()
-        .then(() => {
-          cy.get('.modal-footer button.btn-success-outline')
-            .click()
-            .then(() => {
-              cy.get('app-history')
-                .should('exist')
-                .then(() => {
-                  if (callback) callback()
-                })
-            })
-        })
-    })
-}
@@ -1,61 +0,0 @@
-const username = Cypress.env('username')
-const password = Cypress.env('password')
-const hostUrl = Cypress.env('hosturl')
-const appLocation = Cypress.env('appLocation')
-const longerCommandTimeout = Cypress.env('longerCommandTimeout')
-const serverType = Cypress.env('serverType')
-const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
-const fixturePath = 'excels_general/'
-
-context('metanav tests: ', function () {
-  this.beforeAll(() => {
-    cy.visit(`${hostUrl}/SASLogon/logout`)
-    cy.loginAndUpdateValidKey()
-  })
-
-  this.beforeEach(() => {
-    cy.visit(hostUrl + appLocation)
-    cy.get('input.username').type(username)
-    cy.get('input.password').type(password)
-    cy.get('.login-group button').click()
-
-    visitPage('view/metadata')
-  })
-
-  it('1 | Opens metadata object', (done) => {
-    openFirstMetadataFromTree(() => {
-      // BLOCKER
-      // For unkown reasons, .clr-accordion-header-button always null although it is present on the page.
-      cy.get('.clr-accordion-header-button').then((panelNodes: any) => {
-        panelNodes[0].querySelector('button').click()
-      })
-    })
-  })
-
-  this.afterEach(() => {
-    cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
-})
-
-const openFirstMetadataFromTree = (callback?: any) => {
-  cy.get('.app-loading', { timeout: longerCommandTimeout })
-    .should('not.exist')
-    .then(() => {
-      cy.get('.nav-tree clr-tree > clr-tree-node', {
-        timeout: longerCommandTimeout
-      }).then((treeNodes: any) => {
-        let firstMetaNode
-
-        firstMetaNode = treeNodes[1]
-
-        cy.get(firstMetaNode).within(() => {
-          cy.get('.clr-treenode-content').click()
-          callback()
-        })
-      })
-    })
-}
-
-const visitPage = (url: string) => {
-  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
-}
@@ -1,624 +0,0 @@
-import { cloneDeep } from 'lodash-es'
-
-const username = Cypress.env('username')
-const password = Cypress.env('password')
-const hostUrl = Cypress.env('hosturl')
-const appLocation = Cypress.env('appLocation')
-const longerCommandTimeout = Cypress.env('longerCommandTimeout')
-const serverType = Cypress.env('serverType')
-const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
-const fixturePath = 'excels_general/'
-
-context('editor tests: ', function () {
-  this.beforeAll(() => {
-    cy.visit(`${hostUrl}/SASLogon/logout`)
-    cy.loginAndUpdateValidKey()
-  })
-
-  this.beforeEach(() => {
-    cy.visit(hostUrl + appLocation)
-    cy.wait(2000)
-
-    cy.get('body').then(($body) => {
-      const usernameInput = $body.find('input.username')[0]
-
-      if (usernameInput && !Cypress.dom.isHidden(usernameInput)) {
-        cy.get('input.username').type(username)
-        cy.get('input.password').type(password)
-
-        cy.get('.login-group button').click()
-      }
-    })
-
-    visitPage('home')
-  })
-
-  it('1 | Add one viewbox', (done) => {
-    const viewbox_table = 'mpe_audit'
-    const columns = ['LOAD_REF', 'LIBREF', 'DSN', 'KEY_HASH', 'TGTVAR_NM']
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    cy.get('.viewbox-open').click()
-    openTableFromViewboxTree(libraryToOpenIncludes, [viewbox_table])
-
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        if (!viewboxNode.innerText.toLowerCase().includes(viewbox_table)) {
-          return
-        }
-
-        checkColumns(columns, () => {
-          done()
-        })
-      }
-    })
-  })
-
-  it('2 | Add two viewboxes', (done) => {
-    const viewboxes = [
-      {
-        viewbox_table: 'mpe_audit',
-        columns: ['LOAD_REF', 'LIBREF', 'DSN', 'KEY_HASH', 'TGTVAR_NM']
-      },
-      {
-        viewbox_table: 'mpe_alerts',
-        columns: [
-          'TX_FROM',
-          'ALERT_EVENT',
-          'ALERT_LIB',
-          'ALERT_DS',
-          'ALERT_USER'
-        ]
-      }
-    ]
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-    cy.get('.viewbox-open').click()
-    openTableFromViewboxTree(
-      libraryToOpenIncludes,
-      viewboxes.map((viewbox) => viewbox.viewbox_table)
-    )
-
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      let found = 0
-
-      for (let viewboxNode of viewboxNodes) {
-        for (let viewbox of viewboxes) {
-          if (
-            viewboxNode.innerText.toLowerCase().includes(viewbox.viewbox_table)
-          )
-            found++
-        }
-      }
-
-      if (found < viewboxes.length) return
-
-      cy.get('.viewboxes-container .viewbox').then((viewboxNodes: any) => {
-        for (let viewboxNode of viewboxNodes) {
-          cy.get(viewboxNode).within(() => {
-            cy.get('.table-title').then((tableTitle) => {
-              const title = tableTitle[0].innerText
-              const viewbox = viewboxes.find((vb) =>
-                title.toLowerCase().includes(vb.viewbox_table)
-              )
-
-              if (viewbox) {
-                cy.get('.ht_master.handsontable .htCore thead tr').then(
-                  (viewboxColNodes: any) => {
-                    let allColsHtml = viewboxColNodes[0].innerHTML
-
-                    for (let col of viewbox?.columns) {
-                      if (!allColsHtml.includes(col)) return
-                    }
-
-                    done()
-                  }
-                )
-              }
-            })
-          })
-        }
-      })
-    })
-  })
-
-  it('3 | Add viewbox, add columns', (done) => {
-    const viewbox_table = 'mpe_audit'
-    const columns = ['LOAD_REF', 'LIBREF', 'DSN', 'KEY_HASH', 'TGTVAR_NM']
-    const additionalColumns = ['IS_PK']
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    cy.get('.viewbox-open').click()
-    openTableFromViewboxTree(libraryToOpenIncludes, [viewbox_table])
-
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        if (!viewboxNode.innerText.toLowerCase().includes(viewbox_table)) {
-          return
-        }
-
-        openViewboxConfig(viewbox_table)
-
-        addColumns(additionalColumns)
-
-        checkColumns([...columns, ...additionalColumns], () => {
-          done()
-        })
-      }
-    })
-  })
-
-  it('4 | Add viewbox, add columns and reorder', (done) => {
-    const viewbox_table = 'mpe_audit'
-    const columns = ['LOAD_REF', 'LIBREF', 'DSN', 'KEY_HASH', 'TGTVAR_NM']
-    const additionalColumns = ['IS_PK', 'MOVE_TYPE']
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    cy.get('.viewbox-open').click()
-    openTableFromViewboxTree(libraryToOpenIncludes, [viewbox_table])
-
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        if (!viewboxNode.innerText.toLowerCase().includes(viewbox_table)) {
-          return
-        }
-
-        openViewboxConfig(viewbox_table)
-
-        addColumns(additionalColumns, () => {
-          cy.wait(1000)
-          //reorder
-          cy.get('.col-box.column-MOVE_TYPE')
-            .realMouseDown({ button: 'left', position: 'center' })
-            .realMouseMove(0, 10, { position: 'center' })
-          cy.wait(200) // In our case, we wait 200ms cause we have animations which we are sure that take this amount of time
-          cy.get('.col-box.column-IS_PK')
-            .realMouseMove(0, 0, { position: 'center' })
-            .realMouseUp()
-          //reorder end
-
-          cy.wait(500)
-
-          checkColumns([...columns, ...additionalColumns.reverse()], () => {
-            done()
-          })
-        })
-      }
-    })
-  })
-
-  it('5 | Add viewbox, add columns, reorder, remove column, add again', (done) => {
-    const viewbox_table = 'mpe_audit'
-    const columns = ['LOAD_REF', 'LIBREF', 'DSN', 'KEY_HASH', 'TGTVAR_NM']
-    const additionalColumns = ['IS_PK', 'MOVE_TYPE']
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    cy.get('.viewbox-open').click()
-    openTableFromViewboxTree(libraryToOpenIncludes, [viewbox_table])
-
-    cy.get('.open-viewbox').then((viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        if (!viewboxNode.innerText.toLowerCase().includes(viewbox_table)) {
-          return
-        }
-
-        viewboxNode.click()
-
-        addColumns(additionalColumns, () => {
-          cy.wait(1000)
-          //reorder
-          cy.get('.col-box.column-MOVE_TYPE')
-            .realMouseDown({ button: 'left', position: 'center' })
-            .realMouseMove(0, 10, { position: 'center' })
-          cy.wait(200) // In our case, we wait 200ms cause we have animations which we are sure that take this amount of time
-          cy.get('.col-box.column-IS_PK')
-            .realMouseMove(0, 0, { position: 'center' })
-            .realMouseUp()
-          //reorder end
-
-          cy.wait(500)
-
-          checkColumns([...columns, ...additionalColumns.reverse()], () => {
-            const colToRemove = 'MOVE_TYPE'
-
-            removeColumn(colToRemove)
-            checkColumns(
-              [
-                ...columns,
-                ...additionalColumns.filter((col) => col !== colToRemove)
-              ],
-              () => {
-                addColumns([colToRemove], () => {
-                  checkColumns(
-                    [...columns, ...additionalColumns.reverse()],
-                    () => {
-                      done()
-                    }
-                  )
-                })
-              }
-            )
-          })
-        })
-      }
-    })
-  })
-
-  it('6 | Add viewboxes, reload and check url restored configuration', (done) => {
-    const viewboxes = [
-      {
-        viewbox_table: 'mpe_audit',
-        columns: ['LOAD_REF', 'LIBREF', 'DSN', 'KEY_HASH', 'TGTVAR_NM'],
-        additionalColumns: ['IS_PK', 'MOVE_TYPE']
-      },
-      {
-        viewbox_table: 'mpe_alerts',
-        columns: [
-          'TX_FROM',
-          'ALERT_EVENT',
-          'ALERT_LIB',
-          'ALERT_DS',
-          'ALERT_USER'
-        ],
-        additionalColumns: ['TX_TO']
-      }
-    ]
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    cy.get('.viewbox-open').click()
-    openTableFromViewboxTree(libraryToOpenIncludes, [
-      viewboxes[0].viewbox_table,
-      viewboxes[1].viewbox_table
-    ])
-
-    openViewboxConfig(viewboxes[0].viewbox_table)
-
-    cy.wait(500)
-
-    addColumns(viewboxes[0].additionalColumns, () => {
-      cy.wait(1000)
-
-      if (viewboxes[0].viewbox_table === 'mpe_audit') {
-        cy.get('.col-box.column-MOVE_TYPE')
-          .realMouseDown({ button: 'left', position: 'center' })
-          .realMouseMove(0, 10, { position: 'center' })
-        cy.wait(200) // In our case, we wait 200ms cause we have animations which we are sure that take this amount of time
-        cy.get('.col-box.column-IS_PK')
-          .realMouseMove(0, 0, { position: 'center' })
-          .realMouseUp()
-      }
-
-      cy.wait(1000)
-
-      openViewboxConfig(viewboxes[1].viewbox_table)
-      addColumns(viewboxes[1].additionalColumns, () => {
-        cy.wait(1000).reload()
-
-        let result = 0
-
-        checkColumns(
-          [
-            ...viewboxes[0].columns,
-            ...cloneDeep(viewboxes[0].additionalColumns.reverse())
-          ],
-          () => {
-            result++
-
-            if (result === 2) done()
-          }
-        )
-        checkColumns(
-          [...viewboxes[1].columns, ...viewboxes[1].additionalColumns],
-          () => {
-            result++
-
-            if (result === 2) done()
-          }
-        )
-      })
-    })
-  })
-
-  it('7 | Add viewboxes and filter', () => {
-    const viewboxes = ['mpe_x_test', 'mpe_validations']
-
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
-
-    cy.get('.viewbox-open').click()
-    openTableFromViewboxTree(libraryToOpenIncludes, viewboxes)
-
-    cy.wait(1000)
-
-    closeViewboxModal()
-
-    cy.get('.viewboxes-container .viewbox', { withinSubject: null }).then(
-      (viewboxNodes: any) => {
-        for (let viewboxNode of viewboxNodes) {
-          cy.get(viewboxNode).within(() => {
-            cy.get('.table-title').then((title: any) => {
-              cy.get('.hot-spinner')
-                .should('not.exist')
-                .then(() => {
-                  cy.get('clr-icon[shape="filter"]').then((filterButton) => {
-                    filterButton[0].click()
-                  })
-
-                  if (title[0].innerText.includes('MPE_X_TEST')) {
-                    setFilterWithValue(
-                      'SOME_CHAR',
-                      'this is dummy data',
-                      'value',
-                      () => {
-                        cy.get('app-query', { withinSubject: null })
-                          .should('not.exist')
-                          .get('.ht_master.handsontable tbody tr')
-                          .then((rowNodes) => {
-                            const tr = rowNodes[0]
-
-                            expect(rowNodes).to.have.length(1)
-                            expect(tr.innerText).to.equal('0')
-                          })
-                      }
-                    )
-                  } else if (title[0].innerText.includes('MPE_VALIDATIONS')) {
-                    setFilterWithValue('BASE_COL', 'ALERT_LIB', 'value', () => {
-                      cy.get('app-query', { withinSubject: null })
-                        .should('not.exist')
-                        .get('.ht_master.handsontable tbody tr')
-                        .then((rowNodes) => {
-                          const tr = rowNodes[0]
-
-                          expect(rowNodes).to.have.length(1)
-                          expect(tr.innerText).to.contain('ALERT_LIB')
-                        })
-                    })
-                  }
-                })
-            })
-          })
-        }
-      }
-    )
-  })
-})
-
-const checkColumns = (columns: string[], callback: () => void) => {
-  cy.get('.viewboxes-container .viewbox', { withinSubject: null }).then(
-    (viewboxNodes: any) => {
-      for (let viewboxNode of viewboxNodes) {
-        cy.get(viewboxNode).within(() => {
-          cy.get('.ht_master.handsontable thead tr th').then(
-            (viewboxColNodes: any) => {
-              for (let i = 0; i < viewboxColNodes.length; i++) {
-                const col = columns[i]
-                const colNode = viewboxColNodes[i]
-
-                if (
-                  !colNode.innerHTML.toLowerCase().includes(col.toLowerCase())
-                )
-                  return
-              }
-
-              callback()
-            }
-          )
-        })
-      }
-    }
-  )
-}
-
-const closeViewboxModal = () => {
-  cy.get('app-viewboxes .close', { withinSubject: null }).click()
-}
-
-const removeColumn = (column: string) => {
-  cy.get(`.col-box.column-${column} clr-icon`, { withinSubject: null }).click()
-}
-
-const addColumns = (columns: string[], callback?: () => void) => {
-  for (let i = 0; i < columns.length; i++) {
-    const column = columns[i]
-
-    cy.get('.cols-search input', { withinSubject: null }).type(column)
-    cy.get('.cols-search .autocomplete-wrapper', { withinSubject: null })
-      .first()
-      .trigger('keydown', { key: 'ArrowDown' })
-    cy.get('.cols-search .autocomplete-wrapper', { withinSubject: null })
-      .first()
-      .trigger('keydown', { key: 'Enter' })
-      .then(() => {
-        if (i === columns.length - 1 && callback) callback()
-      })
-  }
-}
-
-const openViewboxConfig = (viewbox_tablename: string) => {
-  cy.get('.open-viewbox').then((viewboxes: any) => {
-    for (let openViewbox of viewboxes) {
-      if (openViewbox.innerText.toLowerCase().includes(viewbox_tablename))
-        openViewbox.click()
-    }
-  })
-}
-
-const openTableFromTree = (libNameIncludes: string, tablename: string) => {
-  cy.get('.app-loading', { timeout: longerCommandTimeout })
-    .should('not.exist')
-    .then(() => {
-      cy.get('.nav-tree clr-tree > clr-tree-node', {
-        timeout: longerCommandTimeout
-      }).then((treeNodes: any) => {
-        let viyaLib
-
-        for (let node of treeNodes) {
-          if (new RegExp(libNameIncludes).test(node.innerText.toLowerCase())) {
-            viyaLib = node
-            break
-          }
-        }
-
-        cy.get(viyaLib).within(() => {
-          cy.get('.clr-tree-node-content-container p').click()
-
-          cy.get('.clr-treenode-link').then((innerNodes: any) => {
-            for (let innerNode of innerNodes) {
-              if (innerNode.innerText.toLowerCase().includes(tablename)) {
-                innerNode.click()
-                break
-              }
-            }
-          })
-        })
-      })
-    })
-}
-
-const setFilterWithValue = (
-  variableValue: string,
-  valueString: string,
-  valueField: 'value' | 'time' | 'date' | 'datetime' | 'in' | 'between',
-  callback?: any
-) => {
-  cy.wait(600)
-
-  cy.focused().type(variableValue)
-  cy.wait(100)
-  // cy.focused().trigger('input')
-  cy.get('.variable-col .autocomplete-wrapper', { withinSubject: null })
-    .first()
-    .trigger('keydown', { key: 'ArrowDown' })
-  cy.get('.variable-col .autocomplete-wrapper', {
-    withinSubject: null
-  }).trigger('keydown', { key: 'Enter' })
-  cy.focused().tab()
-  cy.wait(100)
-
-  if (valueField === 'in') {
-    cy.focused().select(valueField.toUpperCase()).trigger('change')
-  } else if (valueField === 'between') {
-    cy.focused().select(valueField.toUpperCase()).trigger('change')
-  } else {
-    cy.focused().tab()
-    cy.wait(100)
-  }
-
-  switch (valueField) {
-    case 'value': {
-      cy.focused().type(valueString)
-
-      break
-    }
-    case 'time': {
-      cy.focused().type(valueString)
-
-      break
-    }
-    case 'date': {
-      cy.focused().type(valueString)
-      cy.focused().tab()
-
-      break
-    }
-    case 'datetime': {
-      const date = valueString.split(' ')[0]
-      const time = valueString.split(' ')[1]
-
-      cy.focused().type(date)
-      cy.focused().tab()
-      cy.focused().tab()
-      cy.focused().type(time)
-
-      break
-    }
-    case 'in': {
-      cy.get('.checkbox-vals').then(() => {
-        cy.focused().tab()
-        cy.focused().click()
-        cy.get('.no-values')
-          .should('not.exist')
-          .then(() => {
-            cy.get('clr-checkbox-wrapper input').then((inputs: any) => {
-              inputs[0].click()
-              cy.get('.in-values-modal .modal-footer button').click()
-
-              cy.get('.modal-footer .btn-success-outline').click()
-
-              if (callback) callback()
-            })
-          })
-      })
-
-      break
-    }
-    case 'between': {
-      cy.focused().tab()
-
-      const start = valueString.split('-')[0]
-      const end = valueString.split('-')[1]
-
-      cy.focused().type(start)
-      cy.focused().tab()
-      cy.focused().type(end)
-    }
-    default: {
-      break
-    }
-  }
-
-  cy.wait(100)
-  cy.focused().tab()
-  cy.wait(100)
-  cy.focused().tab()
-  cy.wait(100)
-  cy.focused().tab()
-  cy.wait(100)
-  cy.focused().tab()
-  cy.wait(100)
-  cy.focused().click()
-
-  if (callback) callback()
-}
-
-const openTableFromViewboxTree = (
-  libNameIncludes: string,
-  tablenames: string[]
-) => {
-  cy.get('.add-new clr-tree > clr-tree-node', {
-    timeout: longerCommandTimeout
-  }).then((treeNodes: any) => {
-    let viyaLib
-
-    for (let node of treeNodes) {
-      if (node.innerText.toLowerCase().includes(libNameIncludes)) {
-        viyaLib = node
-        break
-      }
-    }
-
-    cy.get(viyaLib).within(() => {
-      cy.get('p')
-        .click()
-        .then(() => {
-          cy.get('.clr-treenode-link').then((innerNodes: any) => {
-            for (let innerNode of innerNodes) {
-              for (let tablename of tablenames) {
-                if (innerNode.innerText.toLowerCase().includes(tablename)) {
-                  innerNode.click()
-                }
-              }
-            }
-          })
-        })
-    })
-  })
-}
-
-const visitPage = (url: string) => {
-  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
-}
@@ -20,4 +20,16 @@ import './commands'
 // require('./commands')

 import 'cypress-plugin-tab'
-import "cypress-real-events"
+import 'cypress-real-events'
+
+// Pin the locale
+Cypress.on('window:before:load', (win) => {
+  Object.defineProperty(win.navigator, 'language', {
+    value: 'en-GB',
+    configurable: true
+  })
+  Object.defineProperty(win.navigator, 'languages', {
+    value: ['en-GB'],
+    configurable: true
+  })
+})
@@ -10,7 +10,7 @@ const check = (cwd) => {
        onlyAllow:
          'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
        excludePackages:
-          '@cds/city@1.1.0;@handsontable/angular@15.3.0;handsontable@15.3.0;hyperformula@2.7.1;hyperformula@3.0.0;jackspeak@3.4.3;path-scurry@1.11.1;package-json-from-dist@1.0.1'
+          '@cds/city@1.1.0;@handsontable/angular-wrapper@16.0.1;@handsontable/angular-wrapper@17.1.0;handsontable@^16.0.1;handsontable@16.2.0;handsontable@17.1.0;hyperformula@2.7.1;hyperformula@3.0.0;hyperformula@3.1.0;hyperformula@3.2.0;hyperformula@3.3.0;jackspeak@3.4.3;path-scurry@1.11.1;package-json-from-dist@1.0.1;buffers@0.1.1'
      },
      (error, json) => {
        if (error) {
@@ -0,0 +1,46 @@
+module.exports = {
+  ci: {
+    collect: {
+      settings: {
+        preset: 'desktop',
+        chromeFlags: '--no-sandbox --disable-dev-shm-usage'
+      },
+      url: [
+        'http://localhost:5000/AppStream/clickme/#/home/tables',
+        'http://localhost:5000/AppStream/clickme/#/editor/DC996664.MPE_X_TEST',
+        'http://localhost:5000/AppStream/clickme/#/view/data',
+        'http://localhost:5000/AppStream/clickme/#/view/data/DC996664',
+        'http://localhost:5000/AppStream/clickme/#/view/data/DC996664.MPE_X_TEST',
+        'http://localhost:5000/AppStream/clickme/#/view/usernav/groups',
+        'http://localhost:5000/AppStream/clickme/#/view/usernav/groups',
+        'http://localhost:5000/AppStream/clickme/#/view/usernav/groups/1',
+        'http://localhost:5000/AppStream/clickme/#/view/usernav/users/1',
+        'http://localhost:5000/AppStream/clickme/#/home/excel-maps',
+        'http://localhost:5000/AppStream/clickme/#/home/excel-maps/BASEL-CR2',
+        'http://localhost:5000/AppStream/clickme/#/home/multi-load',
+        'http://localhost:5000/AppStream/clickme/#/review/submitted',
+        'http://localhost:5000/AppStream/clickme/#/review/approve',
+        'http://localhost:5000/AppStream/clickme/#/review/history',
+        'http://localhost:5000/AppStream/clickme/#/stage/DC20221006T142649516_059582_7169',
+        'http://localhost:5000/AppStream/clickme/#/review/submitted/DC20221006T142649516_059582_7169',
+        'http://localhost:5000/AppStream/clickme/#/system'
+      ]
+    },
+    assert: {
+      assertions: {
+        'categories:accessibility': [
+          'error',
+          { minScore: 1, aggregationMethod: 'median' }
+        ],
+        'categories:performance': [
+          'error',
+          { minScore: 0.4, aggregationMethod: 'median' }
+        ]
+      }
+    },
+    upload: {
+      target: 'filesystem',
+      outputDir: './lighthouse-reports'
+    }
+  }
+}
@@ -23,7 +23,7 @@
    "watch": "ng test watch=true",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor protractor.config.js",
-    "postinstall": "node ./src/version.ts && npm run add-githook",
+    "postinstall": "node ./src/version.ts && npm run add-githook && node ./scripts/strip-clr-base64-fonts.mjs && node ./scripts/gen-hot-icons.mjs",
    "add-githook": "[ -d ../.git ] && git config core.hooksPath ./.git-hooks || true",
    "cypress": "cypress open",
    "cy:run": "cypress run",
@@ -31,26 +31,28 @@
    "sasdocs": "sasjs doc && ./sasjs/utils/deploydocs.sh",
    "compodoc:build": "compodoc -p tsconfig.doc.json --name 'Data Controller Client'",
    "compodoc:build-and-serve": "compodoc -p tsconfig.doc.json -s --name 'Data Controller Client'",
-    "compodoc:serve": "compodoc -s --name 'Data Controller Client'"
+    "compodoc:serve": "compodoc -s --name 'Data Controller Client'",
+    "lighthouse": "lhci autorun",
+    "ng": "ng"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^17.3.3",
-    "@angular/cdk": "^17.3.3",
-    "@angular/common": "^17.3.3",
-    "@angular/compiler": "^17.3.3",
-    "@angular/core": "^17.3.3",
-    "@angular/forms": "^17.3.3",
-    "@angular/platform-browser": "^17.3.3",
-    "@angular/platform-browser-dynamic": "^17.3.3",
-    "@angular/router": "^17.3.3",
+    "@angular/animations": "^19.2.20",
+    "@angular/cdk": "^19.2.19",
+    "@angular/common": "^19.2.20",
+    "@angular/compiler": "^19.2.20",
+    "@angular/core": "^19.2.20",
+    "@angular/forms": "^19.2.20",
+    "@angular/platform-browser": "^19.2.20",
+    "@angular/platform-browser-dynamic": "^19.2.20",
+    "@angular/router": "^19.2.20",
    "@cds/core": "^6.15.1",
    "@clr/angular": "file:libraries/clr-angular-17.9.0.tgz",
    "@clr/icons": "^13.0.2",
    "@clr/ui": "file:libraries/clr-ui-17.9.0.tgz",
-    "@handsontable/angular": "^15.3.0",
-    "@sasjs/adapter": "^4.12.1",
-    "@sasjs/utils": "^3.4.0",
+    "@handsontable/angular-wrapper": "^17.1.0",
+    "@sasjs/adapter": "^4.17.0",
+    "@sasjs/utils": "^3.5.3",
    "@sheet/crypto": "file:libraries/sheet-crypto.tgz",
    "@types/d3-graphviz": "^2.6.7",
    "@types/text-encoding": "0.0.35",
@@ -59,15 +61,16 @@
    "crypto-browserify": "^3.12.1",
    "crypto-js": "^4.2.0",
    "d3-graphviz": "^5.0.2",
+    "exceljs": "^4.4.0",
    "fs-extra": "^7.0.1",
-    "handsontable": "^15.3.0",
+    "handsontable": "^17.1.0",
    "https-browserify": "1.0.0",
    "hyperformula": "^2.5.0",
    "iconv-lite": "^0.5.0",
    "jquery-datetimepicker": "^2.5.21",
-    "jsrsasign": "^10.2.0",
+    "jsrsasign": "11.1.1",
    "marked": "^5.0.0",
-    "moment": "^2.26.0",
+    "moment": "^2.30.1",
    "ngx-clipboard": "^16.0.0",
    "ngx-json-viewer": "file:libraries/ngx-json-viewer-3.2.1.tgz",
    "nodejs": "0.0.0",
@@ -80,21 +83,22 @@
    "tslib": "^2.3.0",
    "vm": "^0.1.0",
    "webpack": "^5.91.0",
-    "xlsx": "^0.18.5",
-    "zone.js": "~0.14.4"
+    "xlsx": "file:libraries/xlsx-0.20.3.tgz",
+    "zone.js": "~0.15.1"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.3",
-    "@angular-eslint/builder": "17.3.0",
-    "@angular-eslint/eslint-plugin": "17.3.0",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
-    "@angular-eslint/schematics": "17.3.0",
-    "@angular-eslint/template-parser": "17.3.0",
-    "@angular/cli": "^17.3.3",
-    "@angular/compiler-cli": "^17.3.3",
+    "@angular-devkit/build-angular": "^19.2.24",
+    "@angular-eslint/builder": "19.8.1",
+    "@angular-eslint/eslint-plugin": "19.8.1",
+    "@angular-eslint/eslint-plugin-template": "19.8.1",
+    "@angular-eslint/schematics": "19.8.1",
+    "@angular-eslint/template-parser": "19.8.1",
+    "@angular/cli": "^19.2.24",
+    "@angular/compiler-cli": "^19.2.20",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@compodoc/compodoc": "^1.1.21",
+    "@compodoc/compodoc": "^1.2.1",
    "@cypress/webpack-preprocessor": "^5.17.1",
+    "@lhci/cli": "^0.15.1",
    "@types/core-js": "^2.5.5",
    "@types/crypto-js": "^4.2.1",
    "@types/es6-shim": "^0.31.39",
@@ -102,15 +106,15 @@
    "@types/lodash-es": "^4.17.3",
    "@types/marked": "^4.3.0",
    "@types/node": "12.20.50",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "8.31.1",
+    "@typescript-eslint/parser": "8.31.1",
    "core-js": "^2.5.4",
-    "cypress": "12.17.1",
+    "cypress": "^15.14.2",
    "cypress-file-upload": "^5.0.8",
    "cypress-plugin-tab": "^1.0.5",
    "cypress-real-events": "^1.8.1",
    "es6-shim": "^0.35.5",
-    "eslint": "^8.33.0",
+    "eslint": "8.57.1",
    "git-describe": "^4.0.4",
    "jasmine-core": "~5.1.2",
    "karma": "~6.4.3",
@@ -126,8 +130,13 @@
    "rimraf": "3.0.2",
    "ts-loader": "^9.2.8",
    "ts-node": "^3.3.0",
-    "typescript": "~5.4.4",
+    "typescript": "~5.8.3",
    "wait-on": "^6.0.1",
    "watch": "^1.0.2"
+  },
+  "overrides": {
+    "ajv": "8.18.0",
+    "uuid": "11.1.1",
+    "lighthouse": "13.4.0"
  }
 }
@@ -0,0 +1,69 @@
+import { readFileSync, writeFileSync, mkdirSync, rmSync, existsSync } from 'fs'
+import { resolve, join } from 'path'
+import { createRequire } from 'module'
+
+/**
+ * Generate static SVG assets + an SCSS partial that re-applies HOT v17 classic
+ * theme icons via real URLs (not data: URIs).
+ *
+ * Why: deployed app runs under CSP `img-src 'self'`. HOT v17's classic theme
+ * embeds icons as `data:image/svg+xml,...` in `-webkit-mask-image` rules, which
+ * the CSP blocks. We switch to `ht-theme-classic-no-icons.min.css` and re-add
+ * the icon rules pointing at same-origin SVG files emitted from this script.
+ *
+ * Inputs (HOT's own modules, so semantic names + selector list track upstream):
+ *   handsontable/themes/theme/classic                          → { classicTheme: { icons } }
+ *   handsontable/themes/static/variables/helpers/iconsMap      → iconsMap(icons, themePrefix)
+ *
+ * Outputs:
+ *   client/src/assets/hot-icons/<kebab-name>.svg
+ *   client/src/_hot-icons.scss
+ *
+ * Idempotent: clears the output dir and rewrites both outputs each run.
+ * Skips silently if handsontable isn't installed yet (pre-install runs).
+ */
+const require = createRequire(import.meta.url)
+
+const ASSETS_DIR = resolve('src/assets/hot-icons')
+const SCSS_OUT = resolve('src/_hot-icons.scss')
+const ASSET_URL_PREFIX = './assets/hot-icons/'
+
+const themePath = resolve('node_modules/handsontable/themes/theme/classic.js')
+const mapPath = resolve('node_modules/handsontable/themes/static/variables/helpers/iconsMap.js')
+
+if (!existsSync(themePath) || !existsSync(mapPath)) {
+  console.log('skip: handsontable theme modules not found (likely pre-install run)')
+  process.exit(0)
+}
+
+const { classicTheme } = require(themePath)
+const { iconsMap } = require(mapPath)
+
+const icons = classicTheme.icons
+const cssTemplate = iconsMap(icons, 'ht-theme-classic')
+
+const kebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+
+rmSync(ASSETS_DIR, { recursive: true, force: true })
+mkdirSync(ASSETS_DIR, { recursive: true })
+
+const writeMap = {}
+for (const [name, dataUri] of Object.entries(icons)) {
+  if (typeof dataUri !== 'string' || !dataUri.startsWith('data:image/svg+xml')) continue
+  const decoded = decodeURIComponent(dataUri.replace(/^data:image\/svg\+xml(;charset=utf-8)?,/, ''))
+  const fname = kebab(name) + '.svg'
+  writeFileSync(join(ASSETS_DIR, fname), decoded)
+  writeMap[dataUri] = ASSET_URL_PREFIX + fname
+}
+
+let scss = cssTemplate
+for (const [uri, url] of Object.entries(writeMap)) {
+  scss = scss.split(`url("${uri}")`).join(`url("${url}")`)
+}
+
+const header = '/* Auto-generated by scripts/gen-hot-icons.mjs — do not edit by hand.\n' +
+               '   Regenerated on postinstall; rerun manually via `node scripts/gen-hot-icons.mjs`. */\n\n'
+
+writeFileSync(SCSS_OUT, header + scss + '\n')
+
+console.log(`hot-icons: wrote ${Object.keys(writeMap).length} SVGs + ${SCSS_OUT}`)
@@ -0,0 +1,59 @@
+import { readFileSync, writeFileSync, statSync, rmSync, existsSync } from 'fs'
+import { resolve } from 'path'
+
+/**
+ * Remove Clarity's Metropolis @font-face blocks from clr-ui.min.css.
+ *
+ * Why: Clarity ships Metropolis as base64 data: URLs. The deployed app
+ * runs under CSP `default-src 'self'` (no data: font-src), so every page
+ * logs a font-load failure for each weight. Firefox preemptively
+ * validates every parsed src against CSP even when a later @font-face
+ * supersedes the rule at render time, so the only way to silence the
+ * console is to remove the offending blocks from the parsed CSS.
+ *
+ * Our styles.scss declares the same family/weight/style with same-origin
+ * .woff files, so removing Clarity's blocks entirely is safe and leaves
+ * Metropolis fully functional.
+ *
+ * Idempotent: matches by font-family, so works on a fresh install or a
+ * file that's already been stripped on a previous run.
+ */
+const target = resolve('node_modules/@clr/ui/clr-ui.min.css')
+
+let css
+try {
+  css = readFileSync(target, 'utf8')
+} catch (err) {
+  if (err.code === 'ENOENT') {
+    console.log(`skip: ${target} not found (likely pre-install run)`)
+    process.exit(0)
+  }
+  throw err
+}
+
+const sizeBefore = statSync(target).size
+const blockRe = /@font-face\{[^}]*Metropolis[^}]*\}/g
+const matches = css.match(blockRe) ?? []
+
+if (matches.length === 0) {
+  console.log(`already stripped: ${target}`)
+  process.exit(0)
+}
+
+const stripped = css.replace(blockRe, '')
+writeFileSync(target, stripped)
+const sizeAfter = Buffer.byteLength(stripped)
+console.log(
+  `removed ${matches.length} Metropolis @font-face block(s) from clr-ui.min.css ` +
+    `(${sizeBefore} -> ${sizeAfter} bytes, saved ${sizeBefore - sizeAfter})`
+)
+
+// Webpack 5's persistent cache treats node_modules as immutable
+// (snapshot.module.managedPaths default), so in-place edits don't
+// invalidate cached entries. Drop the Angular build cache so the next
+// build re-reads our stripped clr-ui.min.css.
+const cacheDir = resolve('.angular/cache')
+if (existsSync(cacheDir)) {
+  rmSync(cacheDir, { recursive: true, force: true })
+  console.log(`cleared ${cacheDir} (webpack persistent cache)`)
+}
@@ -0,0 +1,238 @@
+/* Auto-generated by scripts/gen-hot-icons.mjs — do not edit by hand.
+   Regenerated on postinstall; rerun manually via `node scripts/gen-hot-icons.mjs`. */
+
+[class*=ht-theme-classic] .htDropdownMenu table tbody tr td.htSubmenu .htItemWrapper::after,
+[class*=ht-theme-classic] .htContextMenu table tbody tr td.htSubmenu .htItemWrapper::after,
+[class*=ht-theme-classic] .htFiltersConditionsMenu table tbody tr td.htSubmenu .htItemWrapper::after,
+[class*=ht-theme-classic] .pika-single .pika-next {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .pika-single .pika-prev {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-size-section__select-wrapper::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-down.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .changeType::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/select-arrow.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htUISelectCaption::after,
+.htAutocompleteArrow::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/select-arrow.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .columnSorting.sortAction.ascending::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-narrow-up.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .columnSorting.sortAction.descending::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-narrow-down.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-first::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-first::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-prev::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-prev::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-next::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-next::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-page-navigation-section .ht-page-last::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-right-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] [dir="rtl"] .ht-page-navigation-section .ht-page-last::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/arrow-left-with-bar.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htDropdownMenu table tbody tr td .htItemWrapper span.selected::after,
+[class*=ht-theme-classic] .htContextMenu table tbody tr td .htItemWrapper span.selected::after,
+[class*=ht-theme-classic] .htFiltersConditionsMenu table tbody tr td .htItemWrapper span.selected::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/check.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htCheckboxRendererInput {
+  appearance: none;
+}
+
+[class*=ht-theme-classic] .htCheckboxRendererInput::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/checkbox.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.beforeHiddenColumn::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-left.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.afterHiddenColumn::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-right.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.beforeHiddenRow::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-up.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] th.afterHiddenRow::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/caret-hidden-down.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .collapsibleIndicator::before,
+[class*=ht-theme-classic] .ht_nestingButton::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/collapse-off.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .collapsibleIndicator.collapsed::before,
+[class*=ht-theme-classic] .ht_nestingButton.ht_nestingExpand::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/collapse-on.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .htUIRadio > input[type="radio"]::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/radio.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-multi-select-chip-remove::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/chip-close.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-notification__close::before {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/chip-close.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-multi-select-editor-search-icon {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/search.svg");
+  background-color: currentColor;
+}
+
+[class*=ht-theme-classic] .ht-multi-select-editor-item-selected input::after {
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  -webkit-mask-size: contain;
+  -webkit-mask-image: url("./assets/hot-icons/checkbox.svg");
+  background-color: currentColor;
+}
@@ -55,6 +55,7 @@ export interface HandsontableStaticConfig {
 * Cached viyaApi collections, search and selected endpoint
 */
 export const globals: {
+  embed: boolean
  rootParam: string
  dcLib: string
  xlmaps: XLMapListItem[]
@@ -69,6 +70,7 @@ export const globals: {
  handsontable: HandsontableStaticConfig
  [key: string]: any
 } = {
+  embed: false,
  rootParam: <string>'',
  dcLib: '',
  xlmaps: [],
@@ -107,7 +107,7 @@
    </div>
  </ng-container>

-  <header class="app-header">
+  <header class="app-header" *ngIf="!embed">
    <!-- <button
      *ngIf="
        isMainRoute('view') ||
@@ -127,9 +127,10 @@
      "
      (click)="toggleSidebar()"
      type="button"
+      aria-label="Toggle sidebar"
      class="cursor-pointer select-none ml-10 d-flex clr-justify-content-center clr-align-items-center"
    >
-      <clr-icon size="24" shape="tree-view"></clr-icon>
+      <clr-icon size="24" shape="tree-view" aria-hidden="true"></clr-icon>
    </div>

    <div class="logo d-flex clr-align-items-center">
@@ -213,9 +214,10 @@
  </header>
  <nav
    *ngIf="
-      router.url.includes('submitted') ||
-      router.url.includes('approve') ||
-      router.url.includes('history')
+      !embed &&
+      (router.url.includes('submitted') ||
+        router.url.includes('approve') ||
+        router.url.includes('history'))
    "
    class="subnav"
  >
@@ -11,7 +11,7 @@ import { Location } from '@angular/common'
 import '@clr/icons'
 import '@clr/icons/shapes/all-shapes'
 import { globals } from './_globals'
-import * as moment from 'moment'
+import moment from 'moment'
 import { EventService } from './services/event.service'
 import { AppService } from './services/app.service'
 import { InfoModal } from './models/InfoModal'
@@ -42,7 +42,8 @@ ClarityIcons.addIcons(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class AppComponent {
  private dcAdapterSettings: DcAdapterSettings | undefined
@@ -69,6 +70,7 @@ export class AppComponent {

  public syssite = this.appService.syssite
  public licenceState = this.licenceService.licenceState
+  public embed = globals.embed

  constructor(
    private appService: AppService,
@@ -142,6 +144,16 @@ export class AppComponent {
      }
    })

+    const hashQuery = window.location.hash.split('?')[1]
+    if (hashQuery) {
+      const embedParam = new URLSearchParams(hashQuery).get('embed')
+      if (embedParam !== null) {
+        const isEmbed = embedParam !== 'false'
+        globals.embed = isEmbed
+        this.embed = isEmbed
+      }
+    }
+
    this.subscribeToShowAbortModal()
    this.subscribeToRequestsModal()
    this.subscribeToStartupData()
@@ -197,6 +209,7 @@ export class AppComponent {
      dcPath: getAppAttribute('dcPath') || '',
      debug: getAppAttribute('debug') === 'true' || false,
      useComputeApi: this.parseComputeApi(getAppAttribute('useComputeApi')),
+      runAsTask: getAppAttribute('runAsTask') === 'true' || false,
      contextName: getAppAttribute('contextName') || '',
      hotLicenceKey: getAppAttribute('hotLicenceKey') || ''
    }
@@ -1,5 +1,4 @@
 declare module 'save-svg-as-png'
-declare module 'numbro/dist/languages.min'
 declare interface Navigator {
  msSaveBlob: (blob: any, defaultName?: string) => boolean
 }
@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { BrowserModule } from '@angular/platform-browser'
@@ -36,12 +36,12 @@ import { AppSettingsService } from './services/app-settings.service'
    InfoModalComponent,
    ViyaApiExplorerComponent
  ],
+  bootstrap: [AppComponent],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
-    HttpClientModule,
    ROUTING,
    SharedModule,
    ClarityModule,
@@ -50,7 +50,12 @@ import { AppSettingsService } from './services/app-settings.service'
    DirectivesModule,
    NgxJsonViewerModule
  ],
-  providers: [AppService, SasStoreService, LicensingGuard, AppSettingsService],
-  bootstrap: [AppComponent]
+  providers: [
+    AppService,
+    SasStoreService,
+    LicensingGuard,
+    AppSettingsService,
+    provideHttpClient(withInterceptorsFromDi())
+  ]
 })
 export class AppModule {}
@@ -8,15 +8,7 @@ import { RouterModule, Routes } from '@angular/router'

 import { NotFoundComponent } from './not-found/not-found.component'

-import { DeployModule } from './deploy/deploy.module'
-import { EditorModule } from './editor/editor.module'
-import { HomeModule } from './home/home.module'
-import { LicensingModule } from './licensing/licensing.module'
-import { ReviewModule } from './review/review.module'
 import { ReviewRouteComponent } from './routes/review-route/review-route.component'
-import { StageModule } from './stage/stage.module'
-import { SystemModule } from './system/system.module'
-import { ViewerModule } from './viewer/viewer.module'

 /**
 * Defining routes
@@ -25,7 +17,8 @@ export const ROUTES: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'view',
-    loadChildren: () => ViewerModule
+    loadChildren: () =>
+      import('./viewer/viewer.module').then((m) => m.ViewerModule)
  },
  {
    /**
@@ -37,36 +30,42 @@ export const ROUTES: Routes = [
      { path: '', pathMatch: 'full', redirectTo: 'toapprove' },
      {
        path: '',
-        loadChildren: () => ReviewModule
+        loadChildren: () =>
+          import('./review/review.module').then((m) => m.ReviewModule)
      }
    ]
  },
  {
    path: 'licensing',
-    loadChildren: () => LicensingModule
+    loadChildren: () =>
+      import('./licensing/licensing.module').then((m) => m.LicensingModule)
  },
  {
    path: 'home',
-    loadChildren: () => HomeModule
+    loadChildren: () => import('./home/home.module').then((m) => m.HomeModule)
  },
  {
    /**
     * Load editor module with subroutes
     */
    path: 'editor',
-    loadChildren: () => EditorModule
+    loadChildren: () =>
+      import('./editor/editor.module').then((m) => m.EditorModule)
  },
  {
    path: 'stage',
-    loadChildren: () => StageModule
+    loadChildren: () =>
+      import('./stage/stage.module').then((m) => m.StageModule)
  },
  {
    path: 'system',
-    loadChildren: () => SystemModule
+    loadChildren: () =>
+      import('./system/system.module').then((m) => m.SystemModule)
  },
  {
    path: 'deploy',
-    loadChildren: () => DeployModule
+    loadChildren: () =>
+      import('./deploy/deploy.module').then((m) => m.DeployModule)
  },
  { path: '**', component: NotFoundComponent }
 ]
@@ -1,4 +1,4 @@
-<div class="content-area position-relative">
+<main class="content-area position-relative">
  <div class="clr-row">
    <!-- T&C section -->
    <div *ngIf="step === 0" id="TCS" class="card">
@@ -97,4 +97,4 @@
      </div>
    </ng-container>
  </ng-container>
-</div>
+</main>
@@ -14,7 +14,8 @@ import { DcAdapterSettings } from '../models/DcAdapterSettings'
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class DeployComponent implements OnInit {
  public step: number = 0
@@ -29,7 +29,8 @@ import {
  selector: 'app-automatic-deploy',
  templateUrl: './automatic.component.html',
  styleUrls: ['./automatic.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class AutomaticComponent implements OnInit {
  @Input() sasJs!: SASjs
@@ -78,6 +79,17 @@ export class AutomaticComponent implements OnInit {
    runMakeData: null
  }

+  public sasjsConfig = this.sasService.getSasjsConfig()
+
+  /**
+   * makedata service will be run in a new window
+   * This is needed to ensure that the user can see the logs
+   * and the progress of the service execution.
+   * If this is set to `false`, the service will be run in the same window
+   * using the adapter request method.
+   */
+  public deployInNewWindow: boolean = true
+
  constructor(
    private eventService: EventService,
    private deployService: DeployService,
@@ -156,8 +168,7 @@ export class AutomaticComponent implements OnInit {
  public async getAdminGroups() {
    return new Promise<void>((resolve, reject) => {
      this.adminGroupsLoading = true
-
-      this.sasViyaService
+      ;(this.sasViyaService
        .getAdminGroups()
        .subscribe((res: ViyaApiIdentities) => {
          this.adminGroupsLoading = false
@@ -177,7 +188,7 @@ export class AutomaticComponent implements OnInit {
          this.eventService.showAbortModal('admin groups', err)

          reject(err)
-        }
+        })
    })
  }

@@ -246,7 +257,7 @@ export class AutomaticComponent implements OnInit {
  }

  public async runAutoDeploy(executeJson: boolean = false) {
-    this.autodeploying = true
+    if (!this.deployInNewWindow) this.autodeploying = true

    if (executeJson) {
      this.executeJson()
@@ -255,7 +266,7 @@ export class AutomaticComponent implements OnInit {
    if (this.recreateDatabase) {
      this.createDatabase()
    } else {
-      this.autodeployDone = true
+      if (!this.deployInNewWindow) this.autodeployDone = true
    }
  }

@@ -296,51 +307,86 @@ export class AutomaticComponent implements OnInit {
      debug: true
    }

-    this.sasJs
-      .request(`services/admin/makedata`, data, overrideConfig, () => {
-        this.sasService.shouldLogin.next(true)
+    if (this.deployInNewWindow) {
+      this.runMakedataInNewWindow({
+        contextName: selectedComputeContextName,
+        admin: this.selectedAdminGroup,
+        dcPath: this.dcPath
      })
-      .then((res: any) => {
-        this.autodeployDone = true
+    } else {
+      this.sasJs
+        .request(`services/admin/makedata`, data, overrideConfig, () => {
+          this.sasService.shouldLogin.next(true)
+        })
+        .then((res: any) => {
+          this.autodeployDone = true

-        try {
-          this.makeDataResponse = JSON.stringify(res)
-        } catch {
-          this.makeDataResponse = res
-        }
+          try {
+            this.makeDataResponse = JSON.stringify(res)
+          } catch {
+            this.makeDataResponse = res
+          }

-        if (res.result && res.result.length > 0) {
-          this.autoDeployStatus.runMakeData = true
-        } else {
+          if (res.result && res.result.length > 0) {
+            this.autoDeployStatus.runMakeData = true
+          } else {
+            this.autoDeployStatus.runMakeData = false
+          }
+
+          if (typeof res.sasjsAbort !== 'undefined') {
+            const abortRes = res
+            const abortMsg = abortRes.sasjsAbort[0].MSG
+            const macMsg = abortRes.sasjsAbort[0].MAC
+
+            this.eventService.showAbortModal('makedata', abortMsg, {
+              SYSWARNINGTEXT: abortRes.SYSWARNINGTEXT,
+              SYSERRORTEXT: abortRes.SYSERRORTEXT,
+              MAC: macMsg
+            })
+          }
+
+          if (this.helperService.isStreamingViya())
+            this.updateIndexHtmlComputeContext()
+        })
+        .catch((err: any) => {
+          this.eventService.showAbortModal('makedata', JSON.stringify(err))
          this.autoDeployStatus.runMakeData = false
-        }
+          this.autodeployDone = true

-        if (typeof res.sasjsAbort !== 'undefined') {
-          const abortRes = res
-          const abortMsg = abortRes.sasjsAbort[0].MSG
-          const macMsg = abortRes.sasjsAbort[0].MAC
+          try {
+            this.makeDataResponse = JSON.stringify(err)
+          } catch {
+            this.makeDataResponse = err
+          }
+        })
+    }
+  }

-          this.eventService.showAbortModal('makedata', abortMsg, {
-            SYSWARNINGTEXT: abortRes.SYSWARNINGTEXT,
-            SYSERRORTEXT: abortRes.SYSERRORTEXT,
-            MAC: macMsg
-          })
-        }
+  public runMakedataInNewWindow(params: {
+    contextName: string
+    admin: string
+    dcPath: string
+  }) {
+    let serverUrl = this.sasjsConfig.serverUrl
+    let appLoc = this.sasjsConfig.appLoc
+    const execPath = this.sasService.getExecutionPath()
+    let contextname = `&_contextname=${params.contextName}`
+    let admin = `&admin=${params.admin}`
+    let dcPath = `&dcpath=${params.dcPath}`
+    let debug = this.sasService.getDebugUrlParam()

-        if (this.helperService.isStreamingViya())
-          this.updateIndexHtmlComputeContext()
-      })
-      .catch((err: any) => {
-        this.eventService.showAbortModal('makedata', JSON.stringify(err))
-        this.autoDeployStatus.runMakeData = false
-        this.autodeployDone = true
+    let programUrl =
+      serverUrl +
+      execPath +
+      '/?_program=' +
+      appLoc +
+      '/services/admin/makedata' +
+      contextname +
+      admin +
+      dcPath +
+      debug

-        try {
-          this.makeDataResponse = JSON.stringify(err)
-        } catch {
-          this.makeDataResponse = err
-        }
-      })
+    window.open(programUrl)
  }

  /**
@@ -18,7 +18,8 @@ import { SasService } from 'src/app/services/sas.service'
  selector: 'app-manual-deploy',
  templateUrl: './manual.component.html',
  styleUrls: ['./manual.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class ManualComponent implements OnInit {
  @Input() sasJs!: SASjs
@@ -250,7 +251,7 @@ export class ManualComponent implements OnInit {
          this.selectedAdminGroup +
          '&DCPATH=' +
          this.dcPath +
-          '&_debug=131'
+          this.sasService.getDebugUrlParam()

      window.open(url, '_blank')

@@ -20,7 +20,8 @@ import { SasjsService } from 'src/app/services/sasjs.service'
  selector: 'app-sasjs-configurator',
  templateUrl: './sasjs-configurator.component.html',
  styleUrls: ['./sasjs-configurator.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class SasjsConfiguratorComponent implements OnInit {
  @Input() sasJs!: SASjs
@@ -7,7 +7,8 @@ import {
 } from '@angular/core'

@Directive({
-  selector: '[appDragNdrop]'
+  selector: '[appDragNdrop]',
+  standalone: false
 })
 export class DragNdropDirective {
  @HostBinding('class.fileover') fileOver: boolean = false
@@ -9,7 +9,8 @@ import {
 import { FileUploader } from '../models/FileUploader.class'

@Directive({
-  selector: '[appFileDrop]'
+  selector: '[appFileDrop]',
+  standalone: false
 })
 export class FileDropDirective {
  @Input() uploader?: FileUploader
@@ -9,7 +9,8 @@ import {
 import { FileUploader } from '../models/FileUploader.class'

@Directive({
-  selector: '[appFileSelect]'
+  selector: '[appFileSelect]',
+  standalone: false
 })
 export class FileSelectDirective {
  @Input() uploader?: FileUploader
@@ -6,7 +6,8 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
 * Calling functions in html is bad for performance
 */
@Directive({
-  selector: '[ngVar]'
+  selector: '[ngVar]',
+  standalone: false
 })
 export class NgVarDirective {
  @Input()
@@ -1,7 +1,8 @@
 import { Directive, HostListener } from '@angular/core'

@Directive({
-  selector: '[appStealFocus]'
+  selector: '[appStealFocus]',
+  standalone: false
 })
 export class StealFocusDirective {
  constructor() {}
@@ -177,45 +177,45 @@
                </div>
              </ng-container>

-              <clr-textarea-container class="date-field" *ngSwitchCase="'time'">
-                <textarea
-                  clrTextarea
-                  (paste)="recordInputPaste($event)"
-                  (input)="recordInputChange($event, col.key)"
+              <div class="date-field" *ngSwitchCase="'intl-time'">
+                <input
+                  type="time"
+                  step="1"
+                  class="date-input"
+                  [attr.aria-label]="col.key"
                  [class.invalid-data]="
                    currentRecordInvalidCols.includes(col.key)
                  "
-                  [rows]="col.value.length > 80 ? 6 : 1"
-                  [(ngModel)]="currentRecord[col.key]"
-                  [class.not-char]="
-                    currentRecordValidator?.getRule(col.key)?.type
-                  "
-                ></textarea>
-                <clr-control-helper>HH:mm:ss</clr-control-helper>
-              </clr-textarea-container>
+                  [value]="currentRecord[col.key]"
+                  (change)="recordTimeChange($event, col.key)"
+                />
+              </div>

-              <div class="date-field" *ngSwitchCase="'date'">
-                <textarea
-                  clrTextarea
-                  (paste)="recordInputPaste($event)"
-                  (input)="recordInputChange($event, col.key)"
+              <div class="date-field" *ngSwitchCase="'intl-datetime'">
+                <input
+                  type="datetime-local"
+                  step="1"
+                  class="date-input"
+                  [attr.aria-label]="col.key"
                  [class.invalid-data]="
                    currentRecordInvalidCols.includes(col.key)
                  "
-                  rows="1"
-                  cols="auto"
-                  class="not-char"
-                  [(ngModel)]="currentRecord[col.key]"
-                ></textarea>
-                <clr-date-container class="date-picker">
-                  <input
-                    type="date"
-                    name="date"
-                    class="d-none"
-                    (clrDateChange)="recordDateChange($event, col.key)"
-                    clrDate
-                  />
-                </clr-date-container>
+                  [value]="toNativeDatetime(currentRecord[col.key])"
+                  (change)="recordDatetimeChange($event, col.key)"
+                />
+              </div>
+
+              <div class="date-field" *ngSwitchCase="'intl-date'">
+                <input
+                  type="date"
+                  class="date-input"
+                  [attr.aria-label]="col.key"
+                  [class.invalid-data]="
+                    currentRecordInvalidCols.includes(col.key)
+                  "
+                  [value]="currentRecord[col.key]"
+                  (change)="recordDateChange($event, col.key)"
+                />
              </div>
              <div *ngSwitchCase="'autocomplete'">
                <ng-container
@@ -255,6 +255,7 @@
        type="button"
        class="btn btn-outline focusable"
        tabindex="0"
+        aria-label="Previous record"
        (click)="onPreviousRecordClick()"
        [disabled]="currentRecordInvalidCols.length > 0"
      >
@@ -267,6 +268,7 @@
        type="button"
        class="btn btn-outline focusable"
        tabindex="0"
+        aria-label="Next record"
        (click)="onNextRecordClick()"
        [disabled]="currentRecordInvalidCols.length > 0"
      >
@@ -2,18 +2,19 @@ import { KeyValue } from '@angular/common'
 import {
  Component,
  EventEmitter,
+  HostListener,
  Input,
  OnInit,
  Output,
  ViewEncapsulation
 } from '@angular/core'
-import moment from 'moment'
 import { ValidateFilterSASResponse } from 'src/app/models/sas/validate-filter.model'
 import { QueryClause } from 'src/app/models/TableData'
 import { HelperService } from 'src/app/services/helper.service'
 import { SasStoreService } from 'src/app/services/sas-store.service'
 import { DcValidator } from 'src/app/shared/dc-validator/dc-validator'
 import { DcValidation } from 'src/app/shared/dc-validator/models/dc-validation.model'
+import { isEmpty } from 'src/app/shared/dc-validator/utils/isEmpty'
 import {
  EditRecordDropdownChangeEvent,
  EditRecordInputFocusedEvent
@@ -24,7 +25,8 @@ import { EditRecordModal } from '../../models/EditRecordModal'
  selector: 'app-edit-record',
  templateUrl: './edit-record.component.html',
  styleUrls: ['./edit-record.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class EditRecordComponent implements OnInit {
  @Input() currentRecord!: EditRecordModal
@@ -89,17 +91,69 @@ export class EditRecordComponent implements OnInit {
  }

  /**
-   * Fired when date field in the record change
-   * Function will parse date and format to string
-   * @param date picker value
+   * Fired when the native date picker (intl-date) changes. A native
+   * `<input type="date">` value is always ISO `YYYY-MM-DD`, so it is stored
+   * as-is. Mirrors recordTimeChange / recordDatetimeChange.
+   * @param event native <input type="date"> change event
   * @param colKey column name (key)
   */
-  recordDateChange(date: Date, colKey: string) {
-    let cellValidation = this.currentRecordValidator?.getRule(colKey)
-    let format = cellValidation ? cellValidation.dateFormat : ''
+  recordDateChange(event: Event, colKey: string) {
+    const value = (event.target as HTMLInputElement).value // YYYY-MM-DD
+    if (!value || !this.currentRecord) return
+    this.currentRecord[colKey] = value
+    this.revalidateRecordCol(colKey, value)
+  }

-    if (this.currentRecord)
-      this.currentRecord[colKey] = moment(date).format(format)
+  /**
+   * Stored `YYYY-MM-DD HH:mm:ss` → native `<input type="datetime-local">` value
+   * `YYYY-MM-DDTHH:mm:ss`, so the picker opens at the current value.
+   */
+  toNativeDatetime(value: any): string {
+    if (typeof value !== 'string') return ''
+    return value.includes(' ') ? value.replace(' ', 'T') : value
+  }
+
+  /**
+   * Re-runs validation for a column after a native picker change (the picker
+   * handlers set the value programmatically, which does not fire the textarea's
+   * input handler). Mirrors recordInputChange's validate + state update.
+   */
+  private revalidateRecordCol(colName: string, value: any) {
+    const colRules = this.currentRecordValidator?.getRule(colName)
+    this.validateRecordCol(colRules, value).then((valid: boolean) =>
+      this.updateValidationState(colName, valid)
+    )
+  }
+
+  /**
+   * Fired when the native time picker (intl-time) changes. Stores 24h
+   * `HH:mm:ss`, padding the seconds the browser may omit. Mirrors the
+   * IntlDatetimeEditor conversion used by the HOT grid.
+   * @param event native <input type="time"> change event
+   * @param colKey column name (key)
+   */
+  recordTimeChange(event: Event, colKey: string) {
+    const value = (event.target as HTMLInputElement).value // HH:mm[:ss]
+    if (!value || !this.currentRecord) return
+    const stored = value.length === 5 ? `${value}:00` : value
+    this.currentRecord[colKey] = stored
+    this.revalidateRecordCol(colKey, stored)
+  }
+
+  /**
+   * Fired when the native datetime picker (intl-datetime) changes. Converts the
+   * native `YYYY-MM-DDTHH:mm[:ss]` into SAS' stored `YYYY-MM-DD HH:mm:ss`,
+   * padding seconds. Mirrors the IntlDatetimeEditor conversion used by the grid.
+   * @param event native <input type="datetime-local"> change event
+   * @param colKey column name (key)
+   */
+  recordDatetimeChange(event: Event, colKey: string) {
+    const value = (event.target as HTMLInputElement).value // YYYY-MM-DDTHH:mm[:ss]
+    if (!value || !this.currentRecord) return
+    const [date, time] = value.split('T')
+    const stored = `${date} ${time.length === 5 ? `${time}:00` : time}`
+    this.currentRecord[colKey] = stored
+    this.revalidateRecordCol(colKey, stored)
  }

  /**
@@ -118,6 +172,16 @@ export class EditRecordComponent implements OnInit {
    this.onRecordEditClose.emit()
  }

+  /**
+   * Close the modal on Escape (cancel, like the Close button). A native picker
+   * swallows the first Escape to dismiss itself, so the modal only closes once
+   * focus is back on the form.
+   */
+  @HostListener('document:keydown.escape')
+  onEscapeKey() {
+    this.closeRecordEdit()
+  }
+
  /**
   * Emitting output event when dropdown (autocomplete) input in any col change
   * @param colName column name (key)
@@ -145,23 +209,63 @@ export class EditRecordComponent implements OnInit {
    }, 0)
  }

-  async recordInputChange(event: any, colName: string) {
+  async recordInputChange(event: any, colName: string): Promise<void> {
    const colRules = this.currentRecordValidator?.getRule(colName)
    const value = event.target.value

    this.helperService.debounceCall(300, () => {
      this.validateRecordCol(colRules, value).then((valid: boolean) => {
-        const index = this.currentRecordInvalidCols.indexOf(colName)
+        this.updateValidationState(colName, valid)

-        if (valid) {
-          if (index > -1) this.currentRecordInvalidCols.splice(index, 1)
-        } else {
-          if (index < 0) this.currentRecordInvalidCols.push(colName)
+        if (!valid) {
+          this.tryAutoPopulateNotNull(event, colName, colRules, value)
        }
      })
    })
  }

+  /**
+   * Updates the invalid columns list based on validation result
+   */
+  private updateValidationState(colName: string, valid: boolean): void {
+    const index = this.currentRecordInvalidCols.indexOf(colName)
+
+    if (valid && index > -1) {
+      this.currentRecordInvalidCols.splice(index, 1)
+    } else if (!valid && index < 0) {
+      this.currentRecordInvalidCols.push(colName)
+    }
+  }
+
+  /**
+   * Auto-populates NOTNULL default value when the field is empty and has a default
+   */
+  private tryAutoPopulateNotNull(
+    event: any,
+    colName: string,
+    colRules: DcValidation | undefined,
+    value: any
+  ): void {
+    if (
+      !isEmpty(value) ||
+      !this.currentRecordValidator ||
+      !this.currentRecord
+    ) {
+      return
+    }
+
+    const defaultValue =
+      this.currentRecordValidator.getNotNullDefaultValue(colName)
+    if (defaultValue === undefined) return
+
+    this.currentRecord[colName] = defaultValue
+    event.target.value = defaultValue
+
+    this.validateRecordCol(colRules, defaultValue).then((isValid: boolean) => {
+      this.updateValidationState(colName, isValid)
+    })
+  }
+
  onNextRecordClick() {
    this.onNextRecord.emit()
  }
@@ -171,23 +275,8 @@ export class EditRecordComponent implements OnInit {
  }

  public copyToClip(text: string) {
-    const modalElement = document.querySelector('#recordModalRef .modal-title')
-
-    if (modalElement) {
-      const selBox = document.createElement('textarea')
-      selBox.style.position = 'fixed'
-      selBox.style.left = '0'
-      selBox.style.top = '0'
-      selBox.style.opacity = '0'
-      selBox.style.zIndex = '5000'
-      selBox.value = text
-      modalElement.appendChild(selBox)
-      selBox.focus()
-      selBox.select()
-      document.execCommand('copy')
-      modalElement.removeChild(selBox)
-      this.generatedRecordUrl = text
-    }
+    navigator.clipboard.writeText(text)
+    this.generatedRecordUrl = text
  }

  async generateEditRecordUrl() {
@@ -206,8 +295,9 @@ export class EditRecordComponent implements OnInit {
          if (obj.data === key) {
            if (
              obj.type === 'numeric' ||
-              obj.type === 'date' ||
-              obj.type === 'time'
+              obj.type === 'intl-date' ||
+              obj.type === 'intl-time' ||
+              obj.type === 'intl-datetime'
            ) {
              type = 'N'
            }
@@ -11,7 +11,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'
  selector: 'app-upload-stater',
  templateUrl: './upload-stater.component.html',
  styleUrls: ['./upload-stater.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class UploadStaterComponent implements OnInit {
  public statesList: string[] = [] //States appended to be displayed
@@ -1,4 +1,4 @@
-<div class="content-area d-flex clr-flex-column">
+<main class="content-area d-flex clr-flex-column">
  <clr-modal
    appFileDrop
    (fileOver)="fileOverBase($event)"
@@ -165,21 +165,30 @@
        class="card-header clr-row buttonBar headerBar clr-flex-md-row clr-justify-content-center clr-justify-content-lg-end"
      >
        <div
-          *ngIf="tableTrue"
+          *ngIf="tableTrue && !embed"
          class="clr-col-12 clr-col-md-3 clr-col-lg-4 backBtn"
        >
          <span
            class="btn icon-collapse btn-sm btn-icon btn-dimmed"
            [routerLink]="['/home']"
          >
-            <clr-icon shape="caret" dir="left" size="20"></clr-icon>
+            <clr-icon
+              aria-hidden="true"
+              shape="caret"
+              dir="left"
+              size="20"
+            ></clr-icon>
            <span class="text">Back to table selection</span>
          </span>
          <span
            (click)="viewboxManager()"
            class="btn icon-collapse btn-sm btn-icon btn-dimmed viewbox-open"
          >
-            <clr-icon shape="view-cards" size="20"></clr-icon>
+            <clr-icon
+              aria-hidden="true"
+              shape="view-cards"
+              size="20"
+            ></clr-icon>
            <span class="text">Viewboxes</span>
          </span>
        </div>
@@ -207,6 +216,7 @@

              <clr-icon
                *ngIf="libdsParsed.tableName.includes('-FC')"
+                aria-hidden="true"
                shape="bolt"
                class="color-yellow"
              ></clr-icon>
@@ -251,7 +261,7 @@
              class="btnView btn icon-collapse btn-sm btn-icon btn-block btn-dimmed"
              (click)="openQb()"
            >
-              <clr-icon shape="filter"></clr-icon>
+              <clr-icon aria-hidden="true" shape="filter"></clr-icon>
              <span class="text">Filter</span>
            </button>

@@ -260,7 +270,7 @@
              class="btn icon-collapse btn-sm btn-primary btn-block"
              (click)="editTable()"
            >
-              <clr-icon shape="note"></clr-icon>
+              <clr-icon aria-hidden="true" shape="note"></clr-icon>
              <span class="text">Edit</span>
            </button>

@@ -270,7 +280,7 @@
              type="button"
              class="btn icon-collapse btn-sm btn-success btn-block mr-0"
            >
-              <clr-icon shape="upload"></clr-icon>
+              <clr-icon aria-hidden="true" shape="upload"></clr-icon>
              <span class="text">Upload</span>
            </button>
          </ng-container>
@@ -281,7 +291,7 @@
              class="btn btn-sm btn-icon btn-outline-danger"
              (click)="cancelEdit()"
            >
-              <clr-icon shape="times"></clr-icon>
+              <clr-icon aria-hidden="true" shape="times"></clr-icon>
              <span>Cancel</span>
            </button>

@@ -294,7 +304,8 @@
                [class.dc-locked-control]="restrictions.restrictAddRow"
                (click)="!restrictions.restrictAddRow ? addRow() : ''"
              >
-                <clr-icon shape="plus" size="16"></clr-icon>Add Row
+                <clr-icon aria-hidden="true" shape="plus" size="16"></clr-icon
+                >Add Row
              </button>

              <clr-tooltip-content
@@ -319,7 +330,8 @@
              class="btn btn-sm btn-primary"
              (click)="checkSave()"
            >
-              <clr-icon shape="check" size="20"></clr-icon>Submit
+              <clr-icon aria-hidden="true" shape="check" size="20"></clr-icon
+              >Submit
            </button>
          </ng-container>

@@ -329,7 +341,7 @@
              class="btn btn-sm btn-icon btn-outline-danger btn-upload-preview"
              (click)="discardSourceFile = true"
            >
-              <clr-icon shape="times"></clr-icon>
+              <clr-icon aria-hidden="true" shape="times"></clr-icon>
              <span>Discard file</span>
            </button>

@@ -339,7 +351,7 @@
              class="btn btn-sm btn-primary btn-upload-preview"
              (click)="manualFileEditModal = true"
            >
-              <clr-icon shape="note"></clr-icon>
+              <clr-icon aria-hidden="true" shape="note"></clr-icon>
              <span>Edit</span>
            </button>

@@ -349,7 +361,7 @@
              (click)="submitExcel()"
              [clrLoading]="uploadLoading"
            >
-              <clr-icon shape="check" size="20"></clr-icon>
+              <clr-icon aria-hidden="true" shape="check" size="20"></clr-icon>
              Submit
            </button>
          </ng-container>
@@ -382,7 +394,11 @@

            <ng-container *ngIf="getdataError">
              <span>
-                <clr-icon shape="error-standard" class="error-icon"></clr-icon>
+                <clr-icon
+                  aria-hidden="true"
+                  shape="error-standard"
+                  class="error-icon"
+                ></clr-icon>
              </span>

              <div class="mt-10">
@@ -408,12 +424,11 @@
          <div class="hot-wrapper clr-flex-1">
            <hot-table
              #hotInstance
-              hotId="hotInstance"
              id="hotTable"
              class="edit-hot"
-              className="htDark"
              [class.hidden]="hotTable.hidden"
-              [licenseKey]="hotTable.licenseKey"
+              [data]="hotTable.data"
+              [settings]="hotTableSettings"
            >
            </hot-table>
          </div>
@@ -431,7 +446,7 @@
                  !restrictions.restrictAddRow ? addRecordButtonClick() : ''
                "
              >
-                <clr-icon shape="plus" size="16"></clr-icon>
+                <clr-icon aria-hidden="true" shape="plus" size="16"></clr-icon>
                Add Record
              </button>

@@ -687,7 +702,7 @@
      </div> -->
    </div>
  </div>
-</div>
+</main>

 <div class="modal z-index-highest" *ngIf="nullVariables">
  <div class="modal-dialog" role="dialog" aria-hidden="true">
@@ -874,3 +889,17 @@
 </app-dataset-info>

 <app-viewboxes [(viewboxModal)]="viewboxes"></app-viewboxes>
+
+<app-confirm-modal
+  [open]="confirmModal.open"
+  [title]="confirmModal.title"
+  [message]="confirmModal.message"
+  (result)="onConfirmModalResult($event)"
+></app-confirm-modal>
+
+<app-bulk-validation-modal
+  [open]="bulkValidation.active"
+  [done]="bulkValidation.done"
+  [total]="bulkValidation.total"
+  (cancel)="cancelBulkValidation({ revert: true })"
+></app-bulk-validation-modal>
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { ClarityModule } from '@clr/angular'
-import { HotTableModule } from '@handsontable/angular'
+import { HotTableModule } from '@handsontable/angular-wrapper'
 import { registerAllModules } from 'handsontable/registry'
 import { AppSharedModule } from '../app-shared.module'
 import { DirectivesModule } from '../directives/directives.module'
@@ -28,7 +28,7 @@ registerAllModules()
    FormsModule,
    EditorRoutingModule,
    ClarityModule,
-    HotTableModule.forRoot(),
+    HotTableModule,
    AppSharedModule,
    DirectivesModule,
    SharedModule,
@@ -5,7 +5,6 @@
 export interface DynamicExtendedCellValidation {
  DISPLAY_INDEX: number
  DISPLAY_TYPE: string
-  DISPLAY_VALUE: string
  EXTRA_COL_NAME: string
  RAW_VALUE_CHAR: string
  RAW_VALUE_NUM: number
@@ -0,0 +1,88 @@
+import Handsontable from 'handsontable'
+import { makeNumberFormatRenderer } from './renderers.utils'
+
+describe('makeNumberFormatRenderer', () => {
+  it('renders a numeric cell as EUR currency without changing the value', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ amt: 1025 }],
+      columns: [
+        {
+          data: 'amt',
+          type: 'numeric',
+          renderer: makeNumberFormatRenderer(
+            '{"style":"currency","currency":"EUR"}'
+          )
+        }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    const td = hot.getCell(0, 0)
+    // Display is formatted as currency...
+    expect(td?.textContent).toContain('€')
+    expect(td?.textContent).toContain('1,025')
+    // ...but the stored value is untouched
+    expect(hot.getDataAtCell(0, 0)).toEqual(1025)
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('is overridden by numbro numericFormat (why DcValidator clears it for NUMBER_FORMAT cols)', () => {
+    // Regression note: on a `type: 'numeric'` column, a `numericFormat` makes
+    // HOT re-render via numbro and drop our currency symbol. DcValidator clears
+    // numericFormat on NUMBER_FORMAT columns so the Intl renderer wins.
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ amt: 1025 }],
+      columns: [
+        {
+          data: 'amt',
+          type: 'numeric',
+          numericFormat: { pattern: '0,0', culture: 'en-US' },
+          renderer: makeNumberFormatRenderer(
+            '{"style":"currency","currency":"EUR"}'
+          )
+        }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    const td = hot.getCell(0, 0)
+    expect(td?.textContent).not.toContain('€')
+
+    hot.destroy()
+    container.remove()
+  })
+
+  it('falls back to a plain number when options JSON is invalid', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const hot = new Handsontable(container, {
+      data: [{ amt: 1025 }],
+      columns: [
+        {
+          data: 'amt',
+          type: 'numeric',
+          renderer: makeNumberFormatRenderer('not json')
+        }
+      ],
+      licenseKey: 'non-commercial-and-evaluation'
+    })
+    hot.render()
+
+    const td = hot.getCell(0, 0)
+    expect(td?.textContent).not.toContain('€')
+
+    hot.destroy()
+    container.remove()
+  })
+})
@@ -1,3 +1,57 @@
+import Handsontable from 'handsontable'
+
+/**
+ * Builds a display-only HOT renderer that formats numeric cell values using
+ * Intl.NumberFormat. The stored/submitted value is never changed — only the
+ * rendered text. `ruleValue` is a JSON string of Intl.NumberFormat options
+ * (e.g. '{"style":"currency","currency":"EUR","minimumFractionDigits":2}').
+ *
+ * Falls back to the plain text renderer when the JSON is invalid, the options
+ * are rejected by Intl.NumberFormat, or the value is not a finite number.
+ */
+export const makeNumberFormatRenderer = (ruleValue?: string) => {
+  let formatter: Intl.NumberFormat | null = null
+
+  try {
+    const options = ruleValue ? JSON.parse(ruleValue) : {}
+    formatter = new Intl.NumberFormat(window.navigator.language, options)
+  } catch (e) {
+    console.warn(
+      `NUMBER_FORMAT - invalid Intl.NumberFormat options: ${ruleValue}`
+    )
+    formatter = null
+  }
+
+  const baseRenderer = Handsontable.renderers.getRenderer('text')
+
+  return (
+    instance: any,
+    td: any,
+    row: number,
+    col: number,
+    prop: string | number,
+    value: any,
+    cellProperties: any
+  ) => {
+    // Render via the base text renderer first to preserve cell styling/classes
+    // (readOnly, alignment, etc.), then override the displayed text.
+    baseRenderer(instance, td, row, col, prop, value, cellProperties)
+
+    const num = Number(value)
+    if (
+      formatter &&
+      value !== null &&
+      value !== undefined &&
+      value !== '' &&
+      !isNaN(num)
+    ) {
+      td.textContent = formatter.format(num)
+    }
+
+    return td
+  }
+}
+
 /**
 * Custom renderer for HOT cell
 * Used to show error icon
@@ -30,7 +30,7 @@ export const freeTierConfig: LicenceState = {
  lineage_daily_limit: 3,
  tables_in_library_limit: 35,
  viewbox: true,
-  fileUpload: true,
+  fileUpload: false,
  editRecord: true,
  addRecord: true
 }
@@ -15,7 +15,8 @@ import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapper
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class GroupComponent implements OnInit {
  public groups: Array<any> | undefined
@@ -16,11 +16,13 @@
        <clr-icon
          *ngIf="searchLibTreeInput.value.length < 1"
          shape="search"
+          aria-hidden="true"
        ></clr-icon>
        <clr-icon
          *ngIf="searchLibTreeInput.value.length > 0"
          (click)="librariesSearch = ''; libraryOnFilter()"
          shape="times"
+          aria-label="Clear libraries search"
        ></clr-icon>
      </div>
    </clr-tree-node>
@@ -40,7 +42,7 @@
          "
          class="m-0 cursor-pointer"
        >
-          <clr-icon shape="rack-server"></clr-icon>
+          <clr-icon shape="rack-server" aria-hidden="true"></clr-icon>
          {{ library.LIBRARYREF }}
        </p>

@@ -60,6 +62,7 @@
            <clr-icon
              *ngIf="searchTreeInput.value.length < 1"
              shape="search"
+              aria-hidden="true"
            ></clr-icon>
            <clr-icon
              *ngIf="searchTreeInput.value.length > 0"
@@ -69,6 +72,7 @@
                treeOnFilter(library, 'tables')
              "
              shape="times"
+              aria-label="Clear tables search"
            ></clr-icon>
          </div>
        </clr-tree-node>
@@ -90,8 +94,16 @@
              [class.active]="libTabActive(library.LIBRARYREF, libTable)"
            >
              <ng-container [ngSwitch]="libTable.includes('-FC')">
-                <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
-                <clr-icon *ngSwitchCase="false" shape="table"></clr-icon>
+                <clr-icon
+                  *ngSwitchCase="true"
+                  shape="bolt"
+                  aria-hidden="true"
+                ></clr-icon>
+                <clr-icon
+                  *ngSwitchCase="false"
+                  shape="table"
+                  aria-hidden="true"
+                ></clr-icon>
              </ng-container>
              {{ libTable.replace('-FC', '') }}
            </button>
@@ -114,7 +126,7 @@
  </clr-tree>
 </app-sidebar>

-<div class="content-area">
+<main class="content-area">
  <div class="card-block">
    <div *ngIf="loading" class="spinner-wrapper-fullpage">
      <div class="loadingSpinner">
@@ -144,4 +156,4 @@
      </p>
    </div>
  </div>
-</div>
+</main>
@@ -19,7 +19,8 @@ import { LicenceService } from '../services/licence.service'
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class HomeComponent implements AfterContentInit {
  public treeNodeLibraries: Array<any> | null = null
@@ -34,6 +34,8 @@
        </p>
      </ng-container>

+      <p><strong>Protocol:</strong> {{ protocol }}</p>
+
      <p>
        <strong>SYSSITE:</strong>
        <span
@@ -1,178 +1,186 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AppService, LicenceService, SasService } from '../services'
-import { LicenseKeyData } from '../models/LicenseKeyData'
-import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapperResponse'
-
-enum LicenseActions {
-  key = 'key',
-  register = 'register',
-  limit = 'limit',
-  update = 'update'
-}
-
-@Component({
-  selector: 'app-licensing',
-  templateUrl: './licensing.component.html',
-  styleUrls: ['./licensing.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class LicensingComponent implements OnInit {
-  public action: LicenseActions | null = null
-
-  public licenseErrors: { [key: string]: string } = {
-    missing: `Licence key is missing - please contact <a class="color-green" href="mailto: support@datacontroller.io">support@datacontroller.io</a> and enter valid keys below.`,
-    expired: `Licence key is expired - please contact <a class="color-green" href="mailto: support@datacontroller.io">support@datacontroller.io</a> and enter valid keys below.`,
-    invalid: `Licence key is invalid - please contact <a class="color-green" href="mailto: support@datacontroller.io">support@datacontroller.io</a> and enter valid keys below.`,
-    missmatch: `Your SYSSITE (below) is not found in the licence key - please contact <a class="color-green" href="mailto: support@datacontroller.io">support@datacontroller.io</a> and enter valid keys below.`
-  }
-
-  public keyError: string | undefined
-  public errorDetails: string | undefined
-  public missmatchedKey: string | undefined
-  public licenceKeyValue: string = ''
-  public activationKeyValue: string = ''
-
-  public applyingKeys: boolean = false
-
-  public syssite = this.appService.syssite
-  public currentLicenceKey = this.licenceService.licenceKey
-  public currentActivationKey = this.licenceService.activationKey
-  public isAppFreeTier = this.licenceService.isAppFreeTier
-  public userCountLimitation = this.licenceService.userCountLimitation
-
-  public licenseKeyData: LicenseKeyData | null = null
-
-  public inputType: 'file' | 'paste' = 'file'
-  public licenceFileError: string | undefined
-  public licenceFileLoading: boolean = false
-  public licencefile: { filename: string } = {
-    filename: ''
-  }
-
-  constructor(
-    private route: ActivatedRoute,
-    private licenceService: LicenceService,
-    private sasService: SasService,
-    private appService: AppService
-  ) {}
-
-  ngOnInit(): void {
-    this.licenceKeyValue = this.currentLicenceKey || ''
-    this.activationKeyValue = this.currentActivationKey || ''
-
-    this.route.queryParams.subscribe((queryParams: any) => {
-      this.keyError = queryParams.error
-      this.missmatchedKey = queryParams.missmatchId
-
-      if (queryParams.details) {
-        this.errorDetails = atob(queryParams.details)
-      }
-    })
-
-    this.route.params.subscribe((params: any) => {
-      let actionInUrl = params.action
-
-      if (actionInUrl) {
-        if (Object.values(LicenseActions).includes(actionInUrl)) {
-          this.action = actionInUrl
-        }
-      }
-    })
-
-    this.licenseKeyData = this.licenceService.getLicenseKeyData()
-  }
-
-  public trimKeys() {
-    this.licenceKeyValue = this.licenceKeyValue.trim()
-    this.activationKeyValue = this.activationKeyValue.trim()
-  }
-
-  public copySyssite(copyIconRef: any, copyTooltip: any, syssite: string[]) {
-    const syssiteString = syssite.join('\n')
-
-    navigator.clipboard.writeText(syssiteString).then(() => {
-      copyIconRef.setAttribute('shape', 'check')
-      copyIconRef.setAttribute('class', 'is-success')
-      copyTooltip.innerText = 'Copied!'
-
-      setTimeout(() => {
-        copyIconRef.setAttribute('shape', 'copy')
-        copyIconRef.removeAttribute('class')
-        copyTooltip.innerText = 'Copy to clipboard'
-      }, 1000)
-    })
-  }
-
-  public applyKeys() {
-    this.applyingKeys = true
-
-    let table = {
-      keyupload: [
-        {
-          ACTIVATION_KEY: this.activationKeyValue,
-          LICENCE_KEY: this.licenceKeyValue
-        }
-      ]
-    }
-
-    this.sasService
-      .request('admin/registerkey', table)
-      .then((res: RequestWrapperResponse) => {
-        if (
-          res.adapterResponse.return &&
-          res.adapterResponse.return[0] &&
-          res.adapterResponse.return[0].MSG === 'SUCCESS'
-        ) {
-          location.replace(location.href.split('#')[0])
-        }
-      })
-      .finally(() => {
-        this.applyingKeys = false
-      })
-  }
-
-  public onFileCapture(event: any, dropped = false) {
-    let file = dropped ? event[0] : event.target.files[0]
-    this.licencefile.filename = file.name
-
-    if (!file) return
-
-    this.licenceFileLoading = true
-
-    const reader = new FileReader()
-
-    reader.onload = (evt) => {
-      this.licenceFileError = 'Error reading file.'
-
-      if (!evt || !evt.target) return
-      if (evt.target.readyState != 2) return
-      if (evt.target.error) return
-      if (!evt.target.result) return
-
-      this.licenceFileLoading = false
-      this.licenceFileError = undefined
-      const fileArr = evt.target.result.toString().split('\n')
-      this.activationKeyValue = fileArr[1]
-      this.licenceKeyValue = fileArr[0]
-    }
-
-    reader.readAsText(file)
-  }
-
-  public switchType(type: 'paste' | 'file') {
-    this.inputType = type
-  }
-
-  get disableApplyButton(): boolean {
-    if (this.licenceKeyValue.length < 1 || this.activationKeyValue.length < 1)
-      return true
-    if (
-      this.licenceKeyValue === this.currentLicenceKey &&
-      this.activationKeyValue === this.currentActivationKey
-    )
-      return true
-
-    return false
-  }
-}
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AppService, LicenceService, SasService } from '../services'
+import { LicenseKeyData } from '../models/LicenseKeyData'
+import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapperResponse'
+
+enum LicenseActions {
+  key = 'key',
+  register = 'register',
+  limit = 'limit',
+  update = 'update'
+}
+
+@Component({
+  selector: 'app-licensing',
+  templateUrl: './licensing.component.html',
+  styleUrls: ['./licensing.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
+})
+export class LicensingComponent implements OnInit {
+  public action: LicenseActions | null = null
+
+  public licenseErrors: { [key: string]: string } = {
+    missing: `Licence key is missing - please contact <a class="color-green" href="mailto: support@datacontroller.io">support@datacontroller.io</a> and enter valid keys below.`,
+    expired: `Licence key is expired - please contact <a class="color-green" href="mailto: support@datacontroller.io">support@datacontroller.io</a> and enter valid keys below.`,
+    invalid: `Licence key is invalid - please contact <a class="color-green" href="mailto: support@datacontroller.io">support@datacontroller.io</a> and enter valid keys below.`,
+    missmatch: `Your SYSSITE (below) is not found in the licence key - please contact <a class="color-green" href="mailto: support@datacontroller.io">support@datacontroller.io</a> and enter valid keys below.`
+  }
+
+  public keyError: string | undefined
+  public errorDetails: string | undefined
+  public missmatchedKey: string | undefined
+  public licenceKeyValue: string = ''
+  public activationKeyValue: string = ''
+
+  public applyingKeys: boolean = false
+  public protocol: string =
+    location.protocol === 'https:'
+      ? 'HTTPS - secure connection'
+      : 'HTTP - insecure connection'
+
+  public syssite = this.appService.syssite
+  public currentLicenceKey = this.licenceService.licenceKey
+  public currentActivationKey = this.licenceService.activationKey
+  public isAppFreeTier = this.licenceService.isAppFreeTier
+  public userCountLimitation = this.licenceService.userCountLimitation
+
+  public licenseKeyData: LicenseKeyData | null = null
+
+  public inputType: 'file' | 'paste' = 'file'
+  public licenceFileError: string | undefined
+  public licenceFileLoading: boolean = false
+  public licencefile: { filename: string } = {
+    filename: ''
+  }
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private licenceService: LicenceService,
+    private sasService: SasService,
+    private appService: AppService
+  ) {}
+
+  ngOnInit(): void {
+    this.licenceKeyValue = this.currentLicenceKey || ''
+    this.activationKeyValue = this.currentActivationKey || ''
+
+    this.route.queryParams.subscribe((queryParams: any) => {
+      this.keyError = queryParams.error
+      this.missmatchedKey = queryParams.missmatchId
+
+      if (queryParams.details) {
+        this.errorDetails = atob(queryParams.details)
+      }
+    })
+
+    this.route.params.subscribe((params: any) => {
+      let actionInUrl = params.action
+
+      if (actionInUrl) {
+        if (Object.values(LicenseActions).includes(actionInUrl)) {
+          this.action = actionInUrl
+        }
+      }
+    })
+
+    this.licenseKeyData = this.licenceService.getLicenseKeyData()
+  }
+
+  public trimKeys() {
+    this.licenceKeyValue = this.licenceKeyValue.trim()
+    this.activationKeyValue = this.activationKeyValue.trim()
+  }
+
+  public copySyssite(copyIconRef: any, copyTooltip: any, syssite: string[]) {
+    const syssiteString = syssite.join('\n')
+
+    navigator.clipboard.writeText(syssiteString).then(() => {
+      copyIconRef.setAttribute('shape', 'check')
+      copyIconRef.setAttribute('class', 'is-success')
+      copyTooltip.innerText = 'Copied!'
+
+      setTimeout(() => {
+        copyIconRef.setAttribute('shape', 'copy')
+        copyIconRef.removeAttribute('class')
+        copyTooltip.innerText = 'Copy to clipboard'
+      }, 1000)
+    })
+  }
+
+  public applyKeys() {
+    this.applyingKeys = true
+
+    let table = {
+      keyupload: [
+        {
+          ACTIVATION_KEY: this.activationKeyValue,
+          LICENCE_KEY: this.licenceKeyValue
+        }
+      ]
+    }
+
+    this.sasService
+      .request('admin/registerkey', table)
+      .then((res: RequestWrapperResponse) => {
+        if (
+          res.adapterResponse.return &&
+          res.adapterResponse.return[0] &&
+          res.adapterResponse.return[0].MSG === 'SUCCESS'
+        ) {
+          this.router.navigateByUrl('/').then(() => {
+            window.location.reload()
+          })
+        }
+      })
+      .finally(() => {
+        this.applyingKeys = false
+      })
+  }
+
+  public onFileCapture(event: any, dropped = false) {
+    let file = dropped ? event[0] : event.target.files[0]
+    this.licencefile.filename = file.name
+
+    if (!file) return
+
+    this.licenceFileLoading = true
+
+    const reader = new FileReader()
+
+    reader.onload = (evt) => {
+      this.licenceFileError = 'Error reading file.'
+
+      if (!evt || !evt.target) return
+      if (evt.target.readyState != 2) return
+      if (evt.target.error) return
+      if (!evt.target.result) return
+
+      this.licenceFileLoading = false
+      this.licenceFileError = undefined
+      const fileArr = evt.target.result.toString().split('\n')
+      this.activationKeyValue = fileArr[1]
+      this.licenceKeyValue = fileArr[0]
+    }
+
+    reader.readAsText(file)
+  }
+
+  public switchType(type: 'paste' | 'file') {
+    this.inputType = type
+  }
+
+  get disableApplyButton(): boolean {
+    if (this.licenceKeyValue.length < 1 || this.activationKeyValue.length < 1)
+      return true
+    if (
+      this.licenceKeyValue === this.currentLicenceKey &&
+      this.activationKeyValue === this.currentActivationKey
+    )
+      return true
+
+    return false
+  }
+}
@@ -239,13 +239,7 @@

              <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
                <div (click)="downloadSVG()" clrDropdownItem>SVG</div>
-                <div
-                  *ngIf="!helperService.isMicrosoft"
-                  (click)="downloadPNG()"
-                  clrDropdownItem
-                >
-                  PNG
-                </div>
+                <div (click)="downloadPNG()" clrDropdownItem>PNG</div>
                <div (click)="downloadDot()" clrDropdownItem>Dot</div>
                <div *ngIf="flatdata" (click)="downloadCSV()" clrDropdownItem>
                  CSV
@@ -366,13 +360,7 @@

        <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
          <div (click)="renderToDownload('SVG')" clrDropdownItem>SVG</div>
-          <div
-            *ngIf="!helperService.isMicrosoft"
-            (click)="renderToDownload('PNG')"
-            clrDropdownItem
-          >
-            PNG
-          </div>
+          <div (click)="renderToDownload('PNG')" clrDropdownItem>PNG</div>
          <div (click)="downloadDot(); cancelRenderingGraph()" clrDropdownItem>
            Dot
          </div>
@@ -19,7 +19,8 @@ const moment = require('moment')
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class LineageComponent {
  public switchFlag: boolean = false
@@ -746,28 +747,13 @@ export class LineageComponent {
    return URL.createObjectURL(svg_blob)
  }

-  private getSVGBlob() {
-    let svg: any = document.getElementById('graph')
-    let serializer = new XMLSerializer()
-    let svg_blob = new Blob([serializer.serializeToString(svg)], {
-      type: 'image/svg+xml'
-    })
-    return svg_blob
-  }
-
  downloadSVG() {
    d3Viz.graphviz('#graph').resetZoom()

-    if (navigator.appVersion.toString().indexOf('.NET') > 0) {
-      window.navigator.msSaveBlob(this.getSVGBlob(), this.constructName('svg'))
-    } else {
-      let downloadLink = document.createElement('a')
-      downloadLink.href = this.getSVGURL()
-      downloadLink.download = this.constructName('svg')
-      document.body.appendChild(downloadLink)
-      downloadLink.click()
-      document.body.removeChild(downloadLink)
-    }
+    let downloadLink = document.createElement('a')
+    downloadLink.href = this.getSVGURL()
+    downloadLink.download = this.constructName('svg')
+    downloadLink.click()
  }

  async downloadPNG() {
@@ -795,16 +781,11 @@ export class LineageComponent {
    var a = document.createElement('a')
    var blob = new Blob([csvArray], { type: 'text/csv' })

-    if (navigator.appVersion.toString().indexOf('.NET') > 0) {
-      window.navigator.msSaveBlob(blob, this.constructName('csv'))
-    } else {
-      var url = window.URL.createObjectURL(blob)
-      a.href = url
-      a.download = this.constructName('csv')
-      a.click()
-      window.URL.revokeObjectURL(url)
-      a.remove()
-    }
+    var url = window.URL.createObjectURL(blob)
+    a.href = url
+    a.download = this.constructName('csv')
+    a.click()
+    window.URL.revokeObjectURL(url)
  }

  private getDotUrl() {
@@ -813,23 +794,11 @@ export class LineageComponent {
    return window.URL.createObjectURL(dot_blob)
  }

-  private getDotBlob() {
-    let data = this.vizInput
-    let dot_blob = new Blob([data], { type: 'text/plain' })
-    return dot_blob
-  }
-
  downloadDot() {
-    if (navigator.appVersion.toString().indexOf('.NET') > 0) {
-      window.navigator.msSaveBlob(this.getDotBlob(), this.constructName('txt'))
-    } else {
-      let downloadLink = document.createElement('a')
-      downloadLink.href = this.getDotUrl()
-      downloadLink.download = this.constructName('txt')
-      document.body.appendChild(downloadLink)
-      downloadLink.click()
-      document.body.removeChild(downloadLink)
-    }
+    let downloadLink = document.createElement('a')
+    downloadLink.href = this.getDotUrl()
+    downloadLink.download = this.constructName('txt')
+    downloadLink.click()
  }

  public showSvg() {
@@ -51,7 +51,8 @@ class ValueFilter implements ClrDatagridStringFilterInterface<MetaData> {
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class MetadataComponent implements OnInit {
  metaDataList: Array<any> | undefined
@@ -99,6 +100,11 @@ export class MetadataComponent implements OnInit {
    }
    this.pageSize = 5

+    // Initialize filters for accessibility
+    this.typeFilter = new TypeFilter()
+    this.nameFilter = new NameFilter()
+    this.valueFilter = new ValueFilter()
+
    if (
      globals.metadata.metaDataList &&
      globals.metadata.metaRepositories &&
@@ -6,4 +6,5 @@ export interface CellValidationSource {
  extended_values?: string[]
  hash: string
  count: number
+  pending?: Promise<void>
 }
@@ -127,6 +127,7 @@
      class="no-table-selected pointer-events-none"
    >
      <clr-icon
+        aria-hidden="true"
        shape="upload-cloud"
        size="40"
        class="is-info icon-dc-fill"
@@ -166,13 +167,10 @@
            >

            <hot-table
-              hotId="hotInstanceUserDataset"
+              #hotInstanceUserDataset
              id="hotTableUserDataset"
              class="mt-15"
-              [afterGetColHeader]="afterGetColHeader"
-              [settings]="hotUserDatasets"
-              [licenseKey]="hotTableLicenseKey"
-              stretchH="all"
+              [settings]="hotUserDatasetsSettings"
            >
            </hot-table>

@@ -200,6 +198,7 @@
        >
          <ng-container *ngIf="fileLoadingState !== FileLoadingState.parsed">
            <clr-icon
+              aria-hidden="true"
              shape="process-on-vm"
              size="40"
              class="is-info icon-dc-fill"
@@ -212,6 +211,7 @@

          <ng-container *ngIf="fileLoadingState === FileLoadingState.parsed">
            <clr-icon
+              aria-hidden="true"
              shape="warning-standard"
              size="40"
              class="is-info icon-dc-fill"
@@ -360,17 +360,10 @@
          </div>

          <hot-table
-            hotId="hotInstance"
+            #hotInstanceMain
            id="hotTable"
            class="mt-15"
-            [afterGetColHeader]="afterGetColHeader"
-            [className]="['htDark', 'htCustomHidden']"
-            [licenseKey]="hotTableLicenseKey"
-            [multiColumnSorting]="true"
-            [viewportRowRenderingOffset]="50"
-            [manualColumnResize]="true"
-            [filters]="true"
-            stretchH="all"
+            [settings]="hotMainTableSettings"
          >
          </hot-table>
        </ng-container>
@@ -382,6 +375,7 @@
          class="no-table-selected pointer-events-none"
        >
          <clr-icon
+            aria-hidden="true"
            shape="warning-standard"
            size="40"
            class="is-info icon-dc-fill"
@@ -4,6 +4,7 @@ import {
  ElementRef,
  HostBinding,
  OnInit,
+  AfterViewInit,
  ViewChild,
  ViewEncapsulation
 } from '@angular/core'
@@ -22,7 +23,7 @@ import { HotTableInterface } from '../models/HotTable.interface'
 import { Col } from '../shared/dc-validator/models/col.model'
 import { SpreadsheetService } from '../services/spreadsheet.service'
 import Handsontable from 'handsontable'
-import { HotTableRegisterer } from '@handsontable/angular'
+import { HotTableComponent } from '@handsontable/angular-wrapper'
 import { EditorsStageDataSASResponse } from '../models/sas/editors-stagedata.model'
 import { CellChange, ChangeSource } from 'handsontable/common'
 import { baseAfterGetColHeader } from '../shared/utils/hot.utils'
@@ -47,9 +48,10 @@ enum FileLoadingState {
  selector: 'app-multi-dataset',
  templateUrl: './multi-dataset.component.html',
  styleUrls: ['./multi-dataset.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
-export class MultiDatasetComponent implements OnInit {
+export class MultiDatasetComponent implements OnInit, AfterViewInit {
  @HostBinding('class.content-container') contentContainerClass = true
  @ViewChild('contentArea', { static: true }) contentAreaRef!: ElementRef

@@ -89,7 +91,13 @@ export class MultiDatasetComponent implements OnInit {

  public hotInstance!: Handsontable
  public hotInstanceUserDataset!: Handsontable
-  private hotRegisterer: HotTableRegisterer
+  @ViewChild('hotInstanceMain', { static: false })
+  hotTableMainComponent!: HotTableComponent
+  @ViewChild('hotInstanceUserDataset', { static: false })
+  hotTableUserDatasetComponent!: HotTableComponent
+
+  public hotMainTableSettings: Handsontable.GridSettings = {}
+  public hotUserDatasetsSettings: Handsontable.GridSettings = {}

  public showSubmitReasonModal: boolean = false
  public submitReasonMessage: string = ''
@@ -136,7 +144,38 @@ export class MultiDatasetComponent implements OnInit {
      }
    },
    manualRowMove: true,
-    columnSorting: true
+    columnSorting: true,
+    afterGetColHeader: baseAfterGetColHeader,
+    stretchH: 'all'
+  }
+
+  private initializeHotSettings() {
+    this.hotMainTableSettings = {
+      className: ['htDark'],
+      licenseKey: this.hotTableLicenseKey,
+      multiColumnSorting: true,
+      viewportRowRenderingOffset: 50,
+      manualColumnResize: true,
+      autoColumnSize: true,
+      filters: true,
+      stretchH: 'all',
+      afterGetColHeader: baseAfterGetColHeader,
+      modifyColWidth: this.maxWidthCheker,
+      theme: 'ht-theme-classic'
+    }
+
+    // Exclude data from settings for HOT v16 - it will be loaded manually
+    const { data, ...settingsWithoutData } = this.hotUserDatasets
+    this.hotUserDatasetsSettings = {
+      ...settingsWithoutData,
+      licenseKey: this.hotTableLicenseKey,
+      theme: 'ht-theme-classic'
+    }
+  }
+
+  public maxWidthCheker(width: any, col: any) {
+    if (width > 200) return 200
+    else return width
  }

  public afterGetColHeader = baseAfterGetColHeader
@@ -149,16 +188,28 @@ export class MultiDatasetComponent implements OnInit {
    private spreadsheetService: SpreadsheetService,
    private sasService: SasService,
    private cdr: ChangeDetectorRef
-  ) {
-    this.hotRegisterer = new HotTableRegisterer()
-  }
+  ) {}

  ngOnInit() {
    this.licenceService.hot_license_key.subscribe(
      (hot_license_key: string | undefined) => {
        this.hotTableLicenseKey = hot_license_key
+        this.initializeHotSettings()
      }
    )
+    this.initializeHotSettings()
+  }
+
+  ngAfterViewInit() {
+    // Ensure HOT instances are properly initialized after view is ready
+    setTimeout(() => {
+      if (this.hotTableUserDatasetComponent && !this.hotInstanceUserDataset) {
+        this.initUserInputHot()
+      }
+      if (this.hotTableMainComponent && !this.hotInstance) {
+        this.initHot()
+      }
+    }, 50)
  }

  ngAfterContentInit(): void {
@@ -233,7 +284,10 @@ export class MultiDatasetComponent implements OnInit {
      }

      this.initUserInputHot()
-      this.onAutoDetectColumns()
+      // Call onAutoDetectColumns after HOT is initialized
+      setTimeout(() => {
+        this.onAutoDetectColumns()
+      }, 100)
    } else if (matchedExtension === 'csv') {
      this.onMultiCsvFiles(event.target.files)
    } else {
@@ -392,84 +446,112 @@ export class MultiDatasetComponent implements OnInit {

  initHot() {
    setTimeout(() => {
-      this.hotInstance = this.hotRegisterer.getInstance('hotInstance')
+      if (this.hotTableMainComponent?.hotInstance) {
+        this.hotInstance = this.hotTableMainComponent.hotInstance

-      // Set height of parsed data to full height of the page content area
-      const contentAreaHeight = this.contentAreaRef.nativeElement.clientHeight
-      const hotHeight = `${contentAreaHeight - 160}px`
+        // Set height of parsed data to full height of the page content area
+        const contentAreaHeight = this.contentAreaRef.nativeElement.clientHeight
+        const hotHeight = `${contentAreaHeight - 160}px`

-      if (this.activeParsedDataset) {
-        this.hotInstance.updateSettings({
-          data: this.activeParsedDataset.datasource || [],
-          colHeaders: this.activeParsedDataset.datasetInfo.headerColumns,
-          columns: this.activeParsedDataset.datasetInfo.dcValidator?.getRules(),
-          readOnly: true,
-          height: hotHeight || '300px',
-          className: 'htDark'
-        })
+        if (this.activeParsedDataset) {
+          // Update settings without data - data will be loaded manually
+          this.hotInstance.updateSettings({
+            colHeaders: this.activeParsedDataset.datasetInfo.headerColumns,
+            columns:
+              this.activeParsedDataset.datasetInfo.dcValidator?.getRules(),
+            readOnly: true,
+            height: hotHeight || '300px',
+            className: ['htDark']
+          })
+
+          // Trigger change detection to avoid ExpressionChangedAfterItHasBeenCheckedError
+          this.cdr.detectChanges()
+
+          // Load data manually - this is required for HOT v16 Angular wrapper
+          setTimeout(() => {
+            if (
+              this.activeParsedDataset &&
+              this.activeParsedDataset.datasource
+            ) {
+              this.hotInstance.loadData(this.activeParsedDataset.datasource)
+              this.hotInstance.render()
+            }
+          }, 100)
+        }
      }
-    })
+    }, 100)
  }

  initUserInputHot() {
    setTimeout(() => {
-      this.hotInstanceUserDataset = this.hotRegisterer.getInstance(
-        'hotInstanceUserDataset'
-      )
+      if (this.hotTableUserDatasetComponent?.hotInstance) {
+        this.hotInstanceUserDataset =
+          this.hotTableUserDatasetComponent.hotInstance

-      this.hotInstanceUserDataset.addHook(
-        'beforeChange',
-        (changes: (CellChange | null)[], source: ChangeSource) => {
-          if (changes) {
-            for (let change of changes) {
-              if (change && change[3]) {
-                change[3] = change[3].toUpperCase()
+        // Load initial data manually after instance is ready
+        setTimeout(() => {
+          if (this.hotUserDatasets.data) {
+            this.hotInstanceUserDataset.loadData(this.hotUserDatasets.data)
+            this.hotInstanceUserDataset.render()
+          }
+        }, 50)
+
+        this.hotInstanceUserDataset.addHook(
+          'beforeChange',
+          (changes: (CellChange | null)[], source: ChangeSource) => {
+            if (changes) {
+              for (let change of changes) {
+                if (change && change[3]) {
+                  change[3] = change[3].toUpperCase()
+                }
              }
            }
          }
-        }
-      )
+        )

-      this.hotInstanceUserDataset.addHook(
-        'afterChange',
-        async (changes: CellChange[] | null, source: ChangeSource) => {
-          if (changes) {
-            if (source === 'edit') {
-              await this.onUserInputDatasetsChange()
+        this.hotInstanceUserDataset.addHook(
+          'afterChange',
+          async (changes: CellChange[] | null, source: ChangeSource) => {
+            if (changes) {
+              if (source === 'edit') {
+                await this.onUserInputDatasetsChange()
+              }
+
+              for (let change of changes) {
+                const row = change[0] as number
+
+                this.markUnmatchedRows(row)
+              }
+
+              this.dynamicCellValidations()
+
+              this.hotInstanceUserDataset.render()
            }
+          }
+        )

-            for (let change of changes) {
-              const row = change[0] as number
+        this.hotInstanceUserDataset.addHook(
+          'afterRemoveRow',
+          async (
+            index: number,
+            amount: number,
+            physicalRows: number[],
+            source?: Handsontable.ChangeSource | undefined
+          ) => {
+            await this.onUserInputDatasetsChange()

+            for (let row of physicalRows) {
              this.markUnmatchedRows(row)
            }
-
-            this.dynamicCellValidations()
-
-            this.hotInstanceUserDataset.render()
          }
-        }
-      )
-
-      this.hotInstanceUserDataset.addHook(
-        'afterRemoveRow',
-        async (
-          index: number,
-          amount: number,
-          physicalRows: number[],
-          source?: Handsontable.ChangeSource | undefined
-        ) => {
-          await this.onUserInputDatasetsChange()
-
-          for (let row of physicalRows) {
-            this.markUnmatchedRows(row)
-          }
-        }
-      )
-    })
+        )
+      }
+    }, 100)
  }

  dynamicCellValidations() {
+    if (!this.hotInstanceUserDataset) return
+
    const hotData = this.hotInstanceUserDataset.getData()

    hotData.forEach((row, rowIndex) => {
@@ -483,6 +565,8 @@ export class MultiDatasetComponent implements OnInit {
  }

  markUnmatchedRows(row: number) {
+    if (!this.hotInstanceUserDataset) return
+
    const dataAtRow = this.hotInstanceUserDataset.getDataAtRow(row) as number[]
    const dataset = `${dataAtRow[0]}.${dataAtRow[1]}`
    const cellMetaAtRow = this.hotInstanceUserDataset.getCellMetaAtRow(row)
@@ -556,6 +640,20 @@ export class MultiDatasetComponent implements OnInit {
   * convention. {@link isValidDatasetFormat}
   */
  async onAutoDetectColumns() {
+    // Wait for hotInstanceUserDataset to be ready
+    if (!this.hotInstanceUserDataset) {
+      let attempts = 0
+      const maxAttempts = 20
+      while (!this.hotInstanceUserDataset && attempts < maxAttempts) {
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        attempts++
+      }
+      if (!this.hotInstanceUserDataset) {
+        console.warn('hotInstanceUserDataset not ready after waiting')
+        return
+      }
+    }
+
    let passwordError = false

    await this.parseExcelSheetNames()
@@ -616,7 +714,13 @@ export class MultiDatasetComponent implements OnInit {
      }
    }

-    this.hotInstanceUserDataset.updateData(hotReadyData)
+    if (this.hotInstanceUserDataset) {
+      // Load data manually - this is required for HOT v16 Angular wrapper
+      setTimeout(() => {
+        this.hotInstanceUserDataset.loadData(hotReadyData)
+        this.hotInstanceUserDataset.render()
+      }, 100)
+    }
    this.dynamicCellValidations()
  }

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { ClarityModule } from '@clr/angular'
-import { HotTableModule } from '@handsontable/angular'
+import { HotTableModule } from '@handsontable/angular-wrapper'
 import { registerAllModules } from 'handsontable/registry'
 import { AppSharedModule } from '../app-shared.module'
 import { DirectivesModule } from '../directives/directives.module'
@@ -7,7 +7,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class NotFoundComponent implements OnInit {
  constructor() {}
@@ -2,7 +2,8 @@ import { Pipe, PipeTransform } from '@angular/core'
 import { bytesToSize } from '@sasjs/utils/utils/bytesToSize'

@Pipe({
-  name: 'convertSize'
+  name: 'convertSize',
+  standalone: false
 })
 export class ConvertSizePipe implements PipeTransform {
  transform(bytes: string | number, ...args: string[]): string {
@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import * as moment from 'moment'
+import moment from 'moment'
@Pipe({
-  name: 'dateTimeFormatter'
+  name: 'dateTimeFormatter',
+  standalone: false
 })
 export class DateTimeFormatterPipe implements PipeTransform {
  transform(value: Date | string, type: string): string {
@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core'

@Pipe({
-  name: 'linkinze'
+  name: 'linkinze',
+  standalone: false
 })
 export class LinkinzePipe implements PipeTransform {
  /**
@@ -2,7 +2,8 @@ import { Pipe, PipeTransform } from '@angular/core'
 import { HelperService } from '../services/helper.service'

@Pipe({
-  name: 'sasToJsDate'
+  name: 'sasToJsDate',
+  standalone: false
 })
 export class sasToJsDatePipe implements PipeTransform {
  constructor(private helperService: HelperService) {}
@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core'

@Pipe({
-  name: 'pkSpaceSeparate'
+  name: 'pkSpaceSeparate',
+  standalone: false
 })
 export class PkSpaceSeparatePipe implements PipeTransform {
  transform(value: string): string {
@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core'

@Pipe({
-  name: 'prettyjson'
+  name: 'prettyjson',
+  standalone: false
 })
 export class PrettyjsonPipe implements PipeTransform {
  transform(rawJson: any): string {
@@ -2,7 +2,8 @@ import { Pipe, PipeTransform } from '@angular/core'
 import { HelperService } from '../services/helper.service'

@Pipe({
-  name: 'secondsParser'
+  name: 'secondsParser',
+  standalone: false
 })
 export class SecondsParserPipe implements PipeTransform {
  constructor(private helperService: HelperService) {}
@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core'

@Pipe({
-  name: 'thousandSeparator'
+  name: 'thousandSeparator',
+  standalone: false
 })
 export class ThousandSeparatorPipe implements PipeTransform {
  transform(value: string | number, separator?: string): string {
@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core'

@Pipe({
-  name: 'toNumber'
+  name: 'toNumber',
+  standalone: false
 })
 export class ToNumberPipe implements PipeTransform {
  transform(value: string | number): number {
@@ -29,7 +29,8 @@ registerLocaleData(localeEnGB)
  templateUrl: './query.component.html',
  styleUrls: ['./query.component.scss'],
  providers: [{ provide: LOCALE_ID, useValue: 'en-GB' }],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class QueryComponent
  implements AfterViewInit, AfterContentInit, OnDestroy
@@ -1,4 +1,5 @@
 import { ActivatedRoute } from '@angular/router'
+import { sanitiseForSas } from '../../shared/utils/sanitise'
 import { SasStoreService } from '../../services/sas-store.service'
 import {
  Component,
@@ -30,7 +31,8 @@ interface ChangesObj {
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
  private _detailsSub: Subscription | undefined
@@ -135,7 +137,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {

  public async rejecting() {
    this.rejectLoading = true
-    this.submitReason = this.submitReason.replace(/\n/g, '. ')
+    this.submitReason = sanitiseForSas(this.submitReason.replace(/\n/g, '. '))

    let rejParams = {
      STP_ACTION: 'REJECT_TABLE',
@@ -33,12 +33,34 @@
    <div class="clr-col-md-12" ng-if="loaded">
      <div *ngIf="approveList && remained !== 0">
        <clr-datagrid class="datagrid-compact datagrid-custom-footer">
-          <clr-dg-column [clrDgField]="'submitter'">SUBMITTER</clr-dg-column>
-          <clr-dg-column [clrDgField]="'baseTable'">BASE TABLE</clr-dg-column>
-          <clr-dg-column [clrDgField]="'submitted'">SUBMITTED</clr-dg-column>
-          <clr-dg-column [clrDgField]="'submitReason'"
-            >SUBMIT REASON</clr-dg-column
-          >
+          <clr-dg-column [clrDgField]="'submitter'">
+            SUBMITTER
+            <clr-dg-string-filter
+              [clrDgStringFilter]="submitterFilter"
+              aria-label="Filter submitter"
+            ></clr-dg-string-filter>
+          </clr-dg-column>
+          <clr-dg-column [clrDgField]="'baseTable'">
+            BASE TABLE
+            <clr-dg-string-filter
+              [clrDgStringFilter]="baseTableFilter"
+              aria-label="Filter base table"
+            ></clr-dg-string-filter>
+          </clr-dg-column>
+          <clr-dg-column [clrDgField]="'submitted'">
+            SUBMITTED
+            <clr-dg-string-filter
+              [clrDgStringFilter]="submittedFilter"
+              aria-label="Filter submitted date"
+            ></clr-dg-string-filter>
+          </clr-dg-column>
+          <clr-dg-column [clrDgField]="'submitReason'">
+            SUBMIT REASON
+            <clr-dg-string-filter
+              [clrDgStringFilter]="submitReasonFilter"
+              aria-label="Filter submit reason"
+            ></clr-dg-string-filter>
+          </clr-dg-column>
          <clr-dg-column>ACTION</clr-dg-column>
          <clr-dg-column>DOWNLOAD</clr-dg-column>

@@ -51,15 +73,19 @@
            <clr-dg-cell>{{ approveItem.submitReason }}</clr-dg-cell>
            <clr-dg-cell>
              <div
-                class="clr-row"
-                role="tooltip"
-                class="d-flex justify-content-around"
+                class="clr-row d-flex justify-content-around"
+                role="toolbar"
+                aria-label="Table actions"
              >
                <a
                  class="column-center links tooltip tooltip-md tooltip-bottom-left color-green"
                  (click)="getClicked(i)"
                >
-                  <clr-icon shape="check" size="24"></clr-icon>
+                  <clr-icon
+                    shape="check"
+                    size="24"
+                    aria-hidden="true"
+                  ></clr-icon>
                  <span class="tooltip-content">Go to review page screen</span>
                </a>
                <a
@@ -70,10 +96,12 @@
                    *ngIf="!approveItem.rejectLoading"
                    shape="ban"
                    size="22"
+                    aria-hidden="true"
                  ></clr-icon>
                  <clr-spinner
                    *ngIf="approveItem.rejectLoading"
                    [clrSmall]="true"
+                    aria-hidden="true"
                  ></clr-spinner>
                  <span class="tooltip-content">Reject</span>
                </a>
@@ -81,7 +109,11 @@
                  class="column-center links tooltip tooltip-md tooltip-bottom-left color-blue"
                  (click)="getTable(approveItem.tableId)"
                >
-                  <clr-icon shape="code" size="28"></clr-icon>
+                  <clr-icon
+                    shape="code"
+                    size="28"
+                    aria-hidden="true"
+                  ></clr-icon>
                  <span class="tooltip-content">Go to staged data screen</span>
                </a>
              </div>
@@ -8,6 +8,7 @@ import { SasStoreService } from '../../services/sas-store.service'
 import { Router } from '@angular/router'
 import { SasService } from '../../services/sas.service'
 import { EventService } from '../../services/event.service'
+import { ClrDatagridStringFilterInterface } from '@clr/angular'

 interface ApproveData {
  tableId: string
@@ -19,6 +20,30 @@ interface ApproveData {
  rejectLoading?: boolean
 }

+class SubmitterFilter implements ClrDatagridStringFilterInterface<ApproveData> {
+  accepts(data: ApproveData, search: string): boolean {
+    return data.submitter.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
+class BaseTableFilter implements ClrDatagridStringFilterInterface<ApproveData> {
+  accepts(data: ApproveData, search: string): boolean {
+    return data.baseTable.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
+class SubmittedFilter implements ClrDatagridStringFilterInterface<ApproveData> {
+  accepts(data: ApproveData, search: string): boolean {
+    return data.submitted.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
+class SubmitReasonFilter implements ClrDatagridStringFilterInterface<ApproveData> {
+  accepts(data: ApproveData, search: string): boolean {
+    return data.submitReason.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
@Component({
  selector: 'app-approve',
  templateUrl: './approve.component.html',
@@ -26,7 +51,8 @@ interface ApproveData {
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class ApproveComponent implements OnInit {
  public approveList: Array<ApproveData> | undefined
@@ -35,6 +61,12 @@ export class ApproveComponent implements OnInit {
  public loaded: boolean = false
  public itemsNum: number = 10

+  // Filter instances for datagrid accessibility
+  public submitterFilter = new SubmitterFilter()
+  public baseTableFilter = new BaseTableFilter()
+  public submittedFilter = new SubmittedFilter()
+  public submitReasonFilter = new SubmitReasonFilter()
+
  constructor(
    private sasStoreService: SasStoreService,
    private eventService: EventService,
@@ -85,16 +85,48 @@
      class="datagrid-history datagrid-custom-footer"
      *ngIf="loaded"
    >
-      <clr-dg-column [clrDgField]="'basetable'">BASE_TABLE</clr-dg-column>
-      <clr-dg-column [clrDgField]="'status'">STATUS</clr-dg-column>
-      <clr-dg-column [clrDgField]="'submitter'">SUBMITTER</clr-dg-column>
-      <clr-dg-column [clrDgField]="'submittedReason'"
-        >SUBMIT REASON</clr-dg-column
-      >
-      <clr-dg-column [clrDgField]="'submitted'">SUBMITTED</clr-dg-column>
-      <clr-dg-column [clrDgField]="'reviewed'"
-        >APPROVED / REJECTED</clr-dg-column
-      >
+      <clr-dg-column [clrDgField]="'basetable'">
+        BASE_TABLE
+        <clr-dg-string-filter
+          [clrDgStringFilter]="baseTableFilter"
+          aria-label="Filter base table"
+        ></clr-dg-string-filter>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'status'">
+        STATUS
+        <clr-dg-string-filter
+          [clrDgStringFilter]="statusFilter"
+          aria-label="Filter status"
+        ></clr-dg-string-filter>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'submitter'">
+        SUBMITTER
+        <clr-dg-string-filter
+          [clrDgStringFilter]="submitterFilter"
+          aria-label="Filter submitter"
+        ></clr-dg-string-filter>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'submittedReason'">
+        SUBMIT REASON
+        <clr-dg-string-filter
+          [clrDgStringFilter]="submitReasonFilter"
+          aria-label="Filter submit reason"
+        ></clr-dg-string-filter>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'submitted'">
+        SUBMITTED
+        <clr-dg-string-filter
+          [clrDgStringFilter]="submittedFilter"
+          aria-label="Filter submitted date"
+        ></clr-dg-string-filter>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'reviewed'">
+        APPROVED / REJECTED
+        <clr-dg-string-filter
+          [clrDgStringFilter]="reviewedFilter"
+          aria-label="Filter reviewed date"
+        ></clr-dg-string-filter>
+      </clr-dg-column>
      <clr-dg-column>DOWNLOAD</clr-dg-column>

      <clr-dg-row
@@ -8,6 +8,53 @@ import {
  EventService,
  SasService
 } from 'src/app/services'
+import { ClrDatagridStringFilterInterface } from '@clr/angular'
+
+interface HistoryData {
+  tableId: string
+  basetable: string
+  status: string
+  submitter: string
+  submittedReason: string
+  submitted: string
+  reviewed: string
+}
+
+class BaseTableFilter implements ClrDatagridStringFilterInterface<HistoryData> {
+  accepts(data: HistoryData, search: string): boolean {
+    return data.basetable.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
+class StatusFilter implements ClrDatagridStringFilterInterface<HistoryData> {
+  accepts(data: HistoryData, search: string): boolean {
+    return data.status.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
+class SubmitterFilter implements ClrDatagridStringFilterInterface<HistoryData> {
+  accepts(data: HistoryData, search: string): boolean {
+    return data.submitter.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
+class SubmitReasonFilter implements ClrDatagridStringFilterInterface<HistoryData> {
+  accepts(data: HistoryData, search: string): boolean {
+    return data.submittedReason.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
+class SubmittedFilter implements ClrDatagridStringFilterInterface<HistoryData> {
+  accepts(data: HistoryData, search: string): boolean {
+    return data.submitted.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
+class ReviewedFilter implements ClrDatagridStringFilterInterface<HistoryData> {
+  accepts(data: HistoryData, search: string): boolean {
+    return data.reviewed.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}

@Component({
  selector: 'app-history',
@@ -16,7 +63,8 @@ import {
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class HistoryComponent implements OnInit {
  public history: Array<any> = []
@@ -29,6 +77,14 @@ export class HistoryComponent implements OnInit {
  public approveData: any = {}
  public sasjsConfig: SASjsConfig = new SASjsConfig()

+  // Filter instances for datagrid accessibility
+  public baseTableFilter = new BaseTableFilter()
+  public statusFilter = new StatusFilter()
+  public submitterFilter = new SubmitterFilter()
+  public submitReasonFilter = new SubmitReasonFilter()
+  public submittedFilter = new SubmittedFilter()
+  public reviewedFilter = new ReviewedFilter()
+
  public histParams: { HIST: number; STARTROW: number; NOBS: number } = {
    HIST: 0,
    STARTROW: 1,
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { ClarityModule } from '@clr/angular'
-import { HotTableModule } from '@handsontable/angular'
+import { HotTableModule } from '@handsontable/angular-wrapper'
 import { DirectivesModule } from '../directives/directives.module'
 import { SharedModule } from '../shared/shared.module'
 import { ApproveDetailsComponent } from './approve-details/approve-details.component'
@@ -23,7 +23,7 @@ import { HistoryComponent } from './history/history.component'
    FormsModule,
    ReviewRoutingModule,
    ClarityModule,
-    HotTableModule.forRoot(),
+    HotTableModule,
    DirectivesModule,
    SharedModule
  ]
@@ -44,10 +44,20 @@
        <div *ngIf="submitterList && remained !== 0">
          <clr-datagrid class="datagrid-compact datagrid-custom-footer">
            <clr-dg-column>BASE TABLE</clr-dg-column>
-            <clr-dg-column [clrDgField]="'submitted'">SUBMITTED</clr-dg-column>
-            <clr-dg-column [clrDgField]="'submitReason'"
-              >SUBMIT REASON</clr-dg-column
-            >
+            <clr-dg-column [clrDgField]="'submitted'">
+              SUBMITTED
+              <clr-dg-string-filter
+                [clrDgStringFilter]="submittedFilter"
+                aria-label="Filter submitted date"
+              ></clr-dg-string-filter>
+            </clr-dg-column>
+            <clr-dg-column [clrDgField]="'submitReason'">
+              SUBMIT REASON
+              <clr-dg-string-filter
+                [clrDgStringFilter]="submitReasonFilter"
+                aria-label="Filter submit reason"
+              ></clr-dg-string-filter>
+            </clr-dg-column>
            <clr-dg-column class="d-flex justify-content-center"
              >ACTION</clr-dg-column
            >
@@ -7,6 +7,7 @@ import {
 import { Subscription } from 'rxjs'
 import { ActivatedRoute, Router } from '@angular/router'
 import { SasStoreService, EventService, SasService } from '../../services'
+import { ClrDatagridStringFilterInterface } from '@clr/angular'

 interface SubmitterData {
  tableId: string
@@ -16,6 +17,18 @@ interface SubmitterData {
  approver: string
 }

+class SubmittedFilter implements ClrDatagridStringFilterInterface<SubmitterData> {
+  accepts(data: SubmitterData, search: string): boolean {
+    return data.submitted.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
+class SubmitReasonFilter implements ClrDatagridStringFilterInterface<SubmitterData> {
+  accepts(data: SubmitterData, search: string): boolean {
+    return data.submitReason.toLowerCase().indexOf(search.toLowerCase()) >= 0
+  }
+}
+
@Component({
  selector: 'app-submitter',
  templateUrl: './submitter.component.html',
@@ -23,7 +36,8 @@ interface SubmitterData {
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class SubmitterComponent implements OnInit, AfterViewInit {
  public remained: number = 0
@@ -37,6 +51,10 @@ export class SubmitterComponent implements OnInit, AfterViewInit {
  private _readySub!: Subscription
  private _backToSub!: Subscription

+  // Filter instances for datagrid accessibility
+  public submittedFilter = new SubmittedFilter()
+  public submitReasonFilter = new SubmitReasonFilter()
+
  constructor(
    private sasStoreService: SasStoreService,
    private eventService: EventService,
@@ -13,7 +13,8 @@ import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapper
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class RoleComponent implements OnInit {
  public roles: Array<any> | undefined
@@ -7,7 +7,8 @@ import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class HomeRouteComponent implements OnInit, OnDestroy {
  constructor() {}
@@ -5,7 +5,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'
  templateUrl: './multi-dataset-route.component.html',
  host: {
    class: 'content-container'
-  }
+  },
+  standalone: false
 })
 export class MultiDatasetRouteComponent implements OnInit, OnDestroy {
  constructor() {}
@@ -7,7 +7,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'
  host: {
    class: 'content-container'
  },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class ReviewRouteComponent implements OnInit {
  constructor() {}
--- a/Show More
+++ b/Show More