NAS-133675 / 25.10 / Refactor CloudBackupListComponent to master-detail-view

src/app/pages/audit/audit.component.scss

@@ -106,9 +106,3 @@
   border-radius: 0;
   margin-bottom: 16px;
 }
-
-.mobile-hidden {
-  @media (max-width: $breakpoint-md) {
-    display: none;
-  }
-}

src/app/pages/data-protection/cloud-backup/all-cloud-backups/all-cloud-backups.component.html

@@ -0,0 +1,35 @@
+<ix-page-header>
+  <button
+    *ixRequiresRoles="requiredRoles"
+    mat-button
+    color="primary"
+    ixTest="add-task"
+    [ixUiSearch]="searchableElements.elements.add"
+    (click)="openForm()"
+  >
+    {{ 'Add' | translate }}
+  </button>
+</ix-page-header>
+
+<ix-master-detail-view
+  #masterDetailView="masterDetailViewContext"
+  [selectedItem]="dataProvider?.expandedRow"
+>
+  <ix-cloud-backup-list
+    master
+    [dataProvider]="dataProvider"
+    [cloudBackups]="cloudBackups()"
+    [isMobileView]="masterDetailView.isMobileView()"
+    (toggleShowMobileDetails)="masterDetailView.toggleShowMobileDetails($event)"
+  ></ix-cloud-backup-list>
+
+  <ng-container detail-header>
+    {{ 'Task Details for {task}' | translate: { task: dataProvider?.expandedRow?.description} }}
+  </ng-container>
+
+  <ng-container detail>
+    @if (dataProvider.expandedRow) {
+      <ix-cloud-backup-details [backup]="dataProvider.expandedRow"></ix-cloud-backup-details>
+    }
+  </ng-container>
+</ix-master-detail-view>

src/app/pages/data-protection/cloud-backup/all-cloud-backups/all-cloud-backups.component.spec.ts

@@ -0,0 +1,137 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { Spectator, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
+import { provideMockStore } from '@ngrx/store/testing';
+import { MockComponents, MockDirective } from 'ng-mocks';
+import { of } from 'rxjs';
+import { mockApi, mockCall, mockJob } from 'app/core/testing/utils/mock-api.utils';
+import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
+import { DetailsHeightDirective } from 'app/directives/details-height/details-height.directive';
+import { JobState } from 'app/enums/job-state.enum';
+import { AdvancedConfig } from 'app/interfaces/advanced-config.interface';
+import { CloudBackup } from 'app/interfaces/cloud-backup.interface';
+import { DialogService } from 'app/modules/dialog/dialog.service';
+import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum';
+import { selectJobs } from 'app/modules/jobs/store/job.selectors';
+import { MasterDetailViewComponent } from 'app/modules/master-detail-view/master-detail-view.component';
+import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
+import { SlideIn } from 'app/modules/slide-ins/slide-in';
+import { AllCloudBackupsComponent } from 'app/pages/data-protection/cloud-backup/all-cloud-backups/all-cloud-backups.component';
+import { CloudBackupDetailsComponent } from 'app/pages/data-protection/cloud-backup/cloud-backup-details/cloud-backup-details.component';
+import { CloudBackupFormComponent } from 'app/pages/data-protection/cloud-backup/cloud-backup-form/cloud-backup-form.component';
+import { CloudBackupListComponent } from 'app/pages/data-protection/cloud-backup/cloud-backup-list/cloud-backup-list.component';
+import { selectPreferences } from 'app/store/preferences/preferences.selectors';
+import { selectAdvancedConfig, selectSystemConfigState } from 'app/store/system-config/system-config.selectors';
+
+describe('AllCloudBackupsComponent', () => {
+  let spectator: Spectator<AllCloudBackupsComponent>;
+  let loader: HarnessLoader;
+
+  const cloudBackups = [
+    {
+      id: 1,
+      description: 'UA',
+      path: '/mnt/nmnmn',
+      pre_script: 'your_pre_script',
+      snapshot: false,
+      enabled: false,
+      job: {
+        state: JobState.Finished,
+        time_finished: {
+          $date: new Date().getTime() - 50000,
+        },
+      },
+    } as CloudBackup,
+  ];
+
+  const createComponent = createComponentFactory({
+    component: AllCloudBackupsComponent,
+    imports: [
+      MockComponents(
+        PageHeaderComponent,
+        CloudBackupListComponent,
+        CloudBackupDetailsComponent,
+      ),
+      MockDirective(DetailsHeightDirective),
+    ],
+    providers: [
+      mockAuth(),
+      mockApi([
+        mockCall('cloud_backup.query', cloudBackups),
+        mockCall('cloud_backup.delete'),
+        mockCall('cloud_backup.update'),
+        mockJob('cloud_backup.sync'),
+      ]),
+      mockProvider(DialogService, {
+        confirm: jest.fn(() => of(true)),
+      }),
+      mockProvider(SlideIn, {
+        open: jest.fn(() => of({
+          response: true,
+        })),
+      }),
+      provideMockStore({
+        selectors: [
+          {
+            selector: selectSystemConfigState,
+            value: {},
+          },
+          {
+            selector: selectPreferences,
+            value: {},
+          },
+          {
+            selector: selectJobs,
+            value: [{
+              state: JobState.Finished,
+              time_finished: {
+                $date: new Date().getTime() - 50000,
+              },
+            }],
+          },
+          {
+            selector: selectAdvancedConfig,
+            value: {
+              consolemenu: true,
+              serialconsole: true,
+              serialport: 'ttyS0',
+              serialspeed: '9600',
+              motd: 'Welcome back, commander',
+            } as AdvancedConfig,
+          },
+        ],
+      }),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent();
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+  });
+
+  it('checks used components on page', () => {
+    expect(spectator.query(PageHeaderComponent)).toExist();
+    expect(spectator.query(MasterDetailViewComponent)).toExist();
+  });
+
+  it('shows form to create new Cloud Backup when Add button is pressed', async () => {
+    const addButton = await loader.getHarness(MatButtonHarness.with({ text: 'Add' }));
+    await addButton.click();
+
+    expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(
+      CloudBackupFormComponent,
+      { wide: true },
+    );
+  });
+
+  it('sets the default sort for dataProvider', () => {
+    spectator.component.dataProvider.load();
+
+    expect(spectator.component.dataProvider.sorting).toEqual({
+      active: 1,
+      direction: SortDirection.Asc,
+      propertyName: 'description',
+    });
+  });
+});

src/app/pages/data-protection/cloud-backup/all-cloud-backups/all-cloud-backups.component.ts

@@ -0,0 +1,108 @@
+import {
+  Component, ChangeDetectionStrategy, signal, OnInit,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
+import { filter, tap } from 'rxjs';
+import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
+import { UiSearchDirective } from 'app/directives/ui-search.directive';
+import { Role } from 'app/enums/role.enum';
+import { CloudBackup } from 'app/interfaces/cloud-backup.interface';
+import { AsyncDataProvider } from 'app/modules/ix-table/classes/async-data-provider/async-data-provider';
+import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum';
+import { MasterDetailViewComponent } from 'app/modules/master-detail-view/master-detail-view.component';
+import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
+import { SlideIn } from 'app/modules/slide-ins/slide-in';
+import { ApiService } from 'app/modules/websocket/api.service';
+import { CloudBackupDetailsComponent } from 'app/pages/data-protection/cloud-backup/cloud-backup-details/cloud-backup-details.component';
+import { CloudBackupFormComponent } from 'app/pages/data-protection/cloud-backup/cloud-backup-form/cloud-backup-form.component';
+import { CloudBackupListComponent } from 'app/pages/data-protection/cloud-backup/cloud-backup-list/cloud-backup-list.component';
+import { cloudBackupListElements } from 'app/pages/data-protection/cloud-backup/cloud-backup-list/cloud-backup-list.elements';
+
+@UntilDestroy()
+@Component({
+  selector: 'ix-all-cloud-backups',
+  templateUrl: './all-cloud-backups.component.html',
+  styleUrls: ['./all-cloud-backups.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MasterDetailViewComponent,
+    CloudBackupListComponent,
+    CloudBackupDetailsComponent,
+    PageHeaderComponent,
+    TranslateModule,
+    UiSearchDirective,
+    RequiresRolesDirective,
+    MatButton,
+  ],
+})
+export class AllCloudBackupsComponent implements OnInit {
+  dataProvider: AsyncDataProvider<CloudBackup>;
+  protected readonly cloudBackups = signal<CloudBackup[]>([]);
+  protected readonly searchableElements = cloudBackupListElements;
+  readonly requiredRoles = [Role.CloudBackupWrite];
+
+  constructor(
+    private api: ApiService,
+    private slideIn: SlideIn,
+    private route: ActivatedRoute,
+    private cdr: ChangeDetectorRef,
+    private router: Router,
+  ) {
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationStart), untilDestroyed(this))
+      .subscribe(() => {
+        if (this.router.getCurrentNavigation()?.extras?.state?.hideMobileDetails) {
+          this.dataProvider.expandedRow = null;
+          this.cdr.markForCheck();
+        }
+      });
+  }
+
+  ngOnInit(): void {
+    this.route.fragment.pipe(
+      tap((id) => this.loadCloudBackups(id || undefined)),
+      untilDestroyed(this),
+    ).subscribe();
+  }
+
+  openForm(row?: CloudBackup): void {
+    this.slideIn.open(CloudBackupFormComponent, { data: row, wide: true })
+      .pipe(
+        filter((response) => !!response.response),
+        untilDestroyed(this),
+      ).subscribe(() => this.dataProvider.load());
+  }
+
+  private loadCloudBackups(id?: string): void {
+    const cloudBackups$ = this.api.call('cloud_backup.query').pipe(
+      tap((cloudBackups) => {
+        this.cloudBackups.set(cloudBackups);
+
+        const selectedBackup = id
+          ? cloudBackups.find((cloudBackup) => cloudBackup.id.toString() === id)
+          : cloudBackups.find((cloudBackup) => cloudBackup.id === this.dataProvider?.expandedRow?.id);
+
+        if (selectedBackup) {
+          this.dataProvider.expandedRow = selectedBackup;
+        } else if (cloudBackups.length) {
+          const [firstBackup] = cloudBackups;
+          this.dataProvider.expandedRow = firstBackup;
+        }
+        this.cdr.markForCheck();
+      }),
+    );
+
+    this.dataProvider = new AsyncDataProvider<CloudBackup>(cloudBackups$);
+    this.dataProvider.setSorting({
+      active: 1,
+      direction: SortDirection.Asc,
+      propertyName: 'description',
+    });
+    this.dataProvider.load();
+  }
+}

src/app/pages/data-protection/cloud-backup/cloud-backup-details/cloud-backup-details.component.html

@@ -1,18 +1,3 @@
-<div class="header">
-  <h2 class="title">
-    <div class="mobile-prefix">
-      <ix-mobile-back-button
-        (close)="onCloseMobileDetails()"
-      ></ix-mobile-back-button>
-      {{ 'Task Details for {task}' | translate: { task: backup().description } }}
-    </div>
-
-    <span class="prefix">
-      {{ 'Task Details for {task}' | translate: { task: backup().description } }}
-    </span>
-  </h2>
-</div>
-
 <div class="cards">
   <div class="scroll-window">
     <ix-cloud-backup-schedule [backup]="backup()"></ix-cloud-backup-schedule>

src/app/pages/data-protection/cloud-backup/cloud-backup-details/cloud-backup-details.component.ts

@@ -3,7 +3,6 @@ import {
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { CloudBackup } from 'app/interfaces/cloud-backup.interface';
-import { MobileBackButtonComponent } from 'app/modules/buttons/mobile-back-button/mobile-back-button.component';
 import { CloudBackupExcludedPathsComponent } from './cloud-backup-excluded-paths/cloud-backup-excluded-paths.component';
 import { CloudBackupScheduleComponent } from './cloud-backup-schedule/cloud-backup-schedule.component';
 import { CloudBackupSnapshotsComponent } from './cloud-backup-snapshots/cloud-backup-snapshots.component';
@@ -21,7 +20,6 @@ import { CloudBackupStatsComponent } from './cloud-backup-stats/cloud-backup-sta
     CloudBackupExcludedPathsComponent,
     CloudBackupSnapshotsComponent,
     TranslateModule,
-    MobileBackButtonComponent,
   ],
 })
 export class CloudBackupDetailsComponent {