Merge branch 'master' into feature/SHIBUI-1385-QA

TIER · Sep 16, 2019 · 739bcdb · 739bcdb
2 parents dd1ff72 + caff708
commit 739bcdb
Show file tree

Hide file tree

Showing 23 changed files with 545 additions and 149 deletions.
diff --git a/backend/src/integration/resources/SHIBUI-1333.side b/backend/src/integration/resources/SHIBUI-1333.side
@@ -2045,13 +2045,6 @@
         ["xpath=//section[4]/div/div[2]/object-property/array-property/div/div[3]/div/div[2]", "xpath:position"]
       ],
       "value": "http://test.org/logout2"
-    }, {
-      "id": "e1cba732-dd34-4c73-9d4c-89c440975dd8",
-      "comment": "",
-      "command": "runScript",
-      "target": "window.scrollTo(0,2060)",
-      "targets": [],
-      "value": ""
     }, {
       "id": "fe47ffd2-d2a0-4264-90fe-31b998f81ac2",
       "comment": "",

diff --git a/backend/src/integration/resources/SHIBUI-1334-1.side b/backend/src/integration/resources/SHIBUI-1334-1.side
@@ -2045,13 +2045,6 @@
         ["xpath=//section[4]/div/div[2]/object-property/array-property/div/div[3]/div/div[2]", "xpath:position"]
       ],
       "value": "http://test.org/logout2"
-    }, {
-      "id": "e1cba732-dd34-4c73-9d4c-89c440975dd8",
-      "comment": "",
-      "command": "runScript",
-      "target": "window.scrollTo(0,2060)",
-      "targets": [],
-      "value": ""
     }, {
       "id": "fe47ffd2-d2a0-4264-90fe-31b998f81ac2",
       "comment": "",
@@ -2285,31 +2278,24 @@
         ["xpath=//span[contains(.,'Test Provider')]", "xpath:innerText"]
       ],
       "value": "Test Provider"
-    }, {
-      "id": "d3abb044-064c-4d68-8afa-84cc5f9b987e",
-      "comment": "",
-      "command": "runScript",
-      "target": "window.scrollTo(0,157)",
-      "targets": [],
-      "value": ""
     }, {
       "id": "138ad58b-f0a2-436b-a8b0-43484f4180e6",
       "comment": "",
       "command": "assertText",
-      "target": "css=array-property:nth-child(5) .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(2)",
+      "target": "css=.bg-diff > .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(3)",
       "targets": [
-        ["css=array-property:nth-child(5) .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(2)", "css:finder"],
+        ["css=.bg-diff > .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(3)", "css:finder"],
         ["xpath=//div[2]/div/div[2]", "xpath:position"]
       ],
       "value": "Test User v2"
     }, {
       "id": "17049c95-4724-4521-ac47-6b64bde822aa",
       "comment": "",
       "command": "assertText",
-      "target": "css=array-property:nth-child(5) .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(3)",
+      "target": "css=.py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(4)",
       "targets": [
-        ["css=array-property:nth-child(5) .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(3)", "css:finder"],
-        ["xpath=//div[3]", "xpath:position"]
+        ["css=.py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(4)", "css:finder"],
+        ["xpath=//div/div[3]", "xpath:position"]
       ],
       "value": "Test User"
     }, {

diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
@@ -56,6 +56,7 @@ action.manage=Manage
 action.close=Close
 action.back-to-top=Back to Top
 action.restore=Restore
+action.view-only-changes=View Only Changes
 
 value.enabled=Enabled
 value.disabled=Disabled

diff --git a/ui/src/app/metadata/configuration/action/compare.action.ts b/ui/src/app/metadata/configuration/action/compare.action.ts
@@ -8,7 +8,8 @@ export enum CompareActionTypes {
     COMPARE_METADATA_SUCCESS = '[Compare Version] Compare Version Success',
     COMPARE_METADATA_ERROR = '[Compare Version] Compare Version Error',
     SET_VERSIONS = '[Compare Version] Set Versions',
-    CLEAR_VERSIONS = '[Compare Version] Clear Versions'
+    CLEAR_VERSIONS = '[Compare Version] Clear Versions',
+    SET_VIEW_CHANGED = '[Compare Version] View Changed Only'
 }
 
 export class CompareVersionRequest implements Action {
@@ -35,6 +36,11 @@ export class SetMetadataVersions implements Action {
     constructor(public payload: Metadata[]) { }
 }
 
+export class ViewChanged implements Action {
+    readonly type = CompareActionTypes.SET_VIEW_CHANGED;
+    constructor(public payload: boolean) {  }
+}
+
 export class ClearVersions implements Action {
     readonly type = CompareActionTypes.CLEAR_VERSIONS;
 }
@@ -44,4 +50,5 @@ export type CompareActionsUnion =
     | CompareVersionSuccess
     | CompareVersionError
     | SetMetadataVersions
-    | ClearVersions;
+    | ClearVersions
+    | ViewChanged;
diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.html b/ui/src/app/metadata/configuration/component/metadata-configuration.component.html
@@ -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>

diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.scss b/ui/src/app/metadata/configuration/component/metadata-configuration.component.scss
@@ -0,0 +1,20 @@
+@import '../../../../theme/_palette';
+
+:host /deep/ {
+    .bg-diff {
+        background: #FEE8E9;
+        position: relative;
+        border-color: #CCC !important;
+        &::before {
+            $size: 24px;
+            content: "\f06a";
+            font-family: 'FontAwesome';
+            text-align: center;
+            width: $size;
+            height: $size;
+            position: absolute;
+            left: -$size;
+            top: 0.5rem;
+        }
+    }
+}
diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts b/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts
@@ -8,7 +8,7 @@ import { CONFIG_DATE_FORMAT } from '../configuration.values';
     selector: 'metadata-configuration',
     changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './metadata-configuration.component.html',
-    styleUrls: []
+    styleUrls: ['./metadata-configuration.component.scss']
 })
 export class MetadataConfigurationComponent {
     @Input() configuration: MetadataConfiguration;

diff --git a/ui/src/app/metadata/configuration/component/property/array-property.component.html b/ui/src/app/metadata/configuration/component/property/array-property.component.html
@@ -1,58 +1,64 @@
-<div>
-    <ng-container *ngIf="property.items.type === 'object'">
-        <div class="py-2" role="term" [translate]="property.name">{{ property.name }}</div>
-        <div *ngFor="let item of range; let i = index;" class="py-2 bg-lighter border-top">
-            <div *ngFor="let prop of getKeys(property.items); let n = index;" class="d-flex py-2">
-                <div [ngStyle]="{'width': width}">
-                    <span [translate]="property.items.properties[prop].title">{{ property.items.properties[prop].title }}</span>
-                </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 *ngIf="property.items.type === 'object'" [ngClass]="{'bg-diff': property.differences}">
+    <div class="p-2" role="term" [translate]="property.name">{{ property.name }}</div>
+    <div *ngFor="let item of range; let i = index;" class="py-2 border-top" ngClass="{'bg-diff': !property.differences}">
+        <div *ngFor="let prop of getKeys(property.items); let n = index;" class="d-flex py-2" tabindex="0">
+            <span class="sr-only" *ngIf="property.differences">Changed:</span>
+            <div [ngStyle]="{'width': width}" class="pl-4">
+                <span [translate]="property.items.properties[prop].title">{{ property.items.properties[prop].title }}</span>
             </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>
+</div>
+<ng-container *ngIf="property.items.type === 'string'" [ngSwitch]="getItemType(property)">
+    <ng-container *ngSwitchCase="'datalist'">
+        <ng-template [ngTemplateOutlet]="listref"></ng-template>
     </ng-container>
-    <ng-container *ngIf="property.items.type === 'string'" [ngSwitch]="getItemType(property)">
-        <ng-container *ngSwitchCase="'datalist'">
-            <ng-template [ngTemplateOutlet]="listref"></ng-template>
-        </ng-container>
-        <ng-container *ngSwitchCase="'select'">
+    <ng-container *ngSwitchCase="'select'">
+        <ng-template [ngTemplateOutlet]="listref"></ng-template>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+        <div *ngIf="!property.widget || !property.widget.id">
             <ng-template [ngTemplateOutlet]="listref"></ng-template>
-        </ng-container>
-        <ng-container *ngSwitchDefault>
-            <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" class="d-flex justify-content-start border-bottom border-light">
-                    <span class="py-2" role="term" [translate]="attr.label" [ngStyle]="{'width': width}">{{ attr.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">
-                            true
-                        </span>
-                        <span *ngIf="!v || !(v.indexOf(attr.key) > -1)" translate="value.false">
-                            false
-                        </span>
-                    </div>
+        </div>
+        <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': property.differences && item.differences}"
+                tabindex="0">
+                <span class="sr-only" *ngIf="item.differences">Changed:</span>
+                <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(item.key) > -1" translate="value.true">
+                        true
+                    </span>
+                    <span *ngIf="!v || !(v.indexOf(item.key) > -1)" translate="value.false">
+                        false
+                    </span>
                 </div>
             </div>
-        </ng-container>
+        </div>
     </ng-container>
-</div>
+</ng-container>
 <ng-template #listref>
-    <div class="d-flex align-items-center border-bottom border-light">
-        <span class="py-2" role="term" [translate]="property.name" [ngStyle]="{'width': width}">{{ property.name }}</span>
+    <div class="d-flex align-items-start border-bottom border-light" [ngClass]="{'bg-diff': property.differences}" tabindex="0">
+        <span class="sr-only" *ngIf="property.differences">Changed:</span>
+        <span class="p-2" role="term" [translate]="property.name" [ngStyle]="{'width': width}">{{ property.name }}</span>
         <ng-container *ngFor="let v of property.value">
             <p [ngStyle]="{'width': width}" class="text-secondary m-0" *ngIf="!v || !v.length">-</p>
             <ul [ngStyle]="{'width': width}"

diff --git a/ui/src/app/metadata/configuration/component/property/array-property.component.spec.ts b/ui/src/app/metadata/configuration/component/property/array-property.component.spec.ts
@@ -69,9 +69,7 @@ describe('Array Property Component', () => {
 
     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 = [
@@ -87,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);
         });
     });
 });
diff --git a/ui/src/app/metadata/configuration/component/property/array-property.component.ts b/ui/src/app/metadata/configuration/component/property/array-property.component.ts
@@ -33,14 +33,8 @@ export class ArrayPropertyComponent extends ConfigurationPropertyComponent imple
         return UriValidator.isUri(str);
     }
 
-    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, differences?: boolean }[] {
+        return this.property.widget.data;
     }
 }
 
diff --git a/ui/src/app/metadata/configuration/component/property/primitive-property.component.html b/ui/src/app/metadata/configuration/component/property/primitive-property.component.html
@@ -1,4 +1,8 @@
-<div *ngIf="property.name" class="d-flex border-bottom border-light py-2">
+<div tabindex="0">
+<span class="sr-only" *ngIf="property.differences">Changed:</span>
+<div *ngIf="property.name"
+    class="d-flex border-bottom border-light p-2"
+    [ngClass]="{'bg-diff' : property.differences}">
     <span class="d-block"
         role="term"
         [translate]="property.name"
@@ -7,4 +11,5 @@
         class="d-block"
         role="definition"
         [ngStyle]="{'width': width}">{{ v ? v : (v === false) ? v : '-' }}</span>
+</div>
 </div>
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -8,13 +8,23 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
     'container-fluid': (numVersions$ | async) > 2,
     'container': (numVersions$ | async) <= 2
 }">
-    <div class="px-3 my-3 d-flex justify-content-start">
+    <div class="px-3 my-3 d-flex justify-content-between">
         <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>
+        <button class="btn btn-link" (click)="limiter.next('compare')">
+            <translate-i18n key="action.view-only-changes">Compare Changes</translate-i18n>&nbsp;
+            <i class="fa fa-lg sr-hidden"
+                [ngClass]="{
+                    'fa-toggle-off': limited$ | async,
+                    'fa-toggle-on': !(limited$ | async)
+                }"></i>
+        </button>
     </div>
-    <metadata-configuration [configuration]="versions$ | async" [editable]="false"></metadata-configuration>
+    <metadata-configuration
+        [configuration]="versions$ | async"
+        [editable]="false"></metadata-configuration>
 </div>
 <div *ngIf="loading$ | async" class="d-flex justify-content-center">
     <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>