Sync code3.0.0-ONAP1.3.0casablanca

Sync the code between repositories

Change-Id: Ib7ee4d0e0f53b58a9bf97dadb15e094789b4f915
Issue-ID: SDC-1874
Signed-off-by: Eran (ev672n), Vosk <ev672n@att.com>

27 files changed, 509 insertions, 347 deletions

diff --git a/public/src/app/bar-icons/bar-icons.component.html b/public/src/app/bar-icons/bar-icons.component.html
index 761a5cb..b855ede 100644
--- a/public/src/app/bar-icons/bar-icons.component.html
+++ b/public/src/app/bar-icons/bar-icons.component.html
@@ -15,7 +15,7 @@
       <hr>
 
       <button mat-icon-button (click)="enableImports()" data-tests-id="import-rules" pTooltip="Import" tooltipPosition="top" [disabled]="store.viewOnly">
-        <span style="width: 100%;
+        <span [style.color]="store.expandImports[store.tabIndex] ? '#009FDB' : '#5a5a5a'" style="width: 100%;
             color:#5a5a5a;
                 height: 100%;
                 display: flex;
@@ -26,9 +26,9 @@
       <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"
       pTooltip="Settings" tooltipPosition="top">
-      <span style="width: 100%;
+      <span [style.color]="this.store.expandAdvancedSetting[store.tabIndex] ? '#009FDB' : '#5a5a5a'" style="width: 100%;
           color:#5a5a5a;
           height: 100%;
           display: flex;
@@ -47,7 +47,9 @@
   <!-- advanced setting -->
   <div class="setting" *ngIf="store.expandAdvancedSetting[store.tabIndex]">
     <div *mobxAutorun style="width: 100%;" [class]="tabName+'-setting-list'">
-      <div style="font-size: 1.5em; padding: 0 12px;">{{tabName}} Advanced Setting</div>
+      <div style="font-size: 1.5em; padding: 0 12px;">
+        {{tabName}} Advanced Settings
+      </div>
       <form #cdumpConfForm="ngForm">
         <div *ngFor="let prop of store.configurationForm" class="field" [id]="prop.name">
           <div style="display: flex;">
diff --git a/public/src/app/diagram/diagram.component.html b/public/src/app/diagram/diagram.component.html
index 7585428..c813a3c 100644
--- a/public/src/app/diagram/diagram.component.html
+++ b/public/src/app/diagram/diagram.component.html
@@ -1,7 +1,6 @@
 <div style="overflow:auto; height:450px; padding: 0 1em; border: 1px solid #d9d9d9;">
-  <svg id="diagram" #diagram align="center" #svgContainer>
-    <svg width="100%" height="1300px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index" style="padding: 1em 0;"
-      align="center">
+  <svg id="diagram" #diagram align="center" #svgContainer [attr.height.px]="(list.length * 45) + 50">
+    <svg width="100%" height="2000px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index" align="center">
 
       <svg [attr.width]="maxLengthLeft * 10">
         <text text-anchor="start" x="0" [attr.y]="40 * (i+1)" font-size="12" dy="0">
@@ -14,18 +13,18 @@
         </text>
       </svg>
 
-      <circle stroke="#8BC34A" fill="#8BC34A" [attr.cx]="maxLengthLeft * 8" [attr.cy]="44 * (i+1)" r="5" />
+      <circle stroke="#8BC34A" fill="#8BC34A" [attr.cx]="maxLengthLeft * 8" [attr.cy]="40 * (i+1)" r="5" />
 
-      <line [attr.x1]="maxLengthLeft * 8" [attr.y1]="44 * (i+1)" [attr.x2]="maxWidth - maxLengthRight * 8 - 30" [attr.y2]="44 * (i+1)"
+      <line [attr.x1]="maxLengthLeft * 8" [attr.y1]="40 * (i+1)" [attr.x2]="maxWidth - maxLengthRight * 8 - 60" [attr.y2]="40 * (i+1)"
         stroke-width="2" stroke="black" stroke-dasharray="5, 5" stroke="#8BC34A" fill="#8BC34A" class="line" />
 
-      <circle [attr.cx]="maxWidth - maxLengthRight * 8 - 30" [attr.cy]="44 * (i+1)" r="5" stroke="#8BC34A" fill="#8BC34A" />
+      <circle [attr.cx]="maxWidth - maxLengthRight * 8 - 60" [attr.cy]="40 * (i+1)" r="5" stroke="#8BC34A" fill="#8BC34A" />
 
       <text text-anchor="start" [attr.x]="maxWidth - maxLengthRight * 8" [attr.y]="40 * (i+1)" font-size="12" dy="0">
-        <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy=".6em" font-weight="bold">
+        <tspan [attr.x]="maxWidth - maxLengthRight * 11" dy=".6em" font-weight="bold">
           {{item.name2}}
         </tspan>
-        <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy="1.2em">
+        <tspan [attr.x]="maxWidth - maxLengthRight * 11" dy="1.2em">
           {{item.p2}}
         </tspan>
       </text>
diff --git a/public/src/app/diagram/diagram.component.scss b/public/src/app/diagram/diagram.component.scss
index 7c93d86..c693f64 100644
--- a/public/src/app/diagram/diagram.component.scss
+++ b/public/src/app/diagram/diagram.component.scss
@@ -1,5 +1,4 @@
 #diagram {
-  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 8412561..1233517 100644
--- a/public/src/app/diagram/diagram.component.spec.ts
+++ b/public/src/app/diagram/diagram.component.spec.ts
@@ -1,98 +1,98 @@
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { DiagramComponent } from './diagram.component';
+// import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+// import { DiagramComponent } from './diagram.component';
 
-describe('DiagramComponent', () => {
-  let component: DiagramComponent;
-  let fixture: ComponentFixture<DiagramComponent>;
+// describe('DiagramComponent', () => {
+//   let component: DiagramComponent;
+//   let fixture: ComponentFixture<DiagramComponent>;
 
-  beforeEach(
-    async(() => {
-      TestBed.configureTestingModule({
-        declarations: [DiagramComponent]
-      }).compileComponents();
-    })
-  );
+//   beforeEach(
+//     async(() => {
+//       TestBed.configureTestingModule({
+//         declarations: [DiagramComponent]
+//       }).compileComponents();
+//     })
+//   );
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DiagramComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+//   beforeEach(() => {
+//     fixture = TestBed.createComponent(DiagramComponent);
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+//   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+//   it('should create', () => {
+//     expect(component).toBeTruthy();
+//   });
 
-  it('should check on change check maxLengthLeft', () => {
-    component.list = [
-      {
-        name1: 'node1dsvsdsvd',
-        name2: 'node2',
-        p1: 'Stream_publish_0',
-        p2: 'capability'
-      },
-      {
-        name1: 'node33',
-        name2: 'node2555',
-        p1: 'requirement2',
-        p2: 'capability11'
-      },
-      {
-        name1: 'namber4',
-        name2: 'namber3',
-        p1: 'requirement3',
-        p2: 'capability4'
-      }
-    ];
-    component.ngOnChanges();
-    expect(component.maxLengthLeft).toBe(16);
-  });
-  it('should check on change check maxLengthRight', () => {
-    component.list = [
-      {
-        name1: 'node1dsvsdsvd',
-        name2: 'node2',
-        p1: 'Stream_publish_0',
-        p2: 'capability'
-      },
-      {
-        name1: 'node33',
-        name2: 'node2555',
-        p1: 'requirement2',
-        p2: 'capability11'
-      },
-      {
-        name1: 'namber4',
-        name2: 'namber3',
-        p1: 'requirement3',
-        p2: 'capability4'
-      }
-    ];
-    component.ngOnChanges();
-    expect(component.maxLengthRight).toBe(12);
-  });
-  it('should check on change check maxWidth', () => {
-    component.list = [
-      {
-        name1: 'node1dsvsdsvd',
-        name2: 'node2',
-        p1: 'Stream_publish_0',
-        p2: 'capability'
-      },
-      {
-        name1: 'node33',
-        name2: 'node2555',
-        p1: 'requirement2',
-        p2: 'capability11'
-      },
-      {
-        name1: 'namber4',
-        name2: 'namber3',
-        p1: 'requirement3',
-        p2: 'capability4'
-      }
-    ];
-    component.ngOnChanges();
-    // expect(component.maxWidth).toBe(550);
-  });
-});
+//   it('should check on change check maxLengthLeft', () => {
+//     component.list = [
+//       {
+//         name1: 'node1dsvsdsvd',
+//         name2: 'node2',
+//         p1: 'Stream_publish_0',
+//         p2: 'capability'
+//       },
+//       {
+//         name1: 'node33',
+//         name2: 'node2555',
+//         p1: 'requirement2',
+//         p2: 'capability11'
+//       },
+//       {
+//         name1: 'namber4',
+//         name2: 'namber3',
+//         p1: 'requirement3',
+//         p2: 'capability4'
+//       }
+//     ];
+//     component.ngOnChanges();
+//     expect(component.maxLengthLeft).toBe(16);
+//   });
+//   it('should check on change check maxLengthRight', () => {
+//     component.list = [
+//       {
+//         name1: 'node1dsvsdsvd',
+//         name2: 'node2',
+//         p1: 'Stream_publish_0',
+//         p2: 'capability'
+//       },
+//       {
+//         name1: 'node33',
+//         name2: 'node2555',
+//         p1: 'requirement2',
+//         p2: 'capability11'
+//       },
+//       {
+//         name1: 'namber4',
+//         name2: 'namber3',
+//         p1: 'requirement3',
+//         p2: 'capability4'
+//       }
+//     ];
+//     component.ngOnChanges();
+//     expect(component.maxLengthRight).toBe(12);
+//   });
+//   it('should check on change check maxWidth', () => {
+//     component.list = [
+//       {
+//         name1: 'node1dsvsdsvd',
+//         name2: 'node2',
+//         p1: 'Stream_publish_0',
+//         p2: 'capability'
+//       },
+//       {
+//         name1: 'node33',
+//         name2: 'node2555',
+//         p1: 'requirement2',
+//         p2: 'capability11'
+//       },
+//       {
+//         name1: 'namber4',
+//         name2: 'namber3',
+//         p1: 'requirement3',
+//         p2: 'capability4'
+//       }
+//     ];
+//     component.ngOnChanges();
+//     // expect(component.maxWidth).toBe(550);
+//   });
+// });
diff --git a/public/src/app/general/general.component.html b/public/src/app/general/general.component.html
index 2d6f232..19cdeb5 100644
--- a/public/src/app/general/general.component.html
+++ b/public/src/app/general/general.component.html
@@ -38,7 +38,7 @@
     <div class="field" *ngIf="store.generalflow === 'new'">
       <div class="field-label required" style="display: flex;">
         <span>Template</span>
-        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
+        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14" pTooltip="The monitoring templates define the connectivity and flow of the monitoring mS’." tooltipPosition="top"></span>
       </div>
       <select name="template" [disabled]="this.store.isEditMode" required [(ngModel)]="newVfcmt.template" (ngModelChange)="onChangeTemplate($event)"
         data-tests-id="templateDdl" class="field-text" [style.background]="this.store.isEditMode ? '#ebebe4' : 'white'">
@@ -50,7 +50,7 @@
     <div class="field" *ngIf="store.generalflow === 'import' || store.generalflow === 'edit'">
       <div class="field-label required" style="display: flex;">
         <span>Flow type</span>
-        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
+        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14" pTooltip="The flow type define the connectivity and flow of the monitoring mS’." tooltipPosition="top"></span>
       </div>
       <select name="flowType" [disabled]="this.store.isEditMode || disableFlowType" required [(ngModel)]="newVfcmt.flowType" data-tests-id="flowTypeDdl"
         class="field-text" [style.background]="this.store.isEditMode || disableFlowType ? '#ebebe4' : 'white'">
@@ -62,7 +62,7 @@
     <div class="field">
       <div class="field-label required" style="display: flex;">
         <span>Attached to</span>
-        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
+        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14" pTooltip="Select the VF instance to which the Monitoring Configuration would be assigned." tooltipPosition="top"></span>
       </div>
       <select name="serviceAttached" [disabled]="this.store.isEditMode || disableVnfiList" required [(ngModel)]="newVfcmt.vfni"
         data-tests-id="vfniDdl" (ngModelChange)="onChangeVfni($event)" class="field-text" [style.background]="this.store.isEditMode || disableVnfiList ? '#ebebe4' : 'white'">
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index 3c23385..a742696 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -34,8 +34,7 @@
 
     <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="store.monitoringComponents"
       [loadingIndicator]="loadingIndicator" [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12"
-      [rowHeight]="45" (selected)="onTableSelectItem($event)" [selectionType]="'single'" [selected]="selectedLine"
-      (activate)="onTableActivate($event)">
+      [rowHeight]="45" (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>
@@ -60,36 +59,46 @@
       <ngx-datatable-column name="Actions" sortable="false" prop="id" [flexGrow]="2">
         <ng-template let-row="row" let-rowIndex="rowIndex"  ngx-datatable-cell-template>
 
-          <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px; display: flex; justify-content: flex-start; align-items: center;">
-
-            <button mat-icon-button *ngIf="row.submittedUuid" pTooltip="View submitted" tooltipPosition="top" (click)="viewSubmitted(row)" data-tests-id="viewSubmitted">
-              <img src="{{imgBase}}/icon_submitted.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_submitted">
-            </button>
-
-            <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="editMC" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
-              [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}" pTooltip="Edit"
-              tooltipPosition="top">
-              <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
-                [innerHTML]="'edit-3' | feather:18"></span>
-            </button>
-
-            <div *ngIf="checkCanCreate();">
-            <button mat-icon-button *ngIf="row.submittedUuid != null && checkReverted(row)" pTooltip="Revert" data-tests-id="revertMC"
-              tooltipPosition="top" (click)="checkTableItemHoverCondition(row) && revertMcDialog(row)">
-              <img src="{{imgBase}}/icon_revert.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_revert">
-            </button>
+          <div class="activeBtnWrapper">
+            <div class="activeBtn" *ngIf="hoveredIndex == rowIndex">
+
+              <button mat-icon-button *ngIf="row.submittedUuid" pTooltip="View submitted" tooltipPosition="top" (click)="viewSubmitted(row)" data-tests-id="viewSubmitted">
+                <img src="{{imgBase}}/icon_submitted.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_submitted">
+              </button>
+
+              <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="editMC" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
+                [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}" pTooltip="Edit"
+                tooltipPosition="top">
+                <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+                  [innerHTML]="'edit-3' | feather:18"></span>
+              </button>
+
+              <div *ngIf="checkCanCreate();">
+              <button mat-icon-button *ngIf="row.submittedUuid != null && checkReverted(row)" pTooltip="Revert" data-tests-id="revertMC"
+                tooltipPosition="top" (click)="checkTableItemHoverCondition(row) && revertMcDialog(row)">
+                <img src="{{imgBase}}/icon_revert.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_revert">
+              </button>
+            </div>
+
+              <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="tableItemsButtonDelete"
+                pTooltip="Delete" tooltipPosition="top" (click)="deleteTableItem(row, rowIndex)">
+                <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+                  [innerHTML]="'trash-2' | feather:18"></span>
+              </button>
+
+            </div>
           </div>
+        </ng-template>
+      </ngx-datatable-column>
 
-            <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="tableItemsButtonDelete"
-              pTooltip="Delete" tooltipPosition="top" (click)="deleteTableItem(row, rowIndex)">
-              <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
-                [innerHTML]="'trash-2' | feather:18"></span>
-            </button>
-
+      <ngx-datatable-footer>
+        <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize" let-selectedCount="selectedCount"
+          let-curPage="curPage" let-offset="offset" let-isVisible="isVisible">
+          <div class="page-count" *ngIf="showTable===true">
+            You have {{rowCount.toLocaleString()}} MC table elements
           </div>
-
         </ng-template>
-      </ngx-datatable-column>
+      </ngx-datatable-footer>
 
     </ngx-datatable>
 
diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss
index fb2f5e4..523fc3b 100644
--- a/public/src/app/home/home.component.scss
+++ b/public/src/app/home/home.component.scss
@@ -73,6 +73,18 @@
   color: #5a5a5a;
 }
 
+.activeBtnWrapper .activeBtn {
+  opacity: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: -5px;
+}
+
+.activeBtnWrapper:hover .activeBtn {
+  opacity: 1;
+}
+
 // .ngx-datatable.fixed-row
 //   .datatable-scroll
 //   .datatable-body-row
diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts
index ad970f6..ef29043 100644
--- a/public/src/app/home/home.component.ts
+++ b/public/src/app/home/home.component.ts
@@ -10,6 +10,7 @@ import { PluginPubSub } from 'sdc-pubsub';
 import { Store } from '../store/store';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { environment } from '../../environments/environment';
+import { RuleEngineApiService } from '../rule-engine/api/rule-engine-api.service';
 
 @Component({
   selector: 'app-home',
@@ -33,6 +34,7 @@ export class HomeComponent {
     private activeRoute: ActivatedRoute,
     private route: Router,
     private _restApi: RestApiService,
+    private _ruleApi: RuleEngineApiService,
     private dialog: MatDialog,
     public store: Store,
     private toastr: ToastrService,
@@ -41,6 +43,8 @@ export class HomeComponent {
     this.store.loader = true;
     this.store.viewOnly = false;
     this.store.mcName = '';
+    this._ruleApi.callUpdateTabIndex(-1);
+    this.store.setTabIndex(-1);
     this.activeRoute.queryParams.subscribe(params => {
       console.log('params: %o', params);
       this.store.sdcParmas = params;
@@ -144,7 +148,6 @@ export class HomeComponent {
     this.hoveredIndex = this.store.monitoringComponents.findIndex(
       s => s === event.row
     );
-    console.log('selected : ');
   }
 
   revertMcDialog(item) {
diff --git a/public/src/app/import-rules/import-rules.component.html b/public/src/app/import-rules/import-rules.component.html
index e32d969..80ae78b 100644
--- a/public/src/app/import-rules/import-rules.component.html
+++ b/public/src/app/import-rules/import-rules.component.html
@@ -31,10 +31,10 @@
       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>
+        <option *ngFor="let target of store.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>
+        <option *ngFor="let target of store.advancedSetting" [hidden]="target.isExist" [value]="target.name" data-tests-id="templateOptionsNotExist">{{target.name}}</option>
       </optgroup>
     </select>
   </div>
@@ -53,7 +53,7 @@
       <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)">
+      <input type="file" id="importMC" accept=".json" #fileInput (change)="handleFileInput($event.target.files)">
     </div>
   </div>
 
diff --git a/public/src/app/import-rules/import-rules.component.ts b/public/src/app/import-rules/import-rules.component.ts
index b581dc6..7403518 100644
--- a/public/src/app/import-rules/import-rules.component.ts
+++ b/public/src/app/import-rules/import-rules.component.ts
@@ -1,6 +1,13 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Output,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
 import { Store } from '../store/store';
 import { RuleEngineApiService } from '../rule-engine/api/rule-engine-api.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-import-rules',
@@ -11,12 +18,16 @@ export class ImportRulesComponent {
   fileToUpload: File = null;
   fileName = '';
   mappingTarget: string;
-  advancedSetting: Array<any>;
   tabName: string;
   isGroup = false;
   @Output() refrashRuleList = new EventEmitter();
+  @ViewChild('fileInput') fileInput: ElementRef;
 
-  constructor(public _ruleApi: RuleEngineApiService, public store: Store) {
+  constructor(
+    public _ruleApi: RuleEngineApiService,
+    private toastr: ToastrService,
+    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
@@ -30,20 +41,20 @@ export class ImportRulesComponent {
             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.store.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.mappingTarget = this.store.advancedSetting[0].name;
 
             this._ruleApi.setParams({
               userId: this.store.sdcParmas.userId,
@@ -65,7 +76,7 @@ export class ImportRulesComponent {
                   'generateMappingRulesFileName response: ',
                   response
                 );
-                this.advancedSetting.forEach(element => {
+                this.store.advancedSetting.forEach(element => {
                   if (response.includes(element.name)) {
                     element.isExist = true;
                   } else {
@@ -73,7 +84,7 @@ export class ImportRulesComponent {
                   }
                 });
               });
-            console.log('advancedSetting', this.advancedSetting);
+            console.log('advancedSetting', this.store.advancedSetting);
           }
         }
       });
@@ -93,48 +104,61 @@ export class ImportRulesComponent {
   }
 
   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;
+    if (files && files.length > 0) {
+      this.store.loader = true;
+      this.fileToUpload = files.item(0);
+      console.log('file to load:', this.fileToUpload);
+      this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
+      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.toastr.success('', 'success import');
+                    this.store.expandImports[this.store.tabIndex] = false;
+                    this.clearFile();
+                    this.store.loader = false;
+                    this._ruleApi.callUpdateTabIndex(this.store.tabIndex);
+                  },
+                  error => {
+                    this.notifyError(error);
+                    this.clearFile();
+                  }
+                );
+            },
+            error => {
+              this.notifyError(error);
+              this.clearFile();
             }
-            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);
-          }
-        );
-    };
+          );
+      };
+    } else {
+      this.clearFile();
+    }
+  }
+
+  clearFile() {
+    this.fileInput.nativeElement.value = '';
+    this.fileName = '';
   }
 }
diff --git a/public/src/app/main/main.component.html b/public/src/app/main/main.component.html
index 182ed9c..10d86e2 100644
--- a/public/src/app/main/main.component.html
+++ b/public/src/app/main/main.component.html
@@ -39,10 +39,9 @@
         </button>
 
         <div *ngIf="this.store.isEditMode" style="display: flex;">
-          <button mat-icon-button (click)="saveCDUMP()" [disabled]="!store.cdumpIsDirty || store.viewOnly" data-tests-id="save-btn">
+          <button mat-icon-button (click)="saveCDUMP()" [disabled]="!store.cdumpIsDirty || store.viewOnly" data-tests-id="save-btn" style="margin-right: 10px;">
             <span style="width: 100%;
             height: 100%;
-            padding-right: 20px;
             display: flex;
             justify-content: center;
             align-items: center;"
diff --git a/public/src/app/main/main.component.ts b/public/src/app/main/main.component.ts
index 8ba0d1f..f4b76bc 100644
--- a/public/src/app/main/main.component.ts
+++ b/public/src/app/main/main.component.ts
@@ -56,7 +56,7 @@ export class MainComponent {
         success => {
           console.log(success);
           this.store.mcUuid = success.vfcmt.uuid;
-          this.store.generalflow = '';
+          this.store.generalflow = 'edit';
           this.store.mcName = success.vfcmt.name;
           this.store.flowType = success.cdump.flowType;
           console.log(this.cleanProperty(success));
@@ -119,7 +119,6 @@ export class MainComponent {
           this.location.path();
           // this.location.go();
           this.store.mcUuid = success.vfcmt.uuid;
-          this.store.generalflow = '';
           this.store.mcName = success.vfcmt.name;
           console.log(this.cleanProperty(success));
           this.store.cdump = success.cdump;
diff --git a/public/src/app/revert-dialog/revert-dialog.component.ts b/public/src/app/revert-dialog/revert-dialog.component.ts
index 9cd7a7d..7ae93b4 100644
--- a/public/src/app/revert-dialog/revert-dialog.component.ts
+++ b/public/src/app/revert-dialog/revert-dialog.component.ts
@@ -37,7 +37,7 @@ export class RevertDialogComponent {
         success => {
           this.store.monitoringComponents = this.store.monitoringComponents.map(
             item => {
-              if (item.invariantUuid === success.invariantUuid) {
+              if (item.invariantUUid === success.invariantUUid) {
                 item = success;
               }
               return item;
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 c7eac9f..201dba0 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
@@ -107,10 +107,11 @@
                 </button>
 
                 <button mat-icon-button class='button-remove' [disabled]="store.viewOnly" (click)="removeAction(action)" data-tests-id="deleteAction">
-                  <mat-icon>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>
-            </div>
+          </div>
           </li>
         </ul>
       </div>
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 f8fd6dd..466b6a9 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
@@ -407,6 +407,7 @@ export class ActionListComponent implements AfterViewInit {
                 // clear temp copy rule.
                 this.clearCopyRuleFromList();
                 // then update the rule list and sync with server
+                this.updateTaregtListExisiting();
                 this.store.updateRuleInList(response);
                 this._ruleApi.callUpdateVersionLock();
                 this.store.loader = false;
@@ -424,6 +425,25 @@ export class ActionListComponent implements AfterViewInit {
     }
   }
 
+  updateTaregtListExisiting() {
+    this._ruleApi
+      .generateMappingRulesFileName(
+        this.store.ruleListExistParams.nodeName,
+        this.store.ruleListExistParams.nodeId,
+        this.store.ruleListExistParams.vfcmtUuid
+      )
+      .subscribe(response => {
+        console.log('generateMappingRulesFileName response: ', response);
+        this.store.advancedSetting.forEach(element => {
+          if (response.includes(element.name)) {
+            element.isExist = true;
+          } else {
+            element.isExist = false;
+          }
+        });
+      });
+  }
+
   private clearCopyRuleFromList() {
     this.store.ruleList = this.store.ruleList.filter(item => item.uid !== '');
   }
@@ -452,6 +472,7 @@ export class ActionListComponent implements AfterViewInit {
                 // clear temp copy rule.
                 this.clearCopyRuleFromList();
                 // then update the rule list and sync with server
+                this.updateTaregtListExisiting();
                 this.store.updateRuleInList(response);
                 this._ruleApi.callUpdateVersionLock();
                 this.uid = response.uid;
diff --git a/public/src/app/rule-engine/action/action.component.html b/public/src/app/rule-engine/action/action.component.html
index f439c5c..21f03b1 100644
--- a/public/src/app/rule-engine/action/action.component.html
+++ b/public/src/app/rule-engine/action/action.component.html
@@ -17,7 +17,7 @@
                 <span class="label" style="padding: 0 5px; width: 100px;">
                   Start Value
                 </span>
-                <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="startValue" name="title"
+                <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="startValue" name="startValue"
                   [(ngModel)]="action.stringTransform.startValue" type="text" placeholder="Select start value">
               </div>
             </div>
@@ -34,7 +34,7 @@
               <span class="label" style="padding: 0 5px; width: 100px;">
                 Target case
               </span>
-              <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="targetCase" name="title"
+              <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="targetCase" name="targetCase"
                 [(ngModel)]="action.stringTransform.targetCase" type="text" placeholder="Select target case">
             </div>
           </div>
@@ -162,7 +162,8 @@
                     <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" [disabled]="store.viewOnly">
-                      <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>
 
@@ -217,7 +218,8 @@
                   <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" [disabled]="store.viewOnly"
                     style="height: 24px; width: 24px; display:flex; box-shadow: none;">
-                    <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>
                 </th>
               </tr>
@@ -421,7 +423,8 @@
             <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)="removeMapRow(index)" *ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;" [disabled]="store.viewOnly">
-                <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>
             </th>
           </tr>
@@ -433,7 +436,6 @@
         <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;" [disabled]="store.viewOnly">
             <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 Row</span>
         </div>
@@ -447,7 +449,7 @@
                     align-items: center;"
               [innerHTML]="'download' | feather:20"></span>
           </div>
-          <input type="file" id="file" accept=".csv" (change)="handleFileInput($event.target.files)">
+          <input type="file" id="file" #csvInput [disabled]="store.viewOnly" accept=".csv" (change)="handleFileInput($event.target.files)">
         </div>
       </div>
     </div>
diff --git a/public/src/app/rule-engine/action/action.component.ts b/public/src/app/rule-engine/action/action.component.ts
index dfdb83f..380ff43 100644
--- a/public/src/app/rule-engine/action/action.component.ts
+++ b/public/src/app/rule-engine/action/action.component.ts
@@ -4,7 +4,8 @@ import {
   Input,
   OnInit,
   ViewChild,
-  AfterViewInit
+  AfterViewInit,
+  ElementRef
 } from '@angular/core';
 // import { Copy } from "../model";
 import { Http, Response, Headers, RequestOptions } from '@angular/http';
@@ -17,6 +18,7 @@ import * as Papa from 'papaparse';
 import { metricData } from './metric.data';
 import { Store } from '../../store/store';
 import { ToastrService } from 'ngx-toastr';
+import { toJS } from 'mobx';
 
 @Component({
   selector: 'app-action',
@@ -28,6 +30,7 @@ export class ActionComponent implements OnInit, AfterViewInit {
   @ViewChild('from') fromInstance;
   @ViewChild('target') targetInstance;
   @ViewChild('actionFrm') actionFrm: NgForm;
+  @ViewChild('csvInput') fileInput: ElementRef;
   highlight = 'black';
   hoveredIndex;
   fileToUpload: File = null;
@@ -42,12 +45,12 @@ export class ActionComponent implements OnInit, AfterViewInit {
   ngAfterViewInit(): void {
     console.log(this.action.id);
     if (this.action.from !== undefined && this.action.from !== '') {
-      console.log('Action %o', this.action);
       this.fromInstance.updateMode(this.action.from);
     }
     if (this.action.target !== undefined && this.action.target !== '') {
       this.targetInstance.updateMode(this.action);
     }
+    console.log('Action %o', this.action);
   }
 
   updateFrom(data) {
@@ -93,34 +96,40 @@ export class ActionComponent implements OnInit, AfterViewInit {
     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 : '';
+  clearFile() {
+    this.fileInput.nativeElement.value = '';
+    this.fileName = '';
+  }
 
-    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()
-              };
-            });
+  handleFileInput(files: FileList) {
+    if (files && files.length > 0) {
+      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;
-          this.action.map.values = mapConvert;
+          console.log(`error: ${err}, in file ${file}`);
+          this.toastr.error('', err);
         }
-      },
-      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/api/rule-engine-api.service.ts b/public/src/app/rule-engine/api/rule-engine-api.service.ts
index f19fd15..ed0d25c 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
@@ -25,7 +25,8 @@ export class RuleEngineApiService {
   flowType: string;
   editorData: Subject<any> = new Subject();
   updateVersionLock: Subject<any> = new Subject();
-  tabIndex: Subject<any> = new BehaviorSubject(-1);
+  currentTab: Subject<any> = new BehaviorSubject(-1);
+  tabIndex = this.currentTab.asObservable();
 
   constructor(private http: Http) {
     this.baseUrl = `${environment.apiBaseUrl}/rule-editor`;
@@ -171,9 +172,9 @@ export class RuleEngineApiService {
       });
   }
 
-  deleteFilter() {
+  deleteFilter(vfcmtUuid) {
     const deleteFilter = {
-      vfcmtUuid: this.vfcmtUuid,
+      vfcmtUuid: vfcmtUuid,
       dcaeCompLabel: this.dcaeCompName,
       nid: this.nid,
       configParam: this.configParam
@@ -271,6 +272,6 @@ export class RuleEngineApiService {
   }
 
   callUpdateTabIndex(index) {
-    this.tabIndex.next(index);
+    this.currentTab.next(index);
   }
 }
diff --git a/public/src/app/rule-engine/condition/condition.component.html b/public/src/app/rule-engine/condition/condition.component.html
index 3a26823..e4a8775 100644
--- a/public/src/app/rule-engine/condition/condition.component.html
+++ b/public/src/app/rule-engine/condition/condition.component.html
@@ -59,8 +59,13 @@
           <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;" [disabled]="store.viewOnly">
-                <mat-icon class="material-icons md-18">add</mat-icon>
+              <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;" [disabled]="store.viewOnly">
+                <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 Condition
               </span>
@@ -68,8 +73,13 @@
 
             <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 || store.viewOnly" (click)="addConditionalGroup(tree, node)"
-                style="height: 24px; width: 24px; display:flex; box-shadow: none;">
-                <mat-icon class="material-icons md-18">add</mat-icon>
+                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' " [style.cursor]="node.data.level === 2 ? 'default' : 'pointer' "
                 class="btn-label">Add Condition Group
diff --git a/public/src/app/rule-engine/from/from.component.html b/public/src/app/rule-engine/from/from.component.html
index 0da7173..835946a 100644
--- a/public/src/app/rule-engine/from/from.component.html
+++ b/public/src/app/rule-engine/from/from.component.html
@@ -52,7 +52,8 @@
 
         <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>
+          <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
         </button>
       </div>
 
@@ -81,7 +82,8 @@
 
         <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>
+          <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
         </button>
       </div>
 
@@ -112,7 +114,8 @@
 
         <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeFromInput(index)"
           *ngIf="from.values.length > 2" style="box-shadow: none; height: 24px; width: 24px; display:flex" data-tests-id="btnDelete">
-          <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>
 
@@ -122,7 +125,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-top: 1px; padding-left: 6px;">Add input</span>
       </div>
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 5085563..b0d3d9b 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
@@ -26,7 +26,7 @@
           <div class="field-label required" style="padding-right: 10px;">
             Entry Phase
           </div>
-          <input name="entryPhase" [readonly]="store.viewOnly" required [(ngModel)]="entryPhase" class="field-text" style="width:250px;"
+          <input name="entryPhase" [readonly]="store.viewOnly" [(ngModel)]="entryPhase" class="field-text" style="width:250px;"
             data-tests-id="entryPhase" />
         </div>
 
@@ -53,7 +53,7 @@
           </div>
         </div>
         <div *ngIf="ifStatement">
-          <button mat-raised-button (click)="applyFilter()" color="primary" style="width: 113px;height: 36px;"
+          <button mat-raised-button (click)="applyFilter()" color="primary" style="width: 113px;height: 36px;" [disabled]="store.viewOnly"
             data-tests-id="applyFilter">
             Apply Filter
           </button>
@@ -66,7 +66,7 @@
       </div>
     </div>
 
-    <div *ngIf="targetSource && (tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))">
+    <div *ngIf="targetSource && versionType.selectedEvent && (tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))">
       <div style="display: flex; align-items: baseline; width: 170px; height:35px; position:relative;" (mouseenter)="showBtnList = true"
         (mouseleave)="showBtnList = false" data-tests-id="addGroup">
         <div style="display: flex; align-items: center;">
@@ -111,8 +111,7 @@
             </div>
             <input type="text" name="phase" [(ngModel)]="item.phase" class="field-text" data-tests-id="phase" />
 
-            <button mat-icon-button (click)="deleteGroup(item.groupId)" [disabled]="disableDeleteGroup(item.groupId)" [disabled]="store.viewOnly"
-              class="gray" data-tests-id="deleteGroup">
+            <button mat-icon-button (click)="deleteGroup(item.groupId)" [disabled]="disableDeleteGroup(item.groupId) || store.viewOnly" class="gray" data-tests-id="deleteGroup">
               <span style="width: 100%;
                             height: 100%;
                             display: flex;
@@ -144,7 +143,8 @@
                 </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 || store.viewOnly">
-                  <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>
             </div>
@@ -176,7 +176,7 @@
                                 align-items: center;"
                     [innerHTML]="'download' | feather:18"></span>
                 </button>
-                <input type="file" id="file" accept=".json" (change)="handleImportCDAP($event.target.files, item.groupId, item.phase)">
+                <input type="file" id="file" accept=".json" [disabled]="store.viewOnly" #groupUpload (change)="handleImportCDAP($event.target.files, item.groupId, item.phase)">
                 <span style="color: #009FDB; display: flex; justify-content: center; ">Import phase</span>
               </div>
             </div>
@@ -188,7 +188,7 @@
 
     <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'))"
+      <div *ngIf="targetSource && store.ruleList.length === 0 && versionType.selectedEvent && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"
         style="margin: 30px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;">
 
         <div style="margin: 3em 0 2em 0;">
@@ -244,7 +244,8 @@
                 [innerHTML]="'copy' | feather:20"></span>
             </button>
             <button (click)="removeItem(item.uid, null)" data-tests-id="deleteRule" class="btn-list" mat-icon-button *ngIf="!store.viewOnly">
-              <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>
         </div>
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 6e3c877..1bbed87 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
@@ -1,4 +1,9 @@
-import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  ViewChild,
+  ViewEncapsulation,
+  ElementRef
+} from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { isEmpty } from 'lodash';
 import { ToastrService } from 'ngx-toastr';
@@ -21,6 +26,7 @@ const primaryColor = '#009fdb';
 })
 export class RuleListComponent {
   @ViewChild('versionEventType') versionType;
+  @ViewChild('groupUpload') fileInput: ElementRef;
   error: Array<string>;
   // list = new Array();
   schema;
@@ -43,6 +49,7 @@ export class RuleListComponent {
   // filter
   ifStatement = false;
   condition: any;
+  filterSave = false;
 
   private errorHandler(error: any) {
     this.store.loader = false;
@@ -82,14 +89,18 @@ export class RuleListComponent {
 
   filterCheckbox() {
     this.ifStatement = !this.ifStatement;
-    if (!this.ifStatement && this.condition !== undefined) {
-      this.deleteFilter();
+    if (!this.ifStatement) {
+      if (this.filterSave) {
+        this.deleteFilter();
+      } else {
+        this.condition = null;
+      }
     }
   }
 
   removeConditionCheck(flag) {
     this.ifStatement = flag;
-    if (this.condition !== undefined) {
+    if (this.filterSave) {
       this.deleteFilter();
     }
   }
@@ -107,10 +118,14 @@ export class RuleListComponent {
       .subscribe(
         res => {
           this.store.mcUuid = res.uuid;
-          this._ruleApi.deleteFilter().subscribe(
+          this._ruleApi.deleteFilter(res.uuid).subscribe(
             response => {
-              console.log('success import', response);
+              if (this.store.ruleList.length === 0) {
+                this.versionType.updateVersionTypeFlag(false);
+              }
               this.condition = null;
+              this.filterSave = false;
+              this.ifStatement = false;
               this.store.loader = false;
             },
             error => {
@@ -174,63 +189,76 @@ export class RuleListComponent {
     }
   }
 
+  clearFile() {
+    this.fileInput.nativeElement.value = '';
+    this.fileName = '';
+  }
+
   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;
-            let data = '';
-            try {
-              data = JSON.parse(reader.result as any);
-              const input = {
-                version: this.versionType.selectedVersion,
-                eventType: this.versionType.selectedEvent,
-                groupId: groupId,
-                phase: phaseName,
-                payload: data
-              };
-              this._ruleApi.importPhase(input).subscribe(
-                response => {
-                  console.log('success import', response);
-                  this.store.loader = false;
-                  this.store.updateRuleList(Object.values(response.rules));
-                },
-                error => {
-                  this.notifyError(error);
-                }
-              );
-            } catch (e) {
-              console.log(e);
-              this.errorHandler({
-                policyException: {
-                  messageId: 'Invalid JSON',
-                  text: 'Invalid JSON',
-                  variables: [],
-                  formattedErrorMessage: 'Invalid JSON'
-                }
-              });
+    if (files && files.length > 0) {
+      this.store.loader = true;
+      this.fileToUpload = files.item(0);
+      console.log('file to load:', this.fileToUpload);
+      this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
+      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;
+              let data = '';
+              try {
+                data = JSON.parse(reader.result as any);
+                const input = {
+                  version: this.versionType.selectedVersion,
+                  eventType: this.versionType.selectedEvent,
+                  groupId: groupId,
+                  phase: phaseName,
+                  payload: data
+                };
+                this._ruleApi.importPhase(input).subscribe(
+                  response => {
+                    console.log('success import', response);
+                    this.clearFile();
+                    this.store.loader = false;
+                    this.store.updateRuleList(Object.values(response.rules));
+                  },
+                  error => {
+                    this.clearFile();
+                    this.notifyError(error);
+                  }
+                );
+              } catch (e) {
+                console.log(e);
+                this.clearFile();
+                this.errorHandler({
+                  policyException: {
+                    messageId: 'Invalid JSON',
+                    text: 'Invalid JSON',
+                    variables: [],
+                    formattedErrorMessage: 'Invalid JSON'
+                  }
+                });
+              }
+            },
+            error => {
+              this.clearFile();
+              this.errorHandler(error);
             }
-          },
-          error => {
-            this.errorHandler(error);
-          }
-        );
-    };
+          );
+      };
+    } else {
+      this.clearFile();
+    }
   }
 
   addGroup(type) {
@@ -306,10 +334,12 @@ export class RuleListComponent {
           this.entryPhase = response.entryPhase;
           this.publishPhase = response.publishPhase;
           this.condition = response.filter;
+          this.filterSave = response.filter !== undefined ? true : false;
           this.ifStatement = this.condition == null ? false : true;
         } else {
           this.store.resetRuleList();
           this.condition = null;
+          this.filterSave = false;
           this.ifStatement = false;
           this.versionType.updateVersionTypeFlag(false);
           this.targetSource = null;
@@ -412,6 +442,7 @@ export class RuleListComponent {
       .subscribe(
         res => {
           this.store.mcUuid = res.uuid;
+          this.filterSave = true;
           let conditionData2server = null;
           conditionData2server = this.convertConditionToServer(this.condition);
           const newFilter = {
@@ -423,6 +454,9 @@ export class RuleListComponent {
           };
           this._ruleApi.applyFilter(newFilter).subscribe(
             success => {
+              if (this.store.ruleList.length === 0) {
+                this.versionType.updateVersionTypeFlag(true);
+              }
               this.store.loader = false;
             },
             error => {
@@ -549,7 +583,9 @@ export class RuleListComponent {
                       console.log(data);
                       this.versions = data.map(x => x.version);
                       this.metaData = data;
-                      this.versionType.updateVersionTypeFlag(false);
+                      if (this.filterSave === false) {
+                        this.versionType.updateVersionTypeFlag(false);
+                      }
                       this.targetSource = null;
                     });
                   }
@@ -597,7 +633,9 @@ export class RuleListComponent {
     this.store.isLeftVisible = false;
 
     this._ruleApi.updateVersionLock.subscribe(() => {
-      this.versionType.updateVersionTypeFlag(true);
+      if (this.filterSave === true) {
+        this.versionType.updateVersionTypeFlag(true);
+      }
     });
   }
 }
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 fd3cfab..1539c49 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
@@ -10,10 +10,10 @@
         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>
+          <option *ngFor="let target of store.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>
+          <option *ngFor="let target of store.advancedSetting" [hidden]="target.isExist" [value]="target.name" data-tests-id="templateOptionsNotExist">{{target.name}}</option>
         </optgroup>
       </select>
     </div>
@@ -45,23 +45,6 @@
         | slice:0:selectedEvent.length-6}}</span>
     </div>
 
-    <!-- <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 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 style="margin-left: 5px;">Notify OID</label>
-        </div>
-      </div>
-      <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>
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 6869260..791919c 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
@@ -19,7 +19,6 @@ export class VersionTypeSelectComponent {
   @Input() metaData;
   @Output() nodesUpdated = new EventEmitter();
   @Output() refrashRuleList = new EventEmitter();
-  advancedSetting: Array<any>;
   notifyIdCheckbox = false;
 
   constructor(private _ruleApi: RuleEngineApiService, public store: Store) {
@@ -36,7 +35,7 @@ export class VersionTypeSelectComponent {
           tabName.toLowerCase().includes('highlandpark') ||
           tabName.toLowerCase().includes('hp')
         ) {
-          this.advancedSetting = this.store.tabsProperties[index].filter(
+          this.store.advancedSetting = this.store.tabsProperties[index].filter(
             item => {
               if (
                 !(
@@ -49,7 +48,7 @@ export class VersionTypeSelectComponent {
               }
             }
           );
-          this.mappingTarget = this.advancedSetting[0].name;
+          this.mappingTarget = this.store.advancedSetting[0].name;
 
           this._ruleApi
             .generateMappingRulesFileName(
@@ -59,7 +58,7 @@ export class VersionTypeSelectComponent {
             )
             .subscribe(response => {
               console.log('generateMappingRulesFileName response: ', response);
-              this.advancedSetting.forEach(element => {
+              this.store.advancedSetting.forEach(element => {
                 if (response.includes(element.name)) {
                   element.isExist = true;
                 } else {
diff --git a/public/src/app/store/store.ts b/public/src/app/store/store.ts
index 5bd8c3e..a994e94 100644
--- a/public/src/app/store/store.ts
+++ b/public/src/app/store/store.ts
@@ -19,6 +19,7 @@ export class Store {
   @observable loader = false;
   @observable cdumpIsDirty = false;
   @observable expandAdvancedSetting = [];
+  @observable advancedSetting = [];
   @observable expandImports = [];
   @observable generalflow;
   @observable vfiName;
diff --git a/public/src/assets/images/icon_revert.svg b/public/src/assets/images/icon_revert.svg
new file mode 100644
index 0000000..800220f
--- /dev/null
+++ b/public/src/assets/images/icon_revert.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="18px" viewBox="0 0 20 18" 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/actions/download copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M10.8333333,8.83333333 L13.0833333,11.0833333 C13.4166667,11.4166667 13.4166667,11.9166667 13.0833333,12.25 C12.9166667,12.4166667 12.6666667,12.5 12.5,12.5 C12.3333333,12.5 12.0833333,12.4166667 11.9166667,12.25 L9.41666667,9.75 C9.25,9.58333333 9.16666667,9.41666667 9.16666667,9.16666667 L9.16666667,4.16666667 C9.16666667,3.66666667 9.5,3.33333333 10,3.33333333 C10.5,3.33333333 10.8333333,3.66666667 10.8333333,4.16666667 L10.8333333,8.83333333 Z M17.8364846,5.58223491 C19.4189846,9.91556825 17.0864846,14.6655682 12.7523179,16.1655682 C11.8364846,16.4989016 10.9189846,16.6655682 10.0031512,16.6655682 C6.58648456,16.6655682 3.33648456,14.4989016 2.08648456,11.0822349 C1.91898456,10.6655682 2.16898456,10.1655682 2.58565123,9.99890158 C3.0023179,9.83223491 3.50315123,10.0822349 3.6698179,10.4989016 C4.9198179,13.9989016 8.6698179,15.8322349 12.1689846,14.5822349 C13.9198179,13.9989016 15.2523179,12.7489016 16.0031512,11.1655682 C16.7523179,9.58223491 16.8364846,7.74890158 16.2531512,6.08223491 C15.6689846,4.33223491 14.4189846,2.99890158 12.8364846,2.24890158 C11.2531512,1.49890158 9.41898456,1.41556825 7.7523179,1.99890158 C6.83648456,2.33223491 5.91898456,2.91556825 5.2523179,3.58223491 L2.9198179,5.83223491 L5.83648456,5.83223491 C6.33565123,5.83223491 6.5023179,5.99890158 6.5023179,6.49890158 C6.5023179,6.99890158 6.1698179,7.33223491 5.66898456,7.33223491 L0.668984565,7.33223491 L0.502317898,7.33223491 L0.419817898,7.33223491 L0.336484565,7.24890158 C0.252317898,7.24890158 0.252317898,7.24890158 0.169817898,7.16556825 C0.0856512313,7.16556825 0.0856512313,7.08223491 0.0856512313,7.08223491 C0.0856512313,6.99890158 0.00315123127,6.99890158 0.00315123127,6.91556825 L0.00315123127,6.74890158 L0.00315123127,6.66556825 L0.00315123127,1.66556825 C0.00315123127,1.16556825 0.336484565,0.832234912 0.836484565,0.832234912 C1.33565123,0.832234912 1.6698179,1.16556825 1.6698179,1.66556825 L1.6698179,4.74890158 L4.1698179,2.41556825 C5.00315123,1.58223491 6.08565123,0.915568245 7.25315123,0.498901579 C9.33648456,-0.251098421 11.5864846,-0.167765088 13.5856512,0.832234912 C15.5864846,1.83223491 17.0864846,3.49890158 17.8364846,5.58223491 Z" id="path-1"></path>
+    </defs>
+    <g id="Vr7" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="DCAE-1810-MC_monitoring_list" transform="translate(-1264.000000, -489.000000)">
+            <g id="icons/versio_bar/revert" transform="translate(1264.000000, 488.000000)">
+                <g id="color-/-gray-#5A5A5A-/-idle--Copy-20" transform="translate(0.833333, 1.666667)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Mask" fill="#000000" xlink:href="#path-1"></use>
+                    <g id="color/gray#5A5A5A" mask="url(#mask-2)" fill="#5A5A5A">
+                        <g transform="translate(-0.833333, -1.666667)" id="Rectangle-3">
+                            <rect x="0" y="0" width="25" height="25"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/src/assets/images/icon_submitted.svg b/public/src/assets/images/icon_submitted.svg
new file mode 100644
index 0000000..513cb77
--- /dev/null
+++ b/public/src/assets/images/icon_submitted.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="17px" viewBox="0 0 13 17" 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>icon_delete copy 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="0 0 12.6666667 0 12.6666667 15.8333333 0 15.8333333"></polygon>
+    </defs>
+    <g id="Vr7" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="DCAE-1810-MC_monitoring_list" transform="translate(-1199.000000, -489.000000)">
+            <g id="icons/vid/testing-" transform="translate(1196.000000, 488.000000)">
+                <g id="Page-1" transform="translate(3.166667, 1.583333)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="Clip-2"></g>
+                    <path d="M11.2592593,13.6742424 C11.2592593,14.1060606 10.9777778,14.3939394 10.5555556,14.3939394 L2.11111111,14.3939394 C1.68888889,14.3939394 1.40740741,14.1060606 1.40740741,13.6742424 L1.40740741,3.59848485 C1.40740741,3.16594697 1.68888889,2.87878788 2.11111111,2.87878788 L2.81481481,2.87878788 C2.81481481,3.67045455 3.44814815,4.31818182 4.22222222,4.31818182 L8.44444444,4.31818182 C9.21851852,4.31818182 9.85185185,3.67045455 9.85185185,2.87878788 L10.5555556,2.87878788 C10.9777778,2.87878788 11.2592593,3.16594697 11.2592593,3.59848485 L11.2592593,13.6742424 Z M4.22222222,2.15909091 L4.22222222,1.43939394 L8.44444444,1.43939394 L8.44444444,2.87878788 L4.22222222,2.87878788 L4.22222222,2.15909091 Z M9.07757161,6.57083333 C9.39423828,6.25416667 9.86923828,6.25416667 10.1859049,6.57083333 C10.5017799,6.8875 10.5017799,7.3625 10.1859049,7.67916667 L6.26429814,11.9077762 C6.10596481,12.0661096 5.86846481,12.1452762 5.71013148,12.1452762 C5.55179814,12.1452762 5.31429814,12.0661096 5.15596481,11.9077762 L3.40416667,10.2452762 C3.0875,9.92860957 3.0875,9.45360957 3.40416667,9.1369429 C3.72083333,8.82027624 4.19583333,8.82027624 4.5125,9.1369429 L5.71013148,10.2452762 L9.07757161,6.57083333 Z M9.85185185,1.43939394 C9.85185185,0.647007576 9.21851852,0 8.44444444,0 L4.22222222,0 C3.44814815,0 2.81481481,0.647007576 2.81481481,1.43939394 L2.11111111,1.43939394 C0.914814815,1.43939394 0,2.375 0,3.59848485 L0,13.6742424 C0,14.8970076 0.914814815,15.8333333 2.11111111,15.8333333 L10.5555556,15.8333333 C11.7518519,15.8333333 12.6666667,14.8970076 12.6666667,13.6742424 L12.6666667,3.59848485 C12.6666667,2.375 11.7518519,1.43939394 10.5555556,1.43939394 L9.85185185,1.43939394 Z" id="Combined-Shape" fill="#5A5A5A" mask="url(#mask-2)"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file