[NIFI-14563] - Display inherited parameter contexts in the correct order (apache#9941)

Author: rfellows

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.spec.ts

@@ -18,11 +18,72 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ParameterContextInheritance } from './parameter-context-inheritance.component';
+import { ParameterContextEntity } from '../../../../state/shared';
 
 describe('ParameterContextInheritance', () => {
     let component: ParameterContextInheritance;
     let fixture: ComponentFixture<ParameterContextInheritance>;
 
+    const parameterContext1: ParameterContextEntity = {
+        revision: { version: 1 },
+        uri: '',
+        id: 'pc 1',
+        permissions: { canRead: true, canWrite: true },
+        component: {
+            id: 'pc 1',
+            parameters: [],
+            name: 'parameter context 1',
+            description: 'description',
+            boundProcessGroups: [],
+            inheritedParameterContexts: []
+        }
+    };
+
+    const parameterContext2: ParameterContextEntity = {
+        revision: { version: 1 },
+        uri: '',
+        id: 'pc 2',
+        permissions: { canRead: true, canWrite: true },
+        component: {
+            id: 'pc 2',
+            parameters: [],
+            name: 'parameter context 2',
+            description: 'description',
+            boundProcessGroups: [],
+            inheritedParameterContexts: []
+        }
+    };
+
+    const parameterContext3: ParameterContextEntity = {
+        revision: { version: 1 },
+        uri: '',
+        id: 'pc 3',
+        permissions: { canRead: true, canWrite: true },
+        component: {
+            id: 'pc 3',
+            parameters: [],
+            name: 'parameter context 3',
+            description: 'description',
+            boundProcessGroups: [],
+            inheritedParameterContexts: []
+        }
+    };
+
+    const parameterContext4: ParameterContextEntity = {
+        revision: { version: 1 },
+        uri: '',
+        id: 'pc 4',
+        permissions: { canRead: true, canWrite: true },
+        component: {
+            id: 'pc 4',
+            parameters: [],
+            name: 'parameter context 4',
+            description: 'description',
+            boundProcessGroups: [],
+            inheritedParameterContexts: []
+        }
+    };
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ParameterContextInheritance]
@@ -35,4 +96,16 @@ describe('ParameterContextInheritance', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should retain the order of inheritance', () => {
+        component.allParameterContexts = [parameterContext1, parameterContext2, parameterContext3, parameterContext4];
+        // set the inheritance chain
+        component.writeValue([parameterContext2, parameterContext1, parameterContext3]);
+        fixture.detectChanges();
+
+        expect(component.selectedParameterContexts.length).toEqual(3);
+        expect(component.selectedParameterContexts[0].component?.id).toEqual('pc 2');
+        expect(component.selectedParameterContexts[1].component?.id).toEqual('pc 1');
+        expect(component.selectedParameterContexts[2].component?.id).toEqual('pc 3');
+    });
 });

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.ts

@@ -89,20 +89,32 @@ export class ParameterContextInheritance implements ControlValueAccessor {
     private processParameterContexts(): void {
         this.availableParameterContexts = [];
         this.selectedParameterContexts = [];
+        const unsortedSelectedParameterContexts: ParameterContextEntity[] = [];
 
         if (this._allParameterContexts && this.inheritedParameterContexts) {
             this._allParameterContexts.forEach((parameterContext) => {
                 const isInherited: boolean = this.inheritedParameterContexts.some(
                     (inheritedParameterContext) => parameterContext.id == inheritedParameterContext.id
                 );
                 if (isInherited) {
-                    this.selectedParameterContexts.push(parameterContext);
+                    unsortedSelectedParameterContexts.push(parameterContext);
                 } else {
                     this.availableParameterContexts.push(parameterContext);
                 }
             });
 
             this.sortObjectByPropertyPipe.transform(this.availableParameterContexts, 'component.name');
+            if (this.inheritedParameterContexts.length > 0 && unsortedSelectedParameterContexts.length > 0) {
+                // put the inherited parameter contexts in the proper order
+                this.inheritedParameterContexts.forEach((pc) => {
+                    const selectedParameterContext = unsortedSelectedParameterContexts.find(
+                        (selected) => selected.id == pc.id
+                    );
+                    if (selectedParameterContext) {
+                        this.selectedParameterContexts.push(selectedParameterContext);
+                    }
+                });
+            }
         }
     }