NAS-131479 / 25.04 / Refactor storage and credentials modules to stan…

…dalone (#10789)

scripts/test_changed.js

@@ -30,9 +30,7 @@ function findTestFiles(directory) {
   const entries = readdirSync(directory, { withFileTypes: true });
   for (let entry of entries) {
     const entryPath = path.join(directory, entry.name);
-    if (entry.isDirectory()) {
-      testFiles.push(...findTestFiles(entryPath));
-    } else if (entry.isFile() && entry.name.match(/\.spec\.ts$/)) {
+    if (entry.isFile() && entry.name.match(/\.spec\.ts$/)) {
       testFiles.push(entryPath);
     }
   }

src/app/app.routing.ts

@@ -69,7 +69,7 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'vm',
-        loadChildren: () => import('./pages/vm/vm.module').then((module) => module.VmModule),
+        loadChildren: () => import('app/pages/vm/vm.routes').then((module) => module.vmRoutes),
         data: { title: T('Virtual Machines'), breadcrumb: T('Virtual Machines') },
       },
       {
@@ -89,7 +89,7 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'storage',
-        loadChildren: () => import('./pages/storage/storage.module').then((module) => module.StorageModule),
+        loadChildren: () => import('./pages/storage/storage.routes').then((module) => module.storageRoutes),
         data: { title: T('Storage'), breadcrumb: T('Storage') },
       },
       {
@@ -119,7 +119,7 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'credentials',
-        loadChildren: () => import('./pages/credentials/credentials.module').then((module) => module.CredentialsModule),
+        loadChildren: () => import('app/pages/credentials/credentials.routes').then((module) => module.credentialsRoutes),
         data: { title: T('Credentials'), breadcrumb: T('Credentials') },
       },
       {
@@ -129,7 +129,7 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'system/audit',
-        loadComponent: () => import('./pages/audit/audit.component').then((module) => module.AuditComponent),
+        loadChildren: () => import('./pages/audit/audit.routes').then((module) => module.auditRoutes),
       },
     ],
   },

src/app/modules/lists/dual-list/dual-list.component.ts

@@ -1,10 +1,17 @@
-import { CdkDragDrop, CdkDragStart } from '@angular/cdk/drag-drop';
+import {
+  CdkDragDrop, CdkDragStart, CdkDropList, CdkDrag,
+} from '@angular/cdk/drag-drop';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy, Component, ContentChild, Input, OnChanges, OnInit, output, TemplateRef,
 } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatList, MatListItem } from '@angular/material/list';
 import { differenceBy, isEqual } from 'lodash-es';
 import { IxSimpleChanges } from 'app/interfaces/simple-changes.interface';
+import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { ListSelection } from 'app/modules/lists/dual-list/models';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 
 const transfer = <T>(from: ListSelection<T>, to: ListSelection<T>): {
   from: ListSelection<T>; to: ListSelection<T>;
@@ -20,6 +27,17 @@ const transfer = <T>(from: ListSelection<T>, to: ListSelection<T>): {
   styleUrls: ['./dual-list.component.scss'],
   templateUrl: 'dual-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CdkDropList,
+    MatList,
+    MatListItem,
+    CdkDrag,
+    NgTemplateOutlet,
+    MatButton,
+    TestDirective,
+    IxIconComponent,
+  ],
 })
 export class DualListboxComponent<T extends { id: string | number }> implements OnInit, OnChanges {
   @Input() key: keyof T = 'id';

src/app/pages/audit/audit.routes.ts

@@ -0,0 +1,20 @@
+import { Routes } from '@angular/router';
+import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+import { AuditComponent } from 'app/pages/audit/audit.component';
+
+export const auditRoutes: Routes = [
+  {
+    path: '',
+    data: { title: T('Audit') },
+    component: AuditComponent,
+    pathMatch: 'full',
+  },
+  {
+    path: ':options',
+    data: {
+      title: T('Audit'),
+    },
+    component: AuditComponent,
+    pathMatch: 'full',
+  },
+];

src/app/pages/credentials/backup-credentials/backup-credentials.component.ts

@@ -1,13 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { UiSearchDirective } from 'app/directives/ui-search.directive';
 import { backupCredentialsElements } from 'app/pages/credentials/backup-credentials/backup-credentials.elements';
+import { CloudCredentialsCardComponent } from './cloud-credentials-card/cloud-credentials-card.component';
+import { SshConnectionCardComponent } from './ssh-connection-card/ssh-connection-card.component';
+import { SshKeypairCardComponent } from './ssh-keypair-card/ssh-keypair-card.component';
 
 @UntilDestroy()
 @Component({
   selector: 'ix-backup-credentials',
   templateUrl: './backup-credentials.component.html',
   styleUrls: ['./backup-credentials.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    UiSearchDirective,
+    CloudCredentialsCardComponent,
+    SshConnectionCardComponent,
+    SshKeypairCardComponent,
+  ],
 })
 export class BackupCredentialsComponent {
   protected readonly searchableElements = backupCredentialsElements;

src/app/pages/credentials/backup-credentials/cloud-credentials-card/cloud-credentials-card.component.ts

@@ -1,19 +1,31 @@
+import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy, Component, OnInit,
 } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatToolbarRow } from '@angular/material/toolbar';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { switchMap, 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 { CloudSyncCredential } from 'app/interfaces/cloudsync-credential.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import { EmptyService } from 'app/modules/empty/empty.service';
 import { iconMarker } from 'app/modules/ix-icon/icon-marker.util';
 import { AsyncDataProvider } from 'app/modules/ix-table/classes/async-data-provider/async-data-provider';
+import { IxTableComponent } from 'app/modules/ix-table/components/ix-table/ix-table.component';
 import { actionsColumn } from 'app/modules/ix-table/components/ix-table-body/cells/ix-cell-actions/ix-cell-actions.component';
 import { textColumn } from 'app/modules/ix-table/components/ix-table-body/cells/ix-cell-text/ix-cell-text.component';
+import { IxTableBodyComponent } from 'app/modules/ix-table/components/ix-table-body/ix-table-body.component';
+import { IxTableHeadComponent } from 'app/modules/ix-table/components/ix-table-head/ix-table-head.component';
+import { IxTablePagerShowMoreComponent } from 'app/modules/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.component';
+import { IxTableEmptyDirective } from 'app/modules/ix-table/directives/ix-table-empty.directive';
 import { SortDirection } from 'app/modules/ix-table/enums/sort-direction.enum';
 import { createTable } from 'app/modules/ix-table/utils';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 import { cloudCredentialsCardElements } from 'app/pages/credentials/backup-credentials/cloud-credentials-card/cloud-credentials-card.elements';
 import { CloudCredentialFormInput, CloudCredentialsFormComponent } from 'app/pages/credentials/backup-credentials/cloud-credentials-form/cloud-credentials-form.component';
 import { CloudCredentialService } from 'app/services/cloud-credential.service';
@@ -27,6 +39,23 @@ import { WebSocketService } from 'app/services/ws.service';
   styleUrls: ['./cloud-credentials-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [CloudCredentialService],
+  standalone: true,
+  imports: [
+    MatCard,
+    UiSearchDirective,
+    MatToolbarRow,
+    RequiresRolesDirective,
+    MatButton,
+    TestDirective,
+    MatCardContent,
+    IxTableComponent,
+    IxTableEmptyDirective,
+    IxTableHeadComponent,
+    IxTableBodyComponent,
+    IxTablePagerShowMoreComponent,
+    TranslateModule,
+    AsyncPipe,
+  ],
 })
 export class CloudCredentialsCardComponent implements OnInit {
   protected readonly requiredRoles = [Role.CloudSyncWrite];

src/app/pages/credentials/backup-credentials/cloud-credentials-form/cloud-credentials-form.component.spec.ts

@@ -101,11 +101,11 @@ describe('CloudCredentialsFormComponent', () => {
     imports: [
       ReactiveFormsModule,
       CloudSyncProviderDescriptionComponent,
+      StorjProviderFormComponent,
     ],
     declarations: [
       TokenProviderFormComponent,
       S3ProviderFormComponent,
-      StorjProviderFormComponent,
     ],
     providers: [
       mockProvider(SnackbarService),

src/app/pages/credentials/backup-credentials/cloud-credentials-form/cloud-credentials-form.component.ts

@@ -6,25 +6,35 @@ import {
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { MatCard, MatCardContent } from '@angular/material/card';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { combineLatest, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
+import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { CloudSyncProviderName } from 'app/enums/cloudsync-provider.enum';
 import { Role } from 'app/enums/role.enum';
 import { helptextSystemCloudcredentials as helptext } from 'app/helptext/system/cloud-credentials';
 import { CloudSyncCredential, CloudSyncCredentialUpdate } from 'app/interfaces/cloudsync-credential.interface';
 import { CloudSyncProvider } from 'app/interfaces/cloudsync-provider.interface';
 import { Option } from 'app/interfaces/option.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
+import { FormActionsComponent } from 'app/modules/forms/ix-forms/components/form-actions/form-actions.component';
+import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component';
+import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component';
+import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
 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 { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service';
 import { forbiddenValues } from 'app/modules/forms/ix-forms/validators/forbidden-values-validation/forbidden-values-validation';
 import { SnackbarService } from 'app/modules/snackbar/services/snackbar.service';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 import {
   BaseProviderFormComponent,
 } from 'app/pages/credentials/backup-credentials/cloud-credentials-form/provider-forms/base-provider-form';
+import { CloudSyncProviderDescriptionComponent } from 'app/pages/data-protection/cloudsync/cloudsync-provider-description/cloudsync-provider-description.component';
 import { getName, getProviderFormClass } from 'app/pages/data-protection/cloudsync/cloudsync-wizard/steps/cloudsync-provider/cloudsync-provider.common';
 import { CloudCredentialService } from 'app/services/cloud-credential.service';
 import { ErrorHandlerService } from 'app/services/error-handler.service';
@@ -41,6 +51,22 @@ export interface CloudCredentialFormInput {
   selector: 'ix-cloud-credentials-form',
   templateUrl: './cloud-credentials-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IxModalHeader2Component,
+    MatCard,
+    MatCardContent,
+    ReactiveFormsModule,
+    IxFieldsetComponent,
+    IxSelectComponent,
+    CloudSyncProviderDescriptionComponent,
+    IxInputComponent,
+    FormActionsComponent,
+    RequiresRolesDirective,
+    MatButton,
+    TestDirective,
+    TranslateModule,
+  ],
 })
 export class CloudCredentialsFormComponent implements OnInit {
   protected readonly requiredRoles = [Role.CloudSyncWrite];

src/app/pages/credentials/backup-credentials/cloud-credentials-form/oauth-provider/oauth-provider.component.ts

@@ -1,9 +1,13 @@
 import {
   ChangeDetectionStrategy, Component, input, output,
 } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 import { helptextSystemCloudcredentials as helptext } from 'app/helptext/system/cloud-credentials';
 import { OauthButtonType } from 'app/modules/buttons/oauth-button/interfaces/oauth-button.interface';
+import { OauthButtonModule } from 'app/modules/buttons/oauth-button/oauth-button.module';
+import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component';
+import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component';
 
 export interface OauthProviderData {
   client_id: string;
@@ -17,6 +21,14 @@ export interface OauthProviderData {
   templateUrl: './oauth-provider.component.html',
   styleUrls: ['./oauth-provider.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IxFieldsetComponent,
+    ReactiveFormsModule,
+    OauthButtonModule,
+    IxInputComponent,
+    TranslateModule,
+  ],
 })
 export class OauthProviderComponent {
   readonly oauthUrl = input<string>();

src/app/pages/credentials/backup-credentials/cloud-credentials-form/provider-forms/azure-provider-form/azure-provider-form.component.ts

@@ -1,8 +1,11 @@
 import {
   AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component,
 } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
+import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component';
+import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component';
 import {
   BaseProviderFormComponent,
 } from 'app/pages/credentials/backup-credentials/cloud-credentials-form/provider-forms/base-provider-form';
@@ -12,6 +15,13 @@ import {
   selector: 'ix-azure-provider-form',
   templateUrl: './azure-provider-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IxFieldsetComponent,
+    ReactiveFormsModule,
+    IxInputComponent,
+    TranslateModule,
+  ],
 })
 export class AzureProviderFormComponent extends BaseProviderFormComponent implements AfterViewInit {
   form = this.formBuilder.group({

src/app/pages/credentials/backup-credentials/cloud-credentials-form/provider-forms/backblaze-b2-provider-form/backblaze-b2-provider-form.component.ts

@@ -1,8 +1,11 @@
 import {
   AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component,
 } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
+import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component';
+import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component';
 import {
   BaseProviderFormComponent,
 } from 'app/pages/credentials/backup-credentials/cloud-credentials-form/provider-forms/base-provider-form';
@@ -12,6 +15,13 @@ import {
   selector: 'ix-backblaze-b2-provider-form',
   templateUrl: './backblaze-b2-provider-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IxFieldsetComponent,
+    ReactiveFormsModule,
+    IxInputComponent,
+    TranslateModule,
+  ],
 })
 export class BackblazeB2ProviderFormComponent extends BaseProviderFormComponent implements AfterViewInit {
   form = this.formBuilder.group({

src/app/pages/credentials/backup-credentials/cloud-credentials-form/provider-forms/ftp-provider-form/ftp-provider-form.component.ts

@@ -1,8 +1,11 @@
 import {
   AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component,
 } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
+import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component';
+import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component';
 import {
   BaseProviderFormComponent,
 } from 'app/pages/credentials/backup-credentials/cloud-credentials-form/provider-forms/base-provider-form';
@@ -12,6 +15,13 @@ import {
   selector: 'ix-ftp-provider-form',
   templateUrl: './ftp-provider-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IxFieldsetComponent,
+    ReactiveFormsModule,
+    IxInputComponent,
+    TranslateModule,
+  ],
 })
 export class FtpProviderFormComponent extends BaseProviderFormComponent implements AfterViewInit {
   form = this.formBuilder.group({