Merged in bugfix/SHIBUI-792 (pull request #177)

SHIBUI-792 Fixed responsive nav in provider editor

Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com>
Approved-by: Ryan Mathis <rmathis@unicon.net>

ui/src/app/metadata/provider/component/provider-editor-nav.component.html

@@ -1,4 +1,4 @@
-<ng-container  [ngSwitch]="format">
+<ng-container [ngSwitch]="format">
     <div class="dropdown" ngbDropdown #dropdown="ngbDropdown" *ngSwitchCase="formats.DROPDOWN">
         <button
             class="btn btn-secondary"
@@ -8,30 +8,32 @@
             ngbDropdownToggle>
             <i class="fa fa-fw fa-bars fa-lg" aria-hidden="true"></i>
             <span class="d-inline-block mx-2">
-                <i18n-text [key]="currentPage$ | async"></i18n-text>
+                <i18n-text [key]="currentLabel$ | async"></i18n-text>
             </span>
         </button>
         <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" ngbDropdownMenu>
-            <a class="dropdown-item"
-                [routerLink]="['../', 'filters']"
-                routerLinkActive="active"
-                aria-label="Filter List"
-                role="button">
-                <i18n-text key="Filter List"></i18n-text>
-            </a>
             <a *ngFor="let route of routes$ | async"
                 href=""
                 class="dropdown-item"
-                [routerLink]="['./', route.path]"
+                [routerLink]="['../', 'edit', route.path]"
                 [ngClass]="{'active': (currentPage$ | async) === route.path}"
                 [attr.aria-label]="route.label"
                 role="button">
                 <i18n-text [key]="route.label"></i18n-text>
                 <valid-form-icon *ngIf="(invalidForms$ | async).indexOf(route.path) > -1" status="INVALID"></valid-form-icon>
             </a>
+            <div class="dropdown-divider"></div>
+            <a href=""
+                class="dropdown-item"
+                [routerLink]="['../', 'filters']"
+                routerLinkActive="active"
+                aria-label="Filter List"
+                role="button">
+                <i18n-text key="Filter List"></i18n-text>
+            </a>
         </div>
     </div>
-    <ng-container  *ngSwitchCase="formats.TABS">
+    <ng-container *ngSwitchCase="formats.TABS">
         <nav class="nav nav-pills flex-column" role="navigation">
             <a *ngFor="let route of routes$ | async"
                 href=""

ui/src/app/metadata/provider/component/provider-editor-nav.component.spec.ts

@@ -0,0 +1,96 @@
+import { Component, ViewChild } from '@angular/core';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { StoreModule, Store, combineReducers } from '@ngrx/store';
+
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+
+import * as fromRoot from '../reducer';
+import { SchemaFormModule, WidgetRegistry, DefaultWidgetRegistry } from 'ngx-schema-form';
+import * as fromWizard from '../../../wizard/reducer';
+import { ProviderEditorNavComponent, NAV_FORMATS } from './provider-editor-nav.component';
+import { I18nTextComponent } from '../../../shared/component/i18n-text.component';
+import { ValidFormIconComponent } from '../../../shared/component/valid-form-icon.component';
+import { WizardStep } from '../../../wizard/model';
+
+@Component({
+    template: `
+        <provider-editor-nav [format]="format.TABS"></provider-editor-nav>
+    `
+})
+class TestHostComponent {
+    @ViewChild(ProviderEditorNavComponent)
+    public componentUnderTest: ProviderEditorNavComponent;
+
+    public format = NAV_FORMATS;
+}
+
+describe('Provider Editor Nav Component', () => {
+
+    let fixture: ComponentFixture<TestHostComponent>;
+    let instance: TestHostComponent;
+    let app: ProviderEditorNavComponent;
+    let store: Store<fromRoot.State>;
+
+    let step: WizardStep = {
+        id: 'common',
+        label: 'Common Attributes',
+        index: 2,
+        initialValues: [],
+        schema: 'assets/schema/provider/filebacked-http-common.schema.json'
+    };
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NgbDropdownModule.forRoot(),
+                RouterTestingModule,
+                SchemaFormModule.forRoot(),
+                StoreModule.forRoot({
+                    provider: combineReducers(fromRoot.reducers),
+                    wizard: combineReducers(fromWizard.reducers)
+                })
+            ],
+            declarations: [
+                ProviderEditorNavComponent,
+                I18nTextComponent,
+                ValidFormIconComponent,
+                TestHostComponent
+            ],
+            providers: [
+                { provide: WidgetRegistry, useClass: DefaultWidgetRegistry }
+            ]
+        }).compileComponents();
+
+        store = TestBed.get(Store);
+        spyOn(store, 'dispatch');
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        instance = fixture.componentInstance;
+        app = instance.componentUnderTest;
+        fixture.detectChanges();
+    }));
+
+    it('should instantiate the component', async(() => {
+        expect(app).toBeTruthy();
+    }));
+
+    describe('getFilterId', () => {
+        it('should return a string based on provided step', () => {
+            expect(app.getFilterId(step)).toEqual(step.id);
+        });
+
+        it('should return "Filter List" when step is null', () => {
+            expect(app.getFilterId(null)).toEqual('filters');
+        });
+    });
+
+    describe('getFilterLabel', () => {
+        it('should return a string based on provided step', () => {
+            expect(app.getFilterLabel(step)).toEqual(step.label);
+        });
+        it('should return "Filter List" when step is null', () => {
+            expect(app.getFilterLabel(null)).toEqual('Filter List');
+        });
+    });
+});

ui/src/app/metadata/provider/component/provider-editor-nav.component.ts

@@ -28,18 +28,25 @@ export class ProviderEditorNavComponent {
     formats = NAV_FORMATS;
 
     currentPage$: Observable<string>;
+    currentLabel$: Observable<string>;
+    current$: Observable<WizardStep>;
+
     index$: Observable<string>;
     invalidForms$: Observable<string[]>;
     routes$: Observable<{ path: string, label: string }[]>;
 
+    getFilterId = p => p ? p.id : 'filters';
+    getFilterLabel = p => p ? p.label : 'Filter List';
+
     constructor(
         private store: Store<fromProvider.ProviderState>
     ) {
         this.index$ = this.store.select(fromWizard.getWizardIndex).pipe(skipWhile(i => !i));
         this.routes$ = this.store.select(fromWizard.getRoutes);
-        this.currentPage$ = this.store.select(fromWizard.getCurrent).pipe(
-            map(p => p ? p.id : 'filters')
-        );
+        this.current$ = this.store.select(fromWizard.getCurrent);
+        this.currentPage$ = this.current$.pipe(map(this.getFilterId));
+
+        this.currentLabel$ = this.current$.pipe(map(this.getFilterLabel));
         this.invalidForms$ = this.store.select(fromProvider.getInvalidEditorForms);
     }
 

ui/src/app/wizard/reducer/index.ts

@@ -66,4 +66,4 @@ export const getNext = createSelector(getWizardIndex, getWizardDefinition, getNe
 export const getLast = createSelector(getWizardIndex, getWizardDefinition, getLastFn);
 export const getModel = createSelector(getCurrent, getModelFn);
 
-export const getRoutes = createSelector(getWizardDefinition, d => d.steps.map(step => ({ path: step.id, label: step.label })));
+export const getRoutes = createSelector(getWizardDefinition, d => d ? d.steps.map(step => ({ path: step.id, label: step.label })) : [] );