fix: base code navigation on webcontainer instead of project initial …

…value (#2590) ## Proposed change Project only contains the description of the exercise and does not reflect the trainee changes. The file list should reflect the webcontainer state Fixes also e2e tests and add a prefix for training directories to avoid name conflicts ## Related issues *- No issue associated -*
AmadeusITGroup · Dec 16, 2024 · 846f229 · 846f229
2 parents 74e8403 + 22ed14a
commit 846f229
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 30 deletions.
diff --git a/apps/showcase/schemas/training-program.schema.json b/apps/showcase/schemas/training-program.schema.json
@@ -26,9 +26,10 @@
             "type": "object",
             "description": "Step files configuration",
             "properties": {
-              "name": {
+              "exerciseId": {
                 "type": "string",
-                "description": "Name of directory in which files will be put"
+                "pattern": "^(sdk)-[a-zA-Z0-9-]+",
+                "description": "Unique identifier of the directory in which files will be put"
               },
               "startingFile": {
                 "type": "string",
@@ -98,7 +99,7 @@
             },
             "additionalProperties": false,
             "required": [
-              "name",
+              "exerciseId",
               "startingFile",
               "commands",
               "urls",

diff --git a/apps/showcase/src/assets/trainings/sdk/program.json b/apps/showcase/src/assets/trainings/sdk/program.json
@@ -9,7 +9,7 @@
       "stepTitle": "How to use the Otter SDK?",
       "htmlContentUrl": "./steps/typescript-sdk/instructions.md",
       "filesConfiguration": {
-        "name": "how-to-use-otter-sdk",
+        "exerciseId": "sdk-how-to-use-otter-sdk",
         "startingFile": "apps/tutorial-app/src/app/app.component.ts",
         "urls": [
           {
@@ -46,7 +46,7 @@
       "stepTitle": "Customize your fetch client with plugins",
       "htmlContentUrl": "./steps/plugins/instructions.md",
       "filesConfiguration": {
-        "name": "plugins",
+        "exerciseId": "sdk-plugins",
         "startingFile": "apps/tutorial-app/src/app/app.config.ts",
         "urls": [
           {
@@ -83,7 +83,7 @@
       "stepTitle": "Integrate the API Manager Module",
       "htmlContentUrl": "./steps/api-manager/instructions.md",
       "filesConfiguration": {
-        "name": "api-manager",
+        "exerciseId": "sdk-api-manager",
         "startingFile": "apps/tutorial-app/src/app/app.config.ts",
         "urls": [
           {
@@ -128,7 +128,7 @@
       "stepTitle": "SDK with Dates - How to use",
       "htmlContentUrl": "./steps/date/instructions.md",
       "filesConfiguration": {
-        "name": "utils-date",
+        "exerciseId": "sdk-utils-date",
         "startingFile": "apps/tutorial-app/src/app/app.component.ts",
         "urls": [
           {
@@ -157,7 +157,7 @@
       "stepTitle": "SDK with Dates - Generation",
       "htmlContentUrl": "./steps/date-sdk-generation/instructions.md",
       "filesConfiguration": {
-        "name": "generate-date-sdk",
+        "exerciseId": "sdk-generate-date-sdk",
         "startingFile": "open-api.yaml",
         "urls": [
           {
@@ -183,7 +183,7 @@
       "stepTitle": "SDK with model extension",
       "htmlContentUrl": "./steps/model-extension/instructions.md",
       "filesConfiguration": {
-        "name": "model-extension",
+        "exerciseId": "sdk-model-extension",
         "startingFile": "apps/tutorial-app/src/app/app.config.ts",
         "urls": [
           {

diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html
@@ -1,5 +1,5 @@
 <as-split direction="vertical">
-  <as-split-area [size]="50">
+  <as-split-area [size]="editorMode() === 'interactive' ? 50 : 100">
     <form [formGroup]="form" class="editor h-100">
       <as-split direction="horizontal">
         <as-split-area [size]="25">
@@ -11,7 +11,7 @@
                        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>
+          <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"

diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.spec.ts b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.spec.ts
@@ -16,6 +16,7 @@ describe('ViewComponent', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(CodeEditorViewComponent);
+    fixture.componentRef.setInput('project', { startingFile: 'someFile', files: {}, commands: [], cwd: '' });
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts
@@ -166,6 +166,11 @@ export class CodeEditorViewComponent implements OnDestroy {
     share()
   );
 
+  /**
+   * Signal that reflects the current value of the monaco tree in the project directory
+   */
+  public cwdTreeSignal = toSignal(this.cwdTree$, { initialValue: [] });
+
   /**
    * Form with the selected file and its content which can be edited in the Monaco Editor
    */
@@ -235,11 +240,15 @@ export class CodeEditorViewComponent implements OnDestroy {
       const project = this.project();
       await untracked(async () => {
         if (project.files) {
-          // Remove link between launch project and terminals
-          await this.webContainerService.loadProject(project.files, project.commands, project.cwd);
+          await Promise.all([
+            this.webContainerService.loadProject(project.files, project.commands, project.cwd).then(
+              () => {
+                this.cwd$.next(project?.cwd || '');
+              }
+            ),
+            this.loadNewProject()
+          ]);
         }
-        await this.loadNewProject();
-        this.cwd$.next(project?.cwd || '');
       });
     });
     this.form.controls.code.valueChanges.pipe(
@@ -279,17 +288,15 @@ export class CodeEditorViewComponent implements OnDestroy {
     void this.monacoPromise.then((monaco) => {
       monaco.editor.registerEditorOpener({
         openCodeEditor: (_source: Monaco.editor.ICodeEditor, resource: Monaco.Uri, selectionOrPosition?: Monaco.IRange | Monaco.IPosition) => {
-          if (resource && this.project().files) {
-            const filePath = resource.path.slice(1);
-            // TODO write a proper function to search in the tree
-            const flatFiles = flattenTree(this.project().files);
-            if (flatFiles.some((projectFile) => projectFile.filePath === resource.path)) {
-              this.form.controls.file.setValue(filePath);
-              if (selectionOrPosition) {
-                revealCodeInEditorRequest.next(selectionOrPosition);
-                return true;
-              }
+          const filePath = resource.path.slice(1);
+          const monacoTree = this.cwdTreeSignal();
+          const pathElements = resource.path.split('/').filter((pathElement) => !!pathElement);
+          if (checkIfPathInMonacoTree(monacoTree, pathElements)) {
+            this.form.controls.file.setValue(filePath);
+            if (selectionOrPosition) {
+              revealCodeInEditorRequest.next(selectionOrPosition);
             }
+            return true;
           }
           return false;
         }

diff --git a/apps/showcase/src/components/training/training.component.ts b/apps/showcase/src/components/training/training.component.ts
@@ -60,7 +60,7 @@ interface TrainingStepDescription {
   /** Step files configuration */
   filesConfiguration?: {
     /** Name of directory in which files will be put */
-    name: string;
+    exerciseId: string;
     /** Starting file to be displayed in the project */
     startingFile: string;
     /** Commands to run in the project */
@@ -241,7 +241,7 @@ export class TrainingComponent implements OnInit {
       startingFile: step.description.filesConfiguration!.startingFile || '',
       commands: step.description.filesConfiguration!.commands || [],
       files: filesContent,
-      cwd: step.description.filesConfiguration!.name.toLowerCase().replace(' ', '-') + (solutionProject ? '-solution' : '')
+      cwd: step.description.filesConfiguration!.exerciseId.toLowerCase().replace(' ', '-') + (solutionProject ? '-solution' : '')
     });
   }
 

diff --git a/apps/showcase/src/services/webcontainer/webcontainer.service.ts b/apps/showcase/src/services/webcontainer/webcontainer.service.ts
@@ -12,7 +12,7 @@ import {
   BehaviorSubject,
   distinctUntilChanged,
   map,
-  share,
+  shareReplay,
 } from 'rxjs';
 import {
   convertTreeRec,
@@ -36,7 +36,7 @@ export class WebContainerService {
 
   public monacoTree$ = this.monacoTree.pipe(
     distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
-    share()
+    shareReplay({ bufferSize: 1, refCount: true })
   );
 
   public isReady$ = this.monacoTree$.pipe(

diff --git a/apps/showcase/testing/mocks/webcontainer-api.mock.ts b/apps/showcase/testing/mocks/webcontainer-api.mock.ts
@@ -1,6 +1,14 @@
+export class FileSystem {
+  public readdir = jest.fn(() => Promise.resolve([]));
+  public readFile = jest.fn(() => Promise.resolve());
+  public watch = jest.fn();
+}
+
 export class WebContainerApiMock {
   public static boot = jest.fn(() => Promise.resolve({
-    on: jest.fn(() => jest.fn())
+    on: jest.fn(() => jest.fn()),
+    mount: jest.fn(() => Promise.resolve()),
+    fs: new FileSystem()
   }));
 }