From 32596854ea810466ee6311a9dfe4af88e0b91016 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 6 Sep 2019 10:59:39 -0700
Subject: [PATCH 1/4] SHIBUI-1407 comparison highlights

---
 .../metadata-configuration.component.ts          |  2 +-
 .../property/array-property.component.html       | 16 ++++++++--------
 .../property/primitive-property.component.html   |  4 +++-
 .../app/metadata/configuration/reducer/index.ts  |  6 ++++++
 ui/src/app/metadata/domain/model/property.ts     |  1 +
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts b/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts
index 280c362a6..1b04ba636 100644
--- 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
index 53682ea90..1a1fe28d1 100644
--- 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,13 +1,13 @@
-<div>
+<div [ngClass]="{'bg-diff': property.differences}">
     <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 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}">
+                <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 && [i]"
+                    <div *ngIf="version && version[i]"
                         [ngbPopover]="version[i][prop]"
                         triggers="mouseenter:mouseleave"
                         container="body"
@@ -36,7 +36,7 @@
             </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>
+                    <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
@@ -51,8 +51,8 @@
     </ng-container>
 </div>
 <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">
+        <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/primitive-property.component.html b/ui/src/app/metadata/configuration/component/property/primitive-property.component.html
index 4d93c07cc..6abfa315d 100644
--- 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,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"
diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
index 62ecb8404..c53dc7538 100644
--- a/ui/src/app/metadata/configuration/reducer/index.ts
+++ b/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];
                     })
diff --git a/ui/src/app/metadata/domain/model/property.ts b/ui/src/app/metadata/domain/model/property.ts
index 4768de9e4..dba90e82e 100644
--- a/ui/src/app/metadata/domain/model/property.ts
+++ b/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}[];

From 530abb4ac8465d7fe94f14de06600f131b7ccd2f Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 6 Sep 2019 10:59:46 -0700
Subject: [PATCH 2/4] SHIBUI-1407 comparison highlights

---
 .../metadata-configuration.component.scss     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 ui/src/app/metadata/configuration/component/metadata-configuration.component.scss

diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.scss b/ui/src/app/metadata/configuration/component/metadata-configuration.component.scss
new file mode 100644
index 000000000..24b159af0
--- /dev/null
+++ b/ui/src/app/metadata/configuration/component/metadata-configuration.component.scss
@@ -0,0 +1,19 @@
+@import '../../../../theme/_palette';
+
+:host /deep/ {
+    .bg-diff {
+        background: #FEE8E9;
+        position: relative;
+        &::before {
+            $size: 24px;
+            content: "\f06a";
+            font-family: 'FontAwesome';
+            text-align: center;
+            width: $size;
+            height: $size;
+            position: absolute;
+            left: -$size;
+            top: 0.5rem;
+        }
+    }
+}

From f36f573954f41723b1ae3393e64efd25aa3e9148 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 10 Sep 2019 08:23:28 -0700
Subject: [PATCH 3/4] SHIBUI-1407 Implemented differences highlighting

---
 .../metadata-configuration.component.scss     |  1 +
 .../property/array-property.component.html    | 94 ++++++++++---------
 .../property/array-property.component.ts      |  7 ++
 3 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.scss b/ui/src/app/metadata/configuration/component/metadata-configuration.component.scss
index 24b159af0..82e7a5f37 100644
--- a/ui/src/app/metadata/configuration/component/metadata-configuration.component.scss
+++ b/ui/src/app/metadata/configuration/component/metadata-configuration.component.scss
@@ -4,6 +4,7 @@
     .bg-diff {
         background: #FEE8E9;
         position: relative;
+        border-color: #CCC !important;
         &::before {
             $size: 24px;
             content: "\f06a";
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
index 1a1fe28d1..28777731d 100644
--- 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,57 +1,59 @@
-<div [ngClass]="{'bg-diff': property.differences}">
-    <ng-container *ngIf="property.items.type === 'object'">
-        <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 *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>
+    </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="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>
+        <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)}">
+                <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-start border-bottom border-light">
+    <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>
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
index 2c4de49bd..f166aa155 100644
--- 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,6 +33,13 @@ export class ArrayPropertyComponent extends ConfigurationPropertyComponent imple
         return UriValidator.isUri(str);
     }
 
+    isDifferent(key: string): boolean {
+        const model = this.property.value || [];
+        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);

From ce2b6480fb9651d2793971656ad550e61144a4d1 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 10 Sep 2019 09:54:07 -0700
Subject: [PATCH 4/4] SHIBUI-1407 Added unit tests

---
 .../component/property/array-property.component.html  |  2 +-
 .../property/array-property.component.spec.ts         | 11 +++++++++++
 .../component/property/array-property.component.ts    |  3 +--
 3 files changed, 13 insertions(+), 3 deletions(-)

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
index 28777731d..9a5d1648e 100644
--- a/ui/src/app/metadata/configuration/component/property/array-property.component.html
+++ b/ui/src/app/metadata/configuration/component/property/array-property.component.html
@@ -36,7 +36,7 @@
         <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)}">
+                [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"
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
index c0dbcbb16..6260a4e50 100644
--- 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
@@ -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) => {
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
index f166aa155..7a042fa46 100644
--- 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,8 +33,7 @@ export class ArrayPropertyComponent extends ConfigurationPropertyComponent imple
         return UriValidator.isUri(str);
     }
 
-    isDifferent(key: string): boolean {
-        const model = this.property.value || [];
+    isDifferent(key: string, model: any): boolean {
         return model
             .map((value) => value ? value.indexOf(key) > -1 : false)
             .reduce((current, val) => current !== val ? true : false, false);