Skip to content

Commit

Permalink
SHIBUI-1408 Added toggle for displaying only changes in comparison
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmathis
rmathis committed Sep 12, 2019
1 parent 0d0e9ed commit 9d2b7c1
Show file tree
Hide file tree
Showing 10 changed files with 414 additions and 103 deletions.
34 changes: 20 additions & 14 deletions ui/src/app/metadata/configuration/component/metadata-configuration.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,26 @@ <h2 class="title h4 m-0 flex-grow-1">
</div>
</div>
<div class="p-2">
<div class="d-flex border-bottom border-light border-2 py-2">
<strong [ngStyle]="{'width': width}" translate="label.option">Option</strong>
<strong *ngFor="let date of configuration.dates" [ngStyle]="{'width': width}">
<translate-i18n key="label.value" *ngIf="configuration.dates.length <= 1">Value</translate-i18n>
<span *ngIf="configuration.dates.length > 1">{{ date | date:DATE_FORMAT }}</span>
</strong>
</div>
<object-property
class="d-block"
*ngIf="section"
[property]="section"
[columns]="configuration.dates.length"
(preview)="onPreview($event)">
</object-property>
<ng-container *ngIf="section && section.properties && section.properties.length">
<div class="d-flex border-bottom border-light border-2 py-2">
<strong [ngStyle]="{'width': width}" translate="label.option">Option</strong>
<strong *ngFor="let date of configuration.dates" [ngStyle]="{'width': width}">
<translate-i18n key="label.value" *ngIf="configuration.dates.length <= 1">Value</translate-i18n>
<span *ngIf="configuration.dates.length > 1">{{ date | date:DATE_FORMAT }}</span>
</strong>
</div>
<object-property
class="d-block"
[property]="section"
[columns]="configuration.dates.length"
(preview)="onPreview($event)">
</object-property>
</ng-container>
<ng-container *ngIf="!section || !section.properties || !section.properties.length">
<div class="alert">
No Changes
</div>
</ng-container>
</div>
</div>
</section>
Expand Down
26 changes: 6 additions & 20 deletions ui/src/app/metadata/configuration/component/property/array-property.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,6 @@
</div>
</ng-container>
</div>
<ng-container *ngFor="let version of property.value">
<div *ngIf="version && version[i]"
[ngbPopover]="version[i][prop]"
triggers="mouseenter:mouseleave"
container="body"
[ngStyle]="{'width': width}"
class="text-truncate"
popoverClass="popover-lg popover-info">
{{ version[i][prop] }}
</div>
<div *ngIf="!version || !version[i]" [ngStyle]="{'width': width}">
-
</div>
</ng-container>
</div>
</div>
<ng-container *ngIf="property.items.type === 'string'" [ngSwitch]="getItemType(property)">
Expand All @@ -47,18 +33,18 @@
<div *ngIf="!property.widget || !property.widget.id">
<ng-template [ngTemplateOutlet]="listref"></ng-template>
</div>
<div *ngIf="property.widget && property.widget.dataUrl">
<div *ngFor="let attr of attributeList$ | async"
<div *ngIf="property.widget && property.widget.data">
<div *ngFor="let item of dataList"
class="d-flex justify-content-start border-bottom border-light"
[ngClass]="{'bg-diff': isDifferent(attr.key, property.value || [])}">
<span class="p-2" role="term" [translate]="attr.label" [ngStyle]="{'width': width}">{{ attr.label }}</span>
[ngClass]="{'bg-diff': property.differences && item.differences}">
<span class="p-2" role="term" [translate]="item.label" [ngStyle]="{'width': width}">{{ item.label }}</span>
<div *ngFor="let v of property.value"
class="py-2"
[ngStyle]="{'width': width}">
<span *ngIf="v && v.indexOf(attr.key) > -1" translate="value.true">
<span *ngIf="v && v.indexOf(item.key) > -1" translate="value.true">
true
</span>
<span *ngIf="!v || !(v.indexOf(attr.key) > -1)" translate="value.false">
<span *ngIf="!v || !(v.indexOf(item.key) > -1)" translate="value.false">
false
</span>
</div>
Expand Down
39 changes: 2 additions & 37 deletions ui/src/app/metadata/configuration/component/property/array-property.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,22 +67,9 @@ describe('Array Property Component', () => {
expect(app).toBeTruthy();
}));

describe('isDifferent method', () => {
it('should return true if the value is different between any of the lists', () => {
expect(app.isDifferent('foo', [['foo', 'bar', 'baz'], ['bar', 'baz']])).toBe(true);
expect(app.isDifferent('bar', [['bar'], null])).toBe(true);
});

it('should return false if the list of values is the same', () => {
expect(app.isDifferent('foo', [['foo', 'baz'], ['foo', 'bar']])).toBe(false);
});
});

describe('attributeList$ getter', () => {
it('should return an empty list when no data or dataUrl is set', () => {
app.attributeList$.subscribe((list) => {
expect(list).toEqual([]);
});
expect(app.dataList).toBeUndefined();
});
it('should return a list of data items from the schema', () => {
const datalist = [
Expand All @@ -98,29 +85,7 @@ describe('Array Property Component', () => {
}
});
fixture.detectChanges();
app.attributeList$.subscribe(list => {
expect(list).toEqual(datalist);
});
});

it('should call the attribute service with a provided dataUrl', () => {
const datalist = [
{ key: 'foo', label: 'foo' },
{ key: 'bar', label: 'bar' },
{ key: 'baz', label: 'baz' },
];
spyOn(service, 'query').and.returnValue(of(datalist));
instance.setProperty({
...instance.property,
widget: {
id: 'datalist',
dataUrl: '/foo'
}
});
fixture.detectChanges();
app.attributeList$.subscribe(list => {
expect(list).toEqual(datalist);
});
expect(app.dataList).toEqual(datalist);
});
});
});
16 changes: 2 additions & 14 deletions ui/src/app/metadata/configuration/component/property/array-property.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,8 @@ export class ArrayPropertyComponent extends ConfigurationPropertyComponent imple
return UriValidator.isUri(str);
}

isDifferent(key: string, model: any): boolean {
return model
.map((value) => value ? value.indexOf(key) > -1 : false)
.reduce((current, val) => current !== val ? true : false, false);
}

get attributeList$(): Observable<{ key: string, label: string }[]> {
if (this.property.widget && this.property.widget.hasOwnProperty('data')) {
return of(this.property.widget.data);
}
if (this.property.widget && this.property.widget.hasOwnProperty('dataUrl')) {
return this.attrService.query(this.property.widget.dataUrl);
}
return of([]);
get dataList(): { key: string, label: string }[] {
return this.property.widget.data;
}
}

8 changes: 5 additions & 3 deletions ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
import { Observable, BehaviorSubject, Subscription } from 'rxjs';
import { Observable, BehaviorSubject, Subscription, combineLatest } from 'rxjs';
import { Store } from '@ngrx/store';
import { ActivatedRoute } from '@angular/router';
import { map, withLatestFrom } from 'rxjs/operators';
import { ConfigurationState, getComparisonConfigurations, getComparisonConfigurationCount } from '../reducer';
import { ConfigurationState, getComparisonConfigurationCount } from '../reducer';
import { CompareVersionRequest, ClearVersions, ViewChanged } from '../action/compare.action';
import { MetadataConfiguration } from '../model/metadata-configuration';
import * as fromReducer from '../reducer';
Expand Down Expand Up @@ -35,10 +35,12 @@ export class MetadataComparisonComponent implements OnDestroy {
map(versions => new CompareVersionRequest(versions))
).subscribe(this.store);

this.versions$ = this.store.select(getComparisonConfigurations);
this.versions$ = this.store.select(fromReducer.getLimitedComparisonConfigurations);
this.numVersions$ = this.store.select(getComparisonConfigurationCount);
this.type$ = this.store.select(fromReducer.getConfigurationModelType);

this.versions$.subscribe(console.log);

this.sub = this.limiter.pipe(
withLatestFrom(this.limited$),
map(([compare, limit]) => new ViewChanged(!limit))
Expand Down
4 changes: 4 additions & 0 deletions ui/src/app/metadata/configuration/model/section.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@ export interface Section {
label: string;
pageNumber: number;
properties: SectionProperty[];
differences?: boolean;
}

export interface SectionProperty {
label: string;
type: string;
value: any[];
differences?: boolean;
properties?: SectionProperty[];
widget?: {
id: string;
data?: any[];
[propertyName: string]: any;
};
}
136 changes: 132 additions & 4 deletions ui/src/app/metadata/configuration/reducer/index.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,89 @@
import {
getConfigurationSectionsFn,
getConfigurationModelNameFn,
getConfigurationModelEnabledFn
getConfigurationModelEnabledFn,
assignValueToProperties,
getLimitedPropertiesFn,
getConfigurationModelTypeFn,
getSelectedVersionNumberFn,
getSelectedIsCurrentFn
} from './index';
import { SCHEMA as schema } from '../../../../testing/form-schema.stub';
import { MetadataSourceEditor } from '../../domain/model/wizards/metadata-source-editor';
import { Metadata } from '../../domain/domain.type';
import { MockMetadataWizard } from '../../../../testing/mockMetadataWizard';

describe('Configuration Reducer', () => {
const model = {
name: 'foo',
'@type': 'MetadataResolver'
serviceEnabled: true,
foo: {
bar: 'bar',
baz: 'baz'
},
list: [
'super',
'cool'
]
};

const definition = new MetadataSourceEditor();
const props = [
{
id: 'name',
items: null,
name: 'label.metadata-provider-name-dashboard-display-only',
properties: [],
type: 'string',
value: null,
widget: { id: 'string', help: 'message.must-be-unique' }
},
{
id: 'serviceEnabled',
items: null,
name: 'serviceEnabled',
properties: [],
type: 'string',
value: null,
widget: { id: 'select', disabled: true }
},
{
id: 'foo',
items: null,
name: 'foo',
type: 'object',
properties: [
{
id: 'bar',
name: 'bar',
type: 'string',
properties: []
},
{
id: 'baz',
name: 'baz',
type: 'string',
properties: []
}
]
},
{
id: 'list',
name: 'list',
type: 'array',
items: {
type: 'string'
},
widget: {
id: 'datalist',
data: [
{ key: 'super', label: 'super' },
{ key: 'cool', label: 'cool' },
{ key: 'notcool', label: 'notcool' }
]
}
}
];

const definition = MockMetadataWizard;

describe('getConfigurationSectionsFn', () => {
it('should parse the schema, definition, and model into a MetadataConfiguration', () => {
Expand All @@ -37,4 +107,62 @@ describe('Configuration Reducer', () => {
expect(getConfigurationModelEnabledFn(null)).toBe(false);
});
});

describe('assignValueToProperties function', () => {
it('should assign appropriate values to the given schema properties', () => {
const assigned = assignValueToProperties([model], props, definition);
expect(assigned[0].value).toEqual(['foo']);
expect(assigned[1].value).toEqual([true]);
});

it('should assign differences when passed multiple models', () => {
const assigned = assignValueToProperties([model, {
...model,
name: 'bar',
list: [
'super',
'notcool'
]
}], props, definition);
expect(assigned[0].differences).toBe(true);
});
});

describe('getLimitedPropertiesFn function', () => {
it('should filter properties without differences', () => {
const assigned = assignValueToProperties([model, {
...model,
name: 'bar'
}], props, definition);
expect(getLimitedPropertiesFn(assigned).length).toBe(1);
});
});

describe('getConfigurationModelTypeFn function ', () => {
it('should return provider type if the object has an @type property', () => {
const md = { '@type': 'FilebackedHttpMetadataResolver' } as Metadata;
expect(getConfigurationModelTypeFn(md)).toBe('FilebackedHttpMetadataResolver');
});
it('should return resolver if no type is detected', () => {
const md = { serviceEnabled: true } as Metadata;
expect(getConfigurationModelTypeFn(md)).toBe('resolver');
});
});

describe('getSelectedVersionNumberFn function ', () => {
it('should return the selected version by id', () => {
const versions = [ { id: 'foo' }, { id: 'bar' } ];
const id = 'foo';
expect(getSelectedVersionNumberFn(versions, id)).toBe(1);
});
});

describe('getSelectedIsCurrentFn function ', () => {
it('should return a boolean of whether the selected version is the most current version', () => {
const versions = [{ id: 'foo' }, { id: 'bar' }];
const id = 'foo';
expect(getSelectedIsCurrentFn(versions[0], versions)).toBe(true);
expect(getSelectedIsCurrentFn(versions[1], versions)).toBe(false);
});
});
});
Loading

0 comments on commit 9d2b7c1

Please sign in to comment.