feat(orb-ui): #145 Create Policy, option to upload a policy configura…

…tion yaml file (#2470)
orb-community · Jun 28, 2023 · 09e404a · 09e404a
1 parent 9c3e093
commit 09e404a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 11 deletions.
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
@@ -358,15 +358,24 @@ <h4>{{ isEdit ? 'Edit Agent Policy' : 'Create Agent Policy'}}</h4>
               </form>
             </div>
           </div>
-          <div
-            *ngIf="!isWizard"
-            class="code-editor-wrapper">
-            <ngx-monaco-editor
-                #editorComponent
-                [(ngModel)]="code"
-                [options]="editorOptions"
-                class="code-editor">
-            </ngx-monaco-editor>
+          <div *ngIf="!isWizard">
+              <div style="display: flex; margin-top: 10px; margin-bottom: 10px; gap: 60px;">
+                <p class="summary-accent align">Paste or Upload your YAML configuration</p>
+                <button class="upload-button align" (click)="fileInput.click()">
+                  <nb-icon [icon]="uploadIconKey" pack="eva">
+                  </nb-icon>
+                  Upload file
+                </button>
+                <input type="file" (change)="onFileSelected($event)" #fileInput style="display: none">
+              </div>
+              <div class="code-editor-wrapper">
+                <ngx-monaco-editor
+                  #editorComponent
+                  [(ngModel)]="code"
+                  [options]="editorOptions"
+                  class="code-editor">
+                </ngx-monaco-editor>
+              </div>
           </div>
           <hr/>
           <div class="d-flex justify-content-end">

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
@@ -170,7 +170,6 @@ ngx-tag-control, ngx-tag-display {
 .code-editor {
   height: calc(100%);
   width: calc(100%);
-  padding: calc(1rem);
 }
 
 .code-editor-wrapper {
@@ -194,3 +193,17 @@ ngx-tag-control, ngx-tag-display {
   margin-top: 1rem;
   margin: 10px 0;
 }
+
+.upload-button {
+  color: #3089fc;
+  background-color: transparent;
+  border: none;
+  font-weight: 600;
+  outline: none;
+}
+.summary-accent {
+  color: #969fb9 !important;
+}
+.align {
+  margin: 0px;
+}
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
@@ -130,6 +130,8 @@ kind: collection`;
 
   selectedTags: Tags;
 
+  uploadIconKey = 'upload-outline'
+
   constructor(
     private agentPoliciesService: AgentPoliciesService,
     private notificationsService: NotificationsService,
@@ -453,7 +455,16 @@ kind: collection`;
   viewPolicy(id) {
     this.router.navigateByUrl(`/pages/datasets/policies/view/${id}`);
   }
-
+  onFileSelected(event: any) {
+    const file: File = event.target.files[0];
+    const reader: FileReader = new FileReader();
+
+    reader.onload = (e: any) => {
+      this.code = e.target.result;
+    };
+
+    reader.readAsText(file);
+  }
   onYAMLSubmit() {
     const payload = {
       name: this.detailsFG.controls.name.value,