Merged in feature/SHIBUI-1517 (pull request #391)

Feature/SHIBUI-1517 Approved-by: Dmitriy Kopylenko <dkopylenko@unicon.net>
TIER · Oct 9, 2019 · fe2ea8b · fe2ea8b
2 parents 47e1430 + 900f962
commit fe2ea8b
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 31 deletions.
diff --git a/ui/src/app/app.routing.ts b/ui/src/app/app.routing.ts
@@ -16,7 +16,9 @@ const routes: Routes = [
 @NgModule({
     imports: [RouterModule.forRoot(routes, {
         preloadingStrategy: PreloadAllModules,
-        scrollOffset: [0, 64]
+        scrollOffset: [0, 64],
+        anchorScrolling: 'enabled',
+        scrollPositionRestoration: 'enabled'
     })],
     exports: [RouterModule]
 })

diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.html b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -44,24 +44,26 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
             <span class="sr-only">Loading...</span>
         </div>
     </ng-container>
-    <div *ngIf="kind === 'provider'" id="filters">
-        <div class="numbered-header d-flex justify-content-start bg-light align-items-center">
-            <h2 class="title h4 m-0 ml-2 flex-grow-1">
-                <span class="text" translate="label.filters">Filters</span>
-            </h2>
-            <div class="actions px-2">
-                <a class="btn btn-link edit-link change-view"
-                    [routerLink]="['/', 'metadata', 'provider', id, 'filter', 'new']">
-                    <i class="fa fa-gear"></i>&nbsp;
-                    <span translate="action.add-filter">Add Filter</span>
-                </a>
+    <div id="filters">
+        <ng-container *ngIf="kind === 'provider'">
+            <div class="numbered-header d-flex justify-content-start bg-light align-items-center">
+                <h2 class="title h4 m-0 ml-2 flex-grow-1">
+                    <span class="text" translate="label.filters">Filters</span>
+                </h2>
+                <div class="actions px-2">
+                    <a class="btn btn-link edit-link change-view"
+                        [routerLink]="['/', 'metadata', 'provider', id, 'filter', 'new']">
+                        <i class="fa fa-gear"></i>&nbsp;
+                        <span translate="action.add-filter">Add Filter</span>
+                    </a>
+                </div>
             </div>
-        </div>
-        <filter-configuration-list
-            (onUpdateOrderDown)="updateOrderDown($event)"
-            (onUpdateOrderUp)="updateOrderUp($event)"
-            (onRemove)="removeFilter($event)"
-            [filters]="filters$ | async"></filter-configuration-list>
+            <filter-configuration-list
+                (onUpdateOrderDown)="updateOrderDown($event)"
+                (onUpdateOrderUp)="updateOrderUp($event)"
+                (onRemove)="removeFilter($event)"
+                [filters]="filters$ | async"></filter-configuration-list>
+        </ng-container>
     </div>
     <button class="btn btn-link" (click)="onScrollTo('header')">
         <i class="fa fa-chevron-up sr-hidden"></i>&nbsp;

diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.spec.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.spec.ts
@@ -63,7 +63,7 @@ describe('Metadata Options Page Component', () => {
                 NgbDropdownModule,
                 StoreModule.forRoot({
                     'metadata-configuration': combineReducers(fromConfiguration.reducers),
-                    'filters': combineReducers(fromFilters.reducers),
+                    'filter': combineReducers(fromFilters.reducers),
                     'provider': combineReducers(fromProviders.reducers),
                     'resolver': combineReducers(fromResolvers.reducers)
                 }),

diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.ts
@@ -4,7 +4,7 @@ import { Observable, Subject } from 'rxjs';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Router, ActivatedRoute } from '@angular/router';
 import { ViewportScroller } from '@angular/common';
-import { takeUntil, filter } from 'rxjs/operators';
+import { takeUntil, filter, withLatestFrom } from 'rxjs/operators';
 
 import {
     ConfigurationState,
@@ -63,6 +63,17 @@ export class MetadataOptionsComponent implements OnDestroy {
                 filter(model => !!model)
             )
             .subscribe(p => this.setModel(p));
+
+        const sub = this.filters$.pipe(
+            withLatestFrom(this.activatedRoute.fragment)
+        ).subscribe(([filters, fragment]) => {
+            if (filters && fragment) {
+                setTimeout(() => {
+                    scroller.scrollToAnchor(fragment);
+                    sub.unsubscribe();
+                }, 100);
+            }
+        });
     }
 
     edit(id: string) {

diff --git a/ui/src/app/metadata/filter/effect/collection.effect.ts b/ui/src/app/metadata/filter/effect/collection.effect.ts
@@ -104,7 +104,7 @@ export class FilterCollectionEffects {
         ofType<AddFilterSuccess>(FilterCollectionActionTypes.ADD_FILTER_SUCCESS),
         map(action => action.payload),
         withLatestFrom(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
-        tap(([filter, provider]) => this.router.navigate(['/', 'metadata', 'provider', provider, 'filters']))
+        tap(([filter, provider]) => this.navigateToParent(provider))
     );
 
     @Effect()
@@ -172,7 +172,7 @@ export class FilterCollectionEffects {
         ofType<UpdateFilterSuccess>(FilterCollectionActionTypes.UPDATE_FILTER_SUCCESS),
         map(action => action.payload),
         withLatestFrom(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
-        tap(([filter, provider]) => this.router.navigate(['/', 'metadata', 'provider', provider, 'filters']))
+        tap(([filter, provider]) => this.navigateToParent(provider))
     );
 
     @Effect()
@@ -281,4 +281,20 @@ export class FilterCollectionEffects {
         private store: Store<fromFilter.State>,
         private i18nService: I18nService
     ) { }
+
+    navigateToParent(id) {
+        this.router.navigate(
+            [
+                '/',
+                'metadata',
+                'provider',
+                id,
+                'configuration',
+                'options'
+            ],
+            {
+                fragment: 'filters'
+            }
+        );
+    }
 }
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.html b/ui/src/app/metadata/provider/container/provider-edit.component.html
@@ -38,7 +38,7 @@
                 </button>
                 &nbsp;
                 <button class="btn btn-secondary"
-                    (click)="cancel()" aria-label="Cancel changes, go back to dashboard"
+                    (click)="cancel(provider.resourceId)" aria-label="Cancel changes, go back to dashboard"
                     role="button">
                     <translate-i18n key="action.cancel">Cancel</translate-i18n>
                 </button>

diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.spec.ts b/ui/src/app/metadata/provider/container/provider-edit.component.spec.ts
@@ -104,10 +104,10 @@ describe('Provider Edit Component', () => {
     });
 
     describe('cancel method', () => {
-        it('should route to the metadata manager', () => {
+        it('should route to the provider', () => {
             spyOn(router, 'navigate');
             spyOn(app, 'clear');
-            app.cancel();
+            app.cancel('foo');
             expect(router.navigate).toHaveBeenCalled();
             expect(app.clear).toHaveBeenCalled();
         });

diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.ts b/ui/src/app/metadata/provider/container/provider-edit.component.ts
@@ -90,9 +90,9 @@ export class ProviderEditComponent implements OnDestroy, CanComponentDeactivate
         this.store.dispatch(new UpdateProviderRequest(this.latest));
     }
 
-    cancel(): void {
+    cancel(id): void {
         this.clear();
-        this.router.navigate(['dashboard', 'metadata', 'manager', 'providers']);
+        this.router.navigate(['/', 'metadata', 'provider', id, 'configuration', 'options']);
     }
 
     canDeactivate(

diff --git a/ui/src/app/metadata/provider/container/provider-filter-list.component.html b/ui/src/app/metadata/provider/container/provider-filter-list.component.html
@@ -24,7 +24,12 @@
                     </a>
                 </editor-nav>
             </div>
-            <div class="col-6 col-lg-12 order-2 text-right">
+            <div class="col-6 col-lg-12 order-2 text-right d-flex justify-content-end justify-content-lg-between">
+                <a class="btn btn-link"
+                    [routerLink]="['/', 'metadata', 'provider', (provider$ | async).resourceId, 'configuration', 'options']">
+                    <i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp;
+                    Return to Provider
+                </a>
                 <a [routerLink]="['../', 'filter', 'new']"
                     class="btn btn-success">
                     <i class="fa fa-plus-circle"></i>

diff --git a/ui/src/app/metadata/provider/effect/collection.effect.ts b/ui/src/app/metadata/provider/effect/collection.effect.ts
@@ -136,7 +136,7 @@ export class CollectionEffects {
     createProviderSuccessRedirect$ = this.actions$.pipe(
         ofType<AddProviderSuccess>(ProviderCollectionActionTypes.ADD_PROVIDER_SUCCESS),
         map(action => action.payload),
-        tap(provider => this.router.navigate(['dashboard', 'metadata', 'manager', 'providers']))
+        tap(provider => this.navigateToProvider(provider.resourceId))
     );
 
     @Effect()
@@ -149,7 +149,7 @@ export class CollectionEffects {
             this.providerService
                 .update(provider)
                 .pipe(
-                    map(p => new UpdateProviderSuccess({id: p.id, changes: p})),
+                    map(p => new UpdateProviderSuccess({id: p.resourceId, changes: p})),
                     catchError((e) => e.status === 409 ? of(new UpdateProviderConflict(provider)) : of(new UpdateProviderFail(e.error)))
                 )
         )
@@ -168,7 +168,7 @@ export class CollectionEffects {
         map(action => action.payload),
         tap(provider => {
             this.store.dispatch(new ClearProvider());
-            this.router.navigate(['dashboard', 'metadata', 'manager', 'providers']);
+            this.navigateToProvider(provider.id);
         })
     );
 
@@ -269,4 +269,8 @@ export class CollectionEffects {
         private contentionService: ContentionService,
         private i18nService: I18nService
     ) { }
+
+    navigateToProvider(id) {
+        this.router.navigate(['/', 'metadata', 'provider', id, 'configuration', 'options']);
+    }
 }