re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

6 files changed, 91 insertions, 14 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index 4805875d83..b5ae7a8f66 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -19,6 +19,7 @@
                 [name]="property.name"
                 (elementChanged)="mapKeyChanged.emit($event.value)"
                 [readonly]="readonly"
+                [testId]="'prop-key-' + propertyTestsId"
             ></dynamic-element>
         </div>
     </ng-container>
@@ -27,12 +28,13 @@
         <div class="table-cell">
             <dynamic-element class="value-input"
                 pattern="validationUtils.getValidationPattern(property.type)"
-                [value]="property.valueObj"
+                [value]="property.isDeclared ? property.value : property.valueObj"
                 [type]="property.isDeclared ? 'string' : property.type"
                 [name]="property.name"
                 [path]="property.propertiesName"
                 (elementChanged)="onElementChanged($event)"
                 [readonly]="readonly || property.isDeclared || property.isDisabled"
+                [testId]="'prop-' + propertyTestsId"
             ></dynamic-element>
         </div>
     </ng-container>
@@ -45,9 +47,9 @@
     </ng-container>
     <!-- ICONS: add, delete, and expand -->
     <ng-container *ngIf="!property.isDeclared">
-            <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}">Add value to list</a>
-            <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
-            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0"></span>
+            <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}" [attr.data-tests-id]="'add-to-list-' + propertyTestsId">Add value to list</a>
+            <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'delete-from-list-' + propertyTestsId"></span>
+            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId"></span>
     </ng-container>
 
 </div>
@@ -59,6 +61,7 @@
             [hasDeclareOption]="hasDeclareOption"
             [canBeDeclared]="hasDeclareOption && prop.canBeDeclared"
             [property]="prop"
+            [rootProperty]="rootProperty || property"
             [expandedChildId]="expandedChildId"
             [propertyNameSearchText]="propertyNameSearchText"
             [readonly]="readonly"
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
index 6f7e57b643..6e19c95003 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
@@ -41,6 +41,7 @@ export class DynamicPropertyComponent {
     propPath: string;
     isPropertyFEModel: boolean;
     nestedLevel: number;
+    propertyTestsId: string;
 
     @Input() canBeDeclared: boolean;
     @Input() property: PropertyFEModel | DerivedFEProperty;
@@ -50,6 +51,7 @@ export class DynamicPropertyComponent {
     @Input() readonly: boolean;
     @Input() hasChildren: boolean;
     @Input() hasDeclareOption:boolean;
+    @Input() rootProperty: PropertyFEModel;
 
     @Output('propertyChanged') emitter: EventEmitter<void> = new EventEmitter<void>();
     @Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
@@ -69,6 +71,8 @@ export class DynamicPropertyComponent {
         this.propType = this.property.derivedDataType;
         this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName;
         this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length;
+        this.rootProperty = (this.rootProperty) ? this.rootProperty : <PropertyFEModel>this.property;
+        this.propertyTestsId = this.getPropertyTestsId();
     }
 
     ngDoCheck() {
@@ -105,6 +109,10 @@ export class DynamicPropertyComponent {
         }).length > 1;
     }
 
+    getPropertyTestsId = () => {
+        return [this.rootProperty.name].concat(this.rootProperty.getParentNamesArray(this.property.propertiesName, [], true)).join('.');
+    };
+
     onElementChanged = (event: IUiElementChangeEvent) => {
         this.property.updateValueObj(event.value, event.isValid);
         this.emitter.emit();
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
index ecfa7e7c5e..b574b552ae 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -9,8 +9,14 @@
     <div class="table-body" [ngClass]="{'view-mode': readonly}">
         <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
 
-        <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:instanceId">
-            <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">{{feInstanceNamesMap[instanceId]}}</div>
+        <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:vspId">
+            <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">
+             
+                    
+                <span [ngClass]="['prop-instance-icon', feInstanceNamesMap[instanceId].iconClass, 'small']"></span>
+                {{feInstanceNamesMap[instanceId].name}}
+                <div class="sprite-new archive-label" *ngIf="feInstanceNamesMap[instanceId].originArchived == true" ></div>
+            </div>
 
             <div class="table-row"
                 *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm; trackBy:property?.name"
@@ -22,8 +28,8 @@
                     <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected"
                           [disabled]="property.isDisabled || property.isDeclared || readonly"
                           (checkedChange)="propertyChecked(property)" [attr.data-tests-id]="property.name"></checkbox>
-                    <div class="inner-cell-div" tooltip="{{property.name}}">
-                        <span>{{property.name}}</span>
+                    <div class="inner-cell-div-multiline" tooltip="{{property.name}}">
+                        <multiline-ellipsis className="table-cell-multiline-ellipsis" [lines]="2">{{property.name}}</multiline-ellipsis>
                     </div>
                 </div>
                 <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}" tooltipDelay="0"></span>
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
index 20da0b6ec2..72f67e434e 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
@@ -1,4 +1,4 @@
-@import './../../../../../assets/styles/variables.less';
+@import './../../../../../assets/styles/mixins.less';
 @import '../../../../../assets/styles/sprite';
 @smaller-screen: ~"only screen and (max-width: 1580px)";
 
@@ -12,13 +12,16 @@
     text-align:left;
 
 
-    .inner-cell-div{
-        max-width: 100%;
+    .inner-cell-div {
         text-overflow: ellipsis;
         overflow: hidden;
         height: 20px;
     }
 
+    .inner-cell-div-multiline {
+        max-width: 100%;
+    }
+
     .table-header {
         display: flex;
         flex-direction:row;
@@ -36,6 +39,11 @@
     .table-rows-header {
         border: #d2d2d2 solid 1px;
         border-top:none;
+        display: flex;
+        align-items: center;
+        .archive-label{
+            margin-left: 10px;
+        }
     }
 
     .table-body {
@@ -120,7 +128,7 @@
             .property-description-icon {
                 float: right;
                 margin-top: 4px;
-                margin-left: 5px;
+                margin-left: 15px;
                 flex: 0 0 auto;
             }
         }
@@ -177,4 +185,53 @@
         }
     }
 
+    .table-row {
+        /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+            padding-left: 1em;
+        }
+
+        &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
+            padding-left: 1em;
+        }
+
+        &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+            padding-left: 1em;
+        }
+
+        &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+            padding-left: 1em;
+        }
+    }
+
+    .prop-instance-icon {
+        vertical-align: middle;
+        margin-right: 7px;
+        &.defaulticon.small {
+            background-color: @main_color_q;
+            border-radius:14px;           
+        }
+        // square icons
+ 
+        &.icon-group {
+            .square-icon();
+            background-color: @main_color_a;
+
+            &::before {
+                content: "G";
+            }
+        }
+        &.icon-policy {
+            .square-icon();
+            background-color: @main_color_r;
+
+            &::before {
+                content: "P";
+            }
+        }
+
+    }
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
index 093fae1684..da1fb82ba0 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
@@ -21,6 +21,7 @@
 import { Component, Input, Output, EventEmitter} from "@angular/core";
 import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models";
 import {PropertiesService} from "../../../services/properties.service";
+import { InstanceFeDetails } from "../../../../models/instance-fe-details";
 
 @Component({
     selector: 'properties-table',
@@ -30,7 +31,7 @@ import {PropertiesService} from "../../../services/properties.service";
 export class PropertiesTableComponent {
 
     @Input() fePropertiesMap: InstanceFePropertiesMap;
-    @Input() feInstanceNamesMap: Map<string, string>;
+    @Input() feInstanceNamesMap: Map<string, InstanceFeDetails>;
     @Input() selectedPropertyId: string;
     @Input() propertyNameSearchText:string;
     @Input() searchTerm:string;
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
index 91f33485a9..91baaf1bc1 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
@@ -8,6 +8,7 @@ import {HttpModule} from "@angular/http";
 import {FilterChildPropertiesPipe} from "./pipes/filterChildProperties.pipe";
 import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
 import {PropertiesService} from "../../../services/properties.service";
+import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multiline-ellipsis.module";
 
 @NgModule({
     imports: [
@@ -15,7 +16,8 @@ import {PropertiesService} from "../../../services/properties.service";
         HttpModule,
         CommonModule,
         GlobalPipesModule,
-        UiElementsModule
+        UiElementsModule,
+        MultilineEllipsisModule
         ],
     declarations: [
         FilterChildPropertiesPipe,