From fe09d2745e6b608f3b4c3641cd34fb0d94eaa6c7 Mon Sep 17 00:00:00 2001
From: Proudlock <270015376@geaerospace.com>
Date: Fri, 11 Sep 2026 16:49:10 -0400
Subject: [PATCH] Implement plugin dynamic settings routes architecture

Plugins can now register their settings pages dynamically via get_settings_routes()
hook, eliminating hardcoded imports that break lean builds.

Backend:
- Add get_settings_routes() hook to BasePlugin (shopdb/plugins/base.py)
- Implement in ComputersPlugin for Operating Systems management
- Add /api/plugins/settings-routes endpoint to expose plugin routes

Frontend:
- ModelCatalogHub fetches plugin routes and dynamically adds them via router.addRoute()
- Tabs render dynamically from pluginTabs ref
- Components lazy-load when clicked

Benefits:
- Lean builds work without manual route exclusions
- Plugins self-contain their UI extensions
- No core code changes needed when adding plugin settings pages
- Follows plugin architecture best practices

Fixes TODO from commit a03fd3de4f

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 frontend/src/router/routes/core.js            | 10 ++---
 .../src/views/settings/ModelCatalogHub.vue    | 42 +++++++++++++++----
 plugins/computers/plugin.py                   | 10 +++++
 shopdb/core/api/plugins.py                    | 24 +++++++++++
 shopdb/plugins/base.py                        | 24 +++++++++++
 5 files changed, 95 insertions(+), 15 deletions(-)

diff --git a/frontend/src/router/routes/core.js b/frontend/src/router/routes/core.js
index bfd97f37..303a5b3e 100644
--- a/frontend/src/router/routes/core.js
+++ b/frontend/src/router/routes/core.js
@@ -56,13 +56,9 @@ export default [
         name: 'model-catalog-models',
         component: () => import('../../views/settings/ModelsList.vue')
       }
-      // TODO: Operating Systems route should be added by computers plugin, not hardcoded in core
-      // Lean builds without computers plugin fail because this import doesn't exist
-      // {
-      //   path: 'operatingsystems',
-      //   name: 'model-catalog-os',
-      //   component: () => import('../../.plugins-staged/computers/views/OperatingSystemsList.vue')
-      // }
+      // Plugin settings routes (e.g., Operating Systems from computers plugin) are added
+      // dynamically by ModelCatalogHub via router.addRoute() from /api/plugins/settings-routes.
+      // This allows plugins to extend settings hubs without breaking lean builds.
     ]
   },
   {
diff --git a/frontend/src/views/settings/ModelCatalogHub.vue b/frontend/src/views/settings/ModelCatalogHub.vue
index 8c6dc2aa..53d31c04 100644
--- a/frontend/src/views/settings/ModelCatalogHub.vue
+++ b/frontend/src/views/settings/ModelCatalogHub.vue
@@ -27,14 +27,16 @@
       >
         Models
       </router-link>
-      <!-- TODO: Operating Systems tab should be added by computers plugin -->
-      <!-- <router-link
-        :to="{ name: 'model-catalog-os' }"
+      <!-- Plugin-contributed tabs loaded dynamically -->
+      <router-link
+        v-for="tab in pluginTabs"
+        :key="tab.name"
+        :to="{ name: tab.name }"
         class="tab"
-        :class="{ active: $route.name === 'model-catalog-os' }"
+        :class="{ active: $route.name === tab.name }"
       >
-        Operating Systems
-      </router-link> -->
+        {{ tab.tab }}
+      </router-link>
     </div>
 
     <div class="tab-content">
@@ -44,13 +46,37 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import axios from 'axios'
 
 const route = useRoute()
 const router = useRouter()
+const pluginTabs = ref([])
+
+onMounted(async () => {
+  // Fetch plugin-contributed settings routes
+  try {
+    const response = await axios.get('/api/plugins/settings-routes')
+    if (response.data && response.data.data) {
+      // Filter for model-catalog hub routes
+      pluginTabs.value = response.data.data.routes.filter(r => r.hub === 'model-catalog')
+
+      // Dynamically register routes for plugin tabs
+      pluginTabs.value.forEach(tab => {
+        if (!router.hasRoute(tab.name)) {
+          router.addRoute('model-catalog', {
+            path: tab.path,
+            name: tab.name,
+            component: () => import(`../../${tab.component}`)
+          })
+        }
+      })
+    }
+  } catch (error) {
+    console.error('Failed to load plugin settings routes:', error)
+  }
 
-onMounted(() => {
   // Redirect to vendors tab if no child route
   if (route.name === 'model-catalog') {
     router.replace({ name: 'model-catalog-vendors' })
diff --git a/plugins/computers/plugin.py b/plugins/computers/plugin.py
index dbeaf66b..6b27a3f4 100644
--- a/plugins/computers/plugin.py
+++ b/plugins/computers/plugin.py
@@ -218,6 +218,16 @@ class ComputersPlugin(BasePlugin):
         self._register_import_hook()
         logger.info(f"Computers plugin initialized (v{self.meta.version})")
 
+    def get_settings_routes(self) -> List[Dict]:
+        """Register Operating Systems management page in Model Catalog."""
+        return [{
+            'hub': 'model-catalog',
+            'path': 'operatingsystems',
+            'name': 'model-catalog-os',
+            'tab': 'Operating Systems',
+            'component': '.plugins-staged/computers/views/OperatingSystemsList.vue'
+        }]
+
     # -- bulk-import machine link -------------------------------------------
 
     def _register_import_hook(self):
diff --git a/shopdb/core/api/plugins.py b/shopdb/core/api/plugins.py
index 4d32b5af..f15ed686 100644
--- a/shopdb/core/api/plugins.py
+++ b/shopdb/core/api/plugins.py
@@ -42,6 +42,30 @@ def list_enabled_plugins():
     return success_response(sorted(names))
 
 
+@plugins_bp.route('/settings-routes', methods=['GET'])
+@jwt_required(optional=True)
+def get_plugin_settings_routes():
+    """Return settings routes contributed by all enabled plugins.
+
+    Plugins can register routes to add tabs/pages to settings hubs like
+    Model Catalog, Asset Config, etc. Frontend router merges these dynamically.
+
+    Returns: { routes: [{hub, path, name, tab, component}, ...] }
+    """
+    pm = current_app.extensions.get('plugin_manager')
+    if not pm:
+        return success_response({'routes': []})
+
+    routes = []
+    for plugin in pm.get_enabled_plugin_instances():
+        if hasattr(plugin, 'get_settings_routes'):
+            plugin_routes = plugin.get_settings_routes()
+            if plugin_routes:
+                routes.extend(plugin_routes)
+
+    return success_response({'routes': routes})
+
+
 @plugins_bp.route('/<name>', methods=['PUT'])
 @jwt_required()
 @require_role('admin')
diff --git a/shopdb/plugins/base.py b/shopdb/plugins/base.py
index 25d118c4..2b47da69 100644
--- a/shopdb/plugins/base.py
+++ b/shopdb/plugins/base.py
@@ -129,6 +129,30 @@ class BasePlugin(ABC):
         """
         return []
 
+    def get_settings_routes(self) -> List[Dict]:
+        """Frontend routes this plugin adds to settings pages.
+
+        Returns a list of route configurations for the plugin's settings pages.
+        Each route is a dict with:
+          hub      - settings hub to attach to ('model-catalog', 'asset-config', etc.)
+          path     - route path relative to hub (e.g. 'operatingsystems')
+          name     - unique route name (e.g. 'model-catalog-os')
+          tab      - tab label shown in hub UI (e.g. 'Operating Systems')
+          component- path to Vue component (e.g. 'plugins/<name>/frontend/views/<Component>.vue')
+
+        Example:
+          return [{
+            'hub': 'model-catalog',
+            'path': 'operatingsystems',
+            'name': 'model-catalog-os',
+            'tab': 'Operating Systems',
+            'component': 'plugins/computers/frontend/views/OperatingSystemsList.vue'
+          }]
+
+        Return [] (default) if the plugin adds no settings pages.
+        """
+        return []
+
     def get_settings_defaults(self) -> List[Dict]:
         """Declare the Setting rows this plugin owns.