Skip to content

Commit

Permalink
feat(SDK): Update SDK Library and UVE search bar to Use "personaId" K…
Browse files Browse the repository at this point in the history 
…ey (#31295)

This pull request includes several updates to the `dot-ema-shell` and
related components in the `core-web` library. The primary focus is on
refactoring the code to use a new constant `PERSONA_KEY` instead of
hardcoded persona identifiers and improving the handling of query
parameters.

### Refactoring for `PERSONA_KEY` usage:
*
[`dot-ema-shell.component.spec.ts`](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L49-R49):
Replaced hardcoded persona identifiers with `PERSONA_KEY` in multiple
test cases.
[[1]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L49-R49)
[[2]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L118-R118)
[[3]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L333-R333)
[[4]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L358-R358)
[[5]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L379-R379)
[[6]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L480-R480)
[[7]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L533-R559)
[[8]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L839-R847)
*
[`dot-uve-toolbar.component.spec.ts`](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L40-L50):
Updated tests to use `PERSONA_KEY` for persona-related parameters.
[[1]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L40-L50)
[[2]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L474-R474)
*
[`edit-ema-editor.component.spec.ts`](diffhunk://#diff-34ddc5fbacaf04b962f2037385ed284310d5faf35ba409d5705b2caadd5d796aL399-R399):
Modified tests to replace hardcoded persona identifiers with
`PERSONA_KEY`.
[[1]](diffhunk://#diff-34ddc5fbacaf04b962f2037385ed284310d5faf35ba409d5705b2caadd5d796aL399-R399)
[[2]](diffhunk://#diff-34ddc5fbacaf04b962f2037385ed284310d5faf35ba409d5705b2caadd5d796aL445-R445)
[[3]](diffhunk://#diff-34ddc5fbacaf04b962f2037385ed284310d5faf35ba409d5705b2caadd5d796aL467-R467)

### Codebase improvements:
*
[`dot-ema-shell.component.ts`](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6R40):
Introduced the `normalizeQueryParams` utility function to streamline
query parameter handling and ensure consistency.
[[1]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6R40)
[[2]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6L104-L121)
*
[`dot-uve-toolbar.component.ts`](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30L201-R232):
Refactored the `onPersonaSelected` method to use `PERSONA_KEY` and
improved the confirmation dialog logic for persona selection.
[[1]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30L201-R232)
[[2]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30L268-R268)

### Utility function updates:
* Replaced `createPageApiUrlWithQueryParams` with `buildFullPageURL` in
multiple test files to enhance URL handling and consistency.
[[1]](diffhunk://#diff-652f846aa914e51df03471614a9ffc9b80757f275a3639fe1131def21c40b39dL23-R23)
[[2]](diffhunk://#diff-652f846aa914e51df03471614a9ffc9b80757f275a3639fe1131def21c40b39dL33-R33)
[[3]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L59-R59)

These changes ensure that the codebase is more maintainable and
consistent, particularly in handling persona-related parameters and
query parameters.

### Video


https://github.com/user-attachments/assets/df074781-d62f-4c5a-993a-3363e17109e2
  • Loading branch information
@rjvelazco
rjvelazco authored Feb 3, 2025
1 parent 160c3f3 commit 1edbc7c
Show file tree
Hide file tree
Showing 26 changed files with 375 additions and 234 deletions.
67 changes: 52 additions & 15 deletions ...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import { DotEmaShellComponent } from './dot-ema-shell.component';
import { DotEmaDialogComponent } from '../components/dot-ema-dialog/dot-ema-dialog.component';
import { DotActionUrlService } from '../services/dot-action-url/dot-action-url.service';
import { DotPageApiService } from '../services/dot-page-api.service';
import { DEFAULT_PERSONA, WINDOW } from '../shared/consts';
import { DEFAULT_PERSONA, PERSONA_KEY, WINDOW } from '../shared/consts';
import { FormStatus, NG_CUSTOM_EVENTS } from '../shared/enums';
import {
dotPropertiesServiceMock,
Expand Down Expand Up @@ -115,7 +115,7 @@ const INITIAL_PAGE_PARAMS = {
language_id: 1,
url: 'index',
variantName: 'DEFAULT',
'com.dotmarketing.persona.id': 'modes.persona.no.persona',
[PERSONA_KEY]: 'modes.persona.no.persona',
editorMode: UVE_MODE.EDIT
};

Expand Down Expand Up @@ -330,7 +330,7 @@ describe('DotEmaShellComponent', () => {
spectator.detectChanges();
expect(spyloadPageAsset).toHaveBeenCalledWith({ ...params, url: 'index' });
expect(spyLocation).toHaveBeenCalledWith(
'/?language_id=1&url=index&variantName=DEFAULT&com.dotmarketing.persona.id=modes.persona.no.persona&editorMode=edit'
'/?language_id=1&url=index&variantName=DEFAULT&editorMode=edit'
);
});

Expand All @@ -355,7 +355,7 @@ describe('DotEmaShellComponent', () => {
url: 'some-url/some-nested-url'
});
expect(spyLocation).toHaveBeenCalledWith(
'/?language_id=1&url=some-url%2Fsome-nested-url&variantName=DEFAULT&com.dotmarketing.persona.id=modes.persona.no.persona&editorMode=edit'
'/?language_id=1&url=some-url%2Fsome-nested-url&variantName=DEFAULT&editorMode=edit'
);
});

Expand All @@ -376,7 +376,36 @@ describe('DotEmaShellComponent', () => {
spectator.detectChanges();
expect(spyloadPageAsset).toHaveBeenCalledWith({ ...params, url: 'some-url/' });
expect(spyLocation).toHaveBeenCalledWith(
'/?language_id=1&url=some-url%2F&variantName=DEFAULT&com.dotmarketing.persona.id=modes.persona.no.persona&editorMode=edit'
'/?language_id=1&url=some-url%2F&variantName=DEFAULT&editorMode=edit'
);
});

it('should receive `personaId` query param', () => {
const spyloadPageAsset = jest.spyOn(store, 'loadPageAsset');
const spyLocation = jest.spyOn(location, 'go');

const queryParams = {
url: '/some-url/index',
language_id: 1,
personaId: 'someCoolDude'
};

const expectedParams = {
url: 'some-url/',
[PERSONA_KEY]: 'someCoolDude',
editorMode: 'edit',
language_id: 1
};

overrideRouteSnashot(
activatedRoute,
SNAPSHOT_MOCK({ queryParams, data: UVE_CONFIG_MOCK(BASIC_OPTIONS) })
);

spectator.detectChanges();
expect(spyloadPageAsset).toHaveBeenCalledWith(expectedParams);
expect(spyLocation).toHaveBeenCalledWith(
'/?url=some-url%2F&language_id=1&editorMode=edit&personaId=someCoolDude'
);
});
});
Expand Down Expand Up @@ -477,7 +506,7 @@ describe('DotEmaShellComponent', () => {
expect(spyloadPageAsset).toHaveBeenCalledWith(INITIAL_PAGE_PARAMS);
expect(spyStoreLoadPage).toHaveBeenCalledWith(INITIAL_PAGE_PARAMS);
expect(spyLocation).toHaveBeenCalledWith(
'/?language_id=1&url=index&variantName=DEFAULT&com.dotmarketing.persona.id=modes.persona.no.persona&editorMode=edit'
'/?language_id=1&url=index&variantName=DEFAULT&editorMode=edit'
);
});

Expand Down Expand Up @@ -530,25 +559,33 @@ describe('DotEmaShellComponent', () => {
beforeEach(() => spectator.detectChanges());

it('should update parms when loadPage is triggered', () => {
const newParams = {
language_id: 2,
const baseParams = {
language_id: '2',
url: 'my-awesome-page',
variantName: 'DEFAULT',
'com.dotmarketing.persona.id': 'SomeCoolDude',
editorMode: UVE_MODE.EDIT
};
const pageParams = {
...baseParams,
[PERSONA_KEY]: 'SomeCoolDude'
};

const url = router.createUrlTree([], { queryParams: newParams });
const userParams = {
...baseParams,
personaId: 'SomeCoolDude'
};

const expectURL = router.createUrlTree([], { queryParams: userParams });
const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
const spyUrlTree = jest.spyOn(router, 'createUrlTree');
const spyLocation = jest.spyOn(location, 'go');

store.loadPageAsset(newParams);
store.loadPageAsset(pageParams);
spectator.detectChanges();
expect(spyStoreLoadPage).toHaveBeenCalledWith(newParams);
expect(spyUrlTree).toHaveBeenCalledWith([], { queryParams: newParams });
expect(spyLocation).toHaveBeenCalledWith(url.toString());

expect(spyStoreLoadPage).toHaveBeenCalledWith(pageParams);
expect(spyUrlTree).toHaveBeenCalledWith([], { queryParams: userParams });
expect(spyLocation).toHaveBeenCalledWith(expectURL.toString());
});
});

Expand Down Expand Up @@ -836,7 +873,7 @@ describe('DotEmaShellComponent', () => {
store.loadPageAsset({
url: '/test-url',
language_id: '1',
'com.dotmarketing.persona.id': '1'
[PERSONA_KEY]: '1'
});

spectator.detectChanges();
Expand Down
24 changes: 8 additions & 16 deletions core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,24 +101,12 @@ export class DotEmaShellComponent implements OnInit {
* @memberof DotEmaShellComponent
*/
readonly $updateQueryParamsEffect = effect(() => {
const pageParams = this.uveStore.pageParams();
const viewParams = this.uveStore.viewParams();

if (!pageParams && !viewParams) {
return;
}

const queryParams = {
...(pageParams ?? {}),
...(viewParams ?? {})
};

this.#updateLocation(queryParams);
const params = this.uveStore.$friendlyParams();
this.#updateLocation(params);
});

ngOnInit(): void {
const params = this.#getPageParams();

const viewParams = this.#getViewParams(params.editorMode);

this.uveStore.patchViewParams(viewParams);
Expand Down Expand Up @@ -228,8 +216,12 @@ export class DotEmaShellComponent implements OnInit {
params.editorMode = UVE_MODE.EDIT;
}

if (params.editorMode === UVE_MODE.LIVE && !params.publishDate) {
params.publishDate = new Date().toISOString();
if (params.editorMode === UVE_MODE.LIVE) {
params.publishDate = params.publishDate || new Date().toISOString();
}

if (queryParams['personaId']) {
params['com.dotmarketing.persona.id'] = queryParams['personaId'];
}

return params;
Expand Down
3 changes: 2 additions & 1 deletion ...ve-toolbar/components/dot-editor-mode-selector/dot-editor-mode-selector.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ import { DotMessageService } from '@dotcms/data-access';

import { DotEditorModeSelectorComponent } from './dot-editor-mode-selector.component';

import { PERSONA_KEY } from '../../../../../shared/consts';
import { MOCK_RESPONSE_HEADLESS } from '../../../../../shared/mocks';
import { UVEStore } from '../../../../../store/dot-uve.store';

const pageParams = {
url: 'test-url',
language_id: 'en',
'com.dotmarketing.persona.id': 'modes.persona.no.persona',
[PERSONA_KEY]: 'modes.persona.no.persona',
editorMode: UVE_MODE.EDIT
};

Expand Down
4 changes: 2 additions & 2 deletions ...-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { UVEStore } from '../../../../../store/dot-uve.store';
import { Orientation } from '../../../../../store/models';
import {
sanitizeURL,
createPageApiUrlWithQueryParams,
getFullPageURL,
createFavoritePagesURL,
createFullURL
} from '../../../../../utils';
Expand All @@ -30,7 +30,7 @@ const $apiURL = '/api/v1/page/json/123-xyz-567-xxl?host_id=123-xyz-567-xxl&langu
const params = HEADLESS_BASE_QUERY_PARAMS;
const url = sanitizeURL(params?.url);

const pageAPIQueryParams = createPageApiUrlWithQueryParams(url, params);
const pageAPIQueryParams = getFullPageURL({ url, params });
const pageAPI = `/api/v1/page/${'json'}/${pageAPIQueryParams}`;
const pageAPIResponse = MOCK_RESPONSE_HEADLESS;
const shouldShowInfoDisplay = false || pageAPIResponse?.page.locked;
Expand Down
9 changes: 4 additions & 5 deletions ...t-uve-toolbar/components/edit-ema-persona-selector/edit-ema-persona-selector.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,12 +97,11 @@ export class EditEmaPersonaSelectorComponent implements AfterViewInit, OnChanges
* @memberof EditEmaPersonaSelectorComponent
*/
onSelect({ value }: { value: DotPersona }) {
if (value.identifier !== this.value.identifier) {
this.selected.emit({
...value,
pageId: this.pageId
});
if (value.identifier === this.value.identifier) {
return;
}

this.selected.emit({ ...value, pageId: this.pageId });
}

/**
Expand Down
13 changes: 4 additions & 9 deletions ...tlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,26 +37,21 @@ import { EditEmaPersonaSelectorComponent } from './components/edit-ema-persona-s
import { DotUveToolbarComponent } from './dot-uve-toolbar.component';

import { DotPageApiService } from '../../../services/dot-page-api.service';
import { DEFAULT_DEVICES, DEFAULT_PERSONA } from '../../../shared/consts';
import { DEFAULT_DEVICES, DEFAULT_PERSONA, PERSONA_KEY } from '../../../shared/consts';
import {
HEADLESS_BASE_QUERY_PARAMS,
MOCK_RESPONSE_HEADLESS,
MOCK_RESPONSE_VTL
} from '../../../shared/mocks';
import { UVEStore } from '../../../store/dot-uve.store';
import {
createFavoritePagesURL,
createFullURL,
createPageApiUrlWithQueryParams,
sanitizeURL
} from '../../../utils';
import { getFullPageURL, createFavoritePagesURL, createFullURL, sanitizeURL } from '../../../utils';

const $apiURL = '/api/v1/page/json/123-xyz-567-xxl?host_id=123-xyz-567-xxl&language_id=1';

const params = HEADLESS_BASE_QUERY_PARAMS;
const url = sanitizeURL(params?.url);

const pageAPIQueryParams = createPageApiUrlWithQueryParams(url, params);
const pageAPIQueryParams = getFullPageURL({ url, params });
const pageAPI = `/api/v1/page/${'json'}/${pageAPIQueryParams}`;
const pageAPIResponse = MOCK_RESPONSE_HEADLESS;
const shouldShowInfoDisplay = false || pageAPIResponse?.page.locked;
Expand Down Expand Up @@ -471,7 +466,7 @@ describe('DotUveToolbarComponent', () => {
spectator.detectChanges();

expect(spyloadPageAsset).toHaveBeenCalledWith({
'com.dotmarketing.persona.id': '123'
[PERSONA_KEY]: '123'
});
});

Expand Down
86 changes: 43 additions & 43 deletions ...a/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import { DotUveWorkflowActionsComponent } from './components/dot-uve-workflow-ac
import { EditEmaLanguageSelectorComponent } from './components/edit-ema-language-selector/edit-ema-language-selector.component';
import { EditEmaPersonaSelectorComponent } from './components/edit-ema-persona-selector/edit-ema-persona-selector.component';

import { DEFAULT_DEVICES, DEFAULT_PERSONA } from '../../../shared/consts';
import { DEFAULT_DEVICES, DEFAULT_PERSONA, PERSONA_KEY } from '../../../shared/consts';
import { DotPage } from '../../../shared/models';
import { UVEStore } from '../../../store/dot-uve.store';

Expand Down Expand Up @@ -198,48 +198,48 @@ export class DotUveToolbarComponent {
* @memberof DotEmaComponent
*/
onPersonaSelected(persona: DotPersona & { pageId: string }) {
if (persona.identifier === DEFAULT_PERSONA.identifier || persona.personalized) {
this.#store.loadPageAsset({
'com.dotmarketing.persona.id': persona.identifier
});
} else {
this.#confirmationService.confirm({
header: this.#dotMessageService.get('editpage.personalization.confirm.header'),
message: this.#dotMessageService.get(
'editpage.personalization.confirm.message',
persona.name
),
acceptLabel: this.#dotMessageService.get('dot.common.dialog.accept'),
rejectLabel: this.#dotMessageService.get('dot.common.dialog.reject'),
accept: () => {
this.#personalizeService
.personalized(persona.pageId, persona.keyTag)
.subscribe({
next: () => {
this.#store.loadPageAsset({
'com.dotmarketing.persona.id': persona.identifier
});

this.$personaSelector().fetchPersonas();
},
error: () => {
this.#messageService.add({
severity: 'error',
summary: this.#dotMessageService.get('error'),
detail: this.#dotMessageService.get(
'uve.personalize.empty.page.error'
)
});

this.$personaSelector().resetValue();
}
});
},
reject: () => {
this.$personaSelector().resetValue();
}
});
const existPersona =
persona.identifier === DEFAULT_PERSONA.identifier || persona.personalized;

if (existPersona) {
this.#store.loadPageAsset({ [PERSONA_KEY]: persona.identifier });

return;
}

const confirmationData = {
header: this.#dotMessageService.get('editpage.personalization.confirm.header'),
message: this.#dotMessageService.get(
'editpage.personalization.confirm.message',
persona.name
),
acceptLabel: this.#dotMessageService.get('dot.common.dialog.accept'),
rejectLabel: this.#dotMessageService.get('dot.common.dialog.reject')
};

this.#confirmationService.confirm({
...confirmationData,
accept: () => {
this.#personalizeService.personalized(persona.pageId, persona.keyTag).subscribe({
next: () => {
this.#store.loadPageAsset({ [PERSONA_KEY]: persona.identifier });
this.$personaSelector().fetchPersonas();
},
error: () => {
this.#messageService.add({
severity: 'error',
summary: this.#dotMessageService.get('error'),
detail: this.#dotMessageService.get('uve.personalize.empty.page.error')
});

this.$personaSelector().resetValue();
}
});
},
reject: () => {
this.$personaSelector().resetValue();
}
});
}

/**
Expand All @@ -265,7 +265,7 @@ export class DotUveToolbarComponent {

if (persona.selected) {
this.#store.loadPageAsset({
'com.dotmarketing.persona.id': DEFAULT_PERSONA.identifier
[PERSONA_KEY]: DEFAULT_PERSONA.identifier
});
}
}); // This does a take 1 under the hood
Expand Down
Loading

0 comments on commit 1edbc7c

Please sign in to comment.