KWA: Use new Editor component (Monaco) (#2023)

* kwa(front): Add new Editor component Import new Editor component from Kubeflow Common Library and replace all instances of previous Ace Editor. Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> * Update COMMIT file to a more recent one in Kubeflow Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>
kubeflow · Nov 21, 2022 · ae1655c · ae1655c
1 parent a5ef2db
commit ae1655c
Show file tree

Hide file tree

Showing 24 changed files with 80 additions and 87 deletions.
diff --git a/pkg/new-ui/v1beta1/frontend/COMMIT b/pkg/new-ui/v1beta1/frontend/COMMIT
@@ -1 +1 @@
-c4ca7a9
+1cca7b81
diff --git a/pkg/new-ui/v1beta1/frontend/angular.json b/pkg/new-ui/v1beta1/frontend/angular.json
@@ -23,13 +23,17 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss", "src/assets/css/d3.parcoords.css"],
-            "scripts": [
-              "node_modules/ace-builds/src-min/ace.js",
-              "node_modules/ace-builds/src-min/mode-yaml.js",
-              "node_modules/ace-builds/src-min/theme-xcode.js"
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/monaco-editor",
+                "output": "assets/monaco-editor"
+              }
             ],
+            "styles": ["src/styles.scss", "src/assets/css/d3.parcoords.css"],
+            "scripts": [],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,

diff --git a/pkg/new-ui/v1beta1/frontend/karma.conf.js b/pkg/new-ui/v1beta1/frontend/karma.conf.js
@@ -12,6 +12,17 @@ module.exports = function (config) {
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
+    files: [
+      {
+        pattern: 'node_modules/monaco-editor/**',
+        watched: false,
+        included: false,
+        served: true,
+      },
+    ],
+    proxies: {
+      '/static/assets/monaco-editor/': '/base/node_modules/monaco-editor/',
+    },
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },

diff --git a/pkg/new-ui/v1beta1/frontend/package-lock.json b/pkg/new-ui/v1beta1/frontend/package-lock.json
diff --git a/pkg/new-ui/v1beta1/frontend/package.json b/pkg/new-ui/v1beta1/frontend/package.json
@@ -39,7 +39,7 @@
     "js-yaml": "^4.0.0",
     "lodash-es": "4.17.21",
     "material-icons": "^0.7.7",
-    "ng2-ace-editor": "^0.3.9",
+    "monaco-editor": "^0.33.0",
     "ngx-echarts": "^8.0.1",
     "ngx-json-viewer": "^2.4.0",
     "rxjs": "~6.6.7",

diff --git a/pkg/new-ui/v1beta1/frontend/proxy.conf.json b/pkg/new-ui/v1beta1/frontend/proxy.conf.json
@@ -4,5 +4,10 @@
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
+  },
+  "/static": {
+    "target": "http://localhost:4200",
+    "pathRewrite": { "^/static": "" },
+    "secure": false
   }
 }
diff --git a/...tend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.html b/...tend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.html
@@ -68,13 +68,13 @@
       </ng-container>
 
       <ng-container *ngSwitchCase="kind.CUSTOM">
-        <div
-          ace-editor
-          class="ace-editor"
+        <lib-monaco-editor
           [(text)]="customYaml"
-          mode="yaml"
-          theme="xcode"
-        ></div>
+          [language]="'yaml'"
+          [readOnly]="false"
+          [width]="375"
+          [height]="300"
+        ></lib-monaco-editor>
       </ng-container>
     </ng-container>
   </div>

diff --git a/...tend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.scss b/...tend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.scss
@@ -1,4 +0,0 @@
-.ace-editor {
-  width: 375px;
-  height: 300px;
-}

diff --git a/...d/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts b/...d/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts
@@ -1,9 +1,8 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormControl, FormGroup } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { FormModule } from 'kubeflow';
+import { EditorModule, FormModule } from 'kubeflow';
 import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
-import { AceEditorModule } from 'ng2-ace-editor';
 
 import { FormMetricsCollectorComponent } from './metrics-collector.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -20,7 +19,7 @@ describe('FormMetricsCollectorComponent', () => {
           BrowserAnimationsModule,
           FormModule,
           ListKeyValueModule,
-          AceEditorModule,
+          EditorModule,
         ],
         declarations: [FormMetricsCollectorComponent],
       }).compileComponents();

diff --git a/.../frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.module.ts b/.../frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.module.ts
@@ -1,13 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormMetricsCollectorComponent } from './metrics-collector.component';
-import { FormModule } from 'kubeflow';
+import { FormModule, EditorModule } from 'kubeflow';
 import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
-import { AceEditorModule } from 'ng2-ace-editor';
 
 @NgModule({
   declarations: [FormMetricsCollectorComponent],
-  imports: [CommonModule, FormModule, ListKeyValueModule, AceEditorModule],
+  imports: [CommonModule, FormModule, ListKeyValueModule, EditorModule],
   exports: [FormMetricsCollectorComponent],
 })
 export class FormMetricsCollectorModule {}
diff --git a/...1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.html b/...1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.html
@@ -84,14 +84,14 @@
       </div>
     </ng-container>
 
-    <div
-      ace-editor
+    <lib-monaco-editor
       [(text)]="yaml"
+      [language]="'yaml'"
       [readOnly]="formGroup.get('type').value === 'configmap'"
       (textChange)="recalculateTrialParameters($event)"
-      theme="xcode"
-      mode="yaml"
-    ></div>
+      [width]="375"
+      [height]="350"
+    ></lib-monaco-editor>
 
     <mat-divider class="margin-bottom margin-top"></mat-divider>
 

diff --git a/...1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.scss b/...1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.scss
@@ -5,7 +5,3 @@
 .margin-top {
   margin-top: 12px;
 }
-
-[ace-editor] {
-  height: 350px;
-}
diff --git a/...rontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts b/...rontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts
@@ -5,9 +5,8 @@ import { KWABackendService } from 'src/app/services/backend.service';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatDividerModule } from '@angular/material/divider';
-import { FormModule, PopoverModule } from 'kubeflow';
+import { EditorModule, FormModule, PopoverModule } from 'kubeflow';
 import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
-import { AceEditorModule } from 'ng2-ace-editor';
 
 import { FormTrialTemplateComponent } from './trial-template.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -25,8 +24,8 @@ describe('FormTrialTemplateComponent', () => {
           FormModule,
           ListKeyValueModule,
           MatDividerModule,
-          AceEditorModule,
           PopoverModule,
+          EditorModule,
         ],
         declarations: [FormTrialTemplateComponent],
         providers: [

diff --git a/...1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.module.ts b/...1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.module.ts
@@ -3,9 +3,8 @@ import { CommonModule } from '@angular/common';
 import { MatDividerModule } from '@angular/material/divider';
 
 import { FormTrialTemplateComponent } from './trial-template.component';
-import { FormModule, PopoverModule } from 'kubeflow';
+import { FormModule, PopoverModule, EditorModule } from 'kubeflow';
 import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
-import { AceEditorModule } from 'ng2-ace-editor';
 import { TrialParameterComponent } from './trial-parameter/trial-parameter.component';
 
 @NgModule({
@@ -15,8 +14,8 @@ import { TrialParameterComponent } from './trial-parameter/trial-parameter.compo
     FormModule,
     ListKeyValueModule,
     MatDividerModule,
-    AceEditorModule,
     PopoverModule,
+    EditorModule,
   ],
   exports: [FormTrialTemplateComponent],
 })

diff --git a/...i/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.html b/...i/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.html
@@ -1,7 +1,13 @@
 <h1 mat-dialog-title>Edit YAML</h1>
 
 <div mat-dialog-content>
-  <div ace-editor [(text)]="yaml" theme="xcode" mode="yaml"></div>
+  <lib-monaco-editor
+    [(text)]="yaml"
+    [language]="'yaml'"
+    [readOnly]="false"
+    [width]="700"
+    [height]="350"
+  ></lib-monaco-editor>
 </div>
 
 <div mat-dialog-actions>

diff --git a/...i/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.scss b/...i/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.scss
@@ -1,4 +0,0 @@
-[ace-editor] {
-  height: 350px;
-  width: 700px;
-}

diff --git a/...1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts b/...1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts
@@ -2,8 +2,7 @@ import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
-import { FormModule } from 'kubeflow';
-import { AceEditorModule } from 'ng2-ace-editor';
+import { EditorModule, FormModule } from 'kubeflow';
 
 import { YamlModalComponent } from './yaml-modal.component';
 
@@ -14,7 +13,7 @@ describe('YamlModalComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [CommonModule, MatDialogModule, FormModule, AceEditorModule],
+        imports: [CommonModule, MatDialogModule, FormModule, EditorModule],
         declarations: [YamlModalComponent],
         providers: [
           { provide: MatDialogRef, useValue: {} },

diff --git a/...new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.module.ts b/...new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.module.ts
@@ -2,11 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { YamlModalComponent } from './yaml-modal.component';
 import { MatDialogModule } from '@angular/material/dialog';
-import { FormModule } from 'kubeflow';
-import { AceEditorModule } from 'ng2-ace-editor';
+import { FormModule, EditorModule } from 'kubeflow';
 
 @NgModule({
   declarations: [YamlModalComponent],
-  imports: [CommonModule, MatDialogModule, FormModule, AceEditorModule],
+  imports: [CommonModule, MatDialogModule, FormModule, EditorModule],
 })
 export class YamlModalModule {}
diff --git a/...ew-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html b/...ew-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html
@@ -61,9 +61,11 @@
         ></app-experiment-details-tab>
       </mat-tab>
       <mat-tab label="YAML">
-        <app-experiment-yaml
-          [experimentJson]="experimentDetails"
-        ></app-experiment-yaml>
+        <ng-template matTabContent>
+          <app-experiment-yaml
+            [experimentJson]="experimentDetails"
+          ></app-experiment-yaml>
+        </ng-template>
       </mat-tab>
     </mat-tab-group>
   </div>

diff --git a/...-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.html b/...-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.html
@@ -1,8 +1,6 @@
-<div
-  ace-editor
+<lib-monaco-editor
   [(text)]="yaml"
-  theme="xcode"
-  mode="yaml"
+  [language]="'yaml'"
   [readOnly]="true"
-  [options]="{ maxLines: 1000 }"
-></div>
+  [height]="500"
+></lib-monaco-editor>
diff --git a/...-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.scss b/...-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.scss
@@ -2,7 +2,3 @@
   display: block;
   overflow: auto;
 }
-
-[ace-editor] {
-  width: 100%;
-}
diff --git a/.../v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts b/.../v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts
@@ -1,9 +1,9 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
-import { AceEditorModule } from 'ng2-ace-editor';
 
 import { ExperimentYamlComponent } from './experiment-yaml.component';
+import { EditorModule } from 'kubeflow';
 
 describe('ExperimentYamlComponent', () => {
   let component: ExperimentYamlComponent;
@@ -12,7 +12,7 @@ describe('ExperimentYamlComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [CommonModule, BrowserAnimationsModule, AceEditorModule],
+        imports: [CommonModule, BrowserAnimationsModule, EditorModule],
         declarations: [ExperimentYamlComponent],
       }).compileComponents();
     }),

diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.module.ts
@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ExperimentYamlComponent } from './experiment-yaml.component';
-import { AceEditorModule } from 'ng2-ace-editor';
+import { EditorModule } from 'kubeflow';
 
 @NgModule({
   declarations: [ExperimentYamlComponent],
-  imports: [CommonModule, AceEditorModule],
+  imports: [CommonModule, EditorModule],
   exports: [ExperimentYamlComponent],
 })
 export class ExperimentYamlModule {}