Merged in feature/SHIBUI-574 (pull request #117)

Feature/SHIBUI-574 * feature/SHIBUI-574: Adding provider item component and styling * feature/SHIBUI-574: Finished adding provider items with edit button (not working) into the UI * feature/SHIBUI-574: Removed JOSN list from UI (for development purposes only) * SHIBUI-574: Resolving merge conflict (accepting mine); * SHIBUI-574: Correcting status label; added enabled/disabled icons in provider list on the dashboard; * SHIBUI-574/SHIBUI-620: Refactored based on PR feedback; added reorder UI; * SHIBUI-574: Added filter button the provider item (dashboard); * SHIBUI-574 Updated Resolver Item list * SHIBUI-574 Fixed bad input * SHIBUI-574 Added tests to provider dashboard components * feature/SHIBUI-574: Added my code for unit testing (not complete) * SHIBUI-574 Fixed test Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com>
TIER · Jul 24, 2018 · 3d47c4b · 3d47c4b
1 parent c066847
commit 3d47c4b
Show file tree

Hide file tree

Showing 18 changed files with 375 additions and 34 deletions.
diff --git a/ui/src/app/metadata/domain/model/metadata-provider.ts b/ui/src/app/metadata/domain/model/metadata-provider.ts
@@ -1,10 +1,13 @@
 import {
     MetadataBase,
 } from '../model';
+import { MetadataFilter } from './metadata-filter';
 
 export interface MetadataProvider extends MetadataBase {
     name: string;
     '@type': string;
     enabled: boolean;
     resourceId: string;
+    sortKey: number;
+    metadataFilters: MetadataFilter[];
 }
diff --git a/ui/src/app/metadata/manager/component/entity-item.component.spec.ts b/ui/src/app/metadata/manager/component/entity-item.component.spec.ts
@@ -7,8 +7,6 @@ describe('Resolver List item', () => {
     let fixture: ComponentFixture<EntityItemComponent>;
     let instance: EntityItemComponent;
 
-    let resolver = new FileBackedHttpMetadataResolver({ entityId: 'foo', serviceProviderName: 'bar' });
-
     beforeEach(() => {
         TestBed.configureTestingModule({
             providers: [],
@@ -20,7 +18,6 @@ describe('Resolver List item', () => {
 
         fixture = TestBed.createComponent(EntityItemComponent);
         instance = fixture.componentInstance;
-        instance.entity = resolver;
     });
 
     it('should compile', () => {

diff --git a/ui/src/app/metadata/manager/component/entity-item.component.ts b/ui/src/app/metadata/manager/component/entity-item.component.ts
@@ -6,18 +6,14 @@ import { MetadataTypes } from '../../domain/domain.type';
 @Component({
     selector: 'entity-item',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: './entity-item.component.html',
-    styleUrls: ['./entity-item.component.scss']
+    template: '',
+    styleUrls: []
 })
 export class EntityItemComponent {
-
     types = MetadataTypes;
-
-    @Input() entity: MetadataEntity;
     @Input() isOpen: boolean;
-    @Output() select = new EventEmitter<MetadataEntity>();
-    @Output() toggle = new EventEmitter<MetadataEntity>();
-    @Output() preview = new EventEmitter<MetadataEntity>();
-    @Output() delete = new EventEmitter<MetadataEntity>();
-
-} /* istanbul ignore next */
+    @Output() select = new EventEmitter();
+    @Output() toggle = new EventEmitter();
+    @Output() preview = new EventEmitter();
+    @Output() delete = new EventEmitter();
+}
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.html b/ui/src/app/metadata/manager/component/provider-item.component.html
@@ -0,0 +1,79 @@
+<div class="card">
+    <div class="card-header" (click)="toggle.emit(provider)" (keydown.space)="toggle.emit(provider)" tabindex="0">
+        <div class="row">
+            <div class="reorder-card">
+                <p class="text-center text-primary font-weight-bold">1</p>
+                <button class="btn btn-link" disabled>
+                    <i class="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
+                </button>
+                <button class="btn btn-link pull-right" disabled>
+                    <i class="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
+                </button>
+            </div>
+            <div class="col-9 clearfix">
+                <div class="w-10 pr-3 pull-left">
+                    <i class="fa fa-fw fa-3x text-primary" [class.fa-caret-right]="!isOpen" [class.fa-caret-down]="isOpen"></i>
+                    &nbsp;
+                    <span class="label-icon sr-hidden">
+                        <i class="fa fa-fw fa-3x text-info fa-cubes"></i>
+                    </span>
+                </div>
+                <div>
+                    {{ provider.name }}
+                    <i *ngIf="!provider.enabled" class="fa fa-fw" [ngClass]="{
+                        'fa-check-circle text-success': provider.enabled,
+                        'fa-times-circle text-danger': !provider.enabled
+                    }"></i>
+                    <small class="d-block">{{ provider['@type'] }}</small>
+                </div>
+            </div>
+            <div class="col-2 text-right">
+                <button class="btn btn-primary btn-filter pull-left">
+                        <i class="fa fa-filter"></i>&nbsp;
+                        <span class="label">Active Filters</span>&nbsp;
+                        <span class="badge badge-light">{{ provider.metadataFilters.length }}</span>
+                </button>
+                <button class="btn btn-link pull-right" (click)="select.emit(provider)" aria-label="Edit selected service provider">
+                    <i class="fa fa-fw fa-edit fa-2x"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <div class="collapse" [ngClass]="{'show': isOpen}">
+        <div class="card-body" tabindex="0">
+            <div class="row">
+                <div class="col-10">
+                    <div class="row">
+                        <div class="col text-right font-weight-bold">
+                            Metadata Provider Name:
+                        </div>
+                        <div class="col">{{ provider.name }}</div>
+                        <div class="col text-right font-weight-bold">
+                            Created Date:
+                        </div>
+                        <div class="col">{{ provider.createdDate | date:'medium' }}</div>
+                    </div>
+                    <div class="row">
+                        <div class="col text-right font-weight-bold">
+                            Metadata Provider Type:
+                        </div>
+                        <div class="col">{{ provider['@type'] }}</div>
+                        <div class="col text-right font-weight-bold">
+                            Metadata Provider Status:
+                        </div>
+                        <div class="col" *ngIf="!provider.enabled">
+                            <i class="fa fa-fw" [ngClass]="{
+                                'fa-check-circle text-success': provider.enabled,
+                                'fa-times-circle text-danger': !provider.enabled
+                            }"></i>
+                            <span *ngIf="provider.enabled" i18n="@@value--provider">Enabled</span>
+                            <span *ngIf="!provider.enabled" i18n="@@value--disabled">Disabled</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.scss b/ui/src/app/metadata/manager/component/provider-item.component.scss
@@ -0,0 +1,44 @@
+@import '../../../../theme/palette';
+
+.card {
+    background-color: rgba($light-grey, 0.5);
+    &:focus {
+        outline: -webkit-focus-ring-color auto 5px;
+    }
+    .btn-link {
+        &:focus {
+            outline: -webkit-focus-ring-color auto 5px;
+        }
+    }
+
+    .label-icon {
+        display: inline-block;
+        min-width: 64px;
+        text-align: center;
+    }
+
+    .reorder-card {
+        width: 65px;
+        margin-left: 20px;
+        background-color: $white;
+        border: 1px solid $gray-400;
+        border-radius: 4px;
+
+        p {
+            margin-bottom: 0;
+            padding-top: 3px;
+            font-size: 1.40rem;
+            line-height: 1;
+        }
+
+        .btn {
+            padding: 2px 5px;
+        }
+    }
+
+    .btn-filter {
+        .label {
+            font-size: .90rem;
+        }
+    }
+}
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.ts b/ui/src/app/metadata/manager/component/provider-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+import { MetadataProvider } from '../../domain/model';
+import { EntityItemComponent } from './entity-item.component';
+
+@Component({
+    selector: 'provider-item',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './provider-item.component.html',
+    styleUrls: ['./provider-item.component.scss']
+})
+
+export class ProviderItemComponent extends EntityItemComponent {
+    @Input() provider: MetadataProvider;
+}
diff --git a/...ager/component/entity-item.component.html → ...er/component/resolver-item.component.html b/...ager/component/entity-item.component.html → ...er/component/resolver-item.component.html
diff --git a/...ager/component/entity-item.component.scss → ...er/component/resolver-item.component.scss b/...ager/component/entity-item.component.scss → ...er/component/resolver-item.component.scss
diff --git a/ui/src/app/metadata/manager/component/resolver-item.component.spec.ts b/ui/src/app/metadata/manager/component/resolver-item.component.spec.ts
@@ -0,0 +1,34 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { EntityItemComponent } from './entity-item.component';
+import { FileBackedHttpMetadataResolver } from '../../domain/entity';
+import { ResolverItemComponent } from './resolver-item.component';
+
+describe('Resolver List item', () => {
+    let fixture: ComponentFixture<ResolverItemComponent>;
+    let instance: ResolverItemComponent;
+
+    let resolver = new FileBackedHttpMetadataResolver({ entityId: 'foo', serviceProviderName: 'bar' });
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [],
+            imports: [
+                NoopAnimationsModule
+            ],
+            declarations: [
+                ResolverItemComponent
+            ],
+        });
+
+        fixture = TestBed.createComponent(ResolverItemComponent);
+        instance = fixture.componentInstance;
+        instance.entity = resolver;
+    });
+
+    it('should compile', () => {
+        fixture.detectChanges();
+
+        expect(fixture).toBeDefined();
+    });
+});
diff --git a/ui/src/app/metadata/manager/component/resolver-item.component.ts b/ui/src/app/metadata/manager/component/resolver-item.component.ts
@@ -0,0 +1,14 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+
+import { MetadataEntity } from '../../domain/model';
+import { EntityItemComponent } from './entity-item.component';
+
+@Component({
+    selector: 'resolver-item',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './resolver-item.component.html',
+    styleUrls: ['./resolver-item.component.scss']
+})
+export class ResolverItemComponent extends EntityItemComponent {
+    @Input() entity: MetadataEntity;
+}
diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
@@ -8,13 +8,17 @@
             </div>
         </div>
         <div class="p-3">
-            <a *ngFor="let provider of providers$ | async"
-                [routerLink]="['/', 'metadata', 'provider', provider.resourceId, 'edit']">
-                {{ provider.name }}
-            </a>
+            <ul class="list-unstyled m-0">
+                <li *ngFor="let provider of providers$ | async; index as i"
+                    [class.mt-2]="i > 0">
+                    <provider-item
+                        [provider]="provider"
+                        [isOpen]="(providersOpen$ | async)[provider.resourceId]"
+                        (select)="edit(provider)"
+                        (toggle)="toggleEntity(provider)">
+                    </provider-item>
+                </li>
+            </ul>
         </div>
     </div>
 </section>
-
-
-
diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts
@@ -0,0 +1,83 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { StoreModule, Store, combineReducers } from '@ngrx/store';
+import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap/pagination/pagination.module';
+import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
+import * as fromDashboard from '../reducer';
+import { ProviderSearchComponent } from '../component/provider-search.component';
+import { DeleteDialogComponent } from '../component/delete-dialog.component';
+import { RouterStub } from '../../../../testing/router.stub';
+import { NgbModalStub } from '../../../../testing/modal.stub';
+import { DashboardProvidersListComponent } from './dashboard-providers-list.component';
+import { MetadataProvider } from '../../domain/model';
+import { ProviderItemComponent } from '../component/provider-item.component';
+import { FileBackedHttpMetadataResolver } from '../../domain/entity';
+
+
+describe('Dashboard Providers List Page', () => {
+    let fixture: ComponentFixture<DashboardProvidersListComponent>;
+    let store: Store<fromDashboard.DashboardState>;
+    let router: Router;
+    let modal: NgbModal;
+    let instance: DashboardProvidersListComponent;
+
+    let provider = <MetadataProvider>{
+            resourceId: 'foo',
+            name: 'bar'
+        };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                { provide: Router, useClass: RouterStub },
+                { provide: NgbModal, useClass: NgbModalStub }
+            ],
+            imports: [
+                NoopAnimationsModule,
+                StoreModule.forRoot({
+                    manager: combineReducers(fromDashboard.reducers),
+                }),
+                ReactiveFormsModule,
+                NgbPaginationModule,
+                NgbModalModule
+            ],
+            declarations: [
+                DashboardProvidersListComponent,
+                ProviderSearchComponent,
+                ProviderItemComponent,
+                DeleteDialogComponent
+            ],
+        });
+
+        fixture = TestBed.createComponent(DashboardProvidersListComponent);
+        instance = fixture.componentInstance;
+        store = TestBed.get(Store);
+        router = TestBed.get(Router);
+        modal = TestBed.get(NgbModal);
+
+        spyOn(store, 'dispatch').and.callThrough();
+    });
+
+    it('should compile', () => {
+        fixture.detectChanges();
+
+        expect(fixture).toBeDefined();
+    });
+
+    describe('toggleProvider method', () => {
+        it('should fire a redux action', () => {
+            instance.toggleEntity(provider);
+            expect(store.dispatch).toHaveBeenCalled();
+        });
+    });
+
+    describe('edit method', () => {
+        it('should route to the edit page', () => {
+            spyOn(router, 'navigate');
+            instance.edit(provider);
+            expect(router.navigate).toHaveBeenCalledWith(['metadata', 'provider', provider.resourceId, 'edit']);
+        });
+    });
+});
diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.ts b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { MetadataProvider } from '../../domain/model';
 import { Observable } from '../../../../../node_modules/rxjs';
 import { Store } from '@ngrx/store';
+
 import { ProviderState, getAllProviders } from '../../provider/reducer';
+import * as fromDashboard from '../reducer';
+import { ToggleEntityDisplay } from '../action/manager.action';
+import { Meta } from '../../../../../node_modules/@angular/platform-browser';
 
 @Component({
     selector: 'dashboard-providers-list',
@@ -12,10 +17,21 @@ import { ProviderState, getAllProviders } from '../../provider/reducer';
 export class DashboardProvidersListComponent {
 
     providers$: Observable<MetadataProvider[]>;
+    providersOpen$: Observable<{ [key: string]: boolean }>;
 
     constructor(
-        private store: Store<ProviderState>
+        private store: Store<ProviderState>,
+        private router: Router
     ) {
         this.providers$ = this.store.select(getAllProviders);
+        this.providersOpen$ = store.select(fromDashboard.getOpenProviders);
+    }
+
+    edit(provider: MetadataProvider): void {
+        this.router.navigate(['metadata', 'provider', provider.resourceId, 'edit']);
+    }
+
+    toggleEntity(provider: MetadataProvider): void {
+        this.store.dispatch(new ToggleEntityDisplay(provider.resourceId));
     }
 }