[NIFI-13241] - extend CloseOnEscpaeDialog in dialogs previously missing it (#8833)

* [NIFI-13241] - extend CloseOnEscpaeDialog in dialogs previously missing it

* extend CloseOnEscapeDialog in a few more instances

This closes #8833

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.ts

@@ -35,6 +35,7 @@ import { ClusterConnectionService } from '../../../../../../../service/cluster-c
 import { MatOption } from '@angular/material/autocomplete';
 import { MatSelect } from '@angular/material/select';
 import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/nifi-tooltip.directive';
+import { CloseOnEscapeDialog } from '../../../../../../../ui/common/close-on-escape-dialog/close-on-escape-dialog.component';
 
 @Component({
     selector: 'edit-label',
@@ -55,7 +56,7 @@ import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/ni
     ],
     styleUrls: ['./edit-label.component.scss']
 })
-export class EditLabel {
+export class EditLabel extends CloseOnEscapeDialog {
     saving$ = this.store.select(selectSaving);
 
     editLabelForm: FormGroup;
@@ -75,6 +76,7 @@ export class EditLabel {
         private client: Client,
         private clusterConnectionService: ClusterConnectionService
     ) {
+        super();
         this.readonly = !request.entity.permissions.canWrite;
 
         let fontSize = this.fontSizeOptions[0].value;

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.ts

@@ -34,6 +34,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { NifiSpinnerDirective } from '../../../../../../../ui/common/spinner/nifi-spinner.directive';
 import { TextTip } from '../../../../../../../ui/common/tooltips/text-tip/text-tip.component';
 import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/nifi-tooltip.directive';
+import { CloseOnEscapeDialog } from '../../../../../../../ui/common/close-on-escape-dialog/close-on-escape-dialog.component';
 
 @Component({
     selector: 'create-port',
@@ -53,7 +54,7 @@ import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/ni
     templateUrl: './create-port.component.html',
     styleUrls: ['./create-port.component.scss']
 })
-export class CreatePort {
+export class CreatePort extends CloseOnEscapeDialog {
     saving$ = this.store.select(selectSaving);
 
     protected readonly TextTip = TextTip;
@@ -80,6 +81,7 @@ export class CreatePort {
         private formBuilder: FormBuilder,
         private store: Store<CanvasState>
     ) {
+        super();
         // set the port type name
         if (ComponentType.InputPort == this.request.type) {
             this.portTypeLabel = 'Input Port';

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.ts

@@ -35,6 +35,7 @@ import { ClusterConnectionService } from '../../../../../../../service/cluster-c
 import { CanvasUtils } from '../../../../../service/canvas-utils.service';
 import { TextTip } from '../../../../../../../ui/common/tooltips/text-tip/text-tip.component';
 import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/nifi-tooltip.directive';
+import { CloseOnEscapeDialog } from '../../../../../../../ui/common/close-on-escape-dialog/close-on-escape-dialog.component';
 
 @Component({
     selector: 'edit-port',
@@ -53,7 +54,7 @@ import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/ni
     ],
     styleUrls: ['./edit-port.component.scss']
 })
-export class EditPort {
+export class EditPort extends CloseOnEscapeDialog {
     saving$ = this.store.select(selectSaving);
 
     editPortForm: FormGroup;
@@ -68,6 +69,7 @@ export class EditPort {
         private client: Client,
         private clusterConnectionService: ClusterConnectionService
     ) {
+        super();
         this.readonly =
             !request.entity.permissions.canWrite || !this.canvasUtils.runnableSupportsModification(request.entity);
 

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.ts

@@ -36,6 +36,7 @@ import { TextTip } from '../../../../../../../ui/common/tooltips/text-tip/text-t
 import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/nifi-tooltip.directive';
 import { MatIconModule } from '@angular/material/icon';
 import { NiFiCommon } from '../../../../../../../service/nifi-common.service';
+import { CloseOnEscapeDialog } from '../../../../../../../ui/common/close-on-escape-dialog/close-on-escape-dialog.component';
 
 @Component({
     selector: 'create-process-group',
@@ -57,7 +58,7 @@ import { NiFiCommon } from '../../../../../../../service/nifi-common.service';
     templateUrl: './create-process-group.component.html',
     styleUrls: ['./create-process-group.component.scss']
 })
-export class CreateProcessGroup {
+export class CreateProcessGroup extends CloseOnEscapeDialog {
     saving$ = this.store.select(selectSaving);
 
     protected readonly TextTip = TextTip;
@@ -76,6 +77,7 @@ export class CreateProcessGroup {
         private store: Store<CanvasState>,
         private nifiCommon: NiFiCommon
     ) {
+        super();
         this.parameterContextsOptions.push({
             text: 'No parameter context',
             value: null

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.ts

@@ -34,6 +34,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { CreateComponentRequest } from '../../../../../state/flow';
 import { TextTip } from '../../../../../../../ui/common/tooltips/text-tip/text-tip.component';
 import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/nifi-tooltip.directive';
+import { CloseOnEscapeDialog } from '../../../../../../../ui/common/close-on-escape-dialog/close-on-escape-dialog.component';
 
 @Component({
     standalone: true,
@@ -54,7 +55,7 @@ import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/ni
     templateUrl: './create-remote-process-group.component.html',
     styleUrls: ['./create-remote-process-group.component.scss']
 })
-export class CreateRemoteProcessGroup {
+export class CreateRemoteProcessGroup extends CloseOnEscapeDialog {
     saving$ = this.store.select(selectSaving);
 
     createRemoteProcessGroupForm: FormGroup;
@@ -64,6 +65,7 @@ export class CreateRemoteProcessGroup {
         private formBuilder: FormBuilder,
         private store: Store<CanvasState>
     ) {
+        super();
         this.createRemoteProcessGroupForm = this.formBuilder.group({
             urls: new FormControl('', Validators.required),
             transportProtocol: new FormControl('RAW', Validators.required),

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.ts

@@ -31,6 +31,7 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
 import { RouterLink } from '@angular/router';
 import { UserAccessPoliciesDialogRequest } from '../../../state/user-listing';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { CloseOnEscapeDialog } from '../../../../../ui/common/close-on-escape-dialog/close-on-escape-dialog.component';
 
 @Component({
     selector: 'user-access-policies',
@@ -48,7 +49,7 @@ import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
     ],
     styleUrls: ['./user-access-policies.component.scss']
 })
-export class UserAccessPolicies {
+export class UserAccessPolicies extends CloseOnEscapeDialog {
     displayedColumns: string[] = ['policy', 'action', 'actions'];
     dataSource: MatTableDataSource<AccessPolicySummaryEntity> = new MatTableDataSource<AccessPolicySummaryEntity>();
     selectedPolicyId: string | null = null;
@@ -62,6 +63,7 @@ export class UserAccessPolicies {
         @Inject(MAT_DIALOG_DATA) public request: UserAccessPoliciesDialogRequest,
         private nifiCommon: NiFiCommon
     ) {
+        super();
         this.dataSource.data = this.sortPolicies(request.accessPolicies, this.sort);
     }
 

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.ts

@@ -30,6 +30,7 @@ import { NifiSpinnerDirective } from '../spinner/nifi-spinner.directive';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { ReactiveFormsModule } from '@angular/forms';
+import { CloseOnEscapeDialog } from '../close-on-escape-dialog/close-on-escape-dialog.component';
 
 @Component({
     selector: 'extension-creation',
@@ -48,7 +49,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     ],
     styleUrls: ['./extension-creation.component.scss']
 })
-export class ExtensionCreation {
+export class ExtensionCreation extends CloseOnEscapeDialog {
     @Input() set documentedTypes(documentedTypes: DocumentedType[]) {
         if (this.selectedType == null && documentedTypes.length > 0) {
             this.selectedType = documentedTypes[0];
@@ -77,7 +78,9 @@ export class ExtensionCreation {
     dataSource: MatTableDataSource<DocumentedType> = new MatTableDataSource<DocumentedType>();
     selectedType: DocumentedType | null = null;
 
-    constructor(private nifiCommon: NiFiCommon) {}
+    constructor(private nifiCommon: NiFiCommon) {
+        super();
+    }
 
     formatType(documentedType: DocumentedType): string {
         if (documentedType) {

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.ts

@@ -53,6 +53,7 @@ import { StatusHistoryChart } from './status-history-chart/status-history-chart.
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ErrorBanner } from '../error-banner/error-banner.component';
 import { clearBannerErrors } from '../../../state/error/error.actions';
+import { CloseOnEscapeDialog } from '../close-on-escape-dialog/close-on-escape-dialog.component';
 
 @Component({
     selector: 'status-history',
@@ -75,7 +76,7 @@ import { clearBannerErrors } from '../../../state/error/error.actions';
     ],
     styleUrls: ['./status-history.component.scss']
 })
-export class StatusHistory implements OnInit, OnDestroy, AfterViewInit {
+export class StatusHistory extends CloseOnEscapeDialog implements OnInit, OnDestroy, AfterViewInit {
     request: StatusHistoryRequest;
     statusHistoryState$ = this.store.select(selectStatusHistoryState);
     componentDetails$ = this.store.select(selectStatusHistoryComponentDetails);
@@ -116,6 +117,7 @@ export class StatusHistory implements OnInit, OnDestroy, AfterViewInit {
         private nifiCommon: NiFiCommon,
         @Inject(MAT_DIALOG_DATA) private dialogRequest: StatusHistoryRequest
     ) {
+        super();
         this.request = dialogRequest;
         this.statusHistoryForm = this.formBuilder.group({
             fieldDescriptor: ''

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.ts

@@ -35,6 +35,7 @@ import { isDefinedAndNotNull } from '../../../state/shared';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { ErrorBanner } from '../error-banner/error-banner.component';
 import { clearBannerErrors } from '../../../state/error/error.actions';
+import { CloseOnEscapeDialog } from '../close-on-escape-dialog/close-on-escape-dialog.component';
 
 @Component({
     selector: 'system-diagnostics-dialog',
@@ -51,7 +52,7 @@ import { clearBannerErrors } from '../../../state/error/error.actions';
     templateUrl: './system-diagnostics-dialog.component.html',
     styleUrls: ['./system-diagnostics-dialog.component.scss']
 })
-export class SystemDiagnosticsDialog implements OnInit, OnDestroy {
+export class SystemDiagnosticsDialog extends CloseOnEscapeDialog implements OnInit, OnDestroy {
     systemDiagnostics$ = this.store.select(selectSystemDiagnostics);
     loadedTimestamp$ = this.store.select(selectSystemDiagnosticsLoadedTimestamp);
     status$ = this.store.select(selectSystemDiagnosticsStatus);
@@ -60,7 +61,9 @@ export class SystemDiagnosticsDialog implements OnInit, OnDestroy {
     constructor(
         private store: Store<SystemDiagnosticsState>,
         private nifiCommon: NiFiCommon
-    ) {}
+    ) {
+        super();
+    }
 
     ngOnInit(): void {
         this.systemDiagnostics$.pipe(isDefinedAndNotNull()).subscribe((diagnostics) => {