fix(orb-ui): User able to create and edit yaml policies using json …

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;

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

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;
 }

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() {

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;
     }
   }
 

ui/src/app/pages/profile/profile.component.scss

@@ -1,5 +1,6 @@
 button {
   float: right;
+  font-family: 'Montserrat';
 }
 
 .card-row {

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;
 
 
 }

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>-->

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;
+}

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);
+  }
 }