-
Story
-
Resolution: Unresolved
-
Minor
-
None
-
None
-
None
-
False
-
OCMUI Core Sprint 263, OCMUI Core Sprint 264
Background
create distinct grouping within the wizard review page, for easier vertical scanning.
this is a follow up on HAC-224 (see discussion on gitlab)
Summarizing the asks on the discussion gitlab:
- dtaylor@redhat.com suggested indentation of 'child fields' of 'Cluster-wide proxy URL' section of the Review page

- There was an ask for "tighter vertical spacing for things that belong together...[like the VPC subnet settings/table]"
- @smordech commented "After playing with some options, I think it creates a messy view to indent relative things and will require adding a few more headers (for example CIDR ranges, to indent it we need a CIDR ranges header).
The VPC table is relevant since we present it in the same way we are showing it in the VPC settings step.
What we can do is play with font-weight for the enabled "headers" (Install into Existing VPC/ Cluster-wide proxy) if they are enabled. - Came up in a backlog estimation meeting, dtaylor@redhat.com to see if there is a PF standard/recommendation.
Findings
- Each ReviewSection, such as 'Networking', uses PF's https://v5-archive.patternfly.org/components/expandable-section
- The contents of each expandable section is made up of ReviewItem's, ex:
<ReviewSection
title={getStepName(accountStepId)}
...
>
{ReviewItem(FieldId.AssociatedAwsId)}
...
{ReviewItem(FieldId.InstallerRoleArn)}
{ReviewItem(FieldId.SupportRoleArn)}
...
{ReviewItem(FieldId.WorkerRoleArn)}
</ReviewSection>
ReviewItems use https://v5-archive.patternfly.org/components/description-list (Horizontal):

<DescriptionListGroup key={name}>
<DescriptionListTerm>{reviewValue.title}</DescriptionListTerm>
<DescriptionListDescription data-testid={reviewValue.title.replace(/ /g, '-')}>
{description}
</DescriptionListDescription>
</DescriptionListGroup>
- While we can adjust font-weight and vert. spacing of all DescListTerm's and DescListDesc's, currently there isn't any what to identify 'groups' of fields (such as cluster-wide proxy fields) and adjust vert. spacing of the 'group'.
- Reviewed PF 5 Components (lists, tables, text) and PF Patterns, I do not see a PF specific solution or recommendation for this.
Conclusion
- A custom solution will need to be developed by OCMUI to 'group' review items so we can adjust font-weight and/or vert. spacing.
- Perhaps we need to introduce a <ReviewGroup> React component in-between existing <ReviewSection> and wrapping around <ReviewItem>'s
- This was not an ask by any customer or stakeholder and is a minor priority, wondering if worth addressing?
- mentioned on