3 files changed, 53 insertions, 24 deletions
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();
+  }
 }