NIFI-13960: Using the ExtensionCreation component when adding a Regis…

…try Client to better handle different bundles. (#9494)

This closes #9494

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/state/registry-clients/index.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { DocumentedType, RegistryClientEntity, Revision } from '../../../../state/shared';
+import { Bundle, DocumentedType, RegistryClientEntity, Revision } from '../../../../state/shared';
 
 export const registryClientsFeatureKey = 'registryClients';
 
@@ -34,6 +34,7 @@ export interface CreateRegistryClientRequest {
     component: {
         name: string;
         type: string;
+        bundle: Bundle;
         description?: string;
     };
 }

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/state/registry-clients/registry-clients.effects.ts

@@ -36,7 +36,7 @@ import { PropertyTableHelperService } from '../../../../service/property-table-h
 import * as ErrorActions from '../../../../state/error/error.actions';
 import { ErrorHelper } from '../../../../service/error-helper.service';
 import { HttpErrorResponse } from '@angular/common/http';
-import { LARGE_DIALOG, MEDIUM_DIALOG, SMALL_DIALOG } from 'libs/shared/src';
+import { LARGE_DIALOG, SMALL_DIALOG } from 'libs/shared/src';
 import { BackNavigation } from '../../../../state/navigation';
 import { ErrorContextKey } from '../../../../state/error';
 
@@ -82,7 +82,7 @@ export class RegistryClientsEffects {
                 concatLatestFrom(() => this.store.select(selectRegistryClientTypes)),
                 tap(([, registryClientTypes]) => {
                     const dialogReference = this.dialog.open(CreateRegistryClient, {
-                        ...MEDIUM_DIALOG,
+                        ...LARGE_DIALOG,
                         data: {
                             registryClientTypes
                         }

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/registry-clients/create-registry-client/create-registry-client.component.html

@@ -15,55 +15,8 @@
   ~ limitations under the License.
   -->
 
-<h2 mat-dialog-title>Add Registry Client</h2>
-<form class="create-registry-client-form" [formGroup]="createRegistryClientForm">
-    <mat-dialog-content>
-        <div>
-            <mat-form-field>
-                <mat-label>Name</mat-label>
-                <input matInput formControlName="name" type="text" />
-            </mat-form-field>
-        </div>
-        <div>
-            <mat-form-field>
-                <mat-label>Type</mat-label>
-                <mat-select formControlName="type">
-                    @for (option of request.registryClientTypes; track option) {
-                        @if (option.description) {
-                            <mat-option
-                                [value]="option.type"
-                                nifiTooltip
-                                [tooltipComponentType]="TextTip"
-                                [tooltipInputData]="option.description"
-                                [delayClose]="false">
-                                {{ formatType(option) }}
-                            </mat-option>
-                        } @else {
-                            <mat-option [value]="option.type">
-                                {{ formatType(option) }}
-                            </mat-option>
-                        }
-                    }
-                </mat-select>
-            </mat-form-field>
-        </div>
-        <div>
-            <mat-form-field>
-                <mat-label>Description</mat-label>
-                <textarea matInput formControlName="description" type="text"></textarea>
-            </mat-form-field>
-        </div>
-    </mat-dialog-content>
-    @if ({ value: (saving$ | async)! }; as saving) {
-        <mat-dialog-actions align="end">
-            <button mat-button mat-dialog-close>Cancel</button>
-            <button
-                [disabled]="!createRegistryClientForm.dirty || createRegistryClientForm.invalid || saving.value"
-                type="button"
-                (click)="createRegistryClientClicked()"
-                mat-flat-button>
-                <span *nifiSpinner="saving.value">Apply</span>
-            </button>
-        </mat-dialog-actions>
-    }
-</form>
+<extension-creation
+    [componentType]="'Registry Client'"
+    [documentedTypes]="registryClientTypes"
+    [saving]="(saving$ | async)!"
+    (extensionTypeSelected)="registryClientTypeSelected($event)"></extension-creation>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/registry-clients/create-registry-client/create-registry-client.component.scss

@@ -14,13 +14,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-@use '@angular/material' as mat;
-
-.create-registry-client-form {
-    @include mat.button-density(-1);
-
-    .mat-mdc-form-field {
-        width: 100%;
-    }
-}

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/registry-clients/create-registry-client/create-registry-client.component.ts

@@ -17,7 +17,7 @@
 
 import { Component, EventEmitter, Inject, Input, Output } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
@@ -30,7 +30,7 @@ import { Client } from '../../../../../service/client.service';
 import { MatSelectModule } from '@angular/material/select';
 import { NiFiCommon, TextTip, NifiTooltipDirective } from '@nifi/shared';
 import { ClusterConnectionService } from '../../../../../service/cluster-connection.service';
-import { CloseOnEscapeDialog } from '@nifi/shared';
+import { ExtensionCreation } from '../../../../../ui/common/extension-creation/extension-creation.component';
 
 @Component({
     selector: 'create-registry-client',
@@ -45,62 +45,43 @@ import { CloseOnEscapeDialog } from '@nifi/shared';
         AsyncPipe,
         NifiSpinnerDirective,
         MatSelectModule,
-        NifiTooltipDirective
+        NifiTooltipDirective,
+        ExtensionCreation
     ],
     styleUrls: ['./create-registry-client.component.scss']
 })
-export class CreateRegistryClient extends CloseOnEscapeDialog {
+export class CreateRegistryClient {
     @Input() saving$!: Observable<boolean>;
     @Output() createRegistryClient: EventEmitter<CreateRegistryClientRequest> =
         new EventEmitter<CreateRegistryClientRequest>();
 
     protected readonly TextTip = TextTip;
 
-    createRegistryClientForm: FormGroup;
+    registryClientTypes: DocumentedType[];
 
     constructor(
         @Inject(MAT_DIALOG_DATA) public request: CreateRegistryClientDialogRequest,
-        private formBuilder: FormBuilder,
         private nifiCommon: NiFiCommon,
         private client: Client,
         private clusterConnectionService: ClusterConnectionService
     ) {
-        super();
-        let type: string | null = null;
-        if (request.registryClientTypes.length > 0) {
-            type = request.registryClientTypes[0].type;
-        }
-
-        // build the form
-        this.createRegistryClientForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required),
-            type: new FormControl(type, Validators.required),
-            description: new FormControl('')
-        });
-    }
-
-    formatType(option: DocumentedType): string {
-        return this.nifiCommon.getComponentTypeLabel(option.type);
+        this.registryClientTypes = request.registryClientTypes;
     }
 
-    createRegistryClientClicked() {
+    registryClientTypeSelected(registryClientType: DocumentedType) {
         const request: CreateRegistryClientRequest = {
             revision: {
                 clientId: this.client.getClientId(),
                 version: 0
             },
             disconnectedNodeAcknowledged: this.clusterConnectionService.isDisconnectionAcknowledged(),
             component: {
-                name: this.createRegistryClientForm.get('name')?.value,
-                type: this.createRegistryClientForm.get('type')?.value,
-                description: this.createRegistryClientForm.get('description')?.value
+                name: this.nifiCommon.getComponentTypeLabel(registryClientType.type),
+                type: registryClientType.type,
+                bundle: registryClientType.bundle
             }
         };
 
         this.createRegistryClient.next(request);
     }
-
-    override isDirty(): boolean {
-        return this.createRegistryClientForm.dirty;
-    }
 }