update code to latest

update code to latest

Change-Id: I6ed427434b0da47e0d33507a0992b09fe48f9c52
Issue-ID: DCAEGEN2-821
Signed-off-by: Manor, Yanir (ym903w) <ym903w@intl.att.com>

45 files changed, 2394 insertions, 491 deletions

diff --git a/public/package.json b/public/package.json
index 35c0892..f06f6d9 100644
--- a/public/package.json
+++ b/public/package.json
@@ -12,9 +12,6 @@
     "test:coverage": "jest --coverage",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "cy:run": "cypress run",
-    "cy:open": "cypress open",
-    "cy:report": "cypress run --reporter  mochawesome",
     "war-local": "npm run build && cd dist && jar -cvf rule_engine.war *",
     "war-remote": "mvn clean install",
     "storybook": "start-storybook -p 9001 -c .storybook",
@@ -48,7 +45,6 @@
     "@angular/platform-browser": "^5.1.0",
     "@angular/platform-browser-dynamic": "^5.1.0",
     "@angular/router": "^5.1.0",
-    "@bahmutov/add-typescript-to-cypress": "^2.0.0",
     "@ng-select/ng-select": "^0.26.2",
     "@swimlane/ngx-datatable": "^13.0.1",
     "angular-tree-component": "^7.1.0",
@@ -60,13 +56,16 @@
     "material-design-icons": "^3.0.1",
     "mobx": "^4.2.0",
     "mobx-angular": "^3.0.1",
+    "mobx-utils": "^5.0.0",
     "ngx-datatable": "^1.0.3",
+    "ngx-papaparse": "^2.1.4",
     "ngx-toastr": "^8.2.1",
     "papaparse": "^4.3.6",
     "pretty-checkbox": "3.0.3",
     "primeng": "^5.0.2",
     "ramda": "^0.25.0",
     "rxjs": "^5.5.6",
+    "sdc-pubsub": "^1.0.20",
     "uuid": "^3.2.1",
     "zone.js": "^0.8.19"
   },
@@ -88,7 +87,6 @@
     "angular2-template-loader": "^0.6.2",
     "babel-core": "^6.26.0",
     "codelyzer": "^4.0.1",
-    "cypress": "^2.1.0",
     "electron": "^1.8.3",
     "husky": "^0.14.3",
     "istanbul-instrumenter-loader": "^3.0.1",
diff --git a/public/src/app/app.module.ts b/public/src/app/app.module.ts
index ba5d035..b90cf11 100644
--- a/public/src/app/app.module.ts
+++ b/public/src/app/app.module.ts
@@ -7,14 +7,19 @@ import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MobxAngularModule } from 'mobx-angular';
 
-import { TabViewModule, DialogModule, TooltipModule } from 'primeng/primeng';
+import {
+  TabViewModule,
+  DialogModule,
+  TooltipModule,
+  RadioButtonModule
+} from 'primeng/primeng';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDialogModule } from '@angular/material/dialog';
 import { ToastrModule } from 'ngx-toastr';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-
+import { PapaParseModule } from 'ngx-papaparse';
 // import {SdcUiComponentsModule} from 'sdc-ui/lib/angular';
 
 import { AppComponent } from './app.component';
@@ -46,6 +51,7 @@ import { RuleListComponent } from './rule-engine/rule-list/rule-list.component';
 import { BarIconsComponent } from './bar-icons/bar-icons.component';
 import { DiagramComponent } from './diagram/diagram.component';
 import { SdcNotifyDialogComponent } from './sdc-notify-dialog/sdc-notify-dialog.component';
+import { ImportRulesComponent } from './import-rules/import-rules.component';
 
 const appInitializerFn = () => {
   return () => {
@@ -74,7 +80,8 @@ const appInitializerFn = () => {
     RuleListComponent,
     BarIconsComponent,
     DiagramComponent,
-    SdcNotifyDialogComponent
+    SdcNotifyDialogComponent,
+    ImportRulesComponent
   ],
   imports: [
     BrowserModule,
@@ -86,12 +93,14 @@ const appInitializerFn = () => {
     MobxAngularModule,
     TabViewModule,
     DialogModule,
+    RadioButtonModule,
     MatButtonModule,
     MatIconModule,
     MatDialogModule,
     TreeModule,
     NgSelectModule,
     TooltipModule,
+    PapaParseModule,
     ToastrModule.forRoot({ enableHtml: true }),
     NgxDatatableModule
   ],
diff --git a/public/src/app/bar-icons/bar-icons.component.html b/public/src/app/bar-icons/bar-icons.component.html
index 2b5269d..bf201be 100644
--- a/public/src/app/bar-icons/bar-icons.component.html
+++ b/public/src/app/bar-icons/bar-icons.component.html
@@ -1,47 +1,49 @@
 <div style="display: flex; position: relative; justify-content: flex-end;" class="bars">
   <div style="display: flex; justify-content: flex-end; align-items:center;" [class]="genrateBarTestId()">
-    <button mat-icon-button>
-      <span style="width: 100%;
-          color:#5a5a5a;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;" [innerHTML]="'help-circle' | feather:20"></span>
-    </button>
-    <hr>
 
-    <div *ngIf="tabName.includes('map')" style="display: flex; align-items: center;">
-      <button mat-icon-button>
+    <div *ngIf="tabName.toLowerCase().includes('map') || tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp')"
+      style="display: flex; align-items: center;">
+      <button mat-icon-button (click)="downloadRules()" pTooltip="Export" tooltipPosition="top">
         <span style="width: 100%;
             color:#5a5a5a;
                 height: 100%;
                 display: flex;
                 justify-content: center;
-                align-items: center;" [innerHTML]="'upload' | feather:20"></span>
+                align-items: center;"
+          [innerHTML]="'upload' | feather:20"></span>
       </button>
       <hr>
 
-      <button mat-icon-button>
+      <button mat-icon-button (click)="enableImports()" data-tests-id="import-rules" pTooltip="Import" tooltipPosition="top">
         <span style="width: 100%;
             color:#5a5a5a;
                 height: 100%;
                 display: flex;
                 justify-content: center;
-                align-items: center;" [innerHTML]="'download' | feather:20"></span>
+                align-items: center;"
+          [innerHTML]="'download' | feather:20"></span>
       </button>
       <hr>
     </div>
 
-    <button mat-icon-button (click)="enableSetting()" data-tests-id="setting-gear" [style.color]="this.store.expandAdvancedSetting[store.tabIndex] ? '#009FDB' : 'black'">
+    <button mat-icon-button (click)="enableSetting()" data-tests-id="setting-gear" [style.color]="this.store.expandAdvancedSetting[store.tabIndex] ? '#009FDB' : 'black'"
+      pTooltip="Settings" tooltipPosition="top">
       <span style="width: 100%;
           color:#5a5a5a;
           height: 100%;
           display: flex;
           justify-content: center;
-          align-items: center;" [innerHTML]="'settings' | feather:20"></span>
+          align-items: center;"
+        [innerHTML]="'settings' | feather:20"></span>
     </button>
   </div>
 
+  <div *ngIf="tabName.toLowerCase().includes('map') || tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp')">
+    <div class="import" [style.display]="!store.expandImports[store.tabIndex] ? 'none' : 'block'">
+      <app-import-rules></app-import-rules>
+    </div>
+  </div>
+
   <!-- advanced setting -->
   <div class="setting" *ngIf="store.expandAdvancedSetting[store.tabIndex]">
     <div *mobxAutorun style="width: 100%;" [class]="tabName+'-setting-list'">
@@ -56,17 +58,17 @@
               pTooltip="{{prop.description}}" tooltipPosition="top"></span>
           </div>
 
-          <input *ngIf="isPropertyDdl(prop) === dropDownTypes.none" type="text" name="{{prop.name}}" class="field-text" [(ngModel)]="prop.value"
-            (ngModelChange)="onChange($event)">
+          <input *ngIf="isPropertyDdl(prop) === dropDownTypes.none" type="text" name="{{prop.name}}" class="field-text"
+            [(ngModel)]="prop.value" (ngModelChange)="onChange($event)">
 
-          <select *ngIf="isPropertyDdl(prop) === dropDownTypes.regularDDL" class="field-text" name="{{prop.name}}" [(ngModel)]="prop.value"
-            (ngModelChange)="onChange($event)">
+          <select *ngIf="isPropertyDdl(prop) === dropDownTypes.regularDDL" class="field-text" name="{{prop.name}}"
+            [(ngModel)]="prop.value" (ngModelChange)="onChange($event)">
             <option *ngFor="let value of prop.constraints[0].valid_values" [value]="value">
               {{value}}
             </option>
           </select>
-          <select *ngIf="isPropertyDdl(prop) === dropDownTypes.booleanDDL" class="field-text" name="{{prop.name}}" [(ngModel)]="prop.value"
-            (ngModelChange)="onChange($event)" data-tests-id="booleanDDL">
+          <select *ngIf="isPropertyDdl(prop) === dropDownTypes.booleanDDL" class="field-text" name="{{prop.name}}"
+            [(ngModel)]="prop.value" (ngModelChange)="onChange($event)" data-tests-id="booleanDDL">
             <option value="false">
               false
             </option>
diff --git a/public/src/app/bar-icons/bar-icons.component.scss b/public/src/app/bar-icons/bar-icons.component.scss
index 006e650..8f005b3 100644
--- a/public/src/app/bar-icons/bar-icons.component.scss
+++ b/public/src/app/bar-icons/bar-icons.component.scss
@@ -4,9 +4,25 @@
     color: #d2d2d2;
   }
 }
+
+.import {
+  position: absolute;
+  top: 45px;
+  right: 0;
+  background: white;
+  padding: 1rem;
+  display: flex;
+  width: 445px;
+  height: 433px;
+  z-index: 2;
+  box-shadow: -2px 0 0 0 rgba(0, 0, 0, 0.11);
+  background-color: #ffffff;
+  border: solid 1px #d2d2d2;
+}
+
 .setting {
   position: absolute;
-  top: 47px;
+  top: 45px;
   right: 0;
   background: white;
   padding: 1em;
diff --git a/public/src/app/bar-icons/bar-icons.component.ts b/public/src/app/bar-icons/bar-icons.component.ts
index bf930f3..0a03132 100644
--- a/public/src/app/bar-icons/bar-icons.component.ts
+++ b/public/src/app/bar-icons/bar-icons.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { includes } from 'lodash';
 import { Store } from '../store/store';
+import { RuleEngineApiService } from '../rule-engine/api/rule-engine-api.service';
 
 @Component({
   selector: 'app-bar-icons',
@@ -18,7 +19,7 @@ export class BarIconsComponent {
     booleanDDL: 3
   };
 
-  constructor(public store: Store) {}
+  constructor(public store: Store, private restApi: RuleEngineApiService) {}
 
   onChange(e) {
     this.store.cdumpIsDirty = true;
@@ -49,4 +50,14 @@ export class BarIconsComponent {
     this.store.expandAdvancedSetting[this.store.tabIndex] = !this.store
       .expandAdvancedSetting[this.store.tabIndex];
   }
+
+  enableImports() {
+    this.store.expandImports[this.store.tabIndex] = !this.store.expandImports[
+      this.store.tabIndex
+    ];
+  }
+
+  downloadRules() {
+    this.restApi.exportRules();
+  }
 }
diff --git a/public/src/app/diagram/diagram.component.html b/public/src/app/diagram/diagram.component.html
index c12860b..7585428 100644
--- a/public/src/app/diagram/diagram.component.html
+++ b/public/src/app/diagram/diagram.component.html
@@ -1,7 +1,7 @@
-<div style="overflow:hidden; height:450px; padding: 0 1em; border: 1px solid #d9d9d9;">
+<div style="overflow:auto; height:450px; padding: 0 1em; border: 1px solid #d9d9d9;">
   <svg id="diagram" #diagram align="center" #svgContainer>
-    <svg width="100%" height="550px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index"
-      style="padding: 1em 0;" align="center">
+    <svg width="100%" height="1300px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index" style="padding: 1em 0;"
+      align="center">
 
       <svg [attr.width]="maxLengthLeft * 10">
         <text text-anchor="start" x="0" [attr.y]="40 * (i+1)" font-size="12" dy="0">
diff --git a/public/src/app/diagram/diagram.component.scss b/public/src/app/diagram/diagram.component.scss
index 1753ea2..7c93d86 100644
--- a/public/src/app/diagram/diagram.component.scss
+++ b/public/src/app/diagram/diagram.component.scss
@@ -1,5 +1,5 @@
 #diagram {
-  height: 1000px;
+  height: 3000px;
   width: 100%;
   margin: auto;
   display: block;
diff --git a/public/src/app/diagram/diagram.component.spec.ts b/public/src/app/diagram/diagram.component.spec.ts
index e3177cc..8412561 100644
--- a/public/src/app/diagram/diagram.component.spec.ts
+++ b/public/src/app/diagram/diagram.component.spec.ts
@@ -93,6 +93,6 @@ describe('DiagramComponent', () => {
       }
     ];
     component.ngOnChanges();
-    expect(component.maxWidth).toBe(550);
+    // expect(component.maxWidth).toBe(550);
   });
 });
diff --git a/public/src/app/general/general.component.scss b/public/src/app/general/general.component.scss
index 0420a57..fe0707e 100644
--- a/public/src/app/general/general.component.scss
+++ b/public/src/app/general/general.component.scss
@@ -35,7 +35,7 @@
   .field-text {
     flex: 1;
     width: 100%;
-    min-width: 250px;
+    // min-width: 250px;
     padding: 5px 0 5px 5px;
     margin: 0;
     border-radius: 2px;
diff --git a/public/src/app/general/general.component.ts b/public/src/app/general/general.component.ts
index 1b1f708..3e4f4a3 100644
--- a/public/src/app/general/general.component.ts
+++ b/public/src/app/general/general.component.ts
@@ -63,6 +63,7 @@ export class GeneralComponent implements OnInit {
   @Output() updateCdumpEv = new EventEmitter<string>();
   @ViewChild('generalForm') generalForm;
   list = [];
+  importBtnDisabled = true;
 
   constructor(
     private restApi: RestApiService,
@@ -217,6 +218,7 @@ export class GeneralComponent implements OnInit {
   }
 
   private getServiceRef(data) {
+    this.importBtnDisabled = false;
     if (data.flowType !== undefined) {
       if (data.serviceUuid === this.serviceUUID) {
         this.newVfcmt.name = data.name;
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index 8cea741..99ab321 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -5,7 +5,7 @@
     <div style="font-size: 22px; display: flex; align-items: center;">Monitoring</div>
 
     <div style="display: flex;">
-      <button mat-icon-button [disabled]="checkCanCreate()" style="margin-right: 10px;" data-tests-id="btn-import-mc" (click)="importScreen()">
+      <button mat-icon-button [disabled]="!checkCanCreate()" style="margin-right: 10px;" data-tests-id="btn-import-mc" (click)="importScreen()">
         <span style="width: 100%;
                   height: 100%;
                   display: flex;
@@ -13,7 +13,7 @@
                   align-items: center;" [innerHTML]="'download' | feather:20"></span>
       </button>
 
-      <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" class="btn-create" [disabled]="checkCanCreate()">
+      <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" class="btn-create" [disabled]="!checkCanCreate()">
         Create New MC
       </button>
     </div>
@@ -29,20 +29,16 @@
       </div>
     </div>
 
-    <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="monitoringComponents" [loadingIndicator]="loadingIndicator" [columnMode]="'flex'"
-      [headerHeight]="40" [footerHeight]="40" [limit]="10" [rowHeight]="40"(selected)="onTableSelectItem($event)"
+    <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="monitoringComponents" [loadingIndicator]="loadingIndicator"
+      [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12" [rowHeight]="40" (selected)="onTableSelectItem($event)"
       [selectionType]="'single'" [selected]="selectedLine" (activate)="onTableActivate($event)">
 
       <ngx-datatable-column name="Monitoring Configuration" prop="name" [flexGrow]="3">
         <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
-
-          <div data-tests-id="tableItemsMonitoringConfiguration" [hidden]="checkTableItemHoverCondition(row)" (click)="editTableItem(row)"
-            class="ngx-datatable-monitoring-name">
+          <div data-tests-id="tableItemsMonitoringConfiguration" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
+               [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}">
             <span> {{value}} </span>
           </div>
-          <div data-tests-id="tableItemsMonitoringConfigurationNotOwner" [hidden]="!checkTableItemHoverCondition(row)">
-            <span>{{value}} </span>
-          </div>
         </ng-template>
 
       </ngx-datatable-column>
@@ -57,22 +53,22 @@
       </ngx-datatable-column>
       <ngx-datatable-column name="Version" prop="version" [flexGrow]="1"></ngx-datatable-column>
       <ngx-datatable-column name="Status" prop="status" [flexGrow]="2"></ngx-datatable-column>
-      <ngx-datatable-column name="Last Updated by"  prop="lastUpdaterUserId" [flexGrow]="2"></ngx-datatable-column>
-      <ngx-datatable-column name="Actions" sortable="false" prop="id"  [flexGrow]="1">
-        <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template >
+      <ngx-datatable-column name="Last Updated by" prop="lastUpdaterUserId" [flexGrow]="2"></ngx-datatable-column>
+      <ngx-datatable-column name="Actions" sortable="false" prop="id" [flexGrow]="1">
+        <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
 
-          <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px;" >
-            <button data-tests-id="tableItemsButtonDelete" *ngIf="!checkTableItemHoverCondition(row); else elseBtnBlock" mat-icon-button
+          <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px;">
+            <button data-tests-id="tableItemsButtonDelete" *ngIf="checkCanCreate(); else elseBtnBlock" mat-icon-button
               data-tests-id="tableItemsButtonDelete" (click)="deleteTableItem(row, rowIndex)" style="width:30px; height: 30px;">
               <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" [innerHTML]="'trash-2' | feather:18"></span>
             </button>
-             
+
             <ng-template #elseBtnBlock>
 
-                <button data-tests-id="tableItemsButtonInfo" mat-icon-button data-tests-id="tableItemsButtonInfo" style="width:30px; height: 30px;">
-                  <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" [innerHTML]="'info' | feather:18"></span>
-                </button>
-              </ng-template>
+              <button data-tests-id="tableItemsButtonInfo" mat-icon-button data-tests-id="tableItemsButtonInfo" style="width:30px; height: 30px;">
+                <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" [innerHTML]="'info' | feather:18"></span>
+              </button>
+            </ng-template>
 
           </div>
 
@@ -100,10 +96,10 @@
         Please create a new MC to monitor the service
       </div>
       <div class="wrapper-btn-add-mc">
-        <button mat-mini-fab color="primary" (click)="createScreen()" data-tests-id="btn-fab-create-mc" [disabled]="checkCanCreate()">
+        <button mat-mini-fab color="primary" (click)="createScreen()" data-tests-id="btn-fab-create-mc" [disabled]="!checkCanCreate()">
           <span [innerHTML]="'plus' | feather:24"></span>
         </button>
-        <span data-tests-id="btn-span-create-mc" style="margin-top: 10px; font-size: 14px; " [style.color]="checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span>
+        <span data-tests-id="btn-span-create-mc" style="margin-top: 10px; font-size: 14px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span>
       </div>
     </div>
   </ng-template>
diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts
index 349a031..aa783d4 100644
--- a/public/src/app/home/home.component.ts
+++ b/public/src/app/home/home.component.ts
@@ -5,7 +5,8 @@ import { ToastrService } from 'ngx-toastr';
 import { RestApiService } from '../api/rest-api.service';
 import { HostService } from '../host/host.service';
 import { ConfirmPopupComponent } from '../rule-engine/confirm-popup/confirm-popup.component';
-import { PluginPubSub } from '../sdc/plugin-pubsub';
+// import { PluginPubSub } from '../sdc/plugin-pubsub';
+import { PluginPubSub } from 'sdc-pubsub';
 import { Store } from '../store/store';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
@@ -120,33 +121,25 @@ export class HomeComponent {
   }
 
   checkCanCreate() {
-    if (
+    return (
       JSON.parse(this.store.sdcParmas.isOwner) &&
       this.store.sdcParmas.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'
-    ) {
-      return false;
-    } else {
-      return true;
-    }
+    );
   }
 
   // Monitoring Table logic
 
   checkTableItemHoverCondition(item: any): boolean {
-    if (
-      this.store.sdcParmas !== undefined &&
-      this.store.sdcParmas.userId === item.lastUpdaterUserId &&
-      this.store.sdcParmas.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'
-    ) {
-      return false;
-    } else {
-      return true;
-    }
+    return (
+      this.checkCanCreate() &&
+      (this.store.sdcParmas.userId === item.lastUpdaterUserId ||
+        item['lifecycleState'] !== 'NOT_CERTIFIED_CHECKOUT')
+    );
   }
 
   onTableActivate(event: any): void {
     this.hoveredIndex = this.monitoringComponents.findIndex(
-      s => s == event.row
+      s => s === event.row
     );
     console.log('selected : ');
   }
@@ -161,18 +154,6 @@ export class HomeComponent {
     console.log('selected : ', item);
   }
 
-  deleteEnable(item: any): boolean {
-    console.log(
-      'delete enable: ',
-      item.isOwner && item.Lifecycle === 'NOT_CERTIFIED_CHECKOUT'
-    );
-    const { userId, lifecycleState } = this.store.sdcParmas;
-    return (
-      item.lastUpdaterUserId === userId &&
-      lifecycleState === 'NOT_CERTIFIED_CHECKOUT'
-    );
-  }
-
   deleteTableItem(item: any, index: any): void {
     this.deleteRow = index;
     this.dialogRef = this.dialog.open(ConfirmPopupComponent, {
@@ -183,6 +164,7 @@ export class HomeComponent {
       // if the user want to delete
       if (result) {
         if (item.status === 'Submitted') {
+          this.store.loader = true;
           this._restApi
             .deleteMonitoringComponentWithBlueprint(
               this.store.sdcParmas,
@@ -192,18 +174,24 @@ export class HomeComponent {
             )
             .subscribe(
               response => {
-                this.itemDeletedRemoveAndNotify(this.deleteRow);
+                this.itemDeletedRemoveAndNotify(item.uuid, this.deleteRow);
+                this.store.loader = false;
               },
               error => {
-                if (error.messageId === 'SVC6118') {
-                  this.monitoringComponents.splice(this.deleteRow, 1);
-                  this.changeDetectorRef.detectChanges();
-                }
                 const errorMsg = Object.values(error.requestError) as any;
+                if (errorMsg[0].messageId === 'SVC6118') {
+                  this.monitoringComponents = this.monitoringComponents.filter(
+                    comp => {
+                      return comp.uuid !== item.uuid;
+                    }
+                  );
+                }
+                this.store.loader = false;
                 this.toastr.error('', errorMsg[0].formattedErrorMessage);
               }
             );
         } else {
+          this.store.loader = true;
           this._restApi
             .deleteMonitoringComponent(
               this.store.sdcParmas,
@@ -212,10 +200,12 @@ export class HomeComponent {
             )
             .subscribe(
               response => {
-                this.itemDeletedRemoveAndNotify(this.deleteRow);
+                this.itemDeletedRemoveAndNotify(item.uuid, this.deleteRow);
+                this.store.loader = false;
               },
               error => {
                 const errorMsg = Object.values(error.requestError) as any;
+                this.store.loader = false;
                 this.toastr.error('', errorMsg[0]);
               }
             );
@@ -224,9 +214,10 @@ export class HomeComponent {
     });
   }
 
-  itemDeletedRemoveAndNotify(deletedRow: number): void {
-    this.monitoringComponents.splice(deletedRow, 1);
-    this.changeDetectorRef.detectChanges();
+  itemDeletedRemoveAndNotify(uuid, deletedRow: number): void {
+    this.monitoringComponents = this.monitoringComponents.filter(comp => {
+      return comp.uuid !== uuid;
+    });
     this.toastr.success(
       '',
       'Monitoring Configuration was successfully deleted'
diff --git a/public/src/app/import-rules/import-rules.component.html b/public/src/app/import-rules/import-rules.component.html
new file mode 100644
index 0000000..b19c4e3
--- /dev/null
+++ b/public/src/app/import-rules/import-rules.component.html
@@ -0,0 +1,47 @@
+<div data-tests-id="import-rules-container">
+
+  <div>
+    <div style="font-size: 20px; margin-bottom:13px;">
+      Import
+    </div>
+  </div>
+
+  <div style="display:flex; flex-direction:column;">
+    <span class="field-label required space-down" style="margin-right: 10px; color: #5a5a5a; font-size:12px;">Mapping Target</span>
+
+    <select name="mappingTargetForImport" [(ngModel)]="mappingTarget" (ngModelChange)="onChangeMapping($event)" data-tests-id="mappingDdl"
+      style="width: 416px;
+      height: 35px;
+      margin-bottom:17px;
+      border-radius: 2px;
+      background-color: #ffffff;
+      border: solid 1px #d2d2d2;" class="field-select">
+      <option [ngValue]="null" disabled>Select Mapping</option>
+      <optgroup label="Rules Configured">
+        <option *ngFor="let target of advancedSetting" [hidden]="!target.isExist" [value]="target.name" data-tests-id="templateOptionsExist">{{target.name}}</option>
+      </optgroup>
+      <optgroup label="No Mapping Configuration">
+        <option *ngFor="let target of advancedSetting" [hidden]="target.isExist" [value]="target.name" data-tests-id="templateOptionsNotExist">{{target.name}}</option>
+      </optgroup>
+    </select>
+  </div>
+
+  <div style="margin-bottom:17px;">
+    <div style="font-size: 12px; color: #5a5a5a;">
+      Selected file
+    </div>
+    <div class="import-container">
+      <input type="text" class="field-text" [(ngModel)]="fileName" readonly style="width: 300px;
+          height: 35px;
+          border-radius: 2px;
+          margin-right: 20px;
+          background-color: #ffffff;
+          border: solid 1px #d2d2d2;">
+      <button mat-raised-button style="border: 1px solid #009fdb; color:#009fdb; font-size: 14px; font-family: 'Open Sans', sans-serif;text-align: center; height: 36px; width: 96px;">
+        Browse
+      </button>
+      <input type="file" id="file" accept=".json" (change)="handleFileInput($event.target.files)">
+    </div>
+  </div>
+
+</div>
diff --git a/public/src/app/import-rules/import-rules.component.scss b/public/src/app/import-rules/import-rules.component.scss
new file mode 100644
index 0000000..ec1fd30
--- /dev/null
+++ b/public/src/app/import-rules/import-rules.component.scss
@@ -0,0 +1,23 @@
+.import-container {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  .field-text {
+    width: 100%;
+    min-width: 250px;
+    padding: 5px 0 5px 5px;
+    margin-right: 10px;
+    border-radius: 2px;
+    border: 1px solid #d2d2d2;
+    color: #5a5a5a;
+    height: 36px;
+  }
+}
+.import-container input[type='file'] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 100%;
+  height: 36px;
+}
diff --git a/public/src/app/import-rules/import-rules.component.ts b/public/src/app/import-rules/import-rules.component.ts
new file mode 100644
index 0000000..b581dc6
--- /dev/null
+++ b/public/src/app/import-rules/import-rules.component.ts
@@ -0,0 +1,140 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Store } from '../store/store';
+import { RuleEngineApiService } from '../rule-engine/api/rule-engine-api.service';
+
+@Component({
+  selector: 'app-import-rules',
+  templateUrl: './import-rules.component.html',
+  styleUrls: ['./import-rules.component.scss']
+})
+export class ImportRulesComponent {
+  fileToUpload: File = null;
+  fileName = '';
+  mappingTarget: string;
+  advancedSetting: Array<any>;
+  tabName: string;
+  isGroup = false;
+  @Output() refrashRuleList = new EventEmitter();
+
+  constructor(public _ruleApi: RuleEngineApiService, public store: Store) {
+    this._ruleApi.tabIndex
+      // .filter(index => {   if (index >= 0) {     const tabName =
+      // this.store.cdump.nodes[index].name;     console.log('tab name:', tabName); if
+      // (tabName.toLowerCase().includes('map')) {       return index;     }   } })
+      .subscribe(index => {
+        if (index >= 0) {
+          this.tabName = this.store.cdump.nodes[index].name;
+          console.log('tab name:', this.tabName);
+          if (
+            this.tabName.toLowerCase().includes('map') ||
+            this.tabName.toLowerCase().includes('highlandpark') ||
+            this.tabName.toLowerCase().includes('hp')
+          ) {
+            this.advancedSetting = this.store.tabsProperties[index].filter(
+              item => {
+                if (
+                  !(
+                    item.hasOwnProperty('constraints') &&
+                    item.value !== undefined &&
+                    !item.value.includes('get_input')
+                  )
+                ) {
+                  return item;
+                }
+              }
+            );
+            this.mappingTarget = this.advancedSetting[0].name;
+
+            this._ruleApi.setParams({
+              userId: this.store.sdcParmas.userId,
+              nodeName: this.store.tabParmasForRule[0].name,
+              nodeId: this.store.tabParmasForRule[0].nid,
+              vfcmtUuid: this.store.mcUuid,
+              fieldName: this.mappingTarget,
+              flowType: this.store.cdump.flowType
+            });
+
+            this._ruleApi
+              .generateMappingRulesFileName(
+                this.store.tabParmasForRule[0].name,
+                this.store.tabParmasForRule[0].nid,
+                this.store.mcUuid
+              )
+              .subscribe(response => {
+                console.log(
+                  'generateMappingRulesFileName response: ',
+                  response
+                );
+                this.advancedSetting.forEach(element => {
+                  if (response.includes(element.name)) {
+                    element.isExist = true;
+                  } else {
+                    element.isExist = false;
+                  }
+                });
+              });
+            console.log('advancedSetting', this.advancedSetting);
+          }
+        }
+      });
+  }
+
+  onChangeMapping(configurationKey) {
+    console.log('changing propertiy key:', configurationKey);
+    this._ruleApi.setFieldName(configurationKey);
+    this.refrashRuleList.next();
+  }
+
+  private notifyError(error: any) {
+    this.store.loader = false;
+    console.log(error.notes);
+    this.store.ErrorContent = Object.values(error.requestError);
+    this.store.displayErrorDialog = true;
+  }
+
+  handleFileInput(files: FileList) {
+    this.store.loader = true;
+    this.fileToUpload = files.item(0);
+    console.log('file to load:', this.fileToUpload);
+    this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
+    const reader = new FileReader();
+    reader.readAsText(this.fileToUpload, 'UTF-8');
+    reader.onload = () => {
+      console.log(reader.result);
+      this._ruleApi
+        .getLatestMcUuid({
+          contextType: this.store.sdcParmas.contextType,
+          serviceUuid: this.store.sdcParmas.uuid,
+          vfiName: this.store.vfiName,
+          vfcmtUuid: this.store.mcUuid
+        })
+        .subscribe(
+          res => {
+            this.store.mcUuid = res.uuid;
+            if (
+              this.tabName.toLowerCase().includes('highlandpark') ||
+              this.tabName.toLowerCase().includes('hp')
+            ) {
+              this.isGroup = true;
+            }
+            this._ruleApi
+              .importRules(reader.result, res.uuid, this.isGroup)
+              .subscribe(
+                response => {
+                  console.log('success import', response);
+                  this.store.expandImports[this.store.tabIndex] = false;
+                  this.store.loader = false;
+                  this._ruleApi.callUpdateTabIndex(this.store.tabIndex);
+                },
+                error => {
+                  this.notifyError(error);
+                }
+              );
+          },
+          error => {
+            this.notifyError(error);
+          }
+        );
+    };
+  }
+}
diff --git a/public/src/app/main/main.component.html b/public/src/app/main/main.component.html
index 4c71a37..87ee2bf 100644
--- a/public/src/app/main/main.component.html
+++ b/public/src/app/main/main.component.html
@@ -42,8 +42,9 @@
           <button mat-raised-button color="primary" style="width: 95px; height: 36px; border-radius: 2px;" (click)="saveAndCreateBlueprint()">Submit</button>
         </div>
       </div>
+
       <div *ngIf='store.generalflow === "import"'>
-        <button mat-raised-button color="primary" (click)="importMC(this.generalComponent.newVfcmt)" [disabled]="this.generalComponent.generalForm.invalid"
+        <button mat-raised-button color="primary" (click)="importMC(this.generalComponent.newVfcmt)" [disabled]="this.generalComponent.generalForm.invalid || this.generalComponent.importBtnDisabled"
           data-tests-id="importMonitoring" style="width: 95px;height: 36px;">Import</button>
       </div>
     </div>
diff --git a/public/src/app/main/main.component.scss b/public/src/app/main/main.component.scss
index 47f1bd9..eba643c 100644
--- a/public/src/app/main/main.component.scss
+++ b/public/src/app/main/main.component.scss
@@ -31,3 +31,14 @@
 .ui-tabview .ui-tabview-nav li.ui-tabview-selected .ui-tabview-title {
   color: #009fdb;
 }
+
+.ui-tabview .ui-tabview-nav {
+  white-space: nowrap;
+  overflow-x: auto;
+}
+
+.ui-tabview .ui-tabview-nav li {
+  display: inline-block;
+  float: none;
+  margin-right: -4px;
+}
diff --git a/public/src/app/main/main.component.ts b/public/src/app/main/main.component.ts
index a3f2271..3070435 100644
--- a/public/src/app/main/main.component.ts
+++ b/public/src/app/main/main.component.ts
@@ -138,7 +138,12 @@ export class MainComponent {
 
   setDataFromMapToRuleEngine(cdump) {
     this.store.tabParmasForRule = cdump.nodes
-      .filter(x => x.name.toLowerCase().includes('map'))
+      .filter(
+        x =>
+          x.name.toLowerCase().includes('map') ||
+          x.name.toLowerCase().includes('highlandpark') ||
+          x.name.toLowerCase().includes('hp')
+      )
       .map(y => {
         return { name: y.name, nid: y.nid };
       });
@@ -156,6 +161,7 @@ export class MainComponent {
 
   saveCDUMP() {
     this.store.loader = true;
+
     this.restApi
       .saveMonitoringComponent({
         contextType: this.store.sdcParmas.contextType,
@@ -224,8 +230,7 @@ export class MainComponent {
       .subscribe(
         success => {
           this.store.loader = false;
-
-          this.toastr.success('', 'Save succeeded');
+          this.toastr.success('', 'Blueprint was successfully submitted');
         },
         error => {
           this.store.loader = false;
diff --git a/public/src/app/rule-engine/action-list/action-list.component.html b/public/src/app/rule-engine/action-list/action-list.component.html
index 1ee74df..2a35c35 100644
--- a/public/src/app/rule-engine/action-list/action-list.component.html
+++ b/public/src/app/rule-engine/action-list/action-list.component.html
@@ -17,8 +17,8 @@
           align-items: center;" [innerHTML]="'save' | feather:22"></span>
       </button>
 
-      <button mat-raised-button [disabled]="actions.length === 0" style="height: 35px;     margin-left: 10px;" color="primary" data-tests-id="btnDone"
-        (click)="saveAndDone()">
+      <button mat-raised-button [disabled]="actions.length === 0" style="height: 35px;     margin-left: 10px;" color="primary"
+        data-tests-id="btnDone" (click)="saveAndDone()">
         Done
       </button>
     </div>
@@ -51,7 +51,7 @@
       </div>
 
       <div *ngIf="ifStatement">
-        <app-condition #condition (removeConditionCheck)="removeConditionCheck($event)" (onConditionChange)="updateCondition($event)"></app-condition>
+        <app-condition #conditions [condition]="condition" (removeConditionCheck)="removeConditionCheck($event)" (onConditionChange)="updateCondition($event)"></app-condition>
       </div>
     </div>
 
@@ -62,7 +62,7 @@
       <div style="display: flex;">
         <select [(ngModel)]="selectedAction" name="selectedAction" style="height: 2rem; width: 150px; margin-right: 1rem;" data-tests-id="selectAction">
           <option [ngValue]="null" disabled>Select Action</option>
-          
+
           <option value="copy">Copy</option>
           <option value="concat">Concat</option>
           <option value="map">Map</option>
@@ -71,6 +71,10 @@
           <option value="log event">Log Event</option>
           <option value="replace text">Replace Text</option>
           <option value="clear">Clear</option>
+          <option *ngIf="isEnrich" value="hp metric">HP Metric</option>
+          <option *ngIf="isEnrich" value="clear nsf">Clear NSF</option>
+          <option *ngIf="isEnrich" value="string transform">String Transform</option>
+          <option *ngIf="isEnrich" value="Topology Search">Topology Search</option>
 
         </select>
 
@@ -85,13 +89,21 @@
       </div>
 
       <div>
-        <ul>
+        <ul data-tests-id="action-list">
           <li *ngFor="let action of actions; let index = index" style="list-style: none; margin: 1rem 0;" (mouseleave)="hoveredIndex=-1"
             (mouseover)="hoveredIndex=index" data-tests-id="action">
             <div style="display:flex;">
               <app-action #actions style="width: 100%;" [action]="action"></app-action>
 
-              <div style="height: 45px; display: flex; align-items: center;">
+              <div class="btn-wrapper" [ngStyle]="hoveredIndex === index ? {opacity:'1'} :  {opacity:'0'}">
+                <button mat-icon-button class='button-remove' (click)="copyAction(action, index)" data-tests-id="makeCopyOfAction" *ngIf="!(action.actionType === 'map' || action.actionType === 'clear' || action.actionType === 'log text')">
+                  <span style="width: 100%;
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;" [innerHTML]="'copy' | feather:20"></span>
+                </button>
+
                 <button mat-icon-button class='button-remove' (click)="removeAction(action)" data-tests-id="deleteAction">
                   <mat-icon>delete</mat-icon>
                 </button>
diff --git a/public/src/app/rule-engine/action-list/action-list.component.scss b/public/src/app/rule-engine/action-list/action-list.component.scss
index 67fa048..37daf21 100644
--- a/public/src/app/rule-engine/action-list/action-list.component.scss
+++ b/public/src/app/rule-engine/action-list/action-list.component.scss
@@ -43,6 +43,28 @@
   }
 }
 
+.btn-wrapper {
+  display: flex;
+  height: 45px;
+  opacity: 0;
+  &:hover {
+    opacity: 1;
+    align-items: center;
+  }
+}
+
+::ng-deep .ui-radiobutton-box.ui-state-active {
+  border: 1px solid #009fdb;
+  background: #ffffff;
+  color: #009fdb;
+}
+
+.ui-radiobutton-box.ui-state-active {
+  border: 1px solid #009fdb;
+  background: #ffffff;
+  color: #009fdb;
+}
+
 :host {
   @mixin md-icon-size($size: 24px) {
     // font-size: $size;
@@ -53,9 +75,12 @@
   .material-icons.mat-icon {
     @include md-icon-size(24px);
   }
-  /deep/ .mat-button-wrapper {
+
+  /deep/ .mat-mini-fab .mat-button-wrapper {
     padding: 0;
+    display: flex;
   }
+
   .mat-icon {
     width: 18px;
     height: 18px;
diff --git a/public/src/app/rule-engine/action-list/action-list.component.ts b/public/src/app/rule-engine/action-list/action-list.component.ts
index 27a74d4..f8fd6dd 100644
--- a/public/src/app/rule-engine/action-list/action-list.component.ts
+++ b/public/src/app/rule-engine/action-list/action-list.component.ts
@@ -6,11 +6,12 @@ import {
   ViewChildren
 } from '@angular/core';
 import { NgForm } from '@angular/forms';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEmpty } from 'lodash';
 import { v1 as uuid } from 'uuid';
 import { Store } from '../../store/store';
 import { ActionComponent } from '../action/action.component';
 import { RuleEngineApiService } from '../api/rule-engine-api.service';
+import { toJS } from 'mobx';
 
 @Component({
   selector: 'app-action-list',
@@ -23,6 +24,10 @@ export class ActionListComponent implements AfterViewInit {
   condition: any;
   eventType: string;
   version: string;
+  entryPhase: string;
+  publishPhase: string;
+  groupId: string;
+  phase: string;
   params;
   selectedAction;
   targetSource;
@@ -30,17 +35,29 @@ export class ActionListComponent implements AfterViewInit {
   actions = new Array();
   ifStatement = false;
   uid = '';
+  isEnrich = false;
+  hoveredIndex = -1;
   backupActionForCancel = new Array();
   @ViewChild('actionListFrm') actionListFrm: NgForm;
-  @ViewChild('condition') conditionRef;
+  @ViewChild('conditions') conditionRef;
   @ViewChildren('actions') actionsRef: QueryList<ActionComponent>;
 
   constructor(private _ruleApi: RuleEngineApiService, public store: Store) {
+    this.error = null;
     this._ruleApi.editorData.subscribe(data => {
       this.params = data.params;
       console.log('update.. params', data.params);
       this.targetSource = data.targetSource;
       this.version = data.version;
+      this.groupId = data.groupId;
+      this.isEnrich =
+        !isEmpty(data.groupId) &&
+        data.groupId.substring(0, 1).toLowerCase() === 'e'
+          ? true
+          : false;
+      this.entryPhase = data.entryPhase;
+      this.publishPhase = data.publishPhase;
+      this.phase = data.phase;
       this.eventType = data.eventType;
       if (data.item) {
         // edit mode set values to attributes
@@ -66,25 +83,46 @@ export class ActionListComponent implements AfterViewInit {
   }
 
   convertActionDataFromServer(actions) {
-    return actions.map(item => {
-      if (!item.hasOwnProperty('nodes')) {
-        return Object.assign({}, item, { nodes: this.targetSource });
-      }
-    });
+    return actions
+      .map(item => {
+        if (!item.hasOwnProperty('nodes')) {
+          return Object.assign({}, item, { nodes: this.targetSource });
+        }
+      })
+      .map(item => {
+        if (item.hasOwnProperty('search')) {
+          console.log(toJS(item.search.enrich.fields));
+          console.log(toJS(item.search.updates));
+
+          return Object.assign({}, item, {
+            search: {
+              enrich: {
+                fields: toJS(item.search.enrich.fields),
+                prefix: item.search.enrich.prefix
+              },
+              radio: item.search.radio,
+              searchField: item.search.searchField,
+              searchFilter: {
+                left: item.search.searchFilter.left,
+                operator: item.search.searchFilter.operator,
+                right: toJS(item.search.searchFilter.right)
+              },
+              searchValue: item.search.searchValue,
+              updates: toJS(item.search.updates)
+            }
+          });
+        } else {
+          return item;
+        }
+      });
   }
 
   ngAfterViewInit() {
-    // console.log(this.actionsRef.toArray());
-    if (this.condition) {
-      if (this.condition.name === 'condition') {
-        this.conditionRef.updateMode(true, this.condition);
-      } else {
-        const convertedCondition = this.convertConditionFromServer(
-          this.condition
-        );
-        this.conditionRef.updateMode(false, convertedCondition);
-      }
-    }
+    // console.log(this.actionsRef.toArray()); if (this.condition) {   if
+    // (this.condition.name === 'condition') {     this       .conditionRef
+    // .updateMode(true, this.condition);   } else {     const convertedCondition =
+    // this.convertConditionFromServer(this.condition);     this .conditionRef
+    // .updateMode(false, convertedCondition);   } }
   }
 
   addAction2list(selectedAction) {
@@ -134,6 +172,36 @@ export class ActionListComponent implements AfterViewInit {
         },
         logEvent: {
           title: ''
+        },
+        selectedHpMetric: '',
+        stringTransform: {
+          startValue: '',
+          targetCase: '',
+          isTrimString: false
+        },
+        search: {
+          searchField: '',
+          searchValue: '',
+          searchFilter: {
+            left: '',
+            right: '',
+            operator: null
+          },
+          radio: 'updates',
+          enrich: {
+            fields: [
+              {
+                value: ''
+              }
+            ],
+            prefix: ''
+          },
+          updates: [
+            {
+              key: '',
+              value: ''
+            }
+          ]
         }
       });
     }
@@ -149,6 +217,20 @@ export class ActionListComponent implements AfterViewInit {
     });
   }
 
+  copyAction(action, index) {
+    const tmpAction = cloneDeep(action);
+    tmpAction.id = uuid();
+    tmpAction.target =
+      typeof tmpAction.selectedNode === 'string'
+        ? tmpAction.selectedNode
+        : typeof tmpAction.selectedNode === 'undefined'
+          ? tmpAction.target
+          : tmpAction.selectedNode.id;
+    // this   .actions   .splice(index, 0, tmpAction);
+    this.actions.push(tmpAction);
+    console.log(this.actions);
+  }
+
   updateCondition(data) {
     this.condition = data;
   }
@@ -176,6 +258,10 @@ export class ActionListComponent implements AfterViewInit {
     const actionSetData = this.actions.map(item => {
       return {
         id: item.id,
+        entryPhase: item.entryPhase,
+        publishPhase: item.publishPhase,
+        groupId: item.groupId,
+        phase: item.phase,
         actionType: item.actionType,
         from: item.from,
         target:
@@ -188,7 +274,70 @@ export class ActionListComponent implements AfterViewInit {
         dateFormatter: item.dateFormatter,
         replaceText: item.replaceText,
         logText: item.logText,
-        logEvent: item.logEvent
+        logEvent: item.logEvent,
+        selectedHpMetric: item.selectedHpMetric,
+        stringTransform: {
+          startValue:
+            item.stringTransform !== undefined
+              ? item.stringTransform.startValue
+              : '',
+          targetCase:
+            item.stringTransform !== undefined
+              ? item.stringTransform.targetCase
+              : '',
+          isTrimString:
+            item.stringTransform !== undefined
+              ? item.stringTransform.isTrimString
+              : false
+        },
+        search: {
+          searchField: item.search !== undefined ? item.search.searchField : '',
+          searchValue: item.search !== undefined ? item.search.searchValue : '',
+          searchFilter: {
+            left:
+              item.search !== undefined ? item.search.searchFilter.left : '',
+            right:
+              item.search !== undefined
+                ? typeof item.search.searchFilter.right === 'string'
+                  ? item.search.searchFilter.right.split(',')
+                  : item.search.searchFilter.right
+                : [],
+            operator:
+              item.search !== undefined
+                ? item.search.searchFilter.operator
+                : null
+          },
+          radio: item.search !== undefined ? item.search.radio : 'updates',
+          enrich: {
+            fields:
+              item.search !== undefined
+                ? item.search.radio === 'enrich'
+                  ? item.search.enrich.fields
+                  : [
+                      {
+                        value: ''
+                      }
+                    ]
+                : '',
+            prefix:
+              item.search !== undefined
+                ? item.search.radio === 'enrich'
+                  ? item.search.enrich.prefix
+                  : ''
+                : ''
+          },
+          updates:
+            item.search !== undefined
+              ? item.search.radio === 'updates'
+                ? item.search.updates
+                : [
+                    {
+                      key: '',
+                      value: ''
+                    }
+                  ]
+              : []
+        }
       };
     });
     let conditionData2server = null;
@@ -208,7 +357,11 @@ export class ActionListComponent implements AfterViewInit {
       uid: this.uid,
       description: this.description,
       actions: actionSetData,
-      condition: this.ifStatement ? conditionData2server : null
+      condition: this.ifStatement ? conditionData2server : null,
+      entryPhase: this.entryPhase,
+      publishPhase: this.publishPhase,
+      groupId: this.groupId,
+      phase: this.phase
     };
   }
 
@@ -230,51 +383,90 @@ export class ActionListComponent implements AfterViewInit {
   }
 
   saveAndDone() {
-    const data = this.prepareDataToSaveRule();
-    this.store.loader = true;
-    this._ruleApi.modifyRule(data).subscribe(
-      response => {
-        this.store.loader = false;
-        this.store.updateRuleInList(response);
-        this._ruleApi.callUpdateVersionLock();
-        this.store.isLeftVisible = true;
-      },
-      error => {
-        this.errorHandler(error);
-      },
-      () => {
-        this.store.loader = false;
-      }
-    );
+    this.error = null;
+    const actionComp = this.actionsRef.toArray();
+    const filterInvalidActions = actionComp.filter(comp => {
+      return comp.actionFrm && comp.actionFrm.invalid;
+    });
+    if (this.actionListFrm.valid && filterInvalidActions.length === 0) {
+      const data = this.prepareDataToSaveRule();
+      this.store.loader = true;
+
+      this._ruleApi
+        .getLatestMcUuid({
+          contextType: this.store.sdcParmas.contextType,
+          serviceUuid: this.store.sdcParmas.uuid,
+          vfiName: this.store.vfiName,
+          vfcmtUuid: this.store.mcUuid
+        })
+        .subscribe(
+          res => {
+            this.store.mcUuid = res.uuid;
+            this._ruleApi.modifyRule(data, res.uuid).subscribe(
+              response => {
+                // clear temp copy rule.
+                this.clearCopyRuleFromList();
+                // then update the rule list and sync with server
+                this.store.updateRuleInList(response);
+                this._ruleApi.callUpdateVersionLock();
+                this.store.loader = false;
+                this.store.isLeftVisible = true;
+              },
+              error => {
+                this.errorHandler(error);
+              },
+              () => {}
+            );
+          },
+          error => this.errorHandler(error),
+          () => {}
+        );
+    }
+  }
+
+  private clearCopyRuleFromList() {
+    this.store.ruleList = this.store.ruleList.filter(item => item.uid !== '');
   }
 
   saveRole() {
+    this.error = null;
     const actionComp = this.actionsRef.toArray();
     const filterInvalidActions = actionComp.filter(comp => {
-      return (
-        // (comp.fromInstance && comp.fromInstance.fromFrm.invalid) ||
-        // (comp.targetInstance && comp.targetInstance.targetFrm.invalid) ||
-        comp.actionFrm && comp.actionFrm.invalid
-      );
+      return comp.actionFrm && comp.actionFrm.invalid;
     });
-    if (this.actionListFrm.valid && filterInvalidActions.length == 0) {
+    if (this.actionListFrm.valid && filterInvalidActions.length === 0) {
       const data = this.prepareDataToSaveRule();
       this.store.loader = true;
-      this._ruleApi.modifyRule(data).subscribe(
-        response => {
-          this.store.loader = false;
-          this.store.updateRuleInList(response);
-          this._ruleApi.callUpdateVersionLock();
-          this.uid = response.uid;
-          // add toast notification
-        },
-        error => {
-          this.errorHandler(error);
-        },
-        () => {
-          this.store.loader = false;
-        }
-      );
+      this._ruleApi
+        .getLatestMcUuid({
+          contextType: this.store.sdcParmas.contextType,
+          serviceUuid: this.store.sdcParmas.uuid,
+          vfiName: this.store.vfiName,
+          vfcmtUuid: this.store.mcUuid
+        })
+        .subscribe(
+          res => {
+            this.store.mcUuid = res.uuid;
+            this._ruleApi.modifyRule(data, res.uuid).subscribe(
+              response => {
+                // clear temp copy rule.
+                this.clearCopyRuleFromList();
+                // then update the rule list and sync with server
+                this.store.updateRuleInList(response);
+                this._ruleApi.callUpdateVersionLock();
+                this.uid = response.uid;
+                // add toast notification
+                this.store.loader = false;
+              },
+              error => {
+                this.errorHandler(error);
+              },
+              () => {}
+            );
+          },
+          error => this.errorHandler(error),
+          () => {}
+        );
     } else {
       // scroll to first invalid element const elId =
       // filterInvalidActions[0].action.id; const el = document.getElementById(elId as
@@ -283,18 +475,6 @@ export class ActionListComponent implements AfterViewInit {
     }
   }
 
-  public convertConditionFromServer(condition) {
-    const temp = new Array();
-    temp.push(condition);
-    const cloneCondition = cloneDeep(temp);
-    const conditionSetData = this.changeRightToArrayOrString(
-      cloneCondition,
-      false
-    );
-    console.log('condition to server:', conditionSetData);
-    return conditionSetData;
-  }
-
   public convertConditionToServer(tree) {
     const cloneCondition = cloneDeep(tree);
     const conditionSetData = this.changeRightToArrayOrString(
@@ -311,6 +491,7 @@ export class ActionListComponent implements AfterViewInit {
 
   closeDialog(): void {
     this.actions = this.backupActionForCancel;
+    this.clearCopyRuleFromList();
     this.store.isLeftVisible = true;
   }
 }
diff --git a/public/src/app/rule-engine/action/action.component.html b/public/src/app/rule-engine/action/action.component.html
index 250af34..38a9aa0 100644
--- a/public/src/app/rule-engine/action/action.component.html
+++ b/public/src/app/rule-engine/action/action.component.html
@@ -8,22 +8,238 @@
       </div>
 
       <!-- from component -->
-      <app-from [hidden]="action.actionType === 'log event' || action.actionType === 'log text'" class="center-content-item" #from
-        [actionType]="action.actionType" (onFromChange)="updateFrom($event)"></app-from>
+      <app-from [hidden]="action.actionType === 'log event' || action.actionType === 'log text' || action.actionType === 'hp metric' || action.actionType === 'Topology Search' ||  action.actionType === 'string transform'"
+        class="center-content-item" #from [actionType]="action.actionType" (onFromChange)="updateFrom($event)"></app-from>
 
       <!-- target component -->
-      <app-target [hidden]="action.actionType === 'clear' || action.actionType === 'replace text' || action.actionType === 'log text' || action.actionType === 'log event'"
+      <app-target [hidden]="action.actionType === 'clear' || action.actionType === 'clear nsf' || action.actionType === 'replace text' || action.actionType === 'log text' || action.actionType === 'log event' || action.actionType === 'hp metric' || action.actionType === 'string transform' || action.actionType === 'Topology Search' "
         #target style="width: 100%" (onTargetChange)="updateTarget($event)" [nodes]="action.nodes">
       </app-target>
 
+      <!-- search -->
+      <div *ngIf="action.actionType === 'Topology Search'" style="width: 100%;">
+        <div style="display:flex; margin-bottom:10px;">
+          <div class="from" style="width: 100%;">
+            <div class="from-container">
+              <div style="display: flex; align-items: center; width: 100%;" class="label">
+                <span class="label" style="padding: 0 5px; ">
+                  Field
+                </span>
+                <input required name="searchField" class="input-text" data-tests-id="searchField" [(ngModel)]="action.search.searchField"
+                  type="text" placeholder="Search Field">
+              </div>
+            </div>
+          </div>
+          <div class="from" style="width: 100%; padding-right: 0;">
+            <div class="from-container">
+              <div style="display: flex; align-items: center; width: 100%;" class="label">
+                <span class="label" style="padding: 0 5px;">
+                  Value
+                </span>
+                <input required class="input-text" data-tests-id="searchValue" [(ngModel)]="action.search.searchValue" type="text" name="searchValue"
+                  placeholder="Search Value">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="from" style="width: 100%; padding-right:0">
+          <!-- <div class="from-container">
+            <div style="display: flex; align-items: center; width: 100%;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">
+                Filter
+              </span>
+              <input required class="input-text" name="searchFilter" data-tests-id="searchFilter" [(ngModel)]="action.search.searchFilter"
+                type="text" placeholder="Search Filter">
+            </div>
+          </div> -->
+          <div class="from-conatiner">
+            <div style="display: flex;">
+              <div class="label" style="width:100%">
+                <span class="label" style="padding: 0 10px; border-left: none;">
+                  Input
+                </span>
+                <input class="input-text" name="searchLeft" data-tests-id="searchLeft" [(ngModel)]="action.search.searchFilter.left" type="text">
+              </div>
+
+              <div style="margin: 0 1rem;">
+                <select style="height: 30px; padding: 0 10px;
+                border-color: #e0e0e0;" name="searchOperator" data-tests-id="searchOperator" [(ngModel)]="action.search.searchFilter.operator">
+                  <option [ngValue]="null" disabled>Select operator</option>
+                  <option value="contains">Contains</option>
+                  <option value="endsWith">Ends with</option>
+                  <option value="startsWith">Starts with</option>
+                  <option value="equals">Equals</option>
+                  <option value="notEqual">Not equal</option>
+                  <option value="oneOf">One of</option>
+                  <option value="NotOneOf">Not one of</option>
+                </select>
+              </div>
+
+              <div class="label" style="width:100%">
+                <span class="label" style="padding: 0 10px; border-left: none;">
+                  Value
+                </span>
+                <input class="input-text" name="searchRight" data-tests-id="searchRight" [(ngModel)]="action.search.searchFilter.right" type="text">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style="margin: 15px 0;">
+          <p-radioButton name="searchRadio" label="Updates" value="updates" [ngModel]="action.search.radio" data-tests-id="radioUpdates"
+            (ngModelChange)="searchRadioChange($event)"></p-radioButton>
+          <span style="padding-left:15px;">
+            <p-radioButton name="searchRadio" label="Enrich" value="enrich" [ngModel]="action.search.radio" data-tests-id="radioEnrich"
+              (ngModelChange)="searchRadioChange($event)"></p-radioButton>
+          </span>
+        </div>
+
+        <div *ngIf="action.search.radio === 'enrich'" style="display:flex; margin-bottom:10px;">
+          <div>
+            <div>
+              <div style="display: flex; flex-direction: column; align-items: flex-start; width: 100%;">
+                <div *ngFor="let input of action.search.enrich.fields; let index = index;" data-tests-id="searchFields" (mouseleave)="hoveredIndex=-1"
+                  (mouseover)="hoveredIndex=index" class="from" style="margin-bottom:1rem; display: flex; flex-direction: row; align-items: flex-start;">
+                  <div class="from-container" style="display: flex; flex-direction: row;">
+                    <div style="display: flex; align-items: center; width: 100%;" class="label">
+                      <span class="label" style="padding: 0 5px; width: 50px;">Fields</span>
+                      <input class="input-text" [(ngModel)]="input.value" type="text" data-tests-id="searchFieldValue" required name="searchFeild[{{index}}]">
+                    </div>
+
+                    <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeSearchField(index)"
+                      *ngIf="action.search.enrich.fields.length > 1" style="box-shadow: none; height: 24px; width: 24px; display:flex"
+                      data-tests-id="btnDelete">
+                      <mat-icon class="md-24">delete</mat-icon>
+                    </button>
+                  </div>
+
+                </div>
+                <div style="display:flex; justify-content: space-between;">
+                  <div style="display: flex; align-items: center;">
+                    <button mat-mini-fab color="primary" (click)="addSearchFeild()" style="box-shadow: none; height: 16px; width: 16px; display:flex"
+                      data-tests-id="btnAddSearchFeild">
+                      <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
+                    </button>
+                    <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Fields</span>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+          <div class="from">
+            <div class="from-container">
+              <div style="display: flex; align-items: center; width: 100%;" class="label">
+                <span class="label" style="padding: 0 5px;">
+                  Prefix
+                </span>
+                <input required class="input-text" name="searchPrefix" data-tests-id="searchPrefix" [(ngModel)]="action.search.enrich.prefix"
+                  type="text" placeholder="Search prefix">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div *ngIf="action.search.radio === 'updates'">
+          <table style="width: 100%; margin-bottom: 1rem;">
+            <thead style="background: #D2D2D2;">
+              <tr style="height: 30px;">
+                <th style="padding-left: 10px;">Key</th>
+                <th style="padding-left: 10px;">value</th>
+              </tr>
+            </thead>
+            <tbody ngModelGroup="searchUpdateKeyValue" #searchUpdateKeyValue="ngModelGroup">
+              <tr *ngFor="let item of action.search.updates; let index = index;" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index">
+                <th style="height: 30px; border: 1px solid #F3F3F3;">
+                  <input [(ngModel)]="item.key" required name="searchKey[{{index}}]" data-tests-id="updatesKey" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
+                </th>
+                <th style="height: 30px; border: 1px solid #F3F3F3;">
+                  <input [(ngModel)]="item.value" required name="searchValue[{{index}}]" data-tests-id="updatesValue" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
+                </th>
+                <th style="height: 30px; display: flex; align-items: baseline;">
+                  <button mat-icon-button data-tests-id="btn-remove-row" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}"
+                    class="button-remove" (click)="removeSearchUpdatesRow(index)" *ngIf="action.search.updates.length > 1"
+                    style="height: 24px; width: 24px; display:flex; box-shadow: none;">
+                    <mat-icon class="md-24">delete</mat-icon>
+                  </button>
+                </th>
+              </tr>
+            </tbody>
+          </table>
+          <div style="display:flex; justify-content: flex-start;">
+            <div style="display: flex; align-items: center;">
+              <button mat-mini-fab color="primary" (click)="addSearchUpdateRow()" data-tests-id="btn-add-row" style="height: 16px; width: 16px; display:flex; box-shadow: none;">
+                <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
+              </button>
+              <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Row</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Hp Metric -->
+      <div *ngIf="action.actionType === 'hp metric'" class="center-content-item">
+        <ng-select name="hp-metric" [items]="metrics" required [virtualScroll]="true" placeholder="Select Parser Type" [(ngModel)]="action.selectedHpMetric"
+          (change)="metricChange($event)" data-tests-id="hp metric">
+        </ng-select>
+      </div>
+
+      <!-- string transform -->
+      <div *ngIf="action.actionType === 'string transform'" class="center-content-item">
+
+        <div style="display:flex; margin-bottom:10px;">
+          <div class="from">
+            <div class="from-container">
+              <div style="display: flex; align-items: center; width: 100%;" class="label">
+                <span class="label" style="padding: 0 5px; width: 100px;">
+                  Start Value
+                </span>
+                <input required class="input-text" data-tests-id="startValue" name="title" [(ngModel)]="action.stringTransform.startValue"
+                  type="text" placeholder="Select start value">
+              </div>
+            </div>
+          </div>
+
+          <app-target [hidden]="! (action.actionType === 'string transform')" #target style="width: 100%" (onTargetChange)="updateTarget($event)"
+            [nodes]="action.nodes">
+          </app-target>
+        </div>
+
+        <div class="from" style="padding-right:0">
+          <div class="from-container">
+            <div style="display: flex; align-items: center; width: 100%;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">
+                Target case
+              </span>
+              <input required class="input-text" data-tests-id="targetCase" name="title" [(ngModel)]="action.stringTransform.targetCase"
+                type="text" placeholder="Select target case">
+            </div>
+          </div>
+        </div>
+
+        <div class="pretty p-svg" style="margin: 1rem 0rem;">
+          <input type="checkbox" name="isTrimString" data-tests-id="isTrimString" [checked]="action.stringTransform.isTrimString" (change)="action.stringTransform.isTrimString = !action.stringTransform.isTrimString"
+          />
+          <div class="state">
+            <svg class="svg svg-icon" viewBox="0 0 20 20">
+              <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
+                style="stroke: #009fdb; fill:#009fdb;"></path>
+            </svg>
+            <label>Trim String</label>
+          </div>
+        </div>
+      </div>
+
       <!-- log Event -->
       <div *ngIf="action.actionType === 'log event'" class="center-content-item">
         <div class="from">
           <div class="from-container">
             <div style="display: flex; align-items: center; width: 100%;" class="label">
               <span class="label" style="padding: 0 5px; width: 100px;">Title</span>
-              <input required class="input-text" data-tests-id="InputLogTitle" ngModel name="title" [(ngModel)]="action.logEvent.title"
-                type="text" placeholder="The title for the log entry">
+              <input required class="input-text" data-tests-id="InputLogTitle" name="title" [(ngModel)]="action.logEvent.title" type="text"
+                placeholder="The title for the log entry">
             </div>
           </div>
         </div>
@@ -35,8 +251,8 @@
           <div class="from-container">
             <div style="display: flex; align-items: center; width: 100%;" class="label">
               <span class="label" style="padding: 0 5px; width: 100px;">Log Text</span>
-              <input required class="input-text" data-tests-id="InputLogText" ngModel name="logText" [(ngModel)]="action.logText.text"
-                type="text" placeholder="The title for the log entry">
+              <input required class="input-text" data-tests-id="InputLogText" name="logText" [(ngModel)]="action.logText.text" type="text"
+                placeholder="Text to log">
             </div>
           </div>
         </div>
@@ -44,49 +260,53 @@
 
     </div>
 
-      <!-- dateFormatter -->
-      <div *ngIf="action.actionType === 'date formatter'" style="flex-direction: column; margin-left: 156px; align-items: flex-end;">
-          <div style="display: flex; margin: 0.5em 0; padding-left: 6px;">
-            <div class="from" style="width:50%;">
-              <div class="from-container">
-                <div style="display: flex; align-items: center; width: 100%;" class="label">
-                  <span class="label" style="padding: 0 5px; width: 100px;">From Format</span>
-                  <input data-tests-id="InputFromFormat" class="input-text" ngModel required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat" type="text">
-                </div>
-              </div>
+    <!-- dateFormatter -->
+    <div *ngIf="action.actionType === 'date formatter'" style="flex-direction: column; margin-left: 163px; align-items: flex-end;">
+      <div style="display: flex; margin: 0.5em 0; padding-left: 6px;">
+        <div class="from" style="width:50%;">
+          <div class="from-container">
+            <div style="display: flex; align-items: center; width: 100%;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">From Format</span>
+              <input data-tests-id="InputFromFormat" class="input-text" required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat"
+                type="text">
             </div>
-            <div class="from"  style="width:50%; padding: 0;">
-              <div class="from-container">
-                <div style="display: flex; align-items: center; width: 100%;" class="label">
-                  <span class="label" style="padding: 0 5px; width: 100px;">To Format</span>
-                  <input data-tests-id="InputToFormat" class="input-text" ngModel required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat" type="text">
-                </div>
-              </div>
+          </div>
+        </div>
+        <div class="from" style="width:50%; padding: 0;">
+          <div class="from-container">
+            <div style="display: flex; align-items: center; width: 100%;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">To Format</span>
+              <input data-tests-id="InputToFormat" class="input-text" required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat"
+                type="text">
             </div>
           </div>
-    
-          <div style="display: flex; margin: 0.5em 0; padding-left: 6px;">
-            <div class="from" style="width:50%;">
-              <div class="from-container">
-                <div style="display: flex; align-items: center; width: 100%;" class="label">
-                  <span class="label" style="padding: 0 5px; width: 132px;">From Time-zone</span>
-                  <input class="input-text" data-tests-id="InputFromTimezone" ngModel required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone" type="text">
-                </div>
-              </div>
+        </div>
+      </div>
+
+      <div style="display: flex; margin: 0.5em 0; padding-left: 6px;">
+        <div class="from" style="width:50%;">
+          <div class="from-container">
+            <div style="display: flex; align-items: center; width: 100%;" class="label">
+              <span class="label" style="padding: 0 5px; width: 132px;">From Time-zone</span>
+              <input class="input-text" data-tests-id="InputFromTimezone" required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone"
+                type="text">
             </div>
-            <div class="from" style="width:50%; padding: 0;">
-              <div class="from-container">
-                <div style="display: flex; align-items: center; width: 100%;" class="label">
-                  <span class="label" style="padding: 0 5px; width: 100px;">To Time-zone</span>
-                  <input class="input-text" data-tests-id="InputToTimezone" ngModel required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone" type="text">
-                </div>
-              </div>
+          </div>
+        </div>
+        <div class="from" style="width:50%; padding: 0;">
+          <div class="from-container">
+            <div style="display: flex; align-items: center; width: 100%;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">To Time-zone</span>
+              <input class="input-text" data-tests-id="InputToTimezone" required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone"
+                type="text">
             </div>
           </div>
         </div>
+      </div>
+    </div>
 
     <!-- replace text -->
-    <div *ngIf="action.actionType === 'replace text'" class="action-container" style="flex-direction: row; margin-left: 152px; padding: 0 0.8em;">
+    <div *ngIf="action.actionType === 'replace text'" class="action-container" style="flex-direction: row; margin-left: 160px; padding: 0 0.8em;">
 
       <div class="action-item">
         <div class="from" style="width:100%;">
@@ -94,8 +314,8 @@
 
             <div class="label" style="width: 100%;">
               <span class="label" style="padding: 0 5px; width: 100px;">Find what</span>
-              <input data-tests-id="InputFindWhat" class="input-text" ngModel required name="findWhat" [(ngModel)]="action.replaceText.find"
-                type="text" placeholder="Find text">
+              <input data-tests-id="InputFindWhat" class="input-text" required name="findWhat" [(ngModel)]="action.replaceText.find" type="text"
+                placeholder="Find text">
             </div>
 
           </div>
@@ -109,7 +329,7 @@
 
             <div class="label" style="width: 100%;">
               <span class="label" style="padding: 0 5px; width: 100px;">Replace with</span>
-              <input data-tests-id="InputReplaceWith" class="input-text" ngModel required name="replaceWith" [(ngModel)]="action.replaceText.replace"
+              <input data-tests-id="InputReplaceWith" class="input-text" required name="replaceWith" [(ngModel)]="action.replaceText.replace"
                 type="text" placeholder="Replace with text">
             </div>
 
@@ -120,15 +340,14 @@
     </div>
 
     <!-- log text -->
-    <div *ngIf="action.actionType === 'log text'" class="action-container" style="flex-direction: row; margin-left: 152px; padding: 0 0.8em;">
+    <div *ngIf="action.actionType === 'log text'" class="action-container" style="flex-direction: row; margin-left: 160px; padding: 0 0.8em;">
 
       <div class="action-item">
         <div class="from" style="width: 100%;">
           <div class="from-container" display="padding:0;">
             <div class="label" style="width: 100%;">
               <span class="label" style="padding: 0 5px; width: 100px;">Log Name</span>
-              <input class="input-text" data-tests-id="InputLogName" ngModel name="logName" [(ngModel)]="action.logText.name"
-                type="text" placeholder="Enter log name">
+              <input class="input-text" data-tests-id="InputLogName" name="logName" [(ngModel)]="action.logText.name" type="text" placeholder="Enter log name">
             </div>
           </div>
         </div>
@@ -139,8 +358,8 @@
           <div class="from-container">
             <div class="label" style="width: 100%;">
               <span class="label" style="padding: 0 5px; width: 100px;">Log Level</span>
-              <input class="input-text" data-tests-id="InputLogLevel" ngModel required name="logLevel" [(ngModel)]="action.logText.level"
-                type="text" placeholder="Text to log">
+              <input class="input-text" data-tests-id="InputLogLevel" required name="logLevel" [(ngModel)]="action.logText.level" type="text"
+                placeholder="The title for the log entry">
             </div>
           </div>
         </div>
@@ -165,7 +384,7 @@
           </div>
         </div>
         <div *ngIf="action.map.haveDefault" class="input-wrapper">
-          <input type="text" ngModel required name="defaultInput" data-tests-id="defaultInput" [(ngModel)]="action.map.default" class="input">
+          <input type="text" required name="defaultInput" data-tests-id="defaultInput" [(ngModel)]="action.map.default" class="input">
         </div>
       </div>
 
@@ -179,10 +398,10 @@
         <tbody ngModelGroup="mapKeyValue" #mapKeyValue="ngModelGroup">
           <tr *ngFor="let item of action.map.values; let index = index;" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index">
             <th style="height: 30px; border: 1px solid #F3F3F3;">
-              <input [(ngModel)]="item.key" ngModel required name="mapValue[{{index}}]" data-tests-id="key" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
+              <input [(ngModel)]="item.key" required name="mapKey[{{index}}]" data-tests-id="key" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
             </th>
             <th style="height: 30px; border: 1px solid #F3F3F3;">
-              <input [(ngModel)]="item.value" ngModel required name="mapValue[{{index}}]" data-tests-id="value" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
+              <input [(ngModel)]="item.value" required name="mapValue[{{index}}]" data-tests-id="value" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
             </th>
             <th style="height: 30px; display: flex; align-items: baseline;">
               <button mat-icon-button data-tests-id="btn-remove-row" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}"
@@ -195,7 +414,7 @@
       </table>
 
 
-      <div style="display:flex; justify-content: space-between;">
+      <div style="display:flex; justify-content: flex-start;">
         <div style="display: flex; align-items: center;">
           <button mat-mini-fab color="primary" (click)="addMapRow()" data-tests-id="btn-add-row" style="height: 16px; width: 16px; display:flex; box-shadow: none;">
             <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
@@ -203,6 +422,17 @@
           </button>
           <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Row</span>
         </div>
+        <div class="btn-wrapper">
+          <div style="width: 36px; height: 36px; cursor: pointer;">
+            <span style="width: 100%;
+                    color:#5a5a5a;
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;" [innerHTML]="'download' | feather:20"></span>
+          </div>
+          <input type="file" id="file" accept=".csv" (change)="handleFileInput($event.target.files)">
+        </div>
       </div>
     </div>
 
diff --git a/public/src/app/rule-engine/action/action.component.scss b/public/src/app/rule-engine/action/action.component.scss
index fc36380..e25f0fd 100644
--- a/public/src/app/rule-engine/action/action.component.scss
+++ b/public/src/app/rule-engine/action/action.component.scss
@@ -11,6 +11,13 @@
   .highlight {
     color: #009fdb;
   }
+  .input-text {
+    border: none;
+    flex: 1;
+    // width: 250px;
+    padding: 5px 0 5px 5px;
+    margin: 0;
+  }
   .center-content {
     display: flex;
     width: 100%;
@@ -23,7 +30,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      min-width: 142px;
+      min-width: 150px;
     }
     .center-content-item {
       width: 100%;
@@ -84,7 +91,8 @@
 .from {
   display: flex;
   flex-direction: column;
-  padding: 0 10px;
+  // padding: 0 10px;
+  padding-right: 10px;
   .from-container {
     display: flex;
     flex-direction: column;
@@ -131,3 +139,16 @@
   padding: 0 5px;
   width: 110px;
 }
+
+.btn-wrapper {
+  position: relative;
+}
+.btn-wrapper input[type='file'] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+}
diff --git a/public/src/app/rule-engine/action/action.component.ts b/public/src/app/rule-engine/action/action.component.ts
index 1a62e1a..6658d52 100644
--- a/public/src/app/rule-engine/action/action.component.ts
+++ b/public/src/app/rule-engine/action/action.component.ts
@@ -1,34 +1,51 @@
-import { Component, Inject, Input, OnInit, ViewChild } from '@angular/core';
+import {
+  Component,
+  Inject,
+  Input,
+  OnInit,
+  ViewChild,
+  AfterViewInit
+} from '@angular/core';
 // import { Copy } from "../model";
 import { Http, Response, Headers, RequestOptions } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
+// import {Observable} from 'rxjs/Rx';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import { Subject } from 'rxjs/Subject';
 import { NgForm } from '@angular/forms';
+import * as Papa from 'papaparse';
+import { metricData } from './metric.data';
+import { Store } from '../../store/store';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-action',
   templateUrl: './action.component.html',
   styleUrls: ['./action.component.scss']
 })
-export class ActionComponent implements OnInit {
+export class ActionComponent implements OnInit, AfterViewInit {
   @Input() action;
   @ViewChild('from') fromInstance;
   @ViewChild('target') targetInstance;
   @ViewChild('actionFrm') actionFrm: NgForm;
   highlight = 'black';
   hoveredIndex;
+  fileToUpload: File = null;
+  fileName = '';
+  metrics = metricData;
   changeStyle($event) {
     this.highlight = $event.type === 'mouseover' ? 'highlight' : 'black';
   }
-  ngOnInit(): void {
+  ngOnInit(): void {}
+  constructor(public store: Store, private toastr: ToastrService) {}
+
+  ngAfterViewInit(): void {
     console.log(this.action.id);
-    if (this.action.from !== '') {
+    if (this.action.from !== undefined && this.action.from !== '') {
       console.log('Action %o', this.action);
       this.fromInstance.updateMode(this.action.from);
     }
-    if (this.action.target !== '') {
+    if (this.action.target !== undefined && this.action.target !== '') {
       this.targetInstance.updateMode(this.action);
     }
   }
@@ -47,8 +64,63 @@ export class ActionComponent implements OnInit {
     this.action.map.values.splice(index, 1);
   }
 
+  removeSearchField(index) {
+    this.action.search.enrich.fields.splice(index, 1);
+  }
+
+  addSearchFeild() {
+    this.action.search.enrich.fields.push('');
+  }
+
+  searchRadioChange(radioType) {
+    console.log(radioType);
+    this.action.search.radio = radioType;
+    console.log(this.action.search);
+  }
+
+  metricChange(metric) {
+    console.log('metric change:', metric);
+  }
+
   changeCheckbox() {
     console.log(this.action.id);
     return (this.action.map.haveDefault = !this.action.map.haveDefault);
   }
+  addSearchUpdateRow() {
+    this.action.search.updates.push({ key: '', value: '' });
+  }
+  removeSearchUpdatesRow(index) {
+    this.action.search.updates.splice(index, 1);
+  }
+
+  handleFileInput(files: FileList) {
+    this.fileToUpload = files.item(0);
+    console.log('file to load:', this.fileToUpload);
+    this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
+
+    this.store.loader = true;
+    Papa.parse(this.fileToUpload, {
+      complete: result => {
+        if (result.data) {
+          const mapConvert = result.data
+            .slice(0, 300)
+            .filter(item => item[0] !== undefined && item[1] !== undefined)
+            .map(item => {
+              console.log(`item 0: ${item[0]} item 1: ${item[1]}`);
+              return {
+                key: item[0].trim(),
+                value: item[1].trim()
+              };
+            });
+          this.store.loader = false;
+          this.action.map.values = mapConvert;
+        }
+      },
+      error: (err, file) => {
+        this.store.loader = false;
+        console.log(`error: ${err}, in file ${file}`);
+        this.toastr.error('', err);
+      }
+    });
+  }
 }
diff --git a/public/src/app/rule-engine/action/metric.data.ts b/public/src/app/rule-engine/action/metric.data.ts
new file mode 100644
index 0000000..9f2e3e7
--- /dev/null
+++ b/public/src/app/rule-engine/action/metric.data.ts
@@ -0,0 +1,43 @@
+export const metricData = [
+  'snmp_vHTTPPROXY',
+  'JerichoStatusPoller',
+  'Jericho_SYSLOG',
+  'snmp_vJSALOGS',
+  'StatusPoller',
+  'SYSLOG',
+  'snmp_vECA',
+  'snmp_vEPDG_MME',
+  'snmp_vEPDG',
+  'snmp_vEricsson_HB',
+  'snmp_vEricsson_ALR',
+  'snmp_vEricsson_SBG',
+  'snmp_vEricsson_MME',
+  'snmp_vFAMP_MME',
+  'snmp_vHSS',
+  'snmp_vLSTM',
+  'snmp_vMDNS',
+  'snmp_Jericho',
+  'snmp_vMMSC_CMAUI',
+  'snmp_vNEMS',
+  'snmp_vNokiaCTS',
+  'snmp_vOTA',
+  'snmp_vPCRF_MOG',
+  'snmp_vPMS',
+  'snmp_vSAE_GW',
+  'snmp_vSAMnagios',
+  'snmp_vSCP_Amdocs',
+  'snmp_vSCP_ulticom',
+  'snmp_vSRX',
+  'snmp_vSeGW',
+  'snmp_vVig',
+  'SYSLOG_VCO',
+  'VES_${event.commonEventHeader.domain}',
+  'snmp_vF5',
+  'CDAP_Enriched_Event',
+  'CDAP_Enriched_Syslog_Event',
+  'OaaSContrail',
+  'GuestOs',
+  'AIC_Infra_Nagios',
+  'PMOSS_DCAE-KPI',
+  'Sec_Syslog_Event'
+];
diff --git a/public/src/app/rule-engine/action/papa.spec.ts b/public/src/app/rule-engine/action/papa.spec.ts
new file mode 100644
index 0000000..864d581
--- /dev/null
+++ b/public/src/app/rule-engine/action/papa.spec.ts
@@ -0,0 +1,84 @@
+import * as Papa from 'papaparse';
+
+describe('parse CSV to JSON', () => {
+  it('should have only 2 attribute key and value', () => {
+    const stringAsCSV = 'liav,GL';
+    Papa.parse(stringAsCSV, {
+      complete: result => {
+        if (result.data) {
+          const parser = result.data
+            .slice(0, 300)
+            .filter(item => item[0] !== undefined && item[1] !== undefined)
+            .map(item => {
+              return {
+                key: item[0].trim(),
+                value: item[1].trim()
+              };
+            });
+          expect(parser).toEqual([
+            {
+              key: 'liav',
+              value: 'GL'
+            }
+          ]);
+        }
+      }
+    });
+  });
+
+  it('should have 2 attribute ignore 1', () => {
+    const stringAsCSV = 'liav,GL,DCAE';
+    Papa.parse(stringAsCSV, {
+      complete: result => {
+        if (result.data) {
+          const parser = result.data
+            .slice(0, 300)
+            .filter(item => item[0] !== undefined && item[1] !== undefined)
+            .map(item => {
+              return {
+                key: item[0].trim(),
+                value: item[1].trim()
+              };
+            });
+          expect(parser).toEqual([
+            {
+              key: 'liav',
+              value: 'GL'
+            }
+          ]);
+        }
+      }
+    });
+  });
+
+  it('should have 4 attribute', () => {
+    const stringAsCSV = `liav,GL
+                          Vosk,Dev`;
+
+    Papa.parse(stringAsCSV, {
+      complete: result => {
+        if (result.data) {
+          const parser = result.data
+            .slice(0, 300)
+            .filter(item => item[0] !== undefined && item[1] !== undefined)
+            .map(item => {
+              return {
+                key: item[0].trim(),
+                value: item[1].trim()
+              };
+            });
+          expect(parser).toEqual([
+            {
+              key: 'liav',
+              value: 'GL'
+            },
+            {
+              key: 'Vosk',
+              value: 'Dev'
+            }
+          ]);
+        }
+      }
+    });
+  });
+});
diff --git a/public/src/app/rule-engine/api/rule-engine-api.service.ts b/public/src/app/rule-engine/api/rule-engine-api.service.ts
index 7bf5e18..f19fd15 100644
--- a/public/src/app/rule-engine/api/rule-engine-api.service.ts
+++ b/public/src/app/rule-engine/api/rule-engine-api.service.ts
@@ -9,7 +9,7 @@ import {
 import 'rxjs/add/operator/catch';
 // Import RxJs required methods
 import 'rxjs/add/operator/map';
-import { Observable, Subject } from 'rxjs/Rx';
+import { Observable, Subject, BehaviorSubject } from 'rxjs/Rx';
 import { v4 as uuid } from 'uuid';
 import { environment } from '../../../environments/environment';
 
@@ -25,7 +25,7 @@ export class RuleEngineApiService {
   flowType: string;
   editorData: Subject<any> = new Subject();
   updateVersionLock: Subject<any> = new Subject();
-  tabIndex: Subject<any> = new Subject();
+  tabIndex: Subject<any> = new BehaviorSubject(-1);
 
   constructor(private http: Http) {
     this.baseUrl = `${environment.apiBaseUrl}/rule-editor`;
@@ -70,6 +70,20 @@ export class RuleEngineApiService {
       );
   }
 
+  getLatestMcUuid(params) {
+    const { contextType, serviceUuid, vfiName, vfcmtUuid } = params;
+    const url = `${
+      environment.apiBaseUrl
+    }/${contextType}/${serviceUuid}/${vfiName}/${vfcmtUuid}/getLatestMcUuid`;
+    this.options.headers.set('X-ECOMP-RequestID', uuid());
+    return this.http
+      .get(url, this.options)
+      .map((res: Response) => res.json())
+      .catch((error: any) => {
+        return Observable.throw(error.json().requestError || 'Server error');
+      });
+  }
+
   getListOfRules(): Observable<any> {
     const url = `${this.baseUrl}/rule/${this.vfcmtUuid}/${this.dcaeCompName}/${
       this.nid
@@ -83,8 +97,99 @@ export class RuleEngineApiService {
       });
   }
 
-  modifyRule(newRole) {
-    const url = `${this.baseUrl}/rule/${this.vfcmtUuid}/${this.dcaeCompName}/${
+  getInitialPhases(flowType): Observable<any> {
+    const url = `${environment.apiBaseUrl}/conf/getPhases/${flowType}`;
+    this.options.headers.set('X-ECOMP-RequestID', uuid());
+    return this.http
+      .get(url, this.options)
+      .map(response => response.json())
+      .catch((error: any) => {
+        return Observable.throw(error.json().requestError || 'Server error');
+      });
+  }
+
+  exportRules() {
+    const url = `${this.baseUrl}/export/${this.vfcmtUuid}/${
+      this.dcaeCompName
+    }/${this.nid}/${this.configParam}`;
+    console.log(url);
+    const link = document.createElement('a');
+    link.download = 'a';
+    link.href = url;
+    document.body.appendChild(link);
+    link.click();
+  }
+
+  importRules(rule, vfcmtUuid, isGroup) {
+    const url = `${this.baseUrl}/import/${vfcmtUuid}/${this.dcaeCompName}/${
+      this.nid
+    }/${this.configParam}/${isGroup}`;
+    this.options.headers.set('X-ECOMP-RequestID', uuid());
+    return this.http
+      .post(url, rule, this.options)
+      .map((res: Response) => res.json())
+      .catch((error: any) => {
+        return Observable.throw(error.json() || 'Server error');
+      });
+  }
+
+  importPhase(ruleList) {
+    const url = `${this.baseUrl}/importPhase`;
+
+    Object.assign(ruleList, {
+      vfcmtUuid: this.vfcmtUuid,
+      dcaeCompLabel: this.dcaeCompName,
+      nid: this.nid,
+      configParam: this.configParam
+    });
+
+    this.options.headers.set('X-ECOMP-RequestID', uuid());
+    return this.http
+      .post(url, ruleList, this.options)
+      .map((res: Response) => res.json())
+      .catch((error: any) => {
+        return Observable.throw(error.json().requestError || 'Server error');
+      });
+  }
+
+  applyFilter(newFilter) {
+    const url = `${this.baseUrl}/applyFilter`;
+
+    Object.assign(newFilter, {
+      vfcmtUuid: this.vfcmtUuid,
+      dcaeCompLabel: this.dcaeCompName,
+      nid: this.nid,
+      configParam: this.configParam
+    });
+
+    this.options.headers.set('X-ECOMP-RequestID', uuid());
+    return this.http
+      .post(url, newFilter, this.options)
+      .map((res: Response) => res.json())
+      .catch((error: any) => {
+        return Observable.throw(error.json().requestError || 'Server error');
+      });
+  }
+
+  deleteFilter() {
+    const deleteFilter = {
+      vfcmtUuid: this.vfcmtUuid,
+      dcaeCompLabel: this.dcaeCompName,
+      nid: this.nid,
+      configParam: this.configParam
+    };
+    const url = `${this.baseUrl}/deleteFilter`;
+    this.options.headers.set('X-ECOMP-RequestID', uuid());
+    return this.http
+      .post(url, deleteFilter, this.options)
+      .map((res: Response) => res.json())
+      .catch((error: any) => {
+        return Observable.throw(error.json().requestError || 'Server error');
+      });
+  }
+
+  modifyRule(newRole, vfcmtUuid) {
+    const url = `${this.baseUrl}/rule/${vfcmtUuid}/${this.dcaeCompName}/${
       this.nid
     }/${this.configParam}`;
     this.options.headers.set('X-ECOMP-RequestID', uuid());
@@ -96,8 +201,8 @@ export class RuleEngineApiService {
       });
   }
 
-  deleteRule(uid) {
-    const url = `${this.baseUrl}/rule/${this.vfcmtUuid}/${this.dcaeCompName}/${
+  deleteRule(uid, vfcmtUuid) {
+    const url = `${this.baseUrl}/rule/${vfcmtUuid}/${this.dcaeCompName}/${
       this.nid
     }/${this.configParam}/${uid}`;
     this.options.headers.set('X-ECOMP-RequestID', uuid());
@@ -109,15 +214,28 @@ export class RuleEngineApiService {
       });
   }
 
-  translate(nofityId) {
+  deleteGroup(groupId, vfcmtUuid) {
+    const url = `${this.baseUrl}/group/${vfcmtUuid}/${this.dcaeCompName}/${
+      this.nid
+    }/${this.configParam}/${groupId}`;
+    this.options.headers.set('X-ECOMP-RequestID', uuid());
+    return this.http
+      .delete(url, this.options)
+      .map((res: Response) => res.json())
+      .catch((error: any) => {
+        return Observable.throw(error.json().requestError || 'Server error');
+      });
+  }
+
+  translate(entryPhase, publishPhase, vfcmtUuid) {
     const url = `${this.baseUrl}/rule/translate`;
     const params = {
-      vfcmtUuid: this.vfcmtUuid,
+      vfcmtUuid: vfcmtUuid,
       dcaeCompLabel: this.dcaeCompName,
       nid: this.nid,
       configParam: this.configParam,
-      flowType: this.flowType,
-      notifyId: nofityId
+      entryPhase: entryPhase,
+      publishPhase: publishPhase
     };
     this.options.headers.set('X-ECOMP-RequestID', uuid());
     // const params = new URLSearchParams(); params.append('flowType',
diff --git a/public/src/app/rule-engine/condition/condition.component.html b/public/src/app/rule-engine/condition/condition.component.html
index 0ff244b..7ba21e2 100644
--- a/public/src/app/rule-engine/condition/condition.component.html
+++ b/public/src/app/rule-engine/condition/condition.component.html
@@ -5,17 +5,58 @@
       <div *ngIf="node.data.name === 'operator'" style="background: #F2F2F2;">
         <div style="display: flex; margin-left: 5px; align-items: center; min-height: 35px;">
           <div style="display: flex; align-items: center;" *ngIf="showType">
-            <select style="padding: 5px;" [(ngModel)]="node.data.type">
+            <select style="padding: 5px;margin-left: 10px;" [(ngModel)]="node.data.type">
               <option value="ANY">ANY</option>
               <option value="ALL">ALL</option>
             </select>
 
-            <div style="display: flex; align-items: center; margin-left: 10px;">
+            <div style="display: flex; align-items: center; margin-left: 10px; width: 150px;">
               of the following are true:
             </div>
           </div>
 
-          <div style="display: flex; margin-left: auto;">
+          <div *ngIf="isFilter" style="display: flex; width: 100%; justify-content: space-between; cursor: default;">
+            <div style="display: flex;">
+              <div style="display: flex; align-items: center; padding: 0 15px;">
+                <button mat-mini-fab color="primary" data-tests-id="addCondition" (click)="addConditional(tree, node)" style="height: 16px; width: 16px; display:flex; box-shadow: none;align-items: center;justify-content: center;">
+                  <span style="width: 100%;
+                color:white;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;" [innerHTML]="'plus' | feather:12"></span>
+                </button>
+                <span class="btn-label">Add Filter
+                </span>
+              </div>
+
+              <div style="display: flex; align-items: center; padding: 0 25px;">
+                <button mat-mini-fab color="primary" data-tests-id="addConditionGroup" [disabled]="node.data.level === 2" (click)="addConditionalGroup(tree, node)"
+                  style="height: 16px; width: 16px; display:flex; box-shadow: none;align-items: center;justify-content: center;">
+                  <span style="width: 100%;
+                color:white;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;" [innerHTML]="'plus' | feather:12"></span>
+                </button>
+                <span [style.color]="node.data.level === 2 ? '#a7a7a7' : '#009fdb' " class="btn-label">Add Filter Group
+                </span>
+              </div>
+            </div>
+            <!-- background: #FFFFFF; -->
+            <div style="display: flex; align-items: center; padding: 0 5px; ">
+              <button data-tests-id="removeConditionNode" mat-icon-button (click)="removeConditional(tree, node)" class="button-remove">
+                <span style="width: 100%;
+                            height: 100%;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;" [innerHTML]="'trash-2' | feather:20"></span>
+              </button>
+            </div>
+          </div>
+
+          <div *ngIf="!isFilter" style="display: flex; margin-left: auto;">
 
             <div style="display: flex; align-items: center; padding: 0 25px;">
               <button mat-mini-fab color="primary" data-tests-id="addCondition" (click)="addConditional(tree, node)" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
@@ -35,9 +76,13 @@
               </span>
             </div>
 
-            <div style="display: flex; align-items: center; padding: 0 5px; background: #FFFFFF;">
+            <div style="display: flex; align-items: center; padding: 0 5px;">
               <button data-tests-id="removeConditionNode" mat-icon-button (click)="removeConditional(tree, node)" class="button-remove">
-                <mat-icon class="md-24">delete</mat-icon>
+                <span style="width: 100%;
+                            height: 100%;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;" [innerHTML]="'trash-2' | feather:20"></span>
               </button>
             </div>
 
@@ -64,21 +109,41 @@
                 <option value="startsWith">Starts with</option>
                 <option value="equals">Equals</option>
                 <option value="notEqual">Not equal</option>
+                <option value="assigned">Assigned</option>
+                <option value="unassigned">Unassigned</option>
+                <option value="oneOf">One of</option>
+                <option value="NotOneOf">Not one of</option>
               </select>
             </div>
 
-            <div class="label" style="width:100%">
+            <div class="label" style="width:100%" *ngIf="node.data.operator !== 'assigned' && node.data.operator !== 'unassigned'">
               <span class="label" style="padding: 0 10px; border-left: none;">
                 Value
               </span>
               <input class="input-text" data-tests-id="right" (ngModelChange)="modelChange($event)" [(ngModel)]="node.data.right" ngDefaultControl
                 type="text">
             </div>
+
+            <div *ngIf="node.data.operator === 'assigned' || node.data.operator === 'unassigned'" class="pretty p-svg" style="margin: 4px 0 1em 0em; margin-left:10px;">
+              <input type="checkbox" name="emptyIsAssigned" data-tests-id="emptyIsAssigned" [checked]="node.data.emptyIsAssigned" (change)="node.data.emptyIsAssigned = !node.data.emptyIsAssigned"
+              />
+              <div class="state">
+                <svg class="svg svg-icon" viewBox="0 0 20 20">
+                  <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
+                    style="stroke: #009fdb; fill:#009fdb;"></path>
+                </svg>
+                <label>Empty Is Assigned</label>
+              </div>
+            </div>
           </div>
           <!-- remove button -->
           <div class="show-delete">
             <button mat-icon-button data-tests-id="RemoveCondition" (click)="removeConditional(tree, node)" class="button-remove">
-              <mat-icon class="md-24">delete</mat-icon>
+              <span style="width: 100%;
+                          height: 100%;
+                          display: flex;
+                          justify-content: center;
+                          align-items: center;" [innerHTML]="'trash-2' | feather:20"></span>
             </button>
           </div>
 
diff --git a/public/src/app/rule-engine/condition/condition.component.scss b/public/src/app/rule-engine/condition/condition.component.scss
index 8c0e9e0..228d8c6 100644
--- a/public/src/app/rule-engine/condition/condition.component.scss
+++ b/public/src/app/rule-engine/condition/condition.component.scss
@@ -9,7 +9,7 @@
     padding: 0;
   }
   .angular-tree-component {
-    padding-left: 1em;
+    // padding-left: 1em;
     overflow-y: hidden;
   }
   .tree-node-leaf.container {
@@ -26,11 +26,45 @@
   }
   .node-wrapper {
     background: white;
+    padding-top: 10px;
   }
   .tree-children {
     border-left: 2px solid #f2f2f2;
+    border-right: 2px solid #f2f2f2;
+    border-bottom: 2px solid #f2f2f2;
     // border-top: 1px solid #f2f2f2;
     border-bottom: 1px solid #f2f2f2;
+    // border-bottom: 1px solid #f2f2f2;
+  }
+  .tree-node-level-2
+    > tree-node-wrapper
+    > .node-wrapper
+    > .node-content-wrapper {
+    width: 90%;
+  }
+  .tree-node-level-2 .tree-children {
+    width: 90%;
+  }
+  .tree-node-level-3
+    > tree-node-wrapper
+    > .node-wrapper
+    > .node-content-wrapper {
+    width: 85%;
+  }
+  .tree-node-level-3 .tree-children {
+    width: 85%;
+  }
+  .tree-node-level-4
+    > tree-node-wrapper
+    > .node-wrapper
+    > .node-content-wrapper {
+    width: 80%;
+  }
+  .tree-node-level-4 .tree-children {
+    width: 80%;
+  }
+  div .node-content-wrapper {
+    padding: 0;
   }
   tree-node-expander {
     display: none;
diff --git a/public/src/app/rule-engine/condition/condition.component.ts b/public/src/app/rule-engine/condition/condition.component.ts
index f44fbf4..200b42d 100644
--- a/public/src/app/rule-engine/condition/condition.component.ts
+++ b/public/src/app/rule-engine/condition/condition.component.ts
@@ -3,10 +3,13 @@ import {
   ViewEncapsulation,
   ViewChild,
   Output,
-  EventEmitter
+  EventEmitter,
+  Input,
+  OnInit
 } from '@angular/core';
 import { TreeModel, TreeComponent, ITreeOptions } from 'angular-tree-component';
-import { some } from 'lodash';
+import { some, cloneDeep } from 'lodash';
+import { toJS } from 'mobx';
 
 @Component({
   selector: 'app-condition',
@@ -14,7 +17,9 @@ import { some } from 'lodash';
   styleUrls: ['./condition.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class ConditionComponent {
+export class ConditionComponent implements OnInit {
+  @Input() condition;
+  @Input() isFilter = false;
   conditionTree = [];
   showType = false;
   @ViewChild(TreeComponent) private tree: TreeComponent;
@@ -27,7 +32,9 @@ export class ConditionComponent {
     animateAcceleration: 1.2
   };
 
-  constructor() {
+  ngOnInit(): void {
+    console.log('condition', this.condition);
+
     this.conditionTree.push({
       name: 'operator',
       level: 0,
@@ -39,10 +46,23 @@ export class ConditionComponent {
       left: '',
       right: '',
       operator: null,
-      level: 1
+      level: 1,
+      emptyIsAssigned: false
     });
+
+    if (this.condition) {
+      const condition = toJS(this.condition);
+      if (condition.name === 'condition') {
+        this.updateMode(true, condition);
+      } else {
+        const convertedCondition = this.convertConditionFromServer(condition);
+        this.updateMode(false, convertedCondition);
+      }
+    }
   }
 
+  constructor() {}
+
   onInitialized(tree) {
     tree.treeModel.expandAll();
   }
@@ -58,7 +78,8 @@ export class ConditionComponent {
         left: data.left,
         right: data.right,
         operator: data.operator,
-        level: 1
+        level: 1,
+        emptyIsAssigned: false
       });
       this.showType = false;
     } else {
@@ -82,7 +103,8 @@ export class ConditionComponent {
       left: '',
       right: '',
       operator: null,
-      level: tempLevel
+      level: tempLevel,
+      emptyIsAssigned: false
     };
     selectedNode.data.children.push(conditionTemplate);
     tree.treeModel.update();
@@ -108,7 +130,8 @@ export class ConditionComponent {
           left: '',
           right: '',
           operator: null,
-          level: selectedNode.data.level + 2
+          level: selectedNode.data.level + 2,
+          emptyIsAssigned: false
         });
       }
       tree.treeModel.update();
@@ -149,6 +172,35 @@ export class ConditionComponent {
     }
   }
 
+  public changeRightToArrayOrString(data, toArray) {
+    data.forEach(element => {
+      if (element.name === 'operator') {
+        this.changeRightToArrayOrString(element.children, toArray);
+      }
+      if (element.name === 'condition') {
+        if (toArray) {
+          element.right = element.right.split(',');
+        } else {
+          element.right = element.right.join(',');
+        }
+      }
+    });
+    console.log(data);
+    return data;
+  }
+
+  public convertConditionFromServer(condition) {
+    const temp = new Array();
+    temp.push(condition);
+    const cloneCondition = cloneDeep(temp);
+    const conditionSetData = this.changeRightToArrayOrString(
+      cloneCondition,
+      false
+    );
+    console.log('condition to server:', conditionSetData);
+    return conditionSetData;
+  }
+
   private deleteNodeAndUpdateTreeView(selectedNode: any, tree: any) {
     selectedNode.parent.data.children.splice(selectedNode.index, 1);
     tree.treeModel.update();
diff --git a/public/src/app/rule-engine/from/from.component.html b/public/src/app/rule-engine/from/from.component.html
index df2c110..011f609 100644
--- a/public/src/app/rule-engine/from/from.component.html
+++ b/public/src/app/rule-engine/from/from.component.html
@@ -38,6 +38,35 @@
     </div>
   </div>
 
+  <!-- clear NSF template -->
+  <div class="from" *ngIf="actionType === 'clear nsf'" ngModelGroup="clear-nsf" #clearFrom="ngModelGroup" style="padding-right: 0;">
+    <div *ngFor="let input of from.values; let index = index;" data-tests-id="clearInputArrayFrom" (mouseleave)="hoveredIndex=-1"
+      (mouseover)="hoveredIndex=index" class="from-conatiner" style="margin-bottom:1rem; display: flex; flex-direction: column; align-items: flex-start;"
+      data-tests-id="fromComponent">
+      <div style="display: flex; align-items: center; width: 100%;">
+        <div style="display: flex; align-items: center; width: 100%;" class="label">
+          <span class="label" style="padding: 0 5px; width: 50px;">From</span>
+          <input class="input-text" (ngModelChange)="modelChange(from)" [(ngModel)]="input.value" type="text" data-tests-id="valueInput"
+            ngModel required name="clear-nfs[{{index}}]">
+        </div>
+
+        <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeFromInput(index)"
+          *ngIf="from.values.length > 1" style="box-shadow: none; height: 24px; width: 24px; display:flex" data-tests-id="btnDelete">
+          <mat-icon class="md-24">delete</mat-icon>
+        </button>
+      </div>
+
+    </div>
+    <div style="display:flex; justify-content: space-between;">
+      <div style="display: flex; align-items: center;">
+        <button mat-mini-fab color="primary" (click)="addFromInput()" style="box-shadow: none; height: 16px; width: 16px; display:flex"
+          data-tests-id="btnAddInput">
+          <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
+        </button>
+        <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add input</span>
+      </div>
+    </div>
+  </div>
   <!-- clear template -->
   <div class="from" *ngIf="actionType === 'clear'" ngModelGroup="clear" #clearFrom="ngModelGroup">
     <div *ngFor="let input of from.values; let index = index;" data-tests-id="clearInputArrayFrom" (mouseleave)="hoveredIndex=-1"
@@ -62,8 +91,6 @@
         <button mat-mini-fab color="primary" (click)="addFromInput()" style="box-shadow: none; height: 16px; width: 16px; display:flex"
           data-tests-id="btnAddInput">
           <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
-<!-- 
-          <mat-icon>add</mat-icon> -->
         </button>
         <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add input</span>
       </div>
diff --git a/public/src/app/rule-engine/from/from.component.scss b/public/src/app/rule-engine/from/from.component.scss
index 852984d..f5ec4cc 100644
--- a/public/src/app/rule-engine/from/from.component.scss
+++ b/public/src/app/rule-engine/from/from.component.scss
@@ -1,7 +1,8 @@
 .from {
   display: flex;
   flex-direction: column;
-  padding: 0 10px;
+  // padding: 0 10px;
+  padding-right: 10px;
 
   .label {
     border: 1px solid #d2d2d2;
@@ -55,6 +56,7 @@
   }
   /deep/ .mat-button-wrapper {
     padding: 0;
+    display: flex;
   }
   .mat-icon {
     width: 18px;
diff --git a/public/src/app/rule-engine/from/from.component.ts b/public/src/app/rule-engine/from/from.component.ts
index bc1dedb..c526103 100644
--- a/public/src/app/rule-engine/from/from.component.ts
+++ b/public/src/app/rule-engine/from/from.component.ts
@@ -3,7 +3,9 @@ import {
   Input,
   Output,
   EventEmitter,
-  ViewChild
+  ViewChild,
+  AfterViewInit,
+  ChangeDetectorRef
 } from '@angular/core';
 // import { From } from "../model";
 import { Subject } from 'rxjs/Subject';
@@ -23,40 +25,27 @@ import { NgForm } from '@angular/forms';
   styleUrls: ['./from.component.scss'],
   animations: [
     trigger('state', [
-      state(
-        'open',
-        style({
-          opacity: 1,
-          height: 'auto'
-        })
-      ),
+      state('open', style({ opacity: 1, height: 'auto' })),
       transition('* => open', [
-        animate(
-          200,
-          keyframes([
-            style({
-              opacity: 1,
-              height: 'auto'
-            })
-          ])
-        )
+        animate(200, keyframes([style({ opacity: 1, height: 'auto' })]))
       ]),
-      state(
-        'closed',
-        style({
-          opacity: 0,
-          height: 0
-        })
-      )
+      state('closed', style({ opacity: 0, height: 0 }))
     ])
   ]
 })
-export class FromComponent {
+export class FromComponent implements AfterViewInit {
   from: any = {
     value: '',
     regex: '',
     state: 'closed',
-    values: [{ value: '' }, { value: '' }]
+    values: [
+      {
+        value: ''
+      },
+      {
+        value: ''
+      }
+    ]
   };
   @Input() actionType;
   @Output() onFromChange = new EventEmitter();
@@ -64,10 +53,20 @@ export class FromComponent {
   hoveredIndex;
   // public keyUp = new BehaviorSubject<string>(null);
 
-  ngOnInit(): void {
-    if (this.actionType === 'clear') {
-      this.from.values = [{ value: '' }];
+  constructor(private changeDetector: ChangeDetectorRef) {}
+
+  ngAfterViewInit(): void {
+    if (
+      (this.actionType === 'clear' || this.actionType === 'clear nsf') &&
+      this.from.values[0].value === ''
+    ) {
+      this.from.values = [
+        {
+          value: ''
+        }
+      ];
     }
+    this.changeDetector.detectChanges();
   }
 
   showRegex(item) {
@@ -79,12 +78,22 @@ export class FromComponent {
   updateMode(fromData) {
     console.log(fromData);
     if (fromData) {
-      this.from = fromData;
+      if (
+        (this.actionType === 'clear' || this.actionType === 'clear nsf') &&
+        fromData.values[0].value === ''
+      ) {
+        this.from.values = [
+          {
+            value: ''
+          }
+        ];
+      } else {
+        this.from = fromData;
+      }
     }
+    this.changeDetector.detectChanges();
   }
 
-  constructor() {}
-
   modelChange(event) {
     this.onFromChange.emit(event);
   }
diff --git a/public/src/app/rule-engine/rule-list/rule-list.component.html b/public/src/app/rule-engine/rule-list/rule-list.component.html
index 4ce6efb..9a9997e 100644
--- a/public/src/app/rule-engine/rule-list/rule-list.component.html
+++ b/public/src/app/rule-engine/rule-list/rule-list.component.html
@@ -2,8 +2,8 @@
   <div class="header">
     <span style="font-size: 18px; margin-left:20px;">Rule Engine</span>
     <div style="display:flex">
-      <button mat-raised-button (click)="translateRules()" color="primary" [disabled]="store.ruleList.length === 0" style="margin-right: 10px; width: 113px;height: 36px;"
-        data-tests-id="btnTranslate">
+      <button mat-raised-button (click)="translateRules()" color="primary" [disabled]="store.ruleList.length === 0 || entryPhase === '' || publishPhase === '' "
+        style="margin-right: 10px; width: 113px;height: 36px;" data-tests-id="btnTranslate">
         Translate
       </button>
       <app-bar-icons [tabName]="this.store.tabParmasForRule[0].name"></app-bar-icons>
@@ -13,87 +13,238 @@
   <div style="margin: 0rem 1rem; flex-grow: 1; overflow-y: auto;">
 
     <!-- error container -->
-    <div *ngIf="error" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold;">
+    <div *ngIf="error" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold; margin-bottom: 15px;">
       {{ error }}
     </div>
 
-    <app-version-type-select #versionEventType [versions]="versions" [metaData]="metaData" (nodesUpdated)="handleUpdateNode($event)"
-      (refrashRuleList)="handlePropertyChange()"></app-version-type-select>
+    <div style="display: flex">
+      <app-version-type-select #versionEventType [versions]="versions" [metaData]="metaData" (nodesUpdated)="handleUpdateNode($event)"
+        (refrashRuleList)="handlePropertyChange()"></app-version-type-select>
 
-    <!-- <div class="container-phase-notify">
-      <div>
-        <span class="field-label required" style="margin-right: 10px;">
-          phase
-        </span>
-        <select name="phase" [(ngModel)]="phase" data-tests-id="phase" style="height: 27px; padding: 0.3rem; margin-right: 18px;"
-          class="field-select">
-          <option [ngValue]="null" disabled>Select phase</option>
-        </select>
+      <div style="display:flex;">
+        <div class="field" style="display: flex; align-items: baseline;flex-direction: column; margin:0; margin-right: 10px;">
+          <div class="field-label required" style="padding-right: 10px;">
+            Entry Phase
+          </div>
+          <input type="text" name="entryPhase" required [(ngModel)]="entryPhase" class="field-text" style="width:250px;"
+            data-tests-id="entryPhase" />
+        </div>
+
+        <div class="field" style="display: flex; align-items: baseline;flex-direction: column; margin:0; margin-right: 10px;">
+          <div class="field-label required" style="padding-right: 10px;">
+            Publish Phase
+          </div>
+          <input type="text" name="publishPhase" [(ngModel)]="publishPhase" class="field-text" style="width:250px;"
+            data-tests-id="publishPhase" />
+        </div>
       </div>
+    </div>
 
-      <div class="default" style="display: flex; align-items: center">
-        <div class="pretty p-svg">
-          <input type="checkbox" name="notifyCheckbox" data-tests-id="notifyCheckbox" />
+    <div style="margin-bottom: 24px;">
+      <div style="display: flex; justify-content: space-between; align-items: baseline;">
+        <div class="pretty p-svg" style="margin-top: 24px; margin-bottom: 10px;">
+          <input type="checkbox" name="isCondition" data-tests-id="isFilter" [checked]="ifStatement" (change)="filterCheckbox()" />
           <div class="state">
             <svg class="svg svg-icon" viewBox="0 0 20 20">
               <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                 style="stroke: #009fdb; fill:#009fdb;"></path>
             </svg>
-            <label>notify OID</label>
+            <label>Filtering</label>
           </div>
         </div>
-        <div class="input-wrapper">
-          <input type="text" ngModel required name="notify-oid" data-tests-id="notify-oid" class="input">
+        <div *ngIf="ifStatement">
+          <button mat-raised-button (click)="applyFilter()" color="primary" style="width: 113px;height: 36px;"
+            data-tests-id="applyFilter">
+            Apply Filter
+          </button>
         </div>
       </div>
 
-    </div> -->
-
-    <div *ngIf="targetSource && store.ruleList.length === 0" style="margin: 30px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;">
+      <div *ngIf="ifStatement">
+        <app-condition #conditions [isFilter]="true" [condition]="condition" (removeConditionCheck)="removeConditionCheck($event)"
+          (onConditionChange)="updateCondition($event)"></app-condition>
+      </div>
+    </div>
 
-      <div style="margin: 3em 0 2em 0;">
-        <div style="font-size: 1.5em;">
-          Rules were not yet created
-        </div>
-        <div style="padding: 0.5em; padding-top: 1em;">
-          Please create a new normalization rule
+    <div *ngIf="targetSource && (tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))">
+      <div style="display: flex; align-items: baseline; width: 170px; position:relative;" (mouseenter)="showBtnList = true"
+        (mouseleave)="showBtnList = false" data-tests-id="addGroup">
+        <div style="display: flex; align-items: center;">
+          <button mat-mini-fab color="primary" id="addGroup" style="height: 16px; width: 16px; display:flex; justify-content: center; background-color: white; border: 1.5px solid #009fdb; color: #009fdb; cursor: default;">
+            <span style="width: 100%;
+                color:#009fdb;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;"
+              [innerHTML]="'plus' | feather:12"></span>
+          </button>
+          <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Phase</span>
         </div>
+
+        <ul *ngIf="showBtnList" class="button-list">
+          <li>
+            <button class="button-options" [disabled]="disabledMapBtn('map')" (click)="addGroup('map')" data-tests-id="btnMap">
+              map
+            </button>
+          </li>
+          <li>
+            <button class="button-options" [disabled]="disabledMapBtn('enrich')" (click)="addGroup('enrich')"
+              data-tests-id="btnEnrich">
+              enrich
+            </button>
+          </li>
+        </ul>
       </div>
 
-      <button mat-fab (click)="openAction()" style="background-color:#009FDB" data-tests-id="btnAddFirstRule">
-        <span [innerHTML]="'plus' | feather:24"></span>
-      </button>
-      <span style="margin-top: 1rem; font-size: 14px; color: #009FDB;">
-        Add First Rule
-      </span>
-    </div>
+      <div *ngIf="store.groupList.length > 0">
+        <div *ngFor="let item of store.groupList; let index = index" style="border: solid 1px #dedede; margin: 15px 0;">
+          <div class="field" style="display: flex; align-items: flex-end; margin:0px;margin-left:1em;">
+            <div style="margin-right:10px;">
+              <img class="icon-img" *ngIf="item.groupId.substring(0, 1).toLowerCase() !== 'm'" src="{{imgBase}}/group_enrich.svg"
+                alt="group_enrich">
+              <img class="icon-img" *ngIf="item.groupId.substring(0, 1).toLowerCase() === 'm'" src="{{imgBase}}/group_map.svg"
+                alt="group_map">
+            </div>
+            <div class="field-label" style="padding-right: 10px; color: #959595;">
+              PHASE NAME
+            </div>
+            <input type="text" name="phase" [(ngModel)]="item.phase" class="field-text" data-tests-id="phase" />
 
-    <div *ngIf="store.ruleList.length > 0">
-      <div style="display: flex; align-items: center;">
-        <button mat-mini-fab color="primary" id="addMoreRule" data-tests-id="addMoreRule" style="height: 24px; width: 24px; display:flex"
-          (click)="openAction()">
-          <mat-icon class="material-icons md-18">add</mat-icon>
-        </button>
-        <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Rule</span>
+            <!-- <div class="btn-wrapper" *ngIf="item.groupId.substring(0, 1).toLowerCase() === 'm'">
+              <button mat-icon-button class="gray button-options" data-tests-id="importCDAP">
+                <span style="width: 100%;
+                  color:#5a5a5a;
+                  height: 100%;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;" [innerHTML]="'upload' | feather:20"></span>
+              </button>
+              <input type="file" id="file" accept=".json" (change)="handleImportCDAP($event.target.files, item.groupId, item.phase)">
+            </div> -->
+
+            <button mat-icon-button (click)="deleteGroup(item.groupId)" [disabled]="disableDeleteGroup(item.groupId)"
+              class="gray" data-tests-id="deleteGroup">
+              <span style="width: 100%;
+                            height: 100%;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;"
+                [innerHTML]="'trash-2' | feather:20"></span>
+            </button>
+          </div>
+
+          <div style="margin: 1rem;">
+            <div *ngFor="let rule of item.list; let index = index" data-tests-id="ruleElement" (mouseleave)="hoveredIndex=-1"
+              (mouseover)="hoveredIndex=index" class="item listOfRule">
+              <span style="width:100%; display: flex; align-items: center;">
+                {{rule.description}} - [{{rule.uid}}]
+              </span>
+              <div style="display: flex; justify-content: flex-end;" class="ruleList-btn">
+                <button (click)="openAction(rule, {groupId: item.groupId, phase: item.phase})" data-tests-id="editRule"
+                  class="btn-list" mat-icon-button>
+                  <mat-icon class="md-24">mode_edit</mat-icon>
+                </button>
+                <button mat-icon-button class='btn-list' (click)="copyRule(rule, index, {groupId: item.groupId, phase: item.phase})"
+                  data-tests-id="copyRule">
+                  <span style="width: 100%;
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;"
+                    [innerHTML]="'copy' | feather:20"></span>
+                </button>
+                <button (click)="removeItem(rule.uid, item.groupId)" data-tests-id="deleteRule" class="btn-list"
+                  mat-icon-button [disabled]="disableDeleteGroup(item.groupId) && item.list.length === 1">
+                  <mat-icon class="md-24">delete</mat-icon>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div style="display: flex; align-items: center; margin:1em;">
+            <button mat-mini-fab color="primary" id="addMoreRule" data-tests-id="addMoreRule" style="height: 16px; width: 16px; display:flex; justify-content: center;"
+              (click)="openAction(null,item)">
+              <span style="width: 100%;
+                      color:white;
+                      height: 100%;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;"
+                [innerHTML]="'plus' | feather:12"></span>
+            </button>
+            <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Rule</span>
+          </div>
+
+        </div>
       </div>
     </div>
 
-    <div style="margin: 30px 0 10px 0;">
+    <div *ngIf="targetSource && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))">
+
+      <div *ngIf="targetSource && store.ruleList.length === 0 && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"
+        style="margin: 30px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;">
 
-      <div *ngFor="let item of store.ruleList; let index = index" data-tests-id="ruleElement" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index"
-        class="item" style="display: flex;" [ngStyle]="hoveredIndex === index ? {'background-color': '#E6F6FB', 'color': '#009FDB'} : {'background-color': '#FFFFFF', 'color':'gray'}">
-        <span style="width:100%; display: flex; align-items: center;">
-          {{item.description}} - [{{item.uid}}]
+        <div style="margin: 3em 0 2em 0;">
+          <div style="font-size: 1.5em;">
+            Rules were not yet created
+          </div>
+          <div style="padding: 0.5em; padding-top: 1em;">
+            Please create a new normalization rule
+          </div>
+        </div>
+
+        <button mat-fab (click)="openAction()" style="background-color:#009FDB" data-tests-id="btnAddFirstRule">
+          <span [innerHTML]="'plus' | feather:24"></span>
+        </button>
+        <span style="margin-top: 1rem; font-size: 14px; color: #009FDB;">
+          Add First Rule
         </span>
-        <div style="display: flex; justify-content: flex-end;" *ngIf="index==hoveredIndex">
-          <button (click)="openAction(item)" data-tests-id="editRule" class="btn-list" mat-icon-button>
-            <mat-icon class="md-24">mode_edit</mat-icon>
-          </button>
-          <button (click)="removeItem(item.uid)" data-tests-id="deleteRule" class="btn-list" mat-icon-button>
-            <mat-icon class="md-24">delete</mat-icon>
+      </div>
+
+      <div *ngIf="store.ruleList.length > 0 && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))">
+        <div style="display: flex; align-items: center;">
+          <button mat-mini-fab color="primary" id="addMoreRule" data-tests-id="addMoreRule" style="height: 16px; width: 16px; display:flex; justify-content: center;"
+            (click)="openAction()">
+            <span style="width: 100%;
+                      color:white;
+                      height: 100%;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;"
+              [innerHTML]="'plus' | feather:15"></span>
           </button>
+          <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Rule</span>
+        </div>
+      </div>
+
+      <div style="margin: 15px 0 10px 0;">
+
+        <div *ngFor="let item of store.ruleList; let index = index" data-tests-id="ruleElement" (mouseleave)="hoveredIndex=-1"
+          (mouseover)="hoveredIndex=index" class="item" style="display: flex;" [ngStyle]="hoveredIndex === index ? {'background-color': '#E6F6FB', 'color': '#009FDB'} : {'background-color': '#FFFFFF', 'color':'gray'}">
+          <span style="width:100%; display: flex; align-items: center;">
+            {{item.description}} - [{{item.uid}}]
+          </span>
+          <div style="display: flex; justify-content: flex-end;" *ngIf="index==hoveredIndex">
+            <button (click)="openAction(item)" data-tests-id="editRule" class="btn-list" mat-icon-button>
+              <mat-icon class="md-24">mode_edit</mat-icon>
+            </button>
+            <button mat-icon-button class='btn-list' (click)="copyRule(item, index)" data-tests-id="copyRule">
+              <span style="width: 100%;
+                      height: 100%;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;"
+                [innerHTML]="'copy' | feather:20"></span>
+            </button>
+            <button (click)="removeItem(item.uid, null)" data-tests-id="deleteRule" class="btn-list" mat-icon-button>
+              <mat-icon class="md-24">delete</mat-icon>
+            </button>
+          </div>
         </div>
       </div>
+
     </div>
+
   </div>
 </div>
diff --git a/public/src/app/rule-engine/rule-list/rule-list.component.scss b/public/src/app/rule-engine/rule-list/rule-list.component.scss
index 6446fbd..822a3f4 100644
--- a/public/src/app/rule-engine/rule-list/rule-list.component.scss
+++ b/public/src/app/rule-engine/rule-list/rule-list.component.scss
@@ -6,6 +6,7 @@
   flex-direction: column;
   margin: 0;
   padding: 0;
+  width: 100%;
   .header {
     position: relative;
     display: flex;
@@ -28,6 +29,10 @@
   }
 }
 
+/deep/ .mat-mini-fab .mat-button-wrapper {
+  padding: 0;
+}
+
 .my-full-screen-dialog .mat-dialog-container {
   max-width: none;
   width: 100vw;
@@ -117,3 +122,74 @@
 .material-icons.md-light.md-inactive {
   color: rgba(255, 255, 255, 0.3);
 }
+
+.listOfRule {
+  display: flex;
+  background-color: #ffffff;
+  color: gray;
+  &:hover {
+    background-color: #e6f6fb;
+    color: #009fdb;
+  }
+  .ruleList-btn {
+    opacity: 0;
+  }
+  &:hover .ruleList-btn {
+    opacity: 1;
+  }
+}
+
+.gray {
+  color: #696969;
+}
+
+.icon-img {
+  width: 24px;
+  height: 24px;
+  padding: 2px;
+}
+
+.button-list {
+  position: absolute;
+  left: 100px;
+  list-style-type: none;
+  width: 150px;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+  background-color: #ffffff;
+  border: solid 1px #d2d2d2;
+  border-top: 2px solid #009fdb;
+  margin-left: 11px;
+  top: 10px;
+  // margin-top: 15px;
+  .button-options {
+    height: 29px;
+    padding: 7px 9px;
+    width: 100%;
+    text-align: left;
+    background: white;
+    border: 0px;
+    &:hover {
+      background-color: #e6f6fb;
+      cursor: pointer;
+    }
+    &:disabled,
+    [disabled] {
+      cursor: default;
+    }
+  }
+}
+
+.btn-wrapper {
+  position: relative;
+  cursor: pointer;
+}
+.btn-wrapper input[type='file'] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 100%;
+  height: 36px;
+  cursor: pointer;
+}
diff --git a/public/src/app/rule-engine/rule-list/rule-list.component.ts b/public/src/app/rule-engine/rule-list/rule-list.component.ts
index 2857ea2..c2878c1 100644
--- a/public/src/app/rule-engine/rule-list/rule-list.component.ts
+++ b/public/src/app/rule-engine/rule-list/rule-list.component.ts
@@ -6,6 +6,10 @@ import { timer } from 'rxjs/observable/timer';
 import { Store } from '../../store/store';
 import { RuleEngineApiService } from '../api/rule-engine-api.service';
 import { ConfirmPopupComponent } from '../confirm-popup/confirm-popup.component';
+import { cloneDeep, has, countBy } from 'lodash';
+import { toJS } from 'mobx';
+import { v4 as uuidGenarator } from 'uuid';
+import { environment } from '../../../environments/environment';
 
 const primaryColor = '#009fdb';
 
@@ -13,7 +17,7 @@ const primaryColor = '#009fdb';
   selector: 'app-rule-list',
   templateUrl: './rule-list.component.html',
   styleUrls: ['./rule-list.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.Emulated
 })
 export class RuleListComponent {
   @ViewChild('versionEventType') versionType;
@@ -27,6 +31,18 @@ export class RuleListComponent {
   params;
   versions;
   metaData;
+  tabName;
+  // group data
+  showBtnList = false;
+  entryPhase;
+  publishPhase;
+  latestBtnGroup;
+  imgBase = environment.imagePath;
+  fileToUpload;
+  fileName;
+  // filter
+  ifStatement = false;
+  condition: any;
 
   private errorHandler(error: any) {
     this.store.loader = false;
@@ -45,7 +61,206 @@ export class RuleListComponent {
     }
   }
 
+  updateCondition(data) {
+    this.condition = data;
+  }
+
+  filterCheckbox() {
+    this.ifStatement = !this.ifStatement;
+    if (!this.ifStatement && this.condition !== undefined) {
+      this.deleteFilter();
+    }
+  }
+
+  removeConditionCheck(flag) {
+    this.ifStatement = flag;
+    if (this.condition !== undefined) {
+      this.deleteFilter();
+    }
+  }
+
+  private deleteFilter() {
+    this.error = null;
+    this.store.loader = true;
+    this._ruleApi
+      .getLatestMcUuid({
+        contextType: this.store.sdcParmas.contextType,
+        serviceUuid: this.store.sdcParmas.uuid,
+        vfiName: this.store.vfiName,
+        vfcmtUuid: this.store.mcUuid
+      })
+      .subscribe(
+        res => {
+          this.store.mcUuid = res.uuid;
+          this._ruleApi.deleteFilter().subscribe(
+            response => {
+              console.log('success import', response);
+              this.store.loader = false;
+            },
+            error => {
+              const errorMsg = Object.values(error) as any;
+              if (errorMsg[0].messageId !== 'SVC6119') {
+                this.errorHandler(error);
+              } else {
+                this.store.loader = false;
+              }
+              this.condition = null;
+            }
+          );
+        },
+        error => {
+          this.errorHandler(error);
+        }
+      );
+  }
+
+  disabledMapBtn(btnType) {
+    if (this.store.groupList.length > 0) {
+      if (btnType === 'map') {
+        if (
+          this.store.groupList[this.store.groupList.length - 1].groupId
+            .substring(0, 1)
+            .toLowerCase() === 'm' ||
+          this.store.groupList.length === 3
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        if (
+          this.store.groupList[this.store.groupList.length - 1].groupId
+            .substring(0, 1)
+            .toLowerCase() === 'e' ||
+          this.store.groupList.length === 3
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      }
+    }
+  }
+
+  disableDeleteGroup(groupId) {
+    const countGroupType = countBy(this.store.groupList, item => {
+      const innerGroupType =
+        item.groupId.substring(0, 1).toLowerCase() === 'm' ? 'map' : 'enrich';
+      return innerGroupType === 'map' ? 'map' : 'enrich';
+    });
+    const groupType =
+      groupId.substring(0, 1).toLowerCase() === 'm' ? 'map' : 'enrich';
+    if (groupType === 'map') {
+      return countGroupType.enrich === 2 ? true : false;
+    } else {
+      return countGroupType.map === 2 ? true : false;
+    }
+  }
+
+  handleImportCDAP(files: FileList, groupId, phaseName) {
+    this.error = null;
+    this.store.loader = true;
+    this.fileToUpload = files.item(0);
+    console.log('file to load:', this.fileToUpload);
+    this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
+    const reader = new FileReader();
+    reader.readAsText(this.fileToUpload, 'UTF-8');
+    reader.onload = () => {
+      console.log(reader.result);
+      this._ruleApi
+        .getLatestMcUuid({
+          contextType: this.store.sdcParmas.contextType,
+          serviceUuid: this.store.sdcParmas.uuid,
+          vfiName: this.store.vfiName,
+          vfcmtUuid: this.store.mcUuid
+        })
+        .subscribe(
+          res => {
+            this.store.mcUuid = res.uuid;
+            const input = {
+              version: this.versionType.selectedVersion,
+              eventType: this.versionType.selectedEvent,
+              groupId: groupId,
+              phase: phaseName,
+              payload: JSON.parse(reader.result)
+            };
+            this._ruleApi.importPhase(input).subscribe(
+              response => {
+                console.log('success import', response);
+                this.store.loader = false;
+                this.store.updateRuleList(Object.values(response.rules));
+              },
+              error => {
+                this.errorHandler(error);
+              }
+            );
+          },
+          error => {
+            this.errorHandler(error);
+          }
+        );
+    };
+  }
+
+  addGroup(type) {
+    this.latestBtnGroup = type;
+    const defaultPhase =
+      type === 'enrich'
+        ? `standard_${this.tabName}_enrich`
+        : `standard_${this.tabName}`;
+    const groupId = type + uuidGenarator();
+    const newGroup = {
+      groupId: groupId,
+      phase: defaultPhase
+    };
+    this.store.groupList.push(newGroup);
+    this.showBtnList = false;
+  }
+
+  deleteGroup(groupId) {
+    this.store.loader = true;
+    this.error = null;
+    // check if group list have list
+    const selectedGroup = this.store.groupList.filter(
+      item => item.groupId === groupId
+    );
+    const isExistInRuleList = this.store.ruleList.filter(
+      item => item.groupId === groupId
+    );
+    if (isExistInRuleList.length < 1) {
+      this.store.groupList = this.store.groupList.filter(
+        item => item.groupId !== groupId
+      );
+      this.store.loader = false;
+    } else {
+      this._ruleApi
+        .getLatestMcUuid({
+          contextType: this.store.sdcParmas.contextType,
+          serviceUuid: this.store.sdcParmas.uuid,
+          vfiName: this.store.vfiName,
+          vfcmtUuid: this.store.mcUuid
+        })
+        .subscribe(
+          res => {
+            this.store.mcUuid = res.uuid;
+            this._ruleApi.deleteGroup(groupId, res.uuid).subscribe(
+              response => {
+                this.store.deleteFromGroup(groupId);
+                this.store.loader = false;
+              },
+              error => {
+                this.errorHandler(error);
+              }
+            );
+          },
+          error => this.errorHandler(error),
+          () => {}
+        );
+    }
+  }
+
   private getListOfRules() {
+    this.error = null;
     this._ruleApi.getListOfRules().subscribe(
       response => {
         console.log('res: %o', response);
@@ -57,20 +272,37 @@ export class RuleListComponent {
           );
           this.store.updateRuleList(Object.values(response.rules));
           this.targetSource = response.schema;
-          this.store.notifyIdValue = response.notifyId;
-          this.versionType.notifyIdCheckbox =
-            response.notifyId !== '' ? true : false;
+          this.entryPhase = response.entryPhase;
+          this.publishPhase = response.publishPhase;
+          this.condition = response.filter;
+          this.ifStatement = this.condition == null ? false : true;
         } else {
-          this.versionType.notifyIdCheckbox = false;
           this.store.resetRuleList();
+          this.condition = null;
+          this.ifStatement = false;
           this.versionType.updateVersionTypeFlag(false);
           this.targetSource = null;
+
+          this._ruleApi.getInitialPhases(this.store.flowType).subscribe(
+            data => {
+              (this.entryPhase = data.entryPhase),
+                (this.publishPhase = data.publishPhase);
+            },
+            error => {
+              this.errorHandler(error);
+            }
+          );
           // if the the list is empty then get version and domain events
-          this._ruleApi.getMetaData().subscribe(data => {
-            console.log(data);
-            this.versions = data.map(x => x.version);
-            this.metaData = data;
-          });
+          this._ruleApi.getMetaData().subscribe(
+            data => {
+              console.log(data);
+              this.versions = data.map(x => x.version);
+              this.metaData = data;
+            },
+            error => {
+              this.errorHandler(error);
+            }
+          );
         }
         this.store.loader = false;
       },
@@ -87,28 +319,120 @@ export class RuleListComponent {
     public store: Store
   ) {
     this.store.loader = false;
-    this._ruleApi.tabIndex.subscribe(index => {
-      console.log('rule index in rule-list component:', index);
-      const tabName = this.store.cdump.nodes[index].name;
-      console.log('tab name:', tabName);
-
-      if (tabName.toLowerCase().includes('map')) {
-        this.params = {
-          vfcmtUuid: this.store.mcUuid,
-          nodeName: this.store.tabParmasForRule[0].name,
-          nodeId: this.store.tabParmasForRule[0].nid,
-          fieldName: this.store.tabsProperties[index][0].name,
-          userId: this.store.sdcParmas.userId,
-          flowType: this.store.cdump.flowType
-        };
-        console.log('params: %o', this.params);
-        this.store.loader = true;
-        // set api params by iframe url query
-        this._ruleApi.setParams(this.params);
-        store.ruleListExistParams = this.params;
-        this.getListOfRules();
+    this._ruleApi.tabIndex
+      // .filter(index => {   if (index >= 0) {     const tabName =
+      // this.store.cdump.nodes[index].name;     console.log('tab name:', tabName); if
+      // (tabName.toLowerCase().includes('map')) {       return index;     }   } })
+      .subscribe(index => {
+        this.error = null;
+        if (index >= 0) {
+          this.tabName = this.store.cdump.nodes[index].name;
+          console.log('tab name:', this.tabName);
+          if (
+            this.tabName.toLowerCase().includes('map') ||
+            this.tabName.toLowerCase().includes('highlandpark') ||
+            this.tabName.toLowerCase().includes('hp')
+          ) {
+            const advancedSetting = this.store.tabsProperties[index].filter(
+              item => {
+                if (
+                  !(
+                    item.hasOwnProperty('constraints') &&
+                    item.value !== undefined &&
+                    !item.value.includes('get_input')
+                  )
+                ) {
+                  return item;
+                }
+              }
+            );
+            const mappingTarget = advancedSetting[0].name;
+            console.log('mappingTarget', mappingTarget);
+
+            this.params = {
+              vfcmtUuid: this.store.mcUuid,
+              nodeName: this.store.tabParmasForRule[0].name,
+              nodeId: this.store.tabParmasForRule[0].nid,
+              fieldName: mappingTarget,
+              userId: this.store.sdcParmas.userId,
+              flowType: this.store.cdump.flowType
+            };
+            console.log('params: %o', this.params);
+            this.store.loader = true;
+            // set api params by iframe url query
+            this._ruleApi.setParams(this.params);
+            store.ruleListExistParams = this.params;
+            this.getListOfRules();
+          }
+        }
+      });
+  }
+
+  applyFilter() {
+    this.store.loader = true;
+    this.error = null;
+    this._ruleApi
+      .getLatestMcUuid({
+        contextType: this.store.sdcParmas.contextType,
+        serviceUuid: this.store.sdcParmas.uuid,
+        vfiName: this.store.vfiName,
+        vfcmtUuid: this.store.mcUuid
+      })
+      .subscribe(
+        res => {
+          this.store.mcUuid = res.uuid;
+          let conditionData2server = null;
+          conditionData2server = this.convertConditionToServer(this.condition);
+          const newFilter = {
+            version: this.versionType.selectedVersion,
+            eventType: this.versionType.selectedEvent,
+            entryPhase: this.entryPhase,
+            publishPhase: this.publishPhase,
+            filter: conditionData2server
+          };
+          this._ruleApi.applyFilter(newFilter).subscribe(
+            success => {
+              this.store.loader = false;
+            },
+            error => {
+              this.errorHandler(error);
+            }
+          );
+        },
+        error => this.errorHandler(error),
+        () => {}
+      );
+  }
+
+  convertConditionToServer(tree) {
+    const cloneCondition = cloneDeep(tree);
+    const conditionSetData = this.changeRightToArrayOrString(
+      cloneCondition,
+      true
+    );
+    let simpleCondition = null;
+    if (conditionSetData[0].children.length === 1) {
+      simpleCondition = conditionSetData[0].children;
+    }
+    console.log('condition to server:', conditionSetData);
+    return simpleCondition !== null ? simpleCondition[0] : conditionSetData[0];
+  }
+
+  changeRightToArrayOrString(data, toArray) {
+    data.forEach(element => {
+      if (element.name === 'operator') {
+        this.changeRightToArrayOrString(element.children, toArray);
+      }
+      if (element.name === 'condition') {
+        if (toArray) {
+          element.right = element.right.split(',');
+        } else {
+          element.right = element.right.join(',');
+        }
       }
     });
+    console.log(data);
+    return data;
   }
 
   handlePropertyChange() {
@@ -119,46 +443,52 @@ export class RuleListComponent {
 
   translateRules() {
     this.store.loader = true;
-    // send translate JSON
-    const nofityId = this.store.notifyIdValue;
-    this._ruleApi.translate(nofityId).subscribe(
-      data => {
-        this.store.loader = false;
-        console.log(JSON.stringify(data));
-        let domElementName: string;
-        this.store.configurationForm.forEach(property => {
-          console.log('mappingTarget ', this.versionType.mappingTarget);
-          if (property.name === this.versionType.mappingTarget) {
-            property.value = JSON.stringify(data);
-            domElementName = property.name;
-            console.log(property.name);
-          }
-        });
-        this.toastr.success('', 'Translate succeeded');
-        this.store.expandAdvancedSetting[this.store.tabIndex] = true;
-        const source = timer(500);
-        source.subscribe(val => {
-          const el = document.getElementById(domElementName);
-          const label = el.children.item(0) as HTMLElement;
-          label.style.color = primaryColor;
-          const input = el.children.item(1) as HTMLElement;
-          input.style.color = primaryColor;
-          input.style.borderColor = primaryColor;
-          el.scrollIntoView();
-        });
-      },
-      error => {
-        this.errorHandler(error);
-      }
-    );
+    this.error = null;
+    // send translate JSON const nofityId = this.store.notifyIdValue;
+    const mcUuid = this.store.mcUuid;
+    this._ruleApi
+      .translate(this.entryPhase, this.publishPhase, mcUuid)
+      .subscribe(
+        data => {
+          this.store.loader = false;
+          console.log(JSON.stringify(data));
+          let domElementName: string;
+          this.store.configurationForm.forEach(property => {
+            console.log('mappingTarget ', this.versionType.mappingTarget);
+            if (property.name === this.versionType.mappingTarget) {
+              property.value = JSON.stringify(data);
+              domElementName = property.name;
+              console.log(property.name);
+            }
+          });
+          this.toastr.success('', 'Successfull translation');
+          this.store.expandAdvancedSetting[this.store.tabIndex] = true;
+          const source = timer(500);
+          source.subscribe(val => {
+            const el = document.getElementById(domElementName);
+            const label = el.children.item(0) as HTMLElement;
+            label.style.color = primaryColor;
+            const input = el.children.item(1) as HTMLElement;
+            input.style.color = primaryColor;
+            input.style.borderColor = primaryColor;
+            el.scrollIntoView();
+            this.store.cdumpIsDirty = true;
+          });
+        },
+        error => {
+          this.errorHandler(error);
+        }
+      );
   }
 
   handleUpdateNode(data) {
     this.targetSource = data.nodes;
     this.store.resetRuleList();
+    this.condition = null;
+    this.ifStatement = false;
   }
 
-  removeItem(uid) {
+  removeItem(uid, groupId) {
     this.dialogRef = this.dialog.open(ConfirmPopupComponent, {
       panelClass: 'my-confrim-dialog',
       disableClose: true
@@ -168,38 +498,70 @@ export class RuleListComponent {
       if (result) {
         // call be api
         this.store.loader = true;
-        this._ruleApi.deleteRule(uid).subscribe(
-          success => {
-            this.store.removeRuleFromList(uid);
-            // if its the last rule
-            if (this.store.ruleList.length === 0) {
-              this._ruleApi.getMetaData().subscribe(data => {
-                console.log(data);
-                this.versions = data.map(x => x.version);
-                this.metaData = data;
-                this.versionType.updateVersionTypeFlag(false);
-                this.targetSource = null;
-              });
-            }
-            this.store.loader = false;
-          },
-          error => {
-            this.store.loader = false;
-            this.errorHandler(error);
-          }
-        );
+        this.error = null;
+        this._ruleApi
+          .getLatestMcUuid({
+            contextType: this.store.sdcParmas.contextType,
+            serviceUuid: this.store.sdcParmas.uuid,
+            vfiName: this.store.vfiName,
+            vfcmtUuid: this.store.mcUuid
+          })
+          .subscribe(
+            res => {
+              this.store.mcUuid = res.uuid;
+              this._ruleApi.deleteRule(uid, res.uuid).subscribe(
+                success => {
+                  this.store.removeRuleFromList(uid, groupId);
+                  // if its the last rule
+                  if (this.store.ruleList.length === 0) {
+                    this._ruleApi.getMetaData().subscribe(data => {
+                      console.log(data);
+                      this.versions = data.map(x => x.version);
+                      this.metaData = data;
+                      this.versionType.updateVersionTypeFlag(false);
+                      this.targetSource = null;
+                    });
+                  }
+                  this.store.loader = false;
+                },
+                error => {
+                  this.store.loader = false;
+                  this.errorHandler(error);
+                }
+              );
+            },
+            error => this.errorHandler(error),
+            () => {}
+          );
       }
     });
   }
 
-  openAction(item): void {
+  copyRule(rule, index, groupItem) {
+    const copyRule = cloneDeep(toJS(rule));
+    copyRule.uid = '';
+    copyRule.description = copyRule.description.concat('_Copy');
+    this.store.ruleList.push(copyRule);
+    this.openAction(copyRule, groupItem);
+    this.toastr.warning(
+      'The rule you are editing has unsaved changes, please make sure to save your work' +
+        '.',
+      'The mapping rule is copied'
+    );
+  }
+
+  openAction(item, groupItem): void {
     this.crud = isEmpty(item) ? 'new' : 'edit';
     this._ruleApi.passDataToEditor({
       version: this.versionType.selectedVersion,
       eventType: this.versionType.selectedEvent,
       targetSource: this.targetSource,
       item: isEmpty(item) ? null : item,
-      params: this.params
+      params: this.params,
+      groupId: isEmpty(groupItem) ? null : groupItem.groupId,
+      phase: isEmpty(groupItem) ? null : groupItem.phase,
+      entryPhase: this.entryPhase,
+      publishPhase: this.publishPhase
     });
     this.store.isLeftVisible = false;
 
diff --git a/public/src/app/rule-engine/target/target.component.ts b/public/src/app/rule-engine/target/target.component.ts
index c9aa75c..b200144 100644
--- a/public/src/app/rule-engine/target/target.component.ts
+++ b/public/src/app/rule-engine/target/target.component.ts
@@ -4,7 +4,8 @@ import {
   ViewChild,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  ChangeDetectorRef
 } from '@angular/core';
 import { TreeModel, TreeComponent, ITreeOptions } from 'angular-tree-component';
 // import {trigger, state, animate, transition, style} from
@@ -36,6 +37,8 @@ export class TargetComponent {
     animateAcceleration: 1.2
   };
 
+  constructor(private changeDetector: ChangeDetectorRef) {}
+
   filterFn(value, treeModel: TreeModel) {
     treeModel.filterNodes(node => fuzzysearch(value, node.data.name));
   }
@@ -49,6 +52,7 @@ export class TargetComponent {
       id: action.target,
       name: ''
     };
+    this.changeDetector.detectChanges();
   }
 
   onEvent(event) {
diff --git a/public/src/app/rule-engine/version-type-select/version-type-select.component.html b/public/src/app/rule-engine/version-type-select/version-type-select.component.html
index 74c55a8..df1b497 100644
--- a/public/src/app/rule-engine/version-type-select/version-type-select.component.html
+++ b/public/src/app/rule-engine/version-type-select/version-type-select.component.html
@@ -2,10 +2,12 @@
 
   <div style="flex:1; display: flex; align-items: flex-end;">
 
-    <div style="display:flex; flex-direction:column; margin-right: 25px;">
-      <span class="field-label required space-down" style="margin-right: 10px;">Mapping Target</span>
+    <div style="display:flex; flex-direction:column; margin-right: 10px;">
+      <span class="field-label required space-down" style="margin-right: 10px;">
+        Mapping Target
+      </span>
       <select name="mappingTarget" [(ngModel)]="mappingTarget" (ngModelChange)="onChangeMapping($event)" data-tests-id="mappingDdl"
-        style="height: 35px; padding: 0.3rem; border: 1px solid #d2d2d2" class="field-select">
+        style="height: 35px; padding: 0.3rem; border: 1px solid #d2d2d2; width:250px;" class="field-select">
         <option [ngValue]="null" disabled>Select Mapping</option>
         <optgroup label="Rules Configured">
           <option *ngFor="let target of advancedSetting" [hidden]="!target.isExist" [value]="target.name" data-tests-id="templateOptionsExist">{{target.name}}</option>
@@ -16,20 +18,20 @@
       </select>
     </div>
 
-    <div style="display:flex; flex-direction:column; margin-right: 25px;">
+    <div style="display:flex; flex-direction:column; margin-right: 10px;">
       <span class="field-label required space-down" style="font-size: 13px; margin-right: 10px; display: flex;
         align-items: center;" [ngClass]="{'required' : !readOnly}">
         Version
       </span>
-      <select *ngIf="!readOnly" style="height: 35px; padding: 0.3rem; border: 1px solid #d2d2d2" [(ngModel)]="selectedVersion" (ngModelChange)="onSelectVersion($event)"
-        data-tests-id="selectVersion">
+      <select *ngIf="!readOnly" style="height: 35px; padding: 0.3rem; border: 1px solid #d2d2d2" [(ngModel)]="selectedVersion"
+        (ngModelChange)="onSelectVersion($event)" data-tests-id="selectVersion">
         <option [ngValue]="null" disabled>Select Version</option>
         <option *ngFor="let version of versions" [value]="version" data-tests-id="option">{{version}}</option>
       </select>
       <span *ngIf="readOnly" style="height: 35px; padding: 0.3rem; width:100px; border: 1px solid #D2D2D2; display: flex; align-items: center; background: #F2F2F2">{{selectedVersion}}</span>
     </div>
 
-    <div style="display:flex; flex-direction:column; margin-right: 25px;">
+    <div style="display:flex; flex-direction:column; margin-right: 10px;">
       <span class="field-label required space-down" style="font-size: 13px; display: flex; align-items: center; width: 100px;"
         [ngClass]="{'required' : !readOnly}">
         Event Domain
@@ -38,16 +40,16 @@
         data-tests-id="selectEventType">
         <option [ngValue]="null" disabled>Select Type</option>
         <option *ngFor="let event of events" [value]="event" data-tests-id="option">{{event | slice:0:event.length-6}}</option>
-      </select> 
-      <span *ngIf="readOnly" style="height: 35px; padding: 0.3rem; width:200px; border: 1px solid #D2D2D2; display: flex; align-items: center; background: #F2F2F2">{{selectedEvent | slice:0:selectedEvent.length-6}}</span>
+      </select>
+      <span *ngIf="readOnly" style="height: 35px; padding: 0.3rem; width:200px; border: 1px solid #D2D2D2; display: flex; align-items: center; background: #F2F2F2">{{selectedEvent
+        | slice:0:selectedEvent.length-6}}</span>
     </div>
 
-    <div class="notifyId" style="display: flex; flex-direction:column; margin-right:25px;">
+    <!-- <div class="notifyId" style="display: flex; flex-direction:column; margin-right:10px;">
       <div class="pretty p-svg space-down">
         <input type="checkbox" name="notifyIdCheckbox" data-tests-id="notifyIdCheckbox" [checked]="notifyIdCheckbox" (change)="changeNotifyId()"
         />
         <div class="state">
-          <!-- svg path -->
           <svg class="svg svg-icon" viewBox="0 0 20 20">
             <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
               style="stroke: #009fdb; fill:#009fdb;"></path>
@@ -58,7 +60,8 @@
       <div *ngIf="notifyIdCheckbox" class="input-wrapper">
         <input type="text" ngModel required name="defaultInput" data-tests-id="defaultInput" [(ngModel)]="store.notifyIdValue" class="input">
       </div>
-    </div>
+    </div> -->
+
   </div>
 
 </div>
diff --git a/public/src/app/rule-engine/version-type-select/version-type-select.component.scss b/public/src/app/rule-engine/version-type-select/version-type-select.component.scss
index 1be996e..a6eca3f 100644
--- a/public/src/app/rule-engine/version-type-select/version-type-select.component.scss
+++ b/public/src/app/rule-engine/version-type-select/version-type-select.component.scss
@@ -2,7 +2,7 @@
   display: flex;
   // margin: 10px 0; // align-items: center;
   flex-direction: column;
-  margin-bottom: 30px;
+  // margin-bottom: 30px;
 }
 
 .small-padding {
diff --git a/public/src/app/rule-engine/version-type-select/version-type-select.component.ts b/public/src/app/rule-engine/version-type-select/version-type-select.component.ts
index ff229cd..6869260 100644
--- a/public/src/app/rule-engine/version-type-select/version-type-select.component.ts
+++ b/public/src/app/rule-engine/version-type-select/version-type-select.component.ts
@@ -28,40 +28,46 @@ export class VersionTypeSelectComponent {
     // set ddl with the first option value.
 
     this._ruleApi.tabIndex.subscribe(index => {
-      console.log('rule index:', index);
-
-      const tabName = this.store.cdump.nodes[index].name;
-      console.log('tab name:', tabName);
+      if (index >= 0) {
+        const tabName = this.store.cdump.nodes[index].name;
+        console.log('tab name:', tabName);
+        if (
+          tabName.toLowerCase().includes('map') ||
+          tabName.toLowerCase().includes('highlandpark') ||
+          tabName.toLowerCase().includes('hp')
+        ) {
+          this.advancedSetting = this.store.tabsProperties[index].filter(
+            item => {
+              if (
+                !(
+                  item.hasOwnProperty('constraints') &&
+                  item.value !== undefined &&
+                  !item.value.includes('get_input')
+                )
+              ) {
+                return item;
+              }
+            }
+          );
+          this.mappingTarget = this.advancedSetting[0].name;
 
-      if (tabName.toLowerCase().includes('map')) {
-        this.mappingTarget = this.store.tabsProperties[index][0].name;
-        this.advancedSetting = this.store.tabsProperties[index].filter(item => {
-          if (
-            !(
-              item.hasOwnProperty('constraints') &&
-              !item.value.includes('get_input')
+          this._ruleApi
+            .generateMappingRulesFileName(
+              this.store.ruleListExistParams.nodeName,
+              this.store.ruleListExistParams.nodeId,
+              this.store.ruleListExistParams.vfcmtUuid
             )
-          ) {
-            return item;
-          }
-        });
-
-        this._ruleApi
-          .generateMappingRulesFileName(
-            this.store.ruleListExistParams.nodeName,
-            this.store.ruleListExistParams.nodeId,
-            this.store.ruleListExistParams.vfcmtUuid
-          )
-          .subscribe(response => {
-            console.log('generateMappingRulesFileName response: ', response);
-            this.advancedSetting.forEach(element => {
-              if (response.includes(element.name)) {
-                element.isExist = true;
-              } else {
-                element.isExist = false;
-              }
+            .subscribe(response => {
+              console.log('generateMappingRulesFileName response: ', response);
+              this.advancedSetting.forEach(element => {
+                if (response.includes(element.name)) {
+                  element.isExist = true;
+                } else {
+                  element.isExist = false;
+                }
+              });
             });
-          });
+        }
       }
     });
   }
diff --git a/public/src/app/rule-frame/rule-frame.component.html b/public/src/app/rule-frame/rule-frame.component.html
index e0afa3d..9258342 100644
--- a/public/src/app/rule-frame/rule-frame.component.html
+++ b/public/src/app/rule-frame/rule-frame.component.html
@@ -1,11 +1,12 @@
 <div style="position: relative; display: flex; justify-content: flex-end; height: 100%;">
 
-  <div *ngIf="!tabName.toLowerCase().includes('map')" style="margin: 1em;">
+  <div *ngIf="!tabName.toLowerCase().includes('map') && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"
+    style="margin: 1em;">
     <app-bar-icons [tabName]="tabName"></app-bar-icons>
   </div>
 
   <!-- rule engine -->
-  <div style="width: 100%;" *ngIf="tabName.toLowerCase().includes('map')">
+  <div style="width: 100%;" *ngIf="tabName.toLowerCase().includes('map') || tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp')">
     <app-slide-panel [activePane]="store.isLeftVisible ? 'left' : 'right'">
       <div leftPane style="height: 100%; overflow: auto;">
         <app-rule-list></app-rule-list>
diff --git a/public/src/app/store/store.ts b/public/src/app/store/store.ts
index b075699..5ae4f24 100644
--- a/public/src/app/store/store.ts
+++ b/public/src/app/store/store.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { findIndex } from 'lodash';
 import { action, computed, observable, toJS } from 'mobx';
+import { groupBy, prop, compose, values } from 'ramda';
 
 @Injectable()
 export class Store {
@@ -14,6 +15,7 @@ export class Store {
   @observable loader = false;
   @observable cdumpIsDirty = false;
   @observable expandAdvancedSetting = [];
+  @observable expandImports = [];
   @observable generalflow;
   @observable vfiName;
   @observable flowType;
@@ -27,6 +29,7 @@ export class Store {
   // rule-engine
   @observable tabParmasForRule;
   @observable ruleList = new Array();
+  @observable groupList = new Array();
   @observable ruleListExistParams;
   @observable ruleEditorInitializedState;
   @observable isLeftVisible;
@@ -50,22 +53,60 @@ export class Store {
       console.log('new rule');
       this.ruleList.push(rule);
     }
+    // handle group list
+    if (rule.groupId !== undefined) {
+      this.groupList
+        .filter(item => item.groupId === rule.groupId)
+        .map(item2 => {
+          if (item2.list === undefined) {
+            item2.list = new Array();
+          }
+          const ruleItemIndex = findIndex(
+            item2.list,
+            ruleFromList => ruleFromList.uid === rule.uid
+          );
+          if (ruleItemIndex > -1) {
+            item2.list[ruleItemIndex] = rule;
+          } else {
+            item2.list.push(rule);
+          }
+        });
+    }
   }
 
   @action
   updateRuleList(listOfRules) {
     this.ruleList = listOfRules;
     console.log(toJS(this.ruleList));
+    const fn = compose(values, groupBy(prop('groupId')))(listOfRules);
+    const dis = fn.map(item => {
+      return { groupId: item[0].groupId, phase: item[0].phase, list: item };
+    });
+    console.log(dis);
+    this.groupList = dis;
   }
 
   @action
-  removeRuleFromList(uid) {
+  deleteFromGroup(groupId) {
+    this.groupList = this.groupList.filter(item => item.groupId !== groupId);
+  }
+
+  @action
+  removeRuleFromList(uid, groupId) {
     this.ruleList = this.ruleList.filter(item => item.uid !== uid);
+    // remove from group
+    this.groupList.forEach(item => {
+      if (item.groupId === groupId) {
+        item.list = item.list.filter(listItem => listItem.uid !== uid);
+      }
+      return item;
+    });
   }
 
   @action
   resetRuleList() {
     this.ruleList = new Array();
+    this.groupList = new Array();
   }
 
   @action
@@ -85,21 +126,23 @@ export class Store {
         if (!x.assignment) {
           x.assignment = {};
           x.assignment.value = '';
-        } else if (typeof x.assignment.value === 'object') {
-          x.assignment.value = JSON.stringify(x.assignment.value);
         }
         if (x.value) {
           if (typeof x.value === 'object') {
-            x.value = JSON.stringify(x.value);
+            x.value = '';
           }
         } else if (!x.value) {
-          x.value = x.assignment.value;
+          if (typeof x.assignment.value === 'object') {
+            x.value = '';
+          }
+          // else {   x.value = x.assignment.value; }
         }
         return x;
       });
     });
     nodes.map(() => {
       this.expandAdvancedSetting.push(false);
+      this.expandImports.push(false);
     });
     console.log('tabsProperties: %o', this.tabsProperties.toJS());
   }
diff --git a/public/src/assets/images/group_enrich.svg b/public/src/assets/images/group_enrich.svg
new file mode 100644
index 0000000..b0ac313
--- /dev/null
+++ b/public/src/assets/images/group_enrich.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 23.74 23.74"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{fill:#009fdb;}.cls-3{clip-path:url(#clip-path);}</style><clipPath id="clip-path"><polygon class="cls-1" points="14.49 16 9.24 16 9.24 6.72 14.49 6.72 14.49 8 10.76 8 10.76 10.53 14.26 10.53 14.26 11.8 10.76 11.8 10.76 14.71 14.49 14.71 14.49 16"/></clipPath></defs><title>Artboard 1 copy</title><path class="cls-2" d="M23.74,4.27V0H19.47V1.48H4.27V0H0V4.27H1.49v15.2H0v4.27H4.27V22.09h15.2v1.65h4.27V19.47H22.1V4.27Zm-3-3h1.74V3H20.73ZM1.27,3V1.27H3V3ZM3,22.47H1.27V20.73H3Zm19.47-1.74v1.74H20.73V20.73Zm-1.63-1.26H19.47v1.35H4.27V19.47H2.76V4.27H4.27V2.75h15.2V4.27h1.37Z"/><g class="cls-3"><rect class="cls-2" x="4.24" y="1.72" width="15.25" height="19.28"/></g></svg>
\ No newline at end of file
diff --git a/public/src/assets/images/group_map.svg b/public/src/assets/images/group_map.svg
new file mode 100644
index 0000000..14cd038
--- /dev/null
+++ b/public/src/assets/images/group_map.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>icons/group_map</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="icons/group_map" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Fill-1" fill="#FFFFFF" points="2.59576986 21.9382739 21.9382739 21.9382739 21.9382739 2.59576986 2.59576986 2.59576986"></polygon>
+        <path d="M2.56278293,20.6403889 L20.6403889,20.6403889 L20.6403889,2.56278293 L2.56278293,2.56278293 L2.56278293,20.6403889 Z M1.29788493,21.9052869 L21.9052869,21.9052869 L21.9052869,1.29788493 L1.29788493,1.29788493 L1.29788493,21.9052869 Z" id="Fill-2" fill="#009FDB"></path>
+        <polygon id="Fill-3" fill="#FFFFFF" points="10.3830794 17.9724674 17.9724674 17.9724674 17.9724674 10.3830794 10.3830794 10.3830794"></polygon>
+        <path d="M10.3500925,16.6745825 L16.6745825,16.6745825 L16.6745825,10.3500925 L10.3500925,10.3500925 L10.3500925,16.6745825 Z M9.0851945,17.9394805 L17.9394805,17.9394805 L17.9394805,9.0851945 L9.0851945,9.0851945 L9.0851945,17.9394805 Z" id="Fill-4" fill="#009FDB"></path>
+        <polygon id="Fill-13" fill="#FFFFFF" points="5.19153972 14.0788126 12.7809277 14.0788126 12.7809277 6.48942465 5.19153972 6.48942465"></polygon>
+        <path d="M6.45643772,12.7809277 L12.7809277,12.7809277 L12.7809277,6.45643772 L6.45643772,6.45643772 L6.45643772,12.7809277 Z M5.19153972,14.0458257 L14.0458257,14.0458257 L14.0458257,5.19153972 L5.19153972,5.19153972 L5.19153972,14.0458257 Z" id="Fill-14" fill="#009FDB"></path>
+        <polygon id="Fill-5" fill="#FFFFFF" points="0 3.00413275 3.00413275 3.00413275 3.00413275 0 0 0"></polygon>
+        <path d="M0,4.26903075 L4.26903075,4.26903075 L4.26903075,0 L0,0 L0,4.26903075 Z M1.264898,3.00444897 L3.00444897,3.00444897 L3.00444897,1.26521422 L1.264898,1.26521422 L1.264898,3.00444897 Z" id="Fill-6" fill="#009FDB"></path>
+        <polygon id="Fill-7" fill="#FFFFFF" points="19.4682739 3.00413275 22.4724067 3.00413275 22.4724067 0 19.4682739 0"></polygon>
+        <path d="M19.4682739,4.26903075 L23.7373047,4.26903075 L23.7373047,0 L19.4682739,0 L19.4682739,4.26903075 Z M20.7331719,3.00444897 L22.4724067,3.00444897 L22.4724067,1.26521422 L20.7331719,1.26521422 L20.7331719,3.00444897 Z" id="Fill-8" fill="#009FDB"></path>
+        <polygon id="Fill-9" fill="#FFFFFF" points="0 22.4724067 3.00413275 22.4724067 3.00413275 19.4682739 0 19.4682739"></polygon>
+        <path d="M0,23.7373047 L4.26903075,23.7373047 L4.26903075,19.4682739 L0,19.4682739 L0,23.7373047 Z M1.264898,22.4727229 L3.00444897,22.4727229 L3.00444897,20.7331719 L1.264898,20.7331719 L1.264898,22.4727229 Z" id="Fill-10" fill="#009FDB"></path>
+        <polygon id="Fill-11" fill="#FFFFFF" points="19.4682739 22.4724067 22.4724067 22.4724067 22.4724067 19.4682739 19.4682739 19.4682739"></polygon>
+        <rect id="Rectangle" fill="#FFFFFF" x="5" y="5" width="13" height="13"></rect>
+        <path d="M19.4682739,23.7373047 L23.7373047,23.7373047 L23.7373047,19.4682739 L19.4682739,19.4682739 L19.4682739,23.7373047 Z M20.7331719,22.4727229 L22.4724067,22.4727229 L22.4724067,20.7331719 L20.7331719,20.7331719 L20.7331719,22.4727229 Z" id="Fill-12" fill="#009FDB"></path>
+        <path d="M11.2368164,16 L8.54541016,8.24951172 L8.49462891,8.24951172 C8.56656937,9.40055914 8.60253906,10.4796499 8.60253906,11.4868164 L8.60253906,16 L7.22509766,16 L7.22509766,6.71972656 L9.36425781,6.71972656 L11.9414062,14.1020508 L11.9794922,14.1020508 L14.6328125,6.71972656 L16.7783203,6.71972656 L16.7783203,16 L15.3183594,16 L15.3183594,11.4106445 C15.3183594,10.9493792 15.3299966,10.3484738 15.3532715,9.60791016 C15.3765463,8.86734656 15.3966471,8.41878333 15.4135742,8.26220703 L15.362793,8.26220703 L12.5761719,16 L11.2368164,16 Z" id="M" fill="#009FDB"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/src/styles.css b/public/src/styles.css
index a56199a..c9ff9f5 100644
--- a/public/src/styles.css
+++ b/public/src/styles.css
@@ -90,3 +90,7 @@ input.ng-touched.ng-invalid:not(form) {
 .ui-dialog-titlebar {
   background: white;
 }
+
+::-webkit-file-upload-button {
+  cursor: pointer;
+}