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!;