NIFI-8821 Registry - Sorting the grid-list no longer expands the listed buckets (#5611)

* [NIFI-8821] Registry - Sorting the grid-list no linger expands the listed buckets

- gitignore is added to support dev UI run with npm

* - trackByFn is specified for ngForOf to help td-expansion-panel to track elements after sorting

* - adding trackByFn to all grid list view component codes

Merged #5611 into main.

nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/.gitignore

@@ -0,0 +1,67 @@
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+/assets
+nf-registry.*.min.*
+vendor.min.*
+index.html
+registry-favicon.png
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+debug.log
+
+# misc
+/.angular/cache
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+debug.log
+
+# System Files
+.DS_Store
+Thumbs.db

nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js

@@ -105,6 +105,10 @@ NfRegistryBucketGridListViewer.prototype = {
         this.nfRegistryService.setBreadcrumbState('out');
         this.nfRegistryService.filteredDroplets = [];
         this.$subscription.unsubscribe();
+    },
+
+    trackByFn: function (index) {
+        return index;
     }
 };
 

nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js

@@ -106,6 +106,10 @@ NfRegistryDropletGridListViewer.prototype = {
         this.nfRegistryService.setBreadcrumbState('out');
         this.nfRegistryService.filteredDroplets = [];
         this.$subscription.unsubscribe();
+    },
+
+    trackByFn: function (index) {
+        return index;
     }
 };
 

nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html

@@ -23,6 +23,13 @@ limitations under the License.
                 <div class="push-top-sm" id="droplet-sort-by-field">{{nfRegistryService.getSortByLabel()}}</div>
                 <i class="push-top-sm fa fa-caret-down pad-left-sm" aria-hidden="true"></i>
             </div>
+            <mat-menu #dropletGridSortMenu="matMenu" [overlapTrigger]="false">
+                <div *ngFor="let column of nfRegistryService.dropletColumns">
+                    <button mat-menu-item *ngIf="column.sortable" (click)="nfRegistryService.sortDroplets(column);">
+                        {{nfRegistryService.generateSortMenuLabels(column)}}
+                    </button>
+                </div>
+            </mat-menu>
         </div>
         <div flex fxLayout="row" fxLayoutAlign="end center">
             <td-chips [(ngModel)]="nfRegistryService.dropletsSearchTerms"
@@ -30,13 +37,6 @@ limitations under the License.
                       (add)="nfRegistryService.filterDroplets(nfRegistryService.activeDropletColumn.name, nfRegistryService.activeDropletColumn.sortOrder);"
                       (remove)="nfRegistryService.filterDroplets(nfRegistryService.activeDropletColumn.name, nfRegistryService.activeDropletColumn.sortOrder);"class="push-right-sm"></td-chips>
         </div>
-        <mat-menu #dropletGridSortMenu="matMenu" [overlapTrigger]="false">
-            <div *ngFor="let column of nfRegistryService.dropletColumns">
-                <button mat-menu-item *ngIf="column.sortable" (click)="nfRegistryService.sortDroplets(column);">
-                    {{nfRegistryService.generateSortMenuLabels(column)}}
-                </button>
-            </div>
-        </mat-menu>
         <button [disabled]="nfRegistryService.buckets.length === 0 || (nfRegistryService.filterWritableBuckets(nfRegistryService.buckets)).length === 0"
                 (click)="nfRegistryService.openImportNewFlowDialog(nfRegistryService.buckets, nfRegistryService.bucket)"
                 class="push-left-sm push-top-sm" data-automation-id="import-new-flow-button"
@@ -50,7 +50,7 @@ limitations under the License.
 </div>
 <div id="nifi-registry-explorer-grid-list-viewer-droplet-container" class="pad-right-xxl pad-left-xxl"
      *ngIf="nfRegistryService.filteredDroplets.length > 0">
-    <div *ngFor="let droplet of nfRegistryService.filteredDroplets" [@flyInOut]>
+    <div *ngFor="let droplet of nfRegistryService.filteredDroplets trackBy: trackByFn" [@flyInOut]>
         <td-expansion-panel class="mat-elevation-z5" label={{droplet.name}} sublabel={{droplet.type}}
                             [disabled]="disabled" (expanded)="nfRegistryService.getDropletSnapshotMetadata(droplet)">
             <ng-template td-expansion-panel-label>

nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js

@@ -84,6 +84,10 @@ NfRegistryGridListViewer.prototype = {
         this.nfRegistryService.setBreadcrumbState('out');
         this.nfRegistryService.filteredDroplets = [];
         this.$subscription.unsubscribe();
+    },
+
+    trackByFn: function (index) {
+        return index;
     }
 };