Sub-Pages — Settings Section Patterns

Part of: Sub-Pages guide See also: Settings Tab | Category Toggle | Component Catalog

Reference patterns by name in prompts.

Pattern Catalog

Pattern	When to Use	Example Files
Horizontal Form	1-4 fields	RolesSettings.tsx
Two-Column Form	5+ fields	OtpTokensSettings.tsx
Category Toggle + Tables	Rule entities (Sudo, SELinux)	SudoRulesWho.tsx
Category Checkbox + Tables	HBAC rules, Netgroups	HBACRulesSettings.tsx
Sidebar Navigation	3+ sections	SudoRulesSettings.tsx
Contextual Help Panel	All Settings (mandatory)	HostsSettings.tsx

Horizontal Form

Simple form with Form isHorizontal. Mandatory: Sidebar with Help button.

<TabLayout id="settings-page" toolbarItems={toolbarFields}>
  <Sidebar isPanelRight>
    <SidebarPanel variant="sticky">
      <HelpTextWithIconLayout textContent="Help" onClick={props.onOpenContextualPanel} />
    </SidebarPanel>
    <SidebarContent className="pf-v6-u-mr-xl">
      <TitleLayout ... />
      <Form isHorizontal>{/* Fields */}</Form>
    </SidebarContent>
  </Sidebar>
</TabLayout>

Category Toggle + Tables

Toggle (“Anyone” / “Specified”) with always-visible tabbed tables.

Critical notes:

1. Member fields must be string[] (NOT in simpleValues)

2. Tables show empty when “Anyone” selected

3. Use separate APIs: *_add_user, *_remove_user

4. Filter member fields in *_mod mutation

5. Clear members when switching to “Anyone”

See 15-category-toggle-sections.md for implementation.

Contextual Help Panel

⚠️ MANDATORY for ALL Settings pages.

In Tabs component:

<ContextualHelpPanel fromPage="entity-settings" isExpanded={...} onClose={...}>
  {/* Page content */}
</ContextualHelpPanel>

In Settings component:

<HelpTextWithIconLayout textContent="Help" onClick={props.onOpenContextualPanel} />

MANDATORY: Add entry in documentation-links.json (use [] if no links).

Pattern Decision Guide

Scenario	Pattern
Simple form (1-4 fields)	Horizontal Form
Many fields (5+)	Two-Column Form
“Apply to all” with visible tables	Category Toggle + Tables
“Apply to all” with hidden tables	Category Checkbox + Tables
Multiple sections	Add Sidebar Navigation

Using Patterns in Prompts

- Settings section: "User" (Category Toggle + Tables pattern)
  - Toggle: `usercategory`
  - Tab 1: Users (`memberuser_user`)