feat: allow inputting multi-line string values to string attributes

Author: xflord

apps/admin-gui/src/assets/i18n/en.json

@@ -3019,6 +3019,9 @@
             "CANCEL_BUTTON": "Cancel"
           }
         },
+        "ATTRIBUTE_VALUE_STRING": {
+          "HINT": "This attribute value includes newlines. Please make sure this is intended!"
+        },
         "ATTRIBUTES_LIST": {
           "FILTER": "Filter attributes by Id, name, value or description",
           "ID": "Id",

libs/perun/components/src/lib/attributes-list/attribute-value/attribute-value-string/attribute-value-string.component.html

@@ -3,13 +3,28 @@
   subscriptSizing="dynamic"
   class="w-100">
   <input
+    *ngIf="readonly"
     matInput
-    (click)="readonly && value !== undefined && showValue(value, attribute.displayName)"
-    [class.cursor-pointer]="readonly && value !== undefined"
-    [readonly]="readonly"
+    (click)="value !== undefined && showValue(value, attribute.displayName)"
+    [class.cursor-pointer]="value !== undefined"
+    [readonly]="true"
     class="overflow-ellipsis"
     [(ngModel)]="attribute.value"
     type="text"
     attr.data-cy="{{attribute.displayName | multiWordDataCy}}-value"
     (keydown)="_sendEventToParent()" />
+  <textarea
+    *ngIf="!readonly"
+    matInput
+    rows="3"
+    wrap="off"
+    class="overflow-ellipsis"
+    [(ngModel)]="attribute.value"
+    type="text"
+    attr.data-cy="{{attribute.displayName | multiWordDataCy}}-value"
+    (keydown)="_sendEventToParent()">
+  </textarea>
+  <mat-hint class="hint-color" *ngIf="!readonly && attribute.value?.includes('\n')"
+    ><b>{{'SHARED_LIB.PERUN.COMPONENTS.ATTRIBUTE_VALUE_STRING.HINT' | translate}}</b></mat-hint
+  >
 </mat-form-field>

libs/perun/components/src/lib/attributes-list/attribute-value/attribute-value-string/attribute-value-string.component.scss

@@ -2,6 +2,19 @@
   cursor: pointer;
 }
 
+.hint-color {
+  color: darkorange;
+}
+
 .overflow-ellipsis {
   text-overflow: ellipsis;
 }
+
+// hide hint when field not in focus
+.mat-mdc-form-field:not(.mat-focused) mat-hint {
+  display: none;
+}
+
+:host ::ng-deep .mdc-text-field {
+  padding-right: 0 !important;
+}