Skip to content

Commit

Permalink
fix(edit-content) fix minors bugs Edit Content (#31065)
Browse files Browse the repository at this point in the history 
This pull request includes various changes to the `core-web` library,
focusing on improving the sidebar component, updating the contentlet
status pipe, and enhancing the workflow feature. Below are the most
important changes:

### Sidebar Component Updates:
* Updated `dot-edit-content-sidebar-information.component.html` to
simplify tooltip logic by directly assigning `contentlet` properties to
`pTooltip` attributes.
[[1]](diffhunk://#diff-d405fda5d6cf673a187d9029aad2fcf309edd1623c2aafe15c1c27ea127af465L34-R35)
[[2]](diffhunk://#diff-d405fda5d6cf673a187d9029aad2fcf309edd1623c2aafe15c1c27ea127af465L62-R58)
[[3]](diffhunk://#diff-d405fda5d6cf673a187d9029aad2fcf309edd1623c2aafe15c1c27ea127af465L84-R76)
* Added new tabs for "History" and "Settings" with placeholder content
in `dot-edit-content-sidebar.component.html`.
* Added `.temporal-content` class in
`dot-edit-content-sidebar.component.scss` to style the placeholder
content.

### Contentlet Status Pipe Enhancements:
* Modified `contentlet-status.pipe.ts` to refine status determination
logic, including handling for unchanged live content and draft content.
* Updated `contentlet-status.pipe.spec.ts` to reflect changes in status
logic and added a test case for undefined contentlets.
[[1]](diffhunk://#diff-7fc1168bc6ee5a279a06cf623890f3335b0746dd9e9d55306e11f890bbd18081L48-R54)
[[2]](diffhunk://#diff-7fc1168bc6ee5a279a06cf623890f3335b0746dd9e9d55306e11f890bbd18081R65-R71)

### Workflow Feature Enhancements:
* Injected `DotWorkflowService` in `workflow.feature.ts` and updated the
workflow feature to include workflow status fetching.
[[1]](diffhunk://#diff-f0fcc051e3fcc31af6b92c498403b31849ebba4c0b02092e6c22049d74714d85L27-R28)
[[2]](diffhunk://#diff-f0fcc051e3fcc31af6b92c498403b31849ebba4c0b02092e6c22049d74714d85R204)
[[3]](diffhunk://#diff-f0fcc051e3fcc31af6b92c498403b31849ebba4c0b02092e6c22049d74714d85L285-R298)
[[4]](diffhunk://#diff-f0fcc051e3fcc31af6b92c498403b31849ebba4c0b02092e6c22049d74714d85R310-R311)
[[5]](diffhunk://#diff-f0fcc051e3fcc31af6b92c498403b31849ebba4c0b02092e6c22049d74714d85R331)
* Updated `workflow.feature.spec.ts` to mock `DotWorkflowService` and
verify the new workflow status logic.
[[1]](diffhunk://#diff-b9408b979a77c9f9445c93e1dc4ea59af3b85d4d433234461cf392e5d99cff62L16-R17)
[[2]](diffhunk://#diff-b9408b979a77c9f9445c93e1dc4ea59af3b85d4d433234461cf392e5d99cff62L26-R28)
[[3]](diffhunk://#diff-b9408b979a77c9f9445c93e1dc4ea59af3b85d4d433234461cf392e5d99cff62L47-R49)
[[4]](diffhunk://#diff-b9408b979a77c9f9445c93e1dc4ea59af3b85d4d433234461cf392e5d99cff62L59-R62)
[[5]](diffhunk://#diff-b9408b979a77c9f9445c93e1dc4ea59af3b85d4d433234461cf392e5d99cff62L71-R74)
[[6]](diffhunk://#diff-b9408b979a77c9f9445c93e1dc4ea59af3b85d4d433234461cf392e5d99cff62R92)
[[7]](diffhunk://#diff-b9408b979a77c9f9445c93e1dc4ea59af3b85d4d433234461cf392e5d99cff62L159-R166)
[[8]](diffhunk://#diff-b9408b979a77c9f9445c93e1dc4ea59af3b85d4d433234461cf392e5d99cff62R175)

### Miscellaneous:
* Added `withDebug` feature to `edit-content.store.ts` for enhanced
debugging capabilities.
[[1]](diffhunk://#diff-2f1a1d6b895a7f80141dc1acc3663ee94e65a59e505fe3268a56e06c3e2a8f2cR9)
[[2]](diffhunk://#diff-2f1a1d6b895a7f80141dc1acc3663ee94e65a59e505fe3268a56e06c3e2a8f2cL55-R57)
* Simplified content state handling in `content.feature.ts` by directly
using the provided step.

### Proposed Changes
*  fix the correct name of WF after the trigger action
* fix the tooltip to truncated name
* fix status pipe logic

### Checklist
- [x] Tests
- [ ] Translations
- [ ] Security Implications Contemplated (add notes if applicable)

### Additional Info
** any additional useful context or info **

### Screenshots
Original             |  Updated
:-------------------------:|:-------------------------:
** original screenshot **  |  ** updated screenshot **
  • Loading branch information
@oidacra
oidacra authored Jan 6, 2025
1 parent af3b967 commit 77740ac
Show file tree
Hide file tree
Showing 9 changed files with 93 additions and 49 deletions.
34 changes: 13 additions & 21 deletions .../dot-edit-content-sidebar-information/dot-edit-content-sidebar-information.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<a
data-testid="content-type-link"
[pTooltip]="'edit.content.sidebar.information.go.to.content.type' | dm"
tooltipPosition="bottom"
class="sidebar-card sidebar-card__content-type"
[routerLink]="'/content-types-angular/edit/' + contentType.variable"
target="_blank">
Expand All @@ -31,12 +32,8 @@
<span class="sidebar-card__title">{{ 'Created' | dm }}</span>
<span
class="sidebar-card__subtitle"
[tooltipPosition]="'left'"
[pTooltip]="
!contentlet?.creationDate
? ('edit.content.sidebar.information.no.created.yet' | dm)
: null
">
[pTooltip]="contentlet?.ownerName"
tooltipPosition="bottom">
{{
contentlet?.creationDate
? (contentlet?.ownerName | dotNameFormat) ||
Expand All @@ -48,7 +45,8 @@
<span
class="sidebar-card__date"
data-testid="created-date"
[pTooltip]="contentlet?.creationDate | date: 'MM/dd/yyyy HH:mm:ss'">
[pTooltip]="contentlet?.creationDate | date: 'MM/dd/yyyy HH:mm:ss'"
tooltipPosition="bottom">
{{ contentlet?.creationDate | dotRelativeDate: 'MM/dd/yyyy' : null }}
</span>
}
Expand All @@ -58,19 +56,16 @@
<span class="sidebar-card__title">{{ 'Modified' | dm }}</span>
<span
class="sidebar-card__subtitle"
[tooltipPosition]="'left'"
[pTooltip]="
!contentlet?.modDate
? ('edit.content.sidebar.information.moddate.tooltip' | dm)
: null
">
[tooltipPosition]="'bottom'"
[pTooltip]="contentlet?.modUserName">
{{ contentlet?.modDate ? (contentlet?.modUserName | dotNameFormat) : '-' }}
</span>
@if (contentlet?.modDate) {
<span
class="sidebar-card__date"
data-testid="modified-date"
[pTooltip]="contentlet?.modDate | date: 'MM/dd/yyyy HH:mm:ss'">
[pTooltip]="contentlet?.modDate | date: 'MM/dd/yyyy HH:mm:ss'"
tooltipPosition="bottom">
{{ contentlet?.modDate | dotRelativeDate: 'MM/dd/yyyy' : null }}
</span>
}
Expand All @@ -80,12 +75,8 @@
<span class="sidebar-card__title">{{ 'Published' | dm }}</span>
<span
class="sidebar-card__subtitle"
[tooltipPosition]="'left'"
[pTooltip]="
!contentlet?.publishDate
? ('edit.content.sidebar.information.publishdate.tooltip' | dm)
: null
">
[tooltipPosition]="'bottom'"
[pTooltip]="contentlet?.publishUserName">
{{
contentlet?.publishDate
? (contentlet?.publishUserName | dotNameFormat)
Expand All @@ -96,7 +87,8 @@
<span
class="sidebar-card__date"
data-testid="published-date"
[pTooltip]="contentlet?.publishDate | date: 'MM/dd/yyyy HH:mm:ss'">
[pTooltip]="contentlet?.publishDate | date: 'MM/dd/yyyy HH:mm:ss'"
tooltipPosition="bottom">
{{ contentlet?.publishDate | dotRelativeDate: 'MM/dd/yyyy' : null }}
</span>
}
Expand Down
11 changes: 11 additions & 0 deletions ...ntent/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,17 @@
data-testId="workflow" />
</dot-edit-content-sidebar-section>
</p-tabPanel>

<p-tabPanel [header]="'History' | dm">
<ng-template pTemplate="content">
<span class="temporal-content">{{ 'coming.soon' | dm }}</span>
</ng-template>
</p-tabPanel>
<p-tabPanel [header]="'Settings' | dm">
<ng-template pTemplate="content">
<span class="temporal-content">{{ 'coming.soon' | dm }}</span>
</ng-template>
</p-tabPanel>
</p-tabView>
</aside>

Expand Down
7 changes: 7 additions & 0 deletions ...ntent/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,13 @@
}
}

.temporal-content {
padding-top: $spacing-3;
padding-left: $spacing-3;
display: flex;
width: 100%;
}

.content-sidebar {
overflow: auto;
width: 100%;
Expand Down
13 changes: 10 additions & 3 deletions core-web/libs/edit-content/src/lib/pipes/contentlet-status.pipe.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,13 @@ describe('ContentletStatusPipe', () => {
expect(result.classes).toBe('p-chip-gray');
});

it('should transform contentlet status to "Changed"', () => {
it('should transform contentlet status to "Published"', () => {
const contentlet = { live: true, working: true, archived: false } as DotCMSContentlet;

const result = pipe.transform(contentlet);

expect(result.label).toBe('Changed');
expect(result.classes).toBe('p-chip-pink');
expect(result.label).toBe('Published');
expect(result.classes).toBe('p-chip-success');
});

it('should transform contentlet status to empty label and default classes', () => {
Expand All @@ -62,4 +62,11 @@ describe('ContentletStatusPipe', () => {
expect(result.label).toBe('');
expect(result.classes).toBe('');
});

it('should transform undefined contentlet to "New" status', () => {
const result = pipe.transform(undefined);

expect(result.label).toBe('New');
expect(result.classes).toBe('p-chip-blue');
});
});
24 changes: 16 additions & 8 deletions core-web/libs/edit-content/src/lib/pipes/contentlet-status.pipe.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,16 +57,24 @@ export class ContentletStatusPipe implements PipeTransform {

private getContentletStatus(contentlet: DotCMSContentlet): DotEditContentStatus {
// Archived: Content has been archived
if (contentlet.archived) return DotEditContentStatus.ARCHIVED;

// Changed: Has both live and working versions (unpublished changes exist)
if (contentlet.live && contentlet.working) return DotEditContentStatus.CHANGED;
if (contentlet.archived) {
return DotEditContentStatus.ARCHIVED;
}

// Published: Has live version but no working version (no unpublished changes)
if (contentlet.live && !contentlet.working) return DotEditContentStatus.PUBLISHED;
// Live content handling
if (contentlet.live) {
// Compare working and live inodes to determine if content has changed
if (contentlet.workingInode === contentlet.liveInode) {
return DotEditContentStatus.PUBLISHED;
} else {
return DotEditContentStatus.CHANGED;
}
}

// Draft: Has working version but no live version (never published)
if (contentlet.working && !contentlet.live) return DotEditContentStatus.DRAFT;
// Draft: Not live and has working version
if (contentlet.working) {
return DotEditContentStatus.DRAFT;
}

// Unknown: None of the above conditions match
return DotEditContentStatus.UNKNOWN;
Expand Down
5 changes: 1 addition & 4 deletions core-web/libs/edit-content/src/lib/store/features/content.feature.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,17 +286,14 @@ export function withContent() {
const initialContentletState =
!scheme || !step ? 'reset' : 'existing';

// The current step is the first step of the selected scheme
const currentScheme = parsedSchemes[currentSchemeId];

patchState(store, {
contentType,
currentSchemeId,
schemes: parsedSchemes,
currentContentActions: parsedCurrentActions,
contentlet,
state: ComponentStatus.LOADED,
currentStep: currentScheme?.firstStep,
currentStep: step,
lastTask: task,
initialContentletState
});
Expand Down
20 changes: 14 additions & 6 deletions core-web/libs/edit-content/src/lib/store/features/workflow.feature.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import {
DotHttpErrorManagerService,
DotMessageService,
DotWorkflowActionsFireService,
DotWorkflowsActionsService
DotWorkflowsActionsService,
DotWorkflowService
} from '@dotcms/data-access';
import { ComponentStatus, DotCMSContentlet } from '@dotcms/dotcms-models';

Expand All @@ -23,7 +24,8 @@ import { withWorkflow } from './workflow.feature';
import {
MOCK_CONTENTLET_1_TAB,
MOCK_WORKFLOW_ACTIONS_NEW_ITEMNTTYPE_1_TAB,
MOCK_WORKFLOW_DATA
MOCK_WORKFLOW_DATA,
MOCK_WORKFLOW_STATUS
} from '../../utils/edit-content.mock';
import { CONTENT_TYPE_MOCK } from '../../utils/mocks';
import { parseCurrentActions, parseWorkflows } from '../../utils/workflows.utils';
Expand All @@ -44,7 +46,7 @@ describe('WorkflowFeature', () => {
let router: SpyObject<Router>;
let messageService: SpyObject<MessageService>;
let dotMessageService: SpyObject<DotMessageService>;

let dotWorkflowService: SpyObject<DotWorkflowService>;
const createStore = createServiceFactory({
service: signalStore(
withState({ ...initialRootState, ...mockInitialStateWithContent }),
Expand All @@ -56,7 +58,8 @@ describe('WorkflowFeature', () => {
DotHttpErrorManagerService,
DotMessageService,
MessageService,
Router
Router,
DotWorkflowService
]
});

Expand All @@ -68,7 +71,7 @@ describe('WorkflowFeature', () => {
router = spectator.inject(Router);
messageService = spectator.inject(MessageService);
dotMessageService = spectator.inject(DotMessageService);

dotWorkflowService = spectator.inject(DotWorkflowService);
dotMessageService.get.mockReturnValue('Success Message');
});

Expand All @@ -86,6 +89,7 @@ describe('WorkflowFeature', () => {
workflowActionService.getByInode.mockReturnValue(
of(MOCK_WORKFLOW_ACTIONS_NEW_ITEMNTTYPE_1_TAB)
);
dotWorkflowService.getWorkflowStatus.mockReturnValue(of(MOCK_WORKFLOW_STATUS));

store.fireWorkflowAction(mockOptions);
tick();
Expand Down Expand Up @@ -156,7 +160,10 @@ describe('WorkflowFeature', () => {
expect(store.getCurrentStep()).toBeNull();
expect(messageService.add).toHaveBeenCalledWith(
expect.objectContaining({
severity: 'success'
detail: 'Success Message',
icon: 'pi pi-spin pi-spinner',
severity: 'info',
summary: 'Success Message'
})
);
}));
Expand All @@ -165,6 +172,7 @@ describe('WorkflowFeature', () => {
workflowActionsFireService.fireTo.mockReturnValue(of(MOCK_CONTENTLET_1_TAB));

store.fireWorkflowAction(mockOptions);
tick();

expect(messageService.add).toHaveBeenCalledWith(
expect.objectContaining({
Expand Down
18 changes: 15 additions & 3 deletions core-web/libs/edit-content/src/lib/store/features/workflow.feature.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ import {
DotMessageService,
DotRenderMode,
DotWorkflowActionsFireService,
DotWorkflowsActionsService
DotWorkflowsActionsService,
DotWorkflowService
} from '@dotcms/data-access';
import {
ComponentStatus,
Expand Down Expand Up @@ -200,6 +201,7 @@ export function withWorkflow() {
dotHttpErrorManagerService = inject(DotHttpErrorManagerService),
messageService = inject(MessageService),
dotMessageService = inject(DotMessageService),
dotWorkflowService = inject(DotWorkflowService),
router = inject(Router)
) => ({
/**
Expand Down Expand Up @@ -282,11 +284,18 @@ export function withWorkflow() {
DotRenderMode.EDITING
),
contentlet: of(contentlet),
isReset: of(isReset)
isReset: of(isReset),
// Workflow status for this inode
workflowStatus: dotWorkflowService.getWorkflowStatus(inode)
});
}),
tapResponse({
next: ({ contentlet, currentContentActions, isReset }) => {
next: ({
contentlet,
currentContentActions,
isReset,
workflowStatus
}) => {
// Always navigate if the inode has changed
if (contentlet.inode !== currentContentlet?.inode) {
router.navigate(['/content', contentlet.inode], {
Expand All @@ -298,6 +307,8 @@ export function withWorkflow() {
const parsedCurrentActions =
parseCurrentActions(currentContentActions);

const { step } = workflowStatus;

if (isReset) {
patchState(store, {
contentlet,
Expand All @@ -317,6 +328,7 @@ export function withWorkflow() {
currentContentActions: parsedCurrentActions,
currentSchemeId: store.currentSchemeId(),
state: ComponentStatus.LOADED,
currentStep: step,
error: null
});
}
Expand Down
10 changes: 6 additions & 4 deletions dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5851,9 +5851,9 @@ edit.content.success.workflow.message=Your changes have been applied.
edit.content.processing.workflow.message=Your changes are being applied.
edit.content.processing.workflow.message.title=Processing

edit.content.layout.back.to.old.edit.content=Try out the new Edit Content experience, which makes it easier than ever to edit and manage content. You can easily
edit.content.layout.back.to.old.edit.content.switch=switch back
edit.content.layout.back.to.old.edit.content.subtitle=any time.
edit.content.layout.back.to.old.edit.content=You are currently viewing the new Edit Content experience. You can easily revert to the
edit.content.layout.back.to.old.edit.content.switch=previous version
edit.content.layout.back.to.old.edit.content.subtitle=at any time.

edit.content.layout.select.workflow.warning=You haven't selected a Workflow yet.
edit.content.layout.select.workflow.warning.switch=Select a Workflow
Expand Down Expand Up @@ -5909,4 +5909,6 @@ analytics.search.query.by.daily.sessions=Daily Sessions and Requests by Host
uve.device.selector.mobile=Mobile
uve.device.selector.tablet=Tablet
uve.device.selector.default=Desktop
uve.device.selector.default=Desktop
coming.soon=Coming Soon

0 comments on commit 77740ac

Please sign in to comment.