feat(medcat-trainer): load mctee frontend bundle (#573)

* feat(medcat-trainer): plugin-slot for mct-ee licence badge.

* feat(medcat-trainer): wire MCT EE plugin loading and MedCAT Service form handler

* feat(medcat-trainer): fix frontend vite config

Author: tomolopolis

medcat-trainer/webapp/frontend/env.d.ts

@@ -15,3 +15,8 @@ declare module 'tiny-emitter/instance' {
   const emitter: TinyEmitterInstance
   export default emitter
 }
+
+declare module '@mctee/enterprise' {
+  const plugin: unknown
+  export default plugin
+}

medcat-trainer/webapp/frontend/src/main.ts

@@ -26,6 +26,7 @@ import {authPlugin} from "./auth";
 import { loadRuntimeConfig, isOidcEnabled } from './runtimeConfig';
 import { registerUnauthorizedInterceptor } from './httpAuth'
 import { initPluginBootstrap } from './plugins/bootstrap'
+import { loadEnterprisePlugin } from './plugins/enterprise'
 import PluginSlot from '@/components/plugins/PluginSlot.vue'
 
 const theme ={
@@ -52,6 +53,7 @@ const vuetify = createVuetify({
 
 async function bootstrap() {
   await loadRuntimeConfig();
+  await loadEnterprisePlugin()
 
   const app = createApp(App)
   app.config.globalProperties.$http = axios

medcat-trainer/webapp/frontend/src/plugins/enterprise-stub.ts

@@ -0,0 +1,6 @@
+/**
+ * No-op stand-in for ``@mctee/enterprise`` when VITE_MCT_EE is not enabled.
+ * Keeps OSS ``vite`` / ``vite build`` resolving the dynamic import in
+ * ``enterprise.ts`` without requiring the private EE package.
+ */
+export {}

medcat-trainer/webapp/frontend/src/plugins/enterprise.ts

@@ -0,0 +1,17 @@
+/**
+ * Load the MedCAT Trainer Enterprise frontend plugin when VITE_MCT_EE=1.
+ *
+ * Local dev: set MCT_EE_ROOT to the ``medcat-trainer-ee/frontend/src`` folder and
+ * run the OSS frontend with ``VITE_MCT_EE=1 npm run dev``.
+ */
+export async function loadEnterprisePlugin(): Promise<void> {
+  if (import.meta.env.VITE_MCT_EE !== '1') {
+    return
+  }
+  try {
+    await import('@mctee/enterprise')
+    console.info('[Bootstrap] Enterprise plugin loaded')
+  } catch (error) {
+    console.warn('[Bootstrap] Enterprise plugin not loaded:', error)
+  }
+}

medcat-trainer/webapp/frontend/src/views/ProjectAdmin.vue

@@ -463,7 +463,10 @@
 
       <!-- Model Packs Tab -->
       <div v-if="activeTab === 'modelpacks'" class="tab-content admin-section">
-        <plugin-slot name="project-admin:modelpacks" />
+        <plugin-slot
+          name="project-admin:modelpacks"
+          @model-service-linked="onMedcatteryModelLinked"
+        />
         <model-packs-list
           v-if="!showModelPackForm && !editingModelPack"
           :model-packs="modelPacks"
@@ -699,6 +702,32 @@ export default {
       const response = await this.$http.get('/api/modelpacks/')
       this.modelPacks = response.data.results || response.data
     },
+    async onMedcatteryModelLinked(payload) {
+      if (payload?.modelServiceUrl) {
+        this.formData.use_model_service = true
+        this.formData.model_service_url = payload.modelServiceUrl
+        this.formData.model_pack = null
+        this.formData.concept_db = null
+        this.formData.vocab = null
+        if (this.validationErrors.model_pack) {
+          delete this.validationErrors.model_pack
+        }
+        if (this.validationErrors.concept_db) {
+          delete this.validationErrors.concept_db
+        }
+        if (this.validationErrors.vocab) {
+          delete this.validationErrors.vocab
+        }
+        if (this.validationErrors.model_config) {
+          delete this.validationErrors.model_config
+        }
+        if (this.validationErrors.model_service_url) {
+          delete this.validationErrors.model_service_url
+        }
+      }
+      const label = payload?.label || 'model'
+      this.$toast?.success(`Linked ${label} via MedCAT Service`)
+    },
     async fetchUsers() {
       const response = await this.$http.get('/api/users/')
       this.users = response.data.results || response.data

medcat-trainer/webapp/frontend/vite.config.ts

@@ -1,8 +1,19 @@
 import { fileURLToPath, URL } from 'node:url'
+import path from 'node:path'
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+// Resolve env at module load so this stays a plain object. vitest.config.ts
+// uses mergeConfig(), which cannot merge callback-style Vite configs.
+const env = {
+  ...loadEnv(process.env.MODE || process.env.NODE_ENV || 'development', process.cwd(), ''),
+  ...process.env,
+}
+const mctEeRoot = env.MCT_EE_ROOT || path.resolve(
+  fileURLToPath(new URL('../../../../cogstack-private/medcat-trainer-ee/frontend/src', import.meta.url))
+)
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
@@ -11,7 +22,13 @@ export default defineConfig({
   resolve: {
     alias: {
       vue: 'vue/dist/vue.esm-bundler.js',
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      // Always resolve so Vite/Rollup can analyse the dynamic import in
+      // enterprise.ts. OSS builds get a local noop stub; EE builds point at
+      // the private package when VITE_MCT_EE=1.
+      '@mctee/enterprise': env.VITE_MCT_EE === '1'
+        ? path.join(mctEeRoot, 'index.ts')
+        : fileURLToPath(new URL('./src/plugins/enterprise-stub.ts', import.meta.url)),
     }
   },
   build: {