From a0c5a22d123f1bdaa8ec7bfbf75f76cbe2ace29a Mon Sep 17 00:00:00 2001
From: "Manor, Yanir (ym903w)" <ym903w@intl.att.com>
Date: Sun, 21 Oct 2018 11:00:42 +0300
Subject: Update code to latest

Change-Id: I76b37c2d6d333204899c9bc87f310e5b607a5e73
Issue-ID: DCAEGEN2-836
Signed-off-by: Manor, Yanir (ym903w) <ym903w@intl.att.com>
---
 .../app/rule-engine/action/action.component.html   | 202 +++++++++++----------
 1 file changed, 109 insertions(+), 93 deletions(-)

(limited to 'public/src/app/rule-engine/action/action.component.html')

diff --git a/public/src/app/rule-engine/action/action.component.html b/public/src/app/rule-engine/action/action.component.html
index 38a9aa0..f439c5c 100644
--- a/public/src/app/rule-engine/action/action.component.html
+++ b/public/src/app/rule-engine/action/action.component.html
@@ -7,6 +7,52 @@
         {{action.actionType | uppercase}}
       </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" [readonly]="store.viewOnly" 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" [readonly]="store.viewOnly" 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>
+
       <!-- from component -->
       <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>
@@ -25,7 +71,7 @@
                 <span class="label" style="padding: 0 5px; ">
                   Field
                 </span>
-                <input required name="searchField" class="input-text" data-tests-id="searchField" [(ngModel)]="action.search.searchField"
+                <input required name="searchField" class="input-text" [readonly]="store.viewOnly" data-tests-id="searchField" [(ngModel)]="action.search.searchField"
                   type="text" placeholder="Search Field">
               </div>
             </div>
@@ -36,8 +82,8 @@
                 <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">
+                <input required class="input-text" data-tests-id="searchValue" [(ngModel)]="action.search.searchValue" [readonly]="store.viewOnly"
+                  type="text" name="searchValue" placeholder="Search Value">
               </div>
             </div>
           </div>
@@ -59,18 +105,22 @@
                 <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">
+                <input class="input-text" name="searchLeft" data-tests-id="searchLeft" [(ngModel)]="action.search.searchFilter.left" [readonly]="store.viewOnly"
+                  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">
+                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="assigned">Assigned</option>
+                  <option value="unassigned">Unassigned</option>
                   <option value="oneOf">One of</option>
                   <option value="NotOneOf">Not one of</option>
                 </select>
@@ -80,18 +130,19 @@
                 <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">
+                <input class="input-text" name="searchRight" data-tests-id="searchRight" [(ngModel)]="action.search.searchFilter.right" [readonly]="store.viewOnly"
+                  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>
+          <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>
+            <p-radioButton name="searchRadio" label="Enrich" value="enrich" [ngModel]="action.search.radio"
+              data-tests-id="radioEnrich" (ngModelChange)="searchRadioChange($event)"></p-radioButton>
           </span>
         </div>
 
@@ -99,17 +150,18 @@
           <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 *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}}]">
+                      <input class="input-text" [readonly]="store.viewOnly" [(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">
+                    <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>
                     </button>
                   </div>
@@ -118,8 +170,9 @@
                 <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>
+                      data-tests-id="btnAddSearchFeild" [disabled]="store.viewOnly">
+                      <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>
@@ -134,7 +187,7 @@
                 <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"
+                <input required class="input-text" [readonly]="store.viewOnly" name="searchPrefix" data-tests-id="searchPrefix" [(ngModel)]="action.search.enrich.prefix"
                   type="text" placeholder="Search prefix">
               </div>
             </div>
@@ -150,16 +203,19 @@
               </tr>
             </thead>
             <tbody ngModelGroup="searchUpdateKeyValue" #searchUpdateKeyValue="ngModelGroup">
-              <tr *ngFor="let item of action.search.updates; let index = index;" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index">
+              <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;">
+                  <input [(ngModel)]="item.key" [readonly]="store.viewOnly" 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;">
+                  <input [(ngModel)]="item.value" [readonly]="store.viewOnly" 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"
+                    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>
                   </button>
@@ -170,7 +226,8 @@
           <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>
+                <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>
@@ -181,56 +238,11 @@
 
       <!-- 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 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">
@@ -238,8 +250,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;">Title</span>
-              <input required class="input-text" data-tests-id="InputLogTitle" name="title" [(ngModel)]="action.logEvent.title" type="text"
-                placeholder="The title for the log entry">
+              <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="InputLogTitle" name="title" [(ngModel)]="action.logEvent.title"
+                type="text" placeholder="The title for the log entry">
             </div>
           </div>
         </div>
@@ -251,8 +263,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" name="logText" [(ngModel)]="action.logText.text" type="text"
-                placeholder="Text to log">
+              <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="InputLogText" name="logText" [(ngModel)]="action.logText.text"
+                type="text" placeholder="Text to log">
             </div>
           </div>
         </div>
@@ -267,7 +279,7 @@
           <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"
+              <input data-tests-id="InputFromFormat" [readonly]="store.viewOnly" class="input-text" required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat"
                 type="text">
             </div>
           </div>
@@ -276,7 +288,7 @@
           <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"
+              <input data-tests-id="InputToFormat" [readonly]="store.viewOnly" class="input-text" required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat"
                 type="text">
             </div>
           </div>
@@ -288,7 +300,7 @@
           <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"
+              <input class="input-text" [readonly]="store.viewOnly" data-tests-id="InputFromTimezone" required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone"
                 type="text">
             </div>
           </div>
@@ -297,7 +309,7 @@
           <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"
+              <input class="input-text" [readonly]="store.viewOnly" data-tests-id="InputToTimezone" required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone"
                 type="text">
             </div>
           </div>
@@ -314,8 +326,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" required name="findWhat" [(ngModel)]="action.replaceText.find" type="text"
-                placeholder="Find text">
+              <input data-tests-id="InputFindWhat" [readonly]="store.viewOnly" class="input-text" required name="findWhat" [(ngModel)]="action.replaceText.find"
+                type="text" placeholder="Find text">
             </div>
 
           </div>
@@ -329,7 +341,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" required name="replaceWith" [(ngModel)]="action.replaceText.replace"
+              <input data-tests-id="InputReplaceWith" [readonly]="store.viewOnly" class="input-text" required name="replaceWith" [(ngModel)]="action.replaceText.replace"
                 type="text" placeholder="Replace with text">
             </div>
 
@@ -347,7 +359,8 @@
           <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" name="logName" [(ngModel)]="action.logText.name" type="text" placeholder="Enter log name">
+              <input class="input-text" [readonly]="store.viewOnly" data-tests-id="InputLogName" name="logName" [(ngModel)]="action.logText.name"
+                type="text" placeholder="Enter log name">
             </div>
           </div>
         </div>
@@ -358,8 +371,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" required name="logLevel" [(ngModel)]="action.logText.level" type="text"
-                placeholder="The title for the log entry">
+              <input class="input-text" [readonly]="store.viewOnly" data-tests-id="InputLogLevel" required name="logLevel" [(ngModel)]="action.logText.level"
+                type="text" placeholder="The title for the log entry">
             </div>
           </div>
         </div>
@@ -372,8 +385,8 @@
       <!-- Default checkbox and input -->
       <div class="default" style="display: flex; align-items: center">
         <div class="pretty p-svg">
-          <input type="checkbox" name="defaultCheckbox" data-tests-id="defaultCheckbox" [checked]="action.map.haveDefault" (change)="changeCheckbox()"
-          />
+          <input type="checkbox" name="defaultCheckbox" data-tests-id="defaultCheckbox" [checked]="action.map.haveDefault"
+            (change)="changeCheckbox()" />
           <div class="state">
             <!-- svg path -->
             <svg class="svg svg-icon" viewBox="0 0 20 20">
@@ -384,7 +397,8 @@
           </div>
         </div>
         <div *ngIf="action.map.haveDefault" class="input-wrapper">
-          <input type="text" 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" [readonly]="store.viewOnly"
+            class="input">
         </div>
       </div>
 
@@ -398,14 +412,15 @@
         <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" required name="mapKey[{{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;" [readonly]="store.viewOnly">
             </th>
             <th style="height: 30px; border: 1px solid #F3F3F3;">
-              <input [(ngModel)]="item.value" 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;" [readonly]="store.viewOnly">
             </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)="removeMapRow(index)" *ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
+                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>
               </button>
             </th>
@@ -416,7 +431,7 @@
 
       <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;">
+          <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>
@@ -429,7 +444,8 @@
                     height: 100%;
                     display: flex;
                     justify-content: center;
-                    align-items: center;" [innerHTML]="'download' | feather:20"></span>
+                    align-items: center;"
+              [innerHTML]="'download' | feather:20"></span>
           </div>
           <input type="file" id="file" accept=".csv" (change)="handleFileInput($event.target.files)">
         </div>
-- 
cgit 1.2.3-korg