Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(UVE): update page after changing template #29695

Merged
merged 5 commits into from
Aug 23, 2024
Merged

fix(UVE): update page after changing template #29695

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5743490
fix(UVE): update page after changing template
rjvelazco Aug 21, 2024
3c29963
dev: cover tests
rjvelazco Aug 21, 2024
881246b
Merge branch 'master' into issue-29034-templates-the-template-dropdow…
rjvelazco Aug 21, 2024
94ca344
Merge branch 'master' into issue-29034-templates-the-template-dropdow…
rjvelazco Aug 21, 2024
1ee7b85
feedback: improve tests
rjvelazco Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion ...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,8 @@ describe('DotEmaShellComponent', () => {
{
icon: 'pi-ellipsis-v',
label: 'editema.editor.navbar.properties',
id: 'properties'
id: 'properties',
isDisabled: false
}
]);
});
Expand Down
66 changes: 38 additions & 28 deletions .../libs/portlets/edit-ema/portlet/src/lib/edit-ema-layout/edit-ema-layout.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
DotRouterService
} from '@dotcms/data-access';
import { CoreWebService, LoginService } from '@dotcms/dotcms-js';
import { DotPageRender } from '@dotcms/dotcms-models';
import { TemplateBuilderComponent, TemplateBuilderModule } from '@dotcms/template-builder';
import {
DotExperimentsServiceMock,
Expand All @@ -33,8 +34,36 @@ import { EditEmaLayoutComponent } from './edit-ema-layout.component';

import { DotActionUrlService } from '../services/dot-action-url/dot-action-url.service';
import { DotPageApiService } from '../services/dot-page-api.service';
import { UVE_STATUS } from '../shared/enums';
import { UVEStore } from '../store/dot-uve.store';

const PAGE_RESPONSE = {
containers: {},
page: {
identifier: 'test'
},
template: {
theme: 'testTheme'
},
layout: {
body: {
rows: [
{
columns: [
{
containers: [
{
identifier: 'test'
}
]
}
]
}
]
}
}
};

describe('EditEmaLayoutComponent', () => {
let spectator: Spectator<EditEmaLayoutComponent>;
let component: EditEmaLayoutComponent;
Expand Down Expand Up @@ -72,32 +101,7 @@ describe('EditEmaLayoutComponent', () => {
provide: DotPageApiService,
useValue: {
get: () => {
return of({
containers: {},
page: {
identifier: 'test'
},
template: {
theme: 'testTheme'
},
layout: {
body: {
rows: [
{
columns: [
{
containers: [
{
identifier: 'test'
}
]
}
]
}
]
}
}
});
return of(PAGE_RESPONSE);
rjvelazco marked this conversation as resolved.
Show resolved Hide resolved
}
}
},
Expand Down Expand Up @@ -136,7 +140,7 @@ describe('EditEmaLayoutComponent', () => {
spectator = createComponent();
component = spectator.component;
dotRouter = spectator.inject(DotRouterService);
store = spectator.inject(UVEStore);
store = spectator.inject(UVEStore, true);
layoutService = spectator.inject(DotPageLayoutService);
messageService = spectator.inject(MessageService);

Expand Down Expand Up @@ -166,12 +170,18 @@ describe('EditEmaLayoutComponent', () => {
});

it('should trigger a save after 5 secs', fakeAsync(() => {
const layoutServiceSave = jest.spyOn(layoutService, 'save');
const layoutServiceSave = jest
.spyOn(layoutService, 'save')
.mockReturnValue(of(PAGE_RESPONSE as unknown as DotPageRender));
rjvelazco marked this conversation as resolved.
Show resolved Hide resolved
const updatePageResponseSpy = jest.spyOn(store, 'updatePageResponse');
const setUveStatusSpy = jest.spyOn(store, 'setUveStatus');

templateBuilder.templateChange.emit();
tick(5000);

expect(layoutServiceSave).toHaveBeenCalled();
expect(updatePageResponseSpy).toHaveBeenCalledWith(PAGE_RESPONSE);
expect(setUveStatusSpy).toHaveBeenCalledWith(UVE_STATUS.LOADING);

expect(addMock).toHaveBeenNthCalledWith(1, {
severity: 'info',
Expand Down
16 changes: 11 additions & 5 deletions core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-layout/edit-ema-layout.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,16 @@ import {
finalize,
switchMap,
take,
takeUntil
takeUntil,
tap
} from 'rxjs/operators';

import { DotMessageService, DotPageLayoutService, DotRouterService } from '@dotcms/data-access';
import { DotPageRender, DotTemplateDesigner } from '@dotcms/dotcms-models';
import { TemplateBuilderModule } from '@dotcms/template-builder';

import { DotPageApiResponse } from '../services/dot-page-api.service';
import { UVE_STATUS } from '../shared/enums';
import { UVEStore } from '../store/dot-uve.store';

export const DEBOUNCE_TIME = 5000;
Expand Down Expand Up @@ -110,6 +113,7 @@ export class EditEmaLayoutComponent implements OnInit, OnDestroy {
.pipe(
// debounceTime should be before takeUntil to avoid calling the observable after unsubscribe.
// More information: https://stackoverflow.com/questions/58974320/how-is-it-possible-to-stop-a-debounced-rxjs-observable
tap(() => this.uveStore.setUveStatus(UVE_STATUS.LOADING)), // Prevent the user to access page properties
debounceTime(DEBOUNCE_TIME),
takeUntil(this.destroy$),
switchMap((layout: DotTemplateDesigner) => {
Expand Down Expand Up @@ -138,17 +142,17 @@ export class EditEmaLayoutComponent implements OnInit, OnDestroy {
* Handle the success save template
*
* @private
* @param {DotPageRender} _
* @template T
* @param {T=unkonwm} page // To avoid getting type error with DotPageRender and DotPageApiResponse
* @memberof EditEmaLayoutComponent
*/
private handleSuccessSaveTemplate(page: DotPageRender): void {
private handleSuccessSaveTemplate<T = unknown>(page: T): void {
rjvelazco marked this conversation as resolved.
Show resolved Hide resolved
this.messageService.add({
severity: 'success',
summary: 'Success',
detail: this.dotMessageService.get('dot.common.message.saved')
});

this.uveStore.updateLayout(page.layout);
this.uveStore.updatePageResponse(page as DotPageApiResponse);
}

/**
Expand All @@ -164,6 +168,8 @@ export class EditEmaLayoutComponent implements OnInit, OnDestroy {
summary: 'Error',
detail: this.dotMessageService.get('dot.common.http.error.400.message')
});

this.uveStore.setUveStatus(UVE_STATUS.ERROR);
}

/**
Expand Down
83 changes: 43 additions & 40 deletions core-web/libs/portlets/edit-ema/portlet/src/lib/shared/mocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -669,6 +669,48 @@ export const ACTION_PAYLOAD_MOCK: ActionPayload = {
position: 'after'
};

export const BASE_SHELL_ITEMS = [
{
icon: 'pi-file',
label: 'editema.editor.navbar.content',
href: 'content',
id: 'content'
},
{
icon: 'pi-table',
label: 'editema.editor.navbar.layout',
href: 'layout',
id: 'layout',
isDisabled: false,
tooltip: null
},
{
icon: 'pi-sliders-h',
label: 'editema.editor.navbar.rules',
id: 'rules',
href: `rules/${MOCK_RESPONSE_HEADLESS.page.identifier}`,
isDisabled: false
},
{
iconURL: 'experiments',
label: 'editema.editor.navbar.experiments',
href: `experiments/${MOCK_RESPONSE_HEADLESS.page.identifier}`,
id: 'experiments',
isDisabled: false
},
{
icon: 'pi-th-large',
label: 'editema.editor.navbar.page-tools',
id: 'page-tools'
},
{
icon: 'pi-ellipsis-v',
label: 'editema.editor.navbar.properties',
id: 'properties',
isDisabled: false
}
];

export const BASE_SHELL_PROPS_RESPONSE = {
canRead: true,
error: null,
Expand All @@ -683,46 +725,7 @@ export const BASE_SHELL_PROPS_RESPONSE = {
currentUrl: '/test-url',
requestHostName: 'http://localhost:3000'
},
items: [
{
icon: 'pi-file',
label: 'editema.editor.navbar.content',
href: 'content',
id: 'content'
},
{
icon: 'pi-table',
label: 'editema.editor.navbar.layout',
href: 'layout',
id: 'layout',
isDisabled: false,
tooltip: null
},
{
icon: 'pi-sliders-h',
label: 'editema.editor.navbar.rules',
id: 'rules',
href: `rules/${MOCK_RESPONSE_HEADLESS.page.identifier}`,
isDisabled: false
},
{
iconURL: 'experiments',
label: 'editema.editor.navbar.experiments',
href: `experiments/${MOCK_RESPONSE_HEADLESS.page.identifier}`,
id: 'experiments',
isDisabled: false
},
{
icon: 'pi-th-large',
label: 'editema.editor.navbar.page-tools',
id: 'page-tools'
},
{
icon: 'pi-ellipsis-v',
label: 'editema.editor.navbar.properties',
id: 'properties'
}
]
items: BASE_SHELL_ITEMS
};

export const UVE_PAGE_RESPONSE_MAP = {
Expand Down
41 changes: 39 additions & 2 deletions core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { EDITOR_STATE, UVE_STATUS } from '../shared/enums';
import {
ACTION_MOCK,
ACTION_PAYLOAD_MOCK,
BASE_SHELL_ITEMS,
BASE_SHELL_PROPS_RESPONSE,
EMA_DRAG_ITEM_CONTENTLET_MOCK,
getBoundsMock,
Expand Down Expand Up @@ -166,6 +167,23 @@ describe('UVEStore', () => {
it('should return the shell props for Headless Pages', () => {
expect(store.$shellProps()).toEqual(BASE_SHELL_PROPS_RESPONSE);
});
it('should return the shell props with property item disable when loading', () => {
store.setUveStatus(UVE_STATUS.LOADING);
const baseItems = BASE_SHELL_ITEMS.slice(0, BASE_SHELL_ITEMS.length - 1);

expect(store.$shellProps()).toEqual({
...BASE_SHELL_PROPS_RESPONSE,
items: [
...baseItems,
{
icon: 'pi-ellipsis-v',
label: 'editema.editor.navbar.properties',
id: 'properties',
isDisabled: true
}
]
});
});
it('should return the error for 404', () => {
patchState(store, { errorCode: 404 });

Expand Down Expand Up @@ -258,7 +276,8 @@ describe('UVEStore', () => {
{
icon: 'pi-ellipsis-v',
label: 'editema.editor.navbar.properties',
id: 'properties'
id: 'properties',
isDisabled: false
}
]
});
Expand Down Expand Up @@ -337,6 +356,23 @@ describe('UVEStore', () => {
expect(store.status()).toBe(UVE_STATUS.LOADING);
});
});

describe('updatePageResponse', () => {
it('should update the page response', () => {
const pageAPIResponse = {
...MOCK_RESPONSE_HEADLESS,
page: {
...MOCK_RESPONSE_HEADLESS.page,
title: 'New title'
}
};

store.updatePageResponse(pageAPIResponse);

expect(store.pageAPIResponse()).toEqual(pageAPIResponse);
expect(store.status()).toBe(UVE_STATUS.LOADED);
});
});
});

describe('withLoad', () => {
Expand Down Expand Up @@ -556,7 +592,8 @@ describe('UVEStore', () => {
layout: MOCK_RESPONSE_HEADLESS.layout,
template: {
identifier: MOCK_RESPONSE_HEADLESS.template.identifier,
themeId: MOCK_RESPONSE_HEADLESS.template.theme
themeId: MOCK_RESPONSE_HEADLESS.template.theme,
anonymous: false
},
pageId: MOCK_RESPONSE_HEADLESS.page.identifier
});
Expand Down
Loading