Skip to content

Phase 3: Basic Layout & Navigation - COMPLETE

Implementation Summary

Phase 3 has been successfully completed. The basic master/detail layout with navigation has been implemented.

Components Created

1. EditorLayout.tsx

  • Implements master/detail pattern using PatternFly Drawer component
  • Drawer is resizable (200px - 600px, default 300px)
  • Drawer can be toggled open/closed
  • Contains NavigationPanel in drawer and DetailPanel in main content area

2. NavigationPanel.tsx

  • Shows flat list navigation for API elements
  • Three main sections:
  • API Info: Root navigation item that calls selectRoot()
  • Paths: Lists all paths from document.paths
  • Schemas: Lists all schemas from document.components.schemas
  • Highlights currently selected item
  • Handles selection via selectByPath() from useSelection hook
  • Shows disabled "No paths defined" / "No schemas defined" when empty

3. DetailPanel.tsx

  • Routes to appropriate form based on selection type
  • Shows MainForm when nothing selected or root selected
  • Has placeholders for path and schema forms (to be implemented in Phase 4)
  • Uses selectedType from useSelection to determine which form to render

4. MainForm.tsx

  • Displays API metadata (title, version, description, OpenAPI version)
  • All fields are currently read-only
  • Uses PatternFly Form components (FormGroup, TextInput, TextArea)
  • Note indicates editing functionality coming in Phase 4

Integration Points

OpenAPIEditorContent.tsx Updates

  • Added drawer toggle button in toolbar (BarsIcon)
  • Integrated EditorLayout component replacing placeholder content
  • Wired up drawer state to UI store (isMasterPanelExpanded)
  • Drawer toggle calls toggleMasterPanel() from useUI hook

UI Store

  • Already had isMasterPanelExpanded state and toggleMasterPanel() action
  • No changes needed to store, just used existing functionality

PatternFly 6 Compatibility Fixes

Fixed prop name changes from PatternFly 5 to 6: - isReadOnly → readOnly (TextInput, TextArea) - isDisabled → disabled (NavItem)

Features Implemented

✅ Master/detail layout with resizable drawer ✅ Navigation panel with paths and schemas ✅ Selection highlighting in navigation ✅ Detail panel with form routing ✅ Main/Info form (read-only) ✅ Drawer toggle button in toolbar ✅ Deselect functionality (clicking "API Info" returns to MainForm)

Features Deferred

The following were deferred to later phases as discussed with user: - Search/filter functionality for navigation (Phase 5+) - Path detail form (Phase 4) - Schema detail form (Phase 5) - Editing functionality for Main form (Phase 4)

Build Status

✅ Component builds successfully (22.37 kB ESM, 14.18 kB CJS) ✅ Test application builds successfully ✅ No TypeScript errors ✅ No build warnings (except chunk size warning for test app)

Testing

The test application includes a sample OpenAPI document with: - API info (title, version, description) - One path: /pets with GET operation - One schema: Pet with properties (id, name, tag)

This provides sufficient test data to verify: - Navigation panel shows paths and schemas - Clicking navigation items updates selection - Detail panel shows appropriate forms - Main form displays API metadata correctly - Drawer can be toggled open/closed - Drawer can be resized

Next Steps - Phase 4: Core Editing Features

The next phase will implement editing functionality:

  1. Main/Info Form Editing
  2. Make fields editable
  3. Implement commands for updating info object

  4. Add validation

  5. Path Operations

  6. Create PathForm component
  7. Display path details
  8. Implement CRUD operations for paths

  9. Implement CRUD operations for operations (GET, POST, etc.)

  10. Response Editing

  11. Display operation responses

  12. Implement response editing

  13. Basic Schema Viewing

  14. Create SchemaForm component (read-only for now)
  15. Display schema properties
  16. Full schema editing in Phase 5

Files Changed in Phase 3

New Files

  • src/components/editor/EditorLayout.tsx
  • src/components/editor/NavigationPanel.tsx
  • src/components/editor/DetailPanel.tsx
  • src/components/forms/MainForm.tsx

Modified Files

  • src/components/editor/OpenAPIEditorContent.tsx
  • test-app/src/App.tsx (removed unused React import)

No Changes Required

  • src/stores/uiStore.ts (already had drawer state)
  • src/hooks/useUI.ts (already exposed drawer actions)

Lessons Learned

  1. PatternFly 6 API Changes: Need to use readOnly instead of isReadOnly, disabled instead of isDisabled
  2. State Management: The UI store design from Phase 2 worked perfectly - no changes needed for drawer state
  3. Component Organization: Separating layout, navigation, and detail concerns made implementation clean and maintainable
  4. Selection Hook: The useSelection hook from Phase 2 made wiring up navigation straightforward

Code Quality

  • All components have TypeScript types
  • All components have JSDoc comments
  • Consistent code style
  • Proper separation of concerns
  • No console warnings or errors
  • Build size remains small (component under 23KB)