fix: add label and tooltip for libref download, sanitise input

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

@@ -13,6 +13,7 @@ import {
 import { ActivatedRoute, Router } from '@angular/router'
 import Handsontable from 'handsontable'
 import { Subject, Subscription } from 'rxjs'
+import { sanitiseForSas } from '../shared/utils/sanitise'
 import { SasStoreService } from '../services/sas-store.service'
 
 type AOA = any[][]
@@ -1669,7 +1670,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       this.submit = true
       const updateParams: any = {}
       updateParams.ACTION = 'LOAD'
-      this.message = this.message.replace(/\n/g, '. ')
+      this.message = sanitiseForSas(this.message.replace(/\n/g, '. '))
       updateParams.MESSAGE = this.message
       // updateParams.APPROVER = this.approver;
       updateParams.LIBDS = this.libds

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

@@ -1,4 +1,5 @@
 import { ActivatedRoute } from '@angular/router'
+import { sanitiseForSas } from '../../shared/utils/sanitise'
 import { SasStoreService } from '../../services/sas-store.service'
 import {
   Component,
@@ -136,7 +137,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
 
   public async rejecting() {
     this.rejectLoading = true
-    this.submitReason = this.submitReason.replace(/\n/g, '. ')
+    this.submitReason = sanitiseForSas(this.submitReason.replace(/\n/g, '. '))
 
     let rejParams = {
       STP_ACTION: 'REJECT_TABLE',

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

@@ -0,0 +1,6 @@
+/**
+ * Strips characters that could cause SAS macro injection (& % ;).
+ */
+export function sanitiseForSas(input: string): string {
+  return input.replace(/[%&;]/g, '')
+}

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

@@ -236,14 +236,31 @@
         <div class="admin-action">
           Download Configuration
 
-          <input
-            type="text"
-            class="clr-input libref-input"
-            maxlength="8"
-            [ngModel]="dcLib"
-            (ngModelChange)="targetLibref = $event.toUpperCase()"
-            placeholder="Target Libref"
-          />
+          <div class="libref-group">
+            <clr-tooltip class="libref-tooltip">
+              <label clrTooltipTrigger class="libref-label">
+                Target DC Library
+                <cds-icon shape="info-circle" size="16"></cds-icon>
+              </label>
+              <clr-tooltip-content
+                clrPosition="bottom-left"
+                clrSize="md"
+                *clrIfOpen
+              >
+                Enter the target DC library and the downloaded files will
+                contain this, instead of the original.
+              </clr-tooltip-content>
+            </clr-tooltip>
+
+            <input
+              type="text"
+              class="clr-input libref-input"
+              maxlength="8"
+              [ngModel]="dcLib"
+              (ngModelChange)="targetLibref = $event.toUpperCase()"
+              placeholder="e.g. MYLIB"
+            />
+          </div>
           <button
             (click)="downloadConfiguration()"
             [disabled]="targetLibref !== dcLib && !isValidLibref(targetLibref)"

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

@@ -1,5 +1,21 @@
+.libref-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0 8px;
+}
+
+.libref-label {
+  cursor: pointer;
+  font-size: 0.55rem;
+  font-weight: 600;
+  color: var(--clr-p4-color, #565656);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .libref-input {
   width: 100px;
-  margin: 0 8px;
   text-transform: uppercase;
 }