From 795262924a299f7b269acbb1ab854090ae56c4cf Mon Sep 17 00:00:00 2001 From: Rafael Velazco Date: Thu, 15 Aug 2024 15:36:35 -0400 Subject: [PATCH] fix(UVE): Copy URL Button doesnt work (#29600) ### Proposed Changes * Make the Copy URL Button work ### Video https://github.com/user-attachments/assets/3655ec64-2b7d-4616-ad8f-53fcd8aeef93 --- .../edit-ema-toolbar.component.spec.ts | 4 +- .../src/lib/store/dot-uve.store.spec.ts | 4 +- .../editor/toolbar/withEditorToolbar.ts | 10 +++-- .../edit-ema/portlet/src/lib/utils/index.ts | 21 +++++++-- .../portlet/src/lib/utils/utils.spec.ts | 44 ++++++++++++++++++- 5 files changed, 70 insertions(+), 13 deletions(-) diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.spec.ts index 08625ab24f71..edb8d8c44965 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.spec.ts @@ -47,7 +47,7 @@ import { sanitizeURL, createPageApiUrlWithQueryParams, createFavoritePagesURL, - createPureURL + createFullURL } from '../../../utils'; import { DotEditEmaWorkflowActionsComponent } from '../dot-edit-ema-workflow-actions/dot-edit-ema-workflow-actions.component'; import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component'; @@ -160,7 +160,7 @@ describe('EditEmaToolbarComponent', () => { mockProvider(UVEStore, { $toolbarProps: signal({ bookmarksUrl, - copyUrl: createPureURL(params), + copyUrl: createFullURL(params, pageAPIResponse?.site.identifier), apiUrl: `${'http://localhost'}${pageAPI}`, currentLanguage: pageAPIResponse?.viewAs.language, urlContentMap: null, diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.spec.ts index 717fe389e875..51740db95e2a 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.spec.ts @@ -584,10 +584,10 @@ describe('UVEStore', () => { describe('$toolbarProps', () => { it('should return the base info', () => { expect(store.$toolbarProps()).toEqual({ - apiUrl: 'http://localhost/api/v1/page/json/test-url?language_id=1&com.dotmarketing.persona.id=dot%3Apersona&variantName=DEFAULT&clientHost=http%3A%2F%2Flocalhost%3A3000', + apiUrl: '/api/v1/page/json/test-url?language_id=1&com.dotmarketing.persona.id=dot%3Apersona&variantName=DEFAULT&clientHost=http%3A%2F%2Flocalhost%3A3000', bookmarksUrl: '/test-url?host_id=123-xyz-567-xxl&language_id=1', copyUrl: - 'http://localhost:3000/test-url?language_id=1&com.dotmarketing.persona.id=dot%3Apersona&variantName=DEFAULT', + 'http://localhost:3000/test-url?language_id=1&com.dotmarketing.persona.id=dot%3Apersona&variantName=DEFAULT&host_id=123-xyz-567-xxl', currentLanguage: MOCK_RESPONSE_HEADLESS.viewAs.language, deviceSelector: { apiLink: diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withEditorToolbar.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withEditorToolbar.ts index a3dafeefab25..bbe618af9645 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withEditorToolbar.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withEditorToolbar.ts @@ -17,7 +17,7 @@ import { InfoOptions } from '../../../../shared/models'; import { createFavoritePagesURL, createPageApiUrlWithQueryParams, - createPureURL, + createFullURL, getIsDefaultVariant, sanitizeURL, computePageIsLocked @@ -80,11 +80,13 @@ export function withEditorToolbar() { pageURI: url, siteId: pageAPIResponse?.site?.identifier }); + const clientHost = `${params?.clientHost ?? window.location.origin}`; + const siteId = pageAPIResponse?.site?.identifier; return { bookmarksUrl, - copyUrl: createPureURL(params), - apiUrl: `${window.location.origin}${pageAPI}`, + copyUrl: createFullURL(params, siteId), + apiUrl: pageAPI, currentLanguage: pageAPIResponse?.viewAs.language, urlContentMap: store.isEditState() ? (pageAPIResponse?.urlContentMap ?? null) @@ -94,7 +96,7 @@ export function withEditorToolbar() { unlockButton: shouldShowUnlock ? unlockButton : null, showInfoDisplay: shouldShowInfoDisplay, deviceSelector: { - apiLink: `${params?.clientHost ?? window.location.origin}${pageAPI}`, + apiLink: `${clientHost}${pageAPI}`, hideSocialMedia: !store.isTraditionalPage() }, personaSelector: { diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts index c658672f4979..84cd4c71a9e3 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts @@ -271,16 +271,27 @@ export function createFavoritePagesURL(params: { } /** - * Create a pure URL from the params * + * @description Create a full URL with the clientHost * @export * @param {DotPageApiParams} params * @return {*} {string} */ -export function createPureURL(params: DotPageApiParams): string { +/** + * @description Create a full URL with the clientHost + * @export + * @param {DotPageApiParams} params + * @param {string} [siteId] + * @return {*} {string} + */ +export function createFullURL(params: DotPageApiParams, siteId?: string): string { // If we are going to delete properties from the params, we need to make a copy of it const paramsCopy = { ...params }; + if (siteId) { + paramsCopy['host_id'] = siteId; + } + const clientHost = paramsCopy?.clientHost ?? window.location.origin; const url = paramsCopy?.url; @@ -289,9 +300,11 @@ export function createPureURL(params: DotPageApiParams): string { delete paramsCopy?.url; delete paramsCopy?.mode; - const searchParams = new URLSearchParams(paramsCopy as unknown as Record); + const searchParams = new URLSearchParams(paramsCopy); + + const pureURL = new URL(`${url}?${searchParams.toString()}`, clientHost); - return `${clientHost}/${url}?${searchParams.toString()}`; + return pureURL.toString(); } /** diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/utils.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/utils.spec.ts index 0b0869c316f2..051d7a83bd37 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/utils.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/utils.spec.ts @@ -13,7 +13,8 @@ import { mapContainerStructureToArrayOfContainers, mapContainerStructureToDotContainerMap, areContainersEquals, - compareUrlPaths + compareUrlPaths, + createFullURL } from '.'; import { dotPageContainerStructureMock } from '../shared/mocks'; @@ -591,4 +592,45 @@ describe('utils functions', () => { expect(compareUrlPaths('/test', '/test2')).toBe(false); }); }); + + describe('createFullURL', () => { + const expectedURL = + 'http://localhost:4200/page?language_id=1&com.dotmarketing.persona.id=persona&variantName=new&experimentId=1&depth=1'; + const params = { + url: 'page', + language_id: '1', + 'com.dotmarketing.persona.id': 'persona', + variantName: 'new', + experimentId: '1', + mode: 'EDIT_MODE', + clientHost: 'http://localhost:4200/', + depth: '1' + }; + + it('should return the correct url', () => { + const result = createFullURL(params); + expect(result).toBe(expectedURL); + }); + + it('should ignore the double slash in the clientHost or path', () => { + const result = createFullURL({ + ...params, + clientHost: 'http://localhost:4200//', + url: '/page' + }); + expect(result).toBe(expectedURL); + }); + + it('should add the host_id if the side identifier is passed', () => { + const result = createFullURL( + { + ...params, + clientHost: 'http://localhost:4200//', + url: '/page' + }, + '123' + ); + expect(result).toBe(`${expectedURL}${'&host_id=123'}`); + }); + }); });