rfellows commented on code in PR #8068:
URL: https://github.com/apache/nifi/pull/8068#discussion_r1407679755


##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.ts:
##########
@@ -55,79 +57,196 @@ export interface AllowableValueItem extends AllowableValue 
{
         NgForOf,
         MatTooltipModule,
         NgIf,
-        A11yModule
+        A11yModule,
+        NgxSkeletonLoaderModule
     ],
     styleUrls: ['./combo-editor.component.scss']
 })
 export class ComboEditor {
     @Input() set item(item: PropertyItem) {
-        this.itemLookup.clear();
-        this.descriptor = item.descriptor;
-        this.allowableValues = [];
-
-        let i: number = 0;
-        let selectedItem: AllowableValueItem | null = null;
-
-        if (!this.descriptor.required) {
-            const noValue: AllowableValueItem = {
-                id: i++,
-                displayName: 'No value',
-                value: null
-            };
-            this.itemLookup.set(noValue.id, noValue);
-            this.allowableValues.push(noValue);
-
-            if (noValue.value == item.value) {
-                selectedItem = noValue;
-            }
+        if (item.value != null) {
+            this.configuredValue = item.value;
+        } else if (item.descriptor.defaultValue != null) {
+            this.configuredValue = item.descriptor.defaultValue;
         }
 
-        const allowableValueItems: AllowableValueItem[] = 
this.descriptor.allowableValues.map(
-            (allowableValueEntity) => {
-                const allowableValue: AllowableValueItem = {
-                    ...allowableValueEntity.allowableValue,
-                    id: i++
-                };
-                this.itemLookup.set(allowableValue.id, allowableValue);
+        this.descriptor = item.descriptor;
+        this.sensitive = item.descriptor.sensitive;
 
-                if (allowableValue.value == item.value) {
-                    selectedItem = allowableValue;
-                }
+        this.itemSet = true;
+        this.initialAllowableValues();
+    }
 
-                return allowableValue;
-            }
-        );
-        this.allowableValues.push(...allowableValueItems);
+    @Input() set getParameters(getParameters: (sensitive: boolean) => 
Observable<Parameter[]>) {
+        this._getParameters = getParameters;
 
-        if (selectedItem) {
-            // mat-select does not have good support for options with null 
value so we've
-            // introduced a mapping to work around the shortcoming
-            this.comboEditorForm.get('value')?.setValue(selectedItem.id);
-        }
+        this.supportsParameters = true;
+        this.initialAllowableValues();
     }
-    @Input() supportsParameters: boolean = false;
 
     @Output() ok: EventEmitter<any> = new EventEmitter<any>();
     @Output() cancel: EventEmitter<void> = new EventEmitter<void>();
 
     protected readonly TextTip = TextTip;
 
     itemLookup: Map<number, AllowableValueItem> = new Map<number, 
AllowableValueItem>();
+    referencesParametersId: number = -1;
+    configuredParameterId: number = -1;
 
     comboEditorForm: FormGroup;
     descriptor!: PropertyDescriptor;
     allowableValues!: AllowableValueItem[];
 
+    showParameterAllowableValues: boolean = false;
+    parameterAllowableValues!: AllowableValueItem[];
+
+    sensitive: boolean = false;
+    supportsParameters: boolean = false;
+    parametersLoaded: boolean = false;
+
+    itemSet: boolean = false;
+    configuredValue: string | null = null;
+    _getParameters!: (sensitive: boolean) => Observable<Parameter[]>;
+
     constructor(private formBuilder: FormBuilder) {
         this.comboEditorForm = this.formBuilder.group({
             value: new FormControl(null, Validators.required)
         });
     }
 
+    initialAllowableValues(): void {
+        if (this.itemSet) {
+            this.itemLookup.clear();
+            this.allowableValues = [];
+            this.referencesParametersId = -1;
+
+            let i: number = 0;
+            let selectedItem: AllowableValueItem | null = null;
+
+            if (!this.descriptor.required) {
+                const noValue: AllowableValueItem = {
+                    id: i++,
+                    displayName: 'No value',
+                    value: null
+                };
+                this.itemLookup.set(noValue.id, noValue);
+                this.allowableValues.push(noValue);
+
+                if (noValue.value == this.configuredValue) {
+                    selectedItem = noValue;
+                }
+            }
+
+            if (this.descriptor.allowableValues) {
+                const allowableValueItems: AllowableValueItem[] = 
this.descriptor.allowableValues.map(
+                    (allowableValueEntity) => {
+                        const allowableValue: AllowableValueItem = {
+                            ...allowableValueEntity.allowableValue,
+                            id: i++
+                        };
+                        this.itemLookup.set(allowableValue.id, allowableValue);
+
+                        if (allowableValue.value == this.configuredValue) {
+                            selectedItem = allowableValue;
+                        }
+
+                        return allowableValue;
+                    }
+                );
+                this.allowableValues.push(...allowableValueItems);
+            }
+
+            if (this.supportsParameters) {
+                this.parametersLoaded = false;
+
+                // parameters are supported so add the item to support showing
+                // and hiding the parameter options select
+                const referencesParameterOption: AllowableValueItem = {
+                    id: i++,
+                    displayName: 'Reference Parameter...',
+                    value: null
+                };

Review Comment:
   This should be gated by checking that there is an available parameter 
context. Otherwise, the getParameters ends up being undefined as it is never 
set in `flow.effects.ts#openEditProcessorDialog$`. In this case, the skeleton 
loader never goes away and the combo editor overlay is placed in the upper left 
corner of the screen.
   
   console error as well...
   ```
   ERROR TypeError: this._getParameters is not a function
       at ComboEditor.initialAllowableValues (combo-editor.component.ts:184:22)
       at set getParameters [as getParameters] (combo-editor.component.ts:84:14)
       at writeToDirectiveInput (core.mjs:12296:34)
       at setInputsForProperty (core.mjs:12530:9)
       at elementPropertyInternal (core.mjs:11821:9)
       at ɵɵproperty (core.mjs:15655:9)
       at PropertyTable_ng_template_21_combo_editor_0_Template 
(property-table.component.html:147:36)
       at ReactiveLViewConsumer.runInContext (core.mjs:11103:13)
       at executeTemplate (core.mjs:11404:22)
       at refreshView (core.mjs:12898:13)
   ```



##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.ts:
##########
@@ -55,79 +57,196 @@ export interface AllowableValueItem extends AllowableValue 
{
         NgForOf,
         MatTooltipModule,
         NgIf,
-        A11yModule
+        A11yModule,
+        NgxSkeletonLoaderModule
     ],
     styleUrls: ['./combo-editor.component.scss']
 })
 export class ComboEditor {
     @Input() set item(item: PropertyItem) {
-        this.itemLookup.clear();
-        this.descriptor = item.descriptor;
-        this.allowableValues = [];
-
-        let i: number = 0;
-        let selectedItem: AllowableValueItem | null = null;
-
-        if (!this.descriptor.required) {
-            const noValue: AllowableValueItem = {
-                id: i++,
-                displayName: 'No value',
-                value: null
-            };
-            this.itemLookup.set(noValue.id, noValue);
-            this.allowableValues.push(noValue);
-
-            if (noValue.value == item.value) {
-                selectedItem = noValue;
-            }
+        if (item.value != null) {
+            this.configuredValue = item.value;
+        } else if (item.descriptor.defaultValue != null) {
+            this.configuredValue = item.descriptor.defaultValue;
         }
 
-        const allowableValueItems: AllowableValueItem[] = 
this.descriptor.allowableValues.map(
-            (allowableValueEntity) => {
-                const allowableValue: AllowableValueItem = {
-                    ...allowableValueEntity.allowableValue,
-                    id: i++
-                };
-                this.itemLookup.set(allowableValue.id, allowableValue);
+        this.descriptor = item.descriptor;
+        this.sensitive = item.descriptor.sensitive;
 
-                if (allowableValue.value == item.value) {
-                    selectedItem = allowableValue;
-                }
+        this.itemSet = true;
+        this.initialAllowableValues();
+    }
 
-                return allowableValue;
-            }
-        );
-        this.allowableValues.push(...allowableValueItems);
+    @Input() set getParameters(getParameters: (sensitive: boolean) => 
Observable<Parameter[]>) {
+        this._getParameters = getParameters;
 
-        if (selectedItem) {
-            // mat-select does not have good support for options with null 
value so we've
-            // introduced a mapping to work around the shortcoming
-            this.comboEditorForm.get('value')?.setValue(selectedItem.id);
-        }
+        this.supportsParameters = true;
+        this.initialAllowableValues();
     }
-    @Input() supportsParameters: boolean = false;
 
     @Output() ok: EventEmitter<any> = new EventEmitter<any>();
     @Output() cancel: EventEmitter<void> = new EventEmitter<void>();
 
     protected readonly TextTip = TextTip;
 
     itemLookup: Map<number, AllowableValueItem> = new Map<number, 
AllowableValueItem>();
+    referencesParametersId: number = -1;
+    configuredParameterId: number = -1;
 
     comboEditorForm: FormGroup;
     descriptor!: PropertyDescriptor;
     allowableValues!: AllowableValueItem[];
 
+    showParameterAllowableValues: boolean = false;
+    parameterAllowableValues!: AllowableValueItem[];
+
+    sensitive: boolean = false;
+    supportsParameters: boolean = false;
+    parametersLoaded: boolean = false;
+
+    itemSet: boolean = false;
+    configuredValue: string | null = null;
+    _getParameters!: (sensitive: boolean) => Observable<Parameter[]>;
+
     constructor(private formBuilder: FormBuilder) {
         this.comboEditorForm = this.formBuilder.group({
             value: new FormControl(null, Validators.required)
         });
     }
 
+    initialAllowableValues(): void {
+        if (this.itemSet) {
+            this.itemLookup.clear();
+            this.allowableValues = [];
+            this.referencesParametersId = -1;
+
+            let i: number = 0;
+            let selectedItem: AllowableValueItem | null = null;
+
+            if (!this.descriptor.required) {
+                const noValue: AllowableValueItem = {
+                    id: i++,
+                    displayName: 'No value',
+                    value: null
+                };
+                this.itemLookup.set(noValue.id, noValue);
+                this.allowableValues.push(noValue);
+
+                if (noValue.value == this.configuredValue) {
+                    selectedItem = noValue;
+                }
+            }
+
+            if (this.descriptor.allowableValues) {
+                const allowableValueItems: AllowableValueItem[] = 
this.descriptor.allowableValues.map(
+                    (allowableValueEntity) => {
+                        const allowableValue: AllowableValueItem = {
+                            ...allowableValueEntity.allowableValue,
+                            id: i++
+                        };
+                        this.itemLookup.set(allowableValue.id, allowableValue);
+
+                        if (allowableValue.value == this.configuredValue) {
+                            selectedItem = allowableValue;
+                        }
+
+                        return allowableValue;
+                    }
+                );
+                this.allowableValues.push(...allowableValueItems);
+            }
+
+            if (this.supportsParameters) {
+                this.parametersLoaded = false;
+
+                // parameters are supported so add the item to support showing
+                // and hiding the parameter options select
+                const referencesParameterOption: AllowableValueItem = {
+                    id: i++,
+                    displayName: 'Reference Parameter...',
+                    value: null
+                };

Review Comment:
   This should be gated by checking that there is an available parameter 
context. Otherwise, the getParameters ends up being undefined as it is never 
set in `flow.effects.ts#openEditProcessorDialog$`. In this case, the skeleton 
loader never goes away and the combo editor overlay is placed in the upper left 
corner of the screen.
   
   console error as well...
   ```
   ERROR TypeError: this._getParameters is not a function
       at ComboEditor.initialAllowableValues (combo-editor.component.ts:184:22)
       at set getParameters [as getParameters] (combo-editor.component.ts:84:14)
       at writeToDirectiveInput (core.mjs:12296:34)
       at setInputsForProperty (core.mjs:12530:9)
       at elementPropertyInternal (core.mjs:11821:9)
       at ɵɵproperty (core.mjs:15655:9)
       at PropertyTable_ng_template_21_combo_editor_0_Template 
(property-table.component.html:147:36)
       at ReactiveLViewConsumer.runInContext (core.mjs:11103:13)
       at executeTemplate (core.mjs:11404:22)
       at refreshView (core.mjs:12898:13)
   ```



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to