chore(release): 6.9.0 [skip ci]

# [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](110ad9a6e9))
* added stealFocus directive ([9a79f37](9a79f37bf1))

### Features

* added app settings service to handle theme persistance, fix: optimised dark mode contrast ([35844e0](35844e0cf1))
* **dark mode:** clarity optimizations ([afa7e38](afa7e380aa))
* **dark mode:** lineage and metadata ([27907ed](27907ed00f))
* **dark mode:** refactoring clarity to enable dark mode, added toggle button ([5564aea](5564aea9c2))
* **dark mode:** removing custom css rules so clarity can handle dark/light modes. Handsontable css for dark mode ([2c0afd0](2c0afd0268))

.gitea/workflows/build.yaml

@@ -1,5 +1,5 @@
 name: Build
-run-name: Running Lint Check
+run-name: Running Lint Check and Licence checker on Pull Request
 on: [pull_request]
 
 jobs:
@@ -8,9 +8,16 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20.14.0
+
+      - name: Install Google Chrome
+        run: |
+          wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
+          echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
+          apt-get update
+          apt-get install -y google-chrome-stable xvfb
 
       - name: Write .npmrc file
         run: echo "$NPMRC" > client/.npmrc
@@ -18,8 +25,27 @@ jobs:
         env:
           NPMRC: ${{ secrets.NPMRC}}
 
-      - run: npm run lint:check
+      - name: Lint check
-      - run: |
+        run: npm run lint:check
+
+      - name: Install dependencies
+        run: |
           cd client
+          # Decrypt and Install sheet
+          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
           npm ci
+
+      - name: Licence checker
+        run: |
+          cd client
           npm run license-checker
+
+      - name: Angular Tests
+        run: |
+          cd client
+          npm run test:headless
+
+      - name: Production Build
+        run: |
+          cd client
+          npm run build

.gitea/workflows/development-test.yaml

@@ -1,226 +0,0 @@
-name: Test
-run-name: Building and testing development branch
-on:
-  push:
-    branches:
-      - development
-
-jobs:
-  Build-production-and-ng-test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Write .npmrc file
-        run: |
-         touch client/.npmrc
-         echo '${{ secrets.NPMRC}}' > client/.npmrc
-
-      - name: Install Chrome for Angular tests
-        run: |
-          apt-get update
-          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-          apt install -y ./google-chrome*.deb;
-          export CHROME_BIN=/usr/bin/google-chrome
-
-      - name: Write cypress credentials
-        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
-        shell: bash
-        env:
-          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Check audit
-      # Audit should fail and stop the CI if critical vulnerability found
-        run: |
-          npm audit --audit-level=critical --omit=dev
-          cd ./sas
-          npm audit --audit-level=critical --omit=dev
-          cd ../client
-          npm audit --audit-level=critical --omit=dev
-
-      - name: Angular Tests
-        run: |
-          cd client
-          npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
-
-      - name: Angular Production Build
-        run: |
-          cd client
-          npm run postinstall
-          npm run build
-
-  Build-and-test-development:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Write .npmrc file
-        run: |
-         touch client/.npmrc
-         echo '${{ secrets.NPMRC}}' > client/.npmrc
-
-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
-      - run: apt -y install jq
-
-      - name: Write cypress credentials
-        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
-        shell: bash
-        env:
-          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
-
-      - name: Deploy mocked services
-        run: |
-          cd ./sas/mocks/sasjs
-          npm install -g @sasjs/cli
-          npm install -g replace-in-files-cli
-          sasjs cbd -t server-ci
-          # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json
-
-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
-      - name: Prepare and run frontend and cypress
-        run: |
-          cd ./client
-          mv ./cypress.env.example.json ./cypress.env.json
-          replace-in-files --regex='"username".*' --replacement='"username":"'${{ secrets.CYPRESS_USERNAME_SASJS }}'",' ./cypress.env.json
-          replace-in-files --regex='"password".*' --replacement='"password":"'${{ secrets.CYPRESS_PWD_SASJS }}'" ' ./cypress.env.json
-          cat ./cypress.env.json
-          npm run postinstall
-          # Prepare index.html to SASJS local
-          replace-in-files --regex='serverUrl=".*?"' --replacement='serverUrl="http://localhost:5000"' ./src/index.html
-          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/Public/app/devtest"' ./src/index.html
-          replace-in-files --regex='serverType=".*?"' --replacement='serverType="SASJS"' ./src/index.html
-          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"
-
-      - name: Zip Cypress videos
-        if: always()
-        run: |
-          zip -r cypress-videos ./client/cypress/videos
-
-      - name: Cypress videos artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: cypress-videos.zip
-          path: cypress-videos.zip
-
-  Build-and-test-development-latest-adapter:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Write .npmrc file
-        run: echo "$NPMRC" > client/.npmrc
-        shell: bash
-        env:
-          NPMRC: ${{ secrets.NPMRC}}
-
-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
-      - run: apt -y install jq
-
-      - name: Write cypress credentials
-        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
-        shell: bash
-        env:
-          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
-
-      - name: Deploy mocked services
-        run: |
-          cd ./sas/mocks/sasjs
-          npm install -g @sasjs/cli
-          npm install -g replace-in-files-cli
-          sasjs cbd -t server-ci
-
-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
-      - name: Prepare and run frontend and cypress
-        run: |
-          cd ./client
-          mv ./cypress.env.example.json ./cypress.env.json
-          replace-in-files --regex='"username".*' --replacement='"username":"'${{ secrets.CYPRESS_USERNAME_SASJS }}'",' ./cypress.env.json
-          replace-in-files --regex='"password".*' --replacement='"password":"'${{ secrets.CYPRESS_PWD_SASJS }}'" ' ./cypress.env.json
-          cat ./cypress.env.json
-          npm run postinstall
-          npm install @sasjs/adapter@latest
-          # Prepare index.html to SASJS local
-          replace-in-files --regex='serverUrl=".*?"' --replacement='serverUrl="http://localhost:5000"' ./src/index.html
-          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/Public/app/devtest"' ./src/index.html
-          replace-in-files --regex='serverType=".*?"' --replacement='serverType="SASJS"' ./src/index.html
-          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"
-
-      - name: Zip Cypress videos
-        if: always()
-        run: |
-          zip -r cypress-videos ./client/cypress/videos
-
-      - name: Cypress videos artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: cypress-videos-latest-adapter.zip
-          path: cypress-videos.zip

.gitea/workflows/release.yaml

@@ -1,18 +1,164 @@
 name: Release
-run-name: Releasing DC
+run-name: Testing and Releasing DC
 on:
   push:
     branches:
       - main
 
 jobs:
-  release:
+  Build-production-and-ng-test:
     runs-on: ubuntu-latest
+
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20.14.0
+
+      - name: Write .npmrc file
+        run: |
+         touch client/.npmrc
+         echo '${{ secrets.NPMRC}}' > client/.npmrc
+
+      - name: Install Chrome for Angular tests
+        run: |
+          apt-get update
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb;
+          export CHROME_BIN=/usr/bin/google-chrome
+
+      - name: Write cypress credentials
+        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
+        shell: bash
+        env:
+          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
+
+      - name: Install dependencies
+        run: |
+          cd client
+          # Decrypt and Install sheet
+          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
+          npm ci
+
+      - name: Check audit
+      # Audit should fail and stop the CI if critical vulnerability found
+        run: |
+          npm audit --audit-level=critical --omit=dev
+          cd ./sas
+          npm audit --audit-level=critical --omit=dev
+          cd ../client
+          npm audit --audit-level=critical --omit=dev
+
+      - name: Angular Tests
+        run: |
+          cd client
+          npm run test:headless
+
+      - name: Angular Production Build
+        run: |
+          cd client
+          npm run postinstall
+          npm run build
+
+  Build-and-test-development:
+    runs-on: ubuntu-latest
+    needs: Build-production-and-ng-test
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.14.0
+
+      - name: Write .npmrc file
+        run: |
+         touch client/.npmrc
+         echo '${{ secrets.NPMRC}}' > client/.npmrc
+
+      - run: apt-get update
+      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+      - run: apt install -y ./google-chrome*.deb;
+      - run: export CHROME_BIN=/usr/bin/google-chrome
+      - run: apt-get update -y
+      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+      - run: apt -y install jq
+
+      - name: Write cypress credentials
+        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
+        shell: bash
+        env:
+          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
+
+      - name: Install dependencies
+        run: |
+          cd client
+          # Decrypt and Install sheet
+          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
+          npm ci
+
+      # Install pm2 and prepare SASJS server
+      - run: npm i -g pm2
+      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+      - run: unzip linux.zip
+      - run: touch .env
+      - run: echo RUN_TIMES=js >> .env
+      - run: echo NODE_PATH=node >> .env
+      - run: echo CORS=enable >> .env
+      - run: echo WHITELIST=http://localhost:4200 >> .env
+      - run: cat .env
+      - run: pm2 start api-linux --wait-ready
+
+      - name: Deploy mocked services
+        run: |
+          cd ./sas/mocks/sasjs
+          npm install -g @sasjs/cli
+          npm install -g replace-in-files-cli
+          sasjs cbd -t server-ci
+          # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json
+
+      - name: Install ZIP
+        run: |
+          apt-get update
+          apt-get install zip
+
+      - name: Prepare and run frontend and cypress
+        run: |
+          cd ./client
+          mv ./cypress.env.example.json ./cypress.env.json
+          replace-in-files --regex='"username".*' --replacement='"username":"'${{ secrets.CYPRESS_USERNAME_SASJS }}'",' ./cypress.env.json
+          replace-in-files --regex='"password".*' --replacement='"password":"'${{ secrets.CYPRESS_PWD_SASJS }}'" ' ./cypress.env.json
+          cat ./cypress.env.json
+          npm run postinstall
+          # Prepare index.html to SASJS local
+          replace-in-files --regex='serverUrl=".*?"' --replacement='serverUrl="http://localhost:5000"' ./src/index.html
+          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/Public/app/devtest"' ./src/index.html
+          replace-in-files --regex='serverType=".*?"' --replacement='serverType="SASJS"' ./src/index.html
+          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"
+
+      - name: Zip Cypress videos
+        if: always()
+        run: |
+          zip -r cypress-videos ./client/cypress/videos
+
+      - name: Add cypress videos artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress-videos.zip
+          path: cypress-videos.zip
+
+  release:
+    runs-on: ubuntu-latest
+    needs: [Build-production-and-ng-test, Build-and-test-development]
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.14.0
 
       - name: Write .npmrc file
         run: |
@@ -30,6 +176,19 @@ jobs:
           npm i -g @sasjs/cli
           # jq is used to parse the release JSON
           apt-get install jq -y
+          # doxygen is used for the SASJS docs
+          apt-get update
+          apt-get install doxygen -y
+
+      - name: Frontend Preliminary Build
+        description: We want to prevent creating empty release if frontend fails
+        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: |
@@ -43,7 +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
           npm run build
 
       - name: Build SAS9 EBI Release
@@ -87,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: |
@@ -102,6 +261,12 @@ jobs:
           npm run compodoc:build
           surfer put --token ${{ secrets.TSDOC_TOKEN }} --server webdoc.datacontroller.io documentation/* /
 
+      - name: Release code.datacontroller.io
+        run: |
+          cd sas
+          sasjs doc
+          surfer put --token ${{ secrets.CODE_DATACONTROLLER_IO }} --server code.datacontroller.io sasjsbuild/sasdocs/* /
+
       - name: Upload assets to release
         run: |
           RELEASE_ID=`curl -k 'https://git.datacontroller.io/api/v1/repos/dc/dc/releases/latest?access_token=${{ secrets.RELEASE_TOKEN }}' | jq -r '.id'`
@@ -116,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,6 +11,9 @@ client/cypress/screenshots
 client/cypress/results
 client/cypress/videos
 client/documentation
+client/sheet-crypto*
+client/.nx
+client/libraries/sheet-crypto.tgz
 cypress.env.json
 sasjsbuild
 sasjsresults

.vscode/settings.json

@@ -1,18 +1,19 @@
 {
   "cSpell.words": [
+    "Licence",
     "SYSERRORTEXT",
-        "SYSWARNINGTEXT"
+    "SYSWARNINGTEXT",
-    ],
+    "xlmaprules",
-    "editor.rulers": [
+    "xlmaps"
-        80
   ],
+  "editor.rulers": [80],
   "files.trimTrailingWhitespace": true,
   "[markdown]": {
     "files.trimTrailingWhitespace": false
   },
   "workbench.colorCustomizations": {
     "titleBar.activeForeground": "#ebe8e8",
-        "titleBar.activeBackground": "#95ff0053",
+    "titleBar.activeBackground": "#95ff0053"
   },
   "terminal.integrated.wordSeparators": " ()[]{}',\"`─‘’"
 }

CHANGELOG.md

@@ -1,3 +1,238 @@
+# [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)
+
+
+### Bug Fixes
+
+* ci sheet lib, submit message auto focus ([c5e4650](https://git.datacontroller.io/dc/dc/commit/c5e46503272f3f3d9cd83ac04225babf79d4de44))
+* **clarity:** new version style issues ([8c7de5a](https://git.datacontroller.io/dc/dc/commit/8c7de5aad7e7e32a64769696af9b93eb9a6225d3))
+* cypress tests ([3dd85cc](https://git.datacontroller.io/dc/dc/commit/3dd85cc60bd5ac99bc930b6b9c89a8e707e4d51d))
+* ensuring that only restorable versions are restorable ([a402856](https://git.datacontroller.io/dc/dc/commit/a4028562ce91b32ff971ab9821328b97cd23f381))
+* ensuring version history only includes loaded versions ([51ebd25](https://git.datacontroller.io/dc/dc/commit/51ebd25aa362aa8e66c83b29b2c64aa0f206f5bd))
+* final testing on restore feature ([297a84d](https://git.datacontroller.io/dc/dc/commit/297a84d3a4ebb47bef7f3ca9758978d727afed8d))
+* issue with multiple adds/deletes, [#84](https://git.datacontroller.io/dc/dc/issues/84) ([904ca30](https://git.datacontroller.io/dc/dc/commit/904ca30f918da085fa05dae066367b512933d1a9))
+* load_ref var ([aaad9f7](https://git.datacontroller.io/dc/dc/commit/aaad9f7207115599a006980fff099d59738dd2cd))
+* removing alerts dummy data, closes [#93](https://git.datacontroller.io/dc/dc/issues/93) ([eba21e9](https://git.datacontroller.io/dc/dc/commit/eba21e96b4fa34e63b4477281f47d9a01d621f2e))
+* restore table version improvement ([549f357](https://git.datacontroller.io/dc/dc/commit/549f35766ba7b5bbe55694845e85bfefc4193375))
+* **sas:** viewer versions fix ([c6595c1](https://git.datacontroller.io/dc/dc/commit/c6595c1f618803d9202cba1a1fe76986449cf2e2))
+* stage and approve buttons renaming ([ef81e33](https://git.datacontroller.io/dc/dc/commit/ef81e33f704d0b4f99405d96498e1d29ac817982))
+* supporting SCD2 data reversions ([fa8396f](https://git.datacontroller.io/dc/dc/commit/fa8396f0394cbddb6dbacb4b355de078fad49980))
+* table info modal, versions - column names ([801c8c6](https://git.datacontroller.io/dc/dc/commit/801c8c6a9fb95388a06a6c6284fec4dc25bb77c5))
+* **updates:** angular, clarity, resolved legacy-peer-deps ([c60dd65](https://git.datacontroller.io/dc/dc/commit/c60dd65a1637333f11a0c39ef697c7292a6ede07))
+
+
+### Features
+
+* backend to show in getchangeinfo whether a user is allowed to restore ([8769841](https://git.datacontroller.io/dc/dc/commit/8769841f08694f672ef7ae1a17beacd0dbedda52))
+* list versions of target tables (backend) ([f8a14d4](https://git.datacontroller.io/dc/dc/commit/f8a14d4bdef055b99930491d1f6fabe55a50a497))
+* restore ([604c2e7](https://git.datacontroller.io/dc/dc/commit/604c2e70bdeeeb1aa5bb18b94f525ebd049397fa))
+* SAS services & tests for RESTORE, [#84](https://git.datacontroller.io/dc/dc/issues/84) ([9ad7ae4](https://git.datacontroller.io/dc/dc/commit/9ad7ae47b5e793ce68ab21c9eeb8dee6cb85e496))
+* staging page, restore buttons ([02a8a1c](https://git.datacontroller.io/dc/dc/commit/02a8a1c5654350cafc53b749cceb686fc6848c33))
+* table metadata modal, versions tab (and link) ([b27fea5](https://git.datacontroller.io/dc/dc/commit/b27fea5b91e33b4673a3a991aedae558e366ca29))
+* **versions:** getting list of versions (plus test) ([8003da9](https://git.datacontroller.io/dc/dc/commit/8003da94e615463ed3ddfd60b0cbf2e58615eab1))
+
+# [6.7.0](https://git.datacontroller.io/dc/dc/compare/v6.6.4...v6.7.0) (2024-04-01)
+
+
+### Features
+
+* numeric values in hot dropdown aligned right ([9635626](https://git.datacontroller.io/dc/dc/commit/963562621ddf0e8d24a29a8481c5e6da1b040708))
+
+## [6.6.4](https://git.datacontroller.io/dc/dc/compare/v6.6.3...v6.6.4) (2024-04-01)
+
+
+### Bug Fixes
+
+* ordering SOFTSELECT numerically in dropdown ([f522038](https://git.datacontroller.io/dc/dc/commit/f522038b8ddb1da14b8adbf8346d0a4539a94cc8)), closes [#85](https://git.datacontroller.io/dc/dc/issues/85)
+* reverting col ([fbbcf90](https://git.datacontroller.io/dc/dc/commit/fbbcf90956bf538b032b0107c07b8576d20353b9))
+* typo ([31d4e5c](https://git.datacontroller.io/dc/dc/commit/31d4e5c727f790d428fb2ea8da60dca929561805))
+
+## [6.6.3](https://git.datacontroller.io/dc/dc/compare/v6.6.2...v6.6.3) (2024-02-26)
+
+
+### Bug Fixes
+
+* allow empty clause value when NE or CONTAINS ([432450a](https://git.datacontroller.io/dc/dc/commit/432450a15b51a269821ba1d430854f5d1dd04703))
+
+## [6.6.2](https://git.datacontroller.io/dc/dc/compare/v6.6.1...v6.6.2) (2024-02-22)
+
+
+### Bug Fixes
+
+* excel with commas getting wrapped in quotes ([3860134](https://git.datacontroller.io/dc/dc/commit/38601346a529cfe3787bb286a639e0293c365020))
+
+## [6.6.1](https://git.datacontroller.io/dc/dc/compare/v6.6.0...v6.6.1) (2024-02-19)
+
+
+### Bug Fixes
+
+* **client:** bumped @sasjs/adapter with fixed redirected login ([eb1c09d](https://git.datacontroller.io/dc/dc/commit/eb1c09d7909ba07faf763da261545dc1efaec1b3))
+
+# [6.6.0](https://git.datacontroller.io/dc/dc/compare/v6.5.2...v6.6.0) (2024-02-12)
+
+
+### Bug Fixes
+
+* adjust the col numbers in extracted data ([cff5989](https://git.datacontroller.io/dc/dc/commit/cff598955930d2581349e5c6e8b2dd3f9ac96b4c))
+
+
+### Features
+
+* extra table metadata for [#75](https://git.datacontroller.io/dc/dc/issues/75) ([837821f](https://git.datacontroller.io/dc/dc/commit/837821fd01477d340524dfdaf8dd3d3758cf3095))
+* show dsnote on hover title ([6565834](https://git.datacontroller.io/dc/dc/commit/6565834ad4089ecf2de39967e6ed6f217ee4a0a5))
+
+## [6.5.2](https://git.datacontroller.io/dc/dc/compare/v6.5.1...v6.5.2) (2024-02-06)
+
+
+### Bug Fixes
+
+* ordering mpe_selectbox data by the data values after selectbox_order ([2b54034](https://git.datacontroller.io/dc/dc/commit/2b5403497317632a4be8a00f21455c036f1e6461))
+
+## [6.5.1](https://git.datacontroller.io/dc/dc/compare/v6.5.0...v6.5.1) (2024-02-02)
+
+
+### Bug Fixes
+
+* ensuring submitter email can be pulled from mpe_emails ([eac0104](https://git.datacontroller.io/dc/dc/commit/eac0104d7aebaf98ff1d1c504c1ce3b25d4a0ce8))
+
+# [6.5.0](https://git.datacontroller.io/dc/dc/compare/v6.4.0...v6.5.0) (2024-01-26)
+
+
+### Features
+
+* filtering by reference to Variables as well as Values ([6eb1aa8](https://git.datacontroller.io/dc/dc/commit/6eb1aa85d29294d63e6af377e622fbed7fd1fab8))
+
+# [6.4.0](https://git.datacontroller.io/dc/dc/compare/v6.3.1...v6.4.0) (2024-01-24)
+
+
+### Bug Fixes
+
+* add dcLib to globals ([5d93346](https://git.datacontroller.io/dc/dc/commit/5d93346b52eda27c2829770e96686a713296d373))
+* add service to get xlmap rules and fixed interface name ([9ffa30a](https://git.datacontroller.io/dc/dc/commit/9ffa30ab747f5b62acbd452431a5e6e440afcb80))
+* increasing length of mpe_excel_map cols to ([2d4d068](https://git.datacontroller.io/dc/dc/commit/2d4d068413dcdac98581f08939e74bde65b73428))
+* providing info on mapids to FE ([fd94945](https://git.datacontroller.io/dc/dc/commit/fd94945466c1a797ddc89815258a65624a9cb0cf))
+* removing tables from EDIT menu that are in xlmaps ([9550ae4](https://git.datacontroller.io/dc/dc/commit/9550ae4d1154a0272f8a2427ac9d2afdfd699c96))
+* removing XLMAP_TARGETLIBDS from mpe_xlmaps_rules table ([93702c6](https://git.datacontroller.io/dc/dc/commit/93702c63dc280cdba1e46f0fd8fe0deaec879611))
+* renaming TABLE macvar to LOAD_REF in postdata.sas ([01915a2](https://git.datacontroller.io/dc/dc/commit/01915a2db9a4dfb94e4e8213e2c32181da36d349))
+* reverting xlmap in getdata change ([2d6e747](https://git.datacontroller.io/dc/dc/commit/2d6e747db9b84e9fb0dfcf9102a2f7dd2cb51891))
+* update edit tab to load ([516e5a2](https://git.datacontroller.io/dc/dc/commit/516e5a206216f79ab1dce9f4eab0d31115743160))
+
+
+### Features
+
+* adding ability to define the target table for excel maps ([c86fba9](https://git.datacontroller.io/dc/dc/commit/c86fba9dc75ddc6033132f469ad1c31b9131b12e))
+* adding ismap attribute to getdata response (and fixing test) ([2702bb3](https://git.datacontroller.io/dc/dc/commit/2702bb3c84c45903def1aa2b8cc20a6dd080281b))
+* Complex Excel Uploads ([cf19381](https://git.datacontroller.io/dc/dc/commit/cf193810606f287b8d6f864c4eb64d43c5ab5f3c)), closes [#69](https://git.datacontroller.io/dc/dc/issues/69)
+* Create Tables / Files dropdown under load tab ([b473b19](https://git.datacontroller.io/dc/dc/commit/b473b198a61f468dff74cd8e64692e7847084a80))
+* display list of maps in sidebar ([5aec024](https://git.datacontroller.io/dc/dc/commit/5aec0242429942f8a989b5fb79f8d3865e9de01a))
+* implemented the logic for xlmap component ([50696bb](https://git.datacontroller.io/dc/dc/commit/50696bb926dd00472db65a008771a4b6352871be))
+* model changes for [#69](https://git.datacontroller.io/dc/dc/issues/69) ([271543a](https://git.datacontroller.io/dc/dc/commit/271543a446a2116718f99f0540e3cd911f9f5fe7))
+* new getxlmaps service to return rules for a particular xlmap_id ([56264ec](https://git.datacontroller.io/dc/dc/commit/56264ecc6908bf6c8e3e666dfeba7068d6195df8))
+* validating the excel map after stage (adding load-ref) ([a485c3b](https://git.datacontroller.io/dc/dc/commit/a485c3b78724a36f7bacb264fb02140cc62d6512))
+
+## [6.3.1](https://git.datacontroller.io/dc/dc/compare/v6.3.0...v6.3.1) (2024-01-01)
+
+
+### Bug Fixes
+
+* enabling excel uploads to tables with retained keys, also adding more validation to MPE_TABLES updates ([3efccc4](https://git.datacontroller.io/dc/dc/commit/3efccc4cf3752763d049836724f2491c287f65db))
+
+# [6.3.0](https://git.datacontroller.io/dc/dc/compare/v6.2.8...v6.3.0) (2023-12-04)
+
+
+### Features
+
+* viewer row handle ([dadac4f](https://git.datacontroller.io/dc/dc/commit/dadac4f13f85b5446198b6340cad28844defc94d))
+
+## [6.2.8](https://git.datacontroller.io/dc/dc/compare/v6.2.7...v6.2.8) (2023-12-04)
+
+
+### Bug Fixes
+
+* bumping sasjs/core to fix mp_loadformat issue ([a1d308e](https://git.datacontroller.io/dc/dc/commit/a1d308ea078786b27bf7ec940d018fc657d4c398))
+* new logic for -fc suffix.  Closes [#63](https://git.datacontroller.io/dc/dc/issues/63) ([5579db0](https://git.datacontroller.io/dc/dc/commit/5579db0eafc668b1bc310099b7cc3062e0598fc4))
+
+## [6.2.7](https://git.datacontroller.io/dc/dc/compare/v6.2.6...v6.2.7) (2023-11-09)
+
+
+### Bug Fixes
+
+* **audit:** updated crypto-js (hashing rows in dynamic cell validation) ([a7aa42a](https://git.datacontroller.io/dc/dc/commit/a7aa42a59b71597399924b8d2d06010c806321f3))
+* missing dependency and avoiding label length limit issue ([91f128c](https://git.datacontroller.io/dc/dc/commit/91f128c2fead1e4f72267d689e67f49ec9a2ab35))
+
+## [6.2.6](https://git.datacontroller.io/dc/dc/compare/v6.2.5...v6.2.6) (2023-10-18)
+
+
+### Bug Fixes
+
+* bumping core to address mm_assigndirectlib issue ([c27cdab](https://git.datacontroller.io/dc/dc/commit/c27cdab3fccbde814a29424d0344173a73ea816c))
+
+## [6.2.5](https://git.datacontroller.io/dc/dc/compare/v6.2.4...v6.2.5) (2023-10-17)
+
+
+### Bug Fixes
+
+* enabling AUTHDOMAIN in MM_ASSIGNDIRECTLIB ([008b45a](https://git.datacontroller.io/dc/dc/commit/008b45ad175ec0e6026f5ef3bc210470226e328f))
+
+## [6.2.4](https://git.datacontroller.io/dc/dc/compare/v6.2.3...v6.2.4) (2023-10-16)
+
+
+### Bug Fixes
+
+* Enable display of metadata-only tables. Closes [#56](https://git.datacontroller.io/dc/dc/issues/56) ([f3e82b4](https://git.datacontroller.io/dc/dc/commit/f3e82b4ee2a9c1c851f812ac60e9eaf05f91a0f9))
+
 ## [6.2.3](https://git.datacontroller.io/dc/dc/compare/v6.2.2...v6.2.3) (2023-10-12)
 
 

README.md

@@ -28,3 +28,5 @@ For more information:
 * Main site:  https://datacontroller.io
 * Docs:  https://docs.datacontroller.io
 * Code: https://code.datacontroller.io
+
+For support, contact support@4gl.io or reach out on [Matrix](https://matrix.to/#/#dc:4gl.io)!

client/angular.json

@@ -45,6 +45,7 @@
               "numbro",
               "@clr/icons",
               "@sasjs/adapter",
+              "@sasjs/utils/types/serverType",
               "@sasjs/utils/input/validators",
               "@sasjs/utils/utils/bytesToSize",
               "base64-arraybuffer",
@@ -67,7 +68,6 @@
               "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/@clr/icons/clr-icons.min.js",
               "node_modules/marked/marked.min.js"
             ]
           },
@@ -116,10 +116,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "datacontroller:build:production"
+              "buildTarget": "datacontroller:build:production"
             },
             "development": {
-              "browserTarget": "datacontroller:build:development"
+              "buildTarget": "datacontroller:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -127,30 +127,27 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "datacontroller:build"
+            "buildTarget": "datacontroller:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "codeCoverage": true,
             "polyfills": [
               "src/polyfills.ts",
               "zone.js",
               "zone.js/testing"
             ],
-            "styles": [
+            "tsConfig": "tsconfig.spec.json",
-              "src/styles.scss"
+            "inlineStyleLanguage": "scss",
-            ],
-            "scripts": [
-
-            ],
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [],
             "karmaConfig": "karma.conf.js"
           }
         },

client/cypress.config.ts

@@ -9,6 +9,8 @@ export default defineConfig({
     html: true,
     json: false,
   },
+  viewportHeight: 900,
+  viewportWidth: 1600,
 
   chromeWebSecurity: false,
   defaultCommandTimeout: 30000,

client/cypress/e2e/editor.cy.ts

@@ -221,13 +221,13 @@ const submitExcel = (callback?: any) => {
 
 const rejectExcel = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
         if (
           approvalButton.innerText
             .toLowerCase()
-            .includes('go to approvals screen')
+            .includes('approve')
         ) {
           approvalButton.click()
           break

client/cypress/e2e/excel.cy.ts

@@ -405,13 +405,13 @@ const submitExcel = (callback?: any) => {
 
 const rejectExcel = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
         if (
           approvalButton.innerText
             .toLowerCase()
-            .includes('go to approvals screen')
+            .includes('approve')
         ) {
           approvalButton.click()
           break
@@ -438,13 +438,13 @@ const rejectExcel = (callback?: any) => {
 
 const acceptExcel = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
         if (
           approvalButton.innerText
             .toLowerCase()
-            .includes('go to approvals screen')
+            .includes('approve')
         ) {
           approvalButton.click()
           break

client/cypress/e2e/filtering.cy.ts

@@ -159,20 +159,21 @@ context('filtering tests: ', function () {
     })
   })
 
-  it('7 | filter bestnum field BETWEEN', (done) => {
+  // TODO: fix
-    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+  // it('7 | filter bestnum field BETWEEN', (done) => {
+  //   openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
 
-    openFilterPopup(() => {
+  //   openFilterPopup(() => {
-      setFilterWithValue('SOME_BESTNUM', '0-10', 'between', () => {
+  //     setFilterWithValue('SOME_BESTNUM', '0-10', 'between', () => {
-        checkInfoBarIncludes(
+  //       checkInfoBarIncludes(
-          `AND,AND,0,SOME_BESTNUM,BETWEEN,0 AND 10`,
+  //         `AND,AND,0,SOME_BESTNUM,BETWEEN,0 AND 10`,
-          (includes: boolean) => {
+  //         (includes: boolean) => {
-            if (includes) done()
+  //           if (includes) done()
-          }
+  //         }
-        )
+  //       )
-      })
+  //     })
-    })
+  //   })
-  })
+  // })
 
   this.afterEach(() => {
     // cy.visit(`${hostUrl}/SASLogon/logout`)

client/cypress/e2e/licensing.cy.ts

@@ -699,13 +699,13 @@ const submitTable = (callback?: any) => {
 
 const approveTable = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
         if (
           approvalButton.innerText
             .toLowerCase()
-            .includes('go to approvals screen')
+            .includes('approve')
         ) {
           approvalButton.click()
           break

client/cypress/e2e/liveness.cy.ts

@@ -125,13 +125,13 @@ const submitExcel = (callback?: any) => {
 
 const rejectExcel = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
         if (
           approvalButton.innerText
             .toLowerCase()
-            .includes('go to approvals screen')
+            .includes('approve')
         ) {
           approvalButton.click()
           break

client/cypress/integration/editor.tests.ts

@@ -221,14 +221,10 @@ const submitExcel = (callback?: any) => {
 
 const rejectExcel = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
-        if (
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('go to approvals screen')
-        ) {
           approvalButton.click()
           break
         }

client/cypress/integration/excel.tests.ts

@@ -407,14 +407,10 @@ const submitExcel = (callback?: any) => {
 
 const rejectExcel = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
-        if (
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('go to approvals screen')
-        ) {
           approvalButton.click()
           break
         }
@@ -440,14 +436,10 @@ const rejectExcel = (callback?: any) => {
 
 const acceptExcel = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
-        if (
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('go to approvals screen')
-        ) {
           approvalButton.click()
           break
         }

client/cypress/integration/licensing.tests.ts

@@ -699,14 +699,10 @@ const submitTable = (callback?: any) => {
 
 const approveTable = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
-        if (
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('go to approvals screen')
-        ) {
           approvalButton.click()
           break
         }

client/cypress/integration/liveness.tests.ts

@@ -125,14 +125,10 @@ const submitExcel = (callback?: any) => {
 
 const rejectExcel = (callback?: any) => {
   cy.get('button', { timeout: longerCommandTimeout })
-    .should('contain', 'Go to approvals screen')
+    .should('contain', 'Approve')
     .then((allButtons: any) => {
       for (let approvalButton of allButtons) {
-        if (
+        if (approvalButton.innerText.toLowerCase().includes('approve')) {
-          approvalButton.innerText
-            .toLowerCase()
-            .includes('go to approvals screen')
-        ) {
           approvalButton.click()
           break
         }

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.5.0;jackspeak@2.2.0;path-scurry@1.7.0'
+          '@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'
       },
       (error, json) => {
         if (error) {

client/package.json

@@ -18,8 +18,8 @@
     "deploy_sasjs": "rsync -avhe ssh ./dist/* --delete root@${npm_config_account}.4gl.io:/var/www/html/dc/dev",
     "viyabuild": "cd build; ./viyabuild.sh",
     "lint": "cd .. && npm run lint",
-    "test": "ng test",
+    "test": "npx ng test",
-    "test:headless": "ng test --browsers ChromeHeadless",
+    "test:headless": "npx ng test --no-watch --no-progress --browsers ChromeHeadlessCI",
     "watch": "ng test watch=true",
     "pree2e": "webdriver-manager update",
     "e2e": "protractor protractor.config.js",
@@ -35,29 +35,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.1.2",
+    "@angular/animations": "^17.3.3",
-    "@angular/cdk": "^15.2.0",
+    "@angular/cdk": "^17.3.3",
-    "@angular/common": "^16.1.2",
+    "@angular/common": "^17.3.3",
-    "@angular/compiler": "^16.1.2",
+    "@angular/compiler": "^17.3.3",
-    "@angular/core": "^16.1.2",
+    "@angular/core": "^17.3.3",
-    "@angular/forms": "^16.1.2",
+    "@angular/forms": "^17.3.3",
-    "@angular/platform-browser": "^16.1.2",
+    "@angular/platform-browser": "^17.3.3",
-    "@angular/platform-browser-dynamic": "^16.1.2",
+    "@angular/platform-browser-dynamic": "^17.3.3",
-    "@angular/router": "^16.1.2",
+    "@angular/router": "^17.3.3",
-    "@cds/core": "^6.4.2",
+    "@cds/core": "^6.10.0",
-    "@clr/angular": "^13.17.0",
+    "@clr/angular": "^17.0.1",
     "@clr/icons": "^13.0.2",
-    "@clr/ui": "^13.17.0",
+    "@clr/ui": "^17.0.1",
     "@handsontable/angular": "^13.1.0",
-    "@sasjs/adapter": "4.10.1",
+    "@sasjs/adapter": "4.10.2",
     "@sasjs/utils": "^3.4.0",
-    "@sheet/crypto": "1.20230414.1",
     "@types/d3-graphviz": "^2.6.7",
+    "@sheet/crypto": "file:libraries/sheet-crypto.tgz",
     "@types/text-encoding": "0.0.35",
     "base64-arraybuffer": "^0.2.0",
     "buffer": "^5.4.3",
     "crypto-browserify": "3.12.0",
-    "crypto-js": "^3.3.0",
+    "crypto-js": "^4.2.0",
     "d3-graphviz": "^5.0.2",
     "fs-extra": "^7.0.1",
     "handsontable": "^13.1.0",
@@ -78,24 +78,26 @@
     "stream-http": "3.2.0",
     "text-encoding": "^0.7.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
+    "vm": "^0.1.0",
+    "webpack": "^5.91.0",
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.1.0",
+    "@angular-devkit/build-angular": "^17.3.3",
-    "@angular-eslint/builder": "16.0.3",
+    "@angular-eslint/builder": "17.3.0",
-    "@angular-eslint/eslint-plugin": "16.0.3",
+    "@angular-eslint/eslint-plugin": "17.3.0",
-    "@angular-eslint/eslint-plugin-template": "16.0.3",
+    "@angular-eslint/eslint-plugin-template": "17.3.0",
-    "@angular-eslint/schematics": "16.0.3",
+    "@angular-eslint/schematics": "17.3.0",
-    "@angular-eslint/template-parser": "16.0.3",
+    "@angular-eslint/template-parser": "17.3.0",
-    "@angular/cli": "^16.1.0",
+    "@angular/cli": "^17.3.3",
-    "@angular/compiler-cli": "^16.1.2",
+    "@angular/compiler-cli": "^17.3.3",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@compodoc/compodoc": "^1.1.21",
     "@cypress/webpack-preprocessor": "^5.17.1",
     "@types/core-js": "^2.5.5",
-    "@types/crypto-js": "^4.0.1",
+    "@types/crypto-js": "^4.2.1",
     "@types/es6-shim": "^0.31.39",
-    "@types/jasmine": "~3.6.0",
+    "@types/jasmine": "~5.1.4",
     "@types/lodash-es": "^4.17.3",
     "@types/marked": "^4.3.0",
     "@types/node": "12.20.50",
@@ -109,12 +111,12 @@
     "es6-shim": "^0.35.5",
     "eslint": "^8.33.0",
     "git-describe": "^4.0.4",
-    "jasmine-core": "~3.6.0",
+    "jasmine-core": "~5.1.2",
-    "karma": "~6.3.0",
+    "karma": "~6.4.3",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.1.0",
+    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~4.0.0",
+    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
     "license-checker": "25.0.1",
     "lodash-es": "^4.17.21",
     "mochawesome": "^7.1.3",
@@ -123,9 +125,7 @@
     "rimraf": "3.0.2",
     "ts-loader": "^9.2.8",
     "ts-node": "^3.3.0",
-    "typedoc": "^0.24.8",
+    "typescript": "~5.4.4",
-    "typedoc-plugin-external-module-name": "^4.0.6",
-    "typescript": "~4.9.4",
     "wait-on": "^6.0.1",
     "watch": "^1.0.2"
   }

client/src/app/_globals.ts

@@ -37,6 +37,12 @@ export const initFilter: { filter: FilterCache } = {
   }
 }
 
+export interface XLMapListItem {
+  id: string
+  description: string
+  targetDS: string
+}
+
 /**
  * Cached filtering values across whole app (editor, viewer, viewboxes)
  * Cached lineage libraries, tables
@@ -46,6 +52,8 @@ export const initFilter: { filter: FilterCache } = {
  */
 export const globals: {
   rootParam: string
+  dcLib: string
+  xlmaps: XLMapListItem[]
   editor: any
   viewer: any
   viewboxes: ViewboxCache
@@ -57,11 +65,13 @@ export const globals: {
   [key: string]: any
 } = {
   rootParam: <string>'',
+  dcLib: '',
+  xlmaps: [],
   editor: {
     startupSet: <boolean>false,
     treeNodeLibraries: <any[] | null>[],
     libsAndTables: <any[]>[],
-    libraries: <String[] | undefined>[],
+    libraries: <string[] | undefined>[],
     library: <string>'',
     table: <string>'',
     filter: <FilterCache>{

client/src/app/app.component.html

@@ -12,7 +12,7 @@
         <div class="alert-items">
           <div class="alert-item static">
             <div class="alert-icon-wrapper">
-              <clr-icon class="mt-2" shape="warning-standard"></clr-icon>
+              <cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
             </div>
             <div class="alert-text">
               Data Controller (FREE Tier) - to upgrade contact
@@ -30,7 +30,7 @@
         <div class="alert-items">
           <div class="alert-item static">
             <div class="alert-icon-wrapper">
-              <clr-icon class="mt-2" shape="warning-standard"></clr-icon>
+              <cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
             </div>
             <div class="alert-text">
               Data Controller (FREE Tier) - Problem with licence
@@ -55,7 +55,7 @@
       <div class="alert-items">
         <div class="alert-item static">
           <div class="alert-icon-wrapper">
-            <clr-icon class="mt-2" shape="warning-standard"></clr-icon>
+            <cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
           </div>
 
           <div class="alert-text">
@@ -85,7 +85,7 @@
       <div class="alert-items">
         <div class="alert-item static">
           <div class="alert-icon-wrapper">
-            <clr-icon class="mt-2" shape="warning-standard"></clr-icon>
+            <cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
           </div>
 
           <div class="alert-text">
@@ -168,7 +168,7 @@
           </button>
           <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
             <a [routerLink]="['/view']" clrDropdownItem>VIEW</a>
-            <a [routerLink]="['/home']" clrDropdownItem>EDIT</a>
+            <a [routerLink]="['/home']" clrDropdownItem>LOAD</a>
             <a [routerLink]="['/review/submitted']" clrDropdownItem>REVIEW</a>
           </clr-dropdown-menu>
         </clr-dropdown>
@@ -189,7 +189,7 @@
             router.url.includes('edit-record') ||
             router.url.includes('home')
           "
-          >EDIT</a
+          >LOAD</a
         >
         <a
           [routerLink]="['/review/submitted']"
@@ -204,14 +204,7 @@
       </div>
     </ng-container>
 
-    <div class="header-actions">
+    <app-header-actions></app-header-actions>
-      <div class="nav-text">
-        <app-loading-indicator></app-loading-indicator>
-      </div>
-      <div class="dropdown">
-        <app-user-nav-dropdown></app-user-nav-dropdown>
-      </div>
-    </div>
   </header>
   <nav
     *ngIf="

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;
@@ -91,33 +93,12 @@ header {
     }
   }
 
-  .nav
-  .nav-link {
-    color: #fafafa;
-    opacity: .9;
-    line-height: 1.45rem;
-  }
-
-  .nav .nav-link:hover {
-      box-shadow: inset 0 -3px 0 transparent;
-      transition: box-shadow .2s ease-in;
-  }
-
-  .nav
   .nav-link:hover {
       color: #fafafa;
-      opacity: 1;
   }
 
-  .nav .nav-link.active {
+  .nav-link.active {
     background: #61717D;
-      opacity: 1;
-      box-shadow: inset 0 -3px transparent;
-      // padding: 0 1rem 0 1rem;
-  }
-
-  .nav .nav-item {
-      margin-right: 1rem;
   }
 }
 
@@ -127,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;
@@ -163,59 +135,44 @@ 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;
-}
+  }
 
   @media screen and (max-width:480px) {
     h2 {
       font-size: .7rem!important;
-
     }
     h3 {
       font-size: .7rem;
     }
-}
+  }
 
   .nav-link {
     padding: 0rem 1rem 0rem 1rem;
   }
 
+  body[cds-theme="light"] {
     .btn-primary .btn, .btn.btn-primary {
-    border-color: #314351;
+      border-color: $headerBackground;
-    background-color: #314351;
+      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 {
     cursor: pointer;
     display: inline-block;
@@ -236,36 +193,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;
@@ -298,65 +251,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;
-    border-right: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-  }
 
-  .ht_clone_top_left_corner th {
+  body[cds-theme="light"] {
-    border-right: 1px solid #ccc;
+    .wtBorder {
+      background-color: #495A67!important;
     }
 
     .ht_master tr:nth-of-type(odd) > td {
-    background-color: #f3f3f3;
+      filter: brightness(0.95);
-    border: 1px solid rgb(197, 197, 197);
+    }
-    border-bottom: 1px solid rgb(236, 235, 235);
-    // padding: 1px 1px;
   }
 
-  .ht_master tr:nth-of-type(even) > td {
+  $darkBorderColor: #697c85;
-    background-color: white;
+
-    border: 1px solid rgb(197, 197, 197);
+  body[cds-theme="dark"] {
-    border-bottom: 1px solid rgb(236, 235, 235);
+    .ht_master tr:nth-of-type(odd) > td {
-    // padding: 1px 1px;
+      filter: brightness(1.2);
     }
 
-  .wtBorder {
+    .ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
-    background-color: #495A67!important;
+      background-color: #2d4048;
+      border-color: $darkBorderColor;
+    }
+
+    .handsontable td {
+      // 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{
@@ -364,8 +320,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%;
@@ -387,8 +341,8 @@ header {
     }
     .datagrid-footer {
       position: absolute;
-      right: 15px;
+      right: 30px;
-      top: 2px;
+      top: 1px;
     }
     .datagrid .datagrid-head {
       background-color: #fff;
@@ -408,7 +362,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);
@@ -423,8 +376,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%;
@@ -435,7 +386,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;
@@ -459,3 +409,33 @@ header {
     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,15 @@ 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
+} from '@cds/core/icon'
+
+ClarityIcons.addIcons(moonIcon, sunIcon, exclamationTriangleIcon)
 
 @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: [
@@ -46,12 +46,11 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer'
     SharedModule,
     ClarityModule,
     AppSharedModule,
-    HomeModule,
     PipesModule,
     DirectivesModule,
     NgxJsonViewerModule
   ],
-  providers: [AppService, SasStoreService, LicensingGuard],
+  providers: [AppService, SasStoreService, LicensingGuard, AppSettingsService],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

client/src/app/app.routing.ts

@@ -4,19 +4,19 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 import { ModuleWithProviders } from '@angular/core'
-import { Routes, RouterModule } from '@angular/router'
+import { RouterModule, Routes } from '@angular/router'
 
-import { HomeComponent } from './home/home.component'
 import { NotFoundComponent } from './not-found/not-found.component'
 
+import { DeployModule } from './deploy/deploy.module'
+import { EditorModule } from './editor/editor.module'
+import { HomeModule } from './home/home.module'
+import { LicensingModule } from './licensing/licensing.module'
+import { ReviewModule } from './review/review.module'
 import { ReviewRouteComponent } from './routes/review-route/review-route.component'
 import { StageModule } from './stage/stage.module'
-import { EditorModule } from './editor/editor.module'
-import { ViewerModule } from './viewer/viewer.module'
-import { ReviewModule } from './review/review.module'
-import { DeployModule } from './deploy/deploy.module'
-import { LicensingModule } from './licensing/licensing.module'
 import { SystemModule } from './system/system.module'
+import { ViewerModule } from './viewer/viewer.module'
 
 /**
  * Defining routes
@@ -45,7 +45,10 @@ export const ROUTES: Routes = [
     path: 'licensing',
     loadChildren: () => LicensingModule
   },
-  { path: 'home', component: HomeComponent },
+  {
+    path: 'home',
+    loadChildren: () => HomeModule
+  },
   {
     /**
      * Load editor module with subroutes

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

@@ -112,7 +112,7 @@
 
                 <div
                   *ngIf="
-                    ['autocomplete'].includes(
+                    ['autocomplete', 'autocomplete.custom'].includes(
                       $any(currentRecordValidator?.getRule(col.key)?.editor)
                     )
                   "
@@ -163,7 +163,7 @@
 
                 <div
                   *ngIf="
-                    ['autocomplete'].includes(
+                    ['autocomplete', 'autocomplete.custom'].includes(
                       $any(currentRecordValidator?.getRule(col.key)?.editor)
                     )
                   "
@@ -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

@@ -165,11 +165,14 @@
         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">
-          <span class="btn btn-sm" [routerLink]="['/home']">
+          <span class="btn btn-sm btn-icon btn-dimmed" [routerLink]="['/home']">
-            <clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
+            <clr-icon shape="caret" dir="left" size="20"></clr-icon>
-            table selection
+            Back to table selection
           </span>
-          <span (click)="viewboxManager()" class="btn btn-sm viewbox-open">
+          <span
+            (click)="viewboxManager()"
+            class="btn btn-sm btn-icon btn-dimmed viewbox-open"
+          >
             <clr-icon shape="view-cards" size="20"></clr-icon>
             Viewboxes
           </span>
@@ -186,7 +189,9 @@
             } as libdsParsed"
             class="editor-title text-center mt-0-i"
           >
+            <clr-tooltip>
               <clr-icon
+                clrTooltipTrigger
                 (click)="datasetInfo = true"
                 shape="info-circle"
                 class="is-highlight cursor-pointer"
@@ -199,11 +204,25 @@
                 class="color-yellow"
               ></clr-icon>
 
+              <span clrTooltipTrigger>
                 {{ libdsParsed.libName }}.<a
-              class="mr-10"
+                  class="mr-10 view-table"
                   [routerLink]="'/view/data/' + libds!"
                   >{{ libdsParsed.tableName.replace('-FC', '') }}</a
                 >
+              </span>
+
+              <ng-container *ngIf="this.dsNote && this.dsNote.length > 0">
+                <clr-tooltip-content
+                  clrPosition="bottom-left"
+                  clrSize="lg"
+                  *clrIfOpen
+                >
+                  {{ this.dsNote }}
+                </clr-tooltip-content>
+              </ng-container>
+            </clr-tooltip>
+
             <ng-container *ngIf="dataSource">
               <ng-container *ngIf="!zeroFilterRows">
                 ({{ dataSource.length | thousandSeparator: ',' }}
@@ -219,7 +238,7 @@
           <ng-container *ngIf="hotTable.readOnly && !uploadPreview">
             <button
               type="button"
-              class="btnView btn btn-sm btn-icon btn-block"
+              class="btnView btn btn-sm btn-icon btn-block btn-dimmed"
               (click)="openQb()"
             >
               <clr-icon shape="filter"></clr-icon>
@@ -280,7 +299,7 @@
                     licenceState.value.editor_rows_allowed === 1
                       ? 'row'
                       : 'rows'
-                  }}, contact support@datacontroller.io</span
+                  }}, contact support&#64;datacontroller.io</span
                 >
               </clr-tooltip-content>
             </clr-tooltip>
@@ -346,8 +365,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>
 
@@ -356,8 +375,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>
@@ -382,6 +401,7 @@
               hotId="hotInstance"
               id="hotTable"
               class="edit-hot"
+              className="htDark"
               [class.hidden]="hotTable.hidden"
               [licenseKey]="hotTable.licenseKey"
             >
@@ -417,7 +437,7 @@
                     licenceState.value.editor_rows_allowed === 1
                       ? 'row'
                       : 'rows'
-                  }}, contact support@datacontroller.io</span
+                  }}, contact support&#64;datacontroller.io</span
                 >
               </clr-tooltip-content>
             </clr-tooltip>
@@ -467,14 +487,18 @@
                         : 'rows'
                     }}
                     will be submitted. To remove the restriction, contact
-                    support@datacontroller.io</span
+                    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 ' +
@@ -482,10 +506,9 @@
                               ' cells.'
                             : ''
                         "
-                        class="w-100"
+                        class="submit-reason"
                         type="text"
                         id="formFields_8"
-                        rows="5"
                       ></textarea>
                     </div>
                     <!-- TODO:approvers list -->
@@ -504,6 +527,7 @@
                     [disabled]="!validationDone"
                     type="submit"
                     class="btn btn-sm btn-success-outline m-0"
+                    tabindex="0"
                     (click)="saveTable(hotTable.data)"
                   >
                     Submit
@@ -512,6 +536,7 @@
                     id="cancelSubmitBtn"
                     type="button"
                     class="btn btn-sm btn-outline"
+                    tabindex="0"
                     (click)="cancelSubmit(); submit = false; validationDone = 0"
                   >
                     Cancel
@@ -528,7 +553,7 @@
                 Due to current licence, only
                 {{ licenceState.value.submit_rows_limit }} rows in a file will
                 be submitted. To remove the restriction, contact
-                support@datacontroller.io
+                support&#64;datacontroller.io
               </p>
             </div>
             <div class="modal-footer">
@@ -830,6 +855,12 @@
   </div>
 </clr-modal>
 
-<app-dataset-info [(open)]="datasetInfo" [dsmeta]="dsmeta"></app-dataset-info>
+<app-dataset-info
+  [(open)]="datasetInfo"
+  [dsmeta]="dsmeta"
+  [versions]="versions"
+  (rowClicked)="datasetInfoModalRowClicked($event)"
+>
+</app-dataset-info>
 
 <app-viewboxes [(viewboxModal)]="viewboxes"></app-viewboxes>

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 {
@@ -214,6 +219,10 @@ hot-table {
   width: 150px;
 }
 
+.view-table {
+  font-size: inherit !important;
+}
+
 // FIXME
 // Let's leave it here for a reference if there
 // is an issue with viewboxes/filter modal overlaying

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

@@ -38,7 +38,8 @@ import { HotTableInterface } from '../models/HotTable.interface'
 import {
   $DataFormats,
   DSMeta,
-  EditorsGetdataServiceResponse
+  EditorsGetDataServiceResponse,
+  Version
 } from '../models/sas/editors-getdata.model'
 import { DataFormat } from '../models/sas/common/DateFormat'
 import SheetInfo from '../models/SheetInfo'
@@ -121,6 +122,8 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
   datasetInfo: boolean = false
   dsmeta: DSMeta[] = []
+  versions: Version[] = []
+  dsNote = ''
 
   viewboxes: boolean = false
 
@@ -939,13 +942,30 @@ export class EditorComponent implements OnInit, AfterViewInit {
             return row.map((col: any, index: number) => {
               if (!col && col !== 0) col = ''
 
-              if (isNaN(col)) {
+              /**
-                col = col.replace(/"/g, '""')
+               * 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) {
+              //   if (col.search(/,/g) > -1 ||
-                  col = '"' + col + '"'
+              //       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 = this.headerShow[index]
               const colRule = this.dcValidator?.getRule(colName)
@@ -960,20 +980,30 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
           this.data = csvArrayData
 
-          let csvContent = csvArrayHeaders.join(',') + '\n'
+          // Apply licence rows limitation if exists, it is only affecting data
-          // Apply licence rows limitation if exists
+          // which will be send to SAS
-          csvContent += csvArrayData
+          const strippedCsvArrayData = csvArrayData.slice(
-            .slice(0, this.licenceState.value.submit_rows_limit)
+            0,
-            .map((e) => e.join(','))
+            this.licenceState.value.submit_rows_limit
-            .join('\n')
+          )
+          // 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
 
           if (this.encoding === 'WLATIN1') {
-            let encoded = iconv.decode(Buffer.from(csvContent), 'CP-1252')
+            let encoded = iconv.decode(Buffer.from(csvContentClean), 'CP-1252')
             let blob = new Blob([encoded], { type: 'application/csv' })
             let newCSVFile: File = this.blobToFile(blob, this.filename + '.csv')
             this.uploader.addToQueue([newCSVFile])
           } else {
-            let blob = new Blob([csvContent], { type: 'application/csv' })
+            let blob = new Blob([csvContentClean], { type: 'application/csv' })
             let newCSVFile: File = this.blobToFile(blob, this.filename + '.csv')
             this.uploader.addToQueue([newCSVFile])
           }
@@ -1928,13 +1958,13 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
         if (entry.values.length > 0) {
           hot.setCellMeta(entry.row, entry.col, 'renderer', 'autocomplete')
-          hot.setCellMeta(entry.row, entry.col, 'editor', 'autocomplete')
+          hot.setCellMeta(entry.row, entry.col, 'editor', 'autocomplete.custom')
           hot.setCellMeta(entry.row, entry.col, 'strict', entry.strict)
           hot.setCellMeta(entry.row, entry.col, 'filter', false)
 
           this.currentEditRecordValidator?.updateRule(entry.col, {
             renderer: 'autocomplete',
-            editor: 'autocomplete',
+            editor: 'autocomplete.custom',
             strict: entry.strict,
             filter: false
           })
@@ -2029,13 +2059,13 @@ export class EditorComponent implements OnInit, AfterViewInit {
       }
 
       hot.setCellMeta(row, cellCol, 'renderer', 'autocomplete')
-      hot.setCellMeta(row, cellCol, 'editor', 'autocomplete')
+      hot.setCellMeta(row, cellCol, 'editor', 'autocomplete.custom')
       hot.setCellMeta(row, cellCol, 'strict', cellValidationEntry.strict)
       hot.setCellMeta(row, cellCol, 'filter', false)
 
       this.currentEditRecordValidator?.updateRule(cellCol, {
         renderer: 'autocomplete',
-        editor: 'autocomplete',
+        editor: 'autocomplete.custom',
         strict: cellValidationEntry.strict,
         filter: false
       })
@@ -2233,8 +2263,8 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
       setTimeout(() => {
         let txt: any = document.getElementById('formFields_8')
-        txt.focus()
+        if (txt) txt.focus()
-      })
+      }, 200)
     })
 
     // let cnt = 0;
@@ -2678,13 +2708,13 @@ export class EditorComponent implements OnInit, AfterViewInit {
           const strict = this.cellValidationSource[validationSourceIndex].strict
 
           hot.setCellMeta(row, column, 'renderer', 'autocomplete')
-          hot.setCellMeta(row, column, 'editor', 'autocomplete')
+          hot.setCellMeta(row, column, 'editor', 'autocomplete.custom')
           hot.setCellMeta(row, column, 'strict', strict)
           hot.setCellMeta(row, column, 'filter', false)
 
           this.currentEditRecordValidator?.updateRule(column, {
             renderer: 'autocomplete',
-            editor: 'autocomplete',
+            editor: 'autocomplete.custom',
             strict: strict,
             filter: false
           })
@@ -2736,6 +2766,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
         })
 
         hot.setCellMeta(row, column, 'renderer', spinnerRenderer)
+
         this.currentEditRecordLoadings.push(column)
         hot.render()
 
@@ -2906,6 +2937,16 @@ export class EditorComponent implements OnInit, AfterViewInit {
     }
   }
 
+  datasetInfoModalRowClicked(value: Version | DSMeta) {
+    if ((<Version>value).LOAD_REF !== undefined) {
+      // Type is Version
+      const row = value as Version
+      const url = `/stage/${row.LOAD_REF}`
+
+      this.router.navigate([url])
+    }
+  }
+
   viewboxManager() {
     this.viewboxes = true
   }
@@ -2918,6 +2959,37 @@ export class EditorComponent implements OnInit, AfterViewInit {
     )
   }
 
+  /**
+   * Function checks if selected hot cell is solo cell selected
+   * and if it is, set the `filter` property based on filter param.
+   *
+   * @param filter
+   */
+  private setCellFilter(filter: boolean) {
+    const hotSelected = this.hotInstance.getSelected()
+    const selection = hotSelected ? hotSelected[0] : hotSelected
+
+    // When we open a dropdown we want filter disabled so value in cell
+    // don't filter out items, since we want to see them all.
+    // But when we start typing we want to be able to start filtering values
+    // again
+    if (selection) {
+      const startRow = selection[0]
+      const endRow = selection[2]
+      const startCell = selection[1]
+      const endCell = selection[3]
+
+      if (startRow === endRow && startCell === endCell) {
+        const cellMeta = this.hotInstance.getCellMeta(startRow, startCell)
+
+        // If filter is not already set at the value in the param, set it
+        if (cellMeta && cellMeta.filter === !filter) {
+          this.hotInstance.setCellMeta(startRow, startCell, 'filter', filter)
+        }
+      }
+    }
+  }
+
   async ngOnInit() {
     this.licenceService.hot_license_key.subscribe(
       (hot_license_key: string | undefined) => {
@@ -2964,7 +3036,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
       await this.sasStoreService
         .callService(myParams, 'SASControlTable', 'editors/getdata', this.libds)
-        .then((res: EditorsGetdataServiceResponse) => {
+        .then((res: EditorsGetDataServiceResponse) => {
           this.initSetup(res)
         })
         .catch((err: any) => {
@@ -2976,7 +3048,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {}
 
-  initSetup(response: EditorsGetdataServiceResponse) {
+  initSetup(response: EditorsGetDataServiceResponse) {
     this.hotInstance = this.hotRegisterer.getInstance('hotInstance')
 
     if (this.getdataError) return
@@ -2985,6 +3057,21 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
     this.cols = response.data.cols
     this.dsmeta = response.data.dsmeta
+    this.versions = response.data.versions || []
+
+    const notes = this.dsmeta.find((item) => item.NAME === 'NOTES')
+    const longDesc = this.dsmeta.find((item) => item.NAME === 'DD_LONGDESC')
+    const shortDesc = this.dsmeta.find((item) => item.NAME === 'DD_SHORTDESC')
+
+    if (notes && notes.VALUE) {
+      this.dsNote = notes.VALUE
+    } else if (longDesc && longDesc.VALUE) {
+      this.dsNote = longDesc.VALUE
+    } else if (shortDesc && shortDesc.VALUE) {
+      this.dsNote = shortDesc.VALUE
+    } else {
+      this.dsNote = ''
+    }
 
     const hot: Handsontable = this.hotInstance
 
@@ -3171,6 +3258,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
           if (col === 0) {
             th.classList.add('firstColumnHeaderStyle')
           }
+
+          // Dark mode
+          th.classList.add('darkTH')
         },
         afterGetCellMeta: (
           row: number,
@@ -3259,28 +3349,16 @@ export class EditorComponent implements OnInit, AfterViewInit {
       }
     )
 
-    hot.addHook('beforeKeyDown', (e: any) => {
+    hot.addHook('afterBeginEditing', () => {
-      const hotSelected = this.hotInstance.getSelected()
-      const selection = hotSelected ? hotSelected[0] : hotSelected
-
       // When we open a dropdown we want filter disabled so value in cell
       // don't filter out items, since we want to see them all.
+      this.setCellFilter(false)
+    })
+
+    hot.addHook('beforeKeyDown', () => {
       // When we start typing, we are enabling the filter since we want to find
       // values faster.
-      if (selection) {
+      this.setCellFilter(true)
-        const startRow = selection[0]
-        const endRow = selection[2]
-        const startCell = selection[1]
-        const endCell = selection[3]
-
-        if (startRow === endRow && startCell === endCell) {
-          const cellMeta = this.hotInstance.getCellMeta(startRow, startCell)
-
-          if (cellMeta && cellMeta.filter === false) {
-            this.hotInstance.setCellMeta(startRow, startCell, 'filter', true)
-          }
-        }
-      }
     })
 
     hot.addHook('afterChange', (source: any, change: any) => {

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

@@ -12,7 +12,6 @@ import { EditRecordComponent } from './components/edit-record/edit-record.compon
 import { UploadStaterComponent } from './components/upload-stater/upload-stater.component'
 import { EditorRoutingModule } from './editor-routing.module'
 import { EditorComponent } from './editor.component'
-import { HomeModule } from '../home/home.module'
 import { DcTreeModule } from '../shared/dc-tree/dc-tree.module'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { ViewboxesModule } from '../shared/viewboxes/viewboxes.module'
@@ -33,7 +32,6 @@ registerAllModules()
     AppSharedModule,
     DirectivesModule,
     SharedModule,
-    HomeModule,
     PipesModule,
     DcTreeModule,
     DragDropModule,

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,3 +1,43 @@
+@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%;
 }
@@ -6,21 +46,18 @@
     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

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core'
+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'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeRouteComponent,
+    children: [
+      { path: '', pathMatch: 'full', redirectTo: 'tables' },
+      { path: 'tables', component: HomeComponent },
+      { path: 'files', loadChildren: () => XLMapModule }
+    ]
+  }
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule {}

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>
@@ -94,15 +96,17 @@
               {{ libTable.replace('-FC', '') }}
             </button>
 
+            <ng-container *ngIf="tableLocked">
               <clr-tooltip-content
                 clrPosition="bottom-right"
                 clrSize="lg"
                 *clrIfOpen
               >
-              <span *ngIf="tableLocked">
+                <span>
-                To unlock all tables, contact support@datacontroller.io
+                  To unlock all tables, contact support&#64;datacontroller.io
                 </span>
               </clr-tooltip-content>
+            </ng-container>
           </clr-tooltip>
         </clr-tree-node>
       </clr-tree-node>
@@ -124,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/home/home.module.ts

@@ -1,15 +1,18 @@
-import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { HomeComponent } from './home.component'
+import { NgModule } from '@angular/core'
-import { ClarityModule } from '@clr/angular'
 import { FormsModule } from '@angular/forms'
+import { ClarityModule } from '@clr/angular'
 import { AppSharedModule } from '../app-shared.module'
-import { DcTreeModule } from '../shared/dc-tree/dc-tree.module'
 import { DirectivesModule } from '../directives/directives.module'
+import { HomeRouteComponent } from '../routes/home-route/home-route.component'
+import { DcTreeModule } from '../shared/dc-tree/dc-tree.module'
+import { HomeRoutingModule } from './home-routing.module'
+import { HomeComponent } from './home.component'
 
 @NgModule({
-  declarations: [HomeComponent],
+  declarations: [HomeComponent, HomeRouteComponent],
   imports: [
+    HomeRoutingModule,
     FormsModule,
     ClarityModule,
     AppSharedModule,

client/src/app/licensing/licensing.component.html

@@ -2,9 +2,11 @@
   <div class="card-header">Licencing</div>
 
   <div [ngSwitch]="action" class="card-block">
+    <div class="card-text">
       <ng-container *ngSwitchCase="'key'">
         <p class="key-error" *ngIf="!keyError">
-        Licence key is invalid. We can't provide you more details at the moment
+          Licence key is invalid. We can't provide you more details at the
+          moment
         </p>
 
         <p
@@ -126,7 +128,9 @@
           </clr-tab-content>
         </clr-tab>
       </clr-tabs>
+    </div>
 
+    <div class="card-footer d-flex clr-align-items-center">
       <button
         (click)="applyKeys()"
         class="btn btn-primary apply-keys"
@@ -144,6 +148,7 @@
         Continue with free tier
       </button>
     </div>
+  </div>
 </div>
 
 <app-terms *ngIf="action === 'register'"></app-terms>

client/src/app/licensing/licensing.component.scss

@@ -33,7 +33,6 @@
 
 .apply-keys {
   height: 40px;
-  width: 200px;
 }
 
 .drop-area {

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/lineage/lineage.component.ts

@@ -656,8 +656,7 @@ export class LineageComponent {
           this.flatdata = res.flatdata
 
           if (this.libraryList) {
-            let libraryToSelect = this.libraryList.find(
+            let libraryToSelect = this.libraryList.find((library: any) =>
-              (library: any) =>
               res.info[0]?.LIBURI?.toUpperCase()?.includes(
                 library?.LIBRARYID?.toUpperCase()
               )

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"
                       >
+                        <div>
                           <clr-icon
                             *ngIf="!entry.count"
                             shape="rack-server"
                           ></clr-icon>
-                        <clr-icon *ngIf="entry.count" shape="block"></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>
@@ -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="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/FilterQuery.ts

@@ -6,6 +6,7 @@ export interface FilterClause {
   operators: string[]
   type: string
   value: any
+  valueVariable: boolean
   values: { formatted: string; unformatted: any }[]
   variable: string
 }

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

@@ -4,12 +4,12 @@ import { DQData, SASParam } from '../TableData'
 import { BaseSASResponse } from './common/BaseSASResponse'
 import { DataFormat } from './common/DateFormat'
 
-export interface EditorsGetdataServiceResponse {
+export interface EditorsGetDataServiceResponse {
-  data: EditorsGetdataSASResponse
+  data: EditorsGetDataSASResponse
   libds: string
 }
 
-export interface EditorsGetdataSASResponse extends BaseSASResponse {
+export interface EditorsGetDataSASResponse extends BaseSASResponse {
   $sasdata: $DataFormats
   sasdata: Sasdata[]
   sasparams: SASParam[]
@@ -17,6 +17,7 @@ export interface EditorsGetdataSASResponse extends BaseSASResponse {
   dqrules: DQRule[]
   dsmeta: DSMeta[]
   dqdata: DQData[]
+  versions: Version[]
   cols: Col[]
   maxvarlengths: Maxvarlength[]
   xl_rules: any[]
@@ -27,6 +28,18 @@ export interface DSMeta {
   ODS_TABLE: string
   NAME: string
   VALUE: string
+  [key: string]: string
+}
+
+export interface Version {
+  LOAD_REF: string
+  USER_NM: string
+  VERSION_DTTM: string
+  VERSION_DESC: string
+  CHANGED_RECORDS: number
+  NEW_RECORDS: number
+  DELETED_RECORDS: number
+  [key: string]: string | number
 }
 
 export interface Sasdata {

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

@@ -0,0 +1,9 @@
+import { BaseSASResponse } from './common/BaseSASResponse'
+
+export interface EditorsRestoreServiceResponse extends BaseSASResponse {
+  restore_out: RestoreOut[]
+}
+
+export interface RestoreOut {
+  LOADREF: string
+}

client/src/app/query/query.component.html

@@ -143,7 +143,6 @@
                   (ngModelChange)="
                     setVariableOperator(queryIndex, query.operator, clauseIndex)
                   "
-                  class="mt-2"
                   clrSelect
                 >
                   <option *ngFor="let opr of query.operators">{{ opr }}</option>
@@ -413,7 +412,10 @@
 >
   <app-soft-select
     label="Value"
+    [secondLabel]="'Variable'"
+    [emitOnlySelected]="query.valueVariable"
     [inputId]="'vals_' + queryIndex + '_' + clauseIndex"
+    (selectedLabelChange)="selectedLabelChange($event, query)"
     [(value)]="query.value"
     [enableLoadMore]="query.nobs > query.values.length"
     (onInputEvent)="
@@ -423,9 +425,19 @@
       onAutocompleteLoadingMore($event, query.variable, queryIndex, clauseIndex)
     "
   >
+    <div *ngIf="!query.valueVariable">
       <option [value]="column.unformatted" *ngFor="let column of query.values">
         {{ column.formatted.trim() }}
       </option>
+    </div>
+
+    <div *ngIf="query.valueVariable">
+      <ng-container *ngFor="let column of cols">
+        <option [value]="column.NAME" *ngIf="column.TYPE === query.type">
+          {{ column.NAME }}
+        </option>
+      </ng-container>
+    </div>
   </app-soft-select>
 </ng-template>
 

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/query/query.component.ts

@@ -95,6 +95,7 @@ export class QueryComponent
         variable: null,
         operator: null,
         value: null,
+        valueVariable: false,
         startrow: 0,
         rows: 0,
         nobs: 0,
@@ -193,6 +194,20 @@ export class QueryComponent
    */
   usePickersChange() {
     this.queryDateTime = []
+    if (this.usePickers) {
+      this.clauses.queryObj.forEach((queryObj: any) => {
+        queryObj.elements.forEach((element: any) => {
+          const isDateOrTime = ['DATETIME', 'TIME', 'DATE'].includes(
+            element.ddtype
+          )
+
+          if (isDateOrTime && element.valueVariable) {
+            element.value = ''
+            element.valueVariable = false
+          }
+        })
+      })
+    }
   }
 
   /**
@@ -253,8 +268,6 @@ export class QueryComponent
       get(globals, objPath).filter.libds = this.libds
     }
     get(globals, objPath).filter.clauses = this.clauses
-
-    console.log('globals', globals)
   }
 
   /**
@@ -750,6 +763,12 @@ export class QueryComponent
     )
   }
 
+  public selectedLabelChange(label: string, query: any) {
+    query.valueVariable = label === 'Variable'
+    query.value = ''
+    this.whereClauseFn()
+  }
+
   public variableInputChange(
     queryVariable: any,
     index: number,
@@ -859,17 +878,25 @@ export class QueryComponent
    */
   public hasInvalidCluase(clauses: any): boolean {
     for (let clause of clauses) {
+      clause['invalidClause'] = false
+
       if (
-        clause.variable === null ||
+        clause.value === '' &&
-        clause.operator === null ||
+        !(clause.operator === 'NE' || clause.operator === 'CONTAINS')
-        clause.value === null ||
+      ) {
-        clause.value === ''
+        clause['invalidClause'] = true
+
+        return true
+      }
+
+      if (
+        clause.variable === null ||
+        clause.operator === null ||
+        clause.value === null
       ) {
         clause['invalidClause'] = true
 
         return true
-      } else {
-        clause['invalidClause'] = false
       }
     }
 

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

@@ -139,10 +139,7 @@
         <div class="card-header p-0">
           <div class="clr-row">
             <div class="clr-col-md-4 approvalBack">
-              <span
+              <span class="btn btn-outline m-0" (click)="goToApprovalsList()">
-                class="btn btn-sm btn-outline m-0"
-                (click)="goToApprovalsList()"
-              >
                 <clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
                 approvals list
               </span>
@@ -209,22 +206,22 @@
                   <div class="d-flex justify-content-center mt-0">
                     <div class="clr-row clr-gap-5 clr-gap-sm-0">
                       <button
-                        class="btn btn-sm btn-outline text-center mt-5"
+                        class="btn btn-sm btn-outline text-center mt-5 mr-5i"
                         (click)="goToBase(jsParams?.TABLE_NM)"
                       >
-                        Go to base table screen
+                        View base table
                       </button>
                       <button
-                        class="btn btn-sm btn-success-outline text-center mt-5"
+                        class="btn btn-sm btn-success-outline text-center mt-5 mr-5i"
                         (click)="getTable(tableId)"
                       >
-                        Go to edited screen
+                        View staged data
                       </button>
                       <button
                         class="btn btn-sm btn-info-outline text-center mt-5"
                         (click)="goBack(jsParams?.TABLE_NM)"
                       >
-                        Go back to editor
+                        Edit base table
                       </button>
                     </div>
                   </div>
@@ -236,7 +233,7 @@
                     id="acceptBtn"
                     [clrLoading]="acceptLoading"
                     type="submit"
-                    class="btn btn-sm btn-success"
+                    class="btn btn-sm btn-success mr-5i"
                     (click)="approveTable()"
                     [disabled]="
                       !loadingTable || params?.ISAPPROVER === 'NO' || noChanges
@@ -246,7 +243,7 @@
                   </button>
                   <button
                     id="rejectBtn"
-                    class="btn btn-sm btn btn-danger mr-0"
+                    class="btn btn-sm btn btn-danger mr-5i"
                     (click)="rejectOpen = true"
                     [disabled]="
                       !loadingTable || params?.ISAPPROVER === 'NO' || noChanges
@@ -287,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>
@@ -314,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>
 
@@ -394,9 +387,9 @@
         <div class="card-header">
           <div class="clr-row">
             <div class="clr-col-md-4 approvalBack">
-              <span class="btn btn-sm btn-outline" (click)="goToSubmitList()">
+              <span class="btn btn-outline" (click)="goToSubmitList()">
-                <clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
+                <cds-icon shape="angle" direction="left" size="20"></cds-icon
-                submitted list
+                >Back to submitted list
               </span>
             </div>
             <div class="clr-col-md-4">
@@ -443,22 +436,22 @@
               <div class="d-flex justify-content-center mt-0">
                 <div class="clr-row clr-gap-5 clr-gap-sm-0">
                   <button
-                    class="btn btn-sm btn-outline text-center mt-5"
+                    class="btn btn-sm btn-outline text-center mt-5 mr-5i"
                     (click)="goToBase(subObj.base)"
                   >
-                    Go to base table screen
+                    View base table
                   </button>
                   <button
-                    class="btn btn-sm btn-success-outline text-center mt-5"
+                    class="btn btn-sm btn-success-outline text-center mt-5 mr-5i"
                     (click)="getTable(subObj.tableId)"
                   >
-                    Go to edited screen
+                    View staged data
                   </button>
                   <button
                     class="btn btn-sm btn-info-outline text-center mt-5"
                     (click)="goBack(subObj.base)"
                   >
-                    Go back to editor
+                    Edit base table
                   </button>
                 </div>
               </div>
@@ -480,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>
@@ -522,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;
 }
 
-.updatedRow {
+::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 {
   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,18 +99,10 @@
             </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

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/history/history.component.html

@@ -72,7 +72,7 @@
       >
         To unlock more than
         {{ licenceState.value.history_rows_allowed }} records, contact
-        support@datacontroller.io
+        support@datacontroller.io
       </p>
     </div>
 

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

@@ -86,18 +86,10 @@
               </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

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,3 +1,43 @@
+@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%;
 }
@@ -6,20 +46,16 @@
     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/home-route/home-route.component.html

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

client/src/app/routes/home-route/home-route.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, OnDestroy } from '@angular/core'
+
+@Component({
+  selector: 'app-home-route',
+  templateUrl: './home-route.component.html',
+  styleUrls: ['./home-route.component.scss'],
+  host: {
+    class: 'content-container'
+  }
+})
+export class HomeRouteComponent implements OnInit, OnDestroy {
+  constructor() {}
+
+  ngOnInit() {}
+
+  ngOnDestroy() {}
+}

client/src/app/routes/xlmap-route/xlmap-route.component.html

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

client/src/app/routes/xlmap-route/xlmap-route.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, OnDestroy } from '@angular/core'
+
+@Component({
+  selector: 'app-xlmap-route',
+  templateUrl: './xlmap-route.component.html',
+  styleUrls: ['./xlmap-route.component.scss'],
+  host: {
+    class: 'content-container'
+  }
+})
+export class XLMapRouteComponent 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() {
@@ -74,6 +90,7 @@ export class AppService {
           missingProps.push('Globvars')
         if (!res.sasdatasets) missingProps.push('Sasdatasets')
         if (!res.saslibs) missingProps.push('Saslibs')
+        if (!res.xlmaps) missingProps.push('XLMaps')
 
         if (missingProps.length > 0) {
           startupServiceError = true
@@ -94,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,
@@ -135,10 +153,17 @@ export class AppService {
           globals.editor.libsAndTables = libsAndTables
         }
 
+        globals.xlmaps = res.xlmaps.map((xlmap: any) => ({
+          id: xlmap[0],
+          description: xlmap[1],
+          targetDS: xlmap[2]
+        }))
         globals.editor.treeNodeLibraries = treeNodeLibraries
         globals.editor.libraries = libraries
         globals.editor.startupSet = true
 
+        globals.dcLib = res.globvars[0].DCLIB
+
         await this.licenceService.activation(res)
       })
       .catch((err: any) => {

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

@@ -10,8 +10,8 @@ import { globals } from '../_globals'
 import { FilterClause, FilterGroup, FilterQuery } from '../models/FilterQuery'
 import {
   $DataFormats,
-  EditorsGetdataSASResponse,
+  EditorsGetDataSASResponse,
-  EditorsGetdataServiceResponse
+  EditorsGetDataServiceResponse
 } from '../models/sas/editors-getdata.model'
 import { LoggerService } from './logger.service'
 import { isSpecialMissing } from '@sasjs/utils/input/validators'
@@ -57,13 +57,13 @@ export class SasStoreService {
     libds: string
   ) {
     this.libds = libds
-    let tables: any = {}
+    const tables: any = {}
     tables[tableName] = [tableData]
-    let res: EditorsGetdataSASResponse = await this.sasService.request(
+    const res: EditorsGetDataSASResponse = await this.sasService.request(
       program,
       tables
     )
-    let response: EditorsGetdataServiceResponse = {
+    const response: EditorsGetDataServiceResponse = {
       data: res,
       libds: this.libds
     }
@@ -209,6 +209,14 @@ export class SasStoreService {
     return res
   }
 
+  public async getXLMapRules(id: string) {
+    const tables = {
+      getxlmaps_in: [{ XLMAP_ID: id }]
+    }
+    const res: any = await this.sasService.request('editors/getxlmaps', tables)
+    return res
+  }
+
   public async getDetails(tableData: any, tableName: string, program: string) {
     let tables: any = {}
     tables[tableName] = [tableData]
@@ -408,14 +416,18 @@ export class SasStoreService {
     for (let index = 0; index < clauses.queryObj.length; index++) {
       let string = ''
       let clause = clauses.queryObj[index]
+
       for (let ind = 0; ind < clause.elements.length; ind++) {
         let query = clause.elements[ind]
+
         if (ind < clause.elements.length - 1) {
           opr = clause.clauseLogic
         } else {
           opr = ''
         }
+
         let val: any
+
         for (let k = 0; k < query.values.length; k++) {
           if (
             typeof query.value === 'string' &&
@@ -486,6 +498,8 @@ export class SasStoreService {
         }
 
         let type = query.type
+        //if the value is variable, omit quotes in the 'where' string
+        const isValueVariable = query.valueVariable
         let variable = query.variable === null ? '' : query.variable
         let oper = query.operator === null ? '' : query.operator
         // let value = val === null ? "''" : val;
@@ -499,10 +513,14 @@ export class SasStoreService {
         if (type === 'char' && oper !== 'IN' && oper !== 'NOT IN') {
           if (typeof value === 'undefined') {
             value = ''
-            value = " '" + value + "' "
-          } else {
-            value = " '" + value + "' "
           }
+
+          if (isValueVariable) {
+            value = ' ' + value + ' ' //without quotes, with spaces
+          } else {
+            value = " '" + value + "' " //with quotes and spaces
+          }
+
           string = string + ' ' + variable + ' ' + oper + value + opr
         } else {
           if (type === 'num' && typeof value === 'undefined') {
@@ -596,7 +614,7 @@ export class SasStoreService {
               rawValue = '.'
             }
           } else {
-            if (filterClause.type === 'char') {
+            if (filterClause.type === 'char' && !filterClause.valueVariable) {
               rawValue = `'${filterClause.value.replace(/'/g, "''")}'`
             }
           }

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/contact-link/contact-link.component.html

@@ -2,5 +2,5 @@
   [ngClass]="classes"
   [class.unset]="classes !== ''"
   href="mailto:support@datacontroller.io?subject=Licence"
-  >support@datacontroller.io</a
+  >support&#64;datacontroller.io</a
 >

client/src/app/shared/dataset-info/dataset-info.component.html

@@ -6,25 +6,31 @@
 >
   <h3 class="modal-title center text-center color-darker-gray">Dataset Meta</h3>
   <div class="modal-body">
-    <p *ngIf="dsmetaGroupped.length < 1" class="text-center">
+    <p *ngIf="dsmetaTabs.length < 1" class="text-center">
       No dataset meta to show.
     </p>
 
     <clr-tabs clrLayout="vertical">
-      <clr-tab *ngFor="let dsmeta of dsmetaGroupped; let index = index">
+      <clr-tab *ngFor="let tab of tabs; let index = index">
-        <button clrTabLink id="link1">{{ dsmeta.group }}</button>
+        <button clrTabLink id="link1">{{ tab.name }}</button>
         <clr-tab-content
           id="content1"
           *clrIfActive="index === 0"
           class="d-flex clr-justify-content-center w-100"
         >
           <clr-datagrid>
-            <clr-dg-column>Name</clr-dg-column>
+            <ng-container *ngFor="let col of tab.colsToDisplay">
-            <clr-dg-column>Value</clr-dg-column>
+              <clr-dg-column>{{ col.colName || col.colKey }}</clr-dg-column>
+            </ng-container>
 
-            <clr-dg-row *ngFor="let info of dsmeta.dsmeta">
+            <clr-dg-row
-              <clr-dg-cell>{{ info.NAME }}</clr-dg-cell>
+              (click)="tab.onRowClick ? tab.onRowClick(info) : ''"
-              <clr-dg-cell>{{ info.VALUE }}</clr-dg-cell>
+              class="clickable-row"
+              *ngFor="let info of tab.meta"
+            >
+              <ng-container *ngFor="let col of tab.colsToDisplay">
+                <clr-dg-cell>{{ info[col.colKey] }}</clr-dg-cell>
+              </ng-container>
             </clr-dg-row>
           </clr-datagrid>
         </clr-tab-content>

client/src/app/shared/dataset-info/dataset-info.component.scss

@@ -14,3 +14,22 @@
     }
   }
 }
+
+clr-modal {
+  ::ng-deep {
+    .modal-dialog {
+      height: 100%;
+    }
+  }
+}
+
+.clickable-row {
+  cursor: pointer;
+}
+
+::ng-deep {
+  .datagrid-table .datagrid-cell:focus {
+    outline: none;
+    outline-offset: 0;
+  }
+}

client/src/app/shared/dataset-info/dataset-info.component.ts

@@ -7,8 +7,8 @@ import {
   Output,
   SimpleChanges
 } from '@angular/core'
-import { DSMeta } from 'src/app/models/sas/editors-getdata.model'
+import { DSMeta, Version } from 'src/app/models/sas/editors-getdata.model'
-import { DSMetaGroupped } from './models/dsmeta-groupped.model'
+import { Tab } from './models/dsmeta-groupped.model'
 
 @Component({
   selector: 'app-dataset-info',
@@ -18,10 +18,15 @@ import { DSMetaGroupped } from './models/dsmeta-groupped.model'
 export class DatasetInfoComponent implements OnInit, OnChanges {
   @Input() open: boolean = false
   @Input() dsmeta: DSMeta[] = []
+  @Input() versions: Version[] = []
 
   @Output() openChange = new EventEmitter<boolean>()
+  @Output() rowClicked = new EventEmitter<Version | DSMeta>()
 
-  dsmetaGroupped: DSMetaGroupped[] = []
+  dsmetaTabs: Tab<DSMeta>[] = []
+  versionsTabs: Tab<Version>[] = []
+
+  tabs: Tab<DSMeta | Version>[] = []
 
   constructor() {}
 
@@ -30,28 +35,58 @@ export class DatasetInfoComponent implements OnInit, OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.dsmeta?.currentValue?.length > 0) {
       this.parseDSMeta()
+      this.parseVersions()
+
+      this.tabs = [...[...this.dsmetaTabs], ...[...this.versionsTabs]]
     }
   }
 
   parseDSMeta() {
-    this.dsmetaGroupped = []
+    this.dsmetaTabs = []
 
     for (let info of this.dsmeta) {
-      let groupIndex = this.dsmetaGroupped.findIndex(
+      let groupIndex = this.dsmetaTabs.findIndex(
-        (x) => x.group === info.ODS_TABLE
+        (x) => x.name === info.ODS_TABLE
       )
 
       if (groupIndex < 0)
         groupIndex =
-          this.dsmetaGroupped.push({
+          this.dsmetaTabs.push({
-            group: info.ODS_TABLE,
+            name: info.ODS_TABLE,
-            dsmeta: []
+            title: 'Dataset Meta',
+            colsToDisplay: [{ colKey: 'NAME' }, { colKey: 'VALUE' }],
+            meta: [],
+            onRowClick: (value: DSMeta) => {
+              this.rowClicked.emit(value)
+            }
           }) - 1
 
-      this.dsmetaGroupped[groupIndex].dsmeta.push(info)
+      this.dsmetaTabs[groupIndex].meta.push(info)
     }
   }
 
+  parseVersions() {
+    this.versionsTabs = [
+      {
+        name: 'VERSIONS',
+        title: 'Dataset Meta',
+        colsToDisplay: [
+          { colKey: 'LOAD_REF' },
+          { colKey: 'USER_NM' },
+          { colKey: 'VERSION_DTTM' },
+          { colKey: 'NEW_RECORDS', colName: 'ADD' },
+          { colKey: 'CHANGED_RECORDS', colName: 'MOD' },
+          { colKey: 'DELETED_RECORDS', colName: 'DEL' },
+          { colKey: 'VERSION_DESC' }
+        ],
+        meta: this.versions,
+        onRowClick: (value: Version) => {
+          this.rowClicked.emit(value)
+        }
+      }
+    ]
+  }
+
   onOpenChange(open: boolean) {
     this.open = open
     this.openChange.emit(open)

client/src/app/shared/dataset-info/models/dsmeta-groupped.model.ts

@@ -1,6 +1,14 @@
-import { DSMeta } from 'src/app/models/sas/editors-getdata.model'
+export interface Tab<T> {
-
+  name: string
-export interface DSMetaGroupped {
+  title: string
-  group: string
+  /**
-  dsmeta: DSMeta[]
+   * Columns to be displayed in the the grid
+   * If empty, all columns will be displayed
+   */
+  colsToDisplay: {
+    colKey: string
+    colName?: string
+  }[]
+  meta: T[]
+  onRowClick?: (value: any) => void
 }

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>
@@ -106,7 +108,7 @@
             *clrIfOpen
           >
             <span *ngIf="tableLocked">
-              To unlock all tables, contact support@datacontroller.io
+              To unlock all tables, contact support&#64;datacontroller.io
             </span>
           </clr-tooltip-content>
 
@@ -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/dc-validator/dc-validator.ts

@@ -20,6 +20,7 @@ import { parseColType } from './utils/parseColType'
 import { dqValidate } from './validations/dq-validation'
 import { specialMissingNumericValidator } from './validations/hot-custom-validators'
 import { applyNumericFormats } from './utils/applyNumericFormats'
+import { CustomAutocompleteEditor } from './editors/numericAutocomplete'
 
 export class DcValidator {
   private rules: DcValidation[] = []
@@ -38,6 +39,8 @@ export class DcValidator {
     dqData: DQData[],
     hotInstance?: Handsontable
   ) {
+    this.registerCustomEditors()
+
     this.sasparams = sasparams
     this.hotInstance = hotInstance
     this.rules = parseColType(sasparams.COLTYPE)
@@ -51,6 +54,13 @@ export class DcValidator {
     this.setupValidations()
   }
 
+  registerCustomEditors() {
+    Handsontable.editors.registerEditor(
+      'autocomplete.custom',
+      CustomAutocompleteEditor
+    )
+  }
+
   getRules(): DcValidation[] {
     return this.rules
   }
@@ -262,6 +272,7 @@ export class DcValidator {
         if (source.length > 0) {
           this.rules[i].source = source
           this.rules[i].type = 'autocomplete'
+          this.rules[i].editor = 'autocomplete.custom'
           this.rules[i].filter = false
         }
 
@@ -315,7 +326,10 @@ export class DcValidator {
 
       // Because of dynamic cell validation, that will change the type of cell to dropdown
       // `rules[i].colType` could be different type (eg. numeric). So we check if current cell is dropdown, to call HOT native dropdown validator
-      if (this.editor === 'autocomplete') {
+      if (
+        this.editor === 'autocomplete' ||
+        this.editor === 'autocomplete.custom'
+      ) {
         self
           .getHandsontableValidator('autocomplete')
           .call(this, value, (valid: boolean) => {

client/src/app/shared/dc-validator/editors/numericAutocomplete.ts

@@ -0,0 +1,28 @@
+import Handsontable from 'handsontable'
+import Core from 'handsontable/core'
+
+export class CustomAutocompleteEditor extends Handsontable.editors
+  .AutocompleteEditor {
+  constructor(instance: Core) {
+    super(instance)
+  }
+
+  createElements() {
+    super.createElements()
+  }
+
+  // Listbox open
+  open(event?: Event | undefined): void {
+    super.open(event)
+
+    if (this.isCellNumeric()) {
+      this.htContainer.classList.add('numericListbox')
+    } else {
+      this.htContainer.classList.remove('numericListbox')
+    }
+  }
+
+  isCellNumeric() {
+    return this.cellProperties?.className?.includes('htNumeric')
+  }
+}

client/src/app/shared/loading-indicator/loading-indicator.component.scss

@@ -11,6 +11,8 @@ $clr-green: #60b515;
   height: $clr-header-height;
   display: flex;
   align-items: center;
+  height: 100%;
+  margin-right: 10px;
 
   .spinner {
     vertical-align: middle;

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.html

@@ -16,8 +16,6 @@
         *ngFor="let programLog of sasjsRequests; let i = index"
         [id]="'request_' + i"
         [clrStackViewLevel]="1"
-        [clrStackViewSetsize]="3"
-        [clrStackViewPosinset]="3"
       >
         <clr-stack-label>
           {{ programLog.serviceLink }}

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

@@ -70,7 +70,6 @@
     border-radius: 3px;
 
     border: 1px solid #e2e2e2;
-    background-color: #fbfbfb;
 
     height: 48vh;
     overflow: auto;

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

@@ -8,7 +8,7 @@ import { LoadingIndicatorComponent } from './loading-indicator/loading-indicator
 import { LoginComponent } from './login/login.component'
 import { UserService } from './user.service'
 import { AlertsService } from './alerts/alerts.service'
-import { UserNavDropdownComponent } from './user-nav-dropdown/user-nav-dropdown.component'
+import { HeaderActions } from './user-nav-dropdown/header-actions.component'
 import { AlertsComponent } from './alerts/alerts.component'
 import { TermsComponent } from './terms/terms.component'
 import { DirectivesModule } from '../directives/directives.module'
@@ -26,7 +26,7 @@ import { ContactLinkComponent } from './contact-link/contact-link.component'
   declarations: [
     LoadingIndicatorComponent,
     LoginComponent,
-    UserNavDropdownComponent,
+    HeaderActions,
     AlertsComponent,
     TermsComponent,
     DatasetInfoComponent,
@@ -35,7 +35,7 @@ import { ContactLinkComponent } from './contact-link/contact-link.component'
   exports: [
     LoadingIndicatorComponent,
     LoginComponent,
-    UserNavDropdownComponent,
+    HeaderActions,
     AlertsComponent,
     TermsComponent,
     DatasetInfoComponent,

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

@@ -107,7 +107,29 @@
       </clr-tab-content>
     </clr-tab>
   </clr-tabs>
-  <p *ngIf="isMainRoute('home')" class="page-title">Edit</p>
+
+  <div
+    *ngIf="isMainRoute('home')"
+    class="d-flex justify-content-center sub-dropdown"
+  >
+    <clr-dropdown>
+      <button class="dropdown-toggle btn btn-link" clrDropdownTrigger>
+        {{ getSubPage() }}
+        <clr-icon shape="caret down"></clr-icon>
+      </button>
+      <clr-dropdown-menu *clrIfOpen>
+        <a
+          clrVerticalNavLink
+          routerLink="/home/tables"
+          routerLinkActive="active"
+          >Tables</a
+        >
+        <a clrVerticalNavLink routerLink="/home/files" routerLinkActive="active"
+          >Files</a
+        >
+      </clr-dropdown-menu>
+    </clr-dropdown>
+  </div>
 
   <div class="nav-divider"></div>
 

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.html

@@ -1,4 +1,22 @@
-<label *ngIf="label" class="clr-control-label">{{ label }}</label>
+<label
+  *ngIf="label"
+  [class.secondLabelActive]="secondLabel && secondLabel.length > 0"
+  class="clr-control-label"
+>
+  <span
+    (click)="onChangeLabel('first')"
+    [class.value-type-selected]="labelSelected === 'first'"
+    >{{ label }}</span
+  >
+  <ng-container *ngIf="secondLabel">
+    /
+    <span
+      (click)="onChangeLabel('second')"
+      [class.value-type-selected]="labelSelected === 'second'"
+      >{{ secondLabel }}</span
+    >
+  </ng-container>
+</label>
 <ng-container [ngSwitch]="type">
   <ng-container *ngSwitchCase="'date'">
     <clr-date-container>

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;
 }
 
@@ -29,3 +29,11 @@ clr-date-container {
         }
     }
 }
+
+label.secondLabelActive span {
+    &:not(.value-type-selected) {
+        text-decoration: line-through;
+        cursor: pointer;
+        opacity: 0.6;
+    }
+}

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

@@ -18,6 +18,7 @@ import { OnLoadingMoreEvent } from '../autocomplete/autocomplete.component'
 export class SoftSelectComponent implements OnInit, OnChanges {
   @Input() inputId: string = ''
   @Input() label: string | undefined
+  @Input() secondLabel: string | undefined
   @Input() value: Date | string | null = ''
   @Input() disabled: boolean = false
   @Input() type: string = 'text'
@@ -30,21 +31,25 @@ export class SoftSelectComponent implements OnInit, OnChanges {
   @Output() focusinInput: EventEmitter<any> = new EventEmitter()
   @Output() onAutocompleteLoadingMore: EventEmitter<OnLoadingMoreEvent> =
     new EventEmitter()
+  @Output() selectedLabelChange: EventEmitter<string> = new EventEmitter()
 
   @ViewChild('input') inputElement: any
 
   temp: Date | string | null = ''
   inputFocused: boolean = false
 
+  labelSelected: LabelTypes = 'first'
+
   constructor() {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (
       changes.value &&
       changes.value.currentValue !== changes.value.previousValue
-    )
+    ) {
       this.valueChange.emit(changes.value.currentValue)
     }
+  }
 
   ngOnInit(): void {}
 
@@ -85,4 +90,14 @@ export class SoftSelectComponent implements OnInit, OnChanges {
   onFocusinInput(event: any) {
     this.focusinInput.emit(event)
   }
+
+  onChangeLabel(label: LabelTypes) {
+    this.labelSelected = label
+
+    const selectedLabelText = label === 'first' ? this.label : this.secondLabel
+
+    this.selectedLabelChange.emit(selectedLabelText)
+  }
 }
+
+export type LabelTypes = 'first' | 'second'

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

@@ -0,0 +1,90 @@
+<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">
+    <button class="nav-text color-white" clrDropdownToggle>
+      <span>{{ userName }}</span>
+      <span *ngIf="userName !== 'Not logged in' && isViya"
+        ><img class="avatar-img" src="{{ getPictureUrl() }}" alt=""
+      /></span>
+      <span
+        class="badge badge-danger"
+        *ngIf="!sasjsConfig.debug"
+        [class.hidden]="failedReqs.length === 0"
+        >{{ failedReqs.length }}</span
+      >
+      <span
+        class="badge badge-info"
+        *ngIf="sasjsConfig.debug"
+        [class.hidden]="debugLogs.length === 0"
+        >{{ debugLogs.length }}</span
+      >
+      <clr-icon *ngIf="!isViya" shape="caret down"></clr-icon>
+    </button>
+    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
+      <div #dropdownItemDebug class="debug-switch-item" clrDropdownItem>
+        <clr-toggle-container
+          class="toggle-switch"
+          (click)="onDebugRowClick($event, dropdownItemDebug)"
+        >
+          <clr-toggle-wrapper>
+            <input
+              id="debug-toggle1"
+              type="checkbox"
+              [(ngModel)]="sasjsConfig.debug"
+              (ngModelChange)="onDebugModeChange()"
+              clrToggle
+            />
+            <label>Debug Mode</label>
+          </clr-toggle-wrapper>
+        </clr-toggle-container>
+      </div>
+      <a (click)="openRequestsModal()" clrDropdownItem>
+        <span>SAS Requests</span>
+      </a>
+
+      <ng-container *ngIf="!isDeployPage">
+        <a
+          target="_blank"
+          href="https://docs.datacontroller.io"
+          clrDropdownItem
+        >
+          <span class="dropdown-text">Documentation</span>
+        </a>
+      </ng-container>
+
+      <div class="separator"></div>
+      <a href="..." routerLink="/system" clrDropdownItem>
+        <span>System</span>
+      </a>
+      <a href="..." (click)="logout($event)" clrDropdownItem>
+        <span>Log Out</span>
+        <clr-icon class="clr-logout" shape="logout"></clr-icon>
+      </a>
+      <div class="copyRight">
+        <span>v{{ commitVer }}</span>
+      </div>
+    </clr-dropdown-menu>
+  </clr-dropdown>
+</div>

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

@@ -1,17 +1,12 @@
-// it must be a better way to read clarity variables...
-//@import '../../../../node_modules/@clr/ui/src/utils/helpers.clarity';
-
-//@import '../../../../node_modules/@clr/ui/src/color/utils/colors.clarity';
-//@import '../../../../node_modules/@clr/ui/src/color/utils/contrast-cache.clarity';
-//@import '../../../../node_modules/@clr/ui/src/color/utils/helpers.clarity';
-
-//@import '../../../../node_modules/@clr/ui/src/utils/variables.clarity';
-
 $clr-header-height: 3rem;
 $clr-near-white: #fafafa;
 $clr-dark-gray: #565656;
 $clr-light-gray: #eee;
 
+:host {
+  display: contents;
+}
+
 .copyRight {
   margin-top: 10px;
 
@@ -70,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

@@ -8,11 +8,11 @@ import { EventService } from '../../services/event.service'
 import { Router } from '@angular/router'
 
 @Component({
-  selector: 'app-user-nav-dropdown',
+  selector: 'app-header-actions',
-  templateUrl: './user-nav-dropdown.component.html',
+  templateUrl: './header-actions.component.html',
-  styleUrls: ['./user-nav-dropdown.component.scss']
+  styleUrls: ['./header-actions.component.scss']
 })
-export class UserNavDropdownComponent implements OnInit, OnDestroy {
+export class HeaderActions implements OnInit, OnDestroy {
   public userName: string = 'Not logged in'
   private reqSub: Subscription = new Subscription()
   private userSub: Subscription = new Subscription()
@@ -26,6 +26,7 @@ export class UserNavDropdownComponent 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 UserNavDropdownComponent implements OnInit, OnDestroy {
     this.userSub.unsubscribe()
   }
 
+  toggleDarkMode(value: boolean) {
+    this.eventService.toggleDarkMode(value)
+  }
+
   openRequestsModal() {
     this.eventService.openRequestsModal()
   }

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

@@ -1,121 +0,0 @@
-<clr-dropdown class="app-nav-dropdown d-md-block">
-  <button class="nav-text color-white" clrDropdownToggle>
-    <span>{{ userName }}</span>
-    <span *ngIf="userName !== 'Not logged in' && isViya"
-      ><img class="avatar-img" src="{{ getPictureUrl() }}" alt=""
-    /></span>
-    <span
-      class="badge badge-danger"
-      *ngIf="!sasjsConfig.debug"
-      [class.hidden]="failedReqs.length === 0"
-      >{{ failedReqs.length }}</span
-    >
-    <span
-      class="badge badge-info"
-      *ngIf="sasjsConfig.debug"
-      [class.hidden]="debugLogs.length === 0"
-      >{{ debugLogs.length }}</span
-    >
-    <clr-icon *ngIf="!isViya" shape="caret down"></clr-icon>
-  </button>
-  <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-    <div #dropdownItemDebug class="debug-switch-item" clrDropdownItem>
-      <clr-toggle-container
-        class="toggle-switch"
-        (click)="onDebugRowClick($event, dropdownItemDebug)"
-      >
-        <clr-toggle-wrapper>
-          <input
-            id="debug-toggle1"
-            type="checkbox"
-            [(ngModel)]="sasjsConfig.debug"
-            (ngModelChange)="onDebugModeChange()"
-            clrToggle
-          />
-          <label>Debug Mode</label>
-        </clr-toggle-wrapper>
-      </clr-toggle-container>
-    </div>
-    <a (click)="openRequestsModal()" clrDropdownItem>
-      <span>SAS Requests</span>
-    </a>
-
-    <ng-container *ngIf="!isDeployPage">
-      <a target="_blank" href="https://docs.datacontroller.io" clrDropdownItem>
-        <span class="dropdown-text">Documentation</span>
-      </a>
-    </ng-container>
-
-    <div class="separator"></div>
-    <a href="..." routerLink="/system" clrDropdownItem>
-      <span>System</span>
-    </a>
-    <a href="..." (click)="logout($event)" clrDropdownItem>
-      <span>Log Out</span>
-      <clr-icon class="clr-logout" shape="logout"></clr-icon>
-    </a>
-    <div class="copyRight">
-      <span>v{{ commitVer }}</span>
-    </div>
-  </clr-dropdown-menu>
-</clr-dropdown>
-<div class="content-container h-auto">
-  <nav class="sidenav d-block d-md-none" [clr-nav-level]="2">
-    <section class="sidenav-content">
-      <a href="..." class="nav-link active">
-        {{ userName }}
-      </a>
-
-      <div>
-        <form>
-          <div class="toggle-switch">
-            <input
-              id="debug-toggle2"
-              type="checkbox"
-              [(ngModel)]="sasjsConfig.debug"
-              (ngModelChange)="onDebugModeChange()"
-              [ngModelOptions]="{ standalone: true }"
-            />
-            <label
-              for="debug-toggle2"
-              class="debug-toggle-label color-dark-gray"
-              >Debug Mode</label
-            >
-          </div>
-        </form>
-      </div>
-      <!-- <a href="..." class="nav-link d-block" [routerLink]="['/application-logs']">
-        <span>Application Logs</span>
-        <span class="badge" *ngIf="appLogs.length > 0">{{appLogs.length}}</span>
-      </a>
-      <a *ngIf="debugMode" class="nav-link d-block" href="..." [routerLink]="['/debug-logs']">
-        <span>Debug Logs</span>
-        <span class="badge badge-info" *ngIf="debugLogs.length > 0">{{debugLogs.length}}</span>
-      </a>
-      <a *ngIf="!debugMode" class="nav-link d-block" href="..." [routerLink]="['/failed-requests']">
-        <span>Failed Requests</span>
-        <span class="badge badge-danger" *ngIf="failedReqs.length > 0">{{failedReqs.length}}</span>
-      </a>
-      <a href="..." class="nav-link d-block" [routerLink]="['/errors']">
-        <span>Errors</span>
-        <span class="badge badge-warning" *ngIf="sasErrors.length > 0">{{sasErrors.length}}</span>
-      </a> -->
-      <a
-        class="nav-link d-block"
-        target="_blank"
-        href="https://docs.datacontroller.io"
-      >
-        <span>Documentation</span>
-      </a>
-      <div class="separator"></div>
-      <a routerLink="/system" class="nav-link d-block">
-        <span>System</span>
-        <clr-icon shape="logout"></clr-icon>
-      </a>
-      <a href="..." class="nav-link d-block" (click)="logout($event)">
-        <span>Log Out</span>
-        <clr-icon shape="logout"></clr-icon>
-      </a>
-    </section>
-  </nav>
-</div>

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

@@ -13,7 +13,7 @@
       class="licence-notice"
       >To unlock more then {{ licenceState.value.viewbox_limit }}
       {{ licenceState.value.viewbox_limit === 1 ? 'viewbox' : 'viewboxes' }},
-      contact support@datacontroller.io</span
+      contact support&#64;datacontroller.io</span
     >
   </h3>
 
@@ -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 {