chore(ux): message display in tables (#1254)

src/app/components/table/table-cell.component.html

@@ -2,6 +2,12 @@
   @case ('object') {
     <app-table-inspect-object [object]="handleNestedKeys(element)" [label]="column.name" />
   }
+  @case ('message') {
+    <app-table-inspect-message [label]="column.name" [message]="string" />
+  }
+  @case ('output') {
+    <app-table-inspect-message [label]="column.name" [message]="string" />
+  }
   @case ('link') {
     <button mat-button (click)="navigate()">
       {{ value | emptyCell }}

src/app/components/table/table-cell.component.ts

@@ -13,6 +13,7 @@ import { Duration, Timestamp } from '@ngx-grpc/well-known-types';
 import { DurationPipe } from '@pipes/duration.pipe';
 import { EmptyCellPipe } from '@pipes/empty-cell.pipe';
 import { Subject } from 'rxjs';
+import { TableInspectMessageComponent } from './table-inspect-message.component';
 import { TableInspectObjectComponent } from './table-inspect-object.component';
 
 @Component({
@@ -28,6 +29,7 @@ import { TableInspectObjectComponent } from './table-inspect-object.component';
     MatButtonModule,
     CountTasksByStatusComponent,
     MatCheckboxModule,
+    TableInspectMessageComponent,
   ]
 })
 export class TableCellComponent<T extends DataRaw, S extends Status, O extends TaskOptions | null = null>{
@@ -78,6 +80,10 @@ export class TableCellComponent<T extends DataRaw, S extends Status, O extends T
     return this._value;
   }
 
+  get string() {
+    return this._value as string;
+  }
+
   get durationValue() {
     return this._value as Duration;
   }

src/app/components/table/table-inspect-message-dialog.component.css

@@ -0,0 +1,15 @@
+mat-dialog-content {
+  width: 40rem;
+}
+
+section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 1rem 0 1rem;
+}
+
+h2 {
+  margin: 0;
+  padding: 0 0 0.75rem 0;
+}

src/app/components/table/table-inspect-message-dialog.component.html

@@ -0,0 +1,14 @@
+<section>
+  <h2 mat-dialog-title>{{ label }}</h2>
+  <button mat-icon-button (click)="copy()">
+    <mat-icon [fontIcon]="getIcon('copy')" />
+  </button>
+</section>
+
+<mat-dialog-content>
+  {{ message }}
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-flat-button (click)="onNoClick()" color="primary">Close</button>
+</mat-dialog-actions>

src/app/components/table/table-inspect-message-dialog.component.spec.ts

@@ -0,0 +1,79 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
+import { TableInspectMessageDialogComponent, TableInspectMessageDialogData } from './table-inspect-message-dialog.component';
+
+describe('TableInspectMessageDialogComponent', () => {
+  let component: TableInspectMessageDialogComponent;
+
+  const label = 'Message';
+
+  const message = 'A long and complete message';
+
+  const mockMatDialogRef = {
+    close: jest.fn()
+  };
+
+  const mockData: TableInspectMessageDialogData = {
+    label: label,
+    message: message,
+  };
+
+  const mockNotificationService = {
+    success: jest.fn(),
+  };
+
+  const mockClipboard = {
+    copy: jest.fn()
+  };
+
+  beforeEach(() => {
+    component = TestBed.configureTestingModule({
+      providers: [
+        TableInspectMessageDialogComponent,
+        IconsService,
+        { provide: Clipboard, useValue: mockClipboard },
+        { provide: NotificationService, useValue: mockNotificationService },
+        { provide: MatDialogRef, useValue: mockMatDialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: mockData }
+      ]
+    }).inject(TableInspectMessageDialogComponent);
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should get label', () => {
+    expect(component.label).toEqual(label);
+  });
+
+  it('should get message', () => {
+    expect(component.message).toEqual(message);
+  });
+
+  describe('onCopy', () => {
+    beforeEach(() => {
+      component.copy();
+    });
+
+    it('should copy the message', () => {
+      expect(mockClipboard.copy).toHaveBeenCalledWith(message);
+    });
+
+    it('should notify the user', () => {
+      expect(mockNotificationService.success).toHaveBeenCalled();
+    });
+  });
+
+  it('should get icon', () => {
+    expect(component.getIcon('heart')).toEqual('favorite');
+  });
+
+  it('should close dialog', () => {
+    component.onNoClick();
+    expect(mockMatDialogRef.close).toHaveBeenCalled();
+  });
+});

src/app/components/table/table-inspect-message-dialog.component.ts

@@ -0,0 +1,60 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Component, Inject, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
+
+export interface TableInspectMessageDialogData {
+  label: string;
+  message: string;
+}
+
+@Component({
+  selector: 'app-inspect-message-dialog',
+  templateUrl: 'table-inspect-message-dialog.component.html',
+  styleUrl: 'table-inspect-message-dialog.component.css',
+  standalone: true,
+  imports: [
+    MatCardModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatIconModule,
+  ],
+  providers: [
+    NotificationService,
+  ]
+})
+export class TableInspectMessageDialogComponent {
+  get label() {
+    return this.data.label;
+  }
+
+  get message() {
+    return this.data.message;
+  }
+
+  constructor(
+    public dialogRef: MatDialogRef<TableInspectMessageDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) private data: TableInspectMessageDialogData
+  ) {}
+
+  private readonly iconsService = inject(IconsService);
+  private readonly clipboard = inject(Clipboard);
+  private readonly notificationService = inject(NotificationService);
+
+  copy() {
+    this.clipboard.copy(this.message);
+    this.notificationService.success('Message copied');
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  getIcon(name: string) {
+    return this.iconsService.getIcon(name);
+  }
+}

src/app/components/table/table-inspect-message.component.css

@@ -0,0 +1,11 @@
+section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: fit-content;
+}
+
+mat-icon {
+  cursor: pointer;
+}

src/app/components/table/table-inspect-message.component.html

@@ -0,0 +1,11 @@
+<mat-chip disableRipple>
+  <section>
+    <span>{{ croppedMessage | emptyCell }}</span>
+    @if (croppedMessage) {
+      <mat-icon [fontIcon]="getIcon('copy')" (click)="copy()" />
+    }
+    @if (displayEye) {
+      <mat-icon [fontIcon]="getIcon('view')" (click)="onView()" />
+    }
+  </section>
+</mat-chip>

src/app/components/table/table-inspect-message.component.spec.ts

@@ -0,0 +1,99 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
+import { TableInspectMessageDialogComponent } from './table-inspect-message-dialog.component';
+import { TableInspectMessageComponent } from './table-inspect-message.component';
+
+describe('TableInspectMessageComponent', () => {
+  let component: TableInspectMessageComponent;
+
+  const label = 'Message';
+
+  const message = 'A long and complete message';
+
+  const mockNotificationService = {
+    success: jest.fn(),
+  };
+
+  const mockDialog = {
+    open: jest.fn()
+  };
+
+  const mockClipboard = {
+    copy: jest.fn()
+  };
+
+  beforeEach(() => {
+    component = TestBed.configureTestingModule({
+      providers: [
+        TableInspectMessageComponent,
+        IconsService,
+        { provide: NotificationService, useValue: mockNotificationService },
+        { provide: MatDialog, useValue: mockDialog },
+        { provide: Clipboard, useValue: mockClipboard }
+      ]
+    }).inject(TableInspectMessageComponent);
+    component.label = label;
+    component.message = message;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('setting message', () => {
+    it('should set the cropped message', () => {
+      expect(component.croppedMessage).toEqual('A long and com...');
+    });
+
+    it('should display the eye', () => {
+      expect(component.displayEye).toBeTruthy();
+    });
+
+    it('should set the full message if it not too long', () => {
+      const newMessage = 'message';
+      component.message = newMessage;
+      expect(component.croppedMessage).toEqual(newMessage);
+    });
+
+    it('should not display the eye if the message is too long', () => {
+      component.message = 'message';
+      expect(component.displayEye).toBeFalsy();
+    });
+  });
+
+  describe('onCopy', () => {
+    beforeEach(() => {
+      component.copy();
+    });
+
+    it('should copy the message', () => {
+      expect(mockClipboard.copy).toHaveBeenCalledWith(message);
+    });
+
+    it('should notify the user', () => {
+      expect(mockNotificationService.success).toHaveBeenCalled();
+    });
+  });
+
+  it('should get icon', () => {
+    expect(component.getIcon('heart')).toEqual('favorite');
+  });
+
+  describe('on View', () => {
+    beforeEach(() => {
+      component.onView();
+    });
+
+    it('should display pass the data to the dialog', () => {
+      expect(mockDialog.open).toHaveBeenCalledWith(TableInspectMessageDialogComponent, {
+        data: {
+          label: label,
+          message: message
+        }
+      });
+    });
+  });
+});