jwa(front): Use new Editor component (kubeflow/kubeflow#6775)

Import new Editor component from Kubeflow Common Library and replace all instances of previous Ace Editor. Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>
Adembc · Jun 23, 2024 · 4e3bbe9 · 4e3bbe9
1 parent e9bb0b9
commit 4e3bbe9
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 51 deletions.
diff --git a/notebooks/crud-web-apps/jupyter/frontend/angular.json b/notebooks/crud-web-apps/jupyter/frontend/angular.json
@@ -34,16 +34,14 @@
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "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"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/monaco-editor",
+                "output": "assets/monaco-editor"
+              }
             ],
+            "styles": ["src/styles.scss"],
             "crossOrigin": "use-credentials",
             "vendorChunk": true,
             "extractLicenses": false,

diff --git a/notebooks/crud-web-apps/jupyter/frontend/package-lock.json b/notebooks/crud-web-apps/jupyter/frontend/package-lock.json
diff --git a/notebooks/crud-web-apps/jupyter/frontend/package.json b/notebooks/crud-web-apps/jupyter/frontend/package.json
@@ -44,7 +44,7 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.11",
     "material-icons": "^0.7.3",
-    "ng2-ace-editor": "^0.3.9",
+    "monaco-editor": "^0.33.0",
     "raw-loader": "^4.0.2",
     "rxjs": "~6.6.7",
     "tslib": "^2.0.0",

diff --git a/...r/frontend/src/app/pages/form/form-default/volume/existing/existing-volume.component.html b/...r/frontend/src/app/pages/form/form-default/volume/existing/existing-volume.component.html
@@ -32,6 +32,13 @@
   >
   <ng-container i18n> for the supported volumes and their specs</ng-container>
 
-  <div ace-editor mode="yaml" theme="xcode" [(text)]="yaml"></div>
+  <lib-monaco-editor
+    [(text)]="yaml"
+    language="yaml"
+    [readOnly]="false"
+    [height]="250"
+    class="editor"
+  ></lib-monaco-editor>
+
   <mat-error *ngIf="errorParsingYaml">{{ errorParsingYaml }}</mat-error>
 </ng-template>
diff --git a/...r/frontend/src/app/pages/form/form-default/volume/existing/existing-volume.component.scss b/...r/frontend/src/app/pages/form/form-default/volume/existing/existing-volume.component.scss
@@ -2,9 +2,7 @@
   display: block;
 }
 
-[ace-editor] {
-  width: auto;
-  height: 250px;
+.editor {
   margin-top: 0.5rem;
   margin-bottom: 1rem;
 }

diff --git a/...upyter/frontend/src/app/pages/form/form-default/volume/existing/existing-volume.module.ts b/...upyter/frontend/src/app/pages/form/form-default/volume/existing/existing-volume.module.ts
@@ -8,7 +8,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 
 import { ExistingPvcModule } from './pvc/pvc.module';
-import { AceEditorModule } from 'ng2-ace-editor';
+import { EditorModule } from 'kubeflow';
 
 @NgModule({
   declarations: [ExistingVolumeComponent],
@@ -19,7 +19,7 @@ import { AceEditorModule } from 'ng2-ace-editor';
     MatInputModule,
     MatSelectModule,
     ExistingPvcModule,
-    AceEditorModule,
+    EditorModule,
   ],
   exports: [ExistingVolumeComponent],
 })

diff --git a/...d-web-apps/jupyter/frontend/src/app/pages/form/form-default/volume/new/new.component.html b/...d-web-apps/jupyter/frontend/src/app/pages/form/form-default/volume/new/new.component.html
@@ -41,7 +41,13 @@
     >
     <ng-container i18n> for the supported volumes and their specs</ng-container>
 
-    <div ace-editor mode="yaml" theme="xcode" [(text)]="yaml"></div>
+    <lib-monaco-editor
+      [(text)]="yaml"
+      language="yaml"
+      [readOnly]="false"
+      [height]="250"
+      class="editor"
+    ></lib-monaco-editor>
 
     <mat-error *ngIf="errorParsingYaml">{{ errorParsingYaml }}</mat-error>
   </ng-container>

diff --git a/...d-web-apps/jupyter/frontend/src/app/pages/form/form-default/volume/new/new.component.scss b/...d-web-apps/jupyter/frontend/src/app/pages/form/form-default/volume/new/new.component.scss
@@ -2,9 +2,7 @@
   display: block;
 }
 
-[ace-editor] {
-  width: auto;
-  height: 250px;
+.editor {
   margin-top: 0.5rem;
   margin-bottom: 1rem;
 }

diff --git a/...s/crud-web-apps/jupyter/frontend/src/app/pages/form/form-default/volume/new/new.module.ts b/...s/crud-web-apps/jupyter/frontend/src/app/pages/form/form-default/volume/new/new.module.ts
@@ -5,12 +5,12 @@ import { VolumeNameModule } from './name/name.module';
 import { StorageClassModule } from './storage-class/storage-class.module';
 import { VolumeAccessModesModule } from './access-modes/access-modes.module';
 import { VolumeSizeModule } from './size/size.module';
-import { AceEditorModule } from 'ng2-ace-editor';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { RokUrlModule } from './rok-url/rok-url.module';
+import { EditorModule } from 'kubeflow';
 
 @NgModule({
   declarations: [NewVolumeComponent],
@@ -20,12 +20,12 @@ import { RokUrlModule } from './rok-url/rok-url.module';
     StorageClassModule,
     VolumeAccessModesModule,
     VolumeSizeModule,
-    AceEditorModule,
     MatInputModule,
     MatSelectModule,
     ReactiveFormsModule,
     MatFormFieldModule,
     RokUrlModule,
+    EditorModule,
   ],
   exports: [NewVolumeComponent],
 })