MWPW-189463 MAS Studio: Quantity selector variation

[bozojovicic]

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

QS values can now be defined in settings, enabled or disabled
if QS values are defined in settings and if QS is supported in the code for that card variant
we will see it in "Options and settings" section, either enabled or disabled
then we can enable/disable it for that card, redefine values, restore them, per one field or all values
the same for card variations
the same for translated cards

Variation https://mwpw-189463--mas--adobecom.aem.live/studio.html#fragmentId=f8b64edc-23a9-4b54-bc78-72ff67b97aba&page=fragment-editor&path=sandbox
Parent https://mwpw-189463--mas--adobecom.aem.live/studio.html#fragmentId=8ac4f953-ce06-4792-8390-8d00c89d689b&page=fragment-editor&path=sandbox
Localized https://mwpw-189463--mas--adobecom.aem.live/studio.html#fragmentId=47595fac-7758-4fa8-83b1-45578eabf758&locale=fr_FR&page=fragment-editor&path=sandbox&tags=mas%3Avariant%2Fplans-education
Milo pages https://main--milo--adobecom.aem.page/drafts/bozo/pr/qs-settings?maslibs=mwpw-189463
https://main--milo--adobecom.aem.page/be_en/drafts/bozo/qs?maslibs=MWPW-189463
https://main--milo--adobecom.aem.page/fr/drafts/bozo/qs?maslibs=MWPW-189463
Settings for Quantity select https://mas.adobe.com/studio.html#fragmentId=783d1952-fff2-481c-8a26-9461de41f3fa&page=settings-editor&path=sandbox

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:

1. Add the run nala label to this PR (in the right sidebar)
2. Tests will run automatically on the current commit
3. 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-189463--mas--adobecom.aem.live/

[aem-code-sync]

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

• 943d90a ✅ (latest)
• 544e7d9 ✅
• ac3d929 ✅
• ad960d2 ✅
• 6533da5 ✅
• 001dd03 ✅
• 094e6de ✅
• 54f16e0 ✅
• cb7ee1a ✅
• 29011ff ✅
• 3b7d4ec ✅
• 0038338 ✅
• e0755e6 ✅
• 46c3ed9 ✅
• d838d20 ✅
• b366502 ✅
• 70fe6c7 ✅
• 107524d ✅
• 93b5dca ✅
• 879cd12 ✅
• e3860b9 ✅
• f1c7af3 ✅
• 6049614 ✅
• 80ac1cd ✅
• ac4845c ✅
• be07f76 ✅
• b3dc652 ✅
• e684c0c ✅
• 82bd457 ✅
• cdbe118 ✅

[codecov]

Codecov Report

❌ Patch coverage is 89.10891% with 33 lines in your changes missing coverage. Please review.
✅ Project coverage is 87.55%. Comparing base (4c80014) to head (7f1e465).

Files with missing lines	Patch %	Lines
studio/src/editors/merch-card-editor.js	83.48%	18 Missing ⚠️
...tudio/src/fields/quantity-select-settings-field.js	82.14%	15 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #700      +/-   ##
==========================================
+ Coverage   87.51%   87.55%   +0.04%     
==========================================
  Files         214      216       +2     
  Lines       64039    64177     +138     
==========================================
+ Hits        56042    56191     +149     
+ Misses       7997     7986      -11     

Files with missing lines	Coverage Δ
studio/src/common/fields/field-status.css.js	100.00% <100.00%> (ø)
studio/src/common/fields/quantity-select.js	98.19% <100.00%> (+14.14%)	⬆️
studio/src/reactivity/preview-fragment-store.js	73.73% <100.00%> (+0.08%)	⬆️
web-components/src/hydrate.js	91.18% <100.00%> (+0.06%)	⬆️
web-components/src/merch-quantity-select.js	90.67% <100.00%> (+0.16%)	⬆️
...tudio/src/fields/quantity-select-settings-field.js	82.14% <82.14%> (ø)
studio/src/editors/merch-card-editor.js	85.28% <83.48%> (+0.14%)	⬆️

... and 2 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4c80014...7f1e465. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Roycethan]

@adobecom/loot-loaders reviews plz !

[yesil]

@bozojovicic why global settings are not being used for quantity select? I think we should avoid setting it at card level.
and, this setting should go to "Options and settings" as a setting override.

also comment on the code:

Code Review

1. Duplicate .field-status-indicator CSS
The same styles are now defined in both quantity-select.js and merch-card-editor.js. Consider extracting to a shared CSS module to avoid drift.

2. Sentinel value QUANTITY_EMPTY is fragile

const QUANTITY_EMPTY = '</merch-quantity-select>';

Storing a closing HTML tag as a field value to signal "disabled" is unconventional and could confuse future developers or break if anything tries to parse/render it.

3. renderQuantityComponentOverrideIndicator does two different things
Without an argument it checks if the entire QS is overridden; with one it checks a sub-field. The startsWith('<merch-quantity-select ') comparison is also brittle if serialization format ever changes.

4. Manual requestUpdate() needs a comment

if (!e.target.checked) this.requestUpdate();

This suggests a reactive property change isn't being detected by Lit. Worth a short comment explaining why it's needed.

[bozojovicic]

@Roycethan I also fixed the broken Nala tests for the Quantity selector. In settings for Nala I configured to show the quantity selector for Education cards.

[yesil]

@bozojovicic please resolve conflicts.

[Roycethan]

@bozojovicic
Plz resolve conflicts