Merged in feature/SHIBUI-1347 (pull request #331)

SHIBUI-1347 Updated metadata header

ui/package.json

@@ -73,6 +73,7 @@
     "karma-jasmine-html-reporter": "^1.4.2",
     "karma-spec-reporter": "0.0.32",
     "ncp": "^2.0.0",
+    "node-sass": "^4.12.0",
     "path": "^0.12.7",
     "ts-node": "~3.2.0",
     "tslint": "~5.3.2",

ui/src/app/app.component.html

@@ -21,26 +21,19 @@
                     <translate-i18n key="action.add-new">Add New</translate-i18n>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="addNewDropdown">
-                    <a class="nav-link"
-                        routerLink="/metadata/resolver/new"
-                        routerLinkActive="active"
-                        queryParamsHandling="preserve"
-                        [attr.aria-label]="'action.add-new-source' | translate"
-                        role="button">
-                        <i class="fa fa-cube fa-fw" aria-hidden="true"></i>
-                        &nbsp;
-                        <translate-i18n key="label.metadata-source">Metadata Source</translate-i18n>
-                    </a>
-                    <a class="nav-link"
-                        routerLink="/metadata/provider/wizard"
-                        routerLinkActive="active"
-                        [attr.aria-label]="'action.add-new-provider' | translate"
-                        role="button"
-                        *ngIf="isAdmin$ | async">
-                        <i class="fa fa-cubes fa-fw" aria-hidden="true"></i>
-                        &nbsp;
-                        <translate-i18n key="label.metadata-provider">Metadata Provider</translate-i18n>
-                    </a>
+                    <ng-container *ngFor="let action of nav$ | async">
+                        <a  href=""
+                            class="nav-link"
+                            (click)="action.action($event)"
+                            [attr.aria-label]="action.label | translate"
+                            role="button">
+                            <ng-container *ngIf="action.icon">
+                                <i class="fa fa-fw" [ngClass]="action.icon"></i>
+                                &nbsp;
+                            </ng-container>
+                            {{ action.content | translate }}
+                        </a>
+                    </ng-container>
                 </div>
             </li>
             <li class="nav-item">

ui/src/app/app.component.scss

@@ -16,12 +16,12 @@ nav.navbar {
 
 @media only screen and (min-width: 1024px) {
     .pad-content {
-        padding: 1rem 3rem;
+        padding: 0 3rem;
     }
 }
 
 @media only screen and (min-width: 1200px) {
     .pad-content {
-        padding: 2rem 5rem;
+        padding: 0 5rem;
     }
 }

ui/src/app/app.component.spec.ts

@@ -9,6 +9,8 @@ import { NotificationModule } from './notification/notification.module';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { MockTranslatePipe, MockI18nService, MockI18nModule } from '../testing/i18n.stub';
 import { I18nService } from './i18n/service/i18n.service';
+import { NavigationService } from './core/service/navigation.service';
+import { NavigationServiceStub } from '../testing/navigation-service.stub';
 
 @Component({
     template: `
@@ -30,7 +32,8 @@ describe('AppComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             providers: [
-                {provide: I18nService, useClass: MockI18nService }
+                {provide: I18nService, useClass: MockI18nService },
+                { provide: NavigationService, useValue: NavigationServiceStub }
             ],
             imports: [
                 NgbDropdownModule,

ui/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
 
 import { Store } from '@ngrx/store';
 
@@ -12,6 +12,9 @@ import { SetLocale } from './i18n/action/message.action';
 import { brand } from './app.brand';
 import { Brand } from './core/model/brand';
 import { UserLoadRequestAction } from './core/action/user.action';
+import { Router } from '@angular/router';
+import { NavigationService } from './core/service/navigation.service';
+import { NavigationAction } from './core/model/action';
 
 @Component({
     selector: 'app-root',
@@ -26,23 +29,39 @@ export class AppComponent implements OnInit {
     today = new Date();
     year = new Date().getFullYear();
     isAdmin$: Observable<boolean>;
-
     brand: Brand = brand;
+    nav$: Observable<NavigationAction[]>;
 
     formatter = v => v && v.build ? `${v.build.version}-${v.git.commit.id}` : '';
 
     constructor(
         private store: Store<fromRoot.State>,
-        private i18nService: I18nService
+        private i18nService: I18nService,
+        private router: Router,
+        private navService: NavigationService
     ) {
         this.version$ = this.store.select(fromRoot.getVersionInfo);
         this.formatted$ = this.version$.pipe(map(this.formatter));
         this.isAdmin$ = this.store.select(fromRoot.isCurrentUserAdmin);
+
+        this.nav$ = this.navService.emitter;
     }
 
     ngOnInit(): void {
         this.store.dispatch(new UserLoadRequestAction());
         this.store.dispatch(new VersionInfoLoadRequestAction());
         this.store.dispatch(new SetLocale(this.i18nService.getCurrentLocale()));
+
+        /*
+        this.router
+            .events
+            .pipe(
+                catchError(err => {
+                    console.error(err);
+                    return err;
+                })
+            )
+            .subscribe((ev) => console.log(ev));
+        */
     }
 }

ui/src/app/app.module.ts

@@ -25,6 +25,7 @@ import { WizardModule } from './wizard/wizard.module';
 import { FormModule } from './schema-form/schema-form.module';
 import { environment } from '../environments/environment.prod';
 import { I18nModule } from './i18n/i18n.module';
+import { NavigationService } from './core/service/navigation.service';
 
 @NgModule({
     declarations: [
@@ -58,6 +59,7 @@ import { I18nModule } from './i18n/i18n.module';
     ],
     providers: [
         NavigatorService,
+        NavigationService,
         { provide: RouterStateSerializer, useClass: CustomRouterStateSerializer },
         {
             provide: HTTP_INTERCEPTORS,

ui/src/app/core/model/action.ts

@@ -0,0 +1,7 @@
+export interface NavigationAction {
+    action: ($event: Event) => void;
+    category: string;
+    label: string;
+    content: string;
+    icon?: string;
+}

ui/src/app/core/service/navigation.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { NavigationAction } from '../model/action';
+
+@Injectable()
+export class NavigationService {
+
+    private actions: { [name: string]: NavigationAction} = {};
+    private subj: BehaviorSubject<NavigationAction[]>;
+    private obs: Observable<NavigationAction[]>;
+
+    constructor() {
+        this.subj = new BehaviorSubject<NavigationAction[]>(this.actionList);
+        this.obs = this.subj.asObservable();
+    }
+
+    get actionList(): NavigationAction[] {
+        return Object.values(this.actions);
+    }
+
+    get emitter(): Observable<NavigationAction[]> {
+        return this.obs;
+    }
+
+    addAction(name: string, action: NavigationAction): NavigationAction[] {
+        console.log(this.actions);
+        this.actions[name] = action;
+        this.subj.next(this.actionList);
+        return this.actionList;
+    }
+}

ui/src/app/metadata/configuration/component/metadata-header.component.html

@@ -1,18 +1,15 @@
 <div class="card enabled-status" *ngIf="version">
     <div class="card-body">
-        <h2 class="card-title version-title">
-            <translate-i18n key="label.version">Version</translate-i18n> {{ versionNumber }}
-        </h2>
-        <p class="card-text version-details">
+        <h3 class="card-title version-title">
             <translate-i18n key="label.saved">Saved</translate-i18n>&nbsp;
             <span class="save-date">{{ version.date | date }}</span>,
             <translate-i18n key="label.by">by</translate-i18n>&nbsp;
             <span class="author">{{ version.creator }}</span>
-        </p>
+        </h3>
         <p class="card-text">
             <span class="badge badge-primary" *ngIf="isEnabled" translate="value.enabled">Enabled</span>
-            &nbsp;
             <span class="badge badge-danger" *ngIf="!isEnabled" translate="value.disabled">Disabled</span>
+            &nbsp;
             <span class="badge badge-primary" *ngIf="isCurrent" translate="value.current">Current</span>
         </p>
     </div>

ui/src/app/metadata/configuration/configuration.module.ts

@@ -23,6 +23,7 @@ import { MetadataHistoryEffects } from './effect/history.effect';
 import { MetadataHistoryService } from './service/history.service';
 import { MetadataHistoryComponent } from './container/metadata-history.component';
 import { HistoryListComponent } from './component/history-list.component';
+import { DomainModule } from '../domain/domain.module';
 
 @NgModule({
     declarations: [
@@ -43,7 +44,8 @@ import { HistoryListComponent } from './component/history-list.component';
         CommonModule,
         I18nModule,
         NgbPopoverModule,
-        RouterModule
+        RouterModule,
+        DomainModule
     ],
     exports: [],
     providers: []

ui/src/app/metadata/configuration/configuration.values.ts

@@ -5,6 +5,11 @@ export enum PATHS {
     provider = 'MetadataResolvers'
 }
 
+export enum TYPES {
+    resolver = 'resolver',
+    provider = 'provider'
+}
+
 export const DEFINITIONS = {
     resolver: MetadataSourceEditor
 };

ui/src/app/metadata/configuration/container/configuration.component.html

@@ -1,16 +1,19 @@
 <div class="container-fluid p-3">
-    <section class="section" aria-label="View Metadata Version History" tabindex="0">
-        <div class="section-header bg-info p-2 text-white">
-            <div class="row justify-content-between">
-                <div class="col-md-12">
-                    <span class="display-6">
-                        <i class="fa fa-fw fa-gears"></i>
-                        <translate-i18n key="label.metadata-resolver-history">Metadata resolver history</translate-i18n>
-                    </span>
-                </div>
-            </div>
-        </div>
-        <div class="section-body p-4 border border-top-0 border-info">
+    <section class="section" tabindex="0">
+        <div class="section-body px-4 pb-4 border border-info">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb breadcrumb-bar">
+                    <li class="breadcrumb-item">
+                        <a [routerLink]="['/dashboard']" translate="action.dashboard">Dashboard</a>
+                    </li>
+                    <li class="breadcrumb-item active" aria-current="page">
+                        <span class="display-6">
+                            {{ name$ | async }}
+                        </span>
+                    </li>
+                </ol>
+            </nav>
+            <h2 class="mb-4">Source Configuration</h2>
             <router-outlet></router-outlet>
         </div>
     </section>

ui/src/app/metadata/configuration/container/configuration.component.ts

@@ -1,12 +1,12 @@
-import { Store } from '@ngrx/store';
 import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { takeUntil, map, withLatestFrom, filter } from 'rxjs/operators';
+import { Store } from '@ngrx/store';
 import { Observable, Subject } from 'rxjs';
-import { ActivatedRoute, Params } from '@angular/router';
 
 import * as fromConfiguration from '../reducer';
-import { MetadataConfiguration } from '../model/metadata-configuration';
-import { takeUntil, map, withLatestFrom, filter } from 'rxjs/operators';
-import { LoadMetadataRequest, ClearConfiguration, LoadXmlRequest } from '../action/configuration.action';
+
+import { LoadMetadataRequest, ClearConfiguration } from '../action/configuration.action';
 import { LoadHistoryRequest, ClearHistory, SelectVersion } from '../action/history.action';
 import * as fromReducer from '../reducer';
 
@@ -19,6 +19,8 @@ import * as fromReducer from '../reducer';
 export class ConfigurationComponent implements OnDestroy {
     private ngUnsubscribe: Subject<void> = new Subject<void>();
 
+    name$: Observable<string>;
+
     constructor(
         private store: Store<fromConfiguration.ConfigurationState>,
         private routerState: ActivatedRoute
@@ -49,6 +51,13 @@ export class ConfigurationComponent implements OnDestroy {
                 this.store.dispatch(new SelectVersion(version));
             }
         });
+
+        this.name$ = this.store
+            .select(fromReducer.getConfigurationModel)
+            .pipe(
+                filter(model => !!model),
+                map(model => model ? ('serviceProviderName' in model) ? model.serviceProviderName : model.name : false)
+            );
     }
 
     ngOnDestroy() {

ui/src/app/metadata/configuration/container/metadata-options.component.html

@@ -4,11 +4,13 @@
         [version]="version$ | async"
         [versionNumber]="versionNumber$ | async"
         [isCurrent]="isCurrent$ | async"></metadata-header>
-    <div class="px-3 my-3 d-flex justify-content-between">
+    <div class="px-3 my-3 d-flex justify-content-end">
+        <!--
         <a class="btn btn-link" routerLink="../history">
             <i class="fa fa-history sr-hidden"></i>&nbsp;
             <translate-i18n key="action.version-history">Version History</translate-i18n>
         </a>
+        -->
         <div class="btn-group">
             <a class="btn" routerLink="../options" routerLinkActive="btn-primary" translate="action.options">Options</a>
             <a class="btn" routerLink="../xml" routerLinkActive="btn-primary" translate="action.xml">XML</a>

ui/src/app/metadata/configuration/effect/configuration.effect.ts

@@ -44,6 +44,12 @@ export class MetadataConfigurationEffects {
         )
     );
 
+    @Effect({dispatch: false})
+    loadMetadataError$ = this.actions$.pipe(
+        ofType<LoadMetadataError>(ConfigurationActionTypes.LOAD_METADATA_ERROR),
+        tap(action => console.log(action))
+    );
+
     @Effect()
     loadMetadataXml$ = this.actions$.pipe(
         ofType<LoadMetadataRequest>(ConfigurationActionTypes.LOAD_METADATA_REQUEST),