[EPIC][PLUGIN]: Plugin UI extension framework

[crivetimihai]

🔌 Epic: Plugin UI Extension Framework

Goal

Allow plugins to contribute UI components: custom tabs, settings panels, tool-specific editors, visualization widgets, and dashboard widgets. Enable extensibility without modifying core UI code.

Why Now?

1. Extensibility: Plugins need UI for configuration and visualization
2. Custom Tools: Some tools need specialized editors (SQL, GraphQL, etc.)
3. Observability: Plugins may provide custom metrics/visualizations
4. Ecosystem Growth: Third-party plugins need UI integration points

---

📖 User Stories

US-1: Plugin Settings Panel

As a plugin developer
I want my plugin to have a settings panel in the Admin UI
So that users can configure plugin options visually

Acceptance Criteria:

• Plugin declares settings schema in manifest
• Settings panel auto-generated from schema
• Custom settings component support
• Settings persisted to plugin config
• Validation before save

US-2: Custom Tool Editor

As a plugin developer
I want to provide a custom editor for my tool type
So that users have a specialized editing experience

Acceptance Criteria:

• Plugin registers custom editor component
• Editor shown when editing tool of that type
• SQL editor for database tools
• GraphQL editor for GraphQL tools
• Schema validation in editor

US-3: Custom Tab/Page

As a plugin developer
I want to add a custom tab to the Admin UI
So that my plugin has its own dedicated page

Acceptance Criteria:

• Plugin registers tab in manifest
• Tab appears in navigation
• Custom content rendered in tab
• Access control respected
• Tab can link to plugin routes

US-4: Dashboard Widget

As a plugin developer
I want to provide custom dashboard widgets
So that users can add my plugin's data to their dashboard

Acceptance Criteria:

• Plugin registers widget type
• Widget appears in widget picker
• Widget renders plugin data
• Widget configurable
• Widget supports real-time updates

US-5: UI Extension Points

As a plugin developer
I want to inject UI at specific extension points
So that I can enhance existing UI sections

Acceptance Criteria:

• Extension points: tool detail, server detail, metrics page
• Plugin can inject additional sections
• Inject buttons/actions
• Inject info panels
• Non-intrusive integration

---

📋 Implementation Tasks

Phase 1: Extension Registry

• Define UI extension manifest schema
• Create extension registry service
• Load plugin UI extensions at startup
• Validate extension manifests

Phase 2: Settings Framework

• Create settings panel renderer
• Auto-generate form from JSON Schema
• Support custom component registration
• Implement settings persistence

Phase 3: Custom Editors

• Define editor extension interface
• Create editor registry
• Integrate editors into tool edit flow
• Provide base editor components

Phase 4: Tabs & Pages

• Create tab registration system
• Add plugin tabs to navigation
• Route handling for plugin pages
• Access control integration

Phase 5: Dashboard Widgets

• Define widget extension interface
• Register plugin widgets
• Integrate with dashboard builder
• Widget configuration UI

Phase 6: Extension Points

• Define extension point locations
• Create slot/portal system
• Allow action injection
• Allow panel injection

---

⚙️ Plugin UI Manifest

# plugins/my-plugin/manifest.yaml
name: "my-plugin"
version: "1.0.0"

ui:
  # Settings panel
  settings:
    schema:
      type: object
      properties:
        api_key:
          type: string
          title: "API Key"
          format: password
        timeout:
          type: integer
          title: "Timeout (ms)"
          default: 5000
    
  # Custom tabs
  tabs:
    - id: "my-plugin-dashboard"
      title: "My Plugin"
      icon: "chart-bar"
      component: "./ui/dashboard.js"
      path: "/admin/my-plugin"
  
  # Custom tool editors
  editors:
    - tool_type: "sql-query"
      component: "./ui/sql-editor.js"
  
  # Dashboard widgets
  widgets:
    - id: "my-plugin-stats"
      title: "Plugin Stats"
      component: "./ui/stats-widget.js"
      defaultSize: { width: 4, height: 2 }
  
  # Extension points
  extensions:
    - point: "tool-detail-actions"
      component: "./ui/tool-actions.js"
    - point: "server-detail-panel"
      component: "./ui/server-info.js"

Extension Points

Point	Location	Use Case
tool-detail-actions	Tool view modal	Add custom action buttons
tool-detail-panel	Tool view modal	Add info sections
server-detail-panel	Server view modal	Add server info
metrics-page-widgets	Metrics page	Add custom metrics
navigation-footer	Sidebar bottom	Add plugin links

---

✅ Success Criteria

• Plugin settings panel works
• Custom tool editors integrate
• Plugin tabs appear in navigation
• Dashboard widgets from plugins work
• Extension points functional
• Plugin UI manifest documented
• Example plugin with UI created

---

🔗 Related Issues

• [EPIC][UI]: UI component library and design system #2277 - Component Library (provides base components for plugins)
• [EPIC][UI]: Customizable dashboard builder #2284 - Dashboard Builder (widget integration)

---

📚 References

• VS Code Extension API
• Grafana Plugin Development
• WordPress Block Editor