feat: show ui for inherited default field values (#2437)

Author: tomwwinter

e2e/tsconfig.json

@@ -1,8 +1,10 @@
 {
   "extends": "../tsconfig.json",
   "include": [
-    "integration"
+    "**/*.ts",
+    "../cypress.config.ts"
   ],
+  "exclude": [],
   "compilerOptions": {
     "sourceMap": false,
     "types": [

karma.conf.js

@@ -1,20 +1,3 @@
-/*
- *     This file is part of ndb-core.
- *
- *     ndb-core is free software: you can redistribute it and/or modify
- *     it under the terms of the GNU General Public License as published by
- *     the Free Software Foundation, either version 3 of the License, or
- *     (at your option) any later version.
- *
- *     ndb-core is distributed in the hope that it will be useful,
- *     but WITHOUT ANY WARRANTY; without even the implied warranty of
- *     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *     GNU General Public License for more details.
- *
- *     You should have received a copy of the GNU General Public License
- *     along with ndb-core.  If not, see <http://www.gnu.org/licenses/>.
- */
-
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/0.13/config/configuration-file.html
 

package-lock.json

@@ -102,7 +102,7 @@
     "@typescript-eslint/eslint-plugin": "^8.2.0",
     "@typescript-eslint/parser": "^8.2.0",
     "babel-loader": "^9.1.3",
-    "cypress": "13.6.0",
+    "cypress": "~13.14.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",

package.json

@@ -47,7 +47,7 @@
   </div>
 
   <app-view-actions>
-    <app-dialog-buttons [form]="form" [entity]="entity">
+    <app-dialog-buttons [form]="form.formGroup" [entity]="entity">
       <button
         mat-menu-item
         [appExportData]="[entity]"

src/app/child-dev-project/notes/note-details/note-details.component.html

@@ -115,14 +115,17 @@ export class NoteDetailsComponent
     this.topFieldGroups = this.topForm.map((f) => ({ fields: [f] }));
     this.bottomFieldGroups = [{ fields: this.bottomForm }];
 
-    this.form = this.entityFormService.createFormGroup(
+    this.form = await this.entityFormService.createEntityForm(
       this.middleForm.concat(this.topForm, this.bottomForm),
       this.entity,
     );
+
     // create an object reflecting unsaved changes to use in template (e.g. for dynamic title)
     this.tmpEntity = this.entity.copy();
-    this.form.valueChanges.pipe(untilDestroyed(this)).subscribe((value) => {
-      this.tmpEntity = Object.assign(this.tmpEntity, value);
-    });
+    this.form.formGroup.valueChanges
+      .pipe(untilDestroyed(this))
+      .subscribe((value) => {
+        this.tmpEntity = Object.assign(this.tmpEntity, value);
+      });
   }
 }

src/app/child-dev-project/notes/note-details/note-details.component.ts

@@ -7,7 +7,10 @@ import {
 
 import { AdminEntityFormComponent } from "./admin-entity-form.component";
 import { CoreTestingModule } from "../../../../utils/core-testing.module";
-import { EntityFormService } from "../../../common-components/entity-form/entity-form.service";
+import {
+  EntityForm,
+  EntityFormService,
+} from "../../../common-components/entity-form/entity-form.service";
 import { MatDialog } from "@angular/material/dialog";
 import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
 import { FormGroup } from "@angular/forms";
@@ -18,6 +21,7 @@ import { AdminModule } from "../../admin.module";
 import { FormConfig } from "../../../entity-details/form/form.component";
 import { ColumnConfig } from "../../../common-components/entity-form/FormConfig";
 import { TestEntity } from "../../../../utils/test-utils/TestEntity";
+import { DefaultValueService } from "../../../default-values/default-value.service";
 
 describe("AdminEntityFormComponent", () => {
   let component: AdminEntityFormComponent;
@@ -28,7 +32,7 @@ describe("AdminEntityFormComponent", () => {
 
   let testConfig: FormConfig;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     testConfig = {
       fieldGroups: [
         { header: "Group 1", fields: ["name", "other"] },
@@ -37,9 +41,13 @@ describe("AdminEntityFormComponent", () => {
     };
 
     mockFormService = jasmine.createSpyObj("EntityFormService", [
-      "createFormGroup",
+      "createEntityForm",
     ]);
-    mockFormService.createFormGroup.and.returnValue(new FormGroup({}));
+    mockFormService.createEntityForm.and.returnValue(
+      Promise.resolve({
+        formGroup: new FormGroup({}),
+      } as EntityForm<any>),
+    );
     mockDialog = jasmine.createSpyObj("MatDialog", ["open"]);
 
     TestBed.configureTestingModule({
@@ -58,6 +66,10 @@ describe("AdminEntityFormComponent", () => {
           provide: MatDialog,
           useValue: mockDialog,
         },
+        {
+          provide: DefaultValueService,
+          useValue: jasmine.createSpyObj(["getDefaultValueUiHint"]),
+        },
       ],
     });
     fixture = TestBed.createComponent(AdminEntityFormComponent);
@@ -68,7 +80,7 @@ describe("AdminEntityFormComponent", () => {
 
     fixture.detectChanges();
 
-    component.ngOnChanges({ config: true as any });
+    await component.ngOnChanges({ config: true as any });
   });
 
   it("should create and init a form", () => {
@@ -78,12 +90,13 @@ describe("AdminEntityFormComponent", () => {
     expect(component.dummyForm).toBeTruthy();
   });
 
-  it("should load all fields from schema that are not already in form as available fields", () => {
+  it("should load all fields from schema that are not already in form as available fields", async () => {
     const fieldsInView = ["date"];
     component.config = {
       fieldGroups: [{ fields: fieldsInView }],
     };
-    component.ngOnChanges({ config: true as any });
+
+    await component.ngOnChanges({ config: true as any });
 
     const noteUserFacingFields = Array.from(TestEntity.schema.entries())
       .filter(([key, value]) => value.label)

src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.spec.ts

@@ -1,7 +1,10 @@
 import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
 import { Entity, EntityConstructor } from "../../../entity/model/entity";
-import { EntityFormService } from "../../../common-components/entity-form/entity-form.service";
-import { FormControl, FormGroup } from "@angular/forms";
+import {
+  EntityForm,
+  EntityFormService,
+} from "../../../common-components/entity-form/entity-form.service";
+import { FormControl } from "@angular/forms";
 import { MatDialog } from "@angular/material/dialog";
 import { AdminEntityFieldComponent } from "../admin-entity-field/admin-entity-field.component";
 import {
@@ -59,7 +62,7 @@ export class AdminEntityFormComponent implements OnChanges {
   @Input() config: FormConfig;
 
   dummyEntity: Entity;
-  dummyForm: FormGroup;
+  dummyForm: EntityForm<any>;
 
   availableFields: ColumnConfig[] = [];
   readonly createNewFieldPlaceholder: FormFieldConfig = {
@@ -85,21 +88,21 @@ export class AdminEntityFormComponent implements OnChanges {
       });
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
+  async ngOnChanges(changes: SimpleChanges): Promise<void> {
     if (changes.config) {
-      this.initForm();
+      await this.initForm();
     }
   }
 
-  private initForm() {
+  private async initForm() {
     this.initAvailableFields();
 
     this.dummyEntity = new this.entityType();
-    this.dummyForm = this.entityFormService.createFormGroup(
+    this.dummyForm = await this.entityFormService.createEntityForm(
       [...this.getUsedFields(this.config), ...this.availableFields],
       this.dummyEntity,
     );
-    this.dummyForm.disable();
+    this.dummyForm.formGroup.disable();
   }
 
   private getUsedFields(config: FormConfig): ColumnConfig[] {
@@ -220,7 +223,7 @@ export class AdminEntityFormComponent implements OnChanges {
     if (configDetails.editComponent == "EditDescriptionOnly") {
       const updatedField = await this.openTextConfig(configDetails);
       Object.assign(field, updatedField);
-      this.initForm();
+      await this.initForm();
     } else {
       await this.openFieldConfig(field);
     }
@@ -244,8 +247,8 @@ export class AdminEntityFormComponent implements OnChanges {
       return;
     }
 
-    this.dummyForm.addControl(newFieldId, new FormControl());
-    this.dummyForm.disable();
+    this.dummyForm.formGroup.addControl(newFieldId, new FormControl());
+    this.dummyForm.formGroup.disable();
     event.container.data.splice(event.currentIndex, 0, newFieldId);
 
     // the schema update has added the new field to the available fields already, remove it from there
@@ -269,8 +272,8 @@ export class AdminEntityFormComponent implements OnChanges {
       return;
     }
 
-    this.dummyForm.addControl(newTextField.id, new FormControl());
-    this.dummyForm.disable();
+    this.dummyForm.formGroup.addControl(newTextField.id, new FormControl());
+    this.dummyForm.formGroup.disable();
     event.container.data.splice(event.currentIndex, 0, newTextField);
 
     // the schema update has added the new Text field to the available fields already, remove it from there

src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.ts

@@ -31,21 +31,23 @@ describe("EditTextWithAutocompleteComponent", () => {
     }).compileComponents();
   }));
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(waitForAsync(async () => {
     fixture = TestBed.createComponent(EditTextWithAutocompleteComponent);
     component = fixture.componentInstance;
     loadTypeSpy = spyOn(TestBed.inject(EntityMapperService), "loadType");
     loadTypeSpy.and.resolveTo([]);
     const entityFormService = TestBed.inject(EntityFormService);
-    component.parent = entityFormService.createFormGroup(
-      [
-        { id: "title" },
-        { id: "type" },
-        { id: "assignedTo" },
-        { id: "linkedGroups" },
-      ],
-      new RecurringActivity(),
-    );
+    component.parent = (
+      await entityFormService.createEntityForm(
+        [
+          { id: "title" },
+          { id: "type" },
+          { id: "assignedTo" },
+          { id: "linkedGroups" },
+        ],
+        new RecurringActivity(),
+      )
+    ).formGroup;
     component.formControl = component.parent.get(
       "title",
     ) as FormControl<string>;

src/app/core/common-components/edit-text-with-autocomplete/edit-text-with-autocomplete.component.spec.ts

@@ -30,7 +30,7 @@ import {
   toFormFieldConfig,
 } from "../entity-form/FormConfig";
 import {
-  EntityForm,
+  EntityFormGroup,
   EntityFormService,
 } from "../entity-form/entity-form.service";
 import { tableSort } from "./table-sort/table-sort";
@@ -448,5 +448,5 @@ export class EntitiesTableComponent<T extends Entity> {
  */
 export interface TableRow<T extends Entity> {
   record: T;
-  formGroup?: EntityForm<T>;
+  formGroup?: EntityFormGroup<T>;
 }