Openapi import advanced option tenant and prefix (#176)

Openapi import advanced option tenant and prefix

Co-authored-by: Kris Rane <kris.rane@e2open.com>

Author: boston008

internal/apiserver/handler/openapi.go

@@ -1,6 +1,7 @@
 package handler
 
 import (
+        "github.com/amoylab/unla/internal/common/config"
 	"github.com/gin-gonic/gin"
 	"github.com/amoylab/unla/internal/apiserver/database"
 	"github.com/amoylab/unla/internal/i18n"
@@ -65,13 +66,20 @@ func (h *OpenAPI) HandleImport(c *gin.Context) {
 		return
 	}
 
-	// Create converter
+	// Read tenant and prefix from form
+	tenant := c.PostForm("tenantId")
+	prefix := c.PostForm("prefix")
+
 	h.logger.Debug("creating OpenAPI converter")
 	converter := openapi.NewConverter()
 
-	// Convert the OpenAPI specification
-	h.logger.Debug("converting OpenAPI specification")
-	config, err := converter.Convert(content)
+	// Use provided tenant/prefix if not empty, else use default logic
+	var config *config.MCPConfig
+	if tenant == "" && prefix == "" {
+		config, err = converter.Convert(content)
+	} else {
+		config, err = converter.ConvertWithOptions(content, tenant, prefix)
+	}
 	if err != nil {
 		h.logger.Error("failed to convert OpenAPI specification", zap.Error(err))
 		i18n.RespondWithError(c, i18n.ErrBadRequest.WithParam("Reason", "Failed to convert OpenAPI specification: "+err.Error()))

pkg/openapi/converter.go

@@ -330,6 +330,38 @@ func (c *Converter) ConvertFromYAML(yamlData []byte) (*config.MCPConfig, error)
 	return c.Convert(yamlData)
 }
 
+// ConvertWithOptions converts OpenAPI specification to MCP configuration, using tenant and prefix if provided
+func (c *Converter) ConvertWithOptions(specData []byte, tenant, prefix string) (*config.MCPConfig, error) {
+	config, err := c.Convert(specData)
+	if err != nil {
+		return nil, err
+	}
+    // Remove leading / from tenant if present
+	cleanTenant := tenant
+	if strings.HasPrefix(cleanTenant, "/") {
+		cleanTenant = strings.TrimPrefix(cleanTenant, "/")
+	}	
+	if tenant != "" && prefix != "" {
+		config.Tenant = cleanTenant 
+		if len(config.Routers) > 0 {
+			config.Routers[0].Prefix = cleanTenant + "/" + prefix
+		}
+	} else if tenant != "" {
+		config.Tenant = cleanTenant
+		if len(config.Routers) > 0 {
+			// Autogenerate prefix as in default logic
+			rs := lol.RandomString(4)
+			config.Routers[0].Prefix = cleanTenant + "/" + rs
+		}
+	} else if prefix != "" {
+		config.Tenant = "default"
+		if len(config.Routers) > 0 {
+			config.Routers[0].Prefix = "/default/" + prefix
+		}
+	}
+	return config, nil
+}
+
 // contains checks if a string is in a slice
 func contains(slice []string, str string) bool {
 	for _, v := range slice {

web/src/pages/gateway/components/OpenAPIImport.tsx

@@ -1,17 +1,34 @@
-import { Card, CardBody, Button } from '@heroui/react';
+import { Card, CardBody, Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Input } from '@heroui/react';
 import { t } from 'i18next';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import LocalIcon from '@/components/LocalIcon';
-import { importOpenAPI } from '@/services/api';
+import { importOpenAPI, getTenants } from '@/services/api';
 import { toast } from "@/utils/toast.ts";
+import type { Tenant } from '@/types/gateway';
 
 interface OpenAPIImportProps {
   onSuccess?: () => void;
 }
 
 const OpenAPIImport: React.FC<OpenAPIImportProps> = ({ onSuccess }) => {
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [tenants, setTenants] = useState<Tenant[]>([]);
+  const [selectedTenant, setSelectedTenant] = useState<string>('');
+  const [prefix, setPrefix] = useState('');
+  const [loadingTenants, setLoadingTenants] = useState(false);
+
+  useEffect(() => {
+    if (showAdvanced && tenants.length === 0) {
+      setLoadingTenants(true);
+      getTenants()
+        .then((data) => setTenants(data))
+        .catch(() => toast.error(t('errors.fetch_tenants')))
+        .finally(() => setLoadingTenants(false));
+    }
+  }, [showAdvanced, tenants.length]);
+
   const onDrop = useCallback(async (acceptedFiles: globalThis.File[]) => {
     if (acceptedFiles.length === 0) {
       toast.error(t('errors.invalid_openapi_file'), {
@@ -21,7 +38,11 @@ const OpenAPIImport: React.FC<OpenAPIImportProps> = ({ onSuccess }) => {
     }
 
     try {
-      await importOpenAPI(acceptedFiles[0]);
+      // Find the selected tenant object
+      const tenantObj = tenants.find((t: Tenant) => t.id.toString() === selectedTenant);
+      // Use tenant.prefix if available, otherwise empty string
+      const tenantPrefix = tenantObj ? tenantObj.prefix : '';
+      await importOpenAPI(acceptedFiles[0], tenantPrefix, prefix);
       toast.success(t('errors.import_openapi_success'), {
         duration: 3000,
       });
@@ -31,7 +52,7 @@ const OpenAPIImport: React.FC<OpenAPIImportProps> = ({ onSuccess }) => {
         duration: 3000,
       })
     }
-  }, [onSuccess]);
+  }, [onSuccess, selectedTenant, prefix, tenants]);
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
@@ -52,15 +73,15 @@ const OpenAPIImport: React.FC<OpenAPIImportProps> = ({ onSuccess }) => {
             isDragActive ? 'bg-primary/10 border-primary' : 'bg-content2 border-divider'
           }`}
         >
-          <input {...getInputProps()} />
+          <input {...getInputProps()} style={{ display: 'none' }} />
           <LocalIcon icon="lucide:upload" className="text-4xl mb-4 text-primary" />
           {isDragActive ? (
             <p className="text-lg text-primary">Drop the OpenAPI specification file here...</p>
           ) : (
             <div className="text-center">
               <p className="text-lg">Drag and drop an OpenAPI specification file here</p>
               <p className="text-sm text-default-500 mt-2">or</p>
-              <Button color="primary" variant="flat" className="mt-2">
+              <Button color="primary" variant="flat" className="mt-2" onClick={e => { e.stopPropagation(); document.querySelector<HTMLInputElement>('input[type="file"]')?.click(); }}>
                 Select a file
               </Button>
             </div>
@@ -69,6 +90,34 @@ const OpenAPIImport: React.FC<OpenAPIImportProps> = ({ onSuccess }) => {
             Supported formats: JSON (.json), YAML (.yaml, .yml)
           </p>
         </div>
+        <div className="mt-4 w-full flex flex-col items-center">
+          <Button size="sm" variant="light" onClick={() => setShowAdvanced((v) => !v)}>
+            {showAdvanced ? t('common.hide_advanced_options', 'Hide Advanced Options') : t('common.show_advanced_options', 'Show Advanced Options')}
+          </Button>
+          {showAdvanced && (
+            <div className="w-full mt-4 flex flex-col gap-4 items-center">
+              <div className="w-full max-w-xs">
+                <label className="block text-sm font-medium mb-1">{t('gateway.tenant', 'Tenant')}</label>
+                <Dropdown isDisabled={loadingTenants || tenants.length === 0} className="w-full">
+                  <DropdownTrigger>
+                    <Button variant="bordered" className="w-full">
+                      {selectedTenant ? tenants.find(t => t.id.toString() === selectedTenant)?.name : t('gateway.select_tenant', 'Select Tenant')}
+                    </Button>
+                  </DropdownTrigger>
+                  <DropdownMenu aria-label="Tenant List" selectionMode="single" selectedKeys={selectedTenant ? [selectedTenant] : []} onAction={key => setSelectedTenant(key as string)}>
+                    {tenants.map(tenant => (
+                      <DropdownItem key={tenant.id.toString()}>{tenant.name}</DropdownItem>
+                    ))}
+                  </DropdownMenu>
+                </Dropdown>
+              </div>
+              <div className="w-full max-w-xs">
+                <label className="block text-sm font-medium mb-1">{t('gateway.prefix', 'Prefix')}</label>
+                <Input value={prefix} onChange={e => setPrefix(e.target.value)} placeholder={t('gateway.prefix_placeholder', 'Enter prefix (optional)')} />
+              </div>
+            </div>
+          )}
+        </div>
       </CardBody>
     </Card>
   );

web/src/services/api.ts

@@ -168,10 +168,13 @@ export const deleteChatSession = async (sessionId: string) => {
   }
 };
 
-export const importOpenAPI = async (file: File) => {
+export const importOpenAPI = async (file: File, tenantId?: string, prefix?: string) => {
   try {
     const formData = new globalThis.FormData();
     formData.append('file', file);
+    // Always send tenantId and prefix, even if empty
+    formData.append('tenantId', tenantId ?? '');
+    formData.append('prefix', prefix ?? '');
 
     const response = await api.post('/openapi/import', formData, {
       headers: {