chore(release): 7.2.2 [skip ci]

## [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](365f12996d))

.gitea/workflows/build.yaml

@@ -70,7 +70,7 @@ jobs:
       - 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-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb
       - run: apt -y install jq
 
       - name: Write cypress credentials

.gitea/workflows/lighthouse.yaml

@@ -0,0 +1,101 @@
+name: Lighthouse Checks
+run-name: Running Lighthouse Performance and Accessibility Checks on Pull Request
+on: [pull_request]
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.15.1]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.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
+
+      - name: Install pm2 for process management
+        run: npm i -g pm2
+
+      - name: Install @sasjs/cli
+        run: npm i -g @sasjs/cli
+
+      - name: Install wait-on globally
+        run: npm install -g wait-on
+
+      - name: Create .env file for 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
+
+      - name: Download sasjs/server package from github using curl
+        run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+
+      - name: Unzip downloaded package
+        run: unzip linux.zip
+
+      - name: Run sasjs server
+        run: 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 ./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="/proj/sasjs/genesis-mocks"' ./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

.gitea/workflows/release.yaml

@@ -80,7 +80,7 @@ jobs:
       - 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-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb
       - run: apt -y install jq
 
       - name: Write cypress credentials

.gitignore

@@ -21,3 +21,4 @@ sasjsresults
 .sasjsrc
 client/.npmrc
 *~
+.lighthouseci

CHANGELOG.md

@@ -1,3 +1,32 @@
+## [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)
 
 

README.md

@@ -39,3 +39,26 @@ For further information:
 * Code: https://code.datacontroller.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. Runs Lighthouse CI against key application 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`.

client/cypress/e2e/csv.cy.ts

@@ -32,8 +32,7 @@ context('excel tests: ', function () {
     openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
 
     attachExcelFile('regular.csv', () => {
-      cy.get('#approval-btn', { timeout: 60000 })
+      cy.get('#approval-btn', { timeout: 60000 }).should('be.visible')
-        .should('be.visible')
       // .then(() => {
       //   cy.get('#hotInstance', { timeout: 30000 })
       //     .find('div.ht_master.handsontable')

client/cypress/e2e/editor.cy.ts

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

client/cypress/e2e/excel-multi-load.cy.ts

@@ -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', [
+      checkHotUserDatasetTable(
+        'hotTableUserDataset',
+        [
           [library, mpeXTestTable],
           [library, mpeTablesTable]
-      ], () => {
+        ],
-        cy.get('#continue-btn').trigger('click').then(() => {
+        () => {
-          checkIfTreeHasTables([`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`], undefined, (includes: boolean) => {
+          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', [
+      checkHotUserDatasetTable(
+        'hotTableUserDataset',
+        [
           [library, mpeXTestTable],
           [library, mpeTablesTable]
-      ], () => {
+        ],
-        cy.get('#continue-btn').trigger('click').then(() => {
+        () => {
-          checkIfTreeHasTables([`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`], `${library}.${mpeXTestTable}`, (includes: boolean) => {
+          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(() => {
+                    cy.get('#hotTable')
-                checkHotUserDatasetTable('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']
+                              '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()
                             })
-
+                          }
-                })
+                        )
                       })
                   }
+                }
+              )
             })
-        })
+        }
-      })
+      )
     })
   })
 
   it('3 | Uploads Excel file with multiple sheets, 1 sheets has 2 tables', (done) => {
     attachExcelFile('multi_load_test_1.xlsx', () => {
-      checkHotUserDatasetTable('hotTableUserDataset', [
+      checkHotUserDatasetTable(
+        'hotTableUserDataset',
+        [
           [library, mpeXTestTable],
           [library, mpeTablesTable]
-      ], () => {
+        ],
-        cy.get('#continue-btn').trigger('click').then(() => {
+        () => {
-          checkIfTreeHasTables([`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`], `${library}.${mpeXTestTable}`, (includes: boolean) => {
+          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(() => {
+                    cy.get('#hotTable')
-                checkHotUserDatasetTable('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']
+                              '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(() => {
+                                cy.get('#hotTable')
-                        checkHotUserDatasetTable('hotTable', [
+                                  .should('be.visible')
-                          ['No', 'DC914286', 'MPE_COLUMN_LEVEL_SECURITY'],
+                                  .then(() => {
+                                    checkHotUserDatasetTable(
+                                      'hotTable',
+                                      [
+                                        [
+                                          'No',
+                                          'DC914286',
+                                          'MPE_COLUMN_LEVEL_SECURITY'
+                                        ],
                                         ['No', 'DC914286', 'MPE_XLMAP_INFO'],
                                         ['No', 'DC914286', 'MPE_XLMAP_RULES']
-                        ], () => {
+                                      ],
+                                      () => {
                                         submitTables()
 
-                          hasSuccessSubmits(2, (valid: boolean) => {
+                                        hasSuccessSubmits(
+                                          2,
+                                          (valid: boolean) => {
                                             if (valid) done()
-                          })
+                                          }
-
+                                        )
-                        })
+                                      }
-                      })
+                                    )
-                    })
                                   })
                               })
                             })
                           }
+                        )
                       })
+                  }
+                }
+              )
             })
-      })
+        }
+      )
     })
   })
 
@@ -142,7 +211,11 @@ 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')
@@ -154,7 +227,9 @@ const checkHotUserDatasetTable = (hotId: string, dataToContain: any[][], callbac
       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])
+            expect(data[0].children[rowI].children[colI]).to.contain(
+              dataToContain[rowI][colI]
+            )
           }
         }
 
@@ -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,14 +286,24 @@ const submitTables = () => {
   cy.wait(1000)
 }
 
-const hasSuccessSubmits = (expectedNoOfSubmits: number, callback: (valid: boolean) => void) => {
+const hasSuccessSubmits = (
-  cy.get('.nav-tree clr-tree > clr-tree-node cds-icon[status="success"]').should('be.visible').then(($nodes) => {
+  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) => {
+const hasErrorTables = (
-  cy.get('.nav-tree clr-tree > clr-tree-node cds-icon[status="danger"]').should('be.visible').then(($nodes) => {
+  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)
     })
 }

client/cypress/e2e/excel.cy.ts

@@ -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')
@@ -399,11 +399,7 @@ const rejectExcel = (callback?: any) => {
     .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
-        if (
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('approve')
-        ) {
           approvalButton.click()
           break
         }
@@ -432,11 +428,7 @@ const acceptExcel = (callback?: any) => {
     .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
-        if (
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('approve')
-        ) {
           approvalButton.click()
           break
         }
@@ -455,7 +447,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')
@@ -471,7 +463,7 @@ const checkResultOfFormulaUpload = (callback?: any) => {
 
 const checkResultOfXLSUpload = (callback?: any) => {
   cy.viewport(1280, 720)
-  cy.get('#hotInstance', { timeout: 30000 })
+  cy.get('#hotTable', { timeout: 30000 })
     .find('div.ht_master.handsontable')
     .find('div.wtHolder')
     .find('div.wtHider')
@@ -500,7 +492,7 @@ const checkResultOfXLSUpload = (callback?: any) => {
       if (callback) callback()
     })
 
-  cy.get('#hotInstance', { timeout: 30000 })
+  cy.get('#hotTable', { timeout: 30000 })
     .find('div.ht_master.handsontable')
     .find('div.wtHolder')
     .scrollTo('right')

client/cypress/e2e/filtering.cy.ts

@@ -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) => {
+            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()
 
                 if (callback) callback()
-            })
+              }
+            )
           })
       })
 

client/cypress/e2e/licensing.cy.ts

@@ -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 (
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('approve')
-        ) {
           approvalButton.click()
           break
         }

client/cypress/e2e/liveness.cy.ts

@@ -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 (
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('approve')
-        ) {
           approvalButton.click()
           break
         }

client/cypress/e2e/viewbox.cy.ts

@@ -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,7 +92,8 @@ context('editor tests: ', function () {
 
       if (found < viewboxes.length) return
 
-      cy.get('.viewboxes-container .viewbox', { withinSubject: null }).then((viewboxNodes: any) => {
+      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) => {
@@ -116,7 +118,8 @@ context('editor tests: ', function () {
               })
             })
           }
-      })
+        }
+      )
     })
   })
 
@@ -395,11 +398,13 @@ context('editor tests: ', function () {
 })
 
 const removeAllColumns = () => {
-  cy.get('.configuration-wrapper clr-icon[shape="trash"]').then(removeNodes => {
+  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 (

client/cypress/integration/download.tests.ts

@@ -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
-              }
-            }
-          })
-        })
-      })
-    })
-}

client/cypress/integration/editor.tests.ts

@@ -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}`)
-}

client/cypress/integration/excel.tests.ts

@@ -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;')
-}

client/cypress/integration/filtering.tests.ts

@@ -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}`)
-}

client/cypress/integration/licensing.tests.ts

@@ -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}`)
-}

client/cypress/integration/liveness.tests.ts

@@ -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()
-                })
-            })
-        })
-    })
-}

client/cypress/integration/metanav.tests.ts

@@ -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}`)
-}

client/cypress/integration/viewbox.tests.ts

@@ -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}`)
-}

client/licenseChecker.js

@@ -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@16.0.1;handsontable@16.0.1;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@16.0.1;hyperformula@2.7.1;hyperformula@3.0.0;jackspeak@3.4.3;path-scurry@1.11.1;package-json-from-dist@1.0.1'
       },
       (error, json) => {
         if (error) {

client/lighthouserc.js

@@ -0,0 +1,42 @@
+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' }
+        ]
+      }
+    }
+  }
+}

client/package.json

@@ -31,7 +31,8 @@
     "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"
   },
   "private": true,
   "dependencies": {
@@ -48,7 +49,7 @@
     "@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": "^16.0.1",
+    "@handsontable/angular-wrapper": "16.0.1",
     "@sasjs/adapter": "^4.12.2",
     "@sasjs/utils": "^3.4.0",
     "@sheet/crypto": "file:libraries/sheet-crypto.tgz",
@@ -65,7 +66,7 @@
     "hyperformula": "^2.5.0",
     "iconv-lite": "^0.5.0",
     "jquery-datetimepicker": "^2.5.21",
-    "jsrsasign": "^10.2.0",
+    "jsrsasign": "^11.1.0",
     "marked": "^5.0.0",
     "moment": "^2.26.0",
     "ngx-clipboard": "^16.0.0",
@@ -95,6 +96,7 @@
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@compodoc/compodoc": "^1.1.21",
     "@cypress/webpack-preprocessor": "^5.17.1",
+    "@lhci/cli": "^0.12.0",
     "@types/core-js": "^2.5.5",
     "@types/crypto-js": "^4.2.1",
     "@types/es6-shim": "^0.31.39",

client/src/app/editor/editor.component.html

@@ -408,12 +408,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>

client/src/app/editor/editor.component.ts

@@ -17,7 +17,7 @@ import { SasStoreService } from '../services/sas-store.service'
 
 type AOA = any[][]
 
-import { HotTableRegisterer } from '@handsontable/angular'
+import { HotTableComponent } from '@handsontable/angular-wrapper'
 import { UploadFile } from '@sasjs/adapter'
 import { isSpecialMissing } from '@sasjs/utils/input/validators'
 import CellRange from 'handsontable/3rdparty/walkontable/src/cell/range'
@@ -77,8 +77,8 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
   uploadStaterCompList: QueryList<UploadStaterComponent> = new QueryList()
   @ViewChildren('queryFilter')
   queryFilterCompList: QueryList<QueryComponent> = new QueryList()
-  @ViewChildren('hotInstance')
+  @ViewChild(HotTableComponent, { static: false })
-  hotInstanceCompList: QueryList<Handsontable> = new QueryList()
+  hotTableComponent!: HotTableComponent
   @ViewChildren('fileUploadInput')
   fileUploadInputCompList: QueryList<ElementRef> = new QueryList()
 
@@ -120,13 +120,26 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
   public hotInstance!: Handsontable
   public dcValidator: DcValidator | undefined
 
+  public hotTableSettings: Handsontable.GridSettings = {}
+
+  private updateHotTableSettings(): void {
+    this.hotTableSettings = {
+      colHeaders: this.hotTable.colHeaders,
+      columns: this.hotTable.columns,
+      height: this.hotTable.height,
+      licenseKey: this.hotTable.licenseKey,
+      readOnly: this.hotTable.readOnly,
+      copyPaste: this.hotTable.copyPaste,
+      contextMenu: true
+    }
+  }
+
   public hotTable: HotTableInterface = {
     data: [],
     colHeaders: [],
     hidden: true,
     columns: [],
     height: 'calc(100vh - 160px)',
-    minSpareRows: 1,
     licenseKey: undefined,
     readOnly: true,
     copyPaste: {
@@ -163,10 +176,30 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
             }
           },
           row_above: {
-            name: 'Insert Row above'
+            name: 'Insert Row above',
+            callback: (
+              key: string,
+              selection: any[],
+              clickEvent: MouseEvent
+            ) => {
+              const firstSelection = selection[0]
+              const targetRow = firstSelection.start.row
+
+              this.insertRowAtPosition(targetRow)
+            }
           },
           row_below: {
-            name: 'Insert Row below'
+            name: 'Insert Row below',
+            callback: (
+              key: string,
+              selection: any[],
+              clickEvent: MouseEvent
+            ) => {
+              const firstSelection = selection[0]
+              const targetRow = firstSelection.start.row + 1
+
+              this.insertRowAtPosition(targetRow)
+            }
           },
           remove_row: {
             name: 'Ignore row'
@@ -364,15 +397,12 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     private route: ActivatedRoute,
     private sasService: SasService,
     private cdf: ChangeDetectorRef,
-    private hotRegisterer: HotTableRegisterer,
     private spreadsheetService: SpreadsheetService
   ) {
     const lang = languages[window.navigator.language]
     if (lang)
       numbro.default.registerLanguage(languages[window.navigator.language])
 
-    this.hotRegisterer = new HotTableRegisterer()
-
     this.parseRestrictions()
     this.setRestrictions()
   }
@@ -931,6 +961,9 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
 
     this.cellValidationSource = []
 
+    // Clear custom validation styling
+    this.clearDuplicateValidation()
+
     const hot = this.hotInstance
     const columnSorting = hot.getPlugin('multiColumnSorting')
     const columnSortConfig = columnSorting.getSortConfig()
@@ -991,22 +1024,54 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     setTimeout(() => {
       const hot = this.hotInstance
 
-      const dsInsertIndex = this.dataSource.length
+      // Create a new empty row object with proper structure
-      hot.alter('insert_row_below', dsInsertIndex, 1)
+      const newRow = this.createEmptyRow()
+
+      // Add the new row to the data source
+      this.dataSource.push(newRow)
+
+      // Update the hot table with the new data
       hot.updateSettings({ data: this.dataSource }, false)
+
+      // Select the newly added row
       hot.selectCell(this.dataSource.length - 1, 0)
       hot.render()
 
-      if (this.dataSource[dsInsertIndex]) {
-        this.dataSource[dsInsertIndex]['noLinkOption'] = true
-      }
-
       this.addingNewRow = false
 
       this.reSetCellValidationValues()
     })
   }
 
+  /**
+   * Creates a new empty row object with proper structure
+   */
+  private createEmptyRow(): any {
+    const newRow: any = {}
+    this.headerColumns.forEach((col: string) => {
+      newRow[col] = ''
+    })
+    newRow['noLinkOption'] = true
+    return newRow
+  }
+
+  /**
+   * Inserts a new row at the specified position and updates the table
+   */
+  private insertRowAtPosition(targetRow: number): void {
+    const newRow = this.createEmptyRow()
+
+    // Insert the new row at the target position
+    this.dataSource.splice(targetRow, 0, newRow)
+
+    // Update the hot table
+    const hot = this.hotInstance
+    hot.updateSettings({ data: this.dataSource }, false)
+    hot.render()
+
+    this.reSetCellValidationValues()
+  }
+
   public cancelSubmit() {
     this.dataSource = this.helperService.deepClone(this.dataSourceBeforeSubmit)
     this.dataSourceBeforeSubmit = []
@@ -1086,51 +1151,96 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  private clearDuplicateValidation() {
+    const hot = this.hotInstance
+
+    // Clear previous duplicate validation styling
+    for (const rowIndex of this.duplicatePkIndexes) {
+      for (let col = 1; col <= this.readOnlyFields; col++) {
+        hot.removeCellMeta(rowIndex, col, 'valid')
+        hot.removeCellMeta(rowIndex, col, 'dupKey')
+        // Remove our custom class from cell metadata
+        const cellMeta = hot.getCellMeta(rowIndex, col)
+        if (cellMeta.className) {
+          let cleanedClassName: string
+          if (Array.isArray(cellMeta.className)) {
+            cleanedClassName = cellMeta.className
+              .filter((c) => c !== 'dc-invalid-cell')
+              .join(' ')
+          } else {
+            cleanedClassName = cellMeta.className
+              .replace('dc-invalid-cell', '')
+              .trim()
+          }
+          hot.setCellMeta(rowIndex, col, 'className', cleanedClassName)
+        }
+      }
+    }
+
+    this.duplicatePkIndexes = []
+    hot.render()
+  }
+
   public validatePrimaryKeys() {
     const hot = this.hotInstance
 
-    const myTable = hot.getData()
+    // Clear previous validation before applying new ones
+    this.clearDuplicateValidation()
+
+    // Get data from the data source instead of hot.getData() to ensure consistency
+    const myTable = this.dataSource
     this.pkFields = []
+
     for (let index = 0; index < myTable.length; index++) {
       let pkRow = ''
       for (let ind = 1; ind < this.readOnlyFields + 1; ind++) {
-        pkRow = pkRow + '|' + myTable[index][ind]
+        const colName = this.headerColumns[ind]
+        const value = myTable[index][colName] || ''
+        pkRow = pkRow + '|' + value
       }
       this.pkFields.push(pkRow)
     }
 
-    const results = []
+    const results: any = []
     const rows = this.dataSource.length
 
+    // Only check for duplicates if we have data
+    if (this.pkFields.length > 0) {
       for (let j = 0; j < this.pkFields.length; j++) {
         for (let i = 0; i < this.pkFields.length; i++) {
-        if (this.pkFields[j] === this.pkFields[i] && i !== j) {
+          if (
+            this.pkFields[j] === this.pkFields[i] &&
+            i !== j &&
+            this.pkFields[j] !== '|'
+          ) {
             results.push(i)
           }
         }
       }
-
-    if (this.pkFields.length > rows) {
-      for (let n = rows; n < this.pkFields.length; n++) {
-        for (let p = rows; p < this.pkFields.length; p++) {
-          if (n < p && this.pkFields[n] === this.pkFields[p]) {
-            results.push(p)
     }
+
+    // Clear any existing validation marks for all cells
+    for (let row = 0; row < myTable.length; row++) {
+      for (let col = 0; col < this.headerColumns.length; col++) {
+        const cellMeta = hot.getCellMeta(row, col)
+        if (cellMeta) {
+          cellMeta.valid = true
+          cellMeta.dupKey = false
         }
       }
     }
 
-    let cellMeta
+    // Mark duplicate cells as invalid
     for (let k = 0; k < results.length; k++) {
       for (let index = 1; index < this.readOnlyFields + 1; index++) {
-        cellMeta = hot.getCellMeta(results[k], index)
+        hot.setCellMeta(results[k], index, 'valid', false)
-        cellMeta.valid = false
+        hot.setCellMeta(results[k], index, 'dupKey', true)
-        cellMeta.dupKey = true
+        hot.setCellMeta(results[k], index, 'className', 'dc-invalid-cell')
-        hot.render()
       }
     }
 
     this.duplicatePkIndexes = [...new Set(results.sort())]
+    hot.render()
   }
 
   /**
@@ -1425,10 +1535,26 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
 
     this.dataSourceBeforeSubmit = this.helperService.deepClone(this.dataSource)
 
+    // Clean up the data source by removing noLinkOption property
     for (let i = 0; i < this.dataSource.length; i++) {
       delete this.dataSource[i].noLinkOption
     }
 
+    // Remove any completely empty rows from the end
+    while (this.dataSource.length > 0) {
+      const lastRow = this.dataSource[this.dataSource.length - 1]
+      const isEmpty = Object.keys(lastRow).every((key) => {
+        if (key === '_____DELETE__THIS__RECORD_____') return true
+        return !lastRow[key] || lastRow[key] === ''
+      })
+
+      if (isEmpty) {
+        this.dataSource.pop()
+      } else {
+        break
+      }
+    }
+
     hot.updateSettings(
       {
         data: this.dataSource,
@@ -1446,17 +1572,6 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
 
     EditorComponent.cnt = 0
     EditorComponent.nonPkCnt = 0
-    // this.saveLoading = true;
-
-    /**
-     * Below code should be analized, not sure what is the purpose of exceedCells
-     */
-    const myTableData = hot.getData()
-
-    // If the last row is empty, remove it before validation
-    if (myTableData.length > 1 && hot.isEmptyRow(myTableData.length - 1)) {
-      hot.alter('remove_row', myTableData.length - 1)
-    }
 
     this.validatePrimaryKeys()
 
@@ -1486,15 +1601,6 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
         if (txt) txt.focus()
       }, 200)
     })
-
-    // let cnt = 0;
-    // hot.addHook("afterValidate", () => {
-    //   this.updateSoftSelectColumns(true);
-    //   cnt++;
-    //   if (cnt === long) {
-    //     this.validationDone = 1;
-    //   }
-    // });
   }
 
   public async saveTable(data: any) {
@@ -1648,11 +1754,20 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   public checkInvalid() {
-    const hotElement = (this.hotInstanceCompList.first.container as any)
+    // Use Angular wrapper to access Handsontable element instead of DOM queries
-      .nativeElement
+    if (!this.hotTableComponent || !this.hotTableComponent.hotInstance)
-    const invalidCells = hotElement.querySelectorAll('.htInvalid')
+      return false
 
-    return invalidCells.length > 0
+    const hotElement = this.hotTableComponent.hotInstance.rootElement
+    if (!hotElement) return false
+
+    // Check for standard Handsontable validation failures
+    const standardInvalidCells = hotElement.querySelectorAll('.htInvalid')
+
+    // Check for our custom duplicate primary key validation failures
+    const customInvalidCells = hotElement.querySelectorAll('.dc-invalid-cell')
+
+    return standardInvalidCells.length > 0 || customInvalidCells.length > 0
   }
 
   public goToEditor() {
@@ -2192,6 +2307,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   private setCellFilter(filter: boolean) {
     const hotSelected = this.hotInstance.getSelected()
+    if (!hotSelected) return
     const selection = hotSelected ? hotSelected[0] : hotSelected
 
     // When we open a dropdown we want filter disabled so value in cell
@@ -2216,9 +2332,13 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   async ngOnInit() {
+    // Initialize hot table settings
+    this.updateHotTableSettings()
+
     this.licenceService.hot_license_key.subscribe(
       (hot_license_key: string | undefined) => {
         this.hotTable.licenseKey = hot_license_key
+        this.updateHotTableSettings() // Update settings when license key changes
       }
     )
 
@@ -2276,6 +2396,27 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     setTimeout(() => {
       this.fixAriaAccessibility()
     }, 1000)
+
+    // Set up event listener for hot table element
+    // Double click to edit
+    setTimeout(() => {
+      if (this.hotTableComponent && this.hotTableComponent.hotInstance) {
+        const hotElement = this.hotTableComponent.hotInstance.rootElement
+        if (hotElement) {
+          hotElement.addEventListener('mousedown', (event: MouseEvent) => {
+            if (!this.uploadPreview) {
+              this.hotClicked()
+            }
+
+            setTimeout(() => {
+              const menuDebugItem: any =
+                document.querySelector('.debug-switch-item') || undefined
+              if (menuDebugItem) menuDebugItem.click()
+            }, 100)
+          })
+        }
+      }
+    }, 100)
   }
 
   ngOnDestroy() {
@@ -2440,11 +2581,12 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   initSetup(response: EditorsGetDataServiceResponse) {
-    this.hotInstance = this.hotRegisterer.getInstance('hotInstance')
+    this.hotInstance = this.hotTableComponent!.hotInstance!
 
     if (this.getdataError) return
     if (!response) return
     if (!response.data) return
+    if (!this.hotInstance) return
 
     this.cols = response.data.cols
     this.dsmeta = response.data.dsmeta
@@ -2464,7 +2606,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       this.dsNote = ''
     }
 
-    const hot: Handsontable = this.hotInstance
+    const hot = this.hotInstance
 
     const approvers: Approver[] = response.data.approvers
 
@@ -2585,6 +2727,11 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
         rowHeights: 24,
         maxRows: this.licenceState.value.editor_rows_allowed || Infinity,
         invalidCellClassName: 'htInvalid',
+        // Prevent automatic row creation
+        autoWrapRow: false,
+        autoWrapCol: false,
+        // Ensure proper data binding
+        bindRowsWithHeaders: false,
         dropdownMenu: {
           items: {
             make_read_only: {
@@ -2659,7 +2806,51 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
           cellProperties: Handsontable.CellProperties
         ) => {
           const isReadonlyCol = col && this.isReadonlyCol(col)
-          if (isReadonlyCol) cellProperties.className = 'readonlyCell'
+
+          // Check if this cell should be marked as invalid due to duplicate primary key values
+          // Only applies to primary key columns (col 1 through readOnlyFields)
+          const isDuplicateCell =
+            this.duplicatePkIndexes.includes(row) &&
+            col >= 1 &&
+            col <= this.readOnlyFields
+
+          // Handle existing CSS classes - Handsontable can provide className as string or array
+          const existingClasses = cellProperties.className || ''
+          let classes: string[]
+
+          if (Array.isArray(existingClasses)) {
+            // If already an array, create a copy
+            classes = [...existingClasses]
+          } else {
+            // If string, split by spaces and filter out empty strings
+            classes = existingClasses
+              .split(' ')
+              .filter((c: string) => c.length > 0)
+          }
+
+          // Add readonlyCell class for readonly columns to maintain original styling
+          if (isReadonlyCol && !classes.includes('readonlyCell')) {
+            classes.push('readonlyCell')
+          }
+
+          // Apply custom validation styling for duplicate primary key cells
+          // Note: Uses 'dc-invalid-cell' instead of Handsontable's 'htInvalid' class
+          // because Handsontable's internal validation system was removing 'htInvalid'
+          // causing flickering. Our custom class persists reliably.
+          if (isDuplicateCell) {
+            if (!classes.includes('dc-invalid-cell')) {
+              classes.push('dc-invalid-cell')
+            }
+            // Mark cell as invalid to prevent form submission
+            cellProperties.valid = false
+            // Custom flag to identify this as a duplicate key cell for cleanup
+            cellProperties.dupKey = true
+          }
+
+          // Apply the combined CSS classes back to the cell
+          if (classes.length > 0) {
+            cellProperties.className = classes.join(' ')
+          }
         }
       },
       false
@@ -2678,22 +2869,6 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     this.columnHeader[0] = 'Delete?'
     this.readOnlyFields = response.data.sasparams[0].PKCNT
 
-    const hotInstaceEl = document.getElementById('hotInstance')
-
-    if (hotInstaceEl) {
-      hotInstaceEl.addEventListener('mousedown', (event) => {
-        if (!this.uploadPreview) {
-          this.hotClicked()
-        }
-
-        setTimeout(() => {
-          const menuDebugItem: any =
-            document.querySelector('.debug-switch-item') || undefined
-          if (menuDebugItem) menuDebugItem.click()
-        }, 100)
-      })
-    }
-
     hot.addHook(
       'afterSelection',
       (
@@ -2796,6 +2971,21 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     })
 
+    // Add hook to prevent unwanted row creation
+    hot.addHook(
+      'beforeCreateRow',
+      (index: number, amount: number, source?: any) => {
+        // Only allow row creation through the Add Row button or context menu
+        if (
+          !this.addingNewRow &&
+          source !== 'ContextMenu.insert_row_above' &&
+          source !== 'ContextMenu.insert_row_below'
+        ) {
+          return false
+        }
+      }
+    )
+
     hot.addHook('beforePaste', (data: any, cords: any) => {
       const startCol = cords[0].startCol
 

client/src/app/editor/editor.module.ts

@@ -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,

client/src/app/multi-dataset/multi-dataset.component.html

@@ -166,13 +166,10 @@
             >
 
             <hot-table
-              hotId="hotInstanceUserDataset"
+              #hotInstanceUserDataset
               id="hotTableUserDataset"
               class="mt-15"
-              [afterGetColHeader]="afterGetColHeader"
+              [settings]="hotUserDatasetsSettings"
-              [settings]="hotUserDatasets"
-              [licenseKey]="hotTableLicenseKey"
-              stretchH="all"
             >
             </hot-table>
 
@@ -360,17 +357,10 @@
           </div>
 
           <hot-table
-            hotId="hotInstance"
+            #hotInstanceMain
             id="hotTable"
             class="mt-15"
-            [afterGetColHeader]="afterGetColHeader"
+            [settings]="hotMainTableSettings"
-            [className]="['htDark', 'htCustomHidden']"
-            [licenseKey]="hotTableLicenseKey"
-            [multiColumnSorting]="true"
-            [viewportRowRenderingOffset]="50"
-            [manualColumnResize]="true"
-            [filters]="true"
-            stretchH="all"
           >
           </hot-table>
         </ng-container>

client/src/app/multi-dataset/multi-dataset.component.ts

@@ -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'
@@ -49,7 +50,7 @@ enum FileLoadingState {
   styleUrls: ['./multi-dataset.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-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 +90,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 +143,36 @@ 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
+    }
+
+    // Exclude data from settings for HOT v16 - it will be loaded manually
+    const { data, ...settingsWithoutData } = this.hotUserDatasets
+    this.hotUserDatasetsSettings = {
+      ...settingsWithoutData,
+      licenseKey: this.hotTableLicenseKey
+    }
+  }
+
+  public maxWidthCheker(width: any, col: any) {
+    if (width > 200) return 200
+    else return width
   }
 
   public afterGetColHeader = baseAfterGetColHeader
@@ -149,16 +185,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 +281,10 @@ export class MultiDatasetComponent implements OnInit {
       }
 
       this.initUserInputHot()
+      // Call onAutoDetectColumns after HOT is initialized
+      setTimeout(() => {
         this.onAutoDetectColumns()
+      }, 100)
     } else if (matchedExtension === 'csv') {
       this.onMultiCsvFiles(event.target.files)
     } else {
@@ -392,30 +443,55 @@ 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`
 
         if (this.activeParsedDataset) {
+          // Update settings without data - data will be loaded manually
           this.hotInstance.updateSettings({
-          data: this.activeParsedDataset.datasource || [],
             colHeaders: this.activeParsedDataset.datasetInfo.headerColumns,
-          columns: this.activeParsedDataset.datasetInfo.dcValidator?.getRules(),
+            columns:
+              this.activeParsedDataset.datasetInfo.dcValidator?.getRules(),
             readOnly: true,
             height: hotHeight || '300px',
-          className: 'htDark'
+            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(
+      if (this.hotTableUserDatasetComponent?.hotInstance) {
-        'hotInstanceUserDataset'
+        this.hotInstanceUserDataset =
-      )
+          this.hotTableUserDatasetComponent.hotInstance
+
+        // 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',
@@ -466,10 +542,13 @@ export class MultiDatasetComponent implements OnInit {
             }
           }
         )
-    })
+      }
+    }, 100)
   }
 
   dynamicCellValidations() {
+    if (!this.hotInstanceUserDataset) return
+
     const hotData = this.hotInstanceUserDataset.getData()
 
     hotData.forEach((row, rowIndex) => {
@@ -483,6 +562,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 +637,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 +711,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()
   }
 

client/src/app/multi-dataset/multi-dataset.module.ts

@@ -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'

client/src/app/review/review.module.ts

@@ -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
   ]

client/src/app/services/sas.service.ts

@@ -365,13 +365,18 @@ export class SasService {
         }
       },
       (err: any) => {
-        if (err.error.includes('Unauthorized')) {
+        const errorMessage =
+          typeof err.error === 'string'
+            ? err.error
+            : JSON.stringify(err.error || err)
+
+        if (errorMessage.includes('Unauthorized')) {
           this.shouldLogin.next(true)
 
           this.shouldLogin.subscribe((res: boolean) => {
             if (res === false) location.reload()
           })
-        } else if (err.error.includes(`Folder doesn't exist.`)) {
+        } else if (errorMessage.includes(`Folder doesn't exist.`)) {
           console.warn(
             'SASjs SAS services are not present on the current appLoc.'
           )
@@ -419,7 +424,11 @@ export class SasService {
             }
           },
           (err: any) => {
-            if (err.error.includes(`Folder doesn't exist.`)) {
+            const errorMessage =
+              typeof err.error === 'string'
+                ? err.error
+                : JSON.stringify(err.error || err)
+            if (errorMessage.includes(`Folder doesn't exist.`)) {
               reject()
             }
           }

client/src/app/shared/viewboxes/viewboxes.component.html

@@ -386,27 +386,9 @@
       </div>
 
       <hot-table
-        *ngIf="viewboxTableIndex > -1"
+        *ngIf="viewboxTableIndex > -1 && viewboxHotSettings.get(viewbox.id)"
-        [hotId]="'hotInstance_viewbox_' + viewbox.id"
+        [settings]="viewboxHotSettings.get(viewbox.id) || {}"
-        id="hotTable"
+        [id]="'hotTable_' + viewbox.id"
-        className="htDark"
-        [readOnly]="true"
-        [modifyColWidth]="maxWidthCheker"
-        [copyPaste]="viewboxTables[viewboxTableIndex].hotTable.copyPaste"
-        [contextMenu]="viewboxTables[viewboxTableIndex].hotTable.contextMenu"
-        [multiColumnSorting]="true"
-        [viewportRowRenderingOffset]="50"
-        [data]="viewboxTables[viewboxTableIndex].hotTable.data"
-        [colHeaders]="viewboxTables[viewboxTableIndex].hotTable.colHeaders"
-        [columns]="viewboxTables[viewboxTableIndex].hotTable.columns"
-        [filters]="true"
-        [dropdownMenu]="viewboxTables[viewboxTableIndex].hotTable.dropdownMenu"
-        [height]="calculateTableHeight(viewbox)"
-        stretchH="all"
-        [cells]="viewboxTables[viewboxTableIndex].hotTable.cells"
-        [maxRows]="viewboxTables[viewboxTableIndex].hotTable.maxRows"
-        [manualColumnResize]="true"
-        [licenseKey]="viewboxTables[viewboxTableIndex].hotTable.licenseKey"
       ></hot-table>
     </div>
   </div>

client/src/app/shared/viewboxes/viewboxes.component.ts

@@ -21,9 +21,9 @@ import {
   ViewEncapsulation
 } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { HotTableRegisterer } from '@handsontable/angular'
 import { SASjsConfig } from '@sasjs/adapter'
 import Handsontable from 'handsontable'
+import { HotTableComponent } from '@handsontable/angular-wrapper'
 import { cloneDeep } from 'lodash-es'
 import { Subscription } from 'rxjs'
 import { FilterQuery, FilterGroup } from 'src/app/models/FilterQuery'
@@ -54,6 +54,8 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChildren('resizeBox') resizeBoxQuery!: QueryList<ElementRef> //make query list, handle multiple
   @ViewChildren('dragHandleCorner')
   dragHandleCornerQuery!: QueryList<ElementRef>
+  @ViewChildren(HotTableComponent)
+  hotTableComponents!: QueryList<HotTableComponent>
 
   private _viewboxModal: boolean = false
   get viewboxModal(): boolean {
@@ -119,8 +121,9 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     licenseKey: undefined,
     dropdownMenu: undefined
   }
+
+  public viewboxHotSettings: Map<number, Handsontable.GridSettings> = new Map()
   public viewboxTables: ViewboxTable[] = []
-  private hotTableRegisterer: HotTableRegisterer
 
   public filteringViewbox: Viewbox | undefined
 
@@ -150,9 +153,7 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     private router: Router,
     private activatedRoute: ActivatedRoute,
     private cdf: ChangeDetectorRef
-  ) {
+  ) {}
-    this.hotTableRegisterer = new HotTableRegisterer()
-  }
 
   ngOnInit(): void {
     // Load libraries
@@ -207,7 +208,17 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
-    //set handles for box resize
+    // Set handles for box resize and ensure HOT components are properly initialized
+    setTimeout(() => {
+      this.setAllHandleTransform()
+
+      // Force refresh of any existing HOT instances after view init
+      this.viewboxes.forEach((viewbox) => {
+        if (this.getViewboxTableIndex(viewbox) > -1) {
+          this.refreshTableAfterResize(viewbox)
+        }
+      })
+    }, 1000)
   }
 
   // Maximum number of open viewboxes reached
@@ -304,6 +315,9 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
           if (viewboxTable) {
             viewboxTable.hotTable.data = res.viewdata
 
+            // Update settings with new data
+            this.createViewboxTableSettings(viewbox)
+
             resolve(null)
           } else {
             resolve(null)
@@ -413,6 +427,9 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
           viewbox.query = this.helperService.deepClone(res.query)
           viewbox.filterText = res.sasparams[0].FILTER_TEXT
 
+          // Create settings for this viewbox
+          this.createViewboxTableSettings(viewbox)
+
           setTimeout(() => {
             this.updateHotColumns(
               viewboxTable!.hotTable.colHeadersHidden || [],
@@ -421,10 +438,12 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
 
             // HOT Settings are bound in HTML but some settings due to timing issues
             // requires to be updated after the HOT is instanced
-            // after the update `render` method is called
+            // Use a longer timeout to ensure the HOT component is fully initialized
+            setTimeout(() => {
               const hotInstance = this.getViewboxHotInstance(viewbox.id)
 
-            hotInstance?.updateSettings({
+              if (hotInstance) {
+                hotInstance.updateSettings({
                   manualColumnMove: viewboxTable!.hotTable.manualColumnMove,
                   afterGetColHeader: (col: number, th: any) => {
                     const column = hotInstance?.colToProp(col) as string
@@ -439,12 +458,14 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
                     th.classList.add(globals.handsontable.darkTableHeaderClass)
                   }
                 })
-            hotInstance?.render()
+                hotInstance.render()
+              }
 
               if (this.selectedViewbox) {
                 this.resetSelectedViewbox(viewbox)
               }
-          })
+            }, 500)
+          }, 100)
 
           resolve()
         })
@@ -490,6 +511,68 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     return index
   }
 
+  /**
+   * Create and store Handsontable settings for a specific viewbox
+   * @param viewbox
+   */
+  private createViewboxTableSettings(viewbox: Viewbox): void {
+    const viewboxTableIndex = this.getViewboxTableIndex(viewbox)
+    if (viewboxTableIndex === -1) {
+      this.viewboxHotSettings.set(viewbox.id, {})
+      return
+    }
+
+    const viewboxTable = this.viewboxTables[viewboxTableIndex]
+    const calculatedHeight = this.calculateTableHeight(viewbox)
+
+    // HOT v16 settings - data will be loaded manually after initialization
+    const settings: Handsontable.GridSettings = {
+      colHeaders: viewboxTable.hotTable.colHeaders,
+      columns: viewboxTable.hotTable.columns,
+      height: calculatedHeight,
+      readOnly: true,
+      modifyColWidth: this.maxWidthCheker,
+      copyPaste: viewboxTable.hotTable.copyPaste,
+      contextMenu: viewboxTable.hotTable.contextMenu,
+      multiColumnSorting: true,
+      viewportRowRenderingOffset: 50,
+      filters: true,
+      dropdownMenu: viewboxTable.hotTable.dropdownMenu,
+      stretchH: 'all',
+      cells: viewboxTable.hotTable.cells,
+      maxRows: viewboxTable.hotTable.maxRows || Infinity,
+      manualColumnResize: true,
+      rowHeaders: true,
+      licenseKey: viewboxTable.hotTable.licenseKey
+    }
+
+    // Force a new object reference to trigger change detection
+    this.viewboxHotSettings.set(viewbox.id, { ...settings })
+
+    // Force change detection to ensure the template updates
+    setTimeout(() => {
+      this.cdf.detectChanges()
+
+      // Try to get the HOT instance and force a render
+      setTimeout(() => {
+        const hotInstance = this.getViewboxHotInstance(viewbox.id)
+        if (hotInstance) {
+          // Load data manually - this is required for HOT v16 Angular wrapper
+          hotInstance.loadData(viewboxTable.hotTable.data)
+          hotInstance.render()
+        }
+      }, 500)
+    })
+  }
+
+  /**
+   * Get stored Handsontable settings for a specific viewbox
+   * @param viewbox
+   */
+  getViewboxTableSettings(viewbox: Viewbox): Handsontable.GridSettings {
+    return this.viewboxHotSettings.get(viewbox.id) || {}
+  }
+
   /**
    * Viewbox resize
    * @param dragHandle
@@ -514,8 +597,9 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
       this.viewboxChanged()
       this.eventService.dispatchEvent('resize')
 
-      // Refresh all viewbox tables after resize
+      // Refresh all viewbox tables after resize and update their settings
       this.viewboxes.forEach((viewbox) => {
+        // Settings will include updated heights when accessed
         this.refreshTableAfterResize(viewbox)
       })
     })
@@ -680,6 +764,7 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
 
       // Refresh all tables after snap to grid
       this.viewboxes.forEach((viewbox) => {
+        // Settings will include correct height when accessed
         this.refreshTableAfterResize(viewbox)
       })
     })
@@ -726,6 +811,7 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
 
     // Refresh table after restoring
     setTimeout(() => {
+      // Settings will include correct height when accessed
       this.refreshTableAfterResize(viewbox)
     }, 100)
   }
@@ -741,6 +827,7 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
 
     // Refresh table after expanding
     setTimeout(() => {
+      // Settings will include correct height when accessed
       this.refreshTableAfterResize(viewbox)
     }, 100)
   }
@@ -759,6 +846,9 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     if (index > -1) this.viewboxes.splice(index, 1)
     if (viewtableIndex > -1) this.viewboxTables.splice(viewtableIndex, 1)
 
+    // Clean up settings for this viewbox
+    this.viewboxHotSettings.delete(viewbox.id)
+
     if (this.selectedViewbox?.id === viewbox.id) {
       this.unsetSelectedViewbox()
     }
@@ -1056,6 +1146,9 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
         }
 
         viewboxTable.hotTable.data = res.viewdata
+
+        // Update settings with new data
+        this.createViewboxTableSettings(viewbox)
       })
       .catch((err: any) => {
         this.loggerService.error(err)
@@ -1084,6 +1177,8 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     this.updateHiddenColumnsHot(hiddenColProps, viewboxId)
 
     this.setColumnOrder(viewboxId)
+
+    // Settings will be regenerated when accessed
   }
 
   /**
@@ -1179,8 +1274,6 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   /**
-   * WORKAROUND: This is a workaround to calculate the height of the table since `100%`
-   * makes hot not load
    * Calculate available height for Handsontable
    * @param viewbox The viewbox to calculate height for
    * @returns Available height in pixels
@@ -1188,9 +1281,13 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
   calculateTableHeight(viewbox: Viewbox): number {
     // Calculate the exact height of the content div
     const dragHandleHeight = 20
-    const searchFormHeight = 38
+    const searchFormHeight = 36
-    // Return the exact remaining height for the table
+    const padding = 2
-    return viewbox.height - dragHandleHeight - searchFormHeight
+    // Return the exact remaining height for the table with minimum height
+    const calculatedHeight =
+      viewbox.height - dragHandleHeight - searchFormHeight - padding
+
+    return calculatedHeight
   }
 
   /**
@@ -1202,7 +1299,30 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     if (hotInstance) {
       // Force the table to recalculate its dimensions
       setTimeout(() => {
+        try {
+          // Update height setting and refresh
+          hotInstance.updateSettings({
+            height: this.calculateTableHeight(viewbox)
+          })
           hotInstance.refreshDimensions()
+          hotInstance.render()
+        } catch (error) {
+          // If refresh fails, try again later
+          setTimeout(() => {
+            try {
+              hotInstance.updateSettings({
+                height: this.calculateTableHeight(viewbox)
+              })
+              hotInstance.refreshDimensions()
+            } catch (e) {
+              console.warn(
+                'Failed to refresh HOT dimensions for viewbox',
+                viewbox.id,
+                e
+              )
+            }
+          }, 500)
+        }
       }, 100)
     }
   }
@@ -1213,13 +1333,27 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
    * @returns HOT Instance from the given Viewbox
    */
   private getViewboxHotInstance(viewboxId?: number): Handsontable | undefined {
-    if (!viewboxId) return
+    if (!viewboxId || !this.hotTableComponents) return
 
-    const hotInstance = this.hotTableRegisterer.getInstance(
+    // Find the component corresponding to this viewbox
-      `hotInstance_viewbox_${viewboxId}`
+    // Since we only show one table per viewbox and they're rendered in order,
-    )
+    // we can match by the viewbox's position in the array
+    const viewboxIndex = this.viewboxes.findIndex((vb) => vb.id === viewboxId)
+    if (viewboxIndex === -1) return
 
-    return hotInstance
+    // Get the HOT component at this index
+    const hotComponents = this.hotTableComponents.toArray()
+    let hotComponentIndex = 0
+
+    // Count how many viewboxes before this one have loaded tables
+    for (let i = 0; i < viewboxIndex; i++) {
+      if (this.getViewboxTableIndex(this.viewboxes[i]) > -1) {
+        hotComponentIndex++
+      }
+    }
+
+    const hotTableComponent = hotComponents[hotComponentIndex]
+    return hotTableComponent?.hotInstance || undefined
   }
 
   /**

client/src/app/shared/viewboxes/viewboxes.module.ts

@@ -4,7 +4,11 @@ import { ClarityModule } from '@clr/angular'
 import { FormsModule } from '@angular/forms'
 import { ViewboxesComponent } from './viewboxes.component'
 import { QueryModule } from 'src/app/query/query.module'
-import { HotTableModule } from '@handsontable/angular'
+import { HotTableModule } from '@handsontable/angular-wrapper'
+import { registerAllModules } from 'handsontable/registry'
+
+// register Handsontable's modules
+registerAllModules()
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { AutocompleteModule } from '../autocomplete/autocomplete.module'
 import { DcTreeModule } from '../dc-tree/dc-tree.module'

client/src/app/stage/stage.component.html

@@ -125,19 +125,9 @@
       </div>
       <div class="card-block">
         <hot-table
-          hotId="hotInstance"
           id="hotTable"
-          className="htDark"
           [data]="hotTable.data"
-          [colHeaders]="hotTable.colHeaders"
+          [settings]="hotTableSettings"
-          [columns]="hotTable.columns"
-          [maxRows]="hotTable.maxRows"
-          [height]="hotTable.height"
-          [licenseKey]="hotTable.licenseKey"
-          [afterGetColHeader]="hotTable.afterGetColHeader"
-          stretchH="all"
-          [cells]="hotTable.cells"
-          [settings]="hotTable.settings"
           aria-label="Staged data table"
         >
           <!--[licenseKey]=null-->

client/src/app/stage/stage.component.ts

@@ -11,6 +11,7 @@ import { ActivatedRoute } from '@angular/router'
 import { SasService } from '../services/sas.service'
 import { EventService } from '../services/event.service'
 import { HotTableInterface } from '../models/HotTable.interface'
+import Handsontable from 'handsontable'
 import { LicenceService } from '../services/licence.service'
 import { globals } from '../_globals'
 import { EditorsRestoreServiceResponse } from '../models/sas/editors-restore.model'
@@ -61,6 +62,22 @@ export class StageComponent implements OnInit, AfterViewInit {
     }
   }
 
+  get hotTableSettings(): Handsontable.GridSettings {
+    return {
+      ...this.hotTable.settings,
+      colHeaders: this.hotTable.colHeaders,
+      columns: this.hotTable.columns,
+      maxRows: this.hotTable.maxRows,
+      height: this.hotTable.height,
+      licenseKey: this.hotTable.licenseKey,
+      afterGetColHeader: this.hotTable.afterGetColHeader,
+      afterInit: this.hotTable.afterInit,
+      stretchH: 'all',
+      cells: this.hotTable.cells,
+      className: 'htDark'
+    }
+  }
+
   constructor(
     private licenceService: LicenceService,
     private sasStoreService: SasStoreService,

client/src/app/stage/stage.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { StageComponent } from './stage.component'
-import { HotTableModule } from '@handsontable/angular'
+import { HotTableModule } from '@handsontable/angular-wrapper'
 import { ClarityModule } from '@clr/angular'
 import { RouterModule, Routes } from '@angular/router'
 

client/src/app/viewer/viewer.component.html

@@ -621,34 +621,17 @@
     </div>
 
     <div *ngIf="!noData && !noDataReqErr && table" class="clr-flex-1">
+      <div class="hot-wrapper clr-flex-1">
         <hot-table
           #hotInstance
-        hotId="hotInstance"
           id="hotTable"
-        className="htDark"
+          class="view-hot"
-        [multiColumnSorting]="true"
-        [viewportRowRenderingOffset]="50"
           [data]="hotTable.data"
-        [colHeaders]="hotTable.colHeaders"
+          [settings]="hotTableSettings"
-        [columns]="hotTable.columns"
-        [copyPaste]="hotTable.copyPaste"
-        [contextMenu]="hotTable.contextMenu"
-        [filters]="true"
-        [dropdownMenu]="hotTable.dropdownMenu"
-        [height]="hotTable.height"
-        stretchH="all"
-        [modifyColWidth]="maxWidthCheker"
-        [cells]="hotTable.cells"
-        [maxRows]="hotTable.maxRows"
-        [manualColumnResize]="true"
-        [afterGetColHeader]="hotTable.afterGetColHeader"
-        [rowHeaders]="hotTable.rowHeaders"
-        [rowHeaderWidth]="hotTable.rowHeaderWidth"
-        [rowHeights]="hotTable.rowHeights"
-        [licenseKey]="hotTable.licenseKey"
         >
         </hot-table>
       </div>
+    </div>
 
     <div>
       <p

client/src/app/viewer/viewer.component.ts

@@ -18,7 +18,7 @@ import { globals } from '../_globals'
 
 import { EventService } from '../services/event.service'
 import { HelperService } from '../services/helper.service'
-import { HotTableRegisterer } from '@handsontable/angular'
+import { HotTableComponent } from '@handsontable/angular-wrapper'
 import { SasService } from '../services/sas.service'
 import { SASjsConfig } from '@sasjs/adapter'
 import { QueryComponent } from '../query/query.component'
@@ -102,7 +102,35 @@ export class ViewerComponent
   public sasjsConfig: SASjsConfig = new SASjsConfig()
   public searchLoading: boolean = false
   public searchNumeric: boolean = false
-  private hotTableRegisterer: HotTableRegisterer
+  @ViewChild(HotTableComponent, { static: false })
+  hotTableComponent!: HotTableComponent
+
+  public hotTableSettings: Handsontable.GridSettings = {}
+
+  private updateHotTableSettings(): void {
+    this.hotTableSettings = {
+      multiColumnSorting: true,
+      viewportRowRenderingOffset: 30,
+      colHeaders: this.hotTable.colHeaders,
+      columns: this.hotTable.columns,
+      copyPaste: this.hotTable.copyPaste,
+      contextMenu: this.hotTable.contextMenu,
+      filters: true,
+      dropdownMenu: this.hotTable.dropdownMenu,
+      height: this.hotTable.height,
+      stretchH: 'all',
+      modifyColWidth: this.maxWidthCheker,
+      cells: this.hotTable.cells,
+      maxRows: this.hotTable.maxRows,
+      manualColumnResize: true,
+      afterGetColHeader: this.hotTable.afterGetColHeader,
+      rowHeaders: this.hotTable.rowHeaders,
+      rowHeaderWidth: this.hotTable.rowHeaderWidth,
+      rowHeights: this.hotTable.rowHeights,
+      licenseKey: this.hotTable.licenseKey,
+      className: 'htDark'
+    }
+  }
   public numberOfRows: number | null = null
   public headerPks: string[] = []
   public $dataFormats: $DataFormats | null = null
@@ -129,6 +157,13 @@ export class ViewerComponent
       return ' '
     },
     afterGetColHeader: (col: number, th: any, headerLevel: number) => {
+      const column = this.hotInstance?.colToProp(col) as string
+
+      // header columns styling - primary keys
+      const isPKCol = column && this.headerPks.indexOf(column) > -1
+
+      if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
+
       // Dark mode
       th.classList.add(globals.handsontable.darkTableHeaderClass)
     },
@@ -203,7 +238,6 @@ export class ViewerComponent
     private location: Location,
     private cdf: ChangeDetectorRef
   ) {
-    this.hotTableRegisterer = new HotTableRegisterer()
     this.sasjsConfig = this.sasService.getSasjsConfig()
   }
 
@@ -223,6 +257,7 @@ export class ViewerComponent
     this.licenceService.hot_license_key.subscribe(
       (hot_license_key: string | undefined) => {
         this.hotTable.licenseKey = hot_license_key
+        this.updateHotTableSettings() // Update settings when license key changes
       }
     )
   }
@@ -857,6 +892,9 @@ export class ViewerComponent
             return { readOnly: true }
           }
 
+          // Update hot table settings after data is loaded
+          this.updateHotTableSettings()
+
           this.tableFlag = false
           let ds = []
           ds = libDataset.split('.')
@@ -1081,7 +1119,7 @@ export class ViewerComponent
   private setupHot() {
     setTimeout(() => {
       if (!this.loadingTableView && this.libDataset) {
-        this.hotInstance = this.hotTableRegisterer.getInstance('hotInstance')
+        this.hotInstance = this.hotTableComponent?.hotInstance
 
         if (this.hotInstance) {
           this.hotInstance.updateSettings({

client/src/app/viewer/viewer.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { ViewerComponent } from './viewer.component'
 import { ViewRouteComponent } from '../routes/view-route/view-route.component'
-import { HotTableModule } from '@handsontable/angular'
+import { HotTableModule } from '@handsontable/angular-wrapper'
 import { ViewerRoutingModule } from './viewer-routing.module'
 import { ClarityModule } from '@clr/angular'
 import { FormsModule } from '@angular/forms'
@@ -36,7 +36,7 @@ import { MetadataComponent } from '../metadata/metadata.component'
     ClipboardModule,
     FormsModule,
     ClarityModule,
-    HotTableModule.forRoot(),
+    HotTableModule,
     AppSharedModule,
     SharedModule,
     PipesModule,

client/src/app/xlmap/xlmap.component.html

@@ -125,30 +125,9 @@
 
     <div class="clr-flex-1">
       <hot-table
-        hotId="hotInstance"
         id="hot-table"
-        className="htDark"
-        [multiColumnSorting]="true"
-        [viewportRowRenderingOffset]="50"
         [data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData"
-        [colHeaders]="
+        [settings]="hotTableSettings"
-          selectedTab === TabsEnum.Rules ? xlmapRulesHeaders : xlUploadHeader
-        "
-        [columns]="
-          selectedTab === TabsEnum.Rules ? xlmapRulesColumns : xlUploadColumns
-        "
-        [filters]="true"
-        [height]="'100%'"
-        stretchH="all"
-        [afterGetColHeader]="afterGetColHeader"
-        [modifyColWidth]="maxWidthChecker"
-        [cells]="getCellConfiguration"
-        [maxRows]="hotTableMaxRows"
-        [manualColumnResize]="true"
-        [rowHeaders]="rowHeaders"
-        [rowHeaderWidth]="15"
-        [rowHeights]="20"
-        [licenseKey]="hotTableLicenseKey"
       >
       </hot-table>
     </div>

client/src/app/xlmap/xlmap.component.ts

@@ -23,6 +23,7 @@ import {
 } from '../services'
 import { getCellAddress, getFinishingCell } from './utils/xl.utils'
 import { blobToFile, byteArrayToBinaryString } from './utils/file.utils'
+import Handsontable from 'handsontable'
 import { UploadFileResponse } from '../models/UploadFile'
 
 interface XLMapRule {
@@ -136,6 +137,34 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
   public hotTableMaxRows =
     this.licenceState.value.viewer_rows_allowed || Infinity
 
+  get hotTableSettings(): Handsontable.GridSettings {
+    return {
+      multiColumnSorting: true,
+      viewportRowRenderingOffset: 50,
+      colHeaders:
+        this.selectedTab === this.TabsEnum.Rules
+          ? this.xlmapRulesHeaders
+          : this.xlUploadHeader,
+      columns:
+        this.selectedTab === this.TabsEnum.Rules
+          ? this.xlmapRulesColumns
+          : this.xlUploadColumns,
+      filters: true,
+      height: '100%',
+      stretchH: 'all',
+      afterGetColHeader: this.afterGetColHeader,
+      modifyColWidth: this.maxWidthChecker,
+      cells: this.getCellConfiguration,
+      maxRows: this.hotTableMaxRows,
+      manualColumnResize: true,
+      rowHeaders: this.rowHeaders,
+      rowHeaderWidth: 15,
+      rowHeights: 20,
+      licenseKey: this.hotTableLicenseKey,
+      className: 'htDark'
+    }
+  }
+
   constructor(
     private eventService: EventService,
     private licenceService: LicenceService,

client/src/app/xlmap/xlmap.module.ts

@@ -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'

client/src/index.html

@@ -45,7 +45,7 @@
 
   <sasjs
     serverUrl=""
-    appLoc="/Public/app/dc"
+    appLoc="/Public/app/devtest"
     serverType="SASJS"
     loginMechanism="Redirected"
     debug="false"

client/src/styles.scss

@@ -937,11 +937,6 @@ app-multi-dataset {
   .dataset-input-wrapper {
     max-width: 500px;
     width: 100%;
-
-    textarea {
-      min-height: 200px;
-      height: 200px;
-    }
   }
 
   .submit-reason {
@@ -4771,7 +4766,6 @@ body[cds-theme="dark"] {
 }
 
 .handsontable.listbox {
-  padding: 5px 0px 5px 5px;
   box-shadow: 0px 4px 20px 0px #00000070;
 }
 
@@ -4781,6 +4775,12 @@ body[cds-theme="dark"] {
   color: #ffffff !important;
 }
 
+.handsontable td.dc-invalid-cell {
+  background: #e62700ad !important;
+  border: 1px solid red !important;
+  color: #ffffff !important;
+}
+
 .handsontable .numericListbox {
   text-align: right;
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "dcfrontend",
-  "version": "7.0.3",
+  "version": "7.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dcfrontend",
-      "version": "7.0.3",
+      "version": "7.1.1",
       "hasInstallScript": true,
       "devDependencies": {
         "@saithodev/semantic-release-gitea": "^2.1.0",

package.json

@@ -1,13 +1,13 @@
 {
   "name": "dcfrontend",
-  "version": "7.1.1",
+  "version": "7.2.2",
   "description": "Data Controller",
   "devDependencies": {
     "@saithodev/semantic-release-gitea": "^2.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^10.0.1",
-    "@semantic-release/npm": "11.0.0",
     "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "11.0.0",
     "@semantic-release/release-notes-generator": "^11.0.4",
     "commit-and-tag-version": "^11.2.2",
     "prettier": "3.6.2"
@@ -17,10 +17,10 @@
     "build-frontend": "cd client && npm run build",
     "release": "commit-and-tag-version",
     "lint": "npm run lint:fix",
-    "lint:fix": "npx prettier --write \"client/{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"client/cypress/integration/*.tests.ts\"",
+    "lint:fix": "npx prettier --write \"client/{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"client/cypress/e2e/*.cy.ts\"",
-    "lint:fix:silent": "npx prettier --log-level silent --write \"client/{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"client/cypress/integration/*.tests.ts\"",
+    "lint:fix:silent": "npx prettier --log-level silent --write \"client/{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"client/cypress/e2e/*.cy.ts\"",
-    "lint:check": "npx prettier --check \"client/{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"client/cypress/integration/*.tests.ts\"",
+    "lint:check": "npx prettier --check \"client/{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"client/cypress/e2e/*.cy.ts\"",
-    "lint:check:silent": "npx prettier --log-level silent --check \"client/{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"client/cypress/integration/*.tests.ts\"",
+    "lint:check:silent": "npx prettier --log-level silent --check \"client/{src,test}/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\" \"client/cypress/e2e/*.cy.ts\"",
     "jo": "echo",
     "prepare": "git rev-parse --git-dir && git config core.hooksPath ./.git-hooks && git config core.autocrlf false || true"
   },
@@ -32,5 +32,6 @@
   "//": [
     "Readme",
     "We must set private: true so that semantic-release/npm plugin will update the package.json version but not try to release it as NPM package"
-  ]
+  ],
+  "dependencies": {}
 }

sas/mocks/sasjs/services/public/viewdata.js

@@ -13,6 +13,12 @@ if (fs.existsSync(sessionStoragePath)){
     } catch (err) {}
 }
 
+let controlTableText = ''
+
+if (_WEBIN_FILENAME1.includes('SASControlTable')) controlTableText = _WEBIN_FILEREF1.toString()
+
+
+
 let webouts = {
     MPE_X_TEST: `{"SYSDATE" : "26SEP22"
     ,"SYSTIME" : "08:48"

sas/package.json

@@ -28,7 +28,7 @@
   },
   "private": true,
   "dependencies": {
-    "@sasjs/cli": "^4.12.10",
+    "@sasjs/cli": "^4.12.11",
     "@sasjs/core": "^4.59.5"
   }
 }