Persist list settings over refresh (cloudfoundry#4405)

* WIP * Add list reset button & list button tooltips * Few tidy ups, add clear local storage feature * Tweak profile settings section * WIP * WIP * only store pagination sections from lists * Fix clear and auto select multi filter/s on reset * Ingore invalid values * Super basic encryption of pag section * fix reset * Fix max list count & multi-entity selectors stickyness * tidying up * Fix linting * Fix unit tests * Changes following review #1 * Changes following review #2 * Changes following review no. 3 * Fix warning on first load * Fix show org/space e2e failures * improve delete service e2e tests * Ensure list is card mode before waiting to find a card * Remove stray line
SUSE · Dec 4, 2020 · 463a1c3 · 463a1c3
1 parent 51d0d55
commit 463a1c3
Show file tree

Hide file tree

Showing 42 changed files with 799 additions and 279 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/...loud-foundry/src/features/applications/create-application/create-application.component.ts b/...loud-foundry/src/features/applications/create-application/create-application.component.ts
@@ -4,10 +4,10 @@ import { Subscription } from 'rxjs';
 import { filter, first, tap } from 'rxjs/operators';
 
 import { CFAppState } from '../../../../../cloud-foundry/src/cf-app-state';
-import { applicationEntityType } from '../../../../../cloud-foundry/src/cf-entity-types';
-import { selectCfPaginationState } from '../../../../../cloud-foundry/src/store/selectors/pagination.selectors';
+import { applicationEntityType } from '../../../cf-entity-types';
 import { CfAppsDataSource } from '../../../shared/components/list/list-types/app/cf-apps-data-source';
 import { CfOrgSpaceDataService } from '../../../shared/data-services/cf-org-space-service.service';
+import { selectCfPaginationState } from '../../../store/selectors/pagination.selectors';
 
 @Component({
   selector: 'app-create-application',
@@ -22,14 +22,16 @@ export class CreateApplicationComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     // We will auto select endpoint/org/space that have been selected on the app wall.
+    this.cfOrgSpaceService.enableAutoSelectors();
+    // FIXME: This has been broken for a while (setting cf will clear org + space after org and space has been set)
+    // With new tools (set initial/enable auto) this should be easier to fix
     const appWallPaginationState = this.store.select(selectCfPaginationState(applicationEntityType, CfAppsDataSource.paginationKey));
     this.paginationStateSub = appWallPaginationState.pipe(filter(pag => !!pag), first(), tap(pag => {
       const { cf, org, space } = pag.clientPagination.filter.items;
       if (cf) {
         this.cfOrgSpaceService.cf.select.next(cf);
       }
       if (cf && org) {
-
         this.cfOrgSpaceService.org.select.next(org);
       }
       if (cf && org && space) {

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/...ponents/create-application/create-application-step1/create-application-step1.component.ts b/...ponents/create-application/create-application-step1/create-application-step1.component.ts
@@ -49,7 +49,7 @@ export class CreateApplicationStep1Component implements OnInit, AfterContentInit
       space: this.cfOrgSpaceService.space.select.getValue()
     }));
     return of({ success: true });
-  }
+  };
 
   ngOnInit() {
     if (this.route.root.snapshot.queryParams.endpointGuid) {

diff --git a/...packages/cloud-foundry/src/shared/components/list/list-types/app/cf-app-config.service.ts b/...packages/cloud-foundry/src/shared/components/list/list-types/app/cf-app-config.service.ts
@@ -48,13 +48,14 @@ export class CfAppConfigService extends ListConfig<APIResource> implements IList
 
     // Apply the initial cf guid to the data source. Normally this is done via applying the selection to the filter... however this is too
     // late for maxedResult world
-    this.initialised$ = this.cfOrgSpaceService.cf.loading$.pipe(
+    this.initialised$ = this.cfOrgSpaceService.isLoading$.pipe(
       filter(isLoading => !isLoading),
       switchMap(() => this.cfOrgSpaceService.cf.list$),
       first(),
       map(cfs => {
         const cfGuid = cfs.length === 1 ? cfs[0].guid : null;
         this.appsDataSource = new CfAppsDataSource(this.store, this, undefined, undefined, undefined, cfGuid);
+        this.cfOrgSpaceService.setInitialValuesFromAction(this.appsDataSource.action, 'cf', 'org', 'space');
         return true;
       })
     );

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,7 @@ export class CfRoutesListConfigService extends CfRoutesListConfigBase implements
       map(loading => !loading),
       startWith(true)
     );
+
+    cfOrgSpaceService.cf.select.next(cfService.cfGuid);
   }
 }
diff --git a/...ed/components/list/list-types/services-wall/service-instances-wall-list-config.service.ts b/...ed/components/list/list-types/services-wall/service-instances-wall-list-config.service.ts
@@ -91,6 +91,7 @@ export class ServiceInstancesWallListConfigService extends CfServiceInstancesLis
       breadcrumbs: 'service-wall'
     };
 
+    this.cfOrgSpaceService.setInitialValuesFromAction(this.dataSource.masterAction, 'cf', 'org', 'space');
     this.getInitialised = () => combineLatest(
       cfOrgSpaceService.cf.list$,
       cfOrgSpaceService.org.list$,