-
Notifications
You must be signed in to change notification settings - Fork 58
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FORMS-8058] implement review component #1468
Conversation
77ecd81
to
5ef355c
Compare
5ef355c
to
9c05348
Compare
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## dev #1468 +/- ##
============================================
+ Coverage 82.30% 82.38% +0.08%
- Complexity 929 946 +17
============================================
Files 103 105 +2
Lines 2385 2430 +45
Branches 323 332 +9
============================================
+ Hits 1963 2002 +39
Misses 260 260
- Partials 162 168 +6 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
Accessibility Violations Found
|
Accessibility Violations Found
|
1 similar comment
Accessibility Violations Found
|
Lighthouse scores (mobile)
|
Lighthouse scores (desktop)
|
Accessibility Violations Found
|
9c05348
to
041bdcf
Compare
041bdcf
to
bc714a3
Compare
Accessibility Violations Found
|
Lighthouse scores (desktop)
|
Lighthouse scores (mobile)
|
Accessibility Violations Found
|
2 similar comments
Accessibility Violations Found
|
Accessibility Violations Found
|
if (resourceResolver != null) { | ||
Resource componentInstance = resourceResolver.getResource(componentInstancePath); | ||
Resource formInstance = ComponentUtils.getFormContainer(componentInstance); | ||
FormContainer formContainer = formInstance.adaptTo(FormContainer.class); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
formInstance could be null, please add Null pointer check,
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
for (Base panel : panels) { | ||
String name = panel != null ? panel.getName() : ""; | ||
String title = ""; | ||
if (panel != null) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
put the entire code under panel != null check rather than duplicating, also how are we preventing the review component itself being listed in the linked panel dropdown?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
request.setAttribute(DataSource.class.getName(), actionTypeDataSource); | ||
} | ||
|
||
private List<? extends ComponentExporter> getPanels(FormComponent formContainer) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like this method doesn't just return Panels, it can return a field as well. The method name is misleading
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have we tested this with a composite component like TnC?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changed, checked for all components
} | ||
|
||
@Override | ||
public @NotNull Map<String, Object> getProperties() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's not expose this in properties until we have a customer use-case to render review in headless implementation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We use these properties at runtime (reviewview.js) to render and display the editModeButton or the linked panel
@JsonIgnore | ||
@ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "editAction") | ||
@Nullable | ||
private String editAction; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
JsonIgnore should only be part of interface
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changed
@JsonIgnore | ||
@ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "editAction") | ||
@Nullable | ||
private String editAction; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you mean by editAction ? Its not clear. IIUC, this property is to enable edit action on UI, shouldn't this be a boolean
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changed
ResourceResolver resourceResolver = request.getResourceResolver(); | ||
String componentInstancePath = request.getRequestPathInfo().getSuffix(); | ||
List<Resource> resources = new ArrayList<>(); | ||
if (resourceResolver != null) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should change the implementation by using FormContainer#visit, like we do during form submission, that way the code would be more readable.
In the current implementation, we were walking twice which is not required.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We cannot use the FormContainer#visit method as it does not solve our use case. During the review, if a container has more than one child, we need to stop the iteration and return the children of that container(To create a list of panel).
*/ | ||
@ConsumerType | ||
public interface Review extends Base { | ||
String[] getLinkedPanels(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The interface should be of provider type
please add java doc to all the methods. What does String[] array mean, if it is qualified name, then please link the QN documentation in the java doc
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I checked for other components, We are using @ConsumerType
not provider type.
Add Java doc, please check
/** | ||
* Defines the {@code Review} Sling Model used for the {@code /apps/core/fd/components/form/review} component. | ||
* | ||
* @since com.adobe.cq.forms.core.components.models 2.1.0 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please bump the version in minor version in package-info and use the same version here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -0,0 +1,30 @@ | |||
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | |||
~ Copyright 2023 Adobe |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2024
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
## BEM Description | ||
``` | ||
BLOCK cmp-adaptiveform-review | ||
ELEMENT cmp-adaptiveform-review__container |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this BEM is correct should __panel be inside __container.
Also why is __field a sibling of container, shouldn't it be a child ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2. `./hideTitle` - if set to `true`, the label of this field will be hidden | ||
3. `./name` - defines the name of the field, which will be submitted with the form data | ||
3. `./linkedPanels` - defines linked panels for reviewing the panel. If no panel is linked, the component will review the entire form. | ||
3. `./editAction` - defines the edit action for editing the fields, panels, field & panel, or none |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's rename editAction to ./editModeAction
: Determines the action or behavior for entering "edit mode"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changed
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" | ||
jcr:primaryType="nt:unstructured" | ||
jcr:title="Review" | ||
fieldType="plain-text"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fieldType should be defaulted and it should not be mandatory for review. We should get rid of fieldType from JCR and add it in the interface directly as fallback like we have done for other components
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed
Lighthouse scores (desktop)
|
Accessibility Violations Found
|
2 similar comments
Accessibility Violations Found
|
Accessibility Violations Found
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
added few more comments
/** | ||
* Defines the {@code Review} Sling Model used for the {@code /apps/core/fd/components/form/review} component. | ||
* | ||
* @since com.adobe.cq.forms.core.components.models 5.9.5 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please update version to 5.9.6
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
/** | ||
* @return an array of linked panels to be reviewed on the review page. Each linked panel is the name of a panel that is linked to the | ||
* review page. | ||
* @since com.adobe.cq.forms.core.components.models.form 5.9.5 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
even this should be 5.9.6
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
@@ -0,0 +1,135 @@ | |||
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | |||
~ Copyright 2023 Adobe |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this should be 2024
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
ELEMENT cmp-adaptiveform-review__container | ||
ELEMENT cmp-adaptiveform-review__panel | ||
MODIFIER cmp-adaptiveform-review__panel--repeatable | ||
ELEMENT cmp-adaptiveform-review__label-containe |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be -container
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
ELEMENT cmp-adaptiveform-review__label-containe | ||
ELEMENT cmp-adaptiveform-review__label | ||
ELEMENT cmp-adaptiveform-review__edit-button | ||
ELEMENT cmp-adaptiveform-review__value |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please indent the BEM correctly, it is still incorrect
BLOCK cmp-adaptiveform-review
ELEMENT cmp-adaptiveform-review__container
ELEMENT cmp-adaptiveform-review__panel
MODIFIER cmp-adaptiveform-review__panel--repeatable
ELEMENT cmp-adaptiveform-review__label-container
ELEMENT cmp-adaptiveform-review__label
ELEMENT cmp-adaptiveform-review__edit-button
ELEMENT cmp-adaptiveform-review__value
ELEMENT cmp-adaptiveform-review__field
ELEMENT cmp-adaptiveform-review__label
ELEMENT cmp-adaptiveform-review__value
ELEMENT cmp-adaptiveform-review__edit-button
ELEMENT cmp-adaptiveform-review__text
ELEMENT cmp-adaptiveform-review__label
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
if (formInstance != null) { | ||
FormContainer formContainer = formInstance.adaptTo(FormContainer.class); | ||
List<Base> panelList = (List<Base>) getMultipleChildPanels(formContainer); | ||
List<Base> panels = panelList.stream().filter(x -> "panel".equals(x.getFieldType())).collect(Collectors.toList()); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we please re-use the existing constant or create a new constant if not present
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
|
||
static addClassModifier(element, item) { | ||
if(item.fieldType !== 'panel'){ | ||
element.querySelector('div').classList.add(Review.bemBlock + `__field--${item.fieldType}`); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's not have any hardcoded strings in the code, please create constants in the top and re-use the constant. That way code is more readable and easy to maintain
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
} | ||
|
||
static addClassModifier(element, item) { | ||
if(item.fieldType !== 'panel'){ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please create constant for this as well. In fact, we should have fieldType constants in a common place and re-use them across
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
static bemBlock = 'cmp-adaptiveform-review'; | ||
static templateAttribute = 'data-cmp-review'; | ||
static DATA_ATTRIBUTE_VISIBLE = 'data-cmp-visible'; | ||
static hideFieldFromReview = ['button', 'plain-text', 'captcha', 'image']; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please expose them from af-core inside ui.frontend module. Core component should not own these constants
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
const templates = this.getTemplates(); | ||
let mappings = {}; | ||
templates.forEach(template => { | ||
const type = template.getAttribute(Review.templateAttribute + '-fieldType'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please have constant for this in this file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
005945e
to
96aa9d5
Compare
Accessibility Violations Found
|
Lighthouse scores (mobile)
|
Lighthouse scores (desktop)
|
Accessibility Violations Found
|
2 similar comments
Accessibility Violations Found
|
Accessibility Violations Found
|
@@ -0,0 +1,76 @@ | |||
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | |||
~ Copyright 2023 Adobe |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this should be 2024
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
check comments
96aa9d5
to
206a1ee
Compare
206a1ee
to
788c734
Compare
Accessibility Violations Found
|
Lighthouse scores (desktop)
|
Lighthouse scores (mobile)
|
Accessibility Violations Found
|
2 similar comments
Accessibility Violations Found
|
Accessibility Violations Found
|
add css for now
Description
Related Issue
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: