diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/lib/page-props-factory/plugins/feaas-themes.ts b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/lib/page-props-factory/plugins/feaas-themes.ts index d7eb509b1d..ae262ceb82 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/lib/page-props-factory/plugins/feaas-themes.ts +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/lib/page-props-factory/plugins/feaas-themes.ts @@ -1,13 +1,14 @@ import { SitecorePageProps } from 'lib/page-props'; import { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs'; import { Plugin } from '..'; +import config from 'temp/config'; class FEeaSThemesPlugin implements Plugin { order = 2; async exec(props: SitecorePageProps) { // Collect FEAAS themes - props.headLinks.push(...getFEAASLibraryStylesheetLinks(props.layoutData)); + props.headLinks.push(...getFEAASLibraryStylesheetLinks(props.layoutData, config.sitecoreEdgeUrl)); return props; } diff --git a/packages/sitecore-jss/src/feaas/themes.test.ts b/packages/sitecore-jss/src/feaas/themes.test.ts index 441e1d14e9..8f1430ae62 100644 --- a/packages/sitecore-jss/src/feaas/themes.test.ts +++ b/packages/sitecore-jss/src/feaas/themes.test.ts @@ -1,8 +1,14 @@ import { expect } from 'chai'; -import { FEAAS_SERVER_URL, getFEAASLibraryStylesheetLinks, getStylesheetUrl } from './themes'; +import { + FEAAS_SERVER_URL_STAGING, + FEAAS_SERVER_URL_BETA, + FEAAS_SERVER_URL_PROD, + getFEAASLibraryStylesheetLinks, + getStylesheetUrl, +} from './themes'; import { ComponentRendering, HtmlElementRendering, LayoutServicePageState } from '../layout'; -describe('utils', () => { +describe.only('themes', () => { describe('getFEAASLibraryStylesheetLinks', () => { const setBasicLayoutData = ( component: ComponentRendering | HtmlElementRendering, @@ -153,7 +159,7 @@ describe('utils', () => { ).to.deep.equal([{ href: getStylesheetUrl('foo'), rel: 'style' }]); }); - it('should return links using custom server url', () => { + it('should return links using non-prod server url', () => { expect( getFEAASLibraryStylesheetLinks( setBasicLayoutData({ @@ -164,11 +170,15 @@ describe('utils', () => { }, }, }), - 'https://foo.net' + 'https://edge-platform-dev.sitecorecloud.io' ) ).to.deep.equal([ { - href: getStylesheetUrl('bar', LayoutServicePageState.Normal, 'https://foo.net'), + href: getStylesheetUrl( + 'bar', + LayoutServicePageState.Normal, + 'https://edge-platform-dev.sitecorecloud.io' + ), rel: 'style', }, ]); @@ -345,7 +355,7 @@ describe('utils', () => { ]); }); - it('should return links using custom server url', () => { + it('should return links using non-prod server url', () => { expect( getFEAASLibraryStylesheetLinks( setBasicLayoutData( @@ -358,12 +368,16 @@ describe('utils', () => { }, LayoutServicePageState.Edit ), - 'https://foo.net' + 'https://edge-platform-dev.sitecorecloud.io' ) ).to.deep.equal([ { rel: 'style', - href: getStylesheetUrl('bar', LayoutServicePageState.Edit, 'https://foo.net'), + href: getStylesheetUrl( + 'bar', + LayoutServicePageState.Edit, + 'https://edge-platform-dev.sitecorecloud.io', + ), }, ]); }); @@ -450,36 +464,62 @@ describe('utils', () => { }); describe('getStylesheetUrl', () => { - it('should return stylesheet url using default server url', () => { + it('should use published css url in Normal mode', () => { const pageState = LayoutServicePageState.Normal; expect(getStylesheetUrl('foo', pageState)).to.equal( - `${FEAAS_SERVER_URL}/styles/foo/published.css` + `${FEAAS_SERVER_URL_PROD}/styles/foo/published.css` ); }); - it('should return stylesheet url using default server url in Edit mode', () => { + it('should use staged css url in Edit mode', () => { const pageState = LayoutServicePageState.Edit; expect(getStylesheetUrl('foo', pageState)).to.equal( - `${FEAAS_SERVER_URL}/styles/foo/staged.css` + `${FEAAS_SERVER_URL_PROD}/styles/foo/staged.css` ); }); - it('should return stylesheet url using default server url in Preview mode', () => { + it('should use staged css url in Preview mode', () => { const pageState = LayoutServicePageState.Preview; expect(getStylesheetUrl('foo', pageState)).to.equal( - `${FEAAS_SERVER_URL}/styles/foo/staged.css` + `${FEAAS_SERVER_URL_PROD}/styles/foo/staged.css` ); }); - it('should return stylesheet url using custom server url', () => { + ['dev', 'qa', 'staging'].map((env) => { + it(`should use staging server url for edge ${env} url`, () => { + const pageState = LayoutServicePageState.Normal; + + expect( + getStylesheetUrl( + 'foo', + pageState, + `https://edge-platform-${env}.sitecore-staging.cloud` + ) + ).to.equal(`${FEAAS_SERVER_URL_STAGING}/styles/foo/published.css`); + }); + }); + + it('should use beta server url for edge preprod url', () => { const pageState = LayoutServicePageState.Normal; - expect(getStylesheetUrl('foo', pageState, 'https://bar.net')).to.equal( - 'https://bar.net/styles/foo/published.css' - ); + expect( + getStylesheetUrl( + 'foo', + pageState, + 'https://edge-platform-pre-production.sitecorecloud.io' + ) + ).to.equal(`${FEAAS_SERVER_URL_BETA}/styles/foo/published.css`); + }); + + it('should use prod server url for edge prod url', () => { + const pageState = LayoutServicePageState.Normal; + + expect( + getStylesheetUrl('foo', pageState, 'https://edge-platform.sitecorecloud.io') + ).to.equal(`${FEAAS_SERVER_URL_PROD}/styles/foo/published.css`); }); }); }); diff --git a/packages/sitecore-jss/src/feaas/themes.ts b/packages/sitecore-jss/src/feaas/themes.ts index 8d7c822094..3ce583f769 100644 --- a/packages/sitecore-jss/src/feaas/themes.ts +++ b/packages/sitecore-jss/src/feaas/themes.ts @@ -21,17 +21,19 @@ type RevisionType = 'staged' | 'published'; */ const FEAAS_LIBRARY_ID_REGEX = /-library--([^\s]+)/; -export const FEAAS_SERVER_URL = 'https://feaas.blob.core.windows.net'; +export const FEAAS_SERVER_URL_STAGING = 'https://feaasstaging.blob.core.windows.net'; +export const FEAAS_SERVER_URL_BETA = 'https://feaasbeta.blob.core.windows.net'; +export const FEAAS_SERVER_URL_PROD = 'https://feaas.blob.core.windows.net'; /** * Walks through rendering tree and returns list of links of all FEAAS Component Library Stylesheets that are used * @param {LayoutServiceData} layoutData Layout service data - * @param {string} [serverUrl] server URL, default is @see {FEAAS_SERVER_URL} url + * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io * @returns {HTMLLink[]} library stylesheet links */ export function getFEAASLibraryStylesheetLinks( layoutData: LayoutServiceData, - serverUrl?: string + sitecoreEdgeUrl = 'https://edge-platform.sitecorecloud.io' ): HTMLLink[] { const ids = new Set(); @@ -40,7 +42,7 @@ export function getFEAASLibraryStylesheetLinks( traverseComponent(layoutData.sitecore.route, ids); return [...ids].map((id) => ({ - href: getStylesheetUrl(id, layoutData.sitecore.context.pageState, serverUrl), + href: getStylesheetUrl(id, layoutData.sitecore.context.pageState, sitecoreEdgeUrl), rel: 'style', })); } @@ -48,12 +50,22 @@ export function getFEAASLibraryStylesheetLinks( export const getStylesheetUrl = ( id: string, pageState?: LayoutServicePageState, - serverUrl?: string + sitecoreEdgeUrl = 'https://edge-platform.sitecorecloud.io' ) => { const revision: RevisionType = pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published'; - return `${serverUrl || FEAAS_SERVER_URL}/styles/${id}/${revision}.css`; + let serverUrl = FEAAS_SERVER_URL_PROD; + if ( + sitecoreEdgeUrl.toLowerCase().includes('edge-platform-dev') || + sitecoreEdgeUrl.toLowerCase().includes('edge-platform-qa') || + sitecoreEdgeUrl.toLowerCase().includes('edge-platform-staging') + ) { + serverUrl = FEAAS_SERVER_URL_STAGING; + } else if (sitecoreEdgeUrl.toLowerCase().includes('edge-platform-pre-production')) { + serverUrl = FEAAS_SERVER_URL_BETA; + } + return `${serverUrl}/styles/${id}/${revision}.css`; }; /**