Uploaded image for project: 'OCMUI - OpenShift Cluster Manager UI'
  1. OCMUI - OpenShift Cluster Manager UI
  2. OCMUI-646

vertically group content in the wizard review page

XMLWordPrintable

    • 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

      <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?

       

        1. reviewPage.png
          reviewPage.png
          56 kB
        2. pf_hz.png
          pf_hz.png
          17 kB

              Unassigned Unassigned
              emalka@redhat.com Lyn M
              David Taylor, Joachim Schuler, Shiri Mordechay Sofer
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Created:
                Updated: