fix: CSP issues, clarity local library build, fixed some style issues

client/package.json

@@ -45,9 +45,9 @@
     "@angular/platform-browser-dynamic": "^17.3.3",
     "@angular/router": "^17.3.3",
     "@cds/core": "^6.15.1",
-    "@clr/angular": "^17.9.0",
+    "@clr/angular": "file:libraries/clr-angular-17.9.0.tgz",
     "@clr/icons": "^13.0.2",
-    "@clr/ui": "^17.9.0",
+    "@clr/ui": "file:libraries/clr-ui-17.9.0.tgz",
     "@handsontable/angular": "^15.3.0",
     "@sasjs/adapter": "^4.11.0",
     "@sasjs/utils": "^3.4.0",

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

@@ -36,7 +36,7 @@
         <div class="clr-row card-block mt-15 d-flex justify-content-between">
           <div class="clr-col-md-auto">
             <div class="encoding-block">
-              <clr-radio-container class="mt-0-i" clrInline>
+              <clr-radio-container class="mt-0" clrInline>
                 <clr-radio-wrapper>
                   <input
                     type="radio"
@@ -193,7 +193,7 @@
               libName: (libds?.split('.'))![0],
               tableName: (libds?.split('.'))![1]
             } as libdsParsed"
-            class="editor-title text-center mt-0-i"
+            class="editor-title text-center mt-0"
           >
             <clr-tooltip>
               <clr-icon

client/src/app/not-found/not-found.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-not-found',
@@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core'
   styleUrls: ['./not-found.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class NotFoundComponent implements OnInit {
   constructor() {}

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

@@ -350,13 +350,12 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
             this.params = param
             this.response = res
             this.calcDiff()
+            this.callChangesInfo(this.tableId)
           })
           .catch((err: any) => err)
           .finally(() => {
             this.loadingTable = true
           })
-
-        this.callChangesInfo(this.tableId)
       }
     )
     if (typeof this.router.snapshot.params['tableId'] === 'undefined') {
@@ -379,6 +378,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
         this.params = param
         this.response = res
         this.calcDiff()
+        this.callChangesInfo(this.tableId)
       })
       .catch((err: any) => {
         this.acceptLoading = false
@@ -387,8 +387,6 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
         this.loadingTable = true
         this.setFocus()
       })
-
-    this.callChangesInfo(this.tableId)
   }
 
   ngOnDestroy() {

client/src/app/role/role.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 import { globals } from '../_globals'
 import { HelperService } from '../services/helper.service'
 import { Location } from '@angular/common'
@@ -12,7 +12,8 @@ import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapper
   styleUrls: ['./role.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class RoleComponent implements OnInit {
   public roles: Array<any> | undefined

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-home-route',
@@ -6,7 +6,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'
   styleUrls: ['./home-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class HomeRouteComponent implements OnInit, OnDestroy {
   constructor() {}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-review-route',
@@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core'
   styleUrls: ['./review-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class ReviewRouteComponent implements OnInit {
   constructor() {}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-usernav-route',
@@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core'
   styleUrls: ['./usernav-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class UsernavRouteComponent implements OnInit {
   constructor() {}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-view-route',
@@ -6,7 +6,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'
   styleUrls: ['./view-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class ViewRouteComponent implements OnInit, OnDestroy {
   constructor() {}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-xlmap-route',
@@ -6,7 +6,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'
   styleUrls: ['./xlmap-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class XLMapRouteComponent implements OnInit, OnDestroy {
   constructor() {}

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

@@ -223,7 +223,7 @@ export class SasStoreService {
     tables[tableName] = [tableData]
     return (
       await this.sasService.request(program, tables, {
-        useComputeApi: false
+        useComputeApi: null // Using WEB APPROACH as a temporary workaround until VIYA JES API is fixed. For other server types then VIYA this is not applicable
       })
     ).adapterResponse
   }
@@ -232,7 +232,7 @@ export class SasStoreService {
     tables[tableName] = [tableData]
     return (
       await this.sasService.request(program, tables, {
-        useComputeApi: false
+        useComputeApi: null // Using WEB APPROACH as a temporary workaround until VIYA JES API is fixed. For other server types then VIYA this is not applicable
       })
     ).adapterResponse
   }

client/src/app/shared/abort-modal/info-modal.component.html

@@ -7,7 +7,7 @@
 >
   <h3 class="modal-title">
     {{ data.modalTitle }}
-    <p *ngIf="data.sasService && data.sasService.length > 0" class="sasService">
+    <p *ngIf="data.sasService && data.sasService.length > 0" class="sasService mt-0">
       SAS Service: <strong>{{ data.sasService }}</strong>
     </p>
   </h3>

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

@@ -19,7 +19,7 @@
 
   <div class="modal-body d-flex">
     <div class="add-new d-flex clr-flex-column">
-      <p class="mt-0-i">Add new</p>
+      <p class="mt-0">Add new</p>
 
       <hr class="w-100" />
 
@@ -41,7 +41,7 @@
 
     <div class="currently-open">
       <div class="d-flex clr-justify-content-between">
-        <p class="mt-0-i">Currently open</p>
+        <p class="mt-0">Currently open</p>
 
         <div>
           <a
@@ -198,7 +198,7 @@
         </ng-container>
 
         <ng-container *ngIf="hotColumns.colHeadersVisible">
-          <p class="mt-0-i">Columns To Display (drag and re-order)</p>
+          <p class="mt-0">Columns To Display (drag and re-order)</p>
           <div
             class="cols-list"
             cdkDropList

client/src/index.html

@@ -47,11 +47,11 @@
     serverUrl=""
     appLoc="/Public/app/dc"
     serverType="SASJS"
-    loginMechanism="Default"
+    loginMechanism="Redirected"
     debug="false"
     useComputeApi="true"
     contextName="SAS Job Execution compute context"
-    adminGroup="sec-sas9-prd-int-sasplatform-300114sasjs"
+    adminGroup="SASAdministrators"
     dcPath="/tmp/dc"
     hotLicenceKey="non-commercial-and-evaluation"
   >

client/src/styles.scss

@@ -704,12 +704,6 @@ body[cds-theme="light"] {
   text-transform: uppercase;
 }
 
-.modal-header {
-  border-bottom: 2px solid #e4e4e4;
-  padding: 0 0 .5rem 0;
-  margin-bottom: 1rem;
-}
-
 .main-container .content-container {
   min-height: 0px;
   position: relative;
@@ -1496,6 +1490,12 @@ body[cds-theme="light"] {
 
 // REQUESTS-MODAL.COMPONENT
 app-requests-modal {
+  .modal-header--accessible {
+    border-bottom: 1px solid #e4e4e4;
+    padding: 0 0 .5rem 0;
+    margin-bottom: 5px;
+  }
+
   .dropdown-item {
       &.selected {
           background: #d8e3e9;
@@ -1509,7 +1509,7 @@ app-requests-modal {
   }
 }
 
-.requests-modal .modal-header .close clr-icon {
+.requests-modal .modal-header--accessible--accessible .close clr-icon {
   display: block !important;
 }
 
@@ -2423,10 +2423,6 @@ app-viewboxes {
       height: 80vh;
     }
 
-    .modal-footer {
-      padding: 0;
-    }
-
     .modal-body {
       max-height: 100%;
       height: 100%;
@@ -2731,6 +2727,12 @@ body[cds-theme="light"] {
 
 // AUTOMATIC-DEPLOY.COMPONENT
 app-automatic-deploy {
+  .dc-loc-input-wrapper {
+    input {
+      width: 500px;
+    }
+  }
+
   .auto-deploy {
     display: flex;
     justify-content: center;
@@ -2824,7 +2826,6 @@ app-info-modal {
 
   .modal-footer {
       position: relative;
-      border-top: 1px solid #dcdcdc;
   }
 
   .systext {
@@ -3038,7 +3039,7 @@ app-edit-record {
       top: 5px;
     }
 
-    .modal-header {
+    .modal-header--accessible {
       padding: 0 0 1rem 0;
     }
 
@@ -3903,6 +3904,14 @@ body[cds-theme="light"] {
   }
 }
 
+.modal .modal-body {
+  padding: 15px;
+}
+
+.modal .modal-footer {
+  padding: 0 15px 15px 15px;
+}
+
 .log-wrapper {
   min-height: 50px;
   padding: 10px;
@@ -4070,10 +4079,6 @@ body[cds-theme="light"] {
 }
 
 .mt-0 {
-  margin-top: 0;
-}
-
-.mt-0-i {
   margin-top: 0 !important;
 }
 
@@ -4502,10 +4507,14 @@ body[cds-theme="light"] {
   margin-top: 10px;
 }
 
-.modal-header .close clr-icon {
+.modal-header--accessible {
+  padding: 15px 15px 0 15px;
+}
+
+.modal-header--accessible .close clr-icon {
   display: none;
 }
-.show-close .modal-header .close clr-icon {
+.show-close .modal-header--accessible .close clr-icon {
   display: inline-block;
   position: relative;
   top: -18px;