MWPW-191059: route Studio preview through MAS gateway

.gitignore

@@ -36,6 +36,7 @@ nala/.auth/
 /agents/
 reports/
 /.superpowers
+docs/superpowers/
 .logs
 
 # IO Runtime Config

io/www/src/fragment/utils/paths.js

@@ -2,6 +2,8 @@ const MAS_ROOT = '/content/dam/mas';
 
 const FRAGMENT_URL_PREFIX = 'https://odin.adobe.com/adobe/sites/fragments';
 
+const GATEWAY_PREVIEW_URL = 'https://preview.mas.corp.adobe.com/adobe/contentFragments';
+
 const PATH_TOKENS = /\/content\/dam\/mas\/(?<surface>[\w-_]+)\/(?<parsedLocale>[\w-_]+)\/(?<fragmentPath>.+)/;
 
 function rootURL(preview) {
@@ -43,4 +45,4 @@ function odinUrl(surface, { locale, fragmentPath, preview }) {
     return `${rootURL(preview)}?path=${MAS_ROOT}/${surface}/${locale}/${fragmentPath}`;
 }
 
-export { PATH_TOKENS, FRAGMENT_URL_PREFIX, MAS_ROOT, odinUrl, odinId, odinReferences };
+export { PATH_TOKENS, FRAGMENT_URL_PREFIX, GATEWAY_PREVIEW_URL, MAS_ROOT, odinUrl, odinId, odinReferences };

io/www/test/client/fragment-client.test.js

@@ -29,7 +29,7 @@ const localStorageStub = {
 let objectKeysStub;
 
 describe('FragmentClient', () => {
-    const baseUrl = 'https://odinpreview.corp.adobe.com/adobe/sites/cf/fragments';
+    const baseUrl = 'https://preview.mas.corp.adobe.com/adobe/contentFragments';
     let fetchStub;
 
     before(() => {
@@ -42,6 +42,7 @@ describe('FragmentClient', () => {
         // Stub window.localStorage
         globalThis.window = globalThis.window || { localStorage: {} };
         sinon.stub(globalThis.window, 'localStorage').value(localStorageStub);
+        globalThis.window.adobeIMS = { getAccessToken: () => ({ token: 'test-ims-token' }) };
         globalThis.localStorage = localStorageStub;
         objectKeysStub = sinon.stub(Object, 'keys').callThrough();
         objectKeysStub.withArgs(localStorageStub).callsFake(() => Object.keys(storage));

io/www/test/fragment/paths.test.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { PATH_TOKENS, odinReferences, FRAGMENT_URL_PREFIX } from '../../src/fragment/utils/paths.js';
+import { PATH_TOKENS, odinReferences, FRAGMENT_URL_PREFIX, GATEWAY_PREVIEW_URL } from '../../src/fragment/utils/paths.js';
 
 describe('PATH_TOKENS', () => {
     it('should work with adobe-home surface', async () => {
@@ -27,3 +27,9 @@ describe('odinReferences', () => {
         expect(result).to.equal(`${FRAGMENT_URL_PREFIX}/test-id`);
     });
 });
+
+describe('GATEWAY_PREVIEW_URL', () => {
+    it('should point to the MAS preview gateway', () => {
+        expect(GATEWAY_PREVIEW_URL).to.equal('https://preview.mas.corp.adobe.com/adobe/contentFragments');
+    });
+});

io/www/test/fragment/pipeline.test.js

@@ -41,11 +41,11 @@ const EXPECTED_HEADERS = {
 
 const SETTINGS_INDEX_URL_SANDBOX = 'https://odin.adobe.com/adobe/sites/fragments?path=/content/dam/mas/sandbox/settings/index';
 const SETTINGS_INDEX_URL_PREVIEW =
-    'https://odinpreview.corp.adobe.com/adobe/sites/cf/fragments?path=/content/dam/mas/sandbox/settings/index';
+    'https://preview-p22655-e59433.adobeaemcloud.com/adobe/contentFragments?path=/content/dam/mas/sandbox/settings/index';
 const SETTINGS_CONTENT_URL = (settingsId) =>
     `https://odin.adobe.com/adobe/sites/fragments/${settingsId}?references=all-hydrated`;
 const SETTINGS_CONTENT_URL_PREVIEW = (settingsId) =>
-    `https://odinpreview.corp.adobe.com/adobe/sites/cf/fragments/${settingsId}?references=all-hydrated`;
+    `https://preview-p22655-e59433.adobeaemcloud.com/adobe/contentFragments/${settingsId}?references=all-hydrated`;
 
 function mockSettings(fetchStub, preview = false, settingsId = 'settings-id') {
     const indexUrl = preview ? SETTINGS_INDEX_URL_PREVIEW : SETTINGS_INDEX_URL_SANDBOX;
@@ -60,8 +60,8 @@ function setupFragmentMocks(fetchStub, { id, path, fields = {} }, preview = fals
     // setup settings mocks so pipeline context gets settings
     mockSettings(fetchStub, preview);
 
-    const odinDomain = `https://${preview ? 'odinpreview.corp' : 'odin'}.adobe.com`;
-    const odinUriRoot = preview ? '/adobe/sites/cf/fragments' : '/adobe/sites/fragments';
+    const odinDomain = preview ? 'https://preview-p22655-e59433.adobeaemcloud.com' : 'https://odin.adobe.com';
+    const odinUriRoot = preview ? '/adobe/contentFragments' : '/adobe/sites/fragments';
     // english fragment by id
     fetchStub
         .withArgs(`${odinDomain}${odinUriRoot}/some-en-us-fragment?references=all-hydrated`)
@@ -180,7 +180,7 @@ describe('pipeline full use case', () => {
         const result = await getFragment({
             id: 'some-en-us-fragment',
             preview: {
-                url: 'https://odinpreview.corp.adobe.com/adobe/sites/cf/fragments',
+                url: 'https://preview-p22655-e59433.adobeaemcloud.com/adobe/contentFragments',
             },
             state: state,
             locale: 'fr_FR',

io/www/test/fragment/replace.test.js

@@ -40,8 +40,8 @@ const mockDictionaryBySurfaceLocale = (
     dictionaryResponse = DICTIONARY_RESPONSE,
     stub = fetchStub,
 ) => {
-    const odinDomain = `https://${preview ? 'odinpreview.corp' : 'odin'}.adobe.com`;
-    const odinUriRoot = preview ? '/adobe/sites/cf/fragments' : '/adobe/sites/fragments';
+    const odinDomain = preview ? 'https://preview-p22655-e59433.adobeaemcloud.com' : 'https://odin.adobe.com';
+    const odinUriRoot = preview ? '/adobe/contentFragments' : '/adobe/sites/fragments';
     const dictionaryId = dictionaryIdFor(surface, locale);
 
     stub.withArgs(`${odinDomain}${odinUriRoot}?path=/content/dam/mas/${surface}/${locale}/dictionary/index`).returns(

nala/studio/regional-variations/specs/variations.spec.js

@@ -157,7 +157,7 @@ export default {
                 locale: 'en_CA',
                 localeName: 'Canada',
                 price: PRICE_PATTERN.CA.mo,
-                referencesBaseUrl: 'https://odinpreview.corp.adobe.com/adobe/sites/cf/fragments',
+                referencesBaseUrl: 'https://preview.mas.corp.adobe.com/adobe/contentFragments',
                 editedTitle: '[selfref] Edited title',
             },
             tags: '@mas-studio @regional-variations',

studio/libs/fragment-client.js

@@ -6,6 +6,7 @@
 // Import the modules
 import { logDebug, logError } from '../../io/www/src/fragment/utils/log.js';
 import { getRequestMetadata, storeRequestMetadata, extractContextFromMetadata } from '../../io/www/src/fragment/utils/cache.js';
+import { GATEWAY_PREVIEW_URL } from '../../io/www/src/fragment/utils/paths.js';
 import { transformer as corrector } from '../../io/www/src/fragment/transformers/corrector.js';
 import { transformer as fetchFragment } from '../../io/www/src/fragment/transformers/fetchFragment.js';
 import { clearDictionaryCache, getDictionary, transformer as replace } from '../../io/www/src/fragment/transformers/replace.js';
@@ -34,16 +35,22 @@ class LocaleStorageState {
     }
 }
 
+function getPreviewContext() {
+    return {
+        preview: { url: GATEWAY_PREVIEW_URL },
+    };
+}
+
 const DEFAULT_CONTEXT = {
     status: 200,
-    preview:{
-        url: 'https://odinpreview.corp.adobe.com/adobe/sites/cf/fragments',
+    preview: {
+        url: GATEWAY_PREVIEW_URL,
     },
     requestId: 'preview',
     state: new LocaleStorageState(),
     networkConfig: {
         mainTimeout: 20000,
-        fetchTimeout: 15000,
+        fetchTimeout: 4000,
         retries: 3,
     },
     locale: 'en_US',
@@ -67,7 +74,8 @@ async function previewFragment(id, options) {
     const locale = serviceElement?.getAttribute('locale');
     const country = serviceElement?.getAttribute('country');
     let context = { ...DEFAULT_CONTEXT, locale, country, ...options, id, api_key: 'fragment-client' };
-    const initPromises = {};    
+
+    const initPromises = {};
     const cachedMetadata = await getRequestMetadata(context);
     const metadataContext = extractContextFromMetadata(cachedMetadata);
     context = { ...context, ...metadataContext };
@@ -80,6 +88,7 @@ async function previewFragment(id, options) {
                     ...structuredClone(context),
                     promises: initPromises,
                     fragmentsIds: context.fragmentsIds,
+                    DEFAULT_HEADERS: context.DEFAULT_HEADERS,
                 };
                 initContext.loggedTransformer = `${transformer.name}-init`;
                 logDebug(() => `Initializing transformer ${transformer.name}`, initContext);
@@ -151,4 +160,4 @@ async function previewStudioFragment(body, options) {
     return context.body;
 }
 
-export { clearCaches, previewFragment, previewStudioFragment, customize, settings, replace, getDictionary, corrector };
+export { clearCaches, getPreviewContext, previewFragment, previewStudioFragment, customize, settings, replace, getDictionary, corrector };

studio/src/constants.js

@@ -261,6 +261,3 @@ export const TABLE_TYPE = {
 };
 
 export const TRANSLATIONS_ALLOWED_SURFACES = ['acom', 'acom-cc', 'acom-dc', 'express', 'sandbox', 'nala'];
-
-/** Base URL for Odin preview fragment-by-path checks (e.g. fil_PH .json endpoint). */
-export const ODIN_PREVIEW_ORIGIN = 'https://odinpreview.corp.adobe.com';

studio/src/mas-fragment-editor.js

@@ -9,10 +9,10 @@ import {
     CARD_MODEL_PATH,
     COLLECTION_MODEL_PATH,
     MAS_PRODUCT_CODE_PREFIX,
-    ODIN_PREVIEW_ORIGIN,
     PAGE_NAMES,
     TAG_PROMOTION_PREFIX,
 } from './constants.js';
+import { GATEWAY_PREVIEW_URL } from '../../io/www/src/fragment/utils/paths.js';
 import router from './router.js';
 import { VARIANTS } from './editors/variant-picker.js';
 import { extractLocaleFromPath, generateCodeToUse, getFragmentMapping, replaceLocaleInPath, showToast } from './utils.js';
@@ -891,6 +891,14 @@ export default class MasFragmentEditor extends LitElement {
         return null;
     }
 
+    async fetchFragmentIdByPath(path) {
+        const url = `${GATEWAY_PREVIEW_URL}?path=${encodeURIComponent(path)}`;
+        const res = await fetch(url);
+        if (!res.ok) return null;
+        const data = await res.json().catch(() => ({}));
+        return data.items?.[0]?.id ?? null;
+    }
+
     async updateTranslatedLocalesStore(isVariation, fragmentPath) {
         // Only fetch translations for default fragments, not variations
         if (isVariation) {
@@ -918,17 +926,12 @@ export default class MasFragmentEditor extends LitElement {
             if (isFilPh && fragmentPath) {
                 const enUsPath = replaceLocaleInPath(fragmentPath, 'en_US');
                 if (enUsPath) {
-                    const enUsUrl = `${ODIN_PREVIEW_ORIGIN}${enUsPath}.json`;
-                    const res = await fetch(enUsUrl);
-                    if (res.ok) {
-                        const data = await res.json().catch(() => ({}));
-                        const enUsFragmentId = data['jcr:uuid'];
-                        if (enUsFragmentId) {
-                            const requestPromise = this.repository.aem.sites.cf.fragments.getTranslations(enUsFragmentId);
-                            this.#translatedLocalesRequest.requestPromise = requestPromise;
-                            const result = await requestPromise;
-                            languageCopies = result.languageCopies ?? [];
-                        }
+                    const enUsFragmentId = await this.fetchFragmentIdByPath(enUsPath);
+                    if (enUsFragmentId) {
+                        const requestPromise = this.repository.aem.sites.cf.fragments.getTranslations(enUsFragmentId);
+                        this.#translatedLocalesRequest.requestPromise = requestPromise;
+                        const result = await requestPromise;
+                        languageCopies = result.languageCopies ?? [];
                     }
                 }
             }
@@ -958,11 +961,9 @@ export default class MasFragmentEditor extends LitElement {
                     const filPhPath = replaceLocaleInPath(fragmentPath, filPhLocale);
                     if (filPhPath) {
                         try {
-                            const filPhUrl = `${ODIN_PREVIEW_ORIGIN}${filPhPath}.json`;
-                            const res = await fetch(filPhUrl);
-                            if (res.ok) {
-                                const data = await res.json().catch(() => ({}));
-                                locales = [...locales, { locale: filPhLocale, id: data['jcr:uuid'] ?? null, path: filPhPath }];
+                            const filPhId = await this.fetchFragmentIdByPath(filPhPath);
+                            if (filPhId !== null) {
+                                locales = [...locales, { locale: filPhLocale, id: filPhId, path: filPhPath }];
                             }
                         } catch {
                             // No fil_PH for this fragment.

studio/src/mas-repository.js

@@ -38,7 +38,7 @@ import { Placeholder } from './aem/placeholder.js';
 import { getFragmentName } from './translation/translation-utils.js';
 import generateFragmentStore from './reactivity/source-fragment-store.js';
 import { getDefaultLocaleCode } from '../../io/www/src/fragment/locales.js';
-import { getDictionary } from '../libs/fragment-client.js';
+import { getDictionary, getPreviewContext } from '../libs/fragment-client.js';
 import { applyCorrectorToFragment } from './utils/corrector-helper.js';
 import { Promotion } from './aem/promotion.js';
 
@@ -793,9 +793,7 @@ export class MasRepository extends LitElement {
                 // If result is empty and locale isn't en_US, try fallback
                 if ((!result || Object.keys(result).length === 0) && this.filters.value.locale !== 'en_US') {
                     const fallbackContext = {
-                        preview: {
-                            url: 'https://odinpreview.corp.adobe.com/adobe/sites/cf/fragments',
-                        },
+                        ...getPreviewContext(),
                         locale: 'en_US',
                         surface: this.search.value.path,
                         signal: this.#abortControllers.placeholders?.signal,
@@ -821,9 +819,7 @@ export class MasRepository extends LitElement {
 
     async fetchDictionary(abortController) {
         const context = {
-            preview: {
-                url: 'https://odinpreview.corp.adobe.com/adobe/sites/cf/fragments',
-            },
+            ...getPreviewContext(),
             locale: this.filters.value.locale,
             surface: this.search.value.path,
             networkConfig: {
@@ -2169,7 +2165,7 @@ export class MasRepository extends LitElement {
 
     /**
      * Populates the store with addon placeholders by filtering for keys that start with 'addon-'
-     * Uses the preview dictionary (loaded via odinpreview) instead of slow AEM search
+     * Uses the preview dictionary (loaded via preview gateway) instead of slow AEM search
      */
     async loadAddonPlaceholders() {
         const currentOptions = this.#dedupeAddonOptions(Store.placeholders.addons.data.get());

studio/test/mas-fragment-editor.test.js

@@ -5,7 +5,8 @@ import MasFragmentEditor from '../src/mas-fragment-editor.js';
 import Store from '../src/store.js';
 import { Fragment } from '../src/aem/fragment.js';
 import generateFragmentStore, { SourceFragmentStore } from '../src/reactivity/source-fragment-store.js';
-import { PAGE_NAMES, CARD_MODEL_PATH, ODIN_PREVIEW_ORIGIN } from '../src/constants.js';
+import { PAGE_NAMES, CARD_MODEL_PATH } from '../src/constants.js';
+import { GATEWAY_PREVIEW_URL } from '../../io/www/src/fragment/utils/paths.js';
 import router from '../src/router.js';
 import Events from '../src/events.js';
 import { extractLocaleFromPath } from '../src/utils.js';
@@ -469,7 +470,7 @@ describe('MasFragmentEditor', () => {
 
                 const fetchStub = sandbox.stub(window, 'fetch').resolves({
                     ok: true,
-                    json: () => Promise.resolve({ 'jcr:uuid': 'fil-ph-frag-id' }),
+                    json: () => Promise.resolve({ items: [{ id: 'fil-ph-frag-id' }] }),
                 });
 
                 await el.updateTranslatedLocalesStore(false, fragmentPath);
@@ -484,7 +485,7 @@ describe('MasFragmentEditor', () => {
                 });
                 expect(fetchStub.calledOnce).to.be.true;
                 expect(fetchStub.firstCall.args[0]).to.equal(
-                    `${ODIN_PREVIEW_ORIGIN}/content/dam/mas/acom/fil_PH/my-fragment.json`,
+                    `${GATEWAY_PREVIEW_URL}?path=${encodeURIComponent('/content/dam/mas/acom/fil_PH/my-fragment')}`,
                 );
             } finally {
                 Store.fragmentEditor.translatedLocales.value = originalTranslatedLocales;
@@ -660,7 +661,7 @@ describe('MasFragmentEditor', () => {
             }
         });
 
-        it('adds fil_PH with id null when response json has no id', async () => {
+        it('skips fil_PH entry when response json has no id', async () => {
             const el = document.createElement('mas-fragment-editor');
             const originalTranslatedLocales = Store.fragmentEditor.translatedLocales.value;
             try {
@@ -676,14 +677,14 @@ describe('MasFragmentEditor', () => {
                 el.editorContextStore = { isVariation: sandbox.stub().returns(false) };
                 sandbox.stub(window, 'fetch').resolves({
                     ok: true,
-                    json: () => Promise.resolve({}),
+                    json: () => Promise.resolve({ items: [] }),
                 });
 
                 await el.updateTranslatedLocalesStore(false, '/content/dam/mas/acom/en_US/my-fragment');
 
                 const locales = Store.fragmentEditor.translatedLocales.get();
                 const filPh = locales.find((l) => l.locale === 'fil_PH');
-                expect(filPh).to.deep.include({ locale: 'fil_PH', id: null, path: '/content/dam/mas/acom/fil_PH/my-fragment' });
+                expect(filPh).to.be.undefined;
             } finally {
                 Store.fragmentEditor.translatedLocales.value = originalTranslatedLocales;
                 Store.fragmentEditor.fragmentId.value = null;
@@ -712,7 +713,7 @@ describe('MasFragmentEditor', () => {
                 el.editorContextStore = { isVariation: sandbox.stub().returns(false) };
                 const fetchStub = sandbox.stub(window, 'fetch').resolves({
                     ok: true,
-                    json: () => Promise.resolve({ 'jcr:uuid': enUsFragmentId }),
+                    json: () => Promise.resolve({ items: [{ id: enUsFragmentId }] }),
                 });
 
                 await el.updateTranslatedLocalesStore(false, filPhPath);
@@ -721,7 +722,7 @@ describe('MasFragmentEditor', () => {
                 expect(locales).to.have.lengthOf(3);
                 expect(getTranslations.calledOnceWith(enUsFragmentId)).to.be.true;
                 expect(fetchStub.firstCall.args[0]).to.equal(
-                    `${ODIN_PREVIEW_ORIGIN}/content/dam/mas/acom/en_US/my-fragment.json`,
+                    `${GATEWAY_PREVIEW_URL}?path=${encodeURIComponent('/content/dam/mas/acom/en_US/my-fragment')}`,
                 );
                 const enUs = locales.find((l) => l.locale === 'en_US');
                 expect(enUs).to.deep.include({