Merge pull request #14910 from jrkubic/master

String limit for 300> characters on attribute entity table

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -170,7 +170,7 @@
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute" class="attribute">
             <div class="flex flex-row" style="align-items: center">
-              <span class="ellipsis">{{ attribute.key }}</span>
+              <span class="ellipsis">{{ attribute.key | tbJson:300 }}</span>
               <tb-copy-button
                 class="attribute-copy"
                 [disabled]="isLoading$ | async"
@@ -191,7 +191,7 @@
                     (click)="editAttribute($event, attribute)">
             <div class="flex flex-1 flex-row" style="align-items: center">
               <div class="flex flex-1 flex-row" style="overflow: hidden; align-items: center;">
-                <span class="ellipsis">{{attribute.value | tbJson}}</span>
+                <span class="ellipsis">{{attribute.value | tbJson:300}}</span>
                 @if (attribute.value !== '') {
                   <tb-copy-button
                     class="attribute-copy"

ui-ngx/src/app/shared/pipe/tbJson.pipe.ts

@@ -22,12 +22,18 @@ import { isNumber, isObject } from '@core/utils';
     standalone: false
 })
 export class TbJsonPipe implements PipeTransform {
-  transform(value: any): string {
+  transform(value: any, maxLength?: number): string {
+    let result: string;
     if (isObject(value)) {
-      return JSON.stringify(value);
+      result = JSON.stringify(value);
     } else if (isNumber(value)) {
-      return value.toString();
+      result = value.toString();
+    } else {
+      result = value;
     }
-    return value;
+    if (maxLength != null && maxLength > 0 && result && result.length > maxLength) {
+      return result.slice(0, maxLength) + '\u2026';
+    }
+    return result;
   }
 }