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] 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);