ROX-37387: Simplify layout of compliance wizard steps as in reports - #23217

Description

Review: Hide space because of indentation changes

Problem

Cost and benefit are unfavorable for design embellishment:

• Subheading sentence following Title element of wizard step
• And therefore Divider element to separate heading and subheading from form

One side of coin:

• There is no precedent in PatternFly documentation for subheading of wizard steps.
• Subheading sentence restates what is obvious from a semantic heading.
• Complicated markup, which includes unusual layout props and even worse, className props which require changes at evern PatternFly upgrade.

Other side of coin:

• Although policy wizard is out of scope for this simplification because different priorities of stakeholders, removing another inconsistency between compliance scans and vulnerability reports now increases pootential for more reuse in the future and reduces the probability of more churn in the future.

Analysis

1. Compare layout of components in compliance Wizard folder to vulnerability reports Wizard folders.

   • Every time we prefer semantic headings and spacing to cards, dividers, gutters, and so on, we slightly reduce the change that wizard step scrolls. All of the small savings add up. And according to broken window principle, less now encourages less in the future, but more now encourages more in the future.
   • By the way, PatternFly renders divider preceding wizard step footer without side-effect on layour owithin step component. That follows the principle of composition in React.

2. Compare files names of steps in compliance Wizard folder to views in components folder.

   Probably from design churn and especially inconsistency between step label and heading

   components	Wizard
   ScanConfigParametersView.tsx	ScanConfigOptions.tsx
   ScanConfigClustersView.tsx	ClusterSelection.tsx
   ScanConfigProfilesView.tsx	ProfileSelection.tsx
   ScanConfigDelieryView.tsx	ReportConfiguration.tsx
   N/A	ReviewConfig.tsx

3. Belated discovery that type prop of PageSection element helps layout (see Residue).

   • presence of type="breadcrumb" when Breadcrumb is child
   • absence of type when Title is child
   • presence of type="wizard" when Wizard is descendant

Solution

1. Delete elements in excess of the following pattern:

   <PageSection>
       <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
           <Title headingLevel="h2">Details</Title>
           <Form isWidthLimited>
               <FormLabelGroup …>
                   // form element
               </FormLabelGroup>
               // and so on
           </Form>
       </Flex>
   </PageSection>

2. Following the precedent of components folder, rename files in wizard folder.

   ScanConfigWhateverStep.tsx corresponds to ScanConfigWhateverView.tsx

   Except postpone ScanConfigParameters.tsx to reduce merge conflicts with $22990

3. Rename ScanConfigWizardPageSection.tsx file.

   • Render PageSection and its Wizard child together in same file.
   • Instead of separate in CreateScanConfigPage.tsx and EditScanConfigDetail.tsx files.

Residue

1. Write lint rules for type property of PageSection element.
2. Investigate whether Step components PageSection element.
   PatternFly examples have such limited step content that it is hard to decide what they intend.

User-facing documentation

• CHANGELOG.md update is not needed
• documentation PR is not needed

Testing and quality

• the change is production ready: the change is GA
• CI results are inspected

Automated testing

• added unit tests
• added e2e tests
• added regression tests
• added compatibility tests
• modified existing tests

How I validated my change

1. npm run tsc in ui/apps/platform folder.
2. npm run lint in ui/apps/platform folder.
3. npm run start in ui/apps/platform folder with staging demo as central.

Manual testing

1. Visit Visit /main/compliance/schedules and click a schedule, click Actions click Edit scan schedule

   Parameters step with presence of subheading and divider before changes:
   

   Parameters step after changes:
   

   Clusters step with presence of subheading and divider before changes:
   

   Clusters step after changes:
   

   Profiles step with presence of subheading and divider before changes:
   

   Profiles step after changes:
   

   Delivery step with presence of subheading and divider before changes:
   

   Delivery step after changes:
   

   Review step with presence of subheading and divider before changes:
   

   Review step after changes: