From 31a8d606966bd6d0da9d06f90f5fd4f333f95927 Mon Sep 17 00:00:00 2001
From: alfredo-dotcms <37185433+alfredo-dotcms@users.noreply.github.com>
Date: Fri, 3 Jun 2022 15:26:34 -0600
Subject: [PATCH] feedback and fix to make input grow as you type to show
 content (#22330)

---
 .../content-types-layout.component.html       |  3 +--
 .../content-types-layout.component.spec.ts    |  5 ++--
 .../layout/content-types-layout.component.ts  | 24 ++++++++++++++++---
 .../dot-content-types-edit.component.spec.ts  |  6 ++---
 .../dot-content-types-edit.component.ts       |  7 +++---
 5 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
index 848db4459283..caf7d65eafc2 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
@@ -12,8 +12,7 @@ <h4 (click)="editInlineActivate($event)">{{ contentType.name }}</h4>
                         #contentTypeNameInput
                         type="text"
                         [value]="contentType.name"
-                        (keydown.enter)="fireChangeName()"
-                        (keydown.escape)="dotEditInline.hideContent()"
+                        (keyup)="inputValueHandler($event)"
                         pInputText
                         dotAutofocus
                     />
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts
index d68f9e056533..aa2484c60316 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts
@@ -243,9 +243,10 @@ describe('ContentTypesLayoutComponent', () => {
             de.query(By.css('.main-toolbar-left header p-inplace input')).nativeElement.value =
                 'changedName';
             de.query(By.css('.main-toolbar-left header p-inplace input')).triggerEventHandler(
-                'keydown.enter',
+                'keyup',
                 {
-                    stopPropagation: jasmine.createSpy('stopPropagation')
+                    stopPropagation: jasmine.createSpy('stopPropagation'),
+                    key: 'Enter'
                 }
             );
             expect(de.componentInstance.changeContentTypeName.emit).toHaveBeenCalledWith(
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts
index b495f68b4a72..8d1240ea0353 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts
@@ -34,7 +34,7 @@ export class ContentTypesLayoutComponent implements OnChanges, OnInit {
     permissionURL: string;
     pushHistoryURL: string;
     relationshipURL: string;
-    contentTypeNameInputSize: string;
+    contentTypeNameInputSize: number;
     showPermissionsTab: Observable<boolean>;
 
     actions: MenuItem[];
@@ -91,10 +91,28 @@ export class ContentTypesLayoutComponent implements OnChanges, OnInit {
     /**
      * Sets the size of the H4 display to set it in the content textbox to eliminate UI jumps
      *
+     * @param {MouseEvent} event
      * @memberof ContentTypesLayoutComponent
      */
-    editInlineActivate(event): void {
-        this.contentTypeNameInputSize = event.target.offsetWidth;
+    editInlineActivate(event: MouseEvent): void {
+        this.contentTypeNameInputSize = event.target['offsetWidth'];
+    }
+
+    /**
+     * Based on keyboard input executes an action to Change Name/Hide Input/Change Input's size
+     *
+     * @param {KeyboardEvent} event
+     * @memberof ContentTypesLayoutComponent
+     */
+    inputValueHandler(event: KeyboardEvent): void {
+        if (event.key === 'Enter') {
+            this.fireChangeName();
+        } else if (event.key === 'Escape') {
+            this.dotEditInline.hideContent();
+        } else {
+            const newInputSize = event.target['value'].length * 8 + 22;
+            this.contentTypeNameInputSize = newInputSize > 485 ? 485 : newInputSize;
+        }
     }
 
     private loadActions(): void {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.spec.ts
index 0e9c1892a617..c328e74b0c11 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.spec.ts
@@ -763,16 +763,14 @@ describe('DotContentTypesEditComponent', () => {
             const contentTypeLayout = de.query(By.css('dot-content-type-layout'));
             contentTypeLayout.triggerEventHandler('changeContentTypeName', 'CT changed');
 
-            const replacedWorkflowsPropContentType = {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { layout, fields, workflows, ...replacedWorkflowsPropContentType } = {
                 ...responseContentType
             };
 
             replacedWorkflowsPropContentType['workflow'] = fakeContentType.workflows.map(
                 (workflow) => workflow.id
             );
-            delete replacedWorkflowsPropContentType.workflows;
-            delete replacedWorkflowsPropContentType.fields;
-            delete replacedWorkflowsPropContentType.layout;
 
             expect(crudService.putData).toHaveBeenCalledWith(
                 'v1/contenttype/id/1234567890',
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts
index 68356cb0fcbc..e4937fabb7bd 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts
@@ -131,11 +131,10 @@ export class DotContentTypesEditComponent implements OnInit, OnDestroy {
      * @memberof DotContentTypesEditComponent
      */
     editContentTypeName(name: string): void {
-        const updatedContentType = { ...this.data, name };
-        delete updatedContentType.layout;
-        delete updatedContentType.fields;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { layout, fields, ...updatedContentType } = { ...this.data, name };
 
-        this.updateContentType(updatedContentType);
+        this.updateContentType(updatedContentType as DotCMSContentType);
     }
 
     /**