[NIFI-14263] - UI - Migrate components to standalone (#9719)

nifi-frontend/src/main/frontend/apps/nifi/src/app/app-routing.module.ts

@@ -21,6 +21,8 @@ import { authenticationGuard } from './service/guard/authentication.guard';
 import { RouteNotFound } from './pages/route-not-found/feature/route-not-found.component';
 import { checkLoginConfiguration } from './service/guard/login-configuration.guard';
 import { LoginConfiguration } from './state/login-configuration';
+import { Error } from './pages/error/feature/error.component';
+import { Logout } from './pages/logout/feature/logout.component';
 
 const routes: Routes = [
     {
@@ -32,17 +34,15 @@ const routes: Routes = [
     },
     {
         path: 'logout-complete',
-        loadChildren: () => import('./pages/logout/feature/logout.module').then((m) => m.LogoutModule)
+        loadComponent: () => Logout
     },
     {
         path: 'error',
-        loadChildren: () => import('./pages/error/feature/error.module').then((m) => m.ErrorModule)
+        loadComponent: () => Error
     },
     {
         path: '404',
-        component: RouteNotFound,
-        loadChildren: () =>
-            import('./pages/route-not-found/feature/route-not-found.module').then((m) => m.RouteNotFoundModule)
+        component: RouteNotFound
     },
     {
         path: 'documentation',
@@ -126,9 +126,7 @@ const routes: Routes = [
     },
     {
         path: '**',
-        component: RouteNotFound,
-        loadChildren: () =>
-            import('./pages/route-not-found/feature/route-not-found.module').then((m) => m.RouteNotFoundModule)
+        component: RouteNotFound
     }
 ];
 

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/bulletins/feature/bulletins.module.ts

@@ -23,7 +23,6 @@ import { bulletinsFeatureKey, reducers } from '../state';
 import { EffectsModule } from '@ngrx/effects';
 import { BulletinBoardEffects } from '../state/bulletin-board/bulletin-board.effects';
 import { BulletinsRoutingModule } from './bulletins-routing.module';
-import { CounterListingModule } from '../../counters/ui/counter-listing/counter-listing.module';
 import { BulletinBoard } from '../ui/bulletin-board/bulletin-board.component';
 import { Navigation } from '../../../ui/common/navigation/navigation.component';
 import { BannerText } from '../../../ui/common/banner-text/banner-text.component';
@@ -36,7 +35,6 @@ import { BannerText } from '../../../ui/common/banner-text/banner-text.component
         BulletinsRoutingModule,
         StoreModule.forFeature(bulletinsFeatureKey, reducers),
         EffectsModule.forFeature(BulletinBoardEffects),
-        CounterListingModule,
         BulletinBoard,
         Navigation,
         BannerText

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/counters/feature/counters.module.ts

@@ -23,10 +23,10 @@ import { StoreModule } from '@ngrx/store';
 import { countersFeatureKey, reducers } from '../state';
 import { EffectsModule } from '@ngrx/effects';
 import { CounterListingEffects } from '../state/counter-listing/counter-listing.effects';
-import { CounterListingModule } from '../ui/counter-listing/counter-listing.module';
 import { MatDialogModule } from '@angular/material/dialog';
 import { Navigation } from '../../../ui/common/navigation/navigation.component';
 import { BannerText } from '../../../ui/common/banner-text/banner-text.component';
+import { CounterListing } from '../ui/counter-listing/counter-listing.component';
 
 @NgModule({
     declarations: [Counters],
@@ -36,7 +36,7 @@ import { BannerText } from '../../../ui/common/banner-text/banner-text.component
         CountersRoutingModule,
         StoreModule.forFeature(countersFeatureKey, reducers),
         EffectsModule.forFeature(CounterListingEffects),
-        CounterListingModule,
+        CounterListing,
         MatDialogModule,
         Navigation,
         BannerText

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.spec.ts

@@ -26,7 +26,7 @@ describe('CounterListing', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [CounterListing],
+            imports: [CounterListing],
             providers: [provideMockStore({ initialState })]
         });
         fixture = TestBed.createComponent(CounterListing);

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.ts

@@ -22,12 +22,16 @@ import { loadCounters, promptCounterReset } from '../../state/counter-listing/co
 import { selectCounterListingState } from '../../state/counter-listing/counter-listing.selectors';
 import { initialState } from '../../state/counter-listing/counter-listing.reducer';
 import { selectCurrentUser } from '../../../../state/current-user/current-user.selectors';
+import { AsyncPipe } from '@angular/common';
+import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
+import { MatIconButton } from '@angular/material/button';
+import { CounterTable } from './counter-table/counter-table.component';
 
 @Component({
     selector: 'counter-listing',
     templateUrl: './counter-listing.component.html',
-    styleUrls: ['./counter-listing.component.scss'],
-    standalone: false
+    imports: [CounterTable, AsyncPipe, NgxSkeletonLoaderComponent, MatIconButton],
+    styleUrls: ['./counter-listing.component.scss']
 })
 export class CounterListing implements OnInit {
     counterListingState$ = this.store.select(selectCounterListingState);

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.spec.ts

@@ -18,11 +18,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CounterTable } from './counter-table.component';
-import { MatTableModule } from '@angular/material/table';
-import { MatSortModule } from '@angular/material/sort';
-import { MatInputModule } from '@angular/material/input';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatSelectModule } from '@angular/material/select';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('CounterTable', () => {
@@ -31,15 +26,7 @@ describe('CounterTable', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [CounterTable],
-            imports: [
-                MatTableModule,
-                MatSortModule,
-                MatInputModule,
-                ReactiveFormsModule,
-                MatSelectModule,
-                NoopAnimationsModule
-            ]
+            imports: [CounterTable, NoopAnimationsModule]
         });
         fixture = TestBed.createComponent(CounterTable);
         component = fixture.componentInstance;

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.ts

@@ -17,18 +17,30 @@
 
 import { AfterViewInit, Component, DestroyRef, EventEmitter, inject, Input, Output } from '@angular/core';
 import { CounterEntity } from '../../../state/counter-listing';
-import { MatTableDataSource } from '@angular/material/table';
-import { Sort } from '@angular/material/sort';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatSortModule, Sort } from '@angular/material/sort';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { debounceTime } from 'rxjs';
 import { NiFiCommon } from '@nifi/shared';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatFormField } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatLabel, MatOption, MatSelect } from '@angular/material/select';
 
 @Component({
     selector: 'counter-table',
     templateUrl: './counter-table.component.html',
-    styleUrls: ['./counter-table.component.scss'],
-    standalone: false
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        MatInput,
+        MatSelect,
+        MatOption,
+        MatLabel,
+        MatTableModule,
+        MatSortModule
+    ],
+    styleUrls: ['./counter-table.component.scss']
 })
 export class CounterTable implements AfterViewInit {
     private _canModifyCounters = false;

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/error/feature/error.component.spec.ts

@@ -30,8 +30,7 @@ describe('Error', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [Error],
-            imports: [MockComponent(PageContent)],
+            imports: [Error, MockComponent(PageContent)],
             providers: [
                 provideMockStore({
                     initialState: {

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/error/feature/error.component.ts

@@ -20,12 +20,14 @@ import { Store } from '@ngrx/store';
 import { selectFullScreenError } from '../../../state/error/error.selectors';
 import { NiFiState } from '../../../state';
 import { resetErrorState } from '../../../state/error/error.actions';
+import { AsyncPipe } from '@angular/common';
+import { PageContent } from '../../../ui/common/page-content/page-content.component';
 
 @Component({
     selector: 'error',
     templateUrl: './error.component.html',
-    styleUrls: ['./error.component.scss'],
-    standalone: false
+    imports: [AsyncPipe, PageContent],
+    styleUrls: ['./error.component.scss']
 })
 export class Error implements OnDestroy {
     errorDetail$ = this.store.select(selectFullScreenError);

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/feature/flow-designer.module.ts

@@ -23,7 +23,6 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { FlowEffects } from '../state/flow/flow.effects';
 import { TransformEffects } from '../state/transform/transform.effects';
-import { VersionControlTip } from '../ui/common/tooltips/version-control-tip/version-control-tip.component';
 import { canvasFeatureKey, reducers } from '../state';
 import { MatDialogModule } from '@angular/material/dialog';
 import { ControllerServicesEffects } from '../state/controller-services/controller-services.effects';
@@ -33,7 +32,7 @@ import { BannerText } from '../../../ui/common/banner-text/banner-text.component
 import { FlowAnalysisEffects } from '../state/flow-analysis/flow-analysis.effects';
 
 @NgModule({
-    declarations: [FlowDesigner, VersionControlTip],
+    declarations: [FlowDesigner],
     exports: [FlowDesigner],
     imports: [
         CommonModule,

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/tooltips/version-control-tip/version-control-tip.component.spec.ts

@@ -25,7 +25,7 @@ describe('VersionControlTip', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [VersionControlTip]
+            imports: [VersionControlTip]
         });
         fixture = TestBed.createComponent(VersionControlTip);
         component = fixture.componentInstance;

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/tooltips/version-control-tip/version-control-tip.component.ts

@@ -22,8 +22,7 @@ import { RegistryClientEntity } from '../../../../../../state/shared';
 @Component({
     selector: 'version-control-tip',
     templateUrl: './version-control-tip.component.html',
-    styleUrls: ['./version-control-tip.component.scss'],
-    standalone: false
+    styleUrls: ['./version-control-tip.component.scss']
 })
 export class VersionControlTip {
     @Input() left = 0;

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/feature/login.module.ts

@@ -33,7 +33,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @NgModule({
-    declarations: [Login, LoginForm],
+    declarations: [Login],
     exports: [Login],
     imports: [
         CommonModule,
@@ -47,7 +47,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
         MatButtonModule,
         NgxSkeletonLoaderModule,
         MatProgressSpinnerModule,
-        PageContent
+        PageContent,
+        LoginForm
     ]
 })
 export class LoginModule {}

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/ui/login-form/login-form.component.spec.ts

@@ -35,8 +35,8 @@ describe('LoginForm', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [LoginForm],
             imports: [
+                LoginForm,
                 HttpClientTestingModule,
                 NoopAnimationsModule,
                 MatFormFieldModule,

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/ui/login-form/login-form.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { login } from '../../state/access/access.actions';
 import { selectLoginFailure } from '../../state/access/access.selectors';
@@ -25,12 +25,16 @@ import { selectLogoutSupported } from '../../../../state/current-user/current-us
 import { NiFiState } from '../../../../state';
 import { setRoutedToFullScreenError } from '../../../../state/error/error.actions';
 import { logout } from '../../../../state/current-user/current-user.actions';
+import { RouterLink } from '@angular/router';
+import { MatFormField } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatLabel } from '@angular/material/select';
 
 @Component({
     selector: 'login-form',
     templateUrl: './login-form.component.html',
-    styleUrls: ['./login-form.component.scss'],
-    standalone: false
+    imports: [RouterLink, ReactiveFormsModule, MatFormField, MatInput, MatLabel],
+    styleUrls: ['./login-form.component.scss']
 })
 export class LoginForm {
     logoutSupported = this.store.selectSignal(selectLogoutSupported);