Skip to content

Migrate settings page to plugin-ui schema-driven components#65

Open
mrabbani wants to merge 4 commits intotest/dashboardfrom
refactor/settings
Open

Migrate settings page to plugin-ui schema-driven components#65
mrabbani wants to merge 4 commits intotest/dashboardfrom
refactor/settings

Conversation

@mrabbani
Copy link
Copy Markdown
Member

@mrabbani mrabbani commented Mar 5, 2026

Summary

  • Replace hand-rolled React settings UI with schema-driven <Settings> component from @wedevs/plugin-ui
  • Add SettingsController extending BaseSettingsRESTController from wedevs/wp-kit with flat-to-nested value conversion and gateway credential validation
  • Preserve full backward compatibility with existing texty_settings wp_option structure

Changes

  • includes/Api/SettingsController.php (new) — Schema-driven REST controller with get_field_path() override for root-level fields, create_item() override for flat-to-nested value conversion, and gateway validate() integration
  • src/pages/SettingsPage.js (new) — React settings page using <Settings> component with renderSaveButton
  • includes/Api.php — Register new SettingsController endpoint
  • src/App.js — Route /settings to new SettingsPage

Backward Compatibility

  • Same texty_settings option key in wp_options
  • Same nested data structure (gateway at root, credentials under gateway key)
  • Old REST endpoint (texty/v1/settings) preserved
  • Gateway credential validation preserved via $gateway->validate()
  • All gateway classes (send(), get_settings()) continue working unchanged

Test plan

  • Verify existing saved settings load correctly in new UI
  • Change gateway selection and confirm conditional sections show/hide
  • Save settings and verify texty_settings option structure in DB matches old format
  • Test with invalid credentials — should show validation error
  • Verify texty()->settings()->get('twilio') returns correct values after save
  • Test old REST endpoint (GET/POST texty/v1/settings) still works

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

  • New Features

    • Dashboard displaying SMS metrics: monthly usage, delivery rates, gateway status, and volume chart.
    • Settings page to configure SMS gateways (Twilio, Vonage, Clickatell, Plivo).
    • Quick Send tool for testing SMS delivery.
  • User Interface

    • Redesigned navigation with dedicated Dashboard and Settings pages.
    • Added Help Resources section with documentation and support links.

…onents

Replace the hand-rolled React settings UI with the schema-driven <Settings>
component from @wedevs/plugin-ui, backed by BaseSettingsRESTController from
wedevs/wp-kit. Preserves full backward compatibility with the existing
texty_settings wp_option structure and gateway credential validation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 5, 2026

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8a260ee1-e48e-4f8a-b47c-dc2f8e9fb493

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

This PR introduces SMS metrics tracking, a schema-driven settings API, and a complete dashboard UI redesign. New API endpoints expose metrics and settings; gateways now return structured responses with reference IDs; SMS data is persisted via a new SmsStat model backed by a database table; and the frontend gains a Dashboard page with metrics visualization and a refactored Settings interface.

Changes

Cohort / File(s) Summary
Dependency Management
composer.json, package.json
Added wedevs/wp-kit as runtime dependency; added React charting and UI libraries (recharts, lucide-react, @wedevs/plugin-ui).
API Metrics Endpoint
includes/Api.php, includes/Api/Metrics.php
Registered new Metrics API class to expose /texty/v1/metrics GET endpoint; retrieves gateway status, SMS volume charts (12 months), delivery rate (30 days), and monthly usage with admin permission checks.
API Settings Endpoint
includes/Api.php, includes/Api/SettingsController.php
Registered new SettingsController extending BaseSettingsRESTController; manages schema-driven multi-gateway configuration (Twilio, Vonage, Clickatell, Plivo) with backward compatibility for root-level gateway field and gateway credential validation on POST.
SMS Tracking Integration
includes/Dispatcher.php, includes/Api/Tools.php
Added SMS logging hook and log_sms method to persist send results; updated test_send to invoke SMS logging with reference_id extraction on success.
SMS Models & Data Storage
includes/Models/SmsStat.php, includes/Models/SmsStatStore.php, includes/Install.php
Introduced SmsStat model with CRUD getters/setters and static date-range query methods; added SmsStatStore extending BaseDataStore with table and field mappings; database table creation in Install::create_tables().
DataLayer Initialization
texty.php
Added init_datalayer() to initialize DataLayerFactory with SmsStat↔SmsStatStore registration during plugin init.
Gateway Response Updates
includes/Gateways/Twilio.php, includes/Gateways/Vonage.php, includes/Gateways/Clickatell.php, includes/Gateways/Plivo.php, includes/Gateways/Fake.php
Updated all gateways: changed send() return from boolean true to associative array with success and reference_id keys; return type documentation updated from WP_Error|bool/true to WP_Error|array.
Dashboard Page & Components
src/pages/Dashboard.js, src/components/StatCard.js, src/components/VolumeChart.js, src/components/HelpResources.js
Introduced Dashboard page that fetches metrics from API and renders stat cards (gateway status, monthly usage, delivery rate) with a 12-month volume bar chart, quick-send form, and help resources; added StatCard and VolumeChart utility components.
Settings UI Page
src/pages/SettingsPage.js, src/components/QuickSend.js
Added SettingsPage component using @wedevs/plugin-ui Settings; refactored QuickSend to use custom plugin UI inputs (Input, Textarea, Button); both support form state management and API save/error handling.
App Structure & Styling
src/App.js, src/components/Header.js, src/index.js, src/app.css, src/style.scss
Reorganized routing: root "/" now redirects to "/dashboard"; added /settings route; updated Header navigation with LayoutDashboard, Bell, RadioTower, Wrench icons from lucide-react; wrapped App with ThemeProvider and imported plugin-ui styles; added comprehensive CSS styling for header, cards, forms, and responsive breakpoints.

Sequence Diagram(s)

sequenceDiagram
    participant Browser
    participant Dashboard
    participant MetricsAPI
    participant SmsStat
    participant Database as DB

    Browser->>Dashboard: Load /dashboard
    Dashboard->>MetricsAPI: GET /texty/v1/metrics
    MetricsAPI->>SmsStat: get_sent_sms_between_dates(12 months)
    SmsStat->>Database: Query SMS records
    Database-->>SmsStat: Return SMS records
    SmsStat-->>MetricsAPI: Aggregate by month
    MetricsAPI->>SmsStat: get_successful_sent_sms_between_dates(30 days)
    SmsStat->>Database: Query sent SMS
    Database-->>SmsStat: Return records
    SmsStat-->>MetricsAPI: Calculate delivery rate
    MetricsAPI->>MetricsAPI: Build response (volume_chart, delivery_rate, usage)
    MetricsAPI-->>Dashboard: Return metrics JSON
    Dashboard->>Dashboard: Render StatCards, VolumeChart
    Dashboard-->>Browser: Display dashboard UI
Loading
sequenceDiagram
    participant Browser
    participant SettingsPage
    participant SettingsAPI
    participant Gateways as Gateway Validators

    Browser->>SettingsPage: Load /settings
    SettingsPage->>SettingsAPI: GET /texty/v1/settings/schema
    SettingsAPI-->>SettingsPage: Return schema (multi-gateway config)
    SettingsPage->>Browser: Render Settings form
    Browser->>SettingsPage: User fills form & saves
    SettingsPage->>SettingsAPI: POST /texty/v1/settings (values)
    SettingsAPI->>Gateways: validate_gateway_credentials(nested config)
    Gateways-->>SettingsAPI: Validation results
    SettingsAPI->>SettingsAPI: Persist validated settings
    SettingsAPI-->>SettingsPage: Success/error response
    SettingsPage->>Browser: Show toast (success or error)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

🐰 Hop-hop, the metrics now flow like streams,
Dashboard glowing with volume dreams,
Gateways return their treasured IDs,
Charts dance and settings please with ease—
SMS tracking, a complete design spree! 📊✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately captures the main change: migrating the settings page to use the plugin-ui schema-driven components framework.
Docstring Coverage ✅ Passed Docstring coverage is 84.48% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch refactor/settings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@mrabbani mrabbani changed the base branch from develop to test/dashboard March 5, 2026 09:29
mrabbani and others added 3 commits March 5, 2026 15:36
…r sorting

- Add `texty_settings_schema` filter in get_settings_schema() to allow
  third-party plugins to register gateway sections and fields
- Add `order()` method to GatewayInterface (default 10, Fake returns 99)
- Add `priority` prop to all gateway sections in schema
- Sort gateway dropdown options by order, then alphabetically

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove order() from GatewayInterface and default-10 gateways.
Only Fake overrides it (returns 99). get_gateway_options() already
falls back to 10 via method_exists() check.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Ensures the gateway selector section always appears above gateway
credential sections (priority 10) regardless of sort order.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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.

1 participant