Fix clear and auto select multi filter/s on reset

cloudfoundry · Nov 27, 2020 · 319860f · 319860f
1 parent 33c5d76
commit 319860f
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 148 deletions.
diff --git a/.../cloud-foundry/src/features/applications/application-wall/application-wall.component.html b/.../cloud-foundry/src/features/applications/application-wall/application-wall.component.html
@@ -23,5 +23,6 @@ <h1>Applications</h1>
 </ng-template>
 
 <app-list class="app-wall" [noEntries]="noEntries" [noEntriesForCurrentFilter]="noEntriesForCurrentFilter"
+  (initialised)="cfOrgSpaceService.enableAutoSelectors()"
   *ngIf="!!(cloudFoundryService.hasRegisteredCFEndpoints$ | async) && !!(cloudFoundryService.hasConnectedCFEndpoints$ | async)">
 </app-list>
diff --git a/...es/cloud-foundry/src/features/applications/application-wall/application-wall.component.ts b/...es/cloud-foundry/src/features/applications/application-wall/application-wall.component.ts
@@ -2,15 +2,13 @@ import { animate, query, style, transition, trigger } from '@angular/animations'
 import { Component, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { Observable, Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { CFAppState } from '../../../../../cloud-foundry/src/cf-app-state';
-import { applicationEntityType } from '../../../../../cloud-foundry/src/cf-entity-types';
 import { ListConfig } from '../../../../../core/src/shared/components/list/list.component.types';
 import { CfAppConfigService } from '../../../shared/components/list/list-types/app/cf-app-config.service';
-import { CfAppsDataSource } from '../../../shared/components/list/list-types/app/cf-apps-data-source';
-import { CfOrgSpaceDataService, initCfOrgSpaceService } from '../../../shared/data-services/cf-org-space-service.service';
+import { CfOrgSpaceDataService } from '../../../shared/data-services/cf-org-space-service.service';
 import { CloudFoundryService } from '../../../shared/data-services/cloud-foundry.service';
 import { CfCurrentUserPermissions } from '../../../user-permissions/cf-user-permissions-checkers';
 import { goToAppWall } from '../../cf/cf.helpers';
@@ -22,13 +20,13 @@ import { goToAppWall } from '../../cf/cf.helpers';
   animations: [
     trigger(
       'cardEnter', [
-        transition('* => *', [
-          query(':enter', [
-            style({ opacity: 0, transform: 'translateY(10px)' }),
-            animate('150ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
-          ], { optional: true })
-        ])
-      ]
+      transition('* => *', [
+        query(':enter', [
+          style({ opacity: 0, transform: 'translateY(10px)' }),
+          animate('150ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
+        ], { optional: true })
+      ])
+    ]
     )
   ],
   providers: [{
@@ -40,7 +38,6 @@ import { goToAppWall } from '../../cf/cf.helpers';
 })
 export class ApplicationWallComponent implements OnDestroy {
   public cfIds$: Observable<string[]>;
-  private initCfOrgSpaceService: Subscription;
 
   public canCreateApplication: string;
 
@@ -49,7 +46,7 @@ export class ApplicationWallComponent implements OnDestroy {
   constructor(
     public cloudFoundryService: CloudFoundryService,
     private store: Store<CFAppState>,
-    private cfOrgSpaceService: CfOrgSpaceDataService,
+    public cfOrgSpaceService: CfOrgSpaceDataService,
     activatedRoute: ActivatedRoute,
   ) {
     // If we have an endpoint ID, select it and redirect
@@ -67,16 +64,8 @@ export class ApplicationWallComponent implements OnDestroy {
     this.haveConnectedCf$ = cloudFoundryService.connectedCFEndpoints$.pipe(
       map(endpoints => !!endpoints && endpoints.length > 0)
     );
-
-    this.initCfOrgSpaceService = initCfOrgSpaceService(this.store,
-      this.cfOrgSpaceService,
-      applicationEntityType,
-      CfAppsDataSource.paginationKey).subscribe();
   }
 
   ngOnDestroy(): void {
-    if (this.initCfOrgSpaceService) {
-      this.initCfOrgSpaceService.unsubscribe();
-    }
   }
 }
diff --git a/...d/packages/cloud-foundry/src/features/services/services-wall/services-wall.component.html b/...d/packages/cloud-foundry/src/features/services/services-wall/services-wall.component.html
@@ -26,5 +26,6 @@ <h1>Services</h1>
 </ng-template>
 
 <app-list class="services-wall" [noEntries]="noEntries" [noEntriesForCurrentFilter]="noEntriesForCurrentFilter"
+  (initialised)="cfOrgSpaceService.enableAutoSelectors()"
   *ngIf="!!(cloudFoundryService.hasRegisteredCFEndpoints$ | async) && !!(cloudFoundryService.hasConnectedCFEndpoints$ | async)">
 </app-list>
diff --git a/...end/packages/cloud-foundry/src/features/services/services-wall/services-wall.component.ts b/...end/packages/cloud-foundry/src/features/services/services-wall/services-wall.component.ts
@@ -1,17 +1,13 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { CFAppState } from '../../../../../cloud-foundry/src/cf-app-state';
-import { serviceInstancesEntityType } from '../../../../../cloud-foundry/src/cf-entity-types';
 import {
   ServiceInstancesWallListConfigService,
 } from '../../../../../cloud-foundry/src/shared/components/list/list-types/services-wall/service-instances-wall-list-config.service';
-import {
-  CfOrgSpaceDataService,
-  initCfOrgSpaceService,
-} from '../../../../../cloud-foundry/src/shared/data-services/cf-org-space-service.service';
+import { CfOrgSpaceDataService } from '../../../../../cloud-foundry/src/shared/data-services/cf-org-space-service.service';
 import { CloudFoundryService } from '../../../../../cloud-foundry/src/shared/data-services/cloud-foundry.service';
 import { ListConfig } from '../../../../../core/src/shared/components/list/list.component.types';
 import { CSI_CANCEL_URL } from '../../../shared/components/add-service-instance/csi-mode.service';
@@ -29,7 +25,7 @@ import { CfCurrentUserPermissions } from '../../../user-permissions/cf-user-perm
     CfOrgSpaceDataService
   ]
 })
-export class ServicesWallComponent implements OnDestroy {
+export class ServicesWallComponent {
 
   public haveConnectedCf$: Observable<boolean>;
 
@@ -41,7 +37,7 @@ export class ServicesWallComponent implements OnDestroy {
   constructor(
     public cloudFoundryService: CloudFoundryService,
     public store: Store<CFAppState>,
-    private cfOrgSpaceService: CfOrgSpaceDataService) {
+    public cfOrgSpaceService: CfOrgSpaceDataService) {
 
     this.canCreateServiceInstance = CfCurrentUserPermissions.SERVICE_INSTANCE_CREATE;
     this.cfIds$ = cloudFoundryService.cFEndpoints$.pipe(
@@ -51,11 +47,6 @@ export class ServicesWallComponent implements OnDestroy {
       )
     );
 
-    this.initCfOrgSpaceService = initCfOrgSpaceService(this.store,
-      this.cfOrgSpaceService,
-      serviceInstancesEntityType,
-      'all').subscribe();
-
     this.haveConnectedCf$ = cloudFoundryService.connectedCFEndpoints$.pipe(
       map(endpoints => !!endpoints && endpoints.length > 0)
     );
@@ -64,8 +55,4 @@ export class ServicesWallComponent implements OnDestroy {
       [CSI_CANCEL_URL]: `/services`
     };
   }
-
-  ngOnDestroy(): void {
-    this.initCfOrgSpaceService.unsubscribe();
-  }
 }
diff --git a/...-foundry/src/shared/components/list/list-types/cf-routes/cf-routes-list-config.service.ts b/...-foundry/src/shared/components/list/list-types/cf-routes/cf-routes-list-config.service.ts
@@ -16,11 +16,7 @@ import {
 import { APIResource } from '../../../../../../../store/src/types/api.types';
 import { CloudFoundryEndpointService } from '../../../../../features/cf/services/cloud-foundry-endpoint.service';
 import { CfCurrentUserPermissions } from '../../../../../user-permissions/cf-user-permissions-checkers';
-import {
-  CfOrgSpaceDataService,
-  createCfOrgSpaceFilterConfig,
-  initCfOrgSpaceService,
-} from '../../../../data-services/cf-org-space-service.service';
+import { CfOrgSpaceDataService, createCfOrgSpaceFilterConfig } from '../../../../data-services/cf-org-space-service.service';
 import { CfRoutesDataSource } from './cf-routes-data-source';
 import { ListCfRoute } from './cf-routes-data-source-base';
 import { CfRoutesListConfigBase } from './cf-routes-list-config-base';
@@ -76,10 +72,6 @@ export class CfRoutesListConfigService extends CfRoutesListConfigBase implements
       createCfOrgSpaceFilterConfig('org', 'Organization', cfOrgSpaceService.org),
     ];
     this.getMultiFiltersConfigs = () => multiFilterConfigs;
-    initCfOrgSpaceService(store, cfOrgSpaceService,
-      this.dataSource.masterAction.entityType,
-      this.dataSource.masterAction.paginationKey).subscribe();
-    cfOrgSpaceService.cf.select.next(cfService.cfGuid);
 
     this.getInitialised = () => combineLatest(
       cfOrgSpaceService.cf.list$,
@@ -89,5 +81,8 @@ export class CfRoutesListConfigService extends CfRoutesListConfigBase implements
       map(loading => !loading),
       startWith(true)
     );
+
+    cfOrgSpaceService.enableAutoSelectors(); // TODO: RC TEST
+    // (initialised)="cfOrgSpaceService.enableAutoSelectors()"
   }
 }
diff --git a/src/frontend/packages/cloud-foundry/src/shared/data-services/cf-org-space-service.service.ts b/src/frontend/packages/cloud-foundry/src/shared/data-services/cf-org-space-service.service.ts
@@ -1,17 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
-import {
-  distinctUntilChanged,
-  filter,
-  first,
-  map,
-  publishReplay,
-  refCount,
-  startWith,
-  tap,
-  withLatestFrom,
-} from 'rxjs/operators';
+import { distinctUntilChanged, filter, first, map, publishReplay, refCount, tap, withLatestFrom } from 'rxjs/operators';
 
 import { CFAppState } from '../../../../cloud-foundry/src/cf-app-state';
 import { organizationEntityType, spaceEntityType } from '../../../../cloud-foundry/src/cf-entity-types';
@@ -28,7 +18,6 @@ import { PaginationMonitorFactory } from '../../../../store/src/monitors/paginat
 import { getPaginationObservables } from '../../../../store/src/reducers/pagination-reducer/pagination-reducer.helper';
 import { getCurrentPageRequestInfo } from '../../../../store/src/reducers/pagination-reducer/pagination-reducer.types';
 import { connectedEndpointsOfTypesSelector } from '../../../../store/src/selectors/endpoint.selectors';
-import { selectPaginationState } from '../../../../store/src/selectors/pagination.selectors';
 import { APIResource } from '../../../../store/src/types/api.types';
 import { EndpointModel } from '../../../../store/src/types/endpoint.types';
 import { PaginatedAction, PaginationParam } from '../../../../store/src/types/pagination.types';
@@ -78,28 +67,28 @@ export const enum CfOrgSpaceSelectMode {
 }
 
 
-export const initCfOrgSpaceService = (
-  store: Store<CFAppState>,
-  cfOrgSpaceService: CfOrgSpaceDataService,
-  entityKey: string,
-  paginationKey: string): Observable<any> => {
-  return store.select(selectPaginationState(entityKey, paginationKey)).pipe(
-    filter((pag) => !!pag),
-    first(),
-    tap(pag => {
-      const { cf, org, space } = pag.clientPagination.filter.items;
-      if (cf) {
-        cfOrgSpaceService.cf.select.next(cf);
-      }
-      if (org) {
-        cfOrgSpaceService.org.select.next(org);
-      }
-      if (space) {
-        cfOrgSpaceService.space.select.next(space);
-      }
-    })
-  );
-};
+// export const initCfOrgSpaceService = (
+//   store: Store<CFAppState>,
+//   cfOrgSpaceService: CfOrgSpaceDataService,
+//   entityKey: string,
+//   paginationKey: string): Observable<any> => {
+//   return store.select(selectPaginationState(entityKey, paginationKey)).pipe(
+//     filter((pag) => !!pag),
+//     first(),
+//     tap(pag => {
+//       const { cf, org, space } = pag.clientPagination.filter.items;
+//       if (cf) {
+//         cfOrgSpaceService.cf.select.next(cf);
+//       }
+//       if (org) {
+//         cfOrgSpaceService.org.select.next(org);
+//       }
+//       if (space) {
+//         cfOrgSpaceService.space.select.next(space);
+//       }
+//     })
+//   );
+// };
 
 export const createCfOrSpaceMultipleFilterFn = (
   store: Store<CFAppState>,
@@ -154,7 +143,6 @@ export const createCfOrSpaceMultipleFilterFn = (
   };
 };
 
-
 /**
  * This service relies on OnDestroy, so must be `provided` by a component
  */
@@ -182,6 +170,8 @@ export class CfOrgSpaceDataService implements OnDestroy {
   private selectMode = CfOrgSpaceSelectMode.FIRST_ONLY;
   private subs: Subscription[] = [];
 
+  public pEnableAutoSelectors = false;
+
   constructor(
     private store: Store<CFAppState>,
     public paginationMonitorFactory: PaginationMonitorFactory,
@@ -318,11 +308,16 @@ export class CfOrgSpaceDataService implements OnDestroy {
     );
   }
 
-  private setupAutoSelectors() {
+  public enableAutoSelectors() {
+    setTimeout(() => this.pEnableAutoSelectors = true, 100);
+  }
+
+  private setupAutoSelectors(
+  ) {
     const orgResetSub = this.cf.select.asObservable().pipe(
-      startWith(undefined),
       distinctUntilChanged(),
       withLatestFrom(this.org.list$),
+      filter(() => this.pEnableAutoSelectors),
       tap(([selectedCF, orgs]) => {
         if (
           !!orgs.length &&
@@ -340,9 +335,9 @@ export class CfOrgSpaceDataService implements OnDestroy {
 
     // Clear or automatically select space given org
     const spaceResetSub = this.org.select.asObservable().pipe(
-      startWith(undefined),
       distinctUntilChanged(),
       withLatestFrom(this.space.list$),
+      filter(() => this.pEnableAutoSelectors),
       tap(([selectedOrg, spaces]) => {
         if (
           !!spaces.length &&

diff --git a/...es/core/src/shared/components/list/data-sources-controllers/list-pagination-controller.ts b/...es/core/src/shared/components/list/data-sources-controllers/list-pagination-controller.ts
@@ -115,7 +115,7 @@ export class ListPaginationController<T> implements IListPaginationController<T>
         }, this.dataSource.isLocal));
       }
     });
-  }
+  };
   filterByString = filterString => {
     onPaginationEntityState(this.dataSource.pagination$, (paginationEntityState) => {
       if (this.dataSource.isLocal) {
@@ -132,24 +132,35 @@ export class ListPaginationController<T> implements IListPaginationController<T>
         this.dataSource.setFilterParam(filterString, paginationEntityState);
       }
     });
-  }
+  };
 
   handleMultiFilter = (changes: ListPaginationMultiFilterChange[]) => {
+    console.log('handleMultiFilter: Before', changes); // TODO: RC remove
     onPaginationEntityState(this.dataSource.pagination$, (paginationEntityState) => {
       if (!paginationEntityState) {
         return;
       }
 
-      // We don't want to dispatch  actions if it's a no op (values are not different, falsies are treated as the same). This avoids other
+      // Changes may include multiple updates for the same key, so only use the very latest
+      const uniqueChanges = [];
+      for (let i = changes.length - 1; i >= 0; i--) {
+        const change = changes[i];
+        if (!uniqueChanges.find(e => e.key === change.key)) {
+          uniqueChanges.push(change);
+        }
+      }
+      console.log('handleMultiFilter: Clean 1', uniqueChanges); // TODO: RC remove
+      // We don't want to dispatch actions if it's a no op (values are not different, falsies are treated as the same). This avoids other
       // chained actions from firing.
-      const cleanChanges = changes.reduce((newCleanChanges, change) => {
+      const cleanChanges = uniqueChanges.reduce((newCleanChanges, change) => {
         const storeFilterParamValue = valueOrCommonFalsy(paginationEntityState.clientPagination.filter.items[change.key]);
         const newFilterParamValue = valueOrCommonFalsy(change.value);
         if (storeFilterParamValue !== newFilterParamValue) {
           newCleanChanges[change.key] = change.value;
         }
         return newCleanChanges;
       }, {});
+      console.log('handleMultiFilter: Clean 2', cleanChanges); // TODO: RC remove
 
       if (Object.keys(cleanChanges).length > 0) {
         const currentFilter = paginationEntityState.clientPagination.filter;
@@ -172,14 +183,14 @@ export class ListPaginationController<T> implements IListPaginationController<T>
       }
 
     });
-  }
+  };
 
   multiFilter = (filterConfig: IListMultiFilterConfig, filterValue: string) => {
     if (!this.dataSource.isLocal) {
       return;
     }
     this.multiFilterStream.next({ key: filterConfig.key, value: filterValue });
-  }
+  };
 
   private cloneMultiFilter(paginationClientFilter: PaginationClientFilter) {
     return {

diff --git a/...ages/core/src/shared/components/list/list-types/endpoint/endpoints-list-config.service.ts b/...ages/core/src/shared/components/list/list-types/endpoint/endpoints-list-config.service.ts
@@ -153,7 +153,7 @@ export class EndpointsListConfigService implements IListConfig<EndpointModel> {
         stratosEntityCatalog.endpoint.store.getPaginationMonitor().pagination$
       ]).pipe(
         debounceTime(100), // This can get pretty spammy, to help protect resetEndpointTypeFilter allow a pause
-        filter(([endpoints, pagination]) => !!endpoints),
+        filter(([endpoints]) => !!endpoints),
         map(([endpoints, pagination]) => {
           // Provide a list of endpoint types only if there are more than two registered endpoint types
           const types: { [type: string]: boolean; } = {};