NAS-131424 / 25.04 / Convert more components to standalone (#10766)

src/app/app.routing.ts

@@ -42,11 +42,6 @@ export const rootRouterConfig: Routes = [
         loadChildren: () => import('app/pages/dashboard/dashboard.module').then((module) => module.DashboardModule),
         data: { title: T('Dashboard'), breadcrumb: T('Dashboard') },
       },
-      {
-        path: 'credentials',
-        loadChildren: () => import('./pages/account/account.module').then((module) => module.AccountModule),
-        data: { title: T('Credentials'), breadcrumb: T('Credentials') },
-      },
       {
         path: 'system',
         loadChildren: () => import('./pages/system/system.module').then((module) => module.SystemModule),
@@ -59,17 +54,17 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'network',
-        loadChildren: () => import('./pages/network/network.module').then((module) => module.NetworkModule),
+        loadComponent: () => import('./pages/network/network.component').then((module) => module.NetworkComponent),
         data: { title: T('Network'), breadcrumb: T('Network') },
       },
       {
         path: 'services',
-        loadChildren: () => import('./pages/services/services.module').then((module) => module.ServicesModule),
+        loadComponent: () => import('./pages/services/services.component').then((module) => module.ServicesComponent),
         data: { title: T('Services'), breadcrumb: T('Services') },
       },
       {
         path: 'directoryservice',
-        loadChildren: () => import('app/pages/directory-service/directory-service.module').then((module) => module.DirectoryServiceModule),
+        loadChildren: () => import('app/pages/directory-service/directory-service.routes').then((module) => module.routes),
         data: { title: T('Directory Services'), breadcrumb: T('Directory Services') },
       },
       {
@@ -104,12 +99,12 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'shell',
-        loadChildren: () => import('./pages/shell/shell.module').then((module) => module.ShellModule),
+        loadComponent: () => import('./pages/shell/shell.component').then((module) => module.ShellComponent),
         data: { title: T('Shell'), breadcrumb: T('Shell') },
       },
       {
         path: 'apikeys',
-        loadChildren: () => import('./pages/api-keys/api-keys.module').then((module) => module.ApiKeysModule),
+        loadComponent: () => import('./pages/api-keys/api-keys.component').then((module) => module.ApiKeysComponent),
         data: { title: T('API Keys'), breadcrumb: T('API Keys') },
       },
       {
@@ -134,7 +129,7 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'system/audit',
-        loadChildren: () => import('./pages/audit/audit.module').then((module) => module.AuditModule),
+        loadComponent: () => import('./pages/audit/audit.component').then((module) => module.AuditComponent),
       },
     ],
   },

src/app/modules/global-search/components/global-search-results/global-search-results.component.ts

@@ -1,8 +1,11 @@
 import {
   ChangeDetectionStrategy, Component, Inject, Input, OnChanges, output, TrackByFunction,
 } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatCard } from '@angular/material/card';
 import { Router } from '@angular/router';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
 import { findIndex, isEqual } from 'lodash-es';
 import { WINDOW } from 'app/helpers/window.helper';
 import { Option } from 'app/interfaces/option.interface';
@@ -13,6 +16,8 @@ import { processHierarchy } from 'app/modules/global-search/helpers/process-hier
 import { UiSearchableElement } from 'app/modules/global-search/interfaces/ui-searchable-element.interface';
 import { GlobalSearchSectionsProvider } from 'app/modules/global-search/services/global-search-sections.service';
 import { UiSearchProvider } from 'app/modules/global-search/services/ui-search.service';
+import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 import { AuthService } from 'app/services/auth/auth.service';
 
 @UntilDestroy()
@@ -21,6 +26,14 @@ import { AuthService } from 'app/services/auth/auth.service';
   templateUrl: './global-search-results.component.html',
   styleUrls: ['./global-search-results.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatCard,
+    TestDirective,
+    IxIconComponent,
+    MatButton,
+    TranslateModule,
+  ],
 })
 export class GlobalSearchResultsComponent implements OnChanges {
   @Input() searchTerm = '';

src/app/modules/global-search/components/global-search-trigger/global-search-trigger.component.spec.ts

@@ -1,5 +1,6 @@
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { MatInput } from '@angular/material/input';
 import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
@@ -17,9 +18,10 @@ describe('GlobalSearchTriggerComponent', () => {
   const createComponent = createComponentFactory({
     component: GlobalSearchTriggerComponent,
     detectChanges: false,
-    declarations: [
+    imports: [
       MockComponent(KeyboardShortcutComponent),
       MockComponent(GlobalSearchComponent),
+      MatInput,
     ],
     providers: [
       mockProvider(UiSearchProvider, {

src/app/modules/global-search/components/global-search-trigger/global-search-trigger.component.ts

@@ -8,11 +8,16 @@ import {
   HostListener,
   ViewContainerRef,
 } from '@angular/core';
+import { MatInput } from '@angular/material/input';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
 import { delay, take } from 'rxjs';
 import { GlobalSearchComponent } from 'app/modules/global-search/components/global-search/global-search.component';
 import { searchDelayConst } from 'app/modules/global-search/constants/delay.const';
 import { UiSearchProvider } from 'app/modules/global-search/services/ui-search.service';
+import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
+import { KeyboardShortcutComponent } from 'app/modules/keyboard-shortcut/keyboard-shortcut.component';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 import { FocusService } from 'app/services/focus.service';
 
 @UntilDestroy()
@@ -21,6 +26,14 @@ import { FocusService } from 'app/services/focus.service';
   templateUrl: './global-search-trigger.component.html',
   styleUrls: ['./global-search-trigger.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IxIconComponent,
+    MatInput,
+    TestDirective,
+    KeyboardShortcutComponent,
+    TranslateModule,
+  ],
 })
 export class GlobalSearchTriggerComponent implements AfterViewInit {
   protected overlayRef: OverlayRef;

src/app/modules/global-search/components/global-search/global-search.component.spec.ts

@@ -35,7 +35,6 @@ describe('GlobalSearchComponent', () => {
 
   const createComponent = createComponentFactory({
     component: GlobalSearchComponent,
-    declarations: [GlobalSearchResultsComponent],
     imports: [
       FormsModule,
       ReactiveFormsModule,
@@ -46,6 +45,7 @@ describe('GlobalSearchComponent', () => {
       IxIconComponent,
       A11yModule,
       EmptyComponent,
+      GlobalSearchResultsComponent,
     ],
     providers: [
       mockAuth(),

src/app/modules/global-search/components/global-search/global-search.component.ts

@@ -1,27 +1,33 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { DOCUMENT } from '@angular/common';
 import {
   Component, ChangeDetectionStrategy, OnInit, ViewChild, ElementRef, ChangeDetectorRef,
   Inject,
   AfterViewInit,
   OnDestroy,
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
 import { isEqual } from 'lodash-es';
 import {
   tap, debounceTime, filter, switchMap,
   combineLatestWith,
   distinctUntilChanged,
 } from 'rxjs';
 import { DialogService } from 'app/modules/dialog/dialog.service';
+import { GlobalSearchResultsComponent } from 'app/modules/global-search/components/global-search-results/global-search-results.component';
 import { searchDelayConst } from 'app/modules/global-search/constants/delay.const';
 import { extractVersion } from 'app/modules/global-search/helpers/extract-version';
 import { moveToNextFocusableElement, moveToPreviousFocusableElement } from 'app/modules/global-search/helpers/focus-helper';
 import { UiSearchableElement } from 'app/modules/global-search/interfaces/ui-searchable-element.interface';
 import { GlobalSearchSectionsProvider } from 'app/modules/global-search/services/global-search-sections.service';
 import { UiSearchDirectivesService } from 'app/modules/global-search/services/ui-search-directives.service';
 import { UiSearchProvider } from 'app/modules/global-search/services/ui-search.service';
+import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 import { FocusService } from 'app/services/focus.service';
 import { IxChainedSlideInService } from 'app/services/ix-chained-slide-in.service';
 import { IxSlideInService } from 'app/services/ix-slide-in.service';
@@ -35,6 +41,16 @@ import { waitForSystemInfo } from 'app/store/system-info/system-info.selectors';
   templateUrl: './global-search.component.html',
   styleUrls: ['./global-search.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CdkTrapFocus,
+    IxIconComponent,
+    MatInput,
+    ReactiveFormsModule,
+    TestDirective,
+    GlobalSearchResultsComponent,
+    TranslateModule,
+  ],
 })
 export class GlobalSearchComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;

src/app/modules/layout/admin-layout/admin-layout.component.ts

@@ -31,7 +31,7 @@ import { CopyrightLineComponent } from 'app/modules/layout/copyright-line/copyri
 import { NavigationComponent } from 'app/modules/layout/navigation/navigation.component';
 import { SecondaryMenuComponent } from 'app/modules/layout/secondary-menu/secondary-menu.component';
 import { TopbarComponent } from 'app/modules/layout/topbar/topbar.component';
-import { PageHeaderModule } from 'app/modules/page-header/page-header.module';
+import { DefaultPageHeaderComponent } from 'app/modules/page-header/default-page-header/default-page-header.component';
 import { MapValuePipe } from 'app/modules/pipes/map-value/map-value.pipe';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 import { LanguageService } from 'app/services/language.service';
@@ -63,7 +63,7 @@ import { selectBuildYear, waitForSystemInfo } from 'app/store/system-info/system
     CopyrightLineComponent,
     MatSidenavContent,
     TopbarComponent,
-    PageHeaderModule,
+    DefaultPageHeaderComponent,
     RouterOutlet,
     ConsoleFooterComponent,
     AlertsModule,

src/app/modules/layout/topbar/topbar.component.ts

@@ -19,7 +19,7 @@ import { helptextTopbar } from 'app/helptext/topbar';
 import { AlertSlice, selectImportantUnreadAlertsCount } from 'app/modules/alerts/store/alert.selectors';
 import { UpdateDialogComponent } from 'app/modules/dialog/components/update-dialog/update-dialog.component';
 import { FeedbackDialogComponent } from 'app/modules/feedback/components/feedback-dialog/feedback-dialog.component';
-import { GlobalSearchModule } from 'app/modules/global-search/global-search.module';
+import { GlobalSearchTriggerComponent } from 'app/modules/global-search/components/global-search-trigger/global-search-trigger.component';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { selectUpdateJob } from 'app/modules/jobs/store/job.selectors';
 import { CheckinIndicatorComponent } from 'app/modules/layout/topbar/checkin-indicator/checkin-indicator.component';
@@ -56,7 +56,7 @@ import { alertIndicatorPressed, sidenavIndicatorPressed } from 'app/store/topbar
     MatIconButton,
     MatTooltip,
     IxIconComponent,
-    GlobalSearchModule,
+    GlobalSearchTriggerComponent,
     RouterLink,
     IxLogoComponent,
     TruecommandModule,

src/app/modules/page-header/breadcrumb/breadcrumb.component.ts

@@ -1,10 +1,12 @@
 import {
   ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit,
 } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
+import { Router, NavigationEnd, RouterLink } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
 import { uniqBy } from 'lodash-es';
 import { filter } from 'rxjs/operators';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 import { RoutePartsService, RoutePart } from 'app/services/route-parts/route-parts.service';
 
 // TODO: Bad. Redo.
@@ -16,6 +18,12 @@ const noLinksRoutes = ['/credentials', '/reportsdashboard', '/system'];
   templateUrl: './breadcrumb.component.html',
   styleUrls: ['./breadcrumb.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    RouterLink,
+    TestDirective,
+    TranslateModule,
+  ],
 })
 export class BreadcrumbComponent implements OnInit {
   breadcrumbs: RoutePart[];

src/app/modules/page-header/default-page-header/default-page-header.component.ts

@@ -1,4 +1,6 @@
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
 import { LayoutService } from 'app/services/layout.service';
 
 @Component({
@@ -9,6 +11,8 @@ import { LayoutService } from 'app/services/layout.service';
     }
     `,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PageHeaderComponent, AsyncPipe],
 })
 export class DefaultPageHeaderComponent {
   readonly hasCustomPageHeader$ = this.layoutService.hasCustomPageHeader$;

src/app/modules/page-header/is-new-indicator/new-page-badge.component.ts

@@ -1,12 +1,23 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatButton } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { IfNightlyDirective } from 'app/directives/if-nightly/if-nightly.directive';
 import { FeedbackDialogComponent } from 'app/modules/feedback/components/feedback-dialog/feedback-dialog.component';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 
 @Component({
   selector: 'ix-new-page-badge',
   templateUrl: './new-page-badge.component.html',
   styleUrls: ['./new-page-badge.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IfNightlyDirective,
+    MatButton,
+    TestDirective,
+    TranslateModule,
+  ],
 })
 export class NewPageBadgeComponent {
   constructor(private matDialog: MatDialog) {}