[sdc] update code of sdc

Change-Id: If9f37c80b659cb67b34d18e6c019defecca58b9a
Signed-off-by: Michael Lando <ml636r@att.com>

4 files changed, 80 insertions, 55 deletions

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index 317a1fc827..fa3270ec77 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -28,7 +28,7 @@
                 </tab>
             </tabs>
             <div class="header">
-                <div class="search-filter-container">
+                <div class="search-filter-container" [class.without-filter]="isInpusTabSelected">
                     <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" />
                     <span class="sprite search-icon"></span>
                     <filter-properties-assignment *ngIf="!isInpusTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
@@ -42,7 +42,7 @@
                 <tab tabTitle="Composition">
                     <div class="hierarchy-nav-container">
                         <loader [display]="loadingInstances" size="medium" [relative]="true"></loader>
-                        <div class="hierarchy-header">
+                        <div class="hierarchy-header white-sub-header">
                             <span tooltip="{{component.name}}">{{component.name}}</span>
                         </div>
                         <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isInpusTabSelected">No data to display</div>
@@ -55,8 +55,8 @@
                 </tab>
                 <tab tabTitle="Property Structure">
                     <div class="hierarchy-nav-container">
-                    <div class="hierarchy-header">
-                        <span tooltip="{{!isInpusTabSelected ? (propertyStructureHeader || selectedFlatProperty.name) : ''}}">{{!isInpusTabSelected ? (propertyStructureHeader || selectedFlatProperty.name || "No Property Selected") : "No Property Selected"}}</span>
+                    <div class="hierarchy-header white-sub-header" [class.selected]="selectedFlatProperty.path == propertyStructureHeader">
+                        <span tooltip="{{!isInpusTabSelected ? propertyStructureHeader : ''}}">{{!isInpusTabSelected ? (propertyStructureHeader || "No Property Selected") : "No Property Selected"}}</span>
                     </div>
                     <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0 || isInpusTabSelected">No data to display</div>
                     <hierarchy-navigation class="hierarchy-nav"
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index e56374a2c2..7f9b4e7d58 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -1,4 +1,5 @@
 @import '../../../../assets/styles/variables';
+//@import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @ng2-shadow-gray: #f8f8f8;
 @ng2-light-gray: #eaeaea;
 @ng2-medium-gray: #d2d2d2;
@@ -15,6 +16,7 @@
 
 .properties-assignment-page {
     height: 100%;
+    font-family: 'Open Sans', omnes-regular, sans-serif; 
 
     .main-content {
         display:flex;
@@ -28,20 +30,21 @@
         margin: 0 0 1em 0;
 
         /deep/ .tabs {
-            width:25%;
+            width:33%;
             text-align:center;
-
         }
 
         /deep/ .tab {
-            padding: 10px .5em;
+            padding: 12px;
+            flex: 1;
+            font-weight:bold;
 
             &.active {
                 color:#009fdb;
                 border-color: #d2d2d2;
                 border-top: solid 4px #009fdb;
                 background-color: white;
-                padding-top:7px;
+                padding-top:9px;
             }
         }
 
@@ -49,39 +52,47 @@
             position:absolute;
             top:0;
             right:0;
-            min-width:200px;
         }
 
         .search-filter-container{
-            position: relative;
-            right: 164px;
-        }
+            position: absolute;
+            right: 100px;
+            display:flex;
+            flex-direction:row;
+        
+            .search-box {
+                border: 1px solid @ng2-medium-gray;
+                border-radius: 3px;
+                height: 32px;
+                margin: 0;
+                padding: 2px 20px 4px 10px;
+                outline: none;
+                font-style: italic;
+                color:@ng2-med-dark-gray;
+
+                &::-moz-placeholder { color:@ng2-med-dark-gray;}
+                &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
+            }
+
+            .search-icon {
+                background-position: -48px -3137px;
+                width: 14px;
+                height: 14px;
+                position: absolute;
+                right:42px;
+                top: 8px;
+            }
+
+            &.without-filter {
+                margin-right:10px;
+                .search-icon {
+                    right: 4px;
+                }
+            }
 
-        .search-box {
-            border: 1px solid @ng2-medium-gray;
-            border-radius: 4px;
-            height: 32px;
-            margin: 0;
-            padding: 2px 20px 4px 10px;
-            outline: none;
-            font-style: italic;
-            color:@ng2-med-dark-gray;
-            margin-right:10px;
-
-            &::-moz-placeholder { color:@ng2-med-dark-gray;}
-            &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
-        }
-        .search-icon {
-            background-position: -48px -3137px;
-            width: 14px;
-            height: 14px;
-            position: relative;
-            right: 34px;
-            top: 4px;
         }
         .advance-search{
-            position: relative;
-            right: 22px;
+
         }
         .clear-filter{
             cursor: pointer;
@@ -104,18 +115,19 @@
         display:flex;
         flex:0 0 350px;
         flex-direction:column;
-        margin: 3em 0 1em 1em;
-        padding: 10px;
-        overflow:auto;
+        margin: 45px 0 1em 1em;
+        overflow-x:auto;
 
         /deep/ .tabs {
-            width: 33%;
+            border-bottom: solid 1px #d0d0d0;
         }
 
         /deep/ .tab {
-            padding: 0.5em 1em 0 1em;
-            white-space: nowrap;
-            font-size: 13px;
+            flex: none;
+            padding: 8px 20px 0;
+            font-size: 14px;
+            font-weight:bold;
+            line-height:30px;
         }
     }
 
@@ -127,6 +139,28 @@
         border: 1px solid #ddd;
     }
 
+    /deep/ .white-sub-header {
+        background-color:  #fffefe;
+        box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
+        border-bottom: #d2d2d2 solid 1px;
+        color:#009fdb;
+        font-weight:bold;
+        font-size:14px;
+        text-align:left;
+        flex:0 0 auto;
+        padding: 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &.hierarchy-header {
+            padding-left:20px;
+            &.selected {
+                background-color: #e6f6fb;
+            }
+        }
+
+    }
 
     .hierarchy-nav-container {
         flex:1;
@@ -136,15 +170,7 @@
     }
 
     .hierarchy-header {
-        height:30px;
-        line-height: 2.5em;
-        display: flex;
-        width: 100%;
-        padding-left: 14px;
-        font-weight: bold;
-        text-align: left;
-        background-color: @ng2-light-gray;
-        font-size: 13px;
+
         span{
             text-overflow: ellipsis;
             overflow: hidden;
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 98fdc7391a..22d6f2fe51 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -242,10 +242,8 @@ export class PropertiesAssignmentComponent {
             this.propertiesNavigationData = simpleFlatProperty;
         }
 
-        // Updatet the header in the navigation tree with property name.
-        if(property instanceof DerivedFEProperty) {
-            this.propertyStructureHeader = (property.propertiesName.split('#'))[0];
-        }
+        // Update the header in the navigation tree with property name.
+        this.propertyStructureHeader = (property.propertiesName.split('#'))[0];
 
         // Set selected property in table
         this.selectedFlatProperty = this.hierarchyNavService.createSimpleFlatProperty(property, instanceName);
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
index dfde2a40b2..0eb8534595 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
@@ -43,6 +43,7 @@ export class PropertiesUtils {
                     this.initValueObjectRef(newFEProp); //initialize valueObj.
                     propertyFeArray.push(newFEProp);
                     newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
+                    this.dataTypeService.checkForCustomBehavior(newFEProp);
                 }    
             });
             instanceFePropertiesMap[instanceName] = propertyFeArray;