fix(edit-content): side panel UX fixes for new Edit Contentlet mode

core-web/libs/dotcms-models/src/lib/dot-content-state.model.ts

@@ -6,5 +6,5 @@ export interface DotContentState {
     deleted?: string | boolean;
     live: string | boolean;
     working: string | boolean;
-    hasLiveVersion: string | boolean;
+    hasLiveVersion?: string | boolean;
 }

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

@@ -6,9 +6,7 @@
 
 <div class="flex flex-col gap-2 w-full">
     <div class="w-full flex justify-between items-center">
-        @if (contentlet | contentletStatusTag; as status) {
-            <p-tag [severity]="status.severity" [value]="status.label" />
-        }
+        <dot-contentlet-status-chip [state]="contentlet" />
         @if (contentlet?.inode) {
             <a
                 data-testid="json-link"

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

@@ -5,16 +5,14 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { SkeletonModule } from 'primeng/skeleton';
-import { TagModule } from 'primeng/tag';
 import { TooltipModule } from 'primeng/tooltip';
 
 import { DotFormatDateService, DotMessageService } from '@dotcms/data-access';
-import { DotMessagePipe, DotRelativeDatePipe } from '@dotcms/ui';
+import { DotContentletStatusChipComponent, DotMessagePipe, DotRelativeDatePipe } from '@dotcms/ui';
 import { MockDotMessageService } from '@dotcms/utils-testing';
 
 import { DotEditContentSidebarInformationComponent } from './dot-edit-content-sidebar-information.component';
 
-import { ContentletStatusTagPipe } from '../../../../pipes/contentlet-status-tag.pipe';
 import { DotNameFormatPipe } from '../../../../pipes/name-format.pipe';
 
 const messageServiceMock = new MockDotMessageService({
@@ -29,6 +27,8 @@ describe('DotEditContentSidebarInformationComponent', () => {
 
     const mockContentlet = {
         inode: '123',
+        identifier: 'id-123',
+        hasLiveVersion: true,
         live: true,
         working: false,
         archived: false,
@@ -49,11 +49,10 @@ describe('DotEditContentSidebarInformationComponent', () => {
         component: DotEditContentSidebarInformationComponent,
         imports: [
             RouterTestingModule,
-            TagModule,
             SkeletonModule,
             TooltipModule,
             DotNameFormatPipe,
-            ContentletStatusTagPipe,
+            DotContentletStatusChipComponent,
             DotRelativeDatePipe,
             DotMessagePipe
         ],
@@ -90,9 +89,8 @@ describe('DotEditContentSidebarInformationComponent', () => {
             spectator.detectChanges();
         });
 
-        it('should show status tag', () => {
-            const tag = spectator.query('p-tag');
-            expect(tag).toBeTruthy();
+        it('should show contentlet status chip', () => {
+            expect(spectator.query('dot-contentlet-status-chip')).toBeTruthy();
         });
 
         it('should show json link', () => {
@@ -138,10 +136,8 @@ describe('DotEditContentSidebarInformationComponent', () => {
             spectator.detectChanges();
         });
 
-        it('should show New status tag for new contentlet', () => {
-            const tag = spectator.query('p-tag');
-            expect(tag).toBeTruthy();
-            expect(tag?.textContent).toContain('New');
+        it('should show status chip when contentlet is null', () => {
+            expect(spectator.query('dot-contentlet-status-chip')).toBeTruthy();
         });
 
         it('should not show json link', () => {

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

@@ -12,21 +12,19 @@ import { RouterLink } from '@angular/router';
 
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { SkeletonModule } from 'primeng/skeleton';
-import { TagModule } from 'primeng/tag';
 import { TooltipModule } from 'primeng/tooltip';
 
 import { DotMessageService } from '@dotcms/data-access';
 import { DotCMSContentlet, DotCMSContentType } from '@dotcms/dotcms-models';
-import { DotMessagePipe, DotRelativeDatePipe } from '@dotcms/ui';
+import { DotContentletStatusChipComponent, DotMessagePipe, DotRelativeDatePipe } from '@dotcms/ui';
 
 import { DotEditContentSidebarReferencesDialogComponent } from './dot-edit-content-sidebar-references-dialog/dot-edit-content-sidebar-references-dialog.component';
 
 import { DotReferencesDialogData } from '../../../../models/dot-edit-content.model';
-import { ContentletStatusTagPipe } from '../../../../pipes/contentlet-status-tag.pipe';
 import { DotNameFormatPipe } from '../../../../pipes/name-format.pipe';
 
 interface ContentSidebarInformation {
-    contentlet: DotCMSContentlet;
+    contentlet: DotCMSContentlet | null;
     contentType: DotCMSContentType;
     loading: boolean;
     referencesPageCount: string;
@@ -41,8 +39,7 @@ interface ContentSidebarInformation {
         RouterLink,
         TooltipModule,
         SkeletonModule,
-        TagModule,
-        ContentletStatusTagPipe,
+        DotContentletStatusChipComponent,
         DotRelativeDatePipe,
         DotMessagePipe,
         DotNameFormatPipe,
@@ -66,7 +63,9 @@ export class DotEditContentSidebarInformationComponent {
     readonly $data = input.required<ContentSidebarInformation>({ alias: 'data' });
 
     /** URL to fetch the contentlet as JSON via the REST API. */
-    readonly $jsonUrl = computed(() => `/api/v1/content/${this.$data().contentlet.identifier}`);
+    readonly $jsonUrl = computed(
+        () => `/api/v1/content/${this.$data().contentlet?.identifier ?? ''}`
+    );
 
     /** Tooltip message shown when the contentlet has no creation date yet. */
     readonly $createdTooltipMessage = computed(() => {

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

@@ -16,17 +16,29 @@
         data-testId="sidebar-tabs">
         <p-tablist
             class="border-b border-(--p-inputtext-border-color) min-h-[53px] [&_.p-tablist-tab-list]:h-full [&_.p-tab]:h-full [&_.p-tab]:flex-1 [&_.p-tab]:flex [&_.p-tab]:items-center [&_.p-tab]:justify-center [&_.p-tab]:p-0! [&_.p-tab_i]:-translate-y-px">
-            <p-tab [value]="0">
+            <p-tab
+                [value]="0"
+                [pTooltip]="'edit.content.sidebar.tab.information' | dm"
+                tooltipPosition="bottom">
                 <i class="pi pi-info-circle"></i>
             </p-tab>
-            <p-tab [value]="1">
+            <p-tab
+                [value]="1"
+                [pTooltip]="'edit.content.sidebar.tab.history' | dm"
+                tooltipPosition="bottom">
                 <i class="pi pi-history"></i>
             </p-tab>
-            <p-tab [value]="2">
+            <p-tab
+                [value]="2"
+                [pTooltip]="'edit.content.sidebar.tab.comments' | dm"
+                tooltipPosition="bottom">
                 <i class="pi pi-comment"></i>
             </p-tab>
             @if (!isNew) {
-                <p-tab [value]="3">
+                <p-tab
+                    [value]="3"
+                    [pTooltip]="'edit.content.sidebar.tab.settings' | dm"
+                    tooltipPosition="bottom">
                     <i class="pi pi-cog"></i>
                 </p-tab>
             }

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

@@ -14,6 +14,7 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DialogModule } from 'primeng/dialog';
 import { SelectModule } from 'primeng/select';
 import { TabsModule } from 'primeng/tabs';
+import { TooltipModule } from 'primeng/tooltip';
 
 import { DotCMSBaseTypesContentTypes } from '@dotcms/dotcms-models';
 import { DotCopyButtonComponent, DotMessagePipe } from '@dotcms/ui';
@@ -46,6 +47,7 @@ import { DotEditContentStore } from '../../store/edit-content.store';
         DotEditContentSidebarInformationComponent,
         DotEditContentSidebarWorkflowComponent,
         TabsModule,
+        TooltipModule,
         DotEditContentSidebarSectionComponent,
         DotCopyButtonComponent,
         ConfirmDialogModule,