feat: 🎸 edit project configuration

apps/cli-daemon/src/app/workspace/dto/schema.dto.ts

@@ -0,0 +1,13 @@
+import { JSONSchema7 } from 'json-schema';
+
+export class SchemaDto implements JSONSchema7 {
+  properties: JSONSchema7['properties'];
+  title: JSONSchema7['title'];
+  description: JSONSchema7['title'];
+
+  constructor({ title, properties, description }: JSONSchema7) {
+    this.properties = properties;
+    this.title = title;
+    this.description = description;
+  }
+}

apps/cli-daemon/src/app/workspace/entities/workspace-configuration.ts

@@ -0,0 +1,12 @@
+export interface ExtractValuePaths {
+  path: string;
+  overridePath?: string;
+}
+export const configurationsPaths: ExtractValuePaths[] = [
+  { path: 'definitions.project.properties.prefix', overridePath: 'prefix' },
+  { path: 'definitions.project.properties.root', overridePath: 'root' },
+  {
+    path: 'definitions.project.properties.sourceRoot',
+    overridePath: 'sourceRoot',
+  },
+];

apps/cli-daemon/src/app/workspace/workspace.controller.ts

@@ -9,6 +9,7 @@ import {
   Patch,
   Post,
 } from '@nestjs/common';
+import { JSONSchema7 } from 'json-schema';
 
 import { ExecResult } from '../generators/dto';
 import { GeneratorsService } from '../generators/generators.service';
@@ -60,6 +61,11 @@ export class WorkspaceController {
     return this.workspaceService.readWorkspaceProjectNames();
   }
 
+  @Get('workspace-configuration')
+  async getWorkspaceConfiguration(): Promise<JSONSchema7> {
+    return this.workspaceService.getWorkspaceConfiguration();
+  }
+
   @Get('project/:projectName')
   async getProject(
     @Param('projectName') projectName: string

apps/cli-daemon/src/app/workspace/workspace.service.ts

@@ -15,10 +15,14 @@ import {
   Logger,
   NotFoundException,
 } from '@nestjs/common';
+import { JSONSchema7 } from 'json-schema';
+import { Draft07 } from 'json-schema-library';
+import * as angularSchema from 'node_modules/@angular/cli/lib/config/schema.json';
 
 import { SessionService } from '../session/session.service';
 
 import { ProjectDto, UpdateProjectDto } from './dto';
+import { SchemaDto } from './dto/schema.dto';
 import {
   ANGULAR_WORKSPACE_NOT_FOUND_EXCEPTION,
   BAD_PATH_EXCEPTION,
@@ -157,4 +161,18 @@ export class WorkspaceService {
         return new InternalServerErrorException(err);
     }
   }
+
+  getWorkspaceConfiguration(): Partial<JSONSchema7> {
+    const jsonSchema = new Draft07(angularSchema);
+
+    const { root, prefix, sourceRoot } =
+      jsonSchema.getSchema()['definitions']['project']['properties'];
+    const properties = new Draft07({ root, prefix, sourceRoot }).getSchema();
+
+    return new SchemaDto({
+      title: 'Angular CLI Workspace Configuration',
+      description: 'Browser target options',
+      properties: properties,
+    });
+  }
 }

apps/cli-daemon/tsconfig.json

@@ -18,6 +18,7 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
   }
 }

apps/cli-gui/src/app/workspace-settings/workspace-settings.component.ts

@@ -1,8 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
-import { WorkspaceSettingsService } from './workspace-settings.service';
-
 @Component({
   selector: 'cli-workspace-settings',
   standalone: true,
@@ -11,10 +9,4 @@ import { WorkspaceSettingsService } from './workspace-settings.service';
   styleUrls: ['./workspace-settings.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class WorkspaceSettingsComponent {
-  angularJson$ = this.workspaceSettingsService.readWorkspaceProjectNames();
-
-  constructor(
-    private readonly workspaceSettingsService: WorkspaceSettingsService
-  ) {}
-}
+export class WorkspaceSettingsComponent {}

libs/configuration/src/lib/configuration/configuration.component.html

@@ -1 +1,12 @@
-<p>configuration works!</p>
+<h1>Edit project configuration</h1>
+
+<ng-container *ngIf="formly$ | async as formly">
+  <form [formGroup]="form" (ngSubmit)="onSubmit()">
+    <formly-form
+      [model]="formly.formData"
+      [fields]="formly.formFields"
+      [form]="form"
+    ></formly-form>
+    <button mat-button type="submit">Submit</button>
+  </form>
+</ng-container>

libs/configuration/src/lib/configuration/configuration.component.spec.ts

@@ -1,22 +1,58 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import {
+  createWorkspaceSettingsServiceMockk,
+  workspaceConfigurationMock,
+} from '../../testing';
+import { WorkspaceSettingsService } from '../services';
 
 import { ConfigurationComponent } from './configuration.component';
 
 describe('ConfigurationComponent', () => {
   let component: ConfigurationComponent;
   let fixture: ComponentFixture<ConfigurationComponent>;
+  let service: WorkspaceSettingsService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ConfigurationComponent],
+      imports: [ConfigurationComponent, NoopAnimationsModule],
+      providers: [
+        {
+          provide: WorkspaceSettingsService,
+          useValue: createWorkspaceSettingsServiceMockk(),
+        },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ConfigurationComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    service = TestBed.inject(WorkspaceSettingsService);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should formly create descriptions for fields', () => {
+    const { root, sourceRoot, prefix } = workspaceConfigurationMock.properties;
+    const innerHTML = fixture.debugElement.nativeElement.innerHTML;
+    expect(innerHTML).toContain(root.description);
+    expect(innerHTML).toContain(sourceRoot.description);
+    expect(innerHTML).toContain(prefix.description);
+  });
+
+  it('should submit form', () => {
+    const updateWorkspaceProjectConfigurationSpy = jest.spyOn(
+      service,
+      'updateWorkspaceProjectConfiguration'
+    );
+    fixture.debugElement.nativeElement.querySelector('button').click();
+    expect(updateWorkspaceProjectConfigurationSpy).toBeCalledWith('name', {
+      prefix: 'prefix',
+      root: 'root',
+      sourceRoot: 'sourceRoot',
+    });
+  });
 });

libs/configuration/src/lib/configuration/configuration.component.ts

@@ -1,11 +1,82 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { Project } from '@angular-cli-gui/shared/data';
+import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
+import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
+import { FormlyMaterialModule } from '@ngx-formly/material';
+import {
+  combineLatest,
+  distinctUntilChanged,
+  map,
+  shareReplay,
+  switchMap,
+} from 'rxjs';
+
+import { WorkspaceSettingsService } from '../services';
 
 @Component({
   selector: 'cli-configuration',
   standalone: true,
-  imports: [CommonModule],
+  imports: [
+    NgIf,
+    AsyncPipe,
+    FormlyModule,
+    FormlyMaterialModule,
+    ReactiveFormsModule,
+  ],
   templateUrl: './configuration.component.html',
   styleUrls: ['./configuration.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ConfigurationComponent {}
+export class ConfigurationComponent {
+  private readonly projectConfiguration$ = this.workspaceSettingsService
+    .readWorkspaceProjectConfiguration()
+    .pipe(
+      map(
+        (configuration) =>
+          this.schema.toFieldConfig(configuration)
+            .fieldGroup as FormlyFieldConfig[]
+      )
+    );
+
+  private readonly projectName$ = this.workspaceSettingsService
+    .readWorkspaceProjectNames()
+    .pipe(
+      map((names) => names[0]),
+      shareReplay({ bufferSize: 1, refCount: true })
+    );
+
+  private readonly workspaceProject$ = this.projectName$.pipe(
+    switchMap((currentProjectName: string) =>
+      this.workspaceSettingsService.readWorkspaceProject(currentProjectName)
+    ),
+    distinctUntilChanged()
+  );
+
+  readonly formly$ = combineLatest([
+    this.projectConfiguration$,
+    this.workspaceProject$,
+  ]).pipe(map(([formFields, formData]) => ({ formFields, formData })));
+
+  form = this.fb.group({});
+
+  constructor(
+    private workspaceSettingsService: WorkspaceSettingsService,
+    private fb: FormBuilder,
+    private schema: FormlyJsonschema
+  ) {}
+
+  onSubmit(): void {
+    this.projectName$
+      .pipe(
+        switchMap((projectName) => {
+          return this.workspaceSettingsService.updateWorkspaceProjectConfiguration(
+            projectName,
+            this.form.value as Project
+          );
+        })
+      )
+      .subscribe();
+  }
+}

libs/configuration/src/lib/services/index.ts

@@ -0,0 +1 @@
+export * from './workspace-settings';

libs/configuration/src/lib/services/workspace-settings/index.ts

@@ -0,0 +1 @@
+export * from './workspace-settings.service';

libs/configuration/src/lib/services/workspace-settings/workspace-settings.service.ts

@@ -0,0 +1,34 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Project } from '@angular-cli-gui/shared/data';
+import { JsonObject } from '@angular-devkit/core/src/json/utils';
+import { JSONSchema7 } from 'json-schema';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class WorkspaceSettingsService {
+  constructor(private readonly http: HttpClient) {}
+
+  readWorkspaceProjectNames(): Observable<string[]> {
+    return this.http.get<string[]>(`/api/workspace/project-names`);
+  }
+
+  readWorkspaceProject(projectName: string): Observable<JsonObject> {
+    return this.http.get<JsonObject>(`/api/workspace/project/${projectName}`);
+  }
+
+  readWorkspaceProjectConfiguration(): Observable<JSONSchema7> {
+    return this.http.get<JSONSchema7>(`/api/workspace/workspace-configuration`);
+  }
+
+  updateWorkspaceProjectConfiguration(
+    projectName: string,
+    projectData: Project
+  ): Observable<Project> {
+    return this.http.patch<Project>(`/api/workspace/project/${projectName}`, {
+      ...projectData,
+    });
+  }
+}

libs/configuration/src/testing/index.ts

@@ -0,0 +1 @@
+export * from './workspace-settings.service.mock';

libs/configuration/src/testing/workspace-settings.service.mock.ts

@@ -0,0 +1,59 @@
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+
+import { WorkspaceSettingsService } from '../lib/services';
+
+type WorkspaceSettingsServiceMock = Partial<
+  Record<keyof WorkspaceSettingsService, jest.Mock<any, any> | Observable<any>>
+>;
+
+export const workspaceConfigurationMock = {
+  properties: {
+    root: {
+      type: 'string',
+      description: 'Root of the project files.',
+    },
+    prefix: {
+      type: 'string',
+      format: 'html-selector',
+      description: 'The prefix to apply to generated selectors.',
+    },
+    sourceRoot: {
+      type: 'string',
+      description:
+        'The root of the source files, assets and index.html file structure.',
+    },
+  },
+  title: 'Angular CLI Workspace Configuration',
+  description: 'Browser target options',
+};
+
+export const workspaceNamesMock = ['name'];
+
+export const workspaceProjectMock = {
+  root: 'root',
+  prefix: 'prefix',
+  sourceRoot: 'sourceRoot',
+  extensions: {
+    projectType: 'application',
+    schematics: {
+      '@schematics/angular:component': {
+        style: 'scss',
+      },
+    },
+  },
+};
+
+export function createWorkspaceSettingsServiceMockk(): WorkspaceSettingsServiceMock {
+  return {
+    readWorkspaceProject: jest.fn(
+      () => new BehaviorSubject(workspaceProjectMock)
+    ),
+    readWorkspaceProjectNames: jest.fn(
+      () => new BehaviorSubject(workspaceNamesMock)
+    ),
+    readWorkspaceProjectConfiguration: jest.fn(
+      () => new BehaviorSubject(workspaceConfigurationMock)
+    ),
+    updateWorkspaceProjectConfiguration: jest.fn(() => new Subject()),
+  };
+}