From 3e1545b949ab66256cde817425364f2755934baa Mon Sep 17 00:00:00 2001
From: Florian PAUL <florian.paul@amadeus.com>
Date: Tue, 12 Nov 2024 18:50:06 +0100
Subject: [PATCH] feat(training): resizable areas

---
 apps/showcase/package.json                    |  1 +
 .../code-editor-control.component.html        |  8 +---
 .../code-editor-control.component.scss        |  6 ---
 .../code-editor-control.component.ts          |  5 ---
 .../code-editor-view.component.html           | 41 ++++++++++++-------
 .../code-editor-view.component.scss           |  7 +---
 .../code-editor-view.component.ts             |  4 +-
 .../training-step-pres.component.html         | 37 +++++++++--------
 .../training-step-pres.component.ts           |  3 +-
 .../training/training.component.html          |  5 +--
 .../components/training/training.component.ts |  9 ----
 package.json                                  |  1 +
 yarn.lock                                     | 15 +++++++
 13 files changed, 74 insertions(+), 68 deletions(-)

diff --git a/apps/showcase/package.json b/apps/showcase/package.json
index 9f4262e8bc..7e77b2762f 100644
--- a/apps/showcase/package.json
+++ b/apps/showcase/package.json
@@ -73,6 +73,7 @@
     "@xterm/xterm": "^5.0.0",
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
+    "angular-split": "^18.0.0",
     "bootstrap": "5.3.3",
     "clipboard": "^2.0.11",
     "intl-messageformat": "~10.7.0",
diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html
index c7ee90ab00..1e5280b474 100644
--- a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html
+++ b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html
@@ -27,12 +27,6 @@
         </code-editor-terminal>
       </ng-template>
     </li>
-  <button type="button" class="btn btn-outline-secondary df-btn-icononly align-self-center ms-auto"
-          [class.fa-chevron-down]="!show"
-          [class.fa-chevron-up]="show"
-          (click)="show = !show">
-    <span class="visually-hidden">{{show ? 'Hide' : 'Show'}}</span>
-  </button>
 </ul>
-<div class="h-100 command-panel" [class.d-none]="!show" [ngbNavOutlet]="nav"></div>
+<div class="h-100 command-panel" [ngbNavOutlet]="nav"></div>
 
diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss
index 9fc2ca84a1..cbb01c7072 100644
--- a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss
+++ b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss
@@ -1,10 +1,4 @@
 code-editor-control {
-  transition: min-height 100ms ease;
-
-  &:has(.command-panel.d-none) {
-    min-height: 3rem;
-  }
-
   .tab-content {
     --df-tabs-content-tab-pane-padding: 0;
     overflow: hidden;
diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts
index 6e65584fbb..e2b603938e 100644
--- a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts
+++ b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts
@@ -48,11 +48,6 @@ export class CodeEditorControlComponent implements OnDestroy, AfterViewInit {
    */
   public readonly webContainerService = inject(WebContainerService);
 
-  /**
-   * Whether to show the panels - if set to false, hide all the panels and only display the tab bar
-   */
-  public show = true;
-
   /**
    * Current tab displayed
    */
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
index 7a22f783ad..3660686837 100644
--- 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,19 +1,32 @@
 @if (cwdTree$ | async; as tree) {
   @if (tree.length) {
-    <form [formGroup]="form" class="editor d-flex flex-fill overflow-hidden">
-      <div class="d-flex h-100 w-100 align-items-stretch">
-        <monaco-tree class="overflow-auto w-25" (clickFile)="onClickFile($event)" [tree]="tree" [currentFile]="project?.startingFile" width="fit-content" height="100%"></monaco-tree>
-        <div class="flex-fill h-100 overflow-hidden monaco-editor-wrapper">
-          <ngx-monaco-editor class="h-100 position-relative"
-            [options]="editorOptions$ | async"
-            formControlName="code">
-          </ngx-monaco-editor>
-        </div>
-      </div>
-    </form>
-    @if (editorMode === 'interactive') {
-      <code-editor-control class="d-flex flex-column" [showOutput]="project?.commands.length > 0 && tree.length > 0"></code-editor-control>
-    }
+    <as-split direction="vertical">
+      <as-split-area [size]="50">
+        <form [formGroup]="form" class="editor overflow-hidden h-100">
+            <as-split direction="horizontal">
+              <as-split-area [size]="25">
+                <monaco-tree (clickFile)="onClickFile($event)"
+                             [tree]="tree"
+                             [currentFile]="project?.startingFile"
+                             [width]="'auto'"
+                             [height]="'auto'"
+                             class="w-100"></monaco-tree>
+              </as-split-area>
+              <as-split-area [size]="75">
+                <ngx-monaco-editor class="h-100 position-relative"
+                                   [options]="editorOptions$ | async"
+                                   formControlName="code">
+                </ngx-monaco-editor>
+              </as-split-area>
+            </as-split>
+        </form>
+      </as-split-area>
+      @if (editorMode === 'interactive') {
+        <as-split-area [size]="50">
+          <code-editor-control class="d-flex flex-column h-100" [showOutput]="project?.commands.length > 0 && tree.length > 0"></code-editor-control>
+        </as-split-area>
+      }
+    </as-split>
   }
 }
 @if (!(cwdTree$ | async)?.length) {
diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss
index 6f6f79c7a5..fdd982c30f 100644
--- a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss
+++ b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss
@@ -1,11 +1,12 @@
 monaco-tree {
-  max-width: 250px;
   background: #1d1d1d;
 
   .monaco-tree {
     display: flex;
     flex-direction: column;
     overflow: unset !important;
+    max-width: 100%;
+    min-height: 100%;
   }
 
   monaco-tree-icons {
@@ -23,7 +24,3 @@ ngx-monaco-editor {
     max-height: 100% !important;
   }
 }
-
-code-editor-control {
-  min-height: 50%;
-}
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
index f91be467e1..f8ce748561 100644
--- 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
@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {FileSystemTree} from '@webcontainer/api';
+import {AngularSplitModule} from 'angular-split';
 import {MonacoEditorModule} from 'ngx-monaco-editor-v2';
 import {MonacoTreeElement, NgxMonacoTreeComponent} from 'ngx-monaco-tree';
 import {
@@ -65,7 +66,8 @@ export interface TrainingProject {
     JsonPipe,
     MonacoEditorModule,
     NgxMonacoTreeComponent,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AngularSplitModule
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/components/training/training-step/training-step-pres.component.html b/apps/showcase/src/components/training/training-step/training-step-pres.component.html
index 6d38f98fae..a1a06a1fd6 100644
--- a/apps/showcase/src/components/training/training-step/training-step-pres.component.html
+++ b/apps/showcase/src/components/training/training-step/training-step-pres.component.html
@@ -1,17 +1,22 @@
-<div class="d-flex h-100 gap-5">
-  @if (instructions) {
-    <div class="instructions h-100 col overflow-auto">
-      <h2>{{title}}</h2>
-      <markdown clipboard [data]="instructions"></markdown>
-    </div>
-  }
-  @if (project) {
-    <div class="d-flex h-100 overflow-hidden col">
-      <code-editor-view
-        class="d-flex flex-column justify-content-stretch w-100 flex-fill"
-        [project]="project"
-        [editorMode]="editorMode"
-      ></code-editor-view>
-    </div>
-  }
+<div class="h-100">
+  <as-split direction="horizontal">
+    @if (instructions) {
+      <as-split-area [size]="50">
+        <div class="instructions h-100 overflow-auto">
+          <h2>{{title}}</h2>
+          <markdown clipboard [data]="instructions"></markdown>
+        </div>
+      </as-split-area>
+    }
+    @if (project) {
+      <as-split-area [size]="50">
+        <div class="h-100 overflow-hidden">
+          <code-editor-view
+            [project]="project"
+            [editorMode]="editorMode"
+          ></code-editor-view>
+        </div>
+      </as-split-area>
+    }
+  </as-split>
 </div>
diff --git a/apps/showcase/src/components/training/training-step/training-step-pres.component.ts b/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
index 39678d0e36..6d163d88bf 100644
--- a/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
+++ b/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   Input
 } from '@angular/core';
+import {AngularSplitModule} from 'angular-split';
 import {MarkdownModule, provideMarkdown} from 'ngx-markdown';
 import {CodeEditorViewComponent, EditorMode, TrainingProject} from '../code-editor-view';
 
@@ -10,7 +11,7 @@ import {CodeEditorViewComponent, EditorMode, TrainingProject} from '../code-edit
   selector: 'o3r-training-step-pres',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CodeEditorViewComponent, MarkdownModule],
+  imports: [AngularSplitModule, CodeEditorViewComponent, MarkdownModule],
   providers: [provideMarkdown()],
   templateUrl: './training-step-pres.component.html',
   styleUrl: './training-step-pres.component.scss'
diff --git a/apps/showcase/src/components/training/training.component.html b/apps/showcase/src/components/training/training.component.html
index 585ad4a5b8..4e950f8c64 100644
--- a/apps/showcase/src/components/training/training.component.html
+++ b/apps/showcase/src/components/training/training.component.html
@@ -3,9 +3,6 @@
     <h1 class="m-0 flex-grow-1">{{title()}}</h1>
     <div class="d-flex gap-3">
       @if (currentStep.dynamicContent.project() || currentStep.dynamicContent.solutionProject()) {
-        <button type="button" class="btn btn-outline-primary" (click)="toggleDisplayInstructions()">
-          {{showInstructions() ? 'Hide instructions' : 'Show instructions'}}
-        </button>
         <button type="button" class="btn btn-outline-danger"
                 (click)="toggleDisplaySolution()"
                 [disabled]="!showSolution() && !currentStep.dynamicContent.solutionProject() || showSolution() && !currentStep.dynamicContent.project()"
@@ -36,7 +33,7 @@ <h1 class="m-0 flex-grow-1">{{title()}}</h1>
   <o3r-training-step-pres
     class="flex-fill overflow-hidden mb-5"
     [class.constrained]="!!(currentStep.dynamicContent.solutionProject() || currentStep.dynamicContent.project())"
-    [instructions]="showInstructions() ? currentStep.dynamicContent.htmlContent() : ''"
+    [instructions]="currentStep.dynamicContent.htmlContent()"
     [title]="currentStep.description.title"
     [project]="showSolution() ? currentStep.dynamicContent.solutionProject() : currentStep.dynamicContent.project()"
     [editorMode]="currentStep.description.filesConfiguration?.mode">
diff --git a/apps/showcase/src/components/training/training.component.ts b/apps/showcase/src/components/training/training.component.ts
index 3a217d7150..c40418a103 100644
--- a/apps/showcase/src/components/training/training.component.ts
+++ b/apps/showcase/src/components/training/training.component.ts
@@ -95,8 +95,6 @@ const currentStepLocationRegExp = new RegExp(/#([0-9]+)$/);
 export class TrainingComponent implements OnInit {
   /** Index of the training step to display */
   public currentStepIndex = signal(0);
-  /** Display instructions */
-  public showInstructions = signal(true);
   /** Display exercise solution */
   public showSolution = signal(false);
   /** Training steps */
@@ -251,13 +249,6 @@ export class TrainingComponent implements OnInit {
     this.showSolution.set(false);
   }
 
-  /**
-   * Update the display of instructions and the corresponding button label
-   */
-  public toggleDisplayInstructions() {
-    this.showInstructions.set(!this.showInstructions());
-  }
-
   /**
    * Update the display of the exercise solution and the corresponding button label
    */
diff --git a/package.json b/package.json
index 9b42ac4e5f..090ed132cd 100644
--- a/package.json
+++ b/package.json
@@ -221,6 +221,7 @@
     "@yarnpkg/sdks": "^3.2.0",
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
+    "angular-split": "^18.0.0",
     "babel-loader": "^9.0.0",
     "bootstrap": "5.3.3",
     "bootstrap-icons": "^1.11.3",
diff --git a/yarn.lock b/yarn.lock
index ddf67e055e..a470b795b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8985,6 +8985,7 @@ __metadata:
     "@yarnpkg/sdks": "npm:^3.2.0"
     ag-grid-angular: "npm:~32.3.0"
     ag-grid-community: "npm:~32.3.0"
+    angular-split: "npm:^18.0.0"
     babel-loader: "npm:^9.0.0"
     bootstrap: "npm:5.3.3"
     bootstrap-icons: "npm:^1.11.3"
@@ -9922,6 +9923,7 @@ __metadata:
     "@xterm/xterm": "npm:^5.0.0"
     ag-grid-angular: "npm:~32.3.0"
     ag-grid-community: "npm:~32.3.0"
+    angular-split: "npm:^18.0.0"
     bootstrap: "npm:5.3.3"
     clipboard: "npm:^2.0.11"
     concurrently: "npm:^8.0.0"
@@ -15968,6 +15970,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"angular-split@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "angular-split@npm:18.0.0"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@angular/common": ">=18.0.0"
+    "@angular/core": ">=18.0.0"
+    rxjs: ">=7.0.0"
+  checksum: 10/acafe910ff0ecf416dbeaf02f7b7c0668320a86683905fe631d3031351a0950723c3336b150a64ca3ee7404ecf76244db5a9d4db7f1c0e58bdf0fca6cf46ac84
+  languageName: node
+  linkType: hard
+
 "ansi-colors@npm:4.1.3, ansi-colors@npm:^4.1.1, ansi-colors@npm:^4.1.3":
   version: 4.1.3
   resolution: "ansi-colors@npm:4.1.3"