NAS-133155 / 25.04 / Non-default account alert does not truncate

src/app/modules/alerts/components/alert/alert.component.html

@@ -12,7 +12,23 @@ <h3 [class]="['alert-level', alertLevelColor]">
       {{ levelLabel() }}
     </h3>
   }
-  <h4 class="alert-message" [innerHTML]="alert().formatted"></h4>
+  <h4
+    #alertMessage
+    class="alert-message"
+    [class.collapsed]="isCollapsed()"
+    [innerHTML]="alert().formatted"
+  ></h4>
+  @if (isExpandable()) {
+    <button
+      mat-button
+      class="expand-collapse-link"
+      [ixTest]="[alert().key, 'expand']"
+      [class.collapsed]="isCollapsed()"
+      (click)="toggleCollapse()"
+    >
+      {{ isCollapsed() ? ('Expand' | translate) : ('Collapse' | translate) }}
+    </button>
+  }
   @if (isHaLicensed()) {
     <div class="alert-node">{{ alert().node }}</div>
   }

src/app/modules/alerts/components/alert/alert.component.scss

@@ -1,3 +1,5 @@
+@import 'mixins/text';
+
 :host {
   align-items: center;
   display: flex;
@@ -48,6 +50,28 @@
   line-height: inherit;
   margin-bottom: 6px;
   margin-top: 3px;
+
+  &.collapsed {
+    @include line-clamp(5);
+  }
+}
+
+.expand-collapse-link {
+  cursor: pointer;
+  display: flex;
+  font-size: inherit;
+  font-weight: normal;
+  height: inherit;
+  justify-content: center;
+  line-height: inherit;
+  margin: 0 0 5px;
+  opacity: 0.9;
+  padding: 0;
+  width: max-content;
+
+  &.collapsed {
+    margin-top: -8px;
+  }
 }
 
 .alert-node {

src/app/modules/alerts/components/alert/alert.component.spec.ts

@@ -1,3 +1,7 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { By } from '@angular/platform-browser';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { EffectsModule } from '@ngrx/effects';
 import { Store, StoreModule } from '@ngrx/store';
@@ -34,6 +38,8 @@ describe('AlertComponent', () => {
   let spectator: Spectator<AlertComponent>;
   let api: ApiService;
   let alert: AlertPageObject;
+  let loader: HarnessLoader;
+
   const createComponent = createComponentFactory({
     component: AlertComponent,
     imports: [
@@ -73,6 +79,7 @@ describe('AlertComponent', () => {
 
     api = spectator.inject(ApiService);
     alert = new AlertPageObject(spectator);
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
   });
 
   it('shows alert level', () => {
@@ -127,4 +134,23 @@ describe('AlertComponent', () => {
     const state = await firstValueFrom(spectator.inject(Store).pipe(map(selectAlerts)));
     expect(state).toEqual([dummyAlert]);
   });
+
+  it('shows expand/collapse button when alert message is too long', async () => {
+    const longMessage = 'This is a very long alert message '.repeat(10);
+    spectator.setInput('alert', { ...dummyAlert, formatted: longMessage } as Alert);
+
+    const alertMessageElement = spectator.debugElement.query(By.css('.alert-message')).nativeElement as HTMLElement;
+    jest.spyOn(alertMessageElement, 'scrollHeight', 'get').mockReturnValue(300);
+    jest.spyOn(alertMessageElement, 'offsetHeight', 'get').mockReturnValue(100);
+
+    spectator.component.ngAfterViewInit();
+
+    const expandButton = await loader.getHarness(MatButtonHarness.with({ text: 'Expand' }));
+    expect(expandButton).toExist();
+
+    await expandButton.click();
+
+    const collapseButton = await loader.getHarness(MatButtonHarness.with({ text: 'Collapse' }));
+    expect(collapseButton).toExist();
+  });
 });

src/app/modules/alerts/components/alert/alert.component.ts

@@ -1,7 +1,11 @@
 import { AsyncPipe } from '@angular/common';
 import {
-  ChangeDetectionStrategy, Component, computed, HostBinding, input, OnChanges,
+  AfterViewInit,
+  ChangeDetectionStrategy, Component, computed, ElementRef, HostBinding, input, OnChanges,
+  signal,
+  ViewChild,
 } from '@angular/core';
+import { MatButton } from '@angular/material/button';
 import { MatTooltip } from '@angular/material/tooltip';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
@@ -43,17 +47,24 @@ enum AlertLevelColor {
   imports: [
     IxIconComponent,
     MatTooltip,
+    MatButton,
     TestDirective,
     TranslateModule,
     FormatDateTimePipe,
     AsyncPipe,
     RequiresRolesDirective,
   ],
 })
-export class AlertComponent implements OnChanges {
+export class AlertComponent implements OnChanges, AfterViewInit {
   readonly alert = input.required<Alert>();
   readonly isHaLicensed = input<boolean>();
-  readonly requiredRoles = [Role.AlertListWrite];
+
+  @ViewChild('alertMessage', { static: true }) alertMessage: ElementRef<HTMLElement>;
+
+  protected isCollapsed = signal<boolean>(true);
+  protected isExpandable = signal<boolean>(false);
+
+  protected readonly requiredRoles = [Role.AlertListWrite];
 
   alertLevelColor: AlertLevelColor | undefined;
   icon: string;
@@ -80,6 +91,15 @@ export class AlertComponent implements OnChanges {
     this.setStyles();
   }
 
+  ngAfterViewInit(): void {
+    const alertMessageElement = this.alertMessage.nativeElement;
+    this.isExpandable.set(alertMessageElement.scrollHeight > alertMessageElement.offsetHeight);
+  }
+
+  toggleCollapse(): void {
+    this.isCollapsed.set(!this.isCollapsed());
+  }
+
   onDismiss(): void {
     this.store$.dispatch(dismissAlertPressed({ id: this.alert().id }));
   }

src/assets/i18n/uk.json

@@ -4966,8 +4966,8 @@
   "Title": "Заголовок",
   "To activate this periodic snapshot schedule, set  this option. To disable this task without deleting it, unset this  option.": "Щоб активувати цей періодичний розклад знімків, установіть цей параметр. Щоб вимкнути це завдання, не видаляючи його, зніміть цей параметр.",
   "To configure Isolated GPU Device(s), click the \"Configure\" button.": "Щоб налаштувати ізольований пристрій (пристрої GPU), натисніть кнопку \"Налаштувати\".",
-  "Toggle Collapse": "Переключити Стиснення",
-  "Toggle {row}": "Перемикач {row}",
+  "Toggle Collapse": "Переключити Згортання",
+  "Toggle {row}": "Переключити {row}",
   "Token": "Токен",
   "Token created with  <a href=\"https://developers.google.com/drive/api/v3/about-auth\" target=\"_blank\">Google Drive</a>.": "Токен створений за допомогою <a href=\"https://developers.google.com/drive/api/v3/about-auth\" target=\"_blank\">Диска Google</a>.",
   "Token created with  <a href=\"https://developers.google.com/drive/api/v3/about-auth\" target=\"_blank\">Google Drive</a>. Access Tokens expire periodically and  must be refreshed.": "Токен, створений за допомогою <a href=\"https://developers.google.com/drive/api/v3/about-auth\" target=\"_blank\">Google Диска</a>. Токени доступу періодично закінчуються і повинні оновлюватися.",