Merged in feature/SHIBUI-1407 (pull request #365)

SHIBUI-1407 Implemented differences highlighting

Approved-by: Ryan Mathis <rmathis@unicon.net>

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;
+        }
+    }
+}

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;

ui/src/app/metadata/configuration/component/property/array-property.component.html

@@ -1,58 +1,74 @@
-<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">
+            <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>
-    </ng-container>
-    <ng-container *ngIf="property.items.type === 'string'" [ngSwitch]="getItemType(property)">
-        <ng-container *ngSwitchCase="'datalist'">
-            <ng-template [ngTemplateOutlet]="listref"></ng-template>
+        <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>
-        <ng-container *ngSwitchCase="'select'">
+    </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 *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.dataUrl">
+            <div *ngFor="let attr of attributeList$ | async"
+                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>
+                <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>
-        </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}">
+        <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}"

ui/src/app/metadata/configuration/component/property/array-property.component.spec.ts

@@ -67,6 +67,17 @@ 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) => {

ui/src/app/metadata/configuration/component/property/array-property.component.ts

@@ -33,6 +33,12 @@ 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);

ui/src/app/metadata/configuration/component/property/primitive-property.component.html

@@ -1,4 +1,6 @@
-<div *ngIf="property.name" class="d-flex border-bottom border-light py-2">
+<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"

ui/src/app/metadata/configuration/reducer/index.ts

@@ -68,6 +68,12 @@ export const assignValueToProperties = (models, properties, definition: any): an
             default:
                 return {
                     ...prop,
+                    differences: models.some((model, index, array) => {
+                        if (!array) {
+                            return false;
+                        }
+                        return JSON.stringify(model[prop.id]) !== JSON.stringify(array[0][prop.id]);
+                    }),
                     value: models.map(model => {
                         return model[prop.id];
                     })

ui/src/app/metadata/domain/model/property.ts

@@ -5,6 +5,7 @@ export interface Property {
     value: any[];
     items: Property;
     properties: Property[];
+    differences?: boolean;
     widget?: {
         id: string;
         data?: {key: string, label: string}[];