Cherry pick template issues for pre release

.prettierrc

@@ -6,6 +6,7 @@
     "trailingComma": "none",
     "jsxBracketSameLine": false,
     "arrowParens": "always",
+    "bracketSameLine": true,
     "overrides": [
         {
             "files": "*.scss",

core-web/apps/dotcms-ui/src/app/api/services/dot-templates/dot-templates.service.spec.ts

@@ -185,6 +185,7 @@ describe('DotTemplatesService', () => {
             }
         });
     });
+
     it('should put to save and publish a template', () => {
         service
             .saveAndPublish({
@@ -211,6 +212,7 @@ describe('DotTemplatesService', () => {
             }
         });
     });
+
     it('should delete a template', () => {
         service.delete(['testId01']).subscribe();
         const req = httpMock.expectOne(TEMPLATE_API_URL);

core-web/apps/dotcms-ui/src/app/api/services/dot-templates/dot-templates.service.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 
-import { HttpErrorResponse } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
 import { catchError, map, pluck, take } from 'rxjs/operators';
@@ -21,7 +21,8 @@ export const TEMPLATE_API_URL = '/api/v1/templates/';
 export class DotTemplatesService {
     constructor(
         private coreWebService: CoreWebService,
-        private httpErrorManagerService: DotHttpErrorManagerService
+        private httpErrorManagerService: DotHttpErrorManagerService,
+        private http: HttpClient
     ) {}
 
     /**
@@ -91,11 +92,11 @@ export class DotTemplatesService {
      * @memberof DotTemplatesService
      */
     saveAndPublish(values: DotTemplate): Observable<DotTemplate> {
-        return this.request<DotTemplate>({
-            method: 'PUT',
-            url: `${TEMPLATE_API_URL}_savepublish`,
-            body: values
-        });
+        return this.http
+            .put<DotTemplate>(`${TEMPLATE_API_URL}_savepublish`, {
+                ...values
+            })
+            .pipe(pluck('entity'));
     }
 
     /**

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-content-type/dot-palette-content-type.module.ts

@@ -2,14 +2,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { DotPaletteContentTypeComponent } from '@dotcms/app/portlets/dot-edit-page/components/dot-palette/dot-palette-content-type/dot-palette-content-type.component';
-import { DotIconModule, DotSpinnerModule } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotPipesModule } from '@dotcms/app/view/pipes/dot-pipes.module';
+import { DotIconModule, DotMessagePipe, DotSpinnerModule } from '@dotcms/ui';
 
 import { DotPaletteInputFilterModule } from '../dot-palette-input-filter/dot-palette-input-filter.module';
 
 @NgModule({
     imports: [
         CommonModule,
+        DotMessagePipe,
         DotPipesModule,
         DotIconModule,
         DotSpinnerModule,

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-edit-page-state-controller-seo/dot-edit-page-state-controller-seo.component.spec.ts

@@ -489,7 +489,7 @@ describe('DotEditPageStateControllerSeoComponent', () => {
             expect(dotPageStateService.setSeoMedia).toHaveBeenCalledWith('Google');
         });
 
-        it('should call  changeSeoMedia event', async () => {
+        it('should call selected event', async () => {
             spyOn(dotPageStateService, 'setDevice');
             const dotSelector = de.query(By.css('[data-testId="dot-device-selector"]'));
             const event = {

core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/store/dot-template.store.ts

@@ -1,4 +1,4 @@
-import { ComponentStore } from '@ngrx/component-store';
+import { ComponentStore, tapResponse } from '@ngrx/component-store';
 import * as _ from 'lodash';
 import { Observable, of, zip } from 'rxjs';
 
@@ -142,22 +142,25 @@ export class DotTemplateStore extends ComponentStore<DotTemplateState> {
             switchMap((template: DotTemplateItem) => {
                 this.dotGlobalMessageService.loading(this.dotMessageService.get('publishing'));
 
-                return this.dotTemplateService.saveAndPublish(this.cleanTemplateItem(template));
-            }),
-            tap((template: DotTemplate) => {
-                this.dotGlobalMessageService.success(
-                    this.dotMessageService.get('message.template.published')
-                );
-                this.dotRouterService.allowRouteDeactivation();
-                this.updateTemplateState(template);
-            }),
-            catchError((err: HttpErrorResponse) => {
-                this.dotGlobalMessageService.error(err.statusText);
-                this.dotHttpErrorManagerService.handle(err).subscribe(() => {
-                    this.dotRouterService.allowRouteDeactivation();
-                });
-
-                return of(null);
+                return this.dotTemplateService
+                    .saveAndPublish(this.cleanTemplateItem(template))
+                    .pipe(
+                        tapResponse(
+                            (template: DotTemplate) => {
+                                this.dotGlobalMessageService.success(
+                                    this.dotMessageService.get('message.template.published')
+                                );
+                                this.dotRouterService.allowRouteDeactivation();
+                                this.updateTemplateState(template);
+                            },
+                            (err: HttpErrorResponse) => {
+                                this.dotGlobalMessageService.error(err.statusText);
+                                this.dotHttpErrorManagerService.handle(err).subscribe(() => {
+                                    this.dotRouterService.allowRouteDeactivation();
+                                });
+                            }
+                        )
+                    );
             })
         );
     });

core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss

@@ -3,7 +3,6 @@
 
 .p-autocomplete {
     @extend #form-field-extend;
-    min-height: $field-height-md;
     height: auto;
     padding-right: 0;
 
@@ -38,30 +37,27 @@
             align-items: center;
             max-height: 13rem; // 208px
             overflow: auto; // Make it scrollable
+            gap: $spacing-0;
+            padding: 7px 0 6px; // Specific padding for the tokens in multiple lines
 
             &:hover,
             &:active,
             &.p-focus {
                 border: none;
             }
 
-            &:has(> .p-autocomplete-token) {
-                padding: $spacing-1 0;
-            }
-
             .p-autocomplete-token {
                 @extend #field-chip;
             }
 
             .p-autocomplete-input-token {
-                padding: 0.375rem 0;
-
                 input {
                     font-family: $font-default;
                     font-size: $font-size-md;
                     color: $black;
                     padding: 0;
                     margin: 0;
+                    height: 1.5rem;
                 }
             }
         }

core-web/libs/template-builder/src/lib/components/template-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.html

@@ -1,30 +1,44 @@
-<ng-container *ngIf="vm$ | async as vm">
-    <div class="dialog__auto-complete-container field">
-        <div class="p-fluid">
-            <p-autoComplete
-                [ngModel]="vm.selectedClasses"
-                [suggestions]="vm.filteredClasses"
-                [multiple]="true"
-                [completeOnFocus]="true"
-                [size]="446"
-                [tabindex]="1"
-                (onSelect)="onSelect($event)"
-                (onUnselect)="onUnselect()"
-                (completeMethod)="filterClasses($event)"
-                (onKeyUp)="onKeyUp($event)"
-                dataKey="cssClass"
-                field="cssClass"
-                appendTo="body"
-                inputId="auto-complete-input"
-                name="class"
-                type="text"
-            >
-            </p-autoComplete>
-        </div>
-    </div>
-    <div class="dialog__actions-container">
-        <p-button (onClick)="saveClass(vm.selectedClasses)" data-testId="update-btn">
-            {{ 'dot.template.builder.classes.dialog.update.button' | dm }}</p-button
-        >
-    </div>
-</ng-container>
+<div class="dialog__auto-complete-container field">
+    <p-autoComplete
+        class="p-fluid"
+        [(ngModel)]="selectedClasses"
+        [unique]="true"
+        [suggestions]="filteredSuggestions"
+        [size]="446"
+        [multiple]="true"
+        [dropdown]="isJsonClasses$ | async"
+        [autofocus]="true"
+        (onKeyUp)="onKeyUp($event)"
+        (completeMethod)="filterClasses($event)"
+        data-testId="autocomplete"
+        inputId="auto-complete-input"
+        appendTo="body">
+    </p-autoComplete>
+    <ng-container *ngIf="isJsonClasses$ | async; else suggestionNotes">
+        <ul data-testId="list">
+            <li>
+                <i class="pi pi-info-circle"></i>
+                {{ 'dot.template.builder.autocomplete.has.suggestions' | dm }}
+            </li>
+        </ul>
+    </ng-container>
+
+    <ng-template #suggestionNotes>
+        <ul data-testId="list">
+            <li>
+                <i class="pi pi-info-circle"></i>
+                {{ 'dot.template.builder.autocomplete.no.suggestions' | dm }}
+            </li>
+            <li>
+                <i class="pi pi-check-circle"></i>
+                <span
+                    [innerHTML]="'dot.template.builder.autocomplete.setup.suggestions' | dm"></span>
+            </li>
+        </ul>
+    </ng-template>
+</div>
+<div class="dialog__actions-container">
+    <p-button (onClick)="save()" data-testId="update-btn">
+        {{ 'dot.template.builder.classes.dialog.update.button' | dm }}</p-button
+    >
+</div>

core-web/libs/template-builder/src/lib/components/template-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.scss

@@ -1,30 +1,37 @@
 @use "variables" as *;
+
 :host {
     width: 33.875rem;
     display: block;
 }
 
-.dialog__auto-complete-container {
-    .auto-complete-container__label {
-        margin: 0;
-        color: $black;
-    }
-}
-
 .dialog__actions-container {
     display: flex;
     justify-content: end;
-    padding: 1.25rem $spacing-5;
 }
 
-::ng-deep {
-    .p-autocomplete.p-autocomplete-multiple
-        .p-autocomplete-multiple-container
-        .p-autocomplete-token {
-        margin-right: 0;
-    }
+p-autoComplete {
+    margin-bottom: $spacing-3;
+    display: block;
+}
+
+ul {
+    color: $color-palette-gray-700;
+    display: flex;
+    flex-direction: column;
+    font-size: $font-size-sm;
+    gap: $spacing-1;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    display: flex;
+    align-items: center;
+    gap: $spacing-0;
+}
 
-    .p-autocomplete-multiple-container {
-        gap: 0.25rem;
-    }
+.pi {
+    color: $color-palette-gray;
 }