Commit Graph

3 Commits

Author SHA1 Message Date
Chris Farhood b08df4fb76 feat: improve UX with drawer detail view and proper settings placement
Major UX improvements:
- Changed detail view from full page to drawer (slides from right)
- Moved plugin settings from sidebar to Settings → Plugins (proper pattern)
- Fixed React error #310 by adding defensive String() wrappers
- Fixed syncMessage getter to always return string
- Added safety checks for encryptedData access
- Added error handling for useGet failures

The drawer approach keeps the list visible while viewing details,
matching Headlamp's design patterns. Settings are now properly
located in the global Settings → Plugins section instead of
cluttering the plugin's sidebar navigation.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
2026-02-12 21:41:08 -05:00
Chris Farhood b4cc5be6c3 fix: replace @mui/icons-material with @iconify/react (v0.2.3)
Material-UI icons were not provided as globals by Headlamp, causing
'undefined is not an object (evaluating Ct.createSvgIcon)' errors.

Headlamp provides @iconify/react as a global, so all icon imports have
been replaced with Iconify equivalents:
- ErrorOutline → mdi:alert-circle-outline
- ContentCopy → mdi:content-copy
- Visibility → mdi:eye
- VisibilityOff → mdi:eye-off
- CheckCircle → mdi:check-circle
- Error → mdi:alert-circle
- Warning → mdi:alert
- Add → mdi:plus
- Delete → mdi:delete

Changes:
- Replaced all @mui/icons-material imports with @iconify/react Icon component
- Updated 4 component files (ErrorBoundary, DecryptDialog, EncryptDialog, ControllerStatus)
- Bumped version to 0.2.3
- Bundle size reduced: 358.18 kB (98.04 kB gzipped)
- Checksum: SHA256:03787323abc9430a63433838253b2dd8296d237000acdfe4ce2507678b63125f

This should fix the plugin loading issue and make the sidebar entry appear.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
2026-02-12 09:35:58 -05:00
Chris Farhood 2cb815f921 feat: add error boundaries for graceful error handling (Phase 3.4)
Implement React Error Boundaries to catch and handle errors gracefully
without crashing the entire UI. Provides helpful recovery mechanisms.

Changes:
- Create ErrorBoundary component module
  - BaseErrorBoundary abstract class (shared logic)
  - CryptoErrorBoundary (crypto operation errors)
  - ApiErrorBoundary (API communication errors)
  - GenericErrorBoundary (general component errors)

- Error boundary features
  - Catches rendering and lifecycle errors
  - Logs errors to console for debugging
  - Displays helpful, contextual error messages
  - Provides retry/reload buttons for recovery
  - Optional custom fallback UI via props
  - Optional onReset callback for custom recovery

- Integrate error boundaries into routes
  - Wrap SealedSecretList with ApiErrorBoundary
  - Wrap SealedSecretDetail with ApiErrorBoundary
  - Wrap SealingKeysView with ApiErrorBoundary
  - Wrap SettingsPage with GenericErrorBoundary
  - Wrap SecretDetailsSection with GenericErrorBoundary

Error types and messages:
- Crypto errors: Certificate, browser compatibility, malformed data
- API errors: Cluster connection, controller config, network
- Generic errors: Unexpected errors with simple recovery message

Benefits:
- App doesn't crash completely on errors
- Users can continue using unaffected features
- Clear, actionable troubleshooting steps
- Professional error presentation
- Production-ready error handling
- Easier debugging with console logs

Build: 354.92 kB (97.76 kB gzipped), +2.47 kB (+0.7%)
Phase 3.4 complete. 10 of 14 phases done (71%).

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
2026-02-11 22:10:50 -05:00