chore(release): 6.11.0 [skip ci]

# [6.11.0](https://git.datacontroller.io/dc/dc/compare/v6.10.1...v6.11.0) (2024-06-27)

### Bug Fixes

* addressing PR comments ([d94df7f](d94df7f0eb))
* **multi load:** fixed parsing algorithm reused for the multi load, the fix affects the normal upload as well. ([d4fee79](d4fee791a7))
* **multi load:** label rename ([fa04d7b](fa04d7bf4e))

### Features

* **multi load:** added HOT for user datasets input ([18363bb](18363bbbeb))
* **multi load:** implemented matching libds and parsing of the multiple sheets ([efcdc69](efcdc694dd))
* **multi load:** licence submit limits ([cffeab8](cffeab813d))
* **multi load:** multiple csv files ([4d27665](4d276657b3))
* **multi load:** refactored range find function, unlocking excel with password is reusable ([eb7c443](eb7c44333c))
* **multi load:** submitting multiple found tables at once ([5deba44](5deba44d2b))

.gitea/workflows/build.yaml

@@ -8,9 +8,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20.14.0
 
       - name: Install Google Chrome
         run: |
@@ -31,11 +31,9 @@ jobs:
       - name: Install dependencies
         run: |
           cd client
-          npm ci
           # Decrypt and Install sheet
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
-          npm i ./libraries/sheet-crypto.tgz
+          npm ci
-          # End
 
       - name: Licence checker
         run: |
@@ -45,4 +43,9 @@ jobs:
       - name: Angular Tests
         run: |
           cd client
-          npm run test:headless
+          npm run test:headless
+
+      - name: Production Build
+        run: |
+          cd client
+          npm run build

.gitea/workflows/release.yaml

@@ -11,9 +11,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20.14.0
 
       - name: Write .npmrc file
         run: |
@@ -36,11 +36,9 @@ jobs:
       - name: Install dependencies
         run: |
           cd client
-          npm ci
           # Decrypt and Install sheet
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
-          npm i ./libraries/sheet-crypto.tgz
+          npm ci
-          # End
 
       - name: Check audit
       # Audit should fail and stop the CI if critical vulnerability found
@@ -68,9 +66,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20.14.0
 
       - name: Write .npmrc file
         run: |
@@ -94,11 +92,9 @@ jobs:
       - name: Install dependencies
         run: |
           cd client
-          npm ci
           # Decrypt and Install sheet
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
-          npm i ./libraries/sheet-crypto.tgz
+          npm ci
-          # End
 
       # Install pm2 and prepare SASJS server
       - run: npm i -g pm2
@@ -140,7 +136,7 @@ jobs:
           replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
           cat ./cypress.config.ts
           # Start frontend and run cypress
-          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
+          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
 
       - name: Zip Cypress videos
         if: always()
@@ -160,9 +156,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20.14.0
 
       - name: Write .npmrc file
         run: |
@@ -184,6 +180,16 @@ jobs:
           apt-get update
           apt-get install doxygen -y
 
+      - name: Frontend Preliminary Build
+        description: We want to prevent creating empty release if frontend fails
+        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 i webpack
+          npm run build
+
       - name: Create Empty Release (assets are posted later)
         run: |
           npm i
@@ -196,11 +202,6 @@ jobs:
         description: Must be created AFTER the release as the version (git tag) is used in the interface
         run: |
           cd client
-          npm ci
-          # Decrypt and Install sheet
-          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
-          npm i ./libraries/sheet-crypto.tgz
-          # End
           npm run build
 
       - name: Build SAS9 EBI Release
@@ -244,6 +245,7 @@ jobs:
           rm sasjsbuild/services/clickme.html
           sasjs b -t viya
           cp sasjsbuild/viya.sas ./viya.sas
+          cp sasjsbuild/viya.json ./viya.json
 
       - name: Zip Frontend (including viya.json for full viya deploy)
         run: |
@@ -279,3 +281,4 @@ jobs:
           curl -k $URL -F attachment=@sas/sasjs_server.json.zip
           curl -k $URL -F attachment=@sas/sas9.sas
           curl -k $URL -F attachment=@sas/viya.sas
+          curl -k $URL -F attachment=@sas/viya.json

.gitignore

@@ -11,7 +11,9 @@ client/cypress/screenshots
 client/cypress/results
 client/cypress/videos
 client/documentation
-client/sheet-crypto*
+client/**/sheet-crypto.tgz
+client/.nx
+client/libraries/sheet-crypto.tgz
 cypress.env.json
 sasjsbuild
 sasjsresults

CHANGELOG.md

@@ -1,3 +1,90 @@
+# [6.11.0](https://git.datacontroller.io/dc/dc/compare/v6.10.1...v6.11.0) (2024-06-27)
+
+
+### Bug Fixes
+
+* addressing PR comments ([d94df7f](https://git.datacontroller.io/dc/dc/commit/d94df7f0ebae8feab5e1d5cf8011af8c8be2ca18))
+* **multi load:** fixed parsing algorithm reused for the multi load, the fix affects the normal upload as well. ([d4fee79](https://git.datacontroller.io/dc/dc/commit/d4fee791a72021e449cf9680c3e3a525dce41ac1))
+* **multi load:** label rename ([fa04d7b](https://git.datacontroller.io/dc/dc/commit/fa04d7bf4e5ba337146bdaa926c60488f8851449))
+
+
+### Features
+
+* **multi load:** added HOT for user datasets input ([18363bb](https://git.datacontroller.io/dc/dc/commit/18363bbbeb9cf96183ba4841da8134b2f66f735c))
+* **multi load:** implemented matching libds and parsing of the multiple sheets ([efcdc69](https://git.datacontroller.io/dc/dc/commit/efcdc694dd275cdb9a4e19f26e5522b8dadc5fd9))
+* **multi load:** licence submit limits ([cffeab8](https://git.datacontroller.io/dc/dc/commit/cffeab813d8d4b324f82710dfd73953d4cbf8ffe))
+* **multi load:** multiple csv files ([4d27665](https://git.datacontroller.io/dc/dc/commit/4d276657b35a147a2233a03afcb1716348555f52))
+* **multi load:** refactored range find function, unlocking excel with password is reusable ([eb7c443](https://git.datacontroller.io/dc/dc/commit/eb7c44333c865e7f7bbfb54dd7f73bfc110f86a7))
+* **multi load:** submitting multiple found tables at once ([5deba44](https://git.datacontroller.io/dc/dc/commit/5deba44d2b7352866d821b70dbbfbbf54955dc47))
+
+## [6.10.1](https://git.datacontroller.io/dc/dc/compare/v6.10.0...v6.10.1) (2024-06-07)
+
+
+### Bug Fixes
+
+* adding 60 more colours to crayons table. Closes [#112](https://git.datacontroller.io/dc/dc/issues/112) ([3521579](https://git.datacontroller.io/dc/dc/commit/3521579dead089eebf62455686be3aee88bde687))
+* terms and conditions colours, editor on smaller screens show only icons ([e32d44b](https://git.datacontroller.io/dc/dc/commit/e32d44b1bcdfeea43d19b21ec0ddf4af1ce3992a))
+
+# [6.10.0](https://git.datacontroller.io/dc/dc/compare/v6.9.0...v6.10.0) (2024-06-07)
+
+
+### Features
+
+* updated handsontable to v14 ([2f8d0b7](https://git.datacontroller.io/dc/dc/commit/2f8d0b764a957ad8c11cd1088fad5e0670aa1731))
+
+# [6.9.0](https://git.datacontroller.io/dc/dc/compare/v6.8.5...v6.9.0) (2024-05-31)
+
+
+### Bug Fixes
+
+* added colors.scss file, start of a refactor ([110ad9a](https://git.datacontroller.io/dc/dc/commit/110ad9a6e9ed39bd5591ae65c2d0005ba47ca758))
+* added stealFocus directive ([9a79f37](https://git.datacontroller.io/dc/dc/commit/9a79f37bf143a1e05df7407358e2687c678e3e68))
+
+
+### Features
+
+* added app settings service to handle theme persistance, fix: optimised dark mode contrast ([35844e0](https://git.datacontroller.io/dc/dc/commit/35844e0cf1a639553269f2ab0f8666a56ab5cc47))
+* **dark mode:** clarity optimizations ([afa7e38](https://git.datacontroller.io/dc/dc/commit/afa7e380aa3bdabd380c038522b9d73d9a8a3b91))
+* **dark mode:** lineage and metadata ([27907ed](https://git.datacontroller.io/dc/dc/commit/27907ed00fe81f4c752ffe99d2fb029d5c884f0a))
+* **dark mode:** refactoring clarity to enable dark mode, added toggle button ([5564aea](https://git.datacontroller.io/dc/dc/commit/5564aea9c25f8e81ff85afa8352325b9992e4043))
+* **dark mode:** removing custom css rules so clarity can handle dark/light modes. Handsontable css for dark mode ([2c0afd0](https://git.datacontroller.io/dc/dc/commit/2c0afd02684cdf3bda374731b0359665e00ed95d))
+
+## [6.8.5](https://git.datacontroller.io/dc/dc/compare/v6.8.4...v6.8.5) (2024-05-23)
+
+
+### Bug Fixes
+
+* bitemporal load issue [#105](https://git.datacontroller.io/dc/dc/issues/105) ([967698e](https://git.datacontroller.io/dc/dc/commit/967698e4ce1e0abcbc6f0aff8a4be6c512dee93c))
+
+## [6.8.4](https://git.datacontroller.io/dc/dc/compare/v6.8.3...v6.8.4) (2024-05-22)
+
+
+### Bug Fixes
+
+* new approach to fixing [#105](https://git.datacontroller.io/dc/dc/issues/105) ([c11bd9a](https://git.datacontroller.io/dc/dc/commit/c11bd9a2c55e49f10451962cb2e222c21206bce5))
+
+## [6.8.3](https://git.datacontroller.io/dc/dc/compare/v6.8.2...v6.8.3) (2024-05-09)
+
+
+### Bug Fixes
+
+* updating core to increase filename length, closes [#103](https://git.datacontroller.io/dc/dc/issues/103) ([ee58fd5](https://git.datacontroller.io/dc/dc/commit/ee58fd5b4bc0dd3e3f232c4f26bb85b2e7fe2b54))
+
+## [6.8.2](https://git.datacontroller.io/dc/dc/compare/v6.8.1...v6.8.2) (2024-05-03)
+
+
+### Bug Fixes
+
+* dc_request_logs option feature ([93758ef](https://git.datacontroller.io/dc/dc/commit/93758efb275966c181f1ee8b6c752010909a0282))
+* release process ([c0dc919](https://git.datacontroller.io/dc/dc/commit/c0dc9191e3b95ea6f7e5021fc0bdbcab0af4cc64))
+
+## [6.8.1](https://git.datacontroller.io/dc/dc/compare/v6.8.0...v6.8.1) (2024-05-02)
+
+
+### Bug Fixes
+
+* hide approve button when table revertable ([ec0f539](https://git.datacontroller.io/dc/dc/commit/ec0f539a337b176c83a661ff520a6892d47efa02))
+
 # [6.8.0](https://git.datacontroller.io/dc/dc/compare/v6.7.0...v6.8.0) (2024-05-02)
 
 

client/cypress/e2e/editor.cy.ts

@@ -15,9 +15,6 @@ context('editor tests: ', function () {
 
   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')
   })
@@ -118,10 +115,6 @@ context('editor tests: ', function () {
       })
     })
   })
-
-  this.afterEach(() => {
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
 })
 
 const clickOnEdit = (callback?: any) => {

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

@@ -0,0 +1,224 @@
+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_multi_load/'
+
+const library = 'DC996664'
+const mpeXTestTable = 'MPE_X_TEST'
+const mpeTablesTable = 'MPE_TABLES'
+
+context('excel multi load tests: ', function () {
+  this.beforeAll(() => {
+    cy.visit(`${hostUrl}/SASLogon/logout`)
+    cy.loginAndUpdateValidKey(true)
+  })
+
+  this.beforeEach(() => {
+    cy.visit(hostUrl + appLocation)
+
+    visitPage('home/multi-load')
+
+    colorLog(
+      `TEST START ---> ${
+        Cypress.mocha.getRunner().suite.ctx.currentTest.title
+      }`,
+      '#3498DB'
+    )
+  })
+
+  it('1 | Uploads Excel file with multiple sheets, 3 sheets including data, 2 sheets matched with dataset', (done) => {
+    attachExcelFile('multi_load_test_2.xlsx', () => {
+      checkHotUserDatasetTable('hotTableUserDataset', [
+        [library, mpeXTestTable],
+        [library, mpeTablesTable]
+      ], () => {
+        cy.get('#continue-btn').trigger('click').then(() => {
+          checkIfTreeHasTables([`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`], undefined, (includes: boolean) => {
+            if (includes) {
+              // MPE_TABLES sheet does not have data so 1 error image must be shown
+              hasErrorTables(1, (valid: boolean) => {
+                if (valid) done()
+              })
+            }
+          })
+        })
+      })
+    })
+  })
+
+  it('2 | Uploads Excel file with multiple sheets, 2 sheets matched with dataset, 1 matched sheet does not have data', (done) => {
+    attachExcelFile('multi_load_test_1.xlsx', () => {
+      checkHotUserDatasetTable('hotTableUserDataset', [
+        [library, mpeXTestTable],
+        [library, mpeTablesTable]
+      ], () => {
+        cy.get('#continue-btn').trigger('click').then(() => {
+          checkIfTreeHasTables([`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`], `${library}.${mpeXTestTable}`, (includes: boolean) => {
+            if (includes) {
+              cy.get('#hotTable').should('be.visible').then(() => {
+                checkHotUserDatasetTable('hotTable', [
+                  ['No', '1', 'more dummy data'],
+                  ['No', '1', 'It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told:'],
+                  ['No', '1', 'if you can fill the unforgiving minute']
+                ], () => {
+                  submitTables()
+
+                  hasSuccessSubmits(2, (valid: boolean) => {
+                    if (valid) done()
+                  })
+
+                })
+              })
+            }
+          })
+        })
+      })
+    })
+  })
+
+  it('3 | Uploads Excel file with multiple sheets, 1 sheets has 2 tables', (done) => {
+    attachExcelFile('multi_load_test_1.xlsx', () => {
+      checkHotUserDatasetTable('hotTableUserDataset', [
+        [library, mpeXTestTable],
+        [library, mpeTablesTable]
+      ], () => {
+        cy.get('#continue-btn').trigger('click').then(() => {
+          checkIfTreeHasTables([`${library}.${mpeXTestTable}`, `${library}.${mpeTablesTable}`], `${library}.${mpeXTestTable}`, (includes: boolean) => {
+            if (includes) {
+              cy.get('#hotTable').should('be.visible').then(() => {
+                checkHotUserDatasetTable('hotTable', [
+                  ['No', '1', 'more dummy data'],
+                  ['No', '1', 'It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told:'],
+                  ['No', '1', 'if you can fill the unforgiving minute']
+                ], () => {
+                  clickOnTreeNode('DC996664.MPE_TABLES', () => {
+                    cy.wait(1000).then(() => {
+                      cy.get('#hotTable').should('be.visible').then(() => {
+                        checkHotUserDatasetTable('hotTable', [
+                          ['No', 'DC914286', 'MPE_COLUMN_LEVEL_SECURITY'],
+                          ['No', 'DC914286', 'MPE_XLMAP_INFO'],
+                          ['No', 'DC914286', 'MPE_XLMAP_RULES']
+                        ], () => {
+                          submitTables()
+
+                          hasSuccessSubmits(2, (valid: boolean) => {
+                            if (valid) done()
+                          })
+
+                        })
+                      })
+                    })
+                  })
+                })
+              })
+            }
+          })
+        })
+      })
+    })
+  })
+
+  this.afterEach(() => {
+    colorLog(`TEST END -------------`, '#3498DB')
+  })
+})
+
+const attachExcelFile = (excelFilename: string, callback?: any) => {
+  cy.get('#browse-file')
+    .should('exist')
+    .click()
+    .then(() => {
+      cy.get('input[type="file"]#file-upload')
+        .attachFile(`/${fixturePath}/${excelFilename}`)
+        .then(() => {
+          if (callback) callback()
+        })
+    })
+}
+
+const checkHotUserDatasetTable = (hotId: string, dataToContain: any[][], callback?: () => void) => {
+  cy.get(`#${hotId}`, { timeout: longerCommandTimeout })
+  .find('div.ht_master.handsontable')
+  .find('div.wtHolder')
+  .find('div.wtHider')
+  .find('div.wtSpreader')
+  .find('table.htCore')
+  .find('tbody')
+  .then((data) => {
+    cy.wait(2000).then(() => {
+      for (let rowI = 0; rowI < dataToContain.length; rowI++) {
+        for (let colI = 0; colI < dataToContain[rowI].length; colI++) {
+          expect(data[0].children[rowI].children[colI]).to.contain(dataToContain[rowI][colI])
+        }
+      }
+
+      if (callback) callback()
+    })
+  })
+}
+
+const clickOnTreeNode = (clickOnNode: string, callback?: () => void) => {
+  cy.get('.nav-tree clr-tree > clr-tree-node').then((treeNodes: any) => {
+    for (let node of treeNodes) {
+      if (node.innerText.toUpperCase().trim().includes(clickOnNode)) {
+        cy.get(node).trigger('click')
+        if (callback) callback()
+      }
+    }
+  })
+}
+
+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
+    let nodeToClick
+
+    for (let node of treeNodes) {
+      if (!datasets.includes(node.innerText.toUpperCase().trim())) {
+        nodesCorrect = false
+      }
+
+      if (clickOnNode) {
+        if (node.innerText.toUpperCase().trim().includes(clickOnNode)) {
+          nodeToClick = node
+        }
+      }
+    }
+
+    if (nodeToClick) cy.get(nodeToClick).trigger('click')
+
+    if (callback) callback(nodesCorrect)
+  })
+}
+
+const submitTables = () => {
+  cy.get('#submit-all').trigger('click')
+  cy.get('#submit-tables').trigger('click')
+}
+
+const hasSuccessSubmits = (expectedNoOfSubmits: number, callback: (valid: boolean) => void) => {
+  cy.get('.nav-tree clr-tree > clr-tree-node cds-icon[status="success"]').should('be.visible').then(($nodes) => {
+    callback(expectedNoOfSubmits === $nodes.length)
+  })
+}
+
+const hasErrorTables = (expectedNoOfErrors: number, callback: (valid: boolean) => void) => {
+  cy.get('.nav-tree clr-tree > clr-tree-node cds-icon[status="danger"]').should('be.visible').then(($nodes) => {
+    callback(expectedNoOfErrors === $nodes.length)
+  })
+}
+
+const 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/e2e/excel.cy.ts

@@ -17,9 +17,6 @@ context('excel tests: ', function () {
 
   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')
 
@@ -337,7 +334,6 @@ context('excel tests: ', function () {
 
   this.afterEach(() => {
     colorLog(`TEST END -------------`, '#3498DB')
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
   })
 })
 

client/cypress/e2e/filtering.cy.ts

@@ -15,9 +15,7 @@ context('filtering tests: ', function () {
 
   this.beforeEach(() => {
     cy.visit(hostUrl + appLocation, { timeout: longerCommandTimeout })
-    // cy.get('input.username').type(username)
+
-    // cy.get('input.password').type(password)
-    // cy.get('.login-group button').click()
 
     visitPage('home')
   })
@@ -174,10 +172,6 @@ context('filtering tests: ', function () {
   //     })
   //   })
   // })
-
-  this.afterEach(() => {
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
 })
 
 const checkInfoBarIncludes = (text: string, callback: any) => {

client/cypress/e2e/licensing.cy.ts

@@ -23,15 +23,12 @@ interface EditConfigTableCells {
 
 context('licensing 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('home')
   })
@@ -375,9 +372,7 @@ context('licensing tests: ', function () {
     })
   }
 
-  this.afterEach(() => {
+
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
 })
 
 const logout = (callback?: any) => {

client/cypress/e2e/liveness.cy.ts

@@ -18,9 +18,6 @@ context('liveness tests: ', function () {
   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')
   })

client/cypress/e2e/viewbox.cy.ts

@@ -16,7 +16,6 @@ context('editor tests: ', function () {
 
   this.beforeEach(() => {
     cy.visit(hostUrl + appLocation)
-
     cy.wait(2000)
 
     cy.get('body').then(($body) => {
@@ -393,10 +392,6 @@ context('editor tests: ', function () {
   //       }
   //     )
   // })
-
-  this.afterEach(() => {
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
 })
 
 const removeAllColumns = () => {

client/cypress/integration/editor.tests.ts

@@ -15,9 +15,6 @@ context('editor tests: ', function () {
 
   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')
   })
@@ -118,10 +115,6 @@ context('editor tests: ', function () {
       })
     })
   })
-
-  this.afterEach(() => {
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
 })
 
 const clickOnEdit = (callback?: any) => {

client/cypress/integration/excel.tests.ts

@@ -19,9 +19,6 @@ context('excel tests: ', function () {
 
   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')
 
@@ -339,7 +336,6 @@ context('excel tests: ', function () {
 
   this.afterEach(() => {
     colorLog(`TEST END -------------`, '#3498DB')
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
   })
 })
 

client/cypress/integration/filtering.tests.ts

@@ -15,9 +15,6 @@ context('filtering tests: ', function () {
 
   this.beforeEach(() => {
     cy.visit(hostUrl + appLocation, { timeout: longerCommandTimeout })
-    // cy.get('input.username').type(username)
-    // cy.get('input.password').type(password)
-    // cy.get('.login-group button').click()
 
     visitPage('home')
   })
@@ -173,10 +170,6 @@ context('filtering tests: ', function () {
       })
     })
   })
-
-  this.afterEach(() => {
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
 })
 
 const checkInfoBarIncludes = (text: string, callback: any) => {

client/cypress/integration/licensing.tests.ts

@@ -23,15 +23,11 @@ interface EditConfigTableCells {
 
 context('licensing 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('home')
   })
@@ -374,10 +370,6 @@ context('licensing tests: ', function () {
       })
     })
   }
-
-  this.afterEach(() => {
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
 })
 
 const logout = (callback?: any) => {

client/cypress/integration/liveness.tests.ts

@@ -18,10 +18,6 @@ context('liveness tests: ', function () {
   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')
   })
 

client/cypress/integration/viewbox.tests.ts

@@ -17,7 +17,6 @@ context('editor tests: ', function () {
 
   this.beforeEach(() => {
     cy.visit(hostUrl + appLocation)
-
     cy.wait(2000)
 
     cy.get('body').then(($body) => {
@@ -386,10 +385,6 @@ context('editor tests: ', function () {
       }
     )
   })
-
-  this.afterEach(() => {
-    // cy.visit(`${hostUrl}/SASLogon/logout`)
-  })
 })
 
 const checkColumns = (columns: string[], callback: () => void) => {

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@13.1.0;handsontable@13.1.0;hyperformula@2.7.0;jackspeak@2.2.0;path-scurry@1.7.0'
+          '@cds/city@1.1.0;@handsontable/angular@14.4.0;handsontable@14.4.0;hyperformula@2.7.0;jackspeak@2.2.0;path-scurry@1.7.0'
       },
       (error, json) => {
         if (error) {

client/package.json

@@ -48,9 +48,10 @@
     "@clr/angular": "^17.0.1",
     "@clr/icons": "^13.0.2",
     "@clr/ui": "^17.0.1",
-    "@handsontable/angular": "^13.1.0",
+    "@handsontable/angular": "^14.3.0",
     "@sasjs/adapter": "4.10.2",
     "@sasjs/utils": "^3.4.0",
+    "@sheet/crypto": "file:libraries/sheet-crypto.tgz",
     "@types/d3-graphviz": "^2.6.7",
     "@types/text-encoding": "0.0.35",
     "base64-arraybuffer": "^0.2.0",
@@ -59,7 +60,7 @@
     "crypto-js": "^4.2.0",
     "d3-graphviz": "^5.0.2",
     "fs-extra": "^7.0.1",
-    "handsontable": "^13.1.0",
+    "handsontable": "^14.3.0",
     "https-browserify": "1.0.0",
     "hyperformula": "^2.5.0",
     "iconv-lite": "^0.5.0",
@@ -78,6 +79,7 @@
     "text-encoding": "^0.7.0",
     "tslib": "^2.3.0",
     "vm": "^0.1.0",
+    "webpack": "^5.91.0",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {

client/src/app/_globals.ts

@@ -43,6 +43,10 @@ export interface XLMapListItem {
   targetDS: string
 }
 
+export interface HandsontableStaticConfig {
+  darkTableHeaderClass: string
+}
+
 /**
  * Cached filtering values across whole app (editor, viewer, viewboxes)
  * Cached lineage libraries, tables
@@ -62,6 +66,7 @@ export const globals: {
   viyaApi: any
   usernav: any
   operators: any
+  handsontable: HandsontableStaticConfig
   [key: string]: any
 } = {
   rootParam: <string>'',
@@ -140,5 +145,8 @@ export const globals: {
   operators: {
     numOperators: ['=', '<', '>', '<=', '>=', 'BETWEEN', 'IN', 'NOT IN', 'NE'],
     charOperators: ['=', '<', '>', '<=', '>=', 'CONTAINS', 'IN', 'NOT IN', 'NE']
+  },
+  handsontable: {
+    darkTableHeaderClass: 'darkTH'
   }
 }

client/src/app/app.component.html

@@ -245,6 +245,7 @@
 
   <app-alerts *ngIf="!errTop"></app-alerts>
   <app-requests-modal [(opened)]="requestsModal"></app-requests-modal>
+  <app-excel-password-modal></app-excel-password-modal>
 
   <!-- <app-terms *ngIf="showRegistration"></app-terms> -->
 

client/src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import '../colors.scss';
+
 // Copyright (c) 2016 VMware, Inc. All Rights Reserved.
 // This software is released under MIT license.
 // The full license information can be found in LICENSE in the root directory of this project.
@@ -6,7 +8,7 @@ app-requests-modal {
 }
 
 header.app-header {
-  background: #314351 !important;
+  background: $headerBackground !important;
   color: #fff;
 }
 
@@ -42,7 +44,7 @@ header.app-header {
     align-items: center;
     padding: 30px;
     z-index: 110;
-    background: #314351;
+    background: $headerBackground;
 
     .expired-notice {
       color: #e0e0e0;
@@ -106,15 +108,6 @@ header {
   font-size: 12px;
 }
 
-.btn.btn-success {
-  border-color: #62a420;
-  background-color: #16a57a!important;
-  color: #fff;
-}
-.btn.btn-success:hover {
-  background-color: #2add39;
-  color: #fff;
-}
 
 .toggle-switch input[type=checkbox]:checked+label:before {
   border-color: #61717D;
@@ -142,59 +135,50 @@ header {
   color: #fff;
 }
 
-@media screen and (max-width: 768px) {
-  .navBarResp {
-    display: flex;
-    justify-content: flex-start;
-    background: #495A67;
-    color: #fff;
-  }
-
-  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
-      padding: 0 .5rem 0 1rem;
-      width: 100%;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      border-radius: .125rem 0 0 .125rem;
-      color: #95c84b;
-  }
-
-
-
-  .card-block, .card-footer {
-    padding: 10px 0px 0px 0px;
-  }
-
-  .main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
-    padding: 0rem 0rem 0rem 0rem;
-  }
-
-}
 ::ng-deep {
   .htInvalid {
-  background: black!important;
+    background: black!important;
-}
+  }
 
   @media screen and (max-width:480px) {
-  h2 {
+    h2 {
-    font-size: .7rem!important;
+      font-size: .7rem!important;
-
+    }
+    h3 {
+      font-size: .7rem;
+    }
   }
-  h3 {
-    font-size: .7rem;
-  }
-}
 
   .nav-link {
     padding: 0rem 1rem 0rem 1rem;
   }
 
-  .btn-primary .btn, .btn.btn-primary {
+  body[cds-theme="light"] {
-    border-color: #314351;
+    .btn-primary .btn, .btn.btn-primary {
-    background-color: #314351;
+      border-color: $headerBackground;
-    color: #fff;
+      background-color: $headerBackground;
+      color: #fff;
+    }
   }
+
+  body[cds-theme="dark"] {
+    .btn-primary .btn, .btn.btn-primary {
+      border-color: #5e7382;
+      background-color: #5e7382;
+      color: #fff;
+
+      clr-icon, cds-icon {
+        color: #fff
+      }
+    }
+  }
+
+  .btn-primary .btn, .btn.btn-primary {
+    &:disabled {
+      opacity: 0.65;
+    }
+  }
+
   .btn {
     cursor: pointer;
     display: inline-block;
@@ -215,36 +199,32 @@ header {
     font-weight: 500;
     height: 1.5rem;
     padding: 0 .5rem;
-    border-color: #314351;
-    background-color: transparent;
-    color: #314351;
-  }
-
-  .btn.btn-outline {
-    border-color: #314351;
-    background-color: transparent;
-    color: #314351;
   }
 
   .btn.btn-outline:hover {
-    border-color: #314351;
+    border-color: $headerBackground;
     background-color: #495A67;
     color: #fff;
   }
 
-  .btn.btn-success-outline:hover {
-    background-color: #5ea71f;
-    color: #fff7f7;
-    border-color: #9a9696;
-}
-// .btn.btn-success-outline {
-//     border-color: #266900;
-//     background-color: transparent;
-//     color: #318700;
-// }
-  // .wtSpreader {
 
-  // }
+  body[cds-theme="dark"] {
+    .btn.btn-icon.btn-dimmed {
+      color: #7295ae;
+    }
+  }
+
+  body[cds-theme="light"] {
+    .btn.btn-icon.btn-dimmed {
+      color: $headerBackground;
+    }
+
+    .btn.btn-outline {
+      border-color: $headerBackground;
+      background-color: transparent;
+      color: $headerBackground;
+    }
+  }
 
   .htMobileEditorContainer .inputs textarea {
     font-size: 13pt;
@@ -277,65 +257,68 @@ header {
     width: 350px;
 }
 
-  .handsontable  {
-  background-color: #ffffff;
-  // border: 1px solid #ccc;
-  border-radius: 3px;
-  }
-  .handsontable th {
-  background-color: #fafafa;
-  }
 
   /* Left and right */
-  .ht_clone_left th {
-    border-right: 1px solid #ccc;
-    border-left: 1px solid #ccc;
-  }
 
   /* Column headers */
-  .ht_clone_top th {
+
-    border-top: 1px solid #ccc;
+  body[cds-theme="light"] {
-    border-right: 1px solid #ccc;
+    .wtBorder {
-    border-bottom: 1px solid #ccc;
+      background-color: #495A67!important;
+    }
+
+    .ht_master tr:nth-of-type(odd) > td {
+      filter: brightness(0.95);
+    }
   }
 
-  .ht_clone_top_left_corner th {
+  $darkBorderColor: #697c85;
-    border-right: 1px solid #ccc;
-  }
 
-  .ht_master tr:nth-of-type(odd) > td {
+  body[cds-theme="dark"] {
-    background-color: #f3f3f3;
+    .ht_master tr:nth-of-type(odd) > td {
-    border: 1px solid rgb(197, 197, 197);
+      filter: brightness(1.2);
-    border-bottom: 1px solid rgb(236, 235, 235);
+    }
-    // padding: 1px 1px;
-  }
 
-  .ht_master tr:nth-of-type(even) > td {
+    .ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
-    background-color: white;
+      background-color: #2d4048;
-    border: 1px solid rgb(197, 197, 197);
+      border-color: $darkBorderColor;
-    border-bottom: 1px solid rgb(236, 235, 235);
+    }
-    // padding: 1px 1px;
-  }
 
-  .wtBorder {
+    .handsontable td {
-    background-color: #495A67!important;
+      // border-right: 1px solid #697c85;
+      // border-bottom: 1px solid #697c85;
+      border-color: $darkBorderColor;
+    }
+
+    .handsontable tr:first-child th, .handsontable tr:first-child td {
+      border-color: $darkBorderColor;
+    }
+
+    .handsontable .handsontable.ht_clone_top .wtHider {
+      border-color: $darkBorderColor;
+    }
+
+    .handsontable .changeType {
+      background-color: #3c5662;
+      border-color: $darkBorderColor;
+    }
+
+    .handsontableInput {
+      background-color: #708b98;
+    }
   }
 
   .handsontable .handsontable.ht_clone_top .wtHider {
     padding: 0 0 0px 0!important;
     margin: 0px;
     border-bottom: 3px solid #d6d3d3;
-}
-
-  .content-container {
-    background: #F5F6FF;
   }
 
-  .card {
+  body[cds-theme="light"] {
-    box-shadow: 0 0.125rem 0 0 #d7d7d7;
+    .content-container {
-    border-radius: .0rem;
+      // background: red;
-    border: 1px solid transparent;
+      background: #F5F6FF;
-    // min-height: calc(100vh - 150px);
+    }
   }
 
   .datagrid-compact, .datagrid-history{
@@ -343,8 +326,6 @@ header {
       border-collapse: separate;
       border: 1px solid transparent;
       border-radius: .125rem;
-      background-color: #fff;
-      color: #565656;
       margin: 0;
       margin-top: 1rem;
       max-width: 100%;
@@ -366,8 +347,8 @@ header {
     }
     .datagrid-footer {
       position: absolute;
-      right: 15px;
+      right: 30px;
-      top: 2px;
+      top: 1px;
     }
     .datagrid .datagrid-head {
       background-color: #fff;
@@ -387,7 +368,6 @@ header {
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
-    background: #f5f6ff;
     padding: .5rem 0;
     border: 1px solid #ccc;
     box-shadow: 0 1px 0.125rem hsla(0,0%,45%,.25);
@@ -402,8 +382,6 @@ header {
     border-collapse: separate;
     border: 1px solid transparent;
     border-radius: 0px;
-    background-color: #fff;
-    color: #565656;
     margin: 0;
     margin-top: 1rem;
     max-width: 100%;
@@ -414,7 +392,6 @@ header {
     font-size: .45833rem;
     font-weight: 600;
     letter-spacing: .03em;
-    background-color: #fff;
     vertical-align: bottom;
     border-bottom: 1px solid #ccc;
     text-transform: uppercase;
@@ -437,4 +414,34 @@ header {
     max-width: 400px;
     width: 100%;
   }
+}
+
+@media screen and (max-width: 768px) {
+  .navBarResp {
+    display: flex;
+    justify-content: flex-start;
+    background: #495A67;
+    color: #fff;
+  }
+
+  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
+      padding: 0 .5rem 0 1rem;
+      width: 100%;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      border-radius: .125rem 0 0 .125rem;
+      color: #95c84b;
+  }
+
+
+
+  .card-block, .card-footer {
+    padding: 10px 0px 0px 0px;
+  }
+
+  .main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
+    padding: 0rem 0rem 0rem 0rem;
+  }
+
 }

client/src/app/app.component.ts

@@ -13,6 +13,23 @@ import { InfoModal } from './models/InfoModal'
 import { DcAdapterSettings } from './models/DcAdapterSettings'
 import { AppStoreService } from './services/app-store.service'
 import { LicenceService } from './services/licence.service'
+import '@cds/core/icon/register.js'
+import {
+  ClarityIcons,
+  exclamationTriangleIcon,
+  moonIcon,
+  sunIcon,
+  tableIcon,
+  trashIcon
+} from '@cds/core/icon'
+
+ClarityIcons.addIcons(
+  moonIcon,
+  sunIcon,
+  exclamationTriangleIcon,
+  tableIcon,
+  trashIcon
+)
 
 @Component({
   selector: 'my-app',

client/src/app/app.module.ts

@@ -20,10 +20,10 @@ import { UsernavRouteComponent } from './routes/usernav-route/usernav-route.comp
 import { AppService } from './services/app.service'
 import { InfoModalComponent } from './shared/abort-modal/info-modal.component'
 import { RequestsModalComponent } from './shared/requests-modal/requests-modal.component'
-import { HomeModule } from './home/home.module'
 import { DirectivesModule } from './directives/directives.module'
 import { ViyaApiExplorerComponent } from './viya-api-explorer/viya-api-explorer.component'
 import { NgxJsonViewerModule } from 'ngx-json-viewer'
+import { AppSettingsService } from './services/app-settings.service'
 
 @NgModule({
   declarations: [
@@ -50,7 +50,7 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer'
     DirectivesModule,
     NgxJsonViewerModule
   ],
-  providers: [AppService, SasStoreService, LicensingGuard],
+  providers: [AppService, SasStoreService, LicensingGuard, AppSettingsService],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

client/src/app/directives/directives.module.ts

@@ -4,20 +4,23 @@ import { NgVarDirective } from './ng-var.directive'
 import { DragNdropDirective } from './drag-ndrop.directive'
 import { FileDropDirective } from './file-drop.directive'
 import { FileSelectDirective } from './file-select.directive'
+import { StealFocusDirective } from './steal-focus.directive'
 
 @NgModule({
   declarations: [
     NgVarDirective,
     DragNdropDirective,
     FileDropDirective,
-    FileSelectDirective
+    FileSelectDirective,
+    StealFocusDirective
   ],
   imports: [CommonModule],
   exports: [
     NgVarDirective,
     DragNdropDirective,
     FileDropDirective,
-    FileSelectDirective
+    FileSelectDirective,
+    StealFocusDirective
   ]
 })
 export class DirectivesModule {}

client/src/app/directives/steal-focus.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, HostListener } from '@angular/core'
+
+@Directive({
+  selector: '[appStealFocus]'
+})
+export class StealFocusDirective {
+  constructor() {}
+
+  /**
+   * For some reason newest version of Clarity v17.0.1 is stealing focus when
+   * clicking on the input inside of the clr-tree-view
+   * This is workaround
+   */
+  @HostListener('click', ['$event']) onClick(event: any) {
+    event.target.focus()
+  }
+}

client/src/app/editor/components/edit-record/edit-record.component.html

@@ -277,7 +277,7 @@
     <div>
       <button
         type="button"
-        class="btn btn-outline focusable"
+        class="btn btn-outline focusable mr-5i"
         (click)="currentRecord!.noLinkOption = false; closeRecordEdit()"
       >
         Cancel

client/src/app/editor/components/edit-record/edit-record.component.scss

@@ -38,7 +38,6 @@
       app-soft-select {
         display: block;
         width: 224px;
-        background: #fff;
         border: 1px solid #999;
         color: #000;
         padding: calc(.25rem + 2px) .5rem;
@@ -49,7 +48,6 @@
         input {
           width: 100%;
           border: 0;
-          background-color: #fff;
 
           &:focus {
             background: none;
@@ -132,7 +130,6 @@
 
     clr-input-container {
       width: 224px;
-      background: #fff;
       border: 1px solid #999;
       color: #000;
       padding: calc(.25rem + 2px) .5rem;

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

@@ -3,7 +3,7 @@
     appFileDrop
     (fileOver)="fileOverBase($event)"
     [uploader]="uploader"
-    (fileDrop)="getFileDesc($event, true)"
+    (fileDrop)="attachFile($event, true)"
     [clrModalSize]="'xl'"
     [clrModalStaticBackdrop]="false"
     [clrModalClosable]="excelUploadState === 'Validating-DQ'"
@@ -81,7 +81,7 @@
               type="file"
               appFileSelect
               [uploader]="uploader"
-              (change)="getFileDesc($event)"
+              (change)="attachFile($event)"
             />
           </div>
 
@@ -92,7 +92,7 @@
             <button
               [disabled]="true"
               class="btnView btn btn-sm btn-success profile-buttons w-100"
-              (click)="getFile()"
+              (click)="uploadParsedFiles()"
             >
               Upload
             </button>
@@ -164,19 +164,28 @@
       <div
         class="card-header clr-row buttonBar headerBar clr-flex-md-row clr-justify-content-center clr-justify-content-lg-end"
       >
-        <div *ngIf="tableTrue" class="clr-col-12 clr-col-lg-4 backBtn">
+        <div
-          <span class="btn btn-sm" [routerLink]="['/home']">
+          *ngIf="tableTrue"
-            <clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
+          class="clr-col-12 clr-col-md-3 clr-col-lg-4 backBtn"
-            table selection
+        >
+          <span
+            class="btn icon-collapse btn-sm btn-icon btn-dimmed"
+            [routerLink]="['/home']"
+          >
+            <clr-icon shape="caret" dir="left" size="20"></clr-icon>
+            <span class="text">Back to table selection</span>
           </span>
-          <span (click)="viewboxManager()" class="btn btn-sm viewbox-open">
+          <span
+            (click)="viewboxManager()"
+            class="btn icon-collapse btn-sm btn-icon btn-dimmed viewbox-open"
+          >
             <clr-icon shape="view-cards" size="20"></clr-icon>
-            Viewboxes
+            <span class="text">Viewboxes</span>
           </span>
         </div>
 
         <div
-          class="clr-col-12 clr-col-lg-4 d-flex flex-column align-items-center"
+          class="clr-col-12 clr-col-md-5 clr-col-lg-4 d-flex flex-column align-items-center"
           [class.clr-col-lg-12]="!tableTrue"
         >
           <h4
@@ -231,34 +240,37 @@
             </ng-container>
           </h4>
         </div>
-        <div *ngIf="tableTrue" class="clr-col-12 clr-col-lg-4 btnCtrl">
+        <div
+          *ngIf="tableTrue"
+          class="clr-col-12 clr-col-md-4 clr-col-lg-4 btnCtrl"
+        >
           <ng-container *ngIf="hotTable.readOnly && !uploadPreview">
             <button
               type="button"
-              class="btnView btn btn-sm btn-icon btn-block"
+              class="btnView btn icon-collapse btn-sm btn-icon btn-block btn-dimmed"
               (click)="openQb()"
             >
               <clr-icon shape="filter"></clr-icon>
-              <span>Filter</span>
+              <span class="text">Filter</span>
             </button>
 
             <button
               type="button"
-              class="btn btn-sm btn-primary btn-block"
+              class="btn icon-collapse btn-sm btn-primary btn-block"
               (click)="editTable()"
             >
               <clr-icon shape="note"></clr-icon>
-              <span>Edit</span>
+              <span class="text">Edit</span>
             </button>
 
             <button
               *ngIf="!columnLevelSecurityFlag"
               (click)="onShowUploadModal()"
               type="button"
-              class="btn btn-sm btn-success btn-block mr-0"
+              class="btn icon-collapse btn-sm btn-success btn-block mr-0"
             >
               <clr-icon shape="upload"></clr-icon>
-              <span>Upload</span>
+              <span class="text">Upload</span>
             </button>
           </ng-container>
 
@@ -362,8 +374,8 @@
             <ng-container *ngIf="!getdataError">
               <span class="spinner"> Loading... </span>
 
-              <div>
+              <div class="mt-10">
-                <h3>Loading table</h3>
+                <p cds-text="section">Loading table</p>
               </div>
             </ng-container>
 
@@ -372,8 +384,8 @@
                 <clr-icon shape="error-standard" class="error-icon"></clr-icon>
               </span>
 
-              <div>
+              <div class="mt-10">
-                <h3>Loading table error</h3>
+                <p cds-text="section">Loading table error</p>
               </div>
             </ng-container>
           </div>
@@ -398,6 +410,7 @@
               hotId="hotInstance"
               id="hotTable"
               class="edit-hot"
+              className="htDark"
               [class.hidden]="hotTable.hidden"
               [licenseKey]="hotTable.licenseKey"
             >
@@ -486,11 +499,15 @@
                     support&#64;datacontroller.io</span
                   >
                   <div *ngIf="tableTrue" class="clr-offset-md-2 clr-col-md-8">
-                    <div class="form-group">
+                    <div class="text-area-full-width">
-                      <label for="formFields_8">Message</label>
+                      <label for="formFields_8" class="mb-5 d-block"
+                        >Message</label
+                      >
                       <textarea
+                        clrTextarea
                         [(ngModel)]="message"
                         [disabled]="!validationDone"
+                        tabindex="0"
                         [value]="
                           !validationDone
                             ? 'Please wait while we validate ' +
@@ -498,10 +515,9 @@
                               ' cells.'
                             : ''
                         "
-                        class="w-100"
+                        class="submit-reason"
                         type="text"
                         id="formFields_8"
-                        rows="5"
                       ></textarea>
                     </div>
                     <!-- TODO:approvers list -->
@@ -520,6 +536,7 @@
                     [disabled]="!validationDone"
                     type="submit"
                     class="btn btn-sm btn-success-outline m-0"
+                    tabindex="0"
                     (click)="saveTable(hotTable.data)"
                   >
                     Submit
@@ -528,6 +545,7 @@
                     id="cancelSubmitBtn"
                     type="button"
                     class="btn btn-sm btn-outline"
+                    tabindex="0"
                     (click)="cancelSubmit(); submit = false; validationDone = 0"
                   >
                     Cancel
@@ -558,7 +576,7 @@
               <button
                 type="button"
                 class="btn btn-sm btn-primary"
-                (click)="getFile(); submitLimitNotice = false"
+                (click)="uploadParsedFiles(); submitLimitNotice = false"
               >
                 Submit
               </button>

client/src/app/editor/editor.component.scss

@@ -21,12 +21,12 @@ hot-table {
 
     .handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
       &.primaryKeyHeaderStyle {
-        background: #306b00b0;
+        background-color: #306b00b0 !important;
       }
     }
 
     .primaryKeyHeaderStyle {
-      background: #306b006e;
+      background-color: #306b006e !important;
     }
 
     th.readonlyCell {
@@ -41,6 +41,12 @@ hot-table {
   }
 }
 
+.submit-reason {
+  min-height: 120px;
+  max-height: 120px;
+  height: 120px;
+}
+
 .infoBar {
   margin-top:14px;
   background: #495967;
@@ -80,8 +86,7 @@ hot-table {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #ffffff;
+  background: var(--clr-vertical-nav-bg-color);
-  background: #f5f6fe;
 }
 
 .error-icon {
@@ -196,6 +201,7 @@ hot-table {
 
   display: flex;
   justify-content: center;
+  align-items: flex-start;
 
   margin: 1px;
 
@@ -206,7 +212,10 @@ hot-table {
   span {
     font-size: 20px;
     margin-top: 20px;
-    color: #fff;
+    padding: 10px;
+    background: #dbdbdb;
+    border-radius: 5px;
+    color: black;
   }
 }
 
@@ -218,6 +227,16 @@ hot-table {
   font-size: inherit !important;
 }
 
+// When width is smaller remove the text from the buttons
+// keep only the icons
+@media (max-width: 992px) {
+  .icon-collapse {
+    .text {
+      display: none;
+    }
+  }
+}
+
 // FIXME
 // Let's leave it here for a reference if there
 // is an issue with viewboxes/filter modal overlaying

client/src/app/editor/utils/renderers.utils.ts

@@ -11,9 +11,11 @@ export const errorRenderer = (
   value: any,
   cellProperties: any
 ) => {
+  addDarkClass(td)
+
   td.innerHTML = `${
     value ? value.toString() : ''
-  } <clr-icon shape="exclamation-circle" status="warning"></clr-icon>`
+  } <cds-icon shape="exclamation-triangle" status="warning"></cds-icon>`
 
   return td
 }
@@ -31,6 +33,8 @@ export const noSpinnerRenderer = (
   value: any,
   cellProperties: any
 ) => {
+  addDarkClass(td)
+
   td.innerHTML = value ? value : ''
 
   return td
@@ -50,9 +54,20 @@ export const spinnerRenderer = (
   value: any,
   cellProperties: any
 ) => {
+  addDarkClass(td)
+
   td.innerHTML = `${
     value ? value.toString() : ''
   } <span class="spinner spinner-sm vertical-align-middle"></span>`
 
   return td
 }
+
+/**
+ * Adds a htDark class to a TD element if not existing
+ */
+const addDarkClass = (td: any) => {
+  if (!td.classList.contains('htDark')) {
+    td.classList.add('htDark')
+  }
+}

client/src/app/group/group.component.html

@@ -3,6 +3,7 @@
     <clr-tree-node *ngIf="groups" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Filter by Groups"
@@ -27,7 +28,7 @@
       <clr-tree-node
         (click)="groupOnClick(group)"
         *ngIf="!group['hidden']"
-        [class.table-active]="group.GROUPURI === groupUri"
+        [class.active]="group.GROUPURI === groupUri"
       >
         <p class="m-0 cursor-pointer list-padding">
           <clr-icon shape="users"></clr-icon>

client/src/app/group/group.component.scss

@@ -1,26 +1,63 @@
+@import '../../colors.scss';
+
+::ng-deep body[cds-theme="dark"] {
+  .group-info {
+      background-color: $headerBackground;
+      border-color: $headerBackground;
+  }
+
+  .group-data {
+      background-color: $headerBackground;
+      border-color: $headerBackground;
+  }
+
+  .member-table tbody{
+    tr:hover{
+        background-color: #29404b;
+    }
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  .group-info{
+      background-color: #f9f9f9;
+      border-color: #a7a7a7;
+      box-shadow: 0px 2px 5px #dad7d7;
+  }
+
+  .group-data {
+      background-color: #f9f9f9;
+      border-color: #a7a7a7;
+      box-shadow: 0px 2px 5px #dad7d7;
+  }
+
+  .member-table tbody{
+    tr:hover{
+          background-color: #e6e6e6;
+      }
+  }
+}
+
 .sidebar-height{
     height: 100%;
 }
 .group-info-text{
-    display: inline;    
+    display: inline;
     font-size: 20px;
 }
 .group-info{
-    background-color: #f9f9f9;
+    border: 1px solid;
-    border: 1px solid #a7a7a7;
     border-radius: 3px;
-    box-shadow: 0px 2px 5px #dad7d7;
 }
 .group-info td{
     text-align: center;
 }
 
 .group-data{
-  background-color: #f9f9f9;
+  border: 1px solid;
-  border: 1px solid #a7a7a7;
   border-radius: 3px;
-  box-shadow: 0px 2px 5px #dad7d7;
 }
+
 .group-data{
   min-height: auto;
   h3, h5{
@@ -28,15 +65,11 @@
 }
 
 .member-table{
-  background-color: #f9f9f9;
   width: 100%;
 }
-.member-table thead{
+
-  background-color: #dadada;
-}
 .member-table tbody{
   tr:hover{
-      background-color: #e6e6e6;
       cursor: pointer;
   }
 }

client/src/app/home/home-routing.module.ts

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'
 import { HomeRouteComponent } from '../routes/home-route/home-route.component'
 import { HomeComponent } from './home.component'
 import { XLMapModule } from '../xlmap/xlmap.module'
+import { MultiDatasetModule } from '../multi-dataset/multi-dataset.module'
 
 const routes: Routes = [
   {
@@ -11,7 +12,8 @@ const routes: Routes = [
     children: [
       { path: '', pathMatch: 'full', redirectTo: 'tables' },
       { path: 'tables', component: HomeComponent },
-      { path: 'files', loadChildren: () => XLMapModule }
+      { path: 'excel-maps', loadChildren: () => XLMapModule },
+      { path: 'multi-load', loadChildren: () => MultiDatasetModule }
     ]
   }
 ]

client/src/app/home/home.component.html

@@ -4,6 +4,7 @@
       <div class="tree-search-wrapper">
         <input
           clrInput
+          appStealFocus
           #searchLibTreeInput
           placeholder="Libraries"
           name="input"
@@ -46,6 +47,7 @@
         <clr-tree-node *ngIf="library['tables']" class="search-node">
           <div class="tree-search-wrapper">
             <input
+              appStealFocus
               clrInput
               #searchTreeInput
               placeholder="Tables"
@@ -85,7 +87,7 @@
               (click)="!tableLocked ? onTableClick(libTable, library) : ''"
               class="clr-treenode-link"
               [class.dc-locked-control]="tableLocked"
-              [class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
+              [class.active]="libTabActive(library.LIBRARYREF, libTable)"
             >
               <ng-container [ngSwitch]="libTable.includes('-FC')">
                 <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
@@ -126,12 +128,20 @@
         size="60"
         class="is-info icon-dc-fill"
       ></clr-icon>
-      <h3 *ngIf="treeNodeLibraries?.length! > 0" class="text-center color-gray">
+      <p
+        *ngIf="treeNodeLibraries?.length! > 0"
+        class="text-center color-gray mt-10"
+        cds-text="section"
+      >
         Please select a table
-      </h3>
+      </p>
-      <h3 *ngIf="treeNodeLibraries?.length! < 1" class="text-center color-gray">
+      <p
+        *ngIf="treeNodeLibraries?.length! < 1"
+        class="text-center color-gray mt-10"
+        cds-text="section"
+      >
         No Editable Tables Configured
-      </h3>
+      </p>
     </div>
   </div>
 </div>

client/src/app/lineage/lineage.component.html

@@ -3,6 +3,7 @@
     <clr-tree-node *ngIf="libraryList" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Libraries"
@@ -42,6 +43,7 @@
         <clr-tree-node *ngIf="library['tables']" class="search-node">
           <div class="tree-search-wrapper">
             <input
+              appStealFocus
               clrInput
               #searchTreeInput
               placeholder="Tables"
@@ -85,6 +87,7 @@
           <clr-tree-node *ngIf="libTable['columns']" class="search-node">
             <div class="tree-search-wrapper">
               <input
+                appStealFocus
                 clrInput
                 #searchTreeInput
                 placeholder="Columns"
@@ -138,7 +141,9 @@
         size="60"
         class="is-info icon-dc-fill"
       ></clr-icon>
-      <h3 class="text-center color-gray">Please select a column or table</h3>
+      <p class="text-center color-gray mt-10" cds-text="section">
+        Please select a column or table
+      </p>
     </div>
 
     <ng-container *ngIf="column || table">
@@ -180,13 +185,13 @@
             <button
               (click)="limitDotDepth = true"
               type="button"
-              class="btn btn-outline"
+              class="btn btn-outline mr-5"
             >
               Limit depth
             </button>
 
             <!-- <button class="btn btn-outline" (click)='showSvg()'> Open in New Tab </button> -->
-            <div class="btn-group d-block">
+            <div class="btn-group direction d-block">
               <div
                 class="radio btn"
                 (click)="

client/src/app/lineage/lineage.component.scss

@@ -1,6 +1,8 @@
+@import '../../colors.scss';
+
 .toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: #314351;
+    border-color: $headerBackground;
-    background-color: #314351!important;
+    background-color: $headerBackground !important;
     transition: .15s ease-in;
     transition-property: border-color,background-color;
 }
@@ -41,6 +43,10 @@ clr-tree-node button {
     white-space: nowrap;
 }
 
+.btn-group.direction {
+    margin-left: var(--cds-global-space-6);
+}
+
 .graph-render-spinner {
     position: absolute;
     top: 0;

client/src/app/metadata/metadata.component.html

@@ -22,6 +22,7 @@
     <clr-tree-node *ngIf="metaDataList" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="search SAS Types"
@@ -72,7 +73,9 @@
         size="60"
         class="is-info icon-dc-fill"
       ></clr-icon>
-      <h3 class="text-center color-gray">Please select a type</h3>
+      <p class="text-center color-gray mt-10" cds-text="section">
+        Please select a type
+      </p>
     </div>
 
     <div class="loadingSpinner" *ngIf="loading">
@@ -123,12 +126,18 @@
                         [class.object-header]="!entry.count"
                         class="full-width"
                       >
-                        <clr-icon
+                        <div>
-                          *ngIf="!entry.count"
+                          <clr-icon
-                          shape="rack-server"
+                            *ngIf="!entry.count"
-                        ></clr-icon>
+                            shape="rack-server"
-                        <clr-icon *ngIf="entry.count" shape="block"></clr-icon>
+                          ></clr-icon>
-                        {{ entry.display }}
+                          <clr-icon
+                            *ngIf="entry.count"
+                            shape="block"
+                          ></clr-icon>
+                          {{ entry.display }}
+                        </div>
+
                         <p class="float-right object-uri" *ngIf="!entry.count">
                           {{ entry.URI }}
                         </p>
@@ -163,9 +172,15 @@
                 [clrExpandable]="true"
               >
                 <div [class.object-header]="!entry.count" class="full-width">
-                  <clr-icon *ngIf="!entry.count" shape="rack-server"></clr-icon>
+                  <div>
-                  <clr-icon *ngIf="entry.count" shape="block"></clr-icon>
+                    <clr-icon
-                  {{ entry.display }}
+                      *ngIf="!entry.count"
+                      shape="rack-server"
+                    ></clr-icon>
+                    <clr-icon *ngIf="entry.count" shape="block"></clr-icon>
+                    {{ entry.display }}
+                  </div>
+
                   <p class="float-right object-uri" *ngIf="!entry.count">
                     {{ entry.URI }}
                   </p>

client/src/app/metadata/metadata.component.scss

@@ -1,14 +1,27 @@
+::ng-deep body[cds-theme="dark"] {
+  .object-header:hover {
+    background-color: #405560;
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  .objects-col {
+    background: white;
+  }
+
+  .object-header:hover {
+    background-color: #d8e3e9;
+  }
+}
 
 .objects-col{
   height: 75vh;
   overflow: scroll;
   border: 1px solid #cccccc;
-  background: white;
   border-radius: 4px;
 }
 
 .cols-head {
-  background: #fafafa;
   border: 1px solid #cccccc;
   padding: 10px;
   display: flex;
@@ -40,11 +53,13 @@
   margin-top: 5px;
 }
 .object-header{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding-left: 3px;
   padding-right: 3px;
 }
 .object-header:hover{
-  background-color: #d8e3e9;
   border-radius: 3px;
 }
 .datagrid-host{

client/src/app/models/AppSettings.ts

@@ -0,0 +1,9 @@
+export interface AppSettings {
+  persistSelectedTheme: boolean
+  selectedTheme: AppThemes
+}
+
+export enum AppThemes {
+  light = 'light',
+  dark = 'dark'
+}

client/src/app/models/FileUploadEncoding.ts

@@ -0,0 +1 @@
+export type FileUploadEncoding = 'UTF-8' | 'WLATIN1'

client/src/app/models/SheetInfo.ts

@@ -7,4 +7,5 @@ export default interface SheetInfo {
   missingHeaders: string[]
   rangeStartRow: number
   rangeStartCol: number
+  rangeAddress?: string
 }

client/src/app/models/sas/editors-stagedata.model.ts

@@ -0,0 +1,34 @@
+import { BaseSASResponse } from './common/BaseSASResponse'
+
+export interface EditorsStageDataSASResponse extends BaseSASResponse {
+  SYSDATE: string
+  SYSTIME: string
+  sasparams: Sasparam[]
+  _DEBUG: string
+  _PROGRAM: string
+  AUTOEXEC: string
+  MF_GETUSER: string
+  SYSCC: string
+  SYSENCODING: string
+  SYSERRORTEXT: string
+  SYSHOSTINFOLONG: string
+  SYSHOSTNAME: string
+  SYSPROCESSID: string
+  SYSPROCESSMODE: string
+  SYSPROCESSNAME: string
+  SYSJOBID: string
+  SYSSCPL: string
+  SYSSITE: string
+  SYSTCPIPHOSTNAME: string
+  SYSUSERID: string
+  SYSVLONG: string
+  SYSWARNINGTEXT: string
+  END_DTTM: string
+  MEMSIZE: string
+}
+
+export interface Sasparam {
+  STATUS: string | 'SUCCESS'
+  DSID: string
+  URL: string
+}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { MultiDatasetRouteComponent } from '../routes/multi-dataset-route/multi-dataset-route.component'
+import { MultiDatasetComponent } from './multi-dataset.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MultiDatasetRouteComponent,
+    children: [{ path: '', component: MultiDatasetComponent }]
+  }
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MultiDatasetRoutingModule {}

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

@@ -0,0 +1,448 @@
+<app-sidebar>
+  <div *ngIf="datasetsLoading" class="my-10-mx-auto text-center">
+    <clr-spinner clrMedium></clr-spinner>
+  </div>
+
+  <div *ngIf="!parsedDatasets.length" class="text-center mb-10">
+    <button
+      (click)="fileUploadInput.click()"
+      id="browse-file"
+      class="btn btn-primary btn-sm"
+      [disabled]="selectedFile !== null || submittingCsv"
+    >
+      Browse file
+    </button>
+    <input
+      hidden
+      #fileUploadInput
+      id="file-upload"
+      type="file"
+      (change)="onFileChange($event)"
+      multiple
+    />
+  </div>
+
+  <ng-container *ngIf="parsedDatasets.length && !submittedDatasets.length">
+    <div class="text-center mb-10">
+      <button (click)="onDiscard()" class="btn btn-danger btn-sm mr-10">
+        Discard
+      </button>
+      <button
+        (click)="onSubmitAll()"
+        id="submit-all"
+        class="btn btn-primary btn-sm"
+      >
+        Submit All
+      </button>
+    </div>
+
+    <p cds-text="caption" class="ml-10 mb-10">Found tables:</p>
+    <clr-tree>
+      <clr-tree-node *ngFor="let dataset of parsedDatasets">
+        <button
+          (click)="onParsedDatasetClick(dataset)"
+          class="clr-treenode-link whitespace-nowrap"
+          [class.active]="dataset.active"
+        >
+          <cds-icon
+            *ngIf="!(dataset.datasource && dataset.parseResult)"
+            status="danger"
+            shape="exclamation-circle"
+          ></cds-icon>
+          <cds-icon
+            *ngIf="dataset.datasource && dataset.parseResult"
+            shape="table"
+          ></cds-icon>
+          {{ dataset.libds }}
+        </button>
+      </clr-tree-node>
+    </clr-tree>
+  </ng-container>
+
+  <ng-container *ngIf="submittedDatasets.length">
+    <p cds-text="caption" class="ml-10 mb-10 mt-10">Submitted tables:</p>
+    <clr-tree>
+      <clr-tree-node *ngFor="let dataset of submittedDatasets">
+        <button
+          (click)="onSubmittedDatasetClick(dataset)"
+          class="clr-treenode-link whitespace-nowrap"
+          [class.active]="dataset.active"
+        >
+          <cds-icon
+            *ngIf="dataset.error"
+            status="danger"
+            shape="exclamation-circle"
+          ></cds-icon>
+          <cds-icon
+            *ngIf="dataset.success"
+            status="success"
+            shape="check-circle"
+          ></cds-icon>
+          <cds-icon shape="table"></cds-icon>
+          {{ dataset.libds }}
+        </button>
+      </clr-tree-node>
+    </clr-tree>
+  </ng-container>
+
+  <!-- <div *ngIf="librariesPaging" class="w-100 text-center">
+    <span class="spinner spinner-sm"> Loading... </span>
+  </div> -->
+</app-sidebar>
+
+<div class="content-area">
+  <div class="card no-borders h-100 d-flex clr-flex-column">
+    <div
+      class="header-row clr-row justify-content-between clr-justify-content-center w-100 m-0"
+    >
+      <p cds-text="section">Multi Dataset Load</p>
+    </div>
+
+    <div
+      *ngIf="selectedFile === null && !submittingCsv"
+      class="no-table-selected pointer-events-none"
+    >
+      <clr-icon
+        shape="warning-standard"
+        size="40"
+        class="is-info icon-dc-fill"
+      ></clr-icon>
+      <p class="text-center color-gray mt-10" cds-text="section">
+        Please upload a file
+      </p>
+    </div>
+
+    <ng-container *ngIf="selectedFile !== null || submittingCsv">
+      <ng-container *ngIf="!parsedDatasets.length && selectedFile !== null">
+        <div class="d-flex clr-justify-content-center mt-15">
+          <div class="dataset-input-wrapper">
+            <p cds-text="secondary regular" class="mb-20">
+              Selected file: <strong>{{ selectedFile.name }}</strong>
+              <clr-tooltip>
+                <cds-icon
+                  clrTooltipTrigger
+                  (click)="onDiscardFile()"
+                  shape="trash"
+                  status="danger"
+                  class="ml-5 cursor-pointer"
+                ></cds-icon>
+                <clr-tooltip-content> Discard the file </clr-tooltip-content>
+              </clr-tooltip>
+            </p>
+            <p cds-text="secondary regular" class="mb-15">
+              Paste or type the list of datasets to upload:
+            </p>
+
+            <clr-control-helper class="mb-5"
+              >Each row is one dataset. We will automatically detect tables by
+              the sheetname and populate if any.</clr-control-helper
+            >
+
+            <hot-table
+              hotId="hotInstanceUserDataset"
+              id="hotTableUserDataset"
+              class="mt-15"
+              [afterGetColHeader]="afterGetColHeader"
+              [settings]="hotUserDatasets"
+              [licenseKey]="hotTableLicenseKey"
+              stretchH="all"
+            >
+            </hot-table>
+
+            <div class="dataset-selection-actions text-right mt-10">
+              <button
+                (click)="onUploadFile()"
+                id="continue-btn"
+                class="btn btn-primary btn-sm"
+                [disabled]="!matchedDatasets.length"
+                [clrLoading]="uploadLoading"
+              >
+                Continue
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+
+      <ng-container *ngIf="parsedDatasets.length && !submittedDatasets.length">
+        <div
+          *ngIf="!activeParsedDataset"
+          class="no-table-selected pointer-events-none"
+        >
+          <clr-icon
+            shape="warning-standard"
+            size="40"
+            class="is-info icon-dc-fill"
+          ></clr-icon>
+          <p class="text-center color-gray mt-10" cds-text="section">
+            Please select a dataset on the left to review the data
+          </p>
+        </div>
+
+        <ng-container *ngIf="activeParsedDataset">
+          <div class="d-flex clr-justify-content-between p-10">
+            <div>
+              <p cds-text="secondary regular" class="mb-10">
+                Found in range:
+
+                <ng-container *ngIf="activeParsedDataset.parseResult">
+                  <strong
+                    >"{{
+                      activeParsedDataset.parseResult.rangeSheetRes?.sheetName
+                    }}"!{{
+                      activeParsedDataset.parseResult.rangeSheetRes
+                        ?.rangeAddress
+                    }}</strong
+                  >
+                </ng-container>
+
+                <ng-container *ngIf="!activeParsedDataset.parseResult">
+                  <strong>No data found</strong>
+                </ng-container>
+              </p>
+              <p cds-text="secondary regular">
+                Dataset:
+                <strong>
+                  <clr-tooltip>
+                    <a
+                      clrTooltipTrigger
+                      [routerLink]="'/editor/' + activeParsedDataset.libds"
+                      >{{ activeParsedDataset.libds }}</a
+                    >
+                    <clr-tooltip-content
+                      [clrPosition]="'top-right'"
+                      [clrSize]="'sm'"
+                    >
+                      Click to edit the table
+                    </clr-tooltip-content>
+                  </clr-tooltip>
+                </strong>
+              </p>
+            </div>
+
+            <div>
+              <clr-toggle-wrapper>
+                <input
+                  type="checkbox"
+                  clrToggle
+                  [(ngModel)]="activeParsedDataset.includeInSubmission"
+                  name="options"
+                  [disabled]="
+                    !(
+                      activeParsedDataset.datasource &&
+                      activeParsedDataset.parseResult
+                    )
+                  "
+                  required
+                  value="option1"
+                />
+                <label>Include in submission</label>
+              </clr-toggle-wrapper>
+            </div>
+          </div>
+
+          <div *ngIf="isHotHidden" class="text-center w-100">
+            <clr-spinner class="spinner-md"></clr-spinner>
+          </div>
+
+          <hot-table
+            hotId="hotInstance"
+            id="hotTable"
+            class="mt-15"
+            [afterGetColHeader]="afterGetColHeader"
+            [className]="['htDark', 'htCustomHidden']"
+            [licenseKey]="hotTableLicenseKey"
+            [multiColumnSorting]="true"
+            [viewportRowRenderingOffset]="50"
+            [manualColumnResize]="true"
+            [filters]="true"
+            stretchH="all"
+          >
+          </hot-table>
+        </ng-container>
+      </ng-container>
+
+      <ng-container *ngIf="submittedDatasets.length">
+        <div
+          *ngIf="!activeSubmittedDataset"
+          class="no-table-selected pointer-events-none"
+        >
+          <clr-icon
+            shape="warning-standard"
+            size="40"
+            class="is-info icon-dc-fill"
+          ></clr-icon>
+          <p class="text-center color-gray mt-10" cds-text="section">
+            Please select a dataset on the left to review the submit results
+          </p>
+        </div>
+      </ng-container>
+
+      <ng-container *ngIf="activeSubmittedDataset">
+        <div class="d-flex clr-justify-content-between p-10">
+          <div>
+            <p
+              *ngIf="activeSubmittedDataset.parseResult"
+              cds-text="secondary regular"
+              class="mb-10"
+            >
+              Found in range:
+              <strong
+                >"{{
+                  activeSubmittedDataset.parseResult.rangeSheetRes?.sheetName
+                }}"!{{
+                  activeSubmittedDataset.parseResult.rangeSheetRes?.rangeAddress
+                }}</strong
+              >
+            </p>
+            <p cds-text="secondary regular" class="mb-10">
+              Matched with dataset:
+              <strong>
+                <clr-tooltip>
+                  <a
+                    clrTooltipTrigger
+                    [routerLink]="'/editor/' + activeSubmittedDataset.libds"
+                    >{{ activeSubmittedDataset.libds }}</a
+                  >
+                  <clr-tooltip-content
+                    [clrPosition]="'top-right'"
+                    [clrSize]="'sm'"
+                  >
+                    Click to edit the table
+                  </clr-tooltip-content>
+                </clr-tooltip>
+              </strong>
+            </p>
+            <p cds-text="secondary regular" class="mb-10">
+              Status:
+              <span *ngIf="activeSubmittedDataset.success" class="color-green"
+                ><strong>SUCCESS</strong></span
+              >
+              <span *ngIf="activeSubmittedDataset.error" class="color-red"
+                ><strong>ERROR</strong></span
+              >
+            </p>
+            <p
+              *ngIf="activeSubmittedDataset.error"
+              cds-text="secondary regular"
+            >
+              Error details:
+            </p>
+          </div>
+
+          <div>
+            <button
+              *ngIf="!submittingCsv && activeSubmittedDataset.error"
+              (click)="reSubmitTable(activeSubmittedDataset)"
+              class="btn btn-primary mt-10"
+              [clrLoading]="submitLoading"
+            >
+              Resubmit
+            </button>
+            <button
+              (click)="
+                downloadFile(
+                  activeSubmittedDataset.success || activeSubmittedDataset.error
+                )
+              "
+              class="btn btn-primary-outline mt-10"
+            >
+              Download log
+            </button>
+          </div>
+        </div>
+
+        <div *ngIf="activeSubmittedDataset.error" class="error-field mt-15">
+          <div class="log-wrapper">
+            {{ activeSubmittedDataset.error | json }}
+          </div>
+        </div>
+      </ng-container>
+    </ng-container>
+
+    <!-- <div>
+      <p
+        *ngIf="
+          licenceState.value.viewer_rows_allowed !== Infinity &&
+          hotTable.data &&
+          hotTable.data.length > licenceState.value.viewer_rows_allowed
+        "
+        class="mt-2-i w-100 text-center"
+      >
+        To display more than {{ licenceState.value.viewer_rows_allowed }} rows,
+        contact <contact-link />
+      </p>
+    </div> -->
+  </div>
+</div>
+
+<clr-modal [(clrModalOpen)]="showSubmitReasonModal" [clrModalClosable]="false">
+  <h3 class="modal-title">
+    Submit {{ tablesToSubmit.length }}
+    {{ tablesToSubmit.length === 1 ? 'table' : 'tables' }} for approval
+  </h3>
+  <div class="modal-body">
+    <p
+      *ngIf="licenceState.value.submit_rows_limit !== Infinity"
+      cds-text="body"
+      class="licence-limit-notice mt-0 mb-15"
+    >
+      Due to current licence, only
+      {{ licenceState.value.submit_rows_limit }} rows in each file will be
+      submitted. To remove the restriction, contact
+      support&#64;datacontroller.io.
+    </p>
+
+    <div class="text-area-full-width">
+      <label for="formFields_8" class="mb-5 d-block">Message</label>
+      <textarea
+        clrTextarea
+        [(ngModel)]="submitReasonMessage"
+        tabindex="0"
+        class="submit-reason"
+        type="text"
+        id="formFields_8"
+      ></textarea>
+    </div>
+
+    <p cds-text="caption_clean" class="mt-10">
+      Tables will be sent sequentially, logs will be available after all tables
+      are submitted.
+    </p>
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-outline"
+      [disabled]="submitLoading"
+      (click)="showSubmitReasonModal = false"
+    >
+      Cancel
+    </button>
+    <button
+      type="button"
+      id="submit-tables"
+      class="btn btn-primary"
+      [clrLoading]="submitLoading"
+      (click)="submitTables()"
+    >
+      Submit
+    </button>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="csvSubmitting" [clrModalClosable]="false">
+  <h3 class="modal-title">
+    Submitting {{ csvFiles.length }} CSV
+    {{ csvFiles.length === 1 ? 'file' : 'files' }}
+  </h3>
+  <div class="modal-body">
+    <div class="text-center">
+      <clr-spinner clrMedium></clr-spinner>
+    </div>
+
+    <p cds-text="caption_clean" class="mt-10 text-center">
+      This will take few moments
+    </p>
+  </div>
+</clr-modal>

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

@@ -0,0 +1,50 @@
+.no-table-selected {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  background: var(--clr-vertical-nav-bg-color);
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+.header-row {
+  padding: 15px 0;
+  border-bottom: 1px solid #d3d3d3;
+}
+
+.dataset-input-wrapper {
+  max-width: 500px;
+  width: 100%;
+
+  textarea {
+    min-height: 200px;
+    height: 200px;
+  }
+}
+
+.submit-reason {
+  min-height: 70px;
+  max-height: 70px;
+  height: 70px;
+}
+
+.log-wrapper {
+  margin: 0 10px;
+  height: auto;
+}
+
+::ng-deep td.not-matched {
+  background-color: #ff000054;
+}
+
+.dataset-selection-actions {
+  border-top: 1px solid #d3d3d3;
+}
+
+.licence-limit-notice {
+  color: var(--cds-alias-status-warning-dark);
+}

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

@@ -0,0 +1,31 @@
+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 { registerAllModules } from 'handsontable/registry'
+import { AppSharedModule } from '../app-shared.module'
+import { DirectivesModule } from '../directives/directives.module'
+import { DcTreeModule } from '../shared/dc-tree/dc-tree.module'
+import { MultiDatasetComponent } from './multi-dataset.component'
+import { MultiDatasetRoutingModule } from './multi-dataset-routing.module'
+import { MultiDatasetRouteComponent } from '../routes/multi-dataset-route/multi-dataset-route.component'
+
+// register Handsontable's modules
+registerAllModules()
+
+@NgModule({
+  declarations: [MultiDatasetRouteComponent, MultiDatasetComponent],
+  imports: [
+    HotTableModule,
+    MultiDatasetRoutingModule,
+    FormsModule,
+    ClarityModule,
+    AppSharedModule,
+    CommonModule,
+    DcTreeModule,
+    DirectivesModule
+  ],
+  exports: [MultiDatasetComponent]
+})
+export class MultiDatasetModule {}

client/src/app/query/query.component.scss

@@ -1,3 +1,25 @@
+::ng-deep {
+    body[cds-theme="dark"] {
+        .clause-logic {
+            background: #192a30;
+        }
+
+        .clause-query {
+            background: #263e48;
+        }
+    }
+
+    body[cds-theme="light"] {
+        .clause-logic {
+            background: #e9e9e9;
+        }
+
+        .clause-query {
+            background: #fbf8f8;
+        }
+    }
+}
+
 .content {
     display: flex;
 
@@ -9,13 +31,12 @@
             display: flex;
             justify-content: center;
             flex-direction: column;
-            background: #e9e9e9;
+
             padding: 15px;
         }
 
         .clause-query {
             padding: 30px 0px 20px 20px;
-            background: #fbf8f8;
             display: flex;
             justify-content: center;
             flex-direction: column;
@@ -220,8 +241,11 @@
     vertical-align: middle;
     margin: 0;
 }
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
+
-    background-color: #fbf8f8;
+::ng-deep body[cds-theme="dark"] {
+    .line-numbers {
+        border-color: #989797 !important;
+    }
 }
 
 pre[class*="language-"] {

client/src/app/review/approve-details/approve-details.component.html

@@ -284,19 +284,15 @@
                     >
                       <span class="label label-warning">
                         Changed Rows
-                        <span class="badge badge-warning">{{
+                        <span class="badge">{{ lens.updated }}</span>
-                          lens.updated
-                        }}</span>
                       </span>
                       <span class="label label-success">
                         Added Rows
-                        <span class="badge badge-success">{{ lens.new }}</span>
+                        <span class="badge">{{ lens.new }}</span>
                       </span>
                       <span class="label label-danger">
                         Deleted Rows
-                        <span class="badge badge-danger">{{
+                        <span class="badge">{{ lens.deleted }}</span>
-                          lens.deleted
-                        }}</span>
                       </span>
                     </div>
                   </div>
@@ -311,8 +307,8 @@
           class="h-24vh d-flex flex-column justify-content-center align-items-center"
         >
           <span class="spinner"> Loading... </span>
-          <div *ngIf="!loadingTable">
+          <div *ngIf="!loadingTable" class="mt-10">
-            <h3>Loading table</h3>
+            <p cds-text="section">Loading table</p>
           </div>
         </div>
 
@@ -477,15 +473,15 @@
                 >
                   <span class="label label-warning">
                     Changed Rows
-                    <span class="badge badge-warning">{{ lens.updated }}</span>
+                    <span class="badge">{{ lens.updated }}</span>
                   </span>
                   <span class="label label-success">
                     Added Rows
-                    <span class="badge badge-success">{{ lens.new }}</span>
+                    <span class="badge">{{ lens.new }}</span>
                   </span>
                   <span class="label label-danger">
                     Deleted Rows
-                    <span class="badge badge-danger">{{ lens.deleted }}</span>
+                    <span class="badge">{{ lens.deleted }}</span>
                   </span>
                 </div>
               </div>
@@ -519,8 +515,8 @@
           class="h-25vh d-flex flex-column justify-content-center align-items-center"
         >
           <span class="spinner"> Loading... </span>
-          <div *ngIf="!loadingTable">
+          <div *ngIf="!loadingTable" class="mt-10">
-            <h3>Loading table</h3>
+            <p cds-text="section">Loading table</p>
           </div>
         </div>
         <div class="tableCont">

client/src/app/review/approve-details/approve-details.component.scss

@@ -1,3 +1,5 @@
+@import '../../../colors.scss';
+
 .loader {
   display:flex;
   justify-content: center;
@@ -10,19 +12,48 @@
 }
 
 .addedRow {
-  background:  rgb(146, 208, 154);
   border: 1px solid rgba(9, 77, 117, 0.2);
   border-radius: 5px;
 }
 
 .deletedRow {
-  background: rgb(230, 179, 179);
   border: 1px solid rgba(70, 71, 70, 0.2);
   border-radius: 5px;
 }
 
+::ng-deep body[cds-theme="dark"] {
+  table {
+    .updatedRow {
+      background: #93971e;
+    }
+
+    .addedRow {
+      background:  rgb(86 153 95);
+    }
+
+    .deletedRow {
+      background: rgb(138 90 90);
+    }
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  table {
+    .updatedRow {
+      background: #fafda8;
+    }
+
+    .addedRow {
+      background:  rgb(146, 208, 154);
+    }
+
+    .deletedRow {
+      background: rgb(230, 179, 179);
+    }
+  }
+}
+
 .updatedRow {
-  background: #fafda8;
   border: 1px solid rgba(9, 117, 9, 0.2);
   border-radius: 5px;
 }
@@ -45,7 +76,7 @@ background: rgba(252, 135, 120, 0.4);
     font-size: .54167rem;
     font-weight: 400;
     letter-spacing: normal;
-    background: #314351;
+    background: $headerBackground;
     border-radius: .125rem;
     color: #f0f1ec;;
     line-height: .75rem;
@@ -68,8 +99,8 @@ background: rgba(252, 135, 120, 0.4);
     top: auto;
     right: auto;
     content: "";
-    border-left: .25rem solid #314351;
+    border-left: .25rem solid $headerBackground;
-    border-top: .20833rem solid #314351;
+    border-top: .20833rem solid $headerBackground;
     border-right: .25rem solid transparent;
     border-bottom: .20833rem solid transparent;
 }
@@ -79,8 +110,8 @@ border: 0px solid;
 }
 
 .toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: #314351;
+    border-color: $headerBackground;
-    background-color: #314351!important;
+    background-color: $headerBackground !important;
     transition: .15s ease-in;
     transition-property: border-color,background-color;
 }
@@ -140,7 +171,7 @@ border: 0px solid;
 .tooll {
     position: absolute;
     background: #e6b3b3;
-    color: #314351;
+    color: $headerBackground;
     top: 0px;
     height: 36px;
     width: 100%;

client/src/app/review/approve/approve.component.html

@@ -99,19 +99,11 @@
             </clr-dg-cell>
           </clr-dg-row>
 
-          <clr-dg-footer class="d-flex justify-content-start">
+          <clr-dg-footer>
-            <span>items per page</span>
+            <clr-dg-pagination #pagination [clrDgPageSize]="10">
-            <select [(ngModel)]="itemsNum">
+              <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
-              <option [ngValue]="3">3</option>
+                >Items per page</clr-dg-page-size
-              <option [ngValue]="5">5</option>
+              >
-              <option [ngValue]="10">10</option>
-              <option [ngValue]="15">15</option>
-            </select>
-            <clr-dg-pagination
-              #pagination
-              [clrDgPageSize]="itemsNum"
-              class="center"
-            >
               {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
               {{ pagination.totalItems }} approvals
             </clr-dg-pagination>

client/src/app/review/approve/approve.component.scss

@@ -1,3 +1,5 @@
+@import '../../../colors.scss';
+
 .column-center {
     display: flex;
     flex-direction: column;
@@ -13,11 +15,11 @@
 }
 
 .tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
-    background: #314351!important;
+    background: $headerBackground !important;
 }
 .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
-    border-right: .25rem solid #314351;
+    border-right: .25rem solid $headerBackground;
-    border-bottom: .20833rem solid #314351;
+    border-bottom: .20833rem solid $headerBackground;
 }
 
 .noBorder {

client/src/app/review/submitter/submitter.component.html

@@ -86,19 +86,11 @@
               </clr-dg-cell>
             </clr-dg-row>
 
-            <clr-dg-footer class="d-flex justify-content-start">
+            <clr-dg-footer>
-              <span>items per page</span>
+              <clr-dg-pagination #pagination [clrDgPageSize]="10">
-              <select [(ngModel)]="itemsNum">
+                <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
-                <option [ngValue]="3">3</option>
+                  >Items per page</clr-dg-page-size
-                <option [ngValue]="5">5</option>
+                >
-                <option [ngValue]="10">10</option>
-                <option [ngValue]="15">15</option>
-              </select>
-              <clr-dg-pagination
-                #pagination
-                [clrDgPageSize]="itemsNum"
-                class="center"
-              >
                 {{ pagination.firstItem + 1 }} -
                 {{ pagination.lastItem + 1 }} of
                 {{ pagination.totalItems }} submissions

client/src/app/review/submitter/submitter.component.scss

@@ -1,13 +1,15 @@
+@import '../../../colors.scss';
+
 .noBorder {
   border-bottom: 1px solid transparent!important;
 }
 
 .tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
-  background: #314351!important;
+  background: $headerBackground !important;
 }
 .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
-  border-right: .25rem solid #314351;
+  border-right: .25rem solid $headerBackground;
-  border-bottom: .20833rem solid #314351;
+  border-bottom: .20833rem solid $headerBackground;
 }
 
 .no-submitted-tables {

client/src/app/role/role.component.html

@@ -3,6 +3,7 @@
     <clr-tree-node *ngIf="roles" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Filter by Roles"
@@ -26,7 +27,7 @@
       <clr-tree-node
         (click)="roleOnClick(role)"
         *ngIf="!role['hidden']"
-        [class.table-active]="role.ROLEURI === roleUri"
+        [class.active]="role.ROLEURI === roleUri"
       >
         <p class="m-0 cursor-pointer list-padding">
           <clr-icon shape="blocks-group"></clr-icon>

client/src/app/role/role.component.scss

@@ -1,25 +1,61 @@
+@import '../../colors.scss';
+
+::ng-deep body[cds-theme="dark"] {
+  .role {
+      background-color: $headerBackground;
+      border-color: $headerBackground;
+  }
+
+  .role-data {
+      background-color: $headerBackground;
+      border-color: $headerBackground;
+  }
+
+  .member-table tbody{
+    tr:hover{
+        background-color: #29404b;
+    }
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  .role-info{
+      background-color: #f9f9f9;
+      border-color: #a7a7a7;
+      box-shadow: 0px 2px 5px #dad7d7;
+  }
+
+  .role-data {
+      background-color: #f9f9f9;
+      border-color: #a7a7a7;
+      box-shadow: 0px 2px 5px #dad7d7;
+  }
+
+  .member-table tbody{
+    tr:hover{
+          background-color: #e6e6e6;
+      }
+  }
+}
+
 .sidebar-height{
     height: 100%;
 }
 .role-info-text{
-    display: inline;    
+    display: inline;
     font-size: 20px;
 }
 .role-info{
-    background-color: #f9f9f9;
+    border: 1px solid;
-    border: 1px solid #a7a7a7;
     border-radius: 3px;
-    box-shadow: 0px 2px 5px #dad7d7;
 }
 .role-info td{
     text-align: center;
 }
 
 .role-data{
-  background-color: #f9f9f9;
+  border: 1px solid;
-  border: 1px solid #a7a7a7;
   border-radius: 3px;
-  box-shadow: 0px 2px 5px #dad7d7;
 }
 .role-data{
   min-height: unset;
@@ -28,15 +64,10 @@
   }
 }
 .member-table{
-  background-color: #f9f9f9;
   width: 100%;
 }
-.member-table thead{
-  background-color: #dadada;
-}
 .member-table tbody{
   tr:hover{
-    background-color: #e6e6e6;
     cursor: pointer;
   }
 }

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

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

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

@@ -0,0 +1,16 @@
+import { Component, OnInit, OnDestroy } from '@angular/core'
+
+@Component({
+  selector: 'app-multi-dataset-route',
+  templateUrl: './multi-dataset-route.component.html',
+  host: {
+    class: 'content-container'
+  }
+})
+export class MultiDatasetRouteComponent implements OnInit, OnDestroy {
+  constructor() {}
+
+  ngOnInit() {}
+
+  ngOnDestroy() {}
+}

client/src/app/services/app-settings.service.ts

@@ -0,0 +1,56 @@
+import { BehaviorSubject } from 'rxjs'
+import { AppSettings, AppThemes } from '../models/AppSettings'
+
+export class AppSettingsService {
+  public defaultSettings: AppSettings = {
+    persistSelectedTheme: true,
+    selectedTheme: AppThemes.light
+  }
+  public settings = new BehaviorSubject<AppSettings>(this.defaultSettings)
+
+  constructor() {
+    this.restoreAppSettings()
+  }
+
+  /**
+   * Restore app settings from the local storage
+   */
+  restoreAppSettings() {
+    try {
+      const serializedSettings = localStorage.getItem('app-settings')
+
+      if (serializedSettings) {
+        const settings = JSON.parse(serializedSettings)
+
+        this.setAppSettings(settings)
+      } else {
+        console.info(
+          'No app settings stored in the localStorage, we will set to default values.'
+        )
+      }
+    } catch (err) {
+      console.warn('Error restoring settings from local storgae.', err)
+    }
+  }
+
+  /**
+   * Save app settings to the local storage
+   */
+  storeAppSettings() {
+    localStorage.setItem('app-settings', JSON.stringify(this.settings.value))
+  }
+
+  /**
+   * Function used in the app to update global settings object
+   *
+   * @param appSettings contains properties that should be updated in settings
+   */
+  setAppSettings(appSettings: Partial<AppSettings>) {
+    this.settings.next({
+      ...this.settings.value,
+      ...appSettings
+    })
+
+    this.storeAppSettings()
+  }
+}

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

@@ -7,6 +7,8 @@ import { BehaviorSubject } from 'rxjs'
 import { LoggerService } from './logger.service'
 import { EnvironmentInfo } from '../system/models/environment-info.model'
 import { LicenceService } from './licence.service'
+import { AppSettingsService } from './app-settings.service'
+import { AppThemes } from '../models/AppSettings'
 
 @Injectable()
 export class AppService {
@@ -18,6 +20,7 @@ export class AppService {
     private eventService: EventService,
     private sasService: SasService,
     private loggerService: LoggerService,
+    private appSettingsService: AppSettingsService,
     private router: Router
   ) {
     this.subscribe()
@@ -29,6 +32,19 @@ export class AppService {
         }
       }
     })
+
+    const appSettings = this.appSettingsService.settings.value
+
+    if (!!appSettings.persistSelectedTheme) {
+      if (appSettings.selectedTheme === AppThemes.light) {
+        this.eventService.toggleDarkMode(false)
+      } else if (appSettings.selectedTheme === AppThemes.dark) {
+        this.eventService.toggleDarkMode(true)
+      } else {
+        // Fallback to light mode
+        this.eventService.toggleDarkMode(false)
+      }
+    }
   }
 
   sasServiceInit() {
@@ -95,6 +111,7 @@ export class AppService {
           MEMSIZE: res.MEMSIZE,
           SYSPROCESSMODE: res.SYSPROCESSMODE,
           SYSHOSTNAME: res.SYSHOSTNAME,
+          SYSUSERID: res.SYSUSERID,
           SYSHOSTINFOLONG: res.SYSHOSTINFOLONG,
           SYSENCODING: res.SYSENCODING,
           AUTOEXEC: res.AUTOEXEC,

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

@@ -1,6 +1,9 @@
 import { Injectable, Output, EventEmitter } from '@angular/core'
 import { InfoModal, AbortDetails } from '../models/InfoModal'
 import { AlertsService } from '../shared/alerts/alerts.service'
+import { BehaviorSubject } from 'rxjs'
+import { AppSettingsService } from './app-settings.service'
+import { AppThemes } from '../models/AppSettings'
 
 @Injectable({
   providedIn: 'root'
@@ -17,7 +20,23 @@ export class EventService {
   public viewLastUrl: string | null = null
   public sidebarCloseLimit = 1280
 
-  constructor(private alertsService: AlertsService) {}
+  public darkMode: BehaviorSubject<boolean> = new BehaviorSubject(false)
+
+  constructor(private appSettingsService: AppSettingsService) {}
+
+  toggleDarkMode(value: boolean) {
+    this.darkMode.next(value)
+
+    if (value) {
+      document.body.setAttribute('cds-theme', 'dark')
+    } else {
+      document.body.setAttribute('cds-theme', 'light')
+    }
+
+    this.appSettingsService.setAppSettings({
+      selectedTheme: value ? AppThemes.dark : AppThemes.light
+    })
+  }
 
   public showDemoLimitModal(featureName: string) {
     this.onDemoLimitModalShow.emit(featureName)

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

@@ -17,10 +17,10 @@ import { LoggerService } from './logger.service'
 import { isSpecialMissing } from '@sasjs/utils/input/validators'
 import { Col } from '../shared/dc-validator/models/col.model'
 import { get } from 'lodash-es'
+import { EditorsStageDataSASResponse } from '../models/sas/editors-stagedata.model'
 
 @Injectable()
 export class SasStoreService {
-  public libds!: string
   public response: Subject<any> = new Subject<any>()
   public changedTable: Subject<any> = new Subject<any>()
   public details: Subject<any> = new Subject<any>()
@@ -56,7 +56,6 @@ export class SasStoreService {
     program: string,
     libds: string
   ) {
-    this.libds = libds
     const tables: any = {}
     tables[tableName] = [tableData]
     const res: EditorsGetDataSASResponse = await this.sasService.request(
@@ -65,7 +64,7 @@ export class SasStoreService {
     )
     const response: EditorsGetDataServiceResponse = {
       data: res,
-      libds: this.libds
+      libds: libds
     }
     return response
   }
@@ -84,8 +83,9 @@ export class SasStoreService {
     tableData: any,
     tableName: string,
     program: string,
-    $dataFormats: $DataFormats | null
+    $dataFormats: $DataFormats | null,
-  ) {
+    suppressErrorSuccessMessages?: boolean
+  ): Promise<EditorsStageDataSASResponse> {
     // add sp as third argument of createData call
 
     let tables: any = {
@@ -100,7 +100,15 @@ export class SasStoreService {
 
     tables[tableName] = [tableParams]
 
-    let res: any = await this.sasService.request(program, tables)
+    let res = await this.sasService.request<EditorsStageDataSASResponse>(
+      program,
+      tables,
+      null,
+      {
+        suppressErrorAbortModal: suppressErrorSuccessMessages,
+        suppressSuccessAbortModal: suppressErrorSuccessMessages
+      }
+    )
 
     return res
   }

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

@@ -93,15 +93,16 @@ export class SasService {
    * @param url service to run reuqest against
    * @param data to be sent to backend service
    * @param config additional parameters to force eg. { debug: false }
-   * @param wrapperOptions used to suppress error or success abort modals after request is finished
+   * @param wrapperOptions used to provide options to the request wrapper function
+   * for example to suppress error or success abort modals after request is finished
    * @returns
    */
-  public request(
+  public request<responseType = any>(
     url: string,
     data: any,
     config?: any,
     wrapperOptions?: RequestWrapperOptions
-  ): Promise<any> {
+  ): Promise<responseType> {
     url = 'services/' + url
 
     if (!wrapperOptions) wrapperOptions = {}

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

@@ -0,0 +1,906 @@
+import { Injectable } from '@angular/core'
+import * as XLSX from '@sheet/crypto'
+import {
+  ExcelPasswordModalService,
+  Result
+} from '../shared/excel-password-modal/excel-password-modal.service'
+import { EventService } from './event.service'
+import { isSpecialMissing } from '@sasjs/utils/input/validators'
+import {
+  dateFormat,
+  dateToUtcTime,
+  dateToTime
+} from '../editor/utils/date.utils'
+import {
+  excelDateToJSDate,
+  getMissingHeaders
+} from '../editor/utils/grid.utils'
+import { isStringNumber, isStringDecimal } from '../editor/utils/types.utils'
+import SheetInfo from '../models/SheetInfo'
+import { blobToFile } from '../xlmap/utils/file.utils'
+import { ExcelRule } from '../models/TableData'
+import { DcValidator } from '../shared/dc-validator/dc-validator'
+import { LicenceService } from './licence.service'
+import { FileUploadEncoding } from '../models/FileUploadEncoding'
+import { FileUploader } from '../models/FileUploader.class'
+
+/**
+ * Used in combination with buffer
+ */
+const iconv = require('iconv-lite')
+/**
+ * In combination with `iconv` is used for encoding json data captured with sheet js from excel file into a file again
+ * Which will be send to backend
+ */
+const Buffer = require('buffer/').Buffer
+type AOA = any[][]
+
+export interface ParseParams {
+  file: File
+  dcValidator: DcValidator
+  /**
+   * Parse function will manipulate and return the uploader array which can be provided with files already in the queue
+   * Otherwise new empty instance will be created.
+   */
+  uploader?: FileUploader
+  headerPks: string[]
+  headerArray: string[]
+  headerShow: string[]
+  timeHeaders: string[]
+  dateHeaders: string[]
+  dateTimeHeaders: string[]
+  xlRules: ExcelRule[]
+  encoding?: FileUploadEncoding
+}
+
+export interface ParseResult {
+  /**
+   * In case of CSV file, won't be returned
+   */
+  data?: any[]
+  /**
+   * In case of CSV file, won't be returned
+   */
+  headerShow?: string[]
+  rangeSheetRes?: SheetInfo
+  uploader: FileUploader
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SpreadsheetService {
+  private licenceState = this.licenceService.licenceState
+
+  constructor(
+    private excelPasswordModalService: ExcelPasswordModalService,
+    private eventService: EventService,
+    private licenceService: LicenceService
+  ) {}
+
+  /**
+   * Parses attached file and searches fo the matching data
+   *
+   * @param parseParams params required for parsing the file
+   * @param onParseStateChange callback used to inform about parsing state
+   * so the user of the function can update the UI with latest info
+   * @param onTableFoundEvent callback fired when table range is found in the file
+   *
+   * @returns parsed list of files to upload and JSON data ready for HOT usage
+   */
+  public parseExcelFile(
+    parseParams: ParseParams,
+    onParseStateChange?: (uploadState: string) => void,
+    onTableFoundEvent?: (info: string) => void
+  ): Promise<ParseResult | undefined> {
+    return new Promise((resolve, reject) => {
+      let data: any[] = []
+      const uploader: FileUploader = parseParams.uploader || new FileUploader()
+
+      const file: File = parseParams.file
+      const filename = file.name
+
+      if (!parseParams.encoding) parseParams.encoding = 'UTF-8'
+
+      if (onParseStateChange)
+        onParseStateChange(`Loading ${filename} into the browser`)
+
+      let foundData = {
+        sheet: ''
+      }
+
+      let fileType = filename.slice(
+        filename.lastIndexOf('.') + 1,
+        filename.lastIndexOf('.') + 4
+      )
+
+      if (fileType.toLowerCase() === 'xls') {
+        let reader: FileReader = new FileReader()
+        const self = this
+        reader.onload = async (theFile: any) => {
+          /* read workbook */
+          const bstr = this.toBstr(theFile.target.result)
+          let wb: XLSX.WorkBook | undefined = undefined
+          let fileUnlocking: boolean = false
+
+          const xlsxOptions: XLSX.ParsingOptions = {
+            type: 'binary',
+            cellDates: false,
+            cellFormula: true,
+            cellStyles: true,
+            cellNF: false,
+            cellText: false
+          }
+
+          try {
+            wb = XLSX.read(bstr, {
+              ...xlsxOptions
+            })
+          } catch (err: any) {
+            if (err.message.toLowerCase().includes('password')) {
+              fileUnlocking = true
+
+              while (fileUnlocking) {
+                const password = await this.promptExcelPassword()
+
+                if (password) {
+                  try {
+                    wb = XLSX.read(bstr, {
+                      ...xlsxOptions,
+                      password: password
+                    })
+
+                    fileUnlocking = false
+                  } catch (err: any) {
+                    this.excelPasswordModalService.open({
+                      error: true
+                    })
+
+                    if (!err.message.toLowerCase().includes('password')) {
+                      fileUnlocking = false
+                    }
+                  }
+                } else {
+                  fileUnlocking = false
+                }
+              }
+            } else {
+              return reject('Error reading the file')
+            }
+          }
+
+          if (!wb) {
+            return reject('No workbook found.')
+          }
+
+          /* save data */
+          let isComplete: boolean = false
+          let missingHeaders: string[] = []
+
+          const csvArrayHeaders: string[] = [
+            '_____DELETE__THIS__RECORD_____',
+            ...parseParams.headerArray
+          ]
+          let csvArrayHeadersLower = csvArrayHeaders.map((x) => x.toLowerCase())
+          let csvArrayHeadersMap = csvArrayHeadersLower.reduce(
+            (map: any, obj: string) => {
+              map[obj] = -1
+              return map
+            },
+            {}
+          )
+
+          let csvArrayData: any[] = []
+          const rangeSheetRes: SheetInfo = this.getRangeAndSheet(
+            wb,
+            parseParams
+          )
+          missingHeaders = rangeSheetRes.missingHeaders
+
+          if (rangeSheetRes.foundData) {
+            isComplete = true
+            csvArrayHeadersMap = rangeSheetRes.csvArrayHeadersMap
+            const ws: XLSX.WorkSheet = wb.Sheets[rangeSheetRes.sheetName]
+
+            if (onParseStateChange)
+              onParseStateChange(
+                `Table found on sheet ${rangeSheetRes.sheetName} on row ${rangeSheetRes.startRow}`
+              )
+
+            let startAddress = ''
+            let endAddress = ''
+
+            for (
+              let row = rangeSheetRes.startRow;
+              row < rangeSheetRes.endRow;
+              ++row
+            ) {
+              const arr: any[] = []
+
+              csvArrayHeadersLower.forEach((x) => {
+                const col = csvArrayHeadersMap[x]
+                const addr = XLSX.utils.encode_cell({
+                  r: rangeSheetRes.rangeStartRow + row,
+                  c: rangeSheetRes.rangeStartCol + col
+                })
+
+                let cell
+
+                if (!ws[addr]) {
+                  cell = { v: '' }
+                } else {
+                  cell = ws[addr]
+                }
+
+                if (startAddress === '' && ws[addr]) startAddress = addr
+                endAddress = addr
+
+                arr.push(cell)
+              })
+
+              // If we found at least one non empty value it means it is not empty row
+              // othervise, it is empty row
+              let arrNonEmptyValue = arr.find((x) => x.v !== '')
+
+              if (arrNonEmptyValue) csvArrayData.push(arr)
+            }
+
+            rangeSheetRes.rangeAddress = `${startAddress}:${endAddress}`
+
+            if (onTableFoundEvent)
+              onTableFoundEvent(
+                `Sheet: ${rangeSheetRes.sheetName}\nRange: ${rangeSheetRes.rangeAddress}`
+              )
+          } else {
+            missingHeaders = rangeSheetRes.missingHeaders
+          }
+
+          if (missingHeaders.length > 0) {
+            missingHeaders.sort(function compareSecondColumn(a, b) {
+              if (a[1] === b[1]) {
+                return 0
+              } else {
+                return a[1] > b[1] ? -1 : 1
+              }
+            })
+            let abortMsg = missingHeaders
+              .map((x) => x[0])
+              .slice(0, 5)
+              .join('\n')
+
+            uploader.queue.pop()
+            return reject(abortMsg)
+          }
+
+          // If first row is empty, that means no data has been found
+          if (csvArrayData.length === 0 || csvArrayData[0].length === 0) {
+            let abortMsg = 'No relevant data found in File !'
+
+            uploader.queue.pop()
+            return reject(abortMsg)
+          }
+
+          if (
+            parseParams.dateTimeHeaders.length > 0 ||
+            parseParams.dateHeaders.length > 0 ||
+            parseParams.timeHeaders.length > 0
+          ) {
+            csvArrayData = this.updateDateTimeCols(
+              csvArrayHeaders,
+              csvArrayData,
+              parseParams
+            )
+          }
+
+          if (parseParams.xlRules.length > 0) {
+            csvArrayData = this.updateXLRuleCols(
+              csvArrayHeaders,
+              csvArrayData,
+              parseParams
+            )
+          }
+
+          if (!isComplete) {
+            let abortMsg = ''
+
+            if (missingHeaders.length === 0) {
+              abortMsg = 'No relevant data found in File !'
+            } else {
+              missingHeaders.sort(function compareSecondColumn(a, b) {
+                if (a[1] === b[1]) {
+                  return 0
+                } else {
+                  return a[1] > b[1] ? -1 : 1
+                }
+              })
+              abortMsg = missingHeaders
+                .map((x) => x[0])
+                .slice(0, 5)
+                .join('\n')
+            }
+
+            // abort message is fired, return undefined
+            uploader.queue.pop()
+            return reject(abortMsg)
+          } else {
+            parseParams.headerShow = csvArrayHeaders
+            csvArrayData = csvArrayData.map((row: any) =>
+              row.map((col: any) => (col.t === 'n' ? col.v : col.w))
+            )
+
+            csvArrayData = csvArrayData.map((row: any) => {
+              return row.map((col: any, index: number) => {
+                if (!col && col !== 0) col = ''
+
+                /**
+                 * Keeping this for the reference
+                 * Code below used to convert JSON to CSV
+                 * now the XLSX is converting to CSV
+                 */
+                // if (isNaN(col)) {
+                //   // Match and replace the double quotes, ignore the first and last char
+                //   // in case they are double quotes already
+                //   col = col.replace(/(?<!^)"(?!$)/g, '""')
+
+                //   if (col.search(/,/g) > -1 ||
+                //       col.search(/\r|\n/g) > -1
+                //   ) {
+                //     // Missing quotes at the end
+                //     if (col.search(/"$/g) < 0) {
+                //       col = col + '"' // So we add them
+                //     }
+
+                //     // Missing quotes at the start
+                //     if (col.search(/^"/g) < 0) {
+                //       col = '"' + col // So we add them
+                //     }
+                //   }
+                // }
+
+                const colName = parseParams.headerShow[index]
+                const colRule = parseParams.dcValidator?.getRule(colName)
+
+                if (colRule?.type === 'numeric') {
+                  if (isSpecialMissing(col) && !col.includes('.'))
+                    col = '.' + col
+                }
+
+                return col
+              })
+            })
+
+            data = csvArrayData
+
+            // Apply licence rows limitation if exists, it is only affecting data
+            // which will be send to SAS
+            const strippedCsvArrayData = csvArrayData.slice(
+              0,
+              this.licenceState.value.submit_rows_limit
+            )
+            // To submit to sas service, we need clean version of CSV of file
+            // attached. XLSX will do the parsing and heavy lifting
+            // First we create worksheet of json (data we extracted)
+            let ws = XLSX.utils.json_to_sheet(strippedCsvArrayData, {
+              skipHeader: true
+            })
+            // create CSV to be uploaded from worksheet
+            let csvContentClean = XLSX.utils.sheet_to_csv(ws)
+            // Prepend headers
+            csvContentClean = csvArrayHeaders.join(',') + '\n' + csvContentClean
+
+            // Blob from which CSV file will be created depending of the selected
+            // encoding
+            let blob: Blob
+
+            if (parseParams.encoding === 'WLATIN1') {
+              // WLATIN1
+              let encoded = iconv.decode(
+                Buffer.from(csvContentClean),
+                'CP-1252'
+              )
+              blob = new Blob([encoded], { type: 'application/csv' })
+            } else {
+              // UTF-8
+              blob = new Blob([csvContentClean], { type: 'application/csv' })
+            }
+
+            let newCSVFile: File = blobToFile(blob, filename + '.csv')
+            uploader.addToQueue([newCSVFile])
+          }
+
+          if (data.length === 0) {
+            return reject(
+              `Table in the file is empty. Data found on sheet: ${foundData.sheet}`
+            )
+          }
+
+          return resolve({
+            uploader,
+            data,
+            rangeSheetRes,
+            headerShow: parseParams.headerShow
+          })
+        }
+        reader.readAsArrayBuffer(file)
+      } else if (fileType.toLowerCase() === 'csv') {
+        if (this.licenceState.value.submit_rows_limit !== Infinity) {
+          uploader.queue.pop()
+          return reject(
+            'Excel files only. To unlock CSV uploads, please contact support@datacontroller.io'
+          )
+        }
+
+        if (parseParams.encoding === 'WLATIN1') {
+          let reader = new FileReader()
+          const self = this
+          // Closure to capture the file information.
+          reader.onload = (theFile: any) => {
+            let encoded = iconv.decode(
+              Buffer.from(theFile.target.result),
+              'CP-1252'
+            )
+            let blob = new Blob([encoded], { type: fileType })
+            let encodedFile: File = blobToFile(blob, filename)
+            uploader.queue.pop()
+            uploader.addToQueue([encodedFile])
+
+            resolve({
+              uploader
+            })
+          }
+
+          reader.readAsArrayBuffer(file)
+        } else {
+          return resolve({
+            uploader
+          })
+        }
+      } else {
+        let abortMsg =
+          'Invalid file type "<b>' +
+          filename +
+          '</b>". Please upload csv or excel file.'
+
+        uploader.queue.pop()
+        return reject(abortMsg)
+      }
+    })
+  }
+
+  /**
+   * Function that gives the sheet name which contains data and range of data in that sheet, if some headers are missing then also gives the info about those missing headers
+   * @param wb Excel workbook
+   * @returns {object: SheetInfo} an object which contains necessary information about workbook that which sheet contains required data and what's the range
+   */
+  private getRangeAndSheet(
+    wb: XLSX.WorkBook,
+    parseParams: ParseParams
+  ): SheetInfo {
+    let data = []
+
+    let rangeStartRow: number = 0
+    let rangeStartCol: number = 0
+    let startRow: number = -1
+    let endRow: number = -1
+    let sheetName: string = ''
+    let isComplete = false
+    let missingHeaders: string[] = []
+    const csvArrayHeaders: string[] = [
+      '_____DELETE__THIS__RECORD_____',
+      ...parseParams.headerArray
+    ]
+    let csvArrayHeadersLower = csvArrayHeaders.map((x) => x.toLowerCase())
+    let csvArrayHeadersMap = csvArrayHeadersLower.reduce(
+      (map: any, obj: string) => {
+        map[obj] = -1
+        return map
+      },
+      {}
+    )
+
+    wb.SheetNames.forEach((element: string) => {
+      // Checking for required data in each sheet in workbook/
+      if (isComplete) {
+        return
+      }
+
+      missingHeaders = []
+      sheetName = element
+      const ws: XLSX.WorkSheet = wb.Sheets[sheetName]
+
+      data = <AOA>XLSX.utils.sheet_to_json(ws, {
+        header: 1,
+        blankrows: true, // Without empty rows, if another table is below a table separated by the empty rows, startRow index is wrong
+        defval: ''
+      })
+
+      if (data.length <= 1) {
+        return
+      }
+
+      let tempArr: string[] = []
+      parseParams.headerArray.forEach(() => tempArr.push(''))
+      data.push(tempArr)
+
+      let foundHeaders = false
+
+      data.forEach((row: any, index: number) => {
+        if (isComplete) {
+          return
+        }
+
+        if (foundHeaders) {
+          let isDataEnd = true
+          let isPkNull = false
+
+          csvArrayHeadersLower.forEach((x) => {
+            const col = csvArrayHeadersMap[x]
+
+            if (row[col] !== '' && row[col] !== undefined) {
+              isDataEnd = false
+            } else {
+              if (parseParams.headerPks.indexOf(x.toUpperCase()) !== -1) {
+                isPkNull = true
+              }
+            }
+          })
+
+          if (isDataEnd || isPkNull) {
+            endRow = index
+            isComplete = true
+          } else {
+            if (startRow === -1) {
+              startRow = index
+            }
+          }
+        } else {
+          const rowLowerCase: string[] = row.map((x: any) =>
+            x.toString().toLowerCase()
+          )
+
+          // If in file there is no delete column, remove it from search of missing.
+          // This way delete column will be optional to provide in file
+          if (!rowLowerCase.includes('_____delete__this__record_____')) {
+            const deleteIndex = csvArrayHeadersLower.indexOf(
+              '_____delete__this__record_____'
+            )
+
+            if (deleteIndex > -1) csvArrayHeadersLower.splice(deleteIndex, 1)
+          }
+
+          foundHeaders = true
+
+          csvArrayHeadersLower.forEach((x) => {
+            if (rowLowerCase.indexOf(x) === -1) {
+              foundHeaders = false
+            }
+          })
+
+          let result = []
+
+          result = this.findValidHeaders(
+            rowLowerCase,
+            csvArrayHeadersLower,
+            index,
+            sheetName,
+            parseParams
+          )
+
+          if (result[0] === false) {
+            foundHeaders = false
+
+            if (result[1].length > 0) {
+              result[1].forEach((data: string) => {
+                missingHeaders.push(data)
+              })
+            }
+          } else {
+            csvArrayHeadersMap = result[1]
+          }
+        }
+      })
+
+      if (isComplete) {
+        this.update_sheet_range(ws)
+        const worksheetSel = ws['!ref']
+
+        if (worksheetSel) {
+          const range = XLSX.utils.decode_range(ws['!ref'] || '')
+          rangeStartRow = range.s.r
+          rangeStartCol = range.s.c
+        }
+      }
+    })
+
+    // If start row is still -1 that means first row of found range is empty
+    if (startRow === -1) isComplete = false
+
+    const returnObj: SheetInfo = {
+      foundData: isComplete,
+      sheetName,
+      startRow,
+      endRow,
+      csvArrayHeadersMap,
+      missingHeaders,
+      rangeStartRow,
+      rangeStartCol
+    }
+
+    return returnObj
+  }
+
+  private findValidHeaders(
+    row: string[],
+    headers: string[],
+    rowNumber: number,
+    tabName: string,
+    parseParams: ParseParams
+  ): Array<any> {
+    let headersFound = false
+    const missingErrorArray = []
+    let j = 0
+
+    while (j < row.length) {
+      if (headersFound) {
+        // return;
+      } else {
+        if (headers.indexOf(row[j]) !== -1) {
+          let breakIndex
+          let rowStart = 0
+          let rowEnd = 0
+          let arrStart = 0
+          let foundHeadersArray: string[] = []
+          let spaceBreak = false
+
+          for (let i = j; i < row.length; i++) {
+            if (
+              row[i] === '' ||
+              (foundHeadersArray.indexOf(row[i]) !== -1 &&
+                this.isColHeader(row[i], parseParams.headerArray))
+            ) {
+              if (row[i] === '') {
+                spaceBreak = true
+              }
+
+              breakIndex = i
+              break
+            } else {
+              foundHeadersArray.push(row[i])
+            }
+          }
+
+          let tempArray: string[] = []
+
+          if (breakIndex !== undefined) {
+            tempArray = row.slice(j, breakIndex)
+            arrStart = j
+            rowEnd = breakIndex
+
+            if (spaceBreak) {
+              rowStart = j
+              j = breakIndex
+            } else {
+              rowStart = j
+              j = breakIndex - 1
+            }
+          } else {
+            tempArray = row.slice(j)
+            rowStart = j
+            arrStart = j
+            rowEnd = row.length
+            j = row.length
+          }
+
+          let foundHeaders = true
+
+          //We check if there are missing headers
+          headers.forEach((x) => {
+            if (tempArray.indexOf(x) === -1) {
+              foundHeaders = false
+            }
+          })
+
+          if (foundHeaders) {
+            headersFound = true
+
+            let mapHeaders: any[] = headers
+
+            let csvArrayHeadersMap = mapHeaders.reduce(function (map, obj) {
+              map[obj] = -1
+              return map
+            }, {})
+
+            let temp = row.slice(rowStart, rowEnd)
+
+            headers.forEach((x) => {
+              csvArrayHeadersMap[x] = temp.indexOf(x) + rowStart
+            })
+
+            return [true, csvArrayHeadersMap]
+          } else {
+            let missingHeaders = getMissingHeaders(tempArray, headers)
+
+            let missingMessage = '<b>TAB(' + tabName + ')</b>'
+            missingErrorArray.push([
+              missingMessage +
+                ' - ' +
+                missingHeaders[1].join(',') +
+                ' ( missing ' +
+                missingHeaders[0].join(',') +
+                ' )',
+              missingHeaders[1].length
+            ])
+          }
+        }
+      }
+      j++
+    }
+    return [false, missingErrorArray]
+  }
+
+  private isColHeader(col: string, headerArray: string[]) {
+    return headerArray.indexOf(col.toUpperCase()) > -1
+  }
+
+  /**
+   * Function that updates the !ref range value provided in official docs.
+   * @param ws worksheet to be updated
+   */
+  private update_sheet_range(ws: XLSX.WorkSheet) {
+    const range = { s: { r: Infinity, c: Infinity }, e: { r: 0, c: 0 } }
+
+    Object.keys(ws)
+      .filter(function (x) {
+        return x.charAt(0) != '!'
+      })
+      .map(XLSX.utils.decode_cell)
+      .forEach(function (x: any) {
+        range.s.c = Math.min(range.s.c, x.c)
+        range.s.r = Math.min(range.s.r, x.r)
+        range.e.c = Math.max(range.e.c, x.c)
+        range.e.r = Math.max(range.e.r, x.r)
+      })
+
+    ws['!ref'] = XLSX.utils.encode_range(range)
+  }
+
+  /**
+   * When excel is password protected we will display the password prompt for user to type password in.
+   * @returns Password user input or undefined if discarded by user
+   */
+  private promptExcelPassword(): Promise<string | undefined> {
+    return new Promise((resolve, reject) => {
+      this.excelPasswordModalService.open().subscribe((result: Result) => {
+        resolve(result.password)
+      })
+    })
+  }
+
+  private updateDateTimeCols(
+    headers: any,
+    data: any,
+    parseParams: ParseParams
+  ) {
+    if (parseParams.dateHeaders.length > 0) {
+      const dateCols: number[] = []
+      parseParams.dateHeaders.forEach((element) => {
+        if (headers.indexOf(element) !== -1) {
+          dateCols.push(headers.indexOf(element))
+        }
+      })
+      data.forEach((row: any[]) => {
+        dateCols.forEach((element) => {
+          const obj = row[element]
+          if (isStringNumber(obj.v)) {
+            const date = excelDateToJSDate(Number(obj.v))
+
+            obj.v =
+              date.getFullYear() +
+              '-' +
+              ('0' + (date.getMonth() + 1)).slice(-2) +
+              '-' +
+              ('0' + date.getDate()).slice(-2)
+          } else {
+            if (obj && obj.v && obj.v.toString().indexOf(':') === -1) {
+              const date = new Date(obj.v)
+              if (date.toUTCString() !== 'Invalid Date') {
+                obj.v = dateFormat(date)
+              }
+            }
+          }
+          row[element] = obj
+        })
+      })
+    }
+    if (parseParams.timeHeaders.length > 0) {
+      let timeCols: number[] = []
+      parseParams.timeHeaders.forEach((element) => {
+        if (headers.indexOf(element) !== -1) {
+          timeCols.push(headers.indexOf(element))
+        }
+      })
+      data.forEach((row: any[]) => {
+        timeCols.forEach((element) => {
+          const obj = row[element]
+          if (
+            isStringNumber(obj.v) ||
+            isStringDecimal(obj.v) ||
+            obj.v.includes('E-')
+          ) {
+            const date = excelDateToJSDate(Number(obj.v))
+
+            obj.v = dateToUtcTime(date)
+          }
+          row[element] = obj
+        })
+      })
+    }
+    if (parseParams.dateTimeHeaders.length > 0) {
+      let dateTimeCols: number[] = []
+      parseParams.dateTimeHeaders.forEach((element) => {
+        if (headers.indexOf(element) !== -1) {
+          dateTimeCols.push(headers.indexOf(element))
+        }
+      })
+      data.forEach((row: any[]) => {
+        dateTimeCols.forEach((element) => {
+          const obj = row[element]
+          if (isStringNumber(obj.v) || isStringDecimal(obj.v)) {
+            const date = excelDateToJSDate(Number(obj.v))
+            obj.v = dateFormat(date) + ' ' + dateToUtcTime(date)
+          } else {
+            if (obj.v.indexOf(' ') === -1 && obj.v.indexOf(':') !== -1) {
+              let str = obj.v.substring(0, obj.v.indexOf(':'))
+              str = str + ' ' + obj.v.substring(obj.v.indexOf(':') + 1)
+              obj.v = str
+            }
+            const date = new Date(obj.v)
+            if (date.toUTCString() !== 'Invalid Date') {
+              obj.v = dateFormat(date) + ' ' + dateToTime(date)
+            }
+          }
+          row[element] = obj
+        })
+      })
+    }
+    return data
+  }
+
+  private updateXLRuleCols(headers: any, data: any, parseParams: ParseParams) {
+    if (parseParams.xlRules.length > 0) {
+      const xlRuleCols: any = []
+      parseParams.xlRules.forEach((element: any) => {
+        if (headers.indexOf(element.XL_COLUMN) !== -1) {
+          element['index'] = headers.indexOf(element.XL_COLUMN)
+          xlRuleCols.push(element)
+        }
+      })
+      data.forEach((row: any[]) => {
+        xlRuleCols.forEach((element: any) => {
+          const obj = row[element.index]
+          if (element.XL_RULE === 'FORMULA') {
+            if ('f' in obj) {
+              if (obj['t'] === 'n') {
+                obj['v'] = '=' + obj['f']
+              } else {
+                obj['w'] = '=' + obj['f']
+              }
+            }
+          }
+          row[element] = obj
+        })
+      })
+    }
+    return data
+  }
+
+  private toBstr(res: any) {
+    let bytes = new Uint8Array(res)
+    let binary = ''
+    let length = bytes.byteLength
+    for (let i = 0; i < length; i++) {
+      binary += String.fromCharCode(bytes[i])
+    }
+    return binary
+  }
+}

client/src/app/shared/autocomplete/autocomplete.component.scss

@@ -1,6 +1,6 @@
 .input-val {
   border: 0px;
-  background: #fbf8f8;
+  background: transparent;
   border-bottom: 1px solid #999999;
 }
 
@@ -13,6 +13,29 @@ input {
   }
 }
 
+::ng-deep {
+  body[cds-theme="dark"] {
+    .datalist {
+      background: #21333b;
+      border: 1px solid #575757;
+    }
+
+    input {
+      color: #fff;
+    }
+
+    .datalist option {
+      color: #fff
+    }
+  }
+
+  body[cds-theme="light"] {
+    .datalist {
+      background: #fff;
+    }
+  }
+}
+
 .autocomplete-wrapper {
   .overlay {
     position: fixed;
@@ -25,7 +48,6 @@ input {
 
   .datalist {
       position: fixed;
-      background: white;
       box-shadow: 0px 3px 10px -1px #0000002b;
       overflow: auto;
       z-index: 2000;

client/src/app/shared/dc-tree/dc-tree.component.html

@@ -2,6 +2,7 @@
   <clr-tree-node *ngIf="libraryList" class="search-node">
     <div class="tree-search-wrapper">
       <input
+        appStealFocus
         clrInput
         #searchLibTreeInput
         placeholder="Libraries"
@@ -45,6 +46,7 @@
       <clr-tree-node *ngIf="library['tables']" class="search-node">
         <div class="tree-search-wrapper">
           <input
+            appStealFocus
             clrInput
             #searchTreeInput
             placeholder="Tables"
@@ -91,7 +93,7 @@
             "
             class="clr-treenode-link"
             [class.dc-locked-control]="tableLocked"
-            [class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
+            [class.active]="libTabActive(library.LIBRARYREF, libTable)"
           >
             <ng-container [ngSwitch]="libTable.includes('-FC')">
               <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
@@ -114,6 +116,7 @@
             <clr-tree-node *ngIf="libTable['columns']" class="search-node">
               <div class="tree-search-wrapper">
                 <input
+                  appStealFocus
                   clrInput
                   #searchTreeInput
                   placeholder="Columns"

client/src/app/shared/excel-password-modal/excel-password-modal.component.html

@@ -0,0 +1,38 @@
+<ng-container *ngIf="options$ | async as options">
+  <clr-modal
+    [clrModalOpen]="options.open"
+    [clrModalSize]="'md'"
+    [clrModalClosable]="false"
+  >
+    <h3 class="modal-title center text-center color-darker-gray">
+      Password Protected File
+    </h3>
+    <div class="modal-body d-flex clr-justify-content-center">
+      <p class="m-0">Please enter password:</p>
+      <input
+        #filePasswordInput
+        data-lpignore="true"
+        autocomplete="off"
+        id="filePasswordInput"
+        type="text"
+        class="clr-input disable-password-manager"
+      />
+    </div>
+    <div class="modal-footer">
+      <p *ngIf="options.error" class="m-0 color-red">
+        Sorry that didn't work, try again.
+      </p>
+      <button type="button" class="btn btn-sm btn-outline" (click)="close()">
+        Cancel
+      </button>
+      <button
+        type="button"
+        class="btn btn-sm btn-success-outline"
+        [disabled]="filePasswordInput.value.length < 1"
+        (click)="close(filePasswordInput.value)"
+      >
+        Unlock
+      </button>
+    </div>
+  </clr-modal>
+</ng-container>

client/src/app/shared/excel-password-modal/excel-password-modal.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core'
+import { Observable } from 'rxjs'
+import {
+  ExcelPasswordModalService,
+  Options
+} from './excel-password-modal.service'
+
+@Component({
+  selector: 'app-excel-password-modal',
+  templateUrl: './excel-password-modal.component.html'
+})
+export class ExcelPasswordModalComponent {
+  options$: Observable<Options>
+
+  fileUnlockError: boolean = false
+
+  constructor(private excelPasswordModalService: ExcelPasswordModalService) {
+    this.options$ = this.excelPasswordModalService.optionsSubject$
+  }
+
+  close(password?: string) {
+    this.excelPasswordModalService.close(password)
+  }
+}

client/src/app/shared/excel-password-modal/excel-password-modal.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core'
+import { Subject, Observable } from 'rxjs'
+
+export interface Options extends OpenOptions {
+  open: boolean
+}
+
+export interface Result {
+  password: string | undefined
+}
+
+export interface OpenOptions {
+  error?: boolean
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExcelPasswordModalService {
+  public optionsSubject$: Subject<Options> = new Subject()
+  public resultChange$: Subject<Result> = new Subject()
+
+  constructor() {}
+
+  public open(openOptions?: OpenOptions): Observable<Result> {
+    this.optionsSubject$.next({
+      open: true,
+      ...openOptions
+    })
+
+    this.resultChange$ = new Subject<Result>()
+    return this.resultChange$.asObservable()
+  }
+
+  close(password?: string) {
+    this.optionsSubject$.next({
+      open: false
+    })
+
+    this.resultChange$.next({
+      password
+    })
+    this.resultChange$.complete()
+  }
+}

client/src/app/shared/login/login.component.scss

@@ -1,5 +1,7 @@
+@import '../../../colors.scss';
+
 .sideBarProps {
-  background: #314351!important;
+  background: $headerBackground !important;
   color: #e0e0e0;
 }
 

client/src/app/shared/requests-modal/requests-modal.component.scss

@@ -61,21 +61,6 @@
     }
 }
 
-.log-wrapper {
-    min-height: 50px;
-    padding: 10px;
-    margin-top: 10px;
-
-    white-space: pre-wrap;
-    border-radius: 3px;
-
-    border: 1px solid #e2e2e2;
-    background-color: #fbfbfb;
-
-    height: 48vh;
-    overflow: auto;
-}
-
 .no-reqs {
     border-top: 1px solid #0000001a;
     padding-top: 5px;

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

@@ -14,6 +14,7 @@ import { TermsComponent } from './terms/terms.component'
 import { DirectivesModule } from '../directives/directives.module'
 import { DatasetInfoComponent } from './dataset-info/dataset-info.component'
 import { ContactLinkComponent } from './contact-link/contact-link.component'
+import { ExcelPasswordModalComponent } from './excel-password-modal/excel-password-modal.component'
 
 @NgModule({
   imports: [
@@ -30,7 +31,8 @@ import { ContactLinkComponent } from './contact-link/contact-link.component'
     AlertsComponent,
     TermsComponent,
     DatasetInfoComponent,
-    ContactLinkComponent
+    ContactLinkComponent,
+    ExcelPasswordModalComponent
   ],
   exports: [
     LoadingIndicatorComponent,
@@ -39,7 +41,8 @@ import { ContactLinkComponent } from './contact-link/contact-link.component'
     AlertsComponent,
     TermsComponent,
     DatasetInfoComponent,
-    ContactLinkComponent
+    ContactLinkComponent,
+    ExcelPasswordModalComponent
   ],
   providers: [UserService, AlertsService]
 })

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

@@ -124,8 +124,17 @@
           routerLinkActive="active"
           >Tables</a
         >
-        <a clrVerticalNavLink routerLink="/home/files" routerLinkActive="active"
+        <a
-          >Files</a
+          clrVerticalNavLink
+          routerLink="/home/excel-maps"
+          routerLinkActive="active"
+          >Excel Maps</a
+        >
+        <a
+          clrVerticalNavLink
+          routerLink="/home/multi-load"
+          routerLinkActive="active"
+          >Multi Load</a
         >
       </clr-dropdown-menu>
     </clr-dropdown>

client/src/app/shared/sidebar/sidebar.component.scss

@@ -1,5 +1,10 @@
 $sidebarWidth: 272px;
 
+.clr-vertical-nav .nav-link.active {
+    background-color: transparent;
+    padding-left: 5px;
+}
+
 clr-vertical-nav {
     width: $sidebarWidth;
     min-width: $sidebarWidth;
@@ -7,7 +12,6 @@ clr-vertical-nav {
     max-width: 375px;
     position: relative;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
-    background-color: white !important;
 
     .sun-dropdown {
         min-height: 36px

client/src/app/shared/soft-select/soft-select.component.scss

@@ -1,6 +1,6 @@
 .input-val {
     border: 0px;
-    background: #fbf8f8;
+    background: transparent;
     border-bottom: 1px solid #999999;
 }
 

client/src/app/shared/terms/terms.component.scss

@@ -19,8 +19,6 @@
   .card-block {
     flex: 1;
     overflow: auto;
-
-    background-color: #f4f4f4;
   }
 }
 

client/src/app/shared/user-nav-dropdown/header-actions.component.html

@@ -1,4 +1,25 @@
 <div class="header-actions">
+  <div class="d-flex clr-align-items-center">
+    <cds-icon
+      *ngIf="!darkMode.value"
+      (click)="toggleDarkMode(true)"
+      size="md"
+      class="theme-toggle-icon cursor-pointer"
+      shape="moon"
+      inverse="false"
+      solid="false"
+    ></cds-icon>
+    <cds-icon
+      *ngIf="!!darkMode.value"
+      (click)="toggleDarkMode(false)"
+      size="md"
+      class="theme-toggle-icon cursor-pointer"
+      shape="sun"
+      inverse="false"
+      solid="false"
+    ></cds-icon>
+  </div>
+
   <app-loading-indicator></app-loading-indicator>
 
   <clr-dropdown class="app-nav-dropdown">

client/src/app/shared/user-nav-dropdown/header-actions.component.scss

@@ -65,9 +65,6 @@ $clr-light-gray: #eee;
       height: 45px;
       line-height: 40px;
 
-      span.dropdown-text{
-        color: $clr-dark-gray;
-      }
 
       .badge {
         position: absolute;

client/src/app/shared/user-nav-dropdown/header-actions.component.ts

@@ -26,6 +26,7 @@ export class HeaderActions implements OnInit, OnDestroy {
   public sasjsConfig: SASjsConfig = new SASjsConfig()
   public requestsCount: number = 0
   public commitVer: string = ''
+  public darkMode = this.eventService.darkMode
 
   constructor(
     private userService: UserService,
@@ -51,6 +52,10 @@ export class HeaderActions implements OnInit, OnDestroy {
     this.userSub.unsubscribe()
   }
 
+  toggleDarkMode(value: boolean) {
+    this.eventService.toggleDarkMode(value)
+  }
+
   openRequestsModal() {
     this.eventService.openRequestsModal()
   }

client/src/app/shared/utils/hot.utils.ts

@@ -0,0 +1,13 @@
+import { globals } from '../../_globals'
+
+/**
+ * Function reused in HOT instances to add a class used for dark mode
+ */
+export const baseAfterGetColHeader = (
+  column: number,
+  TH: HTMLTableCellElement,
+  headerLevel: number
+) => {
+  // Dark mode
+  TH.classList.add(globals.handsontable.darkTableHeaderClass)
+}

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

@@ -389,6 +389,7 @@
         *ngIf="viewboxTableIndex > -1"
         [hotId]="'hotInstance_viewbox_' + viewbox.id"
         id="hotTable"
+        className="htDark"
         [readOnly]="true"
         [modifyColWidth]="maxWidthCheker"
         [copyPaste]="viewboxTables[viewboxTableIndex].hotTable.copyPaste"

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

@@ -38,6 +38,10 @@ dc-tree {
 .add-new {
   width: 50%;
   padding-right: 5px;
+
+  > p {
+    margin-bottom: 1px;
+  }
 }
 
 .viewbox-limit-notice {
@@ -45,6 +49,38 @@ dc-tree {
   color: #E74C3C
 }
 
+::ng-deep body[cds-theme="dark"] {
+  .currently-open .open-viewbox:hover {
+    background: #314b57;
+  }
+
+  .cols-list {
+    background: #314b57;
+    color: #fff;
+    border-color: #858585;
+  }
+
+  .col-box {
+    background: #314b57;
+    border-color: #858585;
+    color: inherit;
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  .currently-open .open-viewbox:hover {
+    background: #e8e8e8;
+  }
+
+  .cols-list {
+    background: #fff;
+  }
+
+  .col-box {
+    background: #fff;
+  }
+}
+
 .currently-open {
   width: 50%;
 
@@ -55,10 +91,6 @@ dc-tree {
     &.selected {
       background: #3c85002e;
     }
-
-    &:hover {
-      background: #e8e8e8;
-    }
   }
 }
 
@@ -180,7 +212,6 @@ dc-tree {
 .cols-list {
   border: solid 1px #ccc;
   min-height: 60px;
-  background: white;
   border-radius: 4px;
   overflow: hidden;
   display: block;
@@ -199,7 +230,6 @@ dc-tree {
   justify-content: space-between;
   box-sizing: border-box;
   cursor: move;
-  background: white;
   font-size: 14px;
 
   &.search:focus {

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

@@ -433,6 +433,8 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
                   viewboxTable!.hotTable.headerPks.indexOf(column) > -1
 
                 if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
+                // Dark mode
+                th.classList.add(globals.handsontable.darkTableHeaderClass)
               }
             })
             hotInstance?.render()
@@ -1076,7 +1078,7 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
     const hotInstance = this.getViewboxHotInstance(viewboxId)
 
     if (hotInstance) {
-      const column = hotInstance.propToCol(colProp)
+      const column = hotInstance.propToCol(colProp) as number
       const plugin = hotInstance.getPlugin('manualColumnMove')
 
       plugin.moveColumn(column, finalIndex)
@@ -1141,7 +1143,7 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
 
     if (hotInstance) {
       const columns = colProps.map((prop: string) => {
-        return hotInstance.propToCol(prop)
+        return hotInstance.propToCol(prop) as number
       })
 
       hotInstance.updateSettings({

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

@@ -16,7 +16,7 @@
         </div>
       </div>
       <div class="clr-row" ng-if="loaded">
-        <div class="card-block clr-col-md-6">
+        <div class="card-block clr-col-md-6 no-borders">
           <div class="card-header py-5">
             <div class="card-title text-center">Basic Submitted Details</div>
           </div>
@@ -51,7 +51,7 @@
             </span>
           </div>
         </div>
-        <div class="clr-col-md-6 card-block">
+        <div class="clr-col-md-6 card-block no-borders">
           <div class="card-header py-5">
             <div class="card-title text-center">Actions</div>
           </div>
@@ -65,6 +65,7 @@
                 View base table
               </button>
               <button
+                *ngIf="!(tableDetails?.['ALLOW_RESTORE'] === 'YES')"
                 id="approval-btn"
                 class="btn btn-sm btn-success-outline text-center mr-5i"
                 [disabled]="
@@ -117,12 +118,14 @@
         <hot-table
           hotId="hotInstance"
           id="hotTable"
+          className="htDark"
           [data]="hotTable.data"
           [colHeaders]="hotTable.colHeaders"
           [columns]="hotTable.columns"
           [maxRows]="hotTable.maxRows"
           [height]="hotTable.height"
           [licenseKey]="hotTable.licenseKey"
+          [afterGetColHeader]="hotTable.afterGetColHeader"
           stretchH="all"
           [cells]="hotTable.cells"
         >

client/src/app/stage/stage.component.scss

@@ -12,4 +12,10 @@
   cursor:pointer;
   margin-top:10px;
   color: #007cbb;
+}
+
+::ng-deep body[cds-theme="dark"] {
+  .baseTableLink {
+    color: #4ec0ff;
+  }
 }

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

@@ -32,7 +32,11 @@ export class StageComponent implements OnInit {
     height: 500,
     settings: {},
     licenseKey: undefined,
-    maxRows: this.licenceState.value.stage_rows_allowed || Infinity
+    maxRows: this.licenceState.value.stage_rows_allowed || Infinity,
+    afterGetColHeader: (column, th, headerLevel) => {
+      // Dark mode
+      th.classList.add(globals.handsontable.darkTableHeaderClass)
+    }
   }
 
   constructor(
@@ -62,7 +66,7 @@ export class StageComponent implements OnInit {
     )
     if (xlmap) {
       const id = this.hotTable.data[0].XLMAP_ID
-      this.route.navigateByUrl('/home/files/' + id)
+      this.route.navigateByUrl('/home/excel-maps/' + id)
     } else {
       this.route.navigateByUrl('/editor/' + this.tableDetails.BASE_TABLE)
     }

client/src/app/system/models/environment-info.model.ts

@@ -6,6 +6,7 @@ export interface EnvironmentInfo {
   MEMSIZE: string
   SYSPROCESSMODE: string
   SYSHOSTNAME: string
+  SYSUSERID: string
   SYSHOSTINFOLONG: string
   SYSENCODING: string
   AUTOEXEC: string

client/src/app/system/system.component.html

@@ -36,6 +36,10 @@
             SYSHOSTNAME:
             <span class="dark">{{ environmentInfo?.SYSHOSTNAME }}</span>
           </p>
+          <p cds-text="label" class="m-0">
+            SYSUSERID:
+            <span class="dark">{{ environmentInfo?.SYSUSERID }}</span>
+          </p>
           <p cds-text="label" class="m-0">
             SYSHOSTINFOLONG:
             <span class="dark">{{ environmentInfo?.SYSHOSTINFOLONG }}</span>
@@ -47,10 +51,6 @@
           <p cds-text="label" class="m-0">
             AUTOEXEC: <span class="dark">{{ environmentInfo?.AUTOEXEC }}</span>
           </p>
-          <p cds-text="label" class="m-0">
-            DC ADMIN GROUP:
-            <span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
-          </p>
         </div>
 
         <div class="d-flex clr-justify-content-lg-center">
@@ -73,6 +73,10 @@
             <p cds-text="label" class="m-0">
               HTTP: <span class="dark">{{ http ? 'YES' : 'NO' }}</span>
             </p>
+            <p cds-text="label" class="m-0">
+              DC Admin Group:
+              <span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
+            </p>
           </div>
         </div>
 
@@ -190,6 +194,16 @@
 
       <hr class="w-100 light" />
 
+      <!-- Keep the logic in case we in future have more then 2 themes (light, dark) -->
+      <!-- -->
+      <!-- <div class="user-action">
+        Keep selected theme after reload
+
+        <clr-checkbox-wrapper>
+        <input [(ngModel)]="settings.persistSelectedTheme" (change)="settingChange($event)" value="persistDarkMode" type="checkbox" clrToggle />
+        </clr-checkbox-wrapper>
+      </div> -->
+
       <ng-container *ngIf="environmentInfo?.ISADMIN === 1">
         <div *ngIf="serverType === 'SAS9'" class="admin-action">
           Refresh Data Lineage

client/src/app/system/system.component.scss

@@ -12,7 +12,7 @@
     }
 }
 
-.admin-action {
+.admin-action, .user-action {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -27,7 +27,8 @@
 }
 
 .dark {
-    color: black;
+    font-weight: bold;
+    margin-left: 5px;
 }
 
 @media (max-width: 993px) {

client/src/app/system/system.component.ts

@@ -7,6 +7,8 @@ import { LicenceService } from '../services/licence.service'
 import { SasService } from '../services/sas.service'
 import { AppInfo } from './models/app-info.model'
 import { EnvironmentInfo } from './models/environment-info.model'
+import { AppSettingsService } from '../services/app-settings.service'
+import { AppSettings } from '../models/AppSettings'
 
 @Component({
   selector: 'app-system',
@@ -36,25 +38,36 @@ export class SystemComponent implements OnInit {
   Infinity = Infinity
 
   licenceState = this.licenceService.licenceState
+  settings: AppSettings
 
   constructor(
     private appService: AppService,
     private sasService: SasService,
-    private licenceService: LicenceService
+    private licenceService: LicenceService,
+    private appSettingsService: AppSettingsService
   ) {
     this.serverType = this.sasService.getServerType()
     this.licenceInfo = this.licenceService.getLicenseKeyData()
     this.environmentInfo = this.appService.getEnvironmentInfo()
+    this.settings = this.appSettingsService.settings.value
 
     if (this.environmentInfo) {
       this.environmentInfo.AUTOEXEC = decodeURIComponent(
         this.environmentInfo.AUTOEXEC
       )
     }
+
+    this.appSettingsService.settings.subscribe((settings: AppSettings) => {
+      this.settings = settings
+    })
   }
 
   ngOnInit(): void {}
 
+  settingChange(event: Event) {
+    this.appSettingsService.setAppSettings(this.settings)
+  }
+
   downloadConfiguration() {
     let sasjsConfig = this.sasService.getSasjsConfig()
     let storage = sasjsConfig.serverUrl

client/src/app/system/system.module.ts

@@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common'
 import { SystemRoutingModule } from './system-routing.module'
 import { SystemComponent } from './system.component'
 import { ClarityModule } from '@clr/angular'
+import { FormsModule } from '@angular/forms'
 
 @NgModule({
   declarations: [SystemComponent],
-  imports: [CommonModule, SystemRoutingModule, ClarityModule]
+  imports: [CommonModule, SystemRoutingModule, ClarityModule, FormsModule]
 })
 export class SystemModule {}

client/src/app/user/user.component.html

@@ -3,6 +3,7 @@
     <clr-tree-node *ngIf="users" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Filter by Users"
@@ -26,7 +27,7 @@
       <clr-tree-node
         (click)="userOnClick(user)"
         *ngIf="!user['hidden']"
-        [class.table-active]="userInfo?.URI === user.URI"
+        [class.active]="userInfo?.URI === user.URI"
       >
         <p class="m-0 cursor-pointer list-padding">
           <clr-icon shape="user"></clr-icon>

client/src/app/user/user.component.scss

@@ -1,24 +1,61 @@
+@import '../../colors.scss';
+
 .sidebar-height{
     height: 100%;
 }
 .user-info-text{
-    display: inline;    
+    display: inline;
     font-size: 20px;
 }
+
+::ng-deep body[cds-theme="dark"] {
+    .user-info {
+        background-color: $headerBackground;
+        border-color: $headerBackground;
+    }
+
+    .user-data {
+        background-color: $headerBackground;
+        border-color: $headerBackground;
+    }
+
+    .user-table tbody{
+        tr:hover{
+            background-color: #29404b;
+        }
+    }
+}
+
+::ng-deep body[cds-theme="light"] {
+    .user-info {
+        background-color: #f9f9f9;
+        border-color: #a7a7a7;
+        box-shadow: 0px 2px 5px #dad7d7;
+    }
+
+    .user-data {
+        background-color: #f9f9f9;
+        border-color: #a7a7a7;
+        box-shadow: 0px 2px 5px #dad7d7;
+    }
+
+    .user-table tbody{
+        tr:hover{
+            background-color: #e6e6e6;
+        }
+    }
+}
+
 .user-info{
-    background-color: #f9f9f9;
+    border: 1px solid;
-    border: 1px solid #a7a7a7;
     border-radius: 3px;
-    box-shadow: 0px 2px 5px #dad7d7;
 }
 .user-info td{
     text-align: center;
 }
 .user-data{
-    background-color: #f9f9f9;
+    border: 1px solid;
-    border: 1px solid #a7a7a7;
     border-radius: 3px;
-    box-shadow: 0px 2px 5px #dad7d7;
 }
 .user-data{
     min-height: auto;
@@ -28,7 +65,6 @@
 }
 
 .user-table{
-    background-color: #f9f9f9;
     width: 100%;
 }
 .user-table thead{
@@ -36,7 +72,6 @@
 }
 .user-table tbody{
     tr:hover{
-        background-color: #e6e6e6;
         cursor: pointer;
     }
 }