fneat(training): set solution as readonly (#2679)

## Proposed change

If enabled, show terminal but deactivate code edition for exercise
solutions

Set input as signal on training step

## Related issues

<!--
Please make sure to follow the [contribution
guidelines](https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md)
-->

*- No issue associated -*

<!-- * 🐛 Fix #issue -->
<!-- * 🐛 Fix resolves #issue -->
<!-- * 🚀 Feature #issue -->
<!-- * 🚀 Feature resolves #issue -->
<!-- *  Pull Request #issue -->

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

@@ -25,7 +25,7 @@
       </as-split>
     </form>
   </as-split-area>
-  @if (editorMode() === 'interactive') {
+  @if (displayTerminal()) {
     <as-split-area [size]="50">
       <code-editor-control class="d-flex flex-column h-100"></code-editor-control>
     </as-split-area>

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

@@ -153,16 +153,24 @@ export class CodeEditorViewComponent implements OnDestroy {
    * Allow to edit the code in the monaco editor
    */
   public editorMode = input<EditorMode>('readonly');
+
+  /**
+   * Display terminal
+   */
+  public displayTerminal = input<boolean>(true);
+
   /**
    * Project to load in the code editor.
    * It should describe the files to load, the starting file, the folder dedicated to the project as well as the
    * commands to initialize the project
    */
   public project = input.required<TrainingProject>();
+
   /**
    * Service to load files and run commands in the application instance of the webcontainer.
    */
   public readonly webContainerService = inject(WebContainerService);
+
   /**
    * File tree loaded in the project folder within the web container instance.
    */

apps/showcase/src/components/training/training-step/training-step-pres.component.html

@@ -1,19 +1,20 @@
 <div class="h-100">
   <as-split direction="horizontal">
-    @if (instructions) {
-      <as-split-area [size]="project ? 50 : 100">
+    @if (instructions()) {
+      <as-split-area [size]="project() ? 50 : 100">
         <div class="instructions h-100 overflow-auto pe-6">
-          <h2>{{title}}</h2>
-          <markdown clipboard [data]="instructions"></markdown>
+          <h2>{{title()}}</h2>
+          <markdown clipboard [data]="instructions()"></markdown>
         </div>
       </as-split-area>
     }
-    @if (project) {
-      <as-split-area [size]="instructions ? 50 : 100">
+    @if (project()) {
+      <as-split-area [size]="instructions() ? 50 : 100">
         <div class="h-100 overflow-hidden">
           <code-editor-view
-            [project]="project"
-            [editorMode]="editorMode"
+            [project]="project()"
+            [editorMode]="editorMode()"
+            [displayTerminal]="displayTerminal()"
           ></code-editor-view>
         </div>
       </as-split-area>

apps/showcase/src/components/training/training-step/training-step-pres.component.ts

@@ -1,7 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Input,
+  input,
 } from '@angular/core';
 import {
   AngularSplitModule,
@@ -27,17 +27,21 @@ export class TrainingStepPresComponent {
   /**
    * Description of the coding project to load in the code view editor
    */
-  @Input() public project?: TrainingProject;
+  public project = input<TrainingProject>();
   /**
    * Whether to allow the user to modify the project files in the editor
    */
-  @Input() public editorMode?: EditorMode;
+  public editorMode = input<EditorMode>();
   /**
    * Training step title
    */
-  @Input() public title?: string;
+  public title = input<string>();
   /**
    * Training instructions to do the exercise
    */
-  @Input() public instructions?: string;
+  public instructions = input<string>();
+  /**
+   * Display terminal
+   */
+  public displayTerminal = input<boolean>(true);
 }

apps/showcase/src/components/training/training.component.html

@@ -36,6 +36,7 @@ <h1 class="m-0 flex-grow-1">{{title()}}</h1>
     [instructions]="currentStep.dynamicContent.htmlContent()"
     [title]="currentStep.description.stepTitle"
     [project]="showSolution() ? currentStep.dynamicContent.solutionProject() : currentStep.dynamicContent.project()"
-    [editorMode]="currentStep.description.filesConfiguration?.mode">
+    [editorMode]="showSolution() ? 'readonly' : currentStep.description.filesConfiguration?.mode"
+    [displayTerminal]="currentStep.description.filesConfiguration?.mode === 'interactive'">
   </o3r-training-step-pres>
 }

apps/showcase/src/components/training/training.component.ts

@@ -233,12 +233,12 @@ export class TrainingComponent implements OnInit {
       return;
     }
     this.currentStepIndex.set(index);
+    this.showSolution.set(false);
 
     const newHash = currentStepLocationRegExp.test(location.hash)
       ? location.hash.replace(currentStepLocationRegExp, `#${this.currentStepIndex()}`)
       : `${location.hash}#${this.currentStepIndex()}`;
     history.pushState(null, '', newHash);
-    this.showSolution.set(false);
   }
 
   /**