feat(training): persistence of code modifications

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html

@@ -1,6 +1,6 @@
 <as-split direction="vertical">
   <as-split-area [size]="editorMode() === 'interactive' ? 50 : 100">
-    <form [formGroup]="form" class="editor h-100">
+    <form [formGroup]="form" class="editor h-100 position-relative">
       <as-split direction="horizontal">
         <as-split-area [size]="25">
           <monaco-tree (clickFile)="onClickFile($event)"
@@ -11,7 +11,6 @@
                        class="w-100 editor-view"></monaco-tree>
         </as-split-area>
         <as-split-area [size]="75" class="editor-view">
-          <div class="monaco-editor monaco-overflow-widgets position-absolute" #monacoOverflowWidgets></div>
           @let editorOptions = editorOptions$ | async;
           @if (editorOptions) {
             <ngx-monaco-editor class="h-100 position-relative"

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss

@@ -27,6 +27,10 @@ ngx-monaco-editor {
   background: #1d1d1d;
 }
 
-.monaco-overflow-widgets {
-  z-index: var(--o3r-header-zindex);
+.save-code-dialog-backdrop {
+  position: absolute;
+}
+
+.save-code-dialog-window {
+  position: absolute;
 }

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts

@@ -6,12 +6,10 @@ import {
   Component,
   computed,
   effect,
-  ElementRef,
   inject,
   input,
   OnDestroy,
   untracked,
-  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import {
@@ -25,6 +23,9 @@ import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms';
+import {
+  DfModalService,
+} from '@design-factory/design-factory';
 import {
   LoggerService,
 } from '@o3r/logger';
@@ -44,16 +45,19 @@ import {
 } from 'ngx-monaco-tree';
 import {
   BehaviorSubject,
+  combineLatest,
   combineLatestWith,
   debounceTime,
   distinctUntilChanged,
   filter,
   firstValueFrom,
   from,
   map,
+  merge,
   Observable,
   of,
   share,
+  shareReplay,
   skip,
   startWith,
   Subject,
@@ -69,6 +73,9 @@ import {
 import {
   CodeEditorControlComponent,
 } from '../code-editor-control';
+import {
+  SaveCodeDialogComponent,
+} from '../save-code-dialog';
 
 declare global {
   interface Window {
@@ -134,9 +141,6 @@ export class CodeEditorViewComponent implements OnDestroy {
    */
   private readonly loggerService = inject(LoggerService);
 
-  @ViewChild('monacoOverflowWidgets')
-  private readonly monacoOverflowWidgets!: ElementRef;
-
   /**
    * Allow to edit the code in the monaco editor
    */
@@ -163,7 +167,7 @@ export class CodeEditorViewComponent implements OnDestroy {
         : of([])
     ),
     filter((tree) => tree.length > 0),
-    share()
+    shareReplay({ bufferSize: 1, refCount: true })
   );
 
   /**
@@ -205,16 +209,23 @@ export class CodeEditorViewComponent implements OnDestroy {
       readOnly: (this.editorMode() === 'readonly'),
       automaticLayout: true,
       scrollBeyondLastLine: false,
-      overflowWidgetsDomNode: this.monacoOverflowWidgets.nativeElement,
+      fixedOverflowWidgets: true,
       model: this.model()
     }))
   );
 
-  private readonly fileContentLoaded$ = this.form.controls.file.valueChanges.pipe(
+  private readonly modalService = inject(DfModalService);
+  private readonly forceReload = new Subject<void>();
+  private readonly forceSave = new Subject<void>();
+
+  private readonly fileContentLoaded$ = combineLatest([
+    this.form.controls.file.valueChanges,
+    this.forceReload.pipe(startWith(undefined))
+  ]).pipe(
     takeUntilDestroyed(),
     combineLatestWith(this.cwdTree$),
-    filter(([path, monacoTree]) => !!path && checkIfPathInMonacoTree(monacoTree, path.split('/'))),
-    switchMap(([path]) => from(this.webContainerService.readFile(`${this.project().cwd}/${path}`).catch(() => ''))),
+    filter(([[path], monacoTree]) => !!path && checkIfPathInMonacoTree(monacoTree, path.split('/'))),
+    switchMap(([[path]]) => from(this.webContainerService.readFile(`${this.project().cwd}/${path}`).catch(() => ''))),
     share()
   );
 
@@ -251,22 +262,39 @@ export class CodeEditorViewComponent implements OnDestroy {
         }
       });
     });
-    this.form.controls.code.valueChanges.pipe(
-      distinctUntilChanged(),
-      skip(1),
-      debounceTime(300),
+    this.forceReload.subscribe(async () => {
+      await this.cleanAllModelsFromMonaco();
+      await this.loadAllProjectFilesToMonaco();
+    });
+    merge(
+      this.forceSave.pipe(map(() => this.form.value.code)),
+      this.form.controls.code.valueChanges.pipe(
+        distinctUntilChanged(),
+        skip(1),
+        debounceTime(1000)
+      )
+    ).pipe(
       filter((text): text is string => !!text),
       takeUntilDestroyed()
     ).subscribe((text: string) => {
       if (!this.project) {
         this.loggerService.error('No project found');
         return;
       }
+      if (text !== this.fileContent()) {
+        const { cwd } = this.project();
+        localStorage.setItem(cwd, JSON.stringify({
+          ...JSON.parse(localStorage.getItem(cwd) || '{}'),
+          [this.form.controls.file.value!]: text
+        }));
+      }
       const path = `${this.project().cwd}/${this.form.controls.file.value}`;
       this.loggerService.log('Writing file', path);
       void this.webContainerService.writeFile(path, text);
     });
-    this.fileContentLoaded$.subscribe((content) => this.form.controls.code.setValue(content));
+    this.fileContentLoaded$.subscribe((content) => {
+      this.form.controls.code.setValue(content);
+    });
 
     // Reload definition types when finishing install
     this.webContainerService.runner.dependenciesLoaded$.pipe(
@@ -316,10 +344,39 @@ export class CodeEditorViewComponent implements OnDestroy {
         }
       });
     });
+    void this.retrieveSaveChanges();
+  }
+
+  private async retrieveSaveChanges() {
+    await firstValueFrom(this.cwdTree$);
+    const { cwd } = this.project();
+    const savedState = localStorage.getItem(cwd);
+    if (savedState) {
+      const modal = this.modalService.open(
+        SaveCodeDialogComponent,
+        {
+          backdrop: 'static',
+          container: '.editor',
+          backdropClass: 'save-code-dialog-backdrop',
+          windowClass: 'save-code-dialog-window'
+        }
+      );
+      void modal.result.then(async (positiveReply) => {
+        if (positiveReply) {
+          const state = JSON.parse(savedState);
+          await Promise.all(
+            Object.entries<string>(state).map(([path, text]) => this.webContainerService.writeFile(`${cwd}/${path}`, text))
+          );
+          this.forceReload.next();
+        } else {
+          localStorage.removeItem(cwd);
+        }
+      });
+    }
   }
 
   /**
-   * Unload ahh the files from the global monaco editor
+   * Unload all the files from the global monaco editor
    */
   private async cleanAllModelsFromMonaco() {
     const monaco = await this.monacoPromise;
@@ -345,15 +402,9 @@ export class CodeEditorViewComponent implements OnDestroy {
   /**
    * Load a new project in global monaco editor and update local form accordingly
    */
-  private async loadNewProject() {
-    if (this.project()?.startingFile) {
-      this.form.controls.file.setValue(this.project().startingFile);
-    } else {
-      this.form.controls.file.setValue('');
-      this.form.controls.code.setValue('');
-    }
-    await this.cleanAllModelsFromMonaco();
-    await this.loadAllProjectFilesToMonaco();
+  private loadNewProject() {
+    this.form.controls.file.setValue(this.project().startingFile);
+    this.forceReload.next();
   }
 
   /**
@@ -374,6 +425,7 @@ export class CodeEditorViewComponent implements OnDestroy {
   public onEditorKeyDown(event: KeyboardEvent) {
     const ctrlKey = /mac/i.test(navigator.userAgent) ? event.metaKey : event.ctrlKey;
     if (ctrlKey && event.key.toLowerCase() === 's') {
+      this.forceSave.next();
       event.stopPropagation();
       event.preventDefault();
     }
@@ -393,6 +445,9 @@ export class CodeEditorViewComponent implements OnDestroy {
    * @inheritDoc
    */
   public ngOnDestroy() {
+    this.forceReload.complete();
+    this.forceSave.complete();
+    this.newMonacoEditorCreated.complete();
     this.webContainerService.runner.killContainer();
   }
 }

apps/showcase/src/components/training/save-code-dialog/index.ts

@@ -0,0 +1 @@
+export * from './save-code-dialog.component';

apps/showcase/src/components/training/save-code-dialog/save-code-dialog.component.spec.ts

@@ -0,0 +1,26 @@
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import {
+  SaveCodeDialogComponent,
+} from './save-code-dialog.component';
+
+describe('ViewComponent', () => {
+  let component: SaveCodeDialogComponent;
+  let fixture: ComponentFixture<SaveCodeDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SaveCodeDialogComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SaveCodeDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/showcase/src/components/training/save-code-dialog/save-code-dialog.component.ts

@@ -0,0 +1,19 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+} from '@angular/core';
+import {
+  NgbActiveModal,
+} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'code-editor-terminal',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [],
+  templateUrl: './save-code-dialog.template.html'
+})
+export class SaveCodeDialogComponent {
+  public readonly activeModal = inject(NgbActiveModal);
+}

apps/showcase/src/components/training/save-code-dialog/save-code-dialog.template.html

@@ -0,0 +1,10 @@
+<div class="modal-header">
+  <h2 class="modal-title">Code modifications detected</h2>
+</div>
+<div class="modal-body">
+  <p>Do you want to resume your training or discard your changes?</p>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-danger me-5" (click)="activeModal.close(false)">Discard</button>
+  <button type="button" class="btn btn-primary" ngbAutofocus (click)="activeModal.close(true)">Resume</button>
+</div>