[MGNLFE-404] Should check variant before working on it Created: 30/Jan/23  Updated: 23/Oct/23  Resolved: 03/Feb/23

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: None
Affects Version/s: 1.3.2
Fix Version/s: 1.3.3

Type: Improvement Priority: Neutral
Reporter: Phong Le Quoc Assignee: Phong Le Quoc
Resolution: Fixed Votes: 0
Labels: None
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: Not Specified Time Spent: Not Specified
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Issue Links:
Relates
relates to MGNLFE-372 Creating component variant breaks edi... Closed
dependency
is depended upon by MGNLFE-409 Release frontend-helpers 1.3.3 Closed
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLFE-405 Implement Sub-task Completed Phong Le Quoc  
MGNLFE-406 Review Sub-task Completed Canh Nguyen  
MGNLFE-407 PiQA Sub-task Completed Canh Nguyen  
MGNLFE-408 QA Sub-task Completed Robert Šiška  
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Epic Link: SPA Maintenance
Sprint: DevX 29, DevX 30
Story Points: 1
Team: DeveloperX
Work Started:

 Description   

Currently, some actions always have been done on the variant variable. However, we should do some checks to make sure the variable has the correct value for backward compatibility.

const variant = templateAnnotations[path + '/variants/' + selectedVariant];
modified[path] = variant.replace(contentAttributeRegex, comment.match(contentAttributeRegex)[0]);
modified[path] = modified[path].concat(' ', comment.match(variantsAttributesRegex).join(' '));
modified[path] = modified[path].concat(' ', `selectedVariant="${selectedVariant}"`); 

Note:

  • The variant is only null/undefined if the template annotation endpoint definition is wrong.

 

Technical detail:

When there is a variant on a page and the user uses the Edit page function, there will be an error.

Steps to reproduce on frontend-helper/samples/react-sample:

1. Using frontend-helper 1.3.0:

  • Create a page
  • Create a title component
  • Create some variants on the title component

2. Add and template annotation endpoint definition to light-modules, ex: light-modules/react-lm/restEndpoints/templateAnnotations/website.yaml

implementationClass: info.magnolia.rendering.spa.rest.v1.TemplateAnnotationEndpoint
workspace: website
endpointPath: template-annotations/v1/website
bypassWorkspaceAcls: true

3. Edit .env file to add website

REACT_APP_MGNL_API_TEMPLATES=/.rest/template-annotations/v1/website 

4. Using frontend-helper 1.3.2:

  • Edit the page above
  • Lock at the browser console

Generated at Mon Feb 12 05:47:05 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.