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 <[email protected]>

* Update COMMIT file to a more recent one in Kubeflow

Signed-off-by: Orfeas Kourkakis <[email protected]>

Signed-off-by: Orfeas Kourkakis <[email protected]>

Author: orfeas-k

pkg/new-ui/v1beta1/frontend/COMMIT

@@ -1 +1 @@
-c4ca7a9
+1cca7b81

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,

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

pkg/new-ui/v1beta1/frontend/package-lock.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",

pkg/new-ui/v1beta1/frontend/package.json

@@ -4,5 +4,10 @@
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
+  },
+  "/static": {
+    "target": "http://localhost:4200",
+    "pathRewrite": { "^/static": "" },
+    "secure": false
   }
 }

pkg/new-ui/v1beta1/frontend/proxy.conf.json

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

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.html

@@ -1,4 +0,0 @@
-.ace-editor {
-  width: 375px;
-  height: 300px;
-}

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.scss

@@ -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();

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.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 {}