docs(docs-infra): allow file renaming in code editor (angular#54989)

Any filename but the main.ts is now editable.

PR Close angular#54989

Author: mikalcallahan

adev/src/app/editor/code-editor/code-editor.component.html

@@ -10,7 +10,29 @@
       @for (file of files(); track file) {
       <mat-tab #tab>
         <ng-template mat-tab-label>
+          @if (tab.isActive && isRenamingFile()) {
+            <form
+              (submit)="renameFile($event, file.filename)"
+              (docsClickOutside)="closeRenameFile()">
+              <input
+                name="rename-file"
+                class="adev-rename-file-input"
+                #renameFileInput
+                (keydown)="$event.stopPropagation()"
+              />
+            </form>
+          } @else {
           {{ file.filename.replace('src/', '') }}
+          }
+          @if (tab.isActive && canRenameFile(file.filename)) {
+            <button
+              class="docs-rename-file"
+              aria-label="rename file"
+              (click)="onRenameButtonClick()"
+            >
+              <docs-icon>edit</docs-icon>
+            </button>
+            }
           @if (tab.isActive && canDeleteFile(file.filename)) {
           <button
             class="docs-delete-file"

adev/src/app/editor/code-editor/code-editor.component.scss

@@ -79,7 +79,8 @@
 }
 
 .adev-add-file,
-.docs-delete-file {
+.docs-delete-file,
+.docs-rename-file {
   docs-icon {
     color: var(--gray-400);
     transition: color 0.3s ease;
@@ -92,7 +93,8 @@
   }
 }
 
-.docs-delete-file {
+.docs-delete-file,
+.docs-rename-file {
   padding-inline-start: 0.1rem;
   padding-inline-end: 0;
   margin-block-start: 0.2rem;
@@ -101,7 +103,8 @@
   }
 }
 
-.adev-new-file-input {
+.adev-new-file-input,
+.adev-rename-file-input {
   color: var(--primary-contrast);
   border: none;
   border-radius: 0;

adev/src/app/editor/code-editor/code-editor.component.spec.ts

@@ -107,7 +107,7 @@ describe('CodeEditor', () => {
     const tabs = await matTabGroup.getTabs();
     const expectedLabels = files.map((file, index) => {
       const label = file.filename.replace('src/', '');
-      if (index === 0) return `${label} delete`;
+      if (index === 0) return `${label} editdelete`;
       return label;
     });
 

adev/src/app/editor/code-editor/code-editor.component.ts

@@ -28,17 +28,21 @@ import {EmbeddedTutorialManager} from '../embedded-tutorial-manager.service';
 import {CodeMirrorEditor} from './code-mirror-editor.service';
 import {DiagnosticWithLocation, DiagnosticsState} from './services/diagnostics-state.service';
 import {DownloadManager} from '../download-manager.service';
-import {IconComponent} from '@angular/docs';
+import {ClickOutside, IconComponent} from '@angular/docs';
 
-export const REQUIRED_FILES = new Set(['src/main.ts', 'src/index.html']);
+export const REQUIRED_FILES = new Set([
+  'src/main.ts',
+  'src/index.html',
+  'src/app/app.component.ts',
+]);
 
 @Component({
   selector: 'docs-tutorial-code-editor',
   standalone: true,
   templateUrl: './code-editor.component.html',
   styleUrls: ['./code-editor.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, NgFor, MatTabsModule, IconComponent],
+  imports: [NgIf, NgFor, MatTabsModule, IconComponent, ClickOutside],
 })
 export class CodeEditor implements AfterViewInit, OnDestroy {
   @ViewChild('codeEditorWrapper') private codeEditorWrapperRef!: ElementRef<HTMLDivElement>;
@@ -54,6 +58,16 @@ export class CodeEditor implements AfterViewInit, OnDestroy {
     }
   }
 
+  private renameFileInputRef?: ElementRef<HTMLInputElement>;
+  @ViewChild('renameFileInput') protected set setRenameFileInputRef(
+    element: ElementRef<HTMLInputElement>,
+  ) {
+    if (element) {
+      element.nativeElement.focus();
+      this.renameFileInputRef = element;
+    }
+  }
+
   private readonly destroyRef = inject(DestroyRef);
 
   private readonly codeMirrorEditor = inject(CodeMirrorEditor);
@@ -82,6 +96,7 @@ export class CodeEditor implements AfterViewInit, OnDestroy {
   readonly errors = signal<DiagnosticWithLocation[]>([]);
   readonly files = this.codeMirrorEditor.openFiles;
   readonly isCreatingFile = signal<boolean>(false);
+  readonly isRenamingFile = signal<boolean>(false);
 
   ngAfterViewInit() {
     this.codeMirrorEditor.init(this.codeEditorWrapperRef.nativeElement);
@@ -104,6 +119,12 @@ export class CodeEditor implements AfterViewInit, OnDestroy {
     this.displayErrorsBox.set(false);
   }
 
+  closeRenameFile(): void {
+    this.isRenamingFile.set(false);
+  }
+
+  canRenameFile = (filename: string) => this.canDeleteFile(filename);
+
   canDeleteFile(filename: string) {
     return !REQUIRED_FILES.has(filename);
   }
@@ -118,6 +139,37 @@ export class CodeEditor implements AfterViewInit, OnDestroy {
     this.matTabGroup.selectedIndex = this.files().length;
   }
 
+  onRenameButtonClick() {
+    this.isRenamingFile.set(true);
+  }
+
+  async renameFile(event: SubmitEvent, oldPath: string) {
+    if (!this.renameFileInputRef) return;
+
+    event.preventDefault();
+
+    const renameFileInputValue = this.renameFileInputRef.nativeElement.value;
+
+    if (renameFileInputValue) {
+      if (renameFileInputValue.includes('..')) {
+        alert('File name can not contain ".."');
+        return;
+      }
+
+      // src is hidden from users, here we manually add it to the new filename
+      const newFile = 'src/' + renameFileInputValue;
+
+      if (this.files().find(({filename}) => filename.includes(newFile))) {
+        alert('File name already exists');
+        return;
+      }
+
+      await this.codeMirrorEditor.renameFile(oldPath, newFile);
+    }
+
+    this.isRenamingFile.set(false);
+  }
+
   async createFile(event: SubmitEvent) {
     if (!this.createFileInputRef) return;
 

adev/src/app/editor/code-editor/code-mirror-editor.service.ts

@@ -340,6 +340,34 @@ export class CodeMirrorEditor {
     this.changeCurrentFile(filename);
   }
 
+  async renameFile(oldPath: string, newPath: string) {
+    const content = await this.nodeRuntimeSandbox.readFile(oldPath).catch((error) => {
+      // empty content if file does not exist
+      if (error.message.includes('ENOENT')) return '';
+      else throw error;
+    });
+
+    await this.nodeRuntimeSandbox.renameFile(oldPath, newPath).catch((error) => {
+      throw error;
+    });
+
+    this.embeddedTutorialManager.tutorialFiles.update((files) => {
+      delete files[oldPath];
+      files[newPath] = content;
+      return files;
+    });
+
+    this.embeddedTutorialManager.openFiles.update((files) => [
+      ...files.filter((file) => file !== oldPath),
+      newPath,
+    ]);
+
+    this.setProjectFiles();
+    this.updateVfsEnv();
+    this.saveLibrariesTypes();
+    this.changeCurrentFile(newPath);
+  }
+
   async deleteFile(deletedFile: string): Promise<void> {
     await this.nodeRuntimeSandbox.deleteFile(deletedFile);
 

adev/src/app/editor/node-runtime-sandbox.service.spec.ts

@@ -177,6 +177,20 @@ describe('NodeRuntimeSandbox', () => {
     expect(writeFileSpy).toHaveBeenCalledOnceWith(path, content);
   });
 
+  it('should call renameFile with proper parameters', async () => {
+    setValuesToInitializeProject();
+
+    const fakeWebContainer = new FakeWebContainer();
+    service['webContainerPromise'] = Promise.resolve(fakeWebContainer);
+    const renameFileSpy = spyOn(fakeWebContainer.fs, 'rename');
+
+    const oldPath = 'oldPath';
+    const newPath = 'newPath';
+
+    await service.renameFile(oldPath, newPath);
+    expect(renameFileSpy).toHaveBeenCalledOnceWith(oldPath, newPath);
+  });
+
   it('should initialize the Angular CLI based on the tutorial config', async () => {
     setValuesToInitializeAngularCLI();
 

adev/src/app/editor/node-runtime-sandbox.service.ts

@@ -270,6 +270,16 @@ export class NodeRuntimeSandbox {
     }
   }
 
+  async renameFile(oldPath: string, newPath: string): Promise<void> {
+    const webContainer = await this.webContainerPromise!;
+
+    try {
+      await webContainer.fs.rename(oldPath, newPath);
+    } catch (err: any) {
+      throw err;
+    }
+  }
+
   async readFile(filePath: string): Promise<string> {
     const webContainer = await this.webContainerPromise!;