Fix #26442: Edit Contentlet Add Text Area and enhance Text Field

core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html

@@ -1,18 +1,20 @@
 <ng-container [ngSwitch]="field.fieldType">
-    <div class="field" *ngSwitchCase="'Text'">
+    <div class="field">
         <label
             [attr.data-testId]="'label-' + field.variable"
             [for]="field.variable"
             [checkIsRequiredControl]="field.variable"
             dotFieldRequired
             >{{ field.name }}</label
         >
-        <input
-            [id]="field.variable"
-            [formControlName]="field.variable"
-            [attr.data-testId]="'input-' + field.variable"
-            type="text"
-            pInputText />
+        <dot-edit-content-text-field
+            *ngSwitchCase="fieldTypes.TEXT"
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable"></dot-edit-content-text-field>
+        <dot-edit-content-text-area
+            *ngSwitchCase="fieldTypes.TEXTAREA"
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable"></dot-edit-content-text-area>
         <small *ngIf="field.hint" [attr.data-testId]="'hint-' + field.variable">{{
             field.hint
         }}</small>

core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.scss

@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    height: fit-content;
+}

core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts

@@ -1,65 +1,32 @@
+import { describe } from '@jest/globals';
 import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator';
 
-import { CommonModule } from '@angular/common';
-import {
-    ControlContainer,
-    FormControl,
-    FormGroup,
-    FormGroupDirective,
-    ReactiveFormsModule
-} from '@angular/forms';
-
-import { InputTextModule } from 'primeng/inputtext';
-
-import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
-import { DotFieldRequiredDirective } from '@dotcms/ui';
+import { ControlContainer, FormGroupDirective } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 
 import { DotEditContentFieldComponent } from './dot-edit-content-field.component';
+import { FIELD_TYPES, FIELD_TYPES_COMPONENTS } from './utils';
 
-export const FIELD_MOCK: DotCMSContentTypeField = {
-    clazz: 'com.dotcms.contenttype.model.field.ImmutableTextField',
-    contentTypeId: 'd46d6404125ac27e6ab68fad09266241',
-    dataType: 'TEXT',
-    fieldType: 'Text',
-    fieldTypeLabel: 'Text',
-    fieldVariables: [],
-    fixed: false,
-    iDate: 1696896882000,
-    id: 'c3b928bc2b59fc22c67022de4dd4b5c4',
-    indexed: false,
-    listed: false,
-    hint: 'A helper text',
-    modDate: 1696896882000,
-    name: 'testVariable',
-    readOnly: false,
-    required: false,
-    searchable: false,
-    sortOrder: 2,
-    unique: false,
-    variable: 'testVariable'
-};
+import { FIELDS_MOCK, createFormGroupDirectiveMock } from '../../utils/mocks';
 
-const FORM_GROUP_MOCK = new FormGroup({
-    testVariable: new FormControl('')
+describe('FIELD_TYPES and FIELDS_MOCK', () => {
+    it('should be in sync', () => {
+        expect(
+            Object.values(FIELD_TYPES).every((fieldType) =>
+                FIELDS_MOCK.find((f) => f.fieldType === fieldType)
+            )
+        ).toBeTruthy();
+    });
 });
-const FORM_GROUP_DIRECTIVE_MOCK: FormGroupDirective = new FormGroupDirective([], []);
-FORM_GROUP_DIRECTIVE_MOCK.form = FORM_GROUP_MOCK;
 
-describe('DotFieldComponent', () => {
+describe.each([...FIELDS_MOCK])('DotFieldComponent', (fieldMock) => {
     let spectator: Spectator<DotEditContentFieldComponent>;
     const createComponent = createComponentFactory({
         component: DotEditContentFieldComponent,
-        imports: [
-            DotEditContentFieldComponent,
-            CommonModule,
-            ReactiveFormsModule,
-            InputTextModule,
-            DotFieldRequiredDirective
-        ],
         componentViewProviders: [
             {
                 provide: ControlContainer,
-                useValue: FORM_GROUP_DIRECTIVE_MOCK
+                useValue: createFormGroupDirectiveMock()
             }
         ],
         providers: [FormGroupDirective]
@@ -68,26 +35,31 @@ describe('DotFieldComponent', () => {
     beforeEach(async () => {
         spectator = createComponent({
             props: {
-                field: FIELD_MOCK
+                field: fieldMock
             }
         });
     });
 
     it('should render the label', () => {
         spectator.detectChanges();
-        const label = spectator.query(byTestId(`label-${FIELD_MOCK.variable}`));
-        expect(label?.textContent).toContain(FIELD_MOCK.name);
+        const label = spectator.query(byTestId(`label-${fieldMock.variable}`));
+        expect(label?.textContent).toContain(fieldMock.name);
     });
 
     it('should render the hint', () => {
         spectator.detectChanges();
-        const hint = spectator.query(byTestId(`hint-${FIELD_MOCK.variable}`));
-        expect(hint?.textContent).toContain(FIELD_MOCK.hint);
+        const hint = spectator.query(byTestId(`hint-${fieldMock.variable}`));
+        expect(hint?.textContent).toContain(fieldMock.hint);
     });
 
-    it('should render the input', () => {
+    it('should render the correct field type', () => {
         spectator.detectChanges();
-        const input = spectator.query(byTestId(`input-${FIELD_MOCK.variable}`));
-        expect(input).toBeDefined();
+        const field = spectator.debugElement.query(
+            By.css(`[data-testId="field-${fieldMock.variable}"]`)
+        );
+
+        expect(
+            field.componentInstance instanceof FIELD_TYPES_COMPONENTS[fieldMock.fieldType]
+        ).toBeTruthy();
     });
 });

core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts

@@ -1,16 +1,25 @@
-import { CommonModule } from '@angular/common';
+import { NgIf, NgSwitch, NgSwitchCase } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
-import { InputTextModule } from 'primeng/inputtext';
-
 import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
 import { DotFieldRequiredDirective } from '@dotcms/ui';
 
+import { FIELD_TYPES } from './utils';
+
+import { DotEditContentFieldsModule } from '../../fields/dot-edit-content-fields.module';
+
 @Component({
     selector: 'dot-edit-content-field',
     standalone: true,
-    imports: [CommonModule, ReactiveFormsModule, InputTextModule, DotFieldRequiredDirective],
+    imports: [
+        NgSwitch,
+        NgSwitchCase,
+        NgIf,
+        ReactiveFormsModule,
+        DotEditContentFieldsModule,
+        DotFieldRequiredDirective
+    ],
     templateUrl: './dot-edit-content-field.component.html',
     styleUrls: ['./dot-edit-content-field.component.scss'],
     viewProviders: [
@@ -23,4 +32,5 @@ import { DotFieldRequiredDirective } from '@dotcms/ui';
 })
 export class DotEditContentFieldComponent {
     @Input() field!: DotCMSContentTypeField;
+    readonly fieldTypes = FIELD_TYPES;
 }

core-web/libs/edit-content/src/lib/components/dot-edit-content-field/utils.ts

@@ -0,0 +1,16 @@
+import { Type } from '@angular/core';
+
+import { DotEditContentTextAreaComponent } from '../../fields/dot-edit-content-text-area/dot-edit-content-text-area.component';
+import { DotEditContentTextFieldComponent } from '../../fields/dot-edit-content-text-field/dot-edit-content-text-field.component';
+
+export enum FIELD_TYPES {
+    TEXT = 'Text',
+    TEXTAREA = 'Textarea'
+}
+
+// This holds the mapping between the field type and the component that should be used to render it.
+export const FIELD_TYPES_COMPONENTS: Record<FIELD_TYPES, Type<unknown>> = {
+    // We had to use unknown because components have different types.
+    [FIELD_TYPES.TEXT]: DotEditContentTextFieldComponent,
+    [FIELD_TYPES.TEXTAREA]: DotEditContentTextAreaComponent
+};

core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.scss

@@ -5,6 +5,13 @@
     grid-template-columns: 1fr 16rem;
     gap: $spacing-4;
     padding: $spacing-4;
+    padding-bottom: 0;
+    height: 100%;
+
+    form {
+        overflow: auto;
+        padding-right: $spacing-4;
+    }
 }
 
 .row {
@@ -14,7 +21,8 @@
     gap: $spacing-2;
 
     .column {
-        display: grid;
-        min-height: $spacing-7;
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-3;
     }
 }