NIFI-14235: Additional updates following Angular 19 upgrade (#9693)

* NIFI-14235: Additional updates following the Angular 19 upgrade. * NIFI-14235: Disabling the prefer standalone rule. - Fixing lint issue. * NIFI-14235: Fixing additional warnings following the Angular 19 upgrade. This closes #9693
apache · Feb 5, 2025 · afa0392 · afa0392
1 parent ae5a77b
commit afa0392
Show file tree

Hide file tree

Showing 74 changed files with 186 additions and 378 deletions.
diff --git a/nifi-frontend/src/main/frontend/.eslintrc.json b/nifi-frontend/src/main/frontend/.eslintrc.json
@@ -27,7 +27,7 @@
                         "suffixes": [""]
                     }
                 ],
-                "@angular-eslint/prefer-standalone": "warn"
+                "@angular-eslint/prefer-standalone": "off"
             }
         },
         {

diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/.eslintrc.json b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/.eslintrc.json
@@ -39,7 +39,7 @@
                 "@typescript-eslint/no-this-alias": "warn",
                 "@typescript-eslint/no-unused-vars": "warn",
                 "no-useless-escape": "off",
-                "@angular-eslint/prefer-standalone": "warn"
+                "@angular-eslint/prefer-standalone": "off"
             }
         }
     ]

diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss
@@ -27,8 +27,8 @@
 @use 'codemirror/lib/codemirror.css';
 @use 'codemirror/addon/lint/lint.css';
 
-@import 'font-awesome';
-@import 'libs/shared/src/assets/themes/material';
+@use 'font-awesome';
+@use 'libs/shared/src/assets/themes/material';
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
@@ -45,19 +45,19 @@
 @include listing-table.styles();
 
 html {
-    @include mat.typography-hierarchy($m3-light-theme);
-    @include mat.all-component-themes($m3-light-theme);
-    @include app.generate-material-theme($m3-light-theme, $m3-light-theme-config);
-    @include codemirror-theme.generate-codemirror-theme($m3-light-theme, $m3-light-theme-config);
-    @include listing-table.generate-theme($m3-light-theme, $m3-light-theme-config);
-    @include jolt-transform-json-ui.generate-theme($m3-light-theme, $m3-light-theme-config);
+    @include mat.typography-hierarchy(material.$m3-light-theme);
+    @include mat.all-component-themes(material.$m3-light-theme);
+    @include app.generate-material-theme(material.$m3-light-theme, material.$m3-light-theme-config);
+    @include codemirror-theme.generate-codemirror-theme(material.$m3-light-theme, material.$m3-light-theme-config);
+    @include listing-table.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
+    @include jolt-transform-json-ui.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
 
     .dark-theme {
         //@include mat.typography-hierarchy($m3-dark-theme);
-        @include mat.all-component-colors($m3-dark-theme);
-        @include app.generate-material-theme($m3-dark-theme, $m3-dark-theme-config);
-        @include codemirror-theme.generate-codemirror-theme($m3-dark-theme, $m3-dark-theme-config);
-        @include listing-table.generate-theme($m3-dark-theme, $m3-dark-theme-config);
-        @include jolt-transform-json-ui.generate-theme($m3-dark-theme, $m3-dark-theme-config);
+        @include mat.all-component-colors(material.$m3-dark-theme);
+        @include app.generate-material-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+        @include codemirror-theme.generate-codemirror-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+        @include listing-table.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+        @include jolt-transform-json-ui.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/.eslintrc.json b/nifi-frontend/src/main/frontend/apps/nifi/.eslintrc.json
@@ -39,7 +39,7 @@
                 "@typescript-eslint/no-this-alias": "warn",
                 "@typescript-eslint/no-unused-vars": "warn",
                 "no-useless-escape": "off",
-                "@angular-eslint/prefer-standalone": "warn"
+                "@angular-eslint/prefer-standalone": "off"
             }
         }
     ]

diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts
@@ -47,7 +47,7 @@ import { FlowConfigurationEffects } from './state/flow-configuration/flow-config
 import { ComponentStateEffects } from './state/component-state/component-state.effects';
 import { ErrorEffects } from './state/error/error.effects';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { CopyButtonComponent, PipesModule } from '@nifi/shared';
+import { CopyButtonComponent } from '@nifi/shared';
 import { DocumentationEffects } from './state/documentation/documentation.effects';
 import { ClusterSummaryEffects } from './state/cluster-summary/cluster-summary.effects';
 import { PropertyVerificationEffects } from './state/property-verification/property-verification.effects';
@@ -109,8 +109,7 @@ export const customTooltipDefaults: MatTooltipDefaultOptions = {
         MatProgressSpinnerModule,
         MatNativeDateModule,
         MatDialogModule,
-        MatSnackBarModule,
-        PipesModule
+        MatSnackBarModule
     ],
     providers: [
         disableAnimations === 'true' ? provideNoopAnimations() : provideAnimations(),

diff --git a/...d/apps/nifi/src/app/pages/cluster/ui/cluster-jvm-listing/cluster-jvm-listing.component.ts b/...d/apps/nifi/src/app/pages/cluster/ui/cluster-jvm-listing/cluster-jvm-listing.component.ts
@@ -16,7 +16,6 @@
  */
 
 import { Component } from '@angular/core';
-import { ClusterSystemTable } from '../cluster-system-listing/cluster-system-table/cluster-system-table.component';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { ClusterJvmTable } from './cluster-jvm-table/cluster-jvm-table.component';
 import {
@@ -33,7 +32,7 @@ import { clearJvmNodeSelection, selectJvmNode } from '../../state/cluster-listin
 
 @Component({
     selector: 'cluster-jvm-listing',
-    imports: [ClusterSystemTable, NgxSkeletonLoaderModule, ClusterJvmTable],
+    imports: [NgxSkeletonLoaderModule, ClusterJvmTable],
     templateUrl: './cluster-jvm-listing.component.html',
     styleUrl: './cluster-jvm-listing.component.scss'
 })

diff --git a/.../nifi/src/app/pages/cluster/ui/cluster-system-listing/cluster-system-listing.component.ts b/.../nifi/src/app/pages/cluster/ui/cluster-system-listing/cluster-system-listing.component.ts
@@ -28,12 +28,11 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { selectSystemNodeSnapshots } from '../../../../state/system-diagnostics/system-diagnostics.selectors';
 import { ClusterSystemTable } from './cluster-system-table/cluster-system-table.component';
 import { clearSystemNodeSelection, selectSystemNode } from '../../state/cluster-listing/cluster-listing.actions';
-import { ClusterNodeTable } from '../cluster-node-listing/cluster-node-table/cluster-node-table.component';
 import { NodeSnapshot } from '../../../../state/system-diagnostics';
 
 @Component({
     selector: 'cluster-system-listing',
-    imports: [NgxSkeletonLoaderModule, ClusterSystemTable, ClusterNodeTable],
+    imports: [NgxSkeletonLoaderModule, ClusterSystemTable],
     templateUrl: './cluster-system-listing.component.html',
     styleUrl: './cluster-system-listing.component.scss'
 })

diff --git a/...ifi/src/app/pages/cluster/ui/cluster-version-listing/cluster-version-listing.component.ts b/...ifi/src/app/pages/cluster/ui/cluster-version-listing/cluster-version-listing.component.ts
@@ -27,13 +27,12 @@ import { NiFiState } from '../../../../state';
 import { initialClusterState } from '../../state/cluster-listing/cluster-listing.reducer';
 import { NodeSnapshot } from '../../../../state/system-diagnostics';
 import { clearVersionsNodeSelection, selectVersionNode } from '../../state/cluster-listing/cluster-listing.actions';
-import { ClusterSystemTable } from '../cluster-system-listing/cluster-system-table/cluster-system-table.component';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { ClusterVersionTable } from './cluster-version-table/cluster-version-table.component';
 
 @Component({
     selector: 'cluster-version-listing',
-    imports: [ClusterSystemTable, NgxSkeletonLoaderModule, ClusterVersionTable],
+    imports: [NgxSkeletonLoaderModule, ClusterVersionTable],
     templateUrl: './cluster-version-listing.component.html',
     styleUrl: './cluster-version-listing.component.scss'
 })

diff --git a/...fi/src/app/pages/cluster/ui/common/cluster-table-filter/cluster-table-filter.component.ts b/...fi/src/app/pages/cluster/ui/common/cluster-table-filter/cluster-table-filter.component.ts
@@ -16,7 +16,6 @@
  */
 
 import { AfterViewInit, Component, DestroyRef, EventEmitter, inject, Input, Output } from '@angular/core';
-import { MatCheckbox } from '@angular/material/checkbox';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatOption } from '@angular/material/autocomplete';
@@ -41,7 +40,7 @@ export interface ClusterTableFilterContext extends ClusterTableFilterArgs {
 
 @Component({
     selector: 'cluster-table-filter',
-    imports: [MatCheckbox, MatFormField, MatInput, MatLabel, MatOption, MatSelect, ReactiveFormsModule],
+    imports: [MatFormField, MatInput, MatLabel, MatOption, MatSelect, ReactiveFormsModule],
     templateUrl: './cluster-table-filter.component.html',
     styleUrl: './cluster-table-filter.component.scss'
 })

diff --git a/.../src/app/pages/documentation/ui/common/additional-details/additional-details.component.ts b/.../src/app/pages/documentation/ui/common/additional-details/additional-details.component.ts
@@ -17,8 +17,7 @@
 
 import { AfterViewChecked, Component, Input, OnDestroy, viewChild } from '@angular/core';
 import { ConfigurableExtensionDefinition } from '../../../state';
-import { MatAccordion, MatExpansionModule, MatExpansionPanel } from '@angular/material/expansion';
-import { MatIconButton } from '@angular/material/button';
+import { MatExpansionModule, MatExpansionPanel } from '@angular/material/expansion';
 import { NiFiState } from '../../../../../state';
 import { Store } from '@ngrx/store';
 import {
@@ -32,7 +31,7 @@ import { MarkdownComponent } from 'ngx-markdown';
 
 @Component({
     selector: 'additional-details',
-    imports: [MatAccordion, MatExpansionModule, MatIconButton, NgxSkeletonLoaderModule, MarkdownComponent],
+    imports: [MatExpansionModule, NgxSkeletonLoaderModule, MarkdownComponent],
     templateUrl: './additional-details.component.html',
     styleUrl: './additional-details.component.scss'
 })

diff --git a/...es/documentation/ui/common/multi-processor-use-case/multi-processor-use-case.component.ts b/...es/documentation/ui/common/multi-processor-use-case/multi-processor-use-case.component.ts
@@ -27,12 +27,11 @@ import { selectProcessorFromType } from '../../../../../state/extension-types/ex
 import { RouterLink } from '@angular/router';
 import { MultiProcessorUseCase } from '../../../state/processor-definition';
 import { MatIconButton } from '@angular/material/button';
-import { InputRequirementComponent } from '../input-requirement/input-requirement.component';
 
 @Component({
     selector: 'multi-processor-use-case',
     templateUrl: './multi-processor-use-case.component.html',
-    imports: [MatAccordion, MatExpansionModule, MatIconButton, InputRequirementComponent, AsyncPipe, RouterLink],
+    imports: [MatAccordion, MatExpansionModule, MatIconButton, AsyncPipe, RouterLink],
     styleUrl: './multi-processor-use-case.component.scss'
 })
 export class MultiProcessorUseCaseComponent {

diff --git a/...rc/app/pages/documentation/ui/common/property-definition/property-definition.component.ts b/...rc/app/pages/documentation/ui/common/property-definition/property-definition.component.ts
@@ -28,25 +28,16 @@ import {
 import { MatTableModule } from '@angular/material/table';
 import { AllowableValue, DocumentedType } from '../../../../../state/shared';
 import { Observable } from 'rxjs';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { MatAccordion, MatExpansionModule } from '@angular/material/expansion';
+import { AsyncPipe } from '@angular/common';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { NiFiState } from '../../../../../state';
 import { Store } from '@ngrx/store';
 import { selectServiceImplementations } from '../../../../../state/extension-types/extension-types.selectors';
 import { RouterLink } from '@angular/router';
 
 @Component({
     selector: 'property-definition',
-    imports: [
-        NgxSkeletonLoaderModule,
-        MatTableModule,
-        NifiTooltipDirective,
-        AsyncPipe,
-        MatAccordion,
-        MatExpansionModule,
-        NgTemplateOutlet,
-        RouterLink
-    ],
+    imports: [NgxSkeletonLoaderModule, MatTableModule, NifiTooltipDirective, AsyncPipe, MatExpansionModule, RouterLink],
     templateUrl: './property-definition.component.html',
     styleUrl: './property-definition.component.scss'
 })

diff --git a/...n/frontend/apps/nifi/src/app/pages/documentation/ui/common/see-also/see-also.component.ts b/...n/frontend/apps/nifi/src/app/pages/documentation/ui/common/see-also/see-also.component.ts
@@ -16,9 +16,9 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { ComponentType, NiFiCommon, NifiTooltipDirective, TextTip } from '@nifi/shared';
+import { ComponentType, NiFiCommon, TextTip } from '@nifi/shared';
 import { Observable } from 'rxjs';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { NiFiState } from '../../../../../state';
 import { Store } from '@ngrx/store';
 import { selectExtensionFromTypes } from '../../../../../state/extension-types/extension-types.selectors';
@@ -30,7 +30,7 @@ import { DocumentedType } from '../../../../../state/shared';
 @Component({
     selector: 'see-also',
     templateUrl: './see-also.component.html',
-    imports: [RouterLink, NifiTooltipDirective, AsyncPipe, NgTemplateOutlet],
+    imports: [RouterLink, AsyncPipe],
     styleUrl: './see-also.component.scss'
 })
 export class SeeAlsoComponent {

diff --git a/...n/frontend/apps/nifi/src/app/pages/documentation/ui/common/use-case/use-case.component.ts b/...n/frontend/apps/nifi/src/app/pages/documentation/ui/common/use-case/use-case.component.ts
@@ -19,13 +19,12 @@ import { Component, Input, viewChild } from '@angular/core';
 import { MatAccordion, MatExpansionModule } from '@angular/material/expansion';
 import { InputRequirement, UseCase } from '../../../state/processor-definition';
 import { MatIconButton } from '@angular/material/button';
-import { PropertyDefinitionComponent } from '../property-definition/property-definition.component';
 import { InputRequirementComponent } from '../input-requirement/input-requirement.component';
 
 @Component({
     selector: 'use-case',
     templateUrl: './use-case.component.html',
-    imports: [MatAccordion, MatExpansionModule, MatIconButton, PropertyDefinitionComponent, InputRequirementComponent],
+    imports: [MatAccordion, MatExpansionModule, MatIconButton, InputRequirementComponent],
     styleUrl: './use-case.component.scss'
 })
 export class UseCaseComponent {

diff --git a/...-history/ui/flow-configuration-history-listing/action-details/action-details.component.ts b/...-history/ui/flow-configuration-history-listing/action-details/action-details.component.ts
@@ -28,12 +28,12 @@ import {
     PurgeActionDetails,
     RemoteProcessGroupDetails
 } from '../../../state/flow-configuration-history-listing';
-import { PipesModule, CloseOnEscapeDialog, CopyDirective } from '@nifi/shared';
+import { CloseOnEscapeDialog, CopyDirective } from '@nifi/shared';
 import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'action-details',
-    imports: [CommonModule, MatDialogModule, PipesModule, MatButtonModule, CopyDirective],
+    imports: [CommonModule, MatDialogModule, MatButtonModule, CopyDirective],
     templateUrl: './action-details.component.html',
     styleUrls: ['./action-details.component.scss']
 })

diff --git a/...rc/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.ts b/...rc/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.ts
@@ -26,12 +26,11 @@ import {
 } from '@angular/material/dialog';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
-import { NifiSpinnerDirective } from '../../../../../ui/common/spinner/nifi-spinner.directive';
 import { ChangeColorRequest } from '../../../state/flow';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { CanvasUtils } from '../../../service/canvas-utils.service';
-import { ComponentType, NiFiCommon, ComponentTypeNamePipe, ComponentContext, CloseOnEscapeDialog } from '@nifi/shared';
+import { ComponentType, NiFiCommon, CloseOnEscapeDialog } from '@nifi/shared';
 import { MatCheckbox } from '@angular/material/checkbox';
 
 @Component({
@@ -44,12 +43,9 @@ import { MatCheckbox } from '@angular/material/checkbox';
         MatButton,
         MatDialogActions,
         MatDialogClose,
-        NifiSpinnerDirective,
         MatFormField,
         MatLabel,
         MatInput,
-        ComponentContext,
-        ComponentTypeNamePipe,
         MatCheckbox
     ],
     templateUrl: './change-color-dialog.component.html',

diff --git a/.../main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.ts b/.../main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.ts
@@ -31,9 +31,8 @@ import { LoadingService } from '../../../../../service/loading.service';
 import { NewCanvasItem } from './new-canvas-item/new-canvas-item.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
-import { AsyncPipe, NgOptimizedImage } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { MatDividerModule } from '@angular/material/divider';
-import { RouterLink } from '@angular/router';
 import { FlowStatus } from './flow-status/flow-status.component';
 import { Navigation } from '../../../../../ui/common/navigation/navigation.component';
 import { selectClusterSummary } from '../../../../../state/cluster-summary/cluster-summary.selectors';
@@ -42,17 +41,7 @@ import { selectFlowAnalysisState } from '../../../state/flow-analysis/flow-analy
 @Component({
     selector: 'fd-header',
     templateUrl: './header.component.html',
-    imports: [
-        NewCanvasItem,
-        MatButtonModule,
-        MatMenuModule,
-        AsyncPipe,
-        MatDividerModule,
-        RouterLink,
-        FlowStatus,
-        NgOptimizedImage,
-        Navigation
-    ],
+    imports: [NewCanvasItem, MatButtonModule, MatMenuModule, AsyncPipe, MatDividerModule, FlowStatus, Navigation],
     styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent {

diff --git a/...flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.ts b/...flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.ts
@@ -24,7 +24,6 @@ import {
     SelectedComponent
 } from '../../../../../state/flow';
 import { Store } from '@ngrx/store';
-import { ExtensionCreation } from '../../../../../../../ui/common/extension-creation/extension-creation.component';
 import { selectBreadcrumbs, selectSaving } from '../../../../../state/flow/flow.selectors';
 import { AsyncPipe } from '@angular/common';
 import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -55,14 +54,12 @@ import { DestinationRemoteProcessGroup } from '../destination/destination-remote
 import { BreadcrumbEntity } from '../../../../../state/shared';
 import { ClusterConnectionService } from '../../../../../../../service/cluster-connection.service';
 import { CanvasUtils } from '../../../../../service/canvas-utils.service';
-import { ErrorBanner } from '../../../../../../../ui/common/error-banner/error-banner.component';
 import { ErrorContextKey } from '../../../../../../../state/error';
 import { ContextErrorBanner } from '../../../../../../../ui/common/context-error-banner/context-error-banner.component';
 
 @Component({
     selector: 'create-connection',
     imports: [
-        ExtensionCreation,
         AsyncPipe,
         FormsModule,
         MatButtonModule,
@@ -86,7 +83,6 @@ import { ContextErrorBanner } from '../../../../../../../ui/common/context-error
         DestinationProcessGroup,
         SourceRemoteProcessGroup,
         DestinationRemoteProcessGroup,
-        ErrorBanner,
         ContextErrorBanner
     ],
     templateUrl: './create-connection.component.html',

diff --git a/...ges/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.ts b/...ges/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.ts
@@ -23,7 +23,6 @@ import {
     loadBalanceStrategies
 } from '../../../../../state/flow';
 import { Store } from '@ngrx/store';
-import { ExtensionCreation } from '../../../../../../../ui/common/extension-creation/extension-creation.component';
 import { selectBreadcrumbs, selectSaving } from '../../../../../state/flow/flow.selectors';
 import { AsyncPipe } from '@angular/common';
 import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -53,15 +52,13 @@ import { DestinationProcessGroup } from '../destination/destination-process-grou
 import { SourceRemoteProcessGroup } from '../source/source-remote-process-group/source-remote-process-group.component';
 import { DestinationRemoteProcessGroup } from '../destination/destination-remote-process-group/destination-remote-process-group.component';
 import { BreadcrumbEntity } from '../../../../../state/shared';
-import { ErrorBanner } from '../../../../../../../ui/common/error-banner/error-banner.component';
 import { TabbedDialog } from '../../../../../../../ui/common/tabbed-dialog/tabbed-dialog.component';
 import { ErrorContextKey } from '../../../../../../../state/error';
 import { ContextErrorBanner } from '../../../../../../../ui/common/context-error-banner/context-error-banner.component';
 
 @Component({
     selector: 'edit-connection',
     imports: [
-        ExtensionCreation,
         AsyncPipe,
         FormsModule,
         MatButtonModule,
@@ -85,7 +82,6 @@ import { ContextErrorBanner } from '../../../../../../../ui/common/context-error
         DestinationProcessGroup,
         SourceRemoteProcessGroup,
         DestinationRemoteProcessGroup,
-        ErrorBanner,
         ContextErrorBanner,
         CopyDirective
     ],
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ @@
                             "suffixes": [""]
                         }
                     ],
-                    "@angular-eslint/prefer-standalone": "warn"
+                    "@angular-eslint/prefer-standalone": "off"
                 }
             },
             {
@@ Expand Down @@