NIFI-14319: address initial feedback

* check if window.matchMedia has value before calling method
* add empty states to explorer table
* destroy direct store subscriptions
* add filtered count to droplet table filter

Author: sardell

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.module.ts

@@ -37,11 +37,21 @@ import { ExplorerModule } from './pages/expolorer/feature/explorer.module';
 import { BucketsEffects } from './state/buckets/buckets.effects';
 
 const entry = localStorage.getItem('disable-animations');
-let disableAnimations: string = entry !== null ? JSON.parse(entry).item : '';
+let disableAnimations = '';
+
+try {
+    disableAnimations = entry !== null ? JSON.parse(entry).item : '';
+} catch (error) {
+    /* empty */
+}
 
 // honor OS settings if user has not explicitly disabled animations for the application
-if (disableAnimations !== 'true' && disableAnimations !== 'false') {
-    disableAnimations = window.matchMedia('(prefers-reduced-motion: reduce)').matches.toString();
+try {
+    if (disableAnimations !== 'true' && disableAnimations !== 'false') {
+        disableAnimations = window.matchMedia('(prefers-reduced-motion: reduce)').matches.toString();
+    }
+} catch (error) {
+    /* empty */
 }
 
 @NgModule({

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/pages/expolorer/feature/explorer.component.html

@@ -20,7 +20,7 @@
         <h3 class="primary-color">Flows</h3>
         <div class="flex justify-between items-center">
             <droplet-table-filter [buckets]="buckets" [filterTerm]="filterTerm" [filterBucket]="filterBucket"
-                [filterColumn]="filterColumn" (filterChanged)="applyFilter($event)"></droplet-table-filter>
+                [filterColumn]="filterColumn" [filteredCount]="dataSource.filteredData.length" [totalCount]="dataSource.data.length" (filterChanged)="applyFilter($event)"></droplet-table-filter>
             <button mat-flat-button (click)="openImportNewFlowDialog()">Import New Flow</button>
         </div>
         @if (droplets$; as droplets) {
@@ -123,6 +123,15 @@ <h3 class="primary-color">Flows</h3>
                     <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                     <tr mat-row *matRowDef="let row; let even = even; columns: displayedColumns"></tr>
                 </table>
+                <div class="py-5" *ngIf="dataSource.filteredData.length === 0 && buckets.length !== 0 && filterTerm">
+                    <p class="text-center">No results match this query.</p>
+                </div>
+                <div class="py-5" *ngIf="dataSource.data.length === 0 && buckets.length === 0">
+                    <p class="text-center">There are no buckets to display.</p>
+                </div>
+                <div class="py-5" *ngIf="dataSource.data.length === 0 && buckets.length !== 0">
+                    <p class="text-center">There are no flows to display.</p>
+                </div>
             </div>
         </div>
         }

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/pages/expolorer/feature/explorer.component.ts

@@ -72,8 +72,8 @@ export class ExplorerComponent implements OnInit {
         private router: Router,
         private activatedRoute: ActivatedRoute
     ) {
-        this.droplets$ = this.store.select(selectDroplets);
-        this.buckets$ = this.store.select(selectBuckets);
+        this.droplets$ = this.store.select(selectDroplets).pipe(takeUntilDestroyed());
+        this.buckets$ = this.store.select(selectBuckets).pipe(takeUntilDestroyed());
         this.store
             .select(selectQueryParams)
             .pipe(takeUntilDestroyed())

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/pages/expolorer/feature/ui/droplet-table-filter/droplet-table-filter.component.html

@@ -48,6 +48,6 @@
                 </div>
             </div>
         </form>
-        <!-- <div class="my-2 tertiary-color font-medium">Filter matched {{ filteredCount }} of {{ totalCount }}</div> -->
+        <div class="my-2 tertiary-color font-medium">Filter matched {{ filteredCount }} of {{ totalCount }}</div>
     </div>
 </div>

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/pages/expolorer/feature/ui/droplet-table-filter/droplet-table-filter.component.ts

@@ -53,6 +53,8 @@ export class DropletTableFilterComponent implements AfterViewInit {
     private _initialFilterColumn = 'name';
     private _filterableColumns: DropletTableFilterColumn[] = [];
     private _buckets: Bucket[] = [];
+    private _filteredCount = 0;
+    private _totalCount = 0;
     private destroyRef: DestroyRef = inject(DestroyRef);
 
     set filterableColumns(filterableColumns: DropletTableFilterColumn[]) {
@@ -90,6 +92,22 @@ export class DropletTableFilterComponent implements AfterViewInit {
         this.filterForm.controls['filterBucket']?.setValue(term);
     }
 
+    @Input() set filteredCount(filteredCount: number) {
+        this._filteredCount = filteredCount;
+    }
+
+    get filteredCount(): number {
+        return this._filteredCount;
+    }
+
+    @Input() set totalCount(totalCount: number) {
+        this._totalCount = totalCount;
+    }
+
+    get totalCount(): number {
+        return this._totalCount;
+    }
+
     @Output() filterChanged: EventEmitter<DropletTableFilterContext> = new EventEmitter<DropletTableFilterContext>();
 
     constructor(private formBuilder: FormBuilder) {

nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts

@@ -59,11 +59,21 @@ import { CLIPBOARD_OPTIONS, provideMarkdown } from 'ngx-markdown';
 import { CopyEffects } from './state/copy/copy.effects';
 
 const entry = localStorage.getItem('disable-animations');
-let disableAnimations: string = entry !== null ? JSON.parse(entry).item : '';
+let disableAnimations: string = '';
+
+try {
+    disableAnimations = entry !== null ? JSON.parse(entry).item : '';
+} catch (error) {
+    /* empty */
+}
 
 // honor OS settings if user has not explicitly disabled animations for the application
-if (disableAnimations !== 'true' && disableAnimations !== 'false') {
-    disableAnimations = window.matchMedia('(prefers-reduced-motion: reduce)').matches.toString();
+try {
+    if (disableAnimations !== 'true' && disableAnimations !== 'false') {
+        disableAnimations = window.matchMedia('(prefers-reduced-motion: reduce)').matches.toString();
+    }
+} catch (error) {
+    /* empty */
 }
 
 export const customTooltipDefaults: MatTooltipDefaultOptions = {