fix (edit content) : 31939 - remove back button / 31903 - preview buttons fixes (dotCMS#32135)

### Proposed Changes
* Preview buttons fix in files and image content types. 
* Remove the back button. 

### Screenshots

<img width="843" alt="Image"
src="https://github.com/user-attachments/assets/4caf0348-4d9e-4b51-9108-9a46208275b2"
/>

<img width="885" alt="Image"
src="https://github.com/user-attachments/assets/cd60bd3a-9232-49e3-9867-774cae5dfbb8"
/>

Author: hmoreras

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

@@ -31,10 +31,7 @@
             scrollable="false"
             class="dot-edit-content-tabview">
             <!-- Add prepend and append areas to the tabs -->
-            <ng-template
-                dotTabViewInsert
-                [dotTabViewPrepend]="prependContent"
-                [dotTabViewAppend]="appendContent"></ng-template>
+            <ng-template dotTabViewInsert [dotTabViewAppend]="appendContent"></ng-template>
 
             <!-- Tabs are lazy -->
             @for (tab of tabs; track tab) {
@@ -69,18 +66,6 @@
     </form>
 }
 
-<!-- Prepend template to add to the tabs-->
-<ng-template #prependContent>
-    <div class="back-button__wrapper h-100 flex">
-        <button
-            data-testId="back-button"
-            pButton
-            (click)="goBack()"
-            icon="pi pi-chevron-left"
-            class="p-button-tertiary p-button-rounded p-button-sm"></button>
-    </div>
-</ng-template>
-
 <!-- Append template to add to the tabs -->
 <ng-template #appendContent>
     <div

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

@@ -92,7 +92,7 @@ $tab-min-height: 52px;
     }
     .dot-edit-content-tabview {
         .p-tabview-nav-container {
-            padding: 0 0 0 $spacing-4;
+            padding: 0;
             border-bottom: solid 1px $color-palette-gray-300;
             border-right: none;
             overflow: initial;
@@ -106,7 +106,6 @@ $tab-min-height: 52px;
             border: none;
             border-left: solid 1px $color-palette-gray-300;
             border-right: solid 1px $color-palette-gray-300;
-            padding-left: $spacing-3;
             min-height: $tab-min-height;
             min-width: auto;
         }

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

@@ -46,7 +46,6 @@ import {
 
 import { DotEditContentFormComponent } from './dot-edit-content-form.component';
 
-import { CONTENT_SEARCH_ROUTE } from '../../models/dot-edit-content-field.constant';
 import { DotEditContentService } from '../../services/dot-edit-content.service';
 import { DotEditContentStore } from '../../store/edit-content.store';
 import {
@@ -69,7 +68,6 @@ describe('DotFormComponent', () => {
     let dotEditContentService: SpyObject<DotEditContentService>;
     let dotWorkflowService: SpyObject<DotWorkflowService>;
     let dotContentletService: SpyObject<DotContentletService>;
-    let router: SpyObject<Router>;
 
     const createComponent = createComponentFactory({
         component: DotEditContentFormComponent,
@@ -128,7 +126,6 @@ describe('DotFormComponent', () => {
         workflowActionsFireService = spectator.inject(DotWorkflowActionsFireService);
         dotWorkflowService = spectator.inject(DotWorkflowService);
         dotContentletService = spectator.inject(DotContentletService);
-        router = spectator.inject(Router);
     });
 
     afterEach(() => {
@@ -274,19 +271,11 @@ describe('DotFormComponent', () => {
                 expect(tabPanels[1]._header).toBe('New Tab');
             });
 
-            it('should have append and prepend areas', () => {
-                const prependArea = spectator.query(byTestId('tabview-prepend-content'));
+            it('should have append area', () => {
                 const appendArea = spectator.query(byTestId('tabview-append-content'));
-                expect(prependArea).toBeTruthy();
                 expect(appendArea).toBeTruthy();
             });
 
-            it('should render back button in prepend area', () => {
-                const backButton = spectator.query(byTestId('back-button'));
-                expect(backButton).toBeTruthy();
-                expect(backButton.getAttribute('icon')).toBe('pi pi-chevron-left');
-            });
-
             it('should render workflow actions and sidebar toggle in append area', () => {
                 const sidebarButton = spectator.query(byTestId('sidebar-toggle-button'));
                 const workflowActions = spectator.query(DotWorkflowActionsComponent);
@@ -306,26 +295,6 @@ describe('DotFormComponent', () => {
                 expect(toggleSidebarSpy).toHaveBeenCalled();
             });
 
-            it('should call toggleSidebar when sidebar toggle button is clicked', () => {
-                const toggleSidebarSpy = jest.spyOn(store, 'toggleSidebar');
-
-                const sidebarToggleButton = spectator.query(byTestId('sidebar-toggle-button'));
-                expect(sidebarToggleButton).toBeTruthy();
-
-                spectator.click(sidebarToggleButton);
-
-                expect(toggleSidebarSpy).toHaveBeenCalled();
-
-                const backButton = spectator.query(byTestId('back-button'));
-                expect(backButton).toBeTruthy();
-
-                spectator.click(backButton);
-
-                expect(router.navigate).toHaveBeenCalledWith([CONTENT_SEARCH_ROUTE], {
-                    queryParams: { filter: MOCK_CONTENTTYPE_2_TABS.variable }
-                });
-            });
-
             describe('TabView Styling', () => {
                 it('should apply single-tab class when only one tab exists', () => {
                     const tabView = spectator.query('.dot-edit-content-tabview');

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

@@ -79,23 +79,23 @@
         @if (isEditable) {
             <p-button
                 (click)="onEdit()"
-                styleClass="p-button-rounded p-button-text p-button-semi-transparent"
+                styleClass="p-button-rounded p-button-sm p-button-tertiary"
                 data-testId="edit-button-responsive"
                 icon="pi pi-pencil"></p-button>
         }
         <p-button
             (click)="visibility = !visibility"
-            styleClass="p-button-rounded p-button-text p-button-semi-transparent"
+            styleClass="p-button-rounded p-button-sm p-button-tertiary"
             data-testId="infor-button-responsive"
             icon="pi pi-info"></p-button>
         <p-button
             (click)="downloadAsset()"
-            styleClass="p-button-rounded p-button-text p-button-semi-transparent"
+            styleClass="p-button-rounded p-button-sm p-button-tertiary"
             data-testId="download-btn-responsive"
             icon="pi pi-download" />
         <p-button
             (click)="removeFile.emit()"
-            styleClass="p-button-rounded p-button-text p-button-semi-transparent"
+            styleClass="p-button-rounded p-button-sm p-button-tertiary"
             data-testId="remove-button-responsive"
             icon="pi pi-trash"></p-button>
     </div>

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

@@ -75,19 +75,19 @@
     <div class="preview-metadata__action--responsive">
         <p-button
             (click)="toggleShowDialog()"
-            styleClass="p-button-rounded"
+            styleClass="p-button-rounded p-button-sm p-button-tertiary"
             data-testId="info-btn-responsive"
             icon="pi pi-info" />
         @if (fileInfo.downloadLink) {
             <p-button
-                styleClass="p-button-rounded"
+                styleClass="p-button-rounded p-button-sm p-button-tertiary"
                 data-testId="download-btn-responsive"
                 icon="pi pi-download"
                 (click)="downloadAsset(fileInfo.downloadLink)" />
         }
         <p-button
             (click)="removeFile.emit()"
-            styleClass="p-button-rounded "
+            styleClass="p-button-rounded p-button-sm p-button-tertiary"
             data-testId="remove-button-responsive"
             icon="pi pi-trash" />
     </div>