Phase 3: Plugin-UI-System (WordPress-Style)

Backend: - PluginManifest um 5 neue UI-Felder erweitert: menu_items, page_routes, detail_tabs, settings_pages, dashboard_widgets (FrontendMenuItem, FrontendPageRoute, FrontendDetailTab, FrontendSettingsPage, FrontendDashboardWidget) - GET /api/v1/plugins/active-manifests Endpoint liefert UI-Manifeste aller aktiven Plugins - Registry.get_active_manifests() + PluginService.get_active_manifests() - 12 Built-in Plugins mit UI-Manifest-Daten gefuellt (menu_items, page_routes, detail_tabs, settings_pages) - Plugin-Install-System: POST /upload (ZIP), POST /install-url (URL) mit Validierung (Manifest, dangerous imports, SQL migrations) Frontend: - pluginStore.ts (Zustand) mit PluginUiManifest Typen + Selektoren - useActivePluginManifests() React Query Hook - PluginRegistry.tsx — fetcht Manifeste beim App-Start - PluginLoader.tsx — dynamisches React.lazy() mit ErrorBoundary - PluginRouteRenderer.tsx — Catch-all fuer Plugin-Routes - routes/index.tsx — Catch-all Routes fuer Plugin-Pages + Settings - Sidebar.tsx — dynamische Plugin Menu-Items mit Grouping + Icons - Settings.tsx — dynamische Plugin Settings-Pages - ContactDetail.tsx — dynamische Plugin Detail-Tabs mit Permissions - AppShell.tsx — PluginRegistry Provider eingebunden - SettingsPlugins.tsx — Install-UI (ZIP Upload + URL Install) - plugins.ts — useUploadPlugin() + useInstallPluginFromUrl() Hooks Docs & Templates: - docs/plugin-development-guide.md — komplette Entwickler-Doku - templates/plugin-template/ — Boilerplate mit allen Manifest-Feldern Tests: - 34 Vitest-Tests (PluginRegistry, PluginLoader, PluginRouteRenderer, pluginStore) — alle bestanden - TSC: keine neuen Errors (nur pre-existing Dms.tsx)
2026-07-23 19:01:18 +02:00
parent 4f70c1d912
commit fc96a2f86c
43 changed files with 3005 additions and 204 deletions
@@ -0,0 +1,187 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { usePluginStore } from '../pluginStore';
+import type { PluginUiManifest } from '../pluginStore';
+
+const mockManifests: PluginUiManifest[] = [
+  {
+    name: 'plugin_a',
+    display_name: 'Plugin A',
+    version: '1.0.0',
+    is_core: false,
+    menu_items: [
+      { label_key: 'nav.a', label: 'A', path: '/a', icon: 'A', group: '', order: 200, badge_key: '' },
+      { label_key: 'nav.a2', label: 'A2', path: '/a2', icon: 'A', group: '', order: 50, badge_key: '' },
+    ],
+    page_routes: [
+      { path: '/a', component: '@/pages/A', parent: '', protected: true, order: 200 },
+    ],
+    detail_tabs: [
+      { entity_type: 'contact', label_key: 'tabs.a', label: 'Tab A', component: '@/components/TabA', icon: 'A', order: 100, permission: '' },
+      { entity_type: 'company', label_key: 'tabs.a2', label: 'Tab A2', component: '@/components/TabA2', icon: 'A', order: 50, permission: '' },
+    ],
+    settings_pages: [
+      { path: 'a', label_key: 'settings.a', label: 'Settings A', component: '@/pages/SettingsA', icon: 'A', order: 200, permission: '' },
+    ],
+    dashboard_widgets: [
+      { id: 'widget_a', label_key: 'widgets.a', label: 'Widget A', component: '@/components/WidgetA', icon: 'A', order: 200, col_span: 2, row_span: 1, permission: '' },
+    ],
+  },
+  {
+    name: 'plugin_b',
+    display_name: 'Plugin B',
+    version: '1.0.0',
+    is_core: true,
+    menu_items: [
+      { label_key: 'nav.b', label: 'B', path: '/b', icon: 'B', group: '', order: 100, badge_key: '' },
+    ],
+    page_routes: [
+      { path: '/b', component: '@/pages/B', parent: '', protected: true, order: 100 },
+    ],
+    detail_tabs: [
+      { entity_type: 'contact', label_key: 'tabs.b', label: 'Tab B', component: '@/components/TabB', icon: 'B', order: 200, permission: '' },
+    ],
+    settings_pages: [
+      { path: 'b', label_key: 'settings.b', label: 'Settings B', component: '@/pages/SettingsB', icon: 'B', order: 100, permission: '' },
+    ],
+    dashboard_widgets: [
+      { id: 'widget_b', label_key: 'widgets.b', label: 'Widget B', component: '@/components/WidgetB', icon: 'B', order: 100, col_span: 1, row_span: 1, permission: '' },
+    ],
+  },
+];
+
+describe('pluginStore', () => {
+  beforeEach(() => {
+    usePluginStore.getState().reset();
+  });
+
+  describe('getAllMenuItems', () => {
+    it('returns empty array when no manifests', () => {
+      const items = usePluginStore.getState().getAllMenuItems();
+      expect(items).toHaveLength(0);
+    });
+
+    it('merges menu items from all manifests', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const items = usePluginStore.getState().getAllMenuItems();
+      expect(items).toHaveLength(3);
+    });
+
+    it('sorts menu items by order ascending', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const items = usePluginStore.getState().getAllMenuItems();
+      expect(items[0].order).toBe(50);
+      expect(items[1].order).toBe(100);
+      expect(items[2].order).toBe(200);
+    });
+  });
+
+  describe('getDetailTabsForEntity', () => {
+    it('returns empty array when no manifests', () => {
+      const tabs = usePluginStore.getState().getDetailTabsForEntity('contact');
+      expect(tabs).toHaveLength(0);
+    });
+
+    it('filters tabs by entity_type', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const contactTabs = usePluginStore.getState().getDetailTabsForEntity('contact');
+      expect(contactTabs).toHaveLength(2);
+      expect(contactTabs.every((t) => t.entity_type === 'contact')).toBe(true);
+    });
+
+    it('returns empty array for entity with no tabs', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const taskTabs = usePluginStore.getState().getDetailTabsForEntity('task');
+      expect(taskTabs).toHaveLength(0);
+    });
+
+    it('sorts tabs by order ascending', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const contactTabs = usePluginStore.getState().getDetailTabsForEntity('contact');
+      expect(contactTabs[0].order).toBe(100);
+      expect(contactTabs[1].order).toBe(200);
+    });
+  });
+
+  describe('getAllSettingsPages', () => {
+    it('returns empty array when no manifests', () => {
+      const pages = usePluginStore.getState().getAllSettingsPages();
+      expect(pages).toHaveLength(0);
+    });
+
+    it('merges settings pages from all manifests', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const pages = usePluginStore.getState().getAllSettingsPages();
+      expect(pages).toHaveLength(2);
+    });
+
+    it('sorts settings pages by order ascending', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const pages = usePluginStore.getState().getAllSettingsPages();
+      expect(pages[0].order).toBe(100);
+      expect(pages[1].order).toBe(200);
+    });
+  });
+
+  describe('getAllDashboardWidgets', () => {
+    it('returns empty array when no manifests', () => {
+      const widgets = usePluginStore.getState().getAllDashboardWidgets();
+      expect(widgets).toHaveLength(0);
+    });
+
+    it('merges widgets from all manifests', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const widgets = usePluginStore.getState().getAllDashboardWidgets();
+      expect(widgets).toHaveLength(2);
+    });
+
+    it('sorts widgets by order ascending', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const widgets = usePluginStore.getState().getAllDashboardWidgets();
+      expect(widgets[0].order).toBe(100);
+      expect(widgets[1].order).toBe(200);
+    });
+  });
+
+  describe('reset', () => {
+    it('clears all state', () => {
+      usePluginStore.setState({ manifests: mockManifests, loading: true, error: 'test', loaded: true });
+      usePluginStore.getState().reset();
+      const state = usePluginStore.getState();
+      expect(state.manifests).toHaveLength(0);
+      expect(state.loading).toBe(false);
+      expect(state.error).toBeNull();
+      expect(state.loaded).toBe(false);
+    });
+  });
+
+  describe('setManifests', () => {
+    it('sets manifests and marks as loaded', () => {
+      usePluginStore.getState().setManifests(mockManifests);
+      const state = usePluginStore.getState();
+      expect(state.manifests).toHaveLength(2);
+      expect(state.loaded).toBe(true);
+      expect(state.loading).toBe(false);
+      expect(state.error).toBeNull();
+    });
+  });
+
+  describe('getAllPageRoutes', () => {
+    it('returns empty array when no manifests', () => {
+      const routes = usePluginStore.getState().getAllPageRoutes();
+      expect(routes).toHaveLength(0);
+    });
+
+    it('merges page routes from all manifests', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const routes = usePluginStore.getState().getAllPageRoutes();
+      expect(routes).toHaveLength(2);
+    });
+
+    it('sorts page routes by order ascending', () => {
+      usePluginStore.setState({ manifests: mockManifests });
+      const routes = usePluginStore.getState().getAllPageRoutes();
+      expect(routes[0].order).toBe(100);
+      expect(routes[1].order).toBe(200);
+    });
+  });
+});
@@ -0,0 +1,128 @@
+import { create } from 'zustand';
+
+export interface PluginMenuItem {
+  label_key: string;
+  label: string;
+  path: string;
+  icon: string;
+  group: string;
+  order: number;
+  badge_key: string;
+}
+
+export interface PluginPageRoute {
+  path: string;
+  component: string;
+  parent: string;
+  protected: boolean;
+  order: number;
+}
+
+export interface PluginDetailTab {
+  entity_type: string;
+  label_key: string;
+  label: string;
+  component: string;
+  icon: string;
+  order: number;
+  permission: string;
+}
+
+export interface PluginSettingsPage {
+  path: string;
+  label_key: string;
+  label: string;
+  component: string;
+  icon: string;
+  order: number;
+  permission: string;
+}
+
+export interface PluginDashboardWidget {
+  id: string;
+  label_key: string;
+  label: string;
+  component: string;
+  icon: string;
+  order: number;
+  col_span: number;
+  row_span: number;
+  permission: string;
+}
+
+export interface PluginUiManifest {
+  name: string;
+  display_name: string;
+  version: string;
+  is_core: boolean;
+  menu_items: PluginMenuItem[];
+  page_routes: PluginPageRoute[];
+  detail_tabs: PluginDetailTab[];
+  settings_pages: PluginSettingsPage[];
+  dashboard_widgets: PluginDashboardWidget[];
+}
+
+interface PluginState {
+  manifests: PluginUiManifest[];
+  loading: boolean;
+  error: string | null;
+  loaded: boolean;
+  setManifests: (manifests: PluginUiManifest[]) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  reset: () => void;
+  // Computed selectors
+  getAllMenuItems: () => PluginMenuItem[];
+  getAllPageRoutes: () => PluginPageRoute[];
+  getDetailTabsForEntity: (entityType: string) => PluginDetailTab[];
+  getAllSettingsPages: () => PluginSettingsPage[];
+  getAllDashboardWidgets: () => PluginDashboardWidget[];
+}
+
+export const usePluginStore = create<PluginState>((set, get) => ({
+  manifests: [],
+  loading: false,
+  error: null,
+  loaded: false,
+
+  setManifests: (manifests) => set({ manifests, loaded: true, loading: false, error: null }),
+  setLoading: (loading) => set({ loading }),
+  setError: (error) => set({ error, loading: false }),
+  reset: () => set({ manifests: [], loading: false, error: null, loaded: false }),
+
+  getAllMenuItems: () => {
+    const { manifests } = get();
+    return manifests
+      .flatMap((m) => m.menu_items)
+      .sort((a, b) => a.order - b.order);
+  },
+
+  getAllPageRoutes: () => {
+    const { manifests } = get();
+    return manifests
+      .flatMap((m) => m.page_routes)
+      .sort((a, b) => a.order - b.order);
+  },
+
+  getDetailTabsForEntity: (entityType: string) => {
+    const { manifests } = get();
+    return manifests
+      .flatMap((m) => m.detail_tabs)
+      .filter((t) => t.entity_type === entityType)
+      .sort((a, b) => a.order - b.order);
+  },
+
+  getAllSettingsPages: () => {
+    const { manifests } = get();
+    return manifests
+      .flatMap((m) => m.settings_pages)
+      .sort((a, b) => a.order - b.order);
+  },
+
+  getAllDashboardWidgets: () => {
+    const { manifests } = get();
+    return manifests
+      .flatMap((m) => m.dashboard_widgets)
+      .sort((a, b) => a.order - b.order);
+  },
+}));