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] 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}[];