From dae1111f5277c44e65737cbe15dd3bedc902edad Mon Sep 17 00:00:00 2001
From: joaoguilherme2003 <joao.mendonca@encora.com>
Date: Mon, 2 Oct 2023 15:21:21 -0300
Subject: [PATCH] =?UTF-8?q?fix(orb-ui):=20User=20able=20to=20create=20and?=
 =?UTF-8?q?=20edit=20yaml=20policies=20using=20json=20=E2=80=A6=20(#2676)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(orb-ui): User able to create and edit yaml policies using json | Include upload file policy view

* fix translation
---
 ui/src/app/@theme/styles/_overrides.scss      |  2 ++
 .../add/agent.policy.add.component.html       |  6 ++++--
 .../add/agent.policy.add.component.scss       |  5 +++++
 .../add/agent.policy.add.component.ts         | 21 +++++++++++++++++--
 .../view/agent.policy.view.component.ts       |  4 ++++
 .../app/pages/profile/profile.component.scss  |  1 +
 .../policy-datasets.component.scss            |  1 +
 .../policy-interface.component.html           | 10 +++++++++
 .../policy-interface.component.scss           | 17 +++++++++++++++
 .../policy-interface.component.ts             | 12 +++++++++++
 10 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/@theme/styles/_overrides.scss b/ui/src/app/@theme/styles/_overrides.scss
index 8bef06755..5636b7ee0 100644
--- a/ui/src/app/@theme/styles/_overrides.scss
+++ b/ui/src/app/@theme/styles/_overrides.scss
@@ -302,6 +302,7 @@ input {
   font-size: 14px !important;
   font-weight: 600 !important;
   transition: background-color 0.3s ease !important;
+  font-family: 'Montserrat';
 }
 .next-button:hover {
   background-color: #509afc!important;
@@ -320,6 +321,7 @@ input {
   font-weight: 600 !important; 
   transition: background-color 0.3s ease !important;
   margin-right: 0 !important;
+  font-family: 'Montserrat';
 }
 .cancel-back-button:hover {
   background-color: rgba(255, 255, 255, 0.05) !important;
diff --git a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.html b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.html
index e3a851290..2a52df198 100644
--- a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.html
+++ b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.html
@@ -154,8 +154,8 @@ <h4>{{ isEdit ? 'Edit Agent Policy' : 'Create Agent Policy'}}</h4>
               YAML
             </button>
           </div>
-          <div style="display: flex; margin-top: 10px; margin-bottom: 10px; gap: 34px;">
-            <p class="summary-accent align">Paste or Upload your {{isJsonMode ? 'Json' : 'Yaml'}} configuration</p>
+          <div style="display: flex; margin-top: 10px; margin-bottom: 10px; gap: 60px;">
+            <span class="summary-accent align">Paste or Upload your {{isJsonMode ? 'Json' : 'Yaml'}} configuration</span>
             <button class="upload-button align" (click)="fileInput.click()">
               <nb-icon [icon]="uploadIconKey" pack="eva">
               </nb-icon>
@@ -181,7 +181,9 @@ <h4>{{ isEdit ? 'Edit Agent Policy' : 'Create Agent Policy'}}</h4>
                   class="code-editor">
                 </ngx-monaco-editor>
               </ng-container>
+              <span class="errorMessage">{{ errorConfigMessage }}</span>
             </div>
+            
           </div>
           <div class="d-flex justify-content-end">
             <button
diff --git a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.scss b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.scss
index 959ba6122..81b9bcd2f 100644
--- a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.scss
+++ b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.scss
@@ -265,4 +265,9 @@ ngx-tag-control, ngx-tag-display {
 }
 .align {
   margin: 0px;
+}
+.errorMessage {
+  color: #df316f;
+  font-size: 14px;
+  font-weight: 600;
 }
\ No newline at end of file
diff --git a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts
index bf3cb9219..bc0704ce1 100644
--- a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts
+++ b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts
@@ -49,6 +49,8 @@ export class AgentPolicyAddComponent {
 
   editorVisible = true;
 
+  errorConfigMessage: string;
+
   @ViewChild('editorComponentYaml')
   editorYaml;
 
@@ -152,6 +154,7 @@ kind: collection`;
     this.agentPolicyID = this.route.snapshot.paramMap.get('id');
     this.agentPolicy = this.newAgent();
     this.isEdit = !!this.agentPolicyID;
+    this.errorConfigMessage = '';
 
     this.readyForms();
 
@@ -339,9 +342,23 @@ kind: collection`;
   }
   canCreate() {
     if (this.isJsonMode) {
-      return this.editor.isJson(this.codejson);
+      if (this.editor.isJson(this.codejson)) {
+        this.errorConfigMessage = '';
+        return true;
+      }
+      else {
+        this.errorConfigMessage = 'Invalid JSON configuration, check syntax errors';
+        return false;
+      }
     } else {
-      return this.editor.isYaml(this.codeyaml);
+      if (this.editor.isYaml(this.codeyaml) && !this.editor.isJson(this.codeyaml)) {
+        this.errorConfigMessage = '';
+        return true;
+      }
+      else {
+        this.errorConfigMessage = 'Invalid YAML configuration, check syntax errors';
+        return false;
+      }
     }
   }
   refreshEditor() {
diff --git a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts
index 04fffa9ef..814ec9526 100644
--- a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts
+++ b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts
@@ -142,6 +142,9 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
 
     try {
       if (format === 'yaml') {
+        if (this.editor.isJson(policyInterface)) {
+          throw new Error('Invalid YAML format');
+        }
         yaml.load(policyInterface);
 
         interfacePartial = {
@@ -181,6 +184,7 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
         'Failed to edit Agent Policy',
         `Error: Invalid ${format.toUpperCase()}`,
       );
+      this.isRequesting = false;
     }
   }
 
diff --git a/ui/src/app/pages/profile/profile.component.scss b/ui/src/app/pages/profile/profile.component.scss
index 3e435b593..b2a1e5952 100644
--- a/ui/src/app/pages/profile/profile.component.scss
+++ b/ui/src/app/pages/profile/profile.component.scss
@@ -1,5 +1,6 @@
 button {
   float: right;
+  font-family: 'Montserrat';
 }
 
 .card-row {
diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss
index 5199b1cea..2c95e3663 100644
--- a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss
+++ b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss
@@ -31,6 +31,7 @@ nb-card {
   min-width: 600px;
   height: 200px;
   max-height: 300px;
+  min-height: 100px;
 
 
 }
diff --git a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.html b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.html
index 0519c3a16..bbc584dc5 100644
--- a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.html
+++ b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.html
@@ -17,6 +17,16 @@
       style="color: #df316f !important;">
       Discard
     </button>
+    <button 
+      class="upload-button" 
+      (click)="fileInput.click()"
+      *ngIf="editMode">
+      <nb-icon icon="upload-outline" pack="eva">
+      </nb-icon>
+        Upload file
+    </button>
+    <input type="file" (change)="onFileSelected($event)" #fileInput style="display: none" class="upload-input">
+
   </nb-card-header>
   <nb-card-body>
     <!--    <div *ngIf="editMode; then updateView else readView"></div>-->
diff --git a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.scss b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.scss
index 1183e2e06..1f9b5bdda 100644
--- a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.scss
+++ b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.scss
@@ -67,3 +67,20 @@ nb-card {
   min-height: 367px;
   max-height: 55vh;
 }
+.upload-button {
+  color: #3089fc;
+  background-color: transparent;
+  border: none;
+  font-weight: 600;
+  outline: none;
+  float: right;
+  border-radius: 15px;
+  padding: 6px 12px;
+  margin-right: 5px;
+  font-size: 0.875rem;
+  font-family: 'Montserrat';
+  transition: background-color 0.3s ease;
+}
+.upload-button:hover {
+  background-color: #171c30 !important;
+}
diff --git a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts
index 3827f5aae..3e2fc2709 100644
--- a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts
+++ b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts
@@ -121,4 +121,16 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
     this.updateForm();
     !!notify && this.editModeChange.emit(this.editMode);
   }
+
+  onFileSelected(event: any) {
+    const file: File = event.target.files[0];
+    const reader: FileReader = new FileReader();
+  
+    reader.onload = (e: any) => {
+    const fileContent = e.target.result;
+    this.code = fileContent;
+    };
+  
+    reader.readAsText(file);
+  }
 }