MWPW-181321 mas-locale-picker #481

npeltier · 2025-12-16T14:48:48Z

move all locale related logic & constants to locales.js file, including a big(ger) LOCALES object containing wether a locale for a given surface should be considered default or regional,
merge all locale pickers (but the mas-variation-creation dialog) to one mas-locale-picker, that can do both top navigation (default languages), and regional ones,
add unit tests,
make work with recent fragment changes, including create variation & fragment editor,
in placeholders change duplicate locale selector to a region selector to be able to edit regional overrides,
in copy to sandbox / nala us new picker too

Resolves https://jira.corp.adobe.com/browse/MWPW-181321
QA Checklist: https://wiki.corp.adobe.com/display/adobedotcom/M@S+Engineering+QA+Use+Cases

Please do the steps below before submitting your PR for a code review or QA

C1. Cover code with Unit Tests
C2. Add a Nala test (double check with #fishbags if nala test is needed)
C3. Verify all Checks are green (unit tests, nala tests)
C4. PR description contains working Test Page link where the feature can be tested
C5: you are ready to do a demo from Test Page in PR (bonus: write a working demo script that you'll use on Thursday, you can eventually put in your PR)
C.6 read your Jira one more time to validate that you've addressed all AC's and nothing is missing

🧪 Nala E2E Tests

Nala tests run automatically when you open this PR.

To run Nala tests again:

Add the run nala label to this PR (in the right sidebar)
Tests will run automatically on the current commit
Any future commits will also trigger tests as long as the label remains

To stop automatic Nala tests:

Remove the run nala label

Note: Tests only run on commits if the run nala label is present. Add the label whenever you need tests to run on new changes.

Test URLs:

Before: https://main--mas--adobecom.aem.live/
After: https://MWPW-181321--mas--adobecom.aem.live/

aem-code-sync · 2025-12-16T14:48:53Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
In case there are problems, just click the checkbox below to rerun the respective action.

Re-sync branch

Commits

70064bd ✅ (latest)
6409d1a ✅
6ec0d33 ✅
b62b300 ✅
47d6ac0 ✅
d2d259b ✅
2e38446 ✅
8229897 ✅
524c0fd ✅
001213f ✅
e482caf ✅
feb0873 ✅
f8b6edf ✅
d87f014 ✅
72a8d0f ✅
671a560 ✅
cb55e88 ✅
2527c40 ✅
4fc41ae ✅
a6e32d3 ✅
bc6fcd7 ✅
1372ce7 ✅
3082c41 ✅
29aae53 ✅
3f82809 ✅
1934efa ✅
86375c3 ✅
717df32 ✅
98fee59 ✅
584d53c ✅

studio/src/placeholders/mas-placeholders-creation-modal.js

studio/src/reactivity/editor-context-store.js

studio/src/mas-copy-dialog.js

yesil · 2025-12-16T16:20:20Z

studio/src/mas-locale-picker.js

+
+    handleLocaleChange(locale) {
+        this.locale = locale;
+        this.dispatchEvent(


updating a Store value would be an option here.
handling events is more verbose.

i didn't want store logic to be within the component, typically the same component is used for different purposes, with different stores update

You are right, I thought about it after I commented as well.

i thought about your comment though :-p and i could pass in an "abstract" store to the component that the later blindly updates. It would save some lines of code, but the event based setup is kind of clear to read imo

studio/src/mas-variation-dialog.js

npeltier · 2025-12-17T16:32:25Z

note a separate ticket has been tracked for flag icons (for now emoticons) https://jira.corp.adobe.com/browse/MWPW-185464

npeltier · 2025-12-18T08:21:07Z

will try to fix nala tests

honstar

Found one issue, the rest LGTM.

studio/src/mas-copy-dialog.js

afmicka · 2025-12-18T14:28:08Z

@npeltier

Should the locale in the URL also change when the region is changed? For now it stays on the first language locale. In the table will be the correct locale once region is changed, but not in the url, can be confusing and also not possible to go directly to the placeholders in the specific locale via url

The languages and regions do not have alphabetical order (or is there a logic?). English is not at the top, but also not in alphabetical order. I guess the languages are sorted by the abbreviation in the brackets, not by the word :D but still no order. These Chinese are added at the very bottom, so also not easy to find. The region menu starts with the UAE (maybe better United States if we are not keeping them sorted)

The table view (render as well) do not have indication of the region. How do one access the fragments in the specific region?
As part of the previous one, when user creates regional variation in lets say EG_en, saves it and clicks on Fragments table, the user is led to the content page in EG_en locale (loads only fragments in that region) but no indication where exactly you are. There is language picker indicating the language, but no country whatsoever, not even in the table. Only by the price currency you could say that you are in some other country (but still don't know which one)

npeltier · 2025-12-19T07:25:16Z

@afmicka

Should the locale in the URL also change when the region is changed? For now it stays on the first language locale. In the table will be the correct locale once region is changed, but not in the url, can be confusing and also not possible to go directly to the placeholders in the specific locale via url

no, locale in the url is bound to top right language section, so when you change region (placeholder or fragment variation), this should stay the same

The languages and regions do not have alphabetical order (or is there a logic?). English is not at the top, but also not in alphabetical order. I guess the languages are sorted by the abbreviation in the brackets, not by the word :D but still no order. These Chinese are added at the very bottom, so also not easy to find. The region menu starts with the UAE (maybe better United States if we are not keeping them sorted)

this should be fixed (alphabetical sort of language/region labels)

The table view (render as well) do not have indication of the region. How do one access the fragments in the specific region?

only through the variation table of a given fragment

As part of the previous one, when user creates regional variation in lets say EG_en, saves it and clicks on Fragments table, the user is led to the content page in EG_en locale (loads only fragments in that region) but no indication where exactly you are. There is language picker indicating the language, but no country whatsoever, not even in the table. Only by the price currency you could say that you are in some other country (but still don't know which one)

this should be fixed

afmicka · 2025-12-19T08:26:59Z

@npeltier without region, the prices on regional variations are in default language/country. For english for example, every country (Argentina, Egypt, etc) has prices in US dollars instead of local currency when you edit them

Also, after creating this AU variation, i go back to Fragments table. It lands me back to default language table (meaning or suggesting to the user that they are back to en_US), but if i click placeholders, it is landing me on en_AU (with selected region). This is misleading experience, not to know in every moment where i am exactly and what am i looking at

Then being in AU region, i clicked to change the region to US since i wanted to be there in the first place, i got "could not load the placeholders" toast and stayed on AU one

npeltier · 2025-12-19T10:53:08Z

@afmicka fixed currency & region state cleanup

afmicka · 2025-12-19T12:45:25Z

@npeltier prices are still in US$ in the editor for existing variations. Only preview is fixed

yesil · 2025-12-19T15:56:01Z

studio/src/mas-fragment-editor.js

-        const masService = getService();
-        masService.setAttribute('locale', Store.localeOrRegion());
-        masService.activate();
+        document.querySelectorAll('mas-commerce-service').forEach((el) => el.remove());


there should be only one mas-commerce-service

yesil · 2025-12-19T15:58:34Z

studio/src/mas-fragment-editor.js

-        masService.setAttribute('locale', Store.localeOrRegion());
-        masService.activate();
+        document.querySelectorAll('mas-commerce-service').forEach((el) => el.remove());
+        const masServiceElement = document.createElement('mas-commerce-service');


instead of doing this, I recommend to cause a re-render of the shadow dom.
ideally, the locale should be a store value.
when updated, a subscription updates the mas-commerce-service
and observer mas-fragment-editor.js would re-render after it.
assuming subscription is registered earlier.

npeltier · 2025-12-19T18:14:31Z

hi @afmicka the last issues we talked about offline are due to mismatch between what is defined in "locales", and what is defined in www/io that has partial (and sometimes different) version of possible default language, see the list:
'ar_MENA',
'bg_BG',
'cs_CZ',
'da_DK',
'de_DE',
'el_GR',
'en_US',
'es_ES',
'et_EE',
'fi_FI',
'fil_PH',
'fr_FR',
'he_IL',
'hi_IN',
'hu_HU',
'id_ID',
'it_IT',
'ja_JP',
'ko_KR',
'lt_LT',
'lv_LV',
'ms_MY',
'nl_NL',
'nb_NO',
'pt_BR',
'ru_RU',
'sk_SK',
'sl_SI',
'sv_SE',
'th_TH',
'tr_TR',
'uk_UA',
'vi_VN',

for now i see ar_MENA that should be updated to ar_SA to make things work (i tested locally) and this works, but it would not be a RCP change anymore. Up to you to wait for RCP and do the change in same PR, or to merge it now, and fix this separately

afmicka · 2025-12-22T13:34:26Z

@npeltier there are some conflicts. Could you please resolve them?
I am also not able to create fragment at all in AR(SA) today on Nala surface. I can create it in sandbox, but not in Nala. Therefore, can't write the nala test that we have discussed (i can in other locales but since AR is the one broken, would be good to have it there). We may want to add it with the follow-up PR where it is going to be fixed or write it for some other locale now.

npeltier · 2025-12-23T07:47:51Z

@afmicka done! yes AR will be broken until fast follow PR. Can we make the nala test not using that (non prod yet) language for now?

afmicka · 2025-12-24T14:04:54Z

@npeltier i have added one Nala test for creating fragment from the scratch (covers fragment missing/undefined issue). However, this test is flaky on prod too. The same thing happens occasionally and only in automation. I am not able to reproduce it manually on prod. The difference with your branch is that the bug is there consistently and is reproducible manually every time (basically making it worse).

For creating variation i need a bit of more work because i need to change the cleanup scripts too to clean those locales, beside new methods, etc. I would rather add those tests as a separate PR/jira. I am not sure i can make it on time before PTO but if i do, then you will be able to pull it in. The main issue i have is that cleanup script is not able to delete fragment in en_AU on prod (error 409). When i tried to use the force delete, then the fragment was deleted but apparently not the link somewhere in the backend. There is no variation on the main screen, there is no variation in en_AU locale either but the modal says it exists and i can't create it again (is it possible to fix it somehow now? :)
https://mas.adobe.com/studio.html#page=content&path=nala&query=45e50a68-9bd7-4fc2-9665-12f39140a1be

the same methods i added to this branch, i will need and use in that separate PR as well and refactor

npeltier added 7 commits December 9, 2025 16:09

MWPW-181321 draft

584d53c

draft

98fee59

Merge branch 'main' of github.com:adobecom/mas into MWPW-181321

717df32

add unit test

86375c3

Merge branch 'main' of github.com:adobecom/mas into MWPW-181321

1934efa

final changes

3f82809

some changes for disabled styling

29aae53

npeltier added 2 commits December 16, 2025 15:51

Merge branch 'main' of github.com:adobecom/mas into MWPW-181321

3082c41

fix ph style

1372ce7

aem-code-sync bot temporarily deployed to MWPW-181321 December 16, 2025 15:00 Inactive

prettier fixes

bc6fcd7

aem-code-sync bot temporarily deployed to MWPW-181321 December 16, 2025 15:03 Inactive

yesil reviewed Dec 16, 2025

View reviewed changes

review fixes

a6e32d3

aem-code-sync bot temporarily deployed to MWPW-181321 December 16, 2025 17:27 Inactive

yesil approved these changes Dec 17, 2025

View reviewed changes

npeltier added 2 commits December 17, 2025 10:55

remove some non express default locales

4fc41ae

UX feedbacks

2527c40

aem-code-sync bot temporarily deployed to MWPW-181321 December 17, 2025 15:09 Inactive

npeltier added 2 commits December 17, 2025 17:26

fix ut

cb55e88

Merge branch 'main' of github.com:adobecom/mas into MWPW-181321

671a560

couple more fixes

72a8d0f

aem-code-sync bot temporarily deployed to MWPW-181321 December 18, 2025 08:01 Inactive

npeltier added the run nala label Dec 18, 2025

honstar requested changes Dec 18, 2025

View reviewed changes

studio/src/mas-copy-dialog.js Outdated Show resolved Hide resolved

fixed typo

d87f014

honstar approved these changes Dec 18, 2025

View reviewed changes

another fix

feb0873

aem-code-sync bot temporarily deployed to MWPW-181321 December 18, 2025 10:32 Inactive

Nala: adapt to the new locale picker

e482caf

aem-code-sync bot temporarily deployed to MWPW-181321 December 18, 2025 14:10 Inactive

Merge branch 'main' into MWPW-181321

001213f

aem-code-sync bot temporarily deployed to MWPW-181321 December 18, 2025 14:58 Inactive

better sorting of locales

524c0fd

aem-code-sync bot temporarily deployed to MWPW-181321 December 18, 2025 15:41 Inactive

afmicka removed the run nala label Dec 18, 2025

fixing routing region

8229897

aem-code-sync bot temporarily deployed to MWPW-181321 December 19, 2025 07:21 Inactive

QA review feedbacks

2e38446

aem-code-sync bot temporarily deployed to MWPW-181321 December 19, 2025 10:51 Inactive

fixing rte wcs contextes

d2d259b

yesil reviewed Dec 19, 2025

View reviewed changes

Merge branch 'main' into MWPW-181321

47d6ac0

npeltier added 3 commits December 23, 2025 08:42

some review fixes

b62b300

Merge branch 'main' of github.com:adobecom/mas into MWPW-181321

6ec0d33

Merge branch 'MWPW-181321' of github.com:adobecom/mas into MWPW-181321

6409d1a

aem-code-sync bot temporarily deployed to MWPW-181321 December 23, 2025 07:45 Inactive

Add Nala for create fragment

70064bd

MWPW-181321 mas-locale-picker #481

Are you sure you want to change the base?

MWPW-181321 mas-locale-picker #481

Uh oh!

Conversation

npeltier commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🧪 Nala E2E Tests

To run Nala tests again:

To stop automatic Nala tests:

Test URLs:

Uh oh!

aem-code-sync bot commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yesil Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

npeltier Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

yesil Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

npeltier Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

npeltier commented Dec 17, 2025

Uh oh!

npeltier commented Dec 18, 2025

Uh oh!

honstar left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

afmicka commented Dec 18, 2025

Uh oh!

npeltier commented Dec 19, 2025

Uh oh!

afmicka commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

npeltier commented Dec 19, 2025

Uh oh!

afmicka commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yesil Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

yesil Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

npeltier commented Dec 19, 2025

Uh oh!

afmicka commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

npeltier commented Dec 23, 2025

Uh oh!

afmicka commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

npeltier commented Dec 16, 2025 •

edited

Loading

aem-code-sync bot commented Dec 16, 2025 •

edited

Loading

afmicka commented Dec 19, 2025 •

edited

Loading

afmicka commented Dec 19, 2025 •

edited

Loading

afmicka commented Dec 22, 2025 •

edited

Loading

afmicka commented Dec 24, 2025 •

edited

Loading