Skip to content

Conversation

@Maphikza
Copy link
Member

Pull Request: Add Push Notification Settings Panel

Description

This PR implements a comprehensive push notification settings panel for the HORNETS Relay admin interface, enabling administrators to configure push notification services including APNs (Apple Push Notification service) and FCM (Firebase Cloud Messaging) directly from the web UI.

Changes Made

Core Implementation

  • Added TypeScript types (src/types/settings.types.ts):

    • Created PushNotificationSettings interface with nested structures for service configuration, APNs, and FCM settings
    • Updated SettingsGroupName and SettingsGroupType mappings to include push notifications
  • Extended settings hook (src/hooks/useGenericSettings.ts):

    • Added support for push_notifications settings group
    • Implemented data extraction and nested update structure for API communication

UI Components

  • Created settings components:

    • PushNotificationSettings.tsx - Standalone settings page component
    • PushNotificationPanel.tsx - Panel component for Advanced Settings integration
  • Integrated into Advanced Settings Layout (src/components/settings/layouts/AdvancedSettingsLayout.tsx):

    • Added push notifications panel alongside existing settings panels
    • Maintains consistent UI/UX with other settings sections

Features Implemented

General Configuration:

  • Master enable/disable toggle for push notification service

Service Configuration:

  • Worker count (1-100 concurrent workers)
  • Queue size (100-10000 max notifications)
  • Max retry attempts (1-10)
  • Retry base delay (Go duration format support)

APNs Configuration:

  • Enable/disable toggle
  • Key file path (.p8 file)
  • Key ID (10 characters)
  • Team ID (10 characters)
  • App bundle identifier
  • Production/Sandbox mode toggle

FCM Configuration:

  • Enable/disable toggle
  • Credentials file path (JSON service account)

Validation & UX

  • Comprehensive form validation with appropriate error messages
  • Conditional validation (fields required only when service is enabled)
  • Character limit enforcement for APNs IDs
  • Go duration format validation for retry delays
  • Helpful tooltips for all configuration options
  • Responsive card-based layout for better organization

Testing

  • Component renders correctly in Advanced Settings
  • Form validation works as expected
  • Settings are properly saved/loaded via API
  • TypeScript compilation passes without errors
  • No console errors in production build

Screenshots

[Add screenshots of the push notification panel UI if available]

Related Backend Configuration

This UI implementation corresponds to the push notification configuration structure added to the backend at settings.push_notifications.

Checklist

  • Code follows project conventions and patterns
  • TypeScript types are properly defined
  • Component integrates seamlessly with existing settings infrastructure
  • Form validation is comprehensive
  • Changes have been tested locally
  • No new warnings or errors introduced

- Add PushNotificationSettings interface to settings types
- Update useGenericSettings hook to support push_notifications group
- Create comprehensive PushNotificationSettings component with:
  - General enable/disable toggle
  - Service configuration (worker count, queue size, retry settings)
  - APNs configuration for iOS push notifications
  - FCM configuration for Android push notifications
- Integrate push notifications panel into AdvancedSettingsLayout
- Follow existing settings patterns for consistency
- Include proper validation and form handling
- Create proper PushNotificationPanel component in panels directory
- Update AdvancedSettingsLayout to use PushNotificationPanel instead of PushNotificationSettings
- Fix import path to use correct BaseSettingsPanel location
- Follow established panel architecture patterns for consistent UI integration
- Add console.log at component mount to verify if PushNotificationPanel is rendering
- Log hook results to check if useGenericSettings is working correctly
- These logs will help identify why the panel isn't appearing in the DOM
- Remove savePushNotificationSettings to fix TypeScript warning
- Panel uses global save button like other panels without individual save
- This warning may have been preventing the component from rendering
- Fix push notification panel visibility by adding to SettingsNavigation and SettingsPage routing
- Add comprehensive data transformation logic in useGenericSettings for nested-to-flat field mapping
- Fix field naming consistency between PushNotificationSettings and PushNotificationPanel components
- Add missing service_batch_size field to complete backend field coverage
- Implement bidirectional data transformation for proper save/load functionality
- Update settings types to include push_notifications group
- Complete integration of all push notification configuration fields:
  * Main: enabled
  * Service: worker_count, queue_size, batch_size, retry_attempts, retry_delay
  * APNs: enabled, key_path, key_id, team_id, bundle_id, production
  * FCM: enabled, credentials_path, project_id

Resolves panel visibility issues and ensures proper data flow between frontend and backend.
- Add kind 1809 to noteOptions in relaySettings.ts
- Add translation for kind1809
- Will appear as clickable checkbox in Event Kinds Configuration
- Positioned after kind 1808 as they are related
- Backend handler already exists for this registered kind
@ColbySerpa ColbySerpa merged commit b5f479e into main Sep 23, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants