NAS-129039: PR update

src/app/app.routes.ts

@@ -140,13 +140,6 @@ export const rootRouterConfig: Routes = [
         path: 'system/audit',
         loadChildren: () => import('./pages/audit/audit.module').then((module) => module.AuditModule),
       },
-      {
-        path: 'errors',
-        children: [{
-          path: 'unauthorized',
-          loadChildren: () => import('./pages/unauthorized/unauthorized.module').then((module) => module.UnauthorizedModule),
-        }],
-      },
     ],
   },
   {

src/app/core/testing/mock-enclosure/enclosure-templates/utils/disk.utils.ts

@@ -1,6 +1,7 @@
 import { TiB } from 'app/constants/bytes.constant';
 import { countSlots, mapSlots } from 'app/core/testing/mock-enclosure/enclosure-templates/utils/slots.utils';
 import { DiskType } from 'app/enums/disk-type.enum';
+import { EnclosureStatus } from 'app/enums/enclosure-slot-status.enum';
 import { DashboardEnclosure, DashboardEnclosureSlot } from 'app/interfaces/enclosure.interface';
 
 export function addDisksToSlots(enclosures: DashboardEnclosure[], percentageToAdd: number): DashboardEnclosure[] {
@@ -18,7 +19,7 @@ export function addDisksToSlots(enclosures: DashboardEnclosure[], percentageToAd
 function addDisk(slot: DashboardEnclosureSlot, i: number): DashboardEnclosureSlot {
   return {
     ...slot,
-    status: 'OK',
+    status: EnclosureStatus.Ok,
     type: DiskType.Hdd,
     dev: generateDiskName(i),
     size: 10 * TiB,

src/app/core/testing/mock-enclosure/enclosure-templates/utils/make-array-device-slots.utils.ts

@@ -1,4 +1,5 @@
 import { keyBy, range } from 'lodash';
+import { EnclosureStatus } from 'app/enums/enclosure-slot-status.enum';
 import { DashboardEnclosureSlot } from 'app/interfaces/enclosure.interface';
 
 export function makeArrayDeviceSlots(
@@ -16,7 +17,7 @@ export function makeArrayDeviceSlots(
     return {
       drive_bay_number: slot,
       descriptor: `slot${slot.toString().padStart(2, '0')}`,
-      status: 'Not installed',
+      status: EnclosureStatus.Ok,
       dev: null,
       supports_identify_light: options.supportsIdentifyLight ?? false,
       size: null,

src/app/directives/common/new-feature-indicator/new-feature-indicator-wrapper.component.html

@@ -14,6 +14,7 @@ <h5 class="tooltip-title">
           mat-icon-button
           ixTest="tooltip-close"
           class="close-button"
+          [attr.aria-label]="'Close Tooltip' | translate"
           (click)="popperTooltip.hide()"
         >
           <ix-icon

src/app/directives/common/ui-search.directive.ts

@@ -17,6 +17,20 @@ export class UiSearchDirective implements OnInit, OnDestroy {
     return getSearchableElementId(this.config);
   }
 
+  get ariaLabel(): string {
+    const hierarchyItem = this.config.hierarchy?.[this.config.hierarchy.length - 1] || '';
+    const isSingleWord = hierarchyItem.trim().split(/\s+/).length === 1;
+
+    if (isSingleWord && this.config.synonyms?.length > 0) {
+      return this.config.synonyms.reduce((best, synonym) => {
+        const synonymWordCount = synonym.trim().split(/\s+/).length;
+        const bestWordCount = best.trim().split(/\s+/).length;
+        return synonymWordCount > bestWordCount ? synonym : best;
+      }, hierarchyItem);
+    }
+    return hierarchyItem;
+  }
+
   constructor(
     private renderer: Renderer2,
     private elementRef: ElementRef<HTMLElement>,
@@ -26,6 +40,7 @@ export class UiSearchDirective implements OnInit, OnDestroy {
   ngOnInit(): void {
     if (this.id) {
       this.renderer.setAttribute(this.elementRef.nativeElement, 'id', this.id);
+      this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-label', this.ariaLabel);
     }
     this.searchDirectives.register(this);
   }

src/app/enums/directory-service-state.enum.ts

@@ -1,7 +1,17 @@
+import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+
 export enum DirectoryServiceState {
   Disabled = 'DISABLED',
   Healthy = 'HEALTHY',
   Faulted = 'FAULTED',
   Leaving = 'LEAVING',
   Joining = 'JOINING',
 }
+
+export const directoryServiceStateLabels = new Map<DirectoryServiceState, string>([
+  [DirectoryServiceState.Disabled, T('Disabled')],
+  [DirectoryServiceState.Healthy, T('Healthy')],
+  [DirectoryServiceState.Faulted, T('Faulted')],
+  [DirectoryServiceState.Leaving, T('Leaving')],
+  [DirectoryServiceState.Joining, T('Joining')],
+]);

src/app/enums/smb-encryption.enum.ts

@@ -0,0 +1,15 @@
+import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+
+export enum SmbEncryption {
+  Default = 'DEFAULT',
+  Negotiate = 'NEGOTIATE',
+  Desired = 'DESIRED',
+  Required = 'REQUIRED',
+}
+
+export const smbEncryptionLabels = new Map<SmbEncryption, string>([
+  [SmbEncryption.Default, T('Default – follow upstream / TrueNAS default')],
+  [SmbEncryption.Negotiate, T('Negotiate – only encrypt transport if explicitly requested by the SMB client')],
+  [SmbEncryption.Desired, T('Desired – encrypt transport if supported by client during session negotiation')],
+  [SmbEncryption.Required, T('Required – always encrypt transport (rejecting access if client does not support encryption – incompatible with SMB1 server enable_smb1)')],
+]);

src/app/interfaces/enclosure.interface.ts

@@ -73,8 +73,7 @@ export interface DashboardEnclosureSlot {
    */
   drive_bay_number?: number;
   descriptor: string;
-  // TODO: Introduce enum
-  status: string;
+  status: EnclosureStatus;
   dev: string;
   supports_identify_light?: boolean;
   size?: number;

src/app/interfaces/smb-config.interface.ts

@@ -1,4 +1,5 @@
 import { LogLevel } from 'app/enums/log-level.enum';
+import { SmbEncryption } from 'app/enums/smb-encryption.enum';
 
 export interface SmbConfig {
   aapl_extensions: boolean;
@@ -21,6 +22,7 @@ export interface SmbConfig {
   syslog: boolean;
   unixcharset: string;
   workgroup: string;
+  encryption: SmbEncryption;
 }
 
 export type SmbConfigUpdate = {

src/app/modules/dialog/components/job-progress/job-progress-dialog.component.html

@@ -56,6 +56,7 @@ <h5>{{ 'Logs' | translate }}</h5>
     mat-button
     ixTest="abort"
     [disabled]="isAbortingJob"
+    [attr.aria-label]="'Abort Job' | translate"
     (click)="abortJob()"
   >
     {{ isAbortingJob ? ('Aborting...' | translate) : ('Abort' | translate) }}
@@ -67,6 +68,7 @@ <h5>{{ 'Logs' | translate }}</h5>
     mat-icon-button
     mat-dialog-close="close"
     ixTest="close"
+    [aria-label]="'Hide Job' | translate: { jobMethod: job.method }"
   >
     <ix-icon name="remove"></ix-icon>
   </button>

src/app/modules/entity/entity-job/entity-job.component.html

@@ -81,6 +81,7 @@ <h5>{{ 'Logs' | translate }}</h5>
       mat-icon-button
       mat-dialog-close="close"
       ixTest="close"
+      [aria-label]="'Close Job' | translate"
     >
       <ix-icon name="close"></ix-icon>
     </button>
@@ -102,6 +103,7 @@ <h5>{{ 'Logs' | translate }}</h5>
       mat-icon-button
       mat-dialog-close="close"
       ixTest="close"
+      [aria-label]="'Hide Job' | translate"
     >
       <ix-icon name="remove"></ix-icon>
     </button>

src/app/modules/feedback/components/feedback-dialog/feedback-dialog.component.html

@@ -8,6 +8,7 @@ <h1 matDialogTitle>{{ 'Send Feedback' | translate }}</h1>
   class="close-feedback-dialog"
   ixTest="close-feedback-dialog"
   [disabled]="isLoading"
+  [aria-label]="'Close Feedback Dialog' | translate"
 >
   <ix-icon name="clear"></ix-icon>
 </button>

src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html

@@ -63,6 +63,7 @@
     >
       <ix-list-item
         *ngFor="let element of getFormArray.controls; let i = index"
+        [label]="dynamicSchema.title | translate"
         [canDelete]="!isAllListControlsDisabled"
         (delete)="removeControl(i)"
       >

src/app/modules/forms/ix-forms/components/ix-input/ix-input.component.html

@@ -45,6 +45,7 @@
     type="button"
     class="toggle_pw"
     [ixTest]="['toggle-password', controlDirective.name]"
+    [attr.aria-label]="showPassword ? ('Hide Password' | translate) : ('Show Password' | translate)"
     (click)="onPasswordToggled()"
   >
     <ix-icon

src/app/modules/forms/ix-forms/components/ix-list/ix-list-item/ix-list-item.component.html

@@ -5,6 +5,7 @@
     type="button"
     class="delete-btn"
     ixTest="remove-from-list"
+    [attr.aria-label]="'Remove {label} item' | translate: { label }"
     (click)="deleteItem()"
   >
     <ix-icon name="clear"></ix-icon>

src/app/modules/forms/ix-forms/components/ix-list/ix-list-item/ix-list-item.component.ts

@@ -1,6 +1,6 @@
 import {
   ChangeDetectionStrategy,
-  Component, EventEmitter, input, Output,
+  Component, EventEmitter, Input, input, Output,
 } from '@angular/core';
 
 @Component({
@@ -11,6 +11,7 @@ import {
 })
 export class IxListItemComponent {
   readonly canDelete = input(true);
+  @Input() label?: string;
   @Output() delete = new EventEmitter<void>();
 
   deleteItem(): void {

src/app/modules/forms/ix-forms/components/ix-list/ix-list.component.html

@@ -13,6 +13,7 @@
       type="button"
       class="add-btn"
       [ixTest]="['add-item', label]"
+      [attr.aria-label]="'Add {item}' | translate: { item: label }"
       (click)="addItem()"
     >
       {{ 'Add' | translate }}

src/app/modules/forms/ix-forms/components/ix-select/ix-select.component.html

@@ -14,7 +14,7 @@
       [disabled]="disabledState"
       [multiple]="multiple"
       [ixTest]="controlDirective.name"
-      [attr.aria-label]="label"
+      [aria-label]="label"
       [(ngModel)]="value"
       (blur)="onTouch()"
       (ngModelChange)="onChange($event)"

src/app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header/ix-modal-header.component.html

@@ -13,6 +13,8 @@ <h3 class="ix-formtitle">
       tabindex="0"
       name="cancel"
       id="ix-close-icon"
+      type="button"
+      [attr.aria-label]="'Close {formType} Form' | translate: { formType: title }"
       (click)="close()"
       (keydown.enter)="close()"
     ></ix-icon>

src/app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header2/ix-modal-header2.component.html

@@ -1,14 +1,15 @@
 <div
   class="ix-slidein-title-bar"
   fxLayout="row"
-  [fxLayoutAlign]="componentsSize > 1 ? 'left center' : 'space-between center'"
+  [fxLayoutAlign]="componentsSize() > 1 ? 'left center' : 'space-between center'"
 >
-  <ng-container *ngIf="componentsSize > 1 && !disableClose">
+  <ng-container *ngIf="componentsSize() > 1 && !disableClose">
     <button
       mat-icon-button
       id="ix-close-icon"
       [ixTest]="['close-slide-in']"
       [matTooltip]="tooltip"
+      [attr.aria-label]="'Close {formType} Form' | translate: { formType: title }"
       (click)="close()"
     >
       <ix-icon name="mdi-chevron-left" ></ix-icon>
@@ -18,12 +19,13 @@ <h3 class="ix-form-title">
     {{ title | translate }}
     <ix-readonly-badge *ngIf="requiredRoles?.length && !(hasRequiredRoles | async)"></ix-readonly-badge>
   </h3>
-  <ng-container *ngIf="componentsSize <= 1 && !disableClose">
+  <ng-container *ngIf="componentsSize() <= 1 && !disableClose">
     <button
       mat-icon-button
       id="ix-close-icon"
       [ixTest]="['close-slide-in']"
       [matTooltip]="tooltip"
+      [attr.aria-label]="'Close {formType} Form' | translate: { formType: title }"
       (click)="close()"
     >
       <ix-icon name="cancel" (keydown.enter)="close()"></ix-icon>

src/app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header2/ix-modal-header2.component.spec.ts

@@ -0,0 +1,89 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { CommonModule } from '@angular/common';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { mockProvider, Spectator, createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { Subject } from 'rxjs';
+import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
+import { ChainedRef } from 'app/modules/forms/ix-forms/components/ix-slide-in/chained-component-ref';
+import { IxModalHeader2Component } from 'app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header2/ix-modal-header2.component';
+import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
+import { CloudBackupFormComponent } from 'app/pages/data-protection/cloud-backup/cloud-backup-form/cloud-backup-form.component';
+import { CloudSyncWizardComponent } from 'app/pages/data-protection/cloudsync/cloudsync-wizard/cloudsync-wizard.component';
+import { ChainedComponentResponse, ChainedComponentSerialized, IxChainedSlideInService } from 'app/services/ix-chained-slide-in.service';
+
+describe('IxModalHeader2Component', () => {
+  let spectator: Spectator<IxModalHeader2Component>;
+  const components$ = new Subject<ChainedComponentSerialized[]>();
+  const closeSubject$ = new Subject<ChainedComponentResponse>();
+  const backSubject$ = new Subject<ChainedComponentResponse>();
+  let loader: HarnessLoader;
+  const createComponent = createComponentFactory({
+    component: IxModalHeader2Component,
+    imports: [
+      CommonModule,
+      FlexLayoutModule,
+    ],
+    declarations: [
+      MockComponent(CloudSyncWizardComponent),
+    ],
+    providers: [
+      mockAuth(),
+      mockProvider(IxChainedSlideInService, {
+        components$,
+      }),
+      mockProvider(ChainedRef, {
+        close: jest.fn(),
+        getData: jest.fn(() => undefined),
+        swap: jest.fn(),
+      }),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent({
+      props: {
+        title: 'Add Cloudsync Task',
+        loading: false,
+      },
+    });
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+  });
+
+  it('shows proper title', () => {
+    const title = spectator.query('.ix-form-title');
+    expect(title.textContent).toBe(' Add Cloudsync Task ');
+  });
+
+  it('shows a working close button when only 1 component is in the queue', async () => {
+    const closeButton = await loader.getHarness(MatButtonHarness.with({ selector: '#ix-close-icon' }));
+    await closeButton.click();
+    expect(spectator.inject(ChainedRef).close).toHaveBeenCalledWith({ response: false, error: null });
+    const icon = spectator.query(IxIconComponent);
+    expect(icon.name()).toBe('cancel');
+  });
+
+  it('shows a working back button when more than 1 component is in the queue', async () => {
+    components$.next([{
+      id: 'id',
+      component: CloudSyncWizardComponent,
+      close$: closeSubject$,
+      data: undefined,
+      wide: false,
+    }, {
+      id: 'id2',
+      component: CloudBackupFormComponent,
+      close$: backSubject$,
+      data: undefined,
+      wide: false,
+    }] as ChainedComponentSerialized[]);
+    spectator.detectChanges();
+    const closeButton = await loader.getHarness(MatButtonHarness.with({ selector: '#ix-close-icon' }));
+    await closeButton.click();
+    expect(spectator.inject(ChainedRef).close).toHaveBeenCalledWith({ response: false, error: null });
+    const icon = spectator.query(IxIconComponent);
+    expect(icon.name()).toBe('mdi-chevron-left');
+  });
+});

src/app/modules/forms/ix-forms/components/ix-slide-in/components/ix-modal-header2/ix-modal-header2.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit, ChangeDetectionStrategy, Component, Input,
+  signal,
 } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService } from '@ngx-translate/core';
@@ -21,7 +22,7 @@ export class IxModalHeader2Component implements AfterViewInit {
   @Input() loading: boolean;
   @Input() disableClose = false;
   @Input() requiredRoles: Role[] = [];
-  componentsSize = 1;
+  componentsSize = signal(1);
 
   get hasRequiredRoles(): Observable<boolean> {
     return this.authService.hasRole(this.requiredRoles);
@@ -40,7 +41,7 @@ export class IxModalHeader2Component implements AfterViewInit {
     this.chainedSlideIn.components$.pipe(
       untilDestroyed(this),
     ).subscribe((components) => {
-      this.componentsSize = components.length;
+      this.componentsSize.set(components.length);
       if (components.length > 1) {
         this.tooltip = this.translate.instant('Go back to the previous form');
       } else {