feat: Add plugin configuration editing with template variable parsing
## Backend Changes:
- Enhanced PluginTemplate.save() to auto-parse template variables from plugin code
- Updated PluginInstallationSerializer to expose template metadata (description, category, version, author, logo, template_variables)
- Fixed template variable parser to handle nested {{ }} braces in default values
- Added brace-counting algorithm to properly extract variables with insertion codes
- Fixed explicit type parameter detection (textarea, text, email, etc.)
- Made scheduled_task optional on PluginInstallation model
- Added EventPlugin through model for event-plugin relationships
- Added Event.execute_plugins() method for plugin automation
## Frontend Changes:
- Created Tasks.tsx page for managing scheduled tasks
- Enhanced MyPlugins page with clickable plugin cards
- Added edit configuration modal with dynamic form generation
- Implemented escape sequence handling (convert \n, \', etc. for display)
- Added plugin logos to My Plugins page
- Updated type definitions for PluginInstallation interface
- Added insertion code documentation to Plugin Docs
## Plugin System:
- All platform plugins now have editable email templates with textarea support
- Template variables properly parsed with full default values
- Insertion codes ({{CUSTOMER_NAME}}, {{BUSINESS_NAME}}, etc.) documented
- Plugin logos displayed in marketplace and My Plugins
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import React, { useState, useMemo, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
@@ -17,8 +17,12 @@ import {
|
||||
Link as LinkIcon,
|
||||
Bot,
|
||||
Package,
|
||||
Eye
|
||||
Eye,
|
||||
ChevronDown,
|
||||
AlertTriangle
|
||||
} from 'lucide-react';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import api from '../api/client';
|
||||
import { PluginTemplate, PluginCategory } from '../types';
|
||||
|
||||
@@ -44,6 +48,32 @@ const categoryColors: Record<PluginCategory, string> = {
|
||||
OTHER: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
|
||||
};
|
||||
|
||||
// Helper function to detect platform-only code
|
||||
const detectPlatformOnlyCode = (code: string): { hasPlatformCode: boolean; warnings: string[] } => {
|
||||
const warnings: string[] = [];
|
||||
|
||||
if (code.includes('{{PLATFORM:')) {
|
||||
warnings.push('This code uses platform-only features that require special permissions');
|
||||
}
|
||||
|
||||
if (code.includes('{{WHITELIST:')) {
|
||||
warnings.push('This code requires whitelisting by platform administrators');
|
||||
}
|
||||
|
||||
if (code.includes('{{SUPERUSER:')) {
|
||||
warnings.push('This code requires superuser privileges to execute');
|
||||
}
|
||||
|
||||
if (code.includes('{{SYSTEM:')) {
|
||||
warnings.push('This code accesses system-level features');
|
||||
}
|
||||
|
||||
return {
|
||||
hasPlatformCode: warnings.length > 0,
|
||||
warnings
|
||||
};
|
||||
};
|
||||
|
||||
const PluginMarketplace: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
@@ -51,6 +81,8 @@ const PluginMarketplace: React.FC = () => {
|
||||
const [selectedCategory, setSelectedCategory] = useState<PluginCategory | 'ALL'>('ALL');
|
||||
const [selectedPlugin, setSelectedPlugin] = useState<PluginTemplate | null>(null);
|
||||
const [showDetailsModal, setShowDetailsModal] = useState(false);
|
||||
const [showCode, setShowCode] = useState(false);
|
||||
const [isLoadingDetails, setIsLoadingDetails] = useState(false);
|
||||
|
||||
// Fetch marketplace plugins
|
||||
const { data: plugins = [], isLoading, error } = useQuery<PluginTemplate[]>({
|
||||
@@ -71,6 +103,8 @@ const PluginMarketplace: React.FC = () => {
|
||||
isFeatured: p.is_featured || false,
|
||||
createdAt: p.created_at,
|
||||
updatedAt: p.updated_at,
|
||||
logoUrl: p.logo_url,
|
||||
pluginCode: p.plugin_code,
|
||||
}));
|
||||
},
|
||||
});
|
||||
@@ -122,9 +156,25 @@ const PluginMarketplace: React.FC = () => {
|
||||
});
|
||||
}, [filteredPlugins]);
|
||||
|
||||
const handleInstall = (plugin: PluginTemplate) => {
|
||||
const handleInstall = async (plugin: PluginTemplate) => {
|
||||
setSelectedPlugin(plugin);
|
||||
setShowDetailsModal(true);
|
||||
setShowCode(false);
|
||||
|
||||
// Fetch full plugin details including plugin_code
|
||||
setIsLoadingDetails(true);
|
||||
try {
|
||||
const { data } = await api.get(`/api/plugin-templates/${plugin.id}/`);
|
||||
setSelectedPlugin({
|
||||
...plugin,
|
||||
pluginCode: data.plugin_code,
|
||||
logoUrl: data.logo_url,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch plugin details:', error);
|
||||
} finally {
|
||||
setIsLoadingDetails(false);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmInstall = () => {
|
||||
@@ -245,22 +295,39 @@ const PluginMarketplace: React.FC = () => {
|
||||
>
|
||||
{/* Plugin Card Header */}
|
||||
<div className="p-6 flex-1">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium ${categoryColors[plugin.category]}`}>
|
||||
{categoryIcons[plugin.category]}
|
||||
{plugin.category}
|
||||
</span>
|
||||
{plugin.isFeatured && (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
||||
<Zap className="h-3 w-3" />
|
||||
Featured
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{plugin.isVerified && (
|
||||
<CheckCircle className="h-5 w-5 text-blue-500" title="Verified" />
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
{/* Logo */}
|
||||
{plugin.logoUrl ? (
|
||||
<img
|
||||
src={plugin.logoUrl}
|
||||
alt={`${plugin.name} logo`}
|
||||
className="w-12 h-12 rounded-lg object-cover flex-shrink-0"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
|
||||
<Package className="h-6 w-6 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium ${categoryColors[plugin.category]}`}>
|
||||
{categoryIcons[plugin.category]}
|
||||
{plugin.category}
|
||||
</span>
|
||||
{plugin.isFeatured && (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
||||
<Zap className="h-3 w-3" />
|
||||
Featured
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{plugin.isVerified && (
|
||||
<CheckCircle className="h-5 w-5 text-blue-500 flex-shrink-0" title="Verified" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
@@ -292,10 +359,7 @@ const PluginMarketplace: React.FC = () => {
|
||||
{/* Plugin Card Actions */}
|
||||
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-100 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedPlugin(plugin);
|
||||
setShowDetailsModal(true);
|
||||
}}
|
||||
onClick={() => handleInstall(plugin)}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium text-sm"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
@@ -314,17 +378,32 @@ const PluginMarketplace: React.FC = () => {
|
||||
{/* Modal Header */}
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{selectedPlugin.name}
|
||||
</h3>
|
||||
{selectedPlugin.isVerified && (
|
||||
<CheckCircle className="h-5 w-5 text-blue-500" title="Verified" />
|
||||
{/* Logo in modal header */}
|
||||
{selectedPlugin.logoUrl ? (
|
||||
<img
|
||||
src={selectedPlugin.logoUrl}
|
||||
alt={`${selectedPlugin.name} logo`}
|
||||
className="w-10 h-10 rounded-lg object-cover flex-shrink-0"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
|
||||
<Package className="h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{selectedPlugin.name}
|
||||
</h3>
|
||||
{selectedPlugin.isVerified && (
|
||||
<CheckCircle className="h-5 w-5 text-blue-500" title="Verified" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowDetailsModal(false);
|
||||
setSelectedPlugin(null);
|
||||
setShowCode(false);
|
||||
}}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||
>
|
||||
@@ -334,60 +413,131 @@ const PluginMarketplace: React.FC = () => {
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="p-6 space-y-6 overflow-y-auto flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium ${categoryColors[selectedPlugin.category]}`}>
|
||||
{categoryIcons[selectedPlugin.category]}
|
||||
{selectedPlugin.category}
|
||||
</span>
|
||||
{selectedPlugin.isFeatured && (
|
||||
<span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
||||
<Zap className="h-4 w-4" />
|
||||
Featured
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isLoadingDetails ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium ${categoryColors[selectedPlugin.category]}`}>
|
||||
{categoryIcons[selectedPlugin.category]}
|
||||
{selectedPlugin.category}
|
||||
</span>
|
||||
{selectedPlugin.isFeatured && (
|
||||
<span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
||||
<Zap className="h-4 w-4" />
|
||||
Featured
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('plugins.description', 'Description')}
|
||||
</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
{selectedPlugin.description}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('plugins.description', 'Description')}
|
||||
</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
{selectedPlugin.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('plugins.version', 'Version')}
|
||||
</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{selectedPlugin.version}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('plugins.author', 'Author')}
|
||||
</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{selectedPlugin.author}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('plugins.version', 'Version')}
|
||||
</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{selectedPlugin.version}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('plugins.author', 'Author')}
|
||||
</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{selectedPlugin.author}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="h-5 w-5 text-amber-500 fill-amber-500" />
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
{selectedPlugin.rating.toFixed(1)}
|
||||
</span>
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
({selectedPlugin.ratingCount} {t('plugins.ratings', 'ratings')})
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Download className="h-5 w-5 text-gray-400" />
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
{selectedPlugin.installCount.toLocaleString()} {t('plugins.installs', 'installs')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="h-5 w-5 text-amber-500 fill-amber-500" />
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
{selectedPlugin.rating.toFixed(1)}
|
||||
</span>
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
({selectedPlugin.ratingCount} {t('plugins.ratings', 'ratings')})
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Download className="h-5 w-5 text-gray-400" />
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
{selectedPlugin.installCount.toLocaleString()} {t('plugins.installs', 'installs')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code Viewer Section */}
|
||||
{selectedPlugin.pluginCode && (
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => setShowCode(!showCode)}
|
||||
className="flex items-center justify-between w-full px-4 py-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
{t('plugins.viewCode', 'View Code')}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={`h-5 w-5 text-gray-600 dark:text-gray-400 transition-transform ${showCode ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{showCode && (
|
||||
<div className="space-y-3">
|
||||
{/* Platform-only code warnings */}
|
||||
{(() => {
|
||||
const { hasPlatformCode, warnings } = detectPlatformOnlyCode(selectedPlugin.pluginCode || '');
|
||||
return hasPlatformCode ? (
|
||||
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h5 className="font-semibold text-amber-900 dark:text-amber-200 mb-2">
|
||||
{t('plugins.platformOnlyWarning', 'Platform-Only Features Detected')}
|
||||
</h5>
|
||||
<ul className="space-y-1 text-sm text-amber-800 dark:text-amber-300">
|
||||
{warnings.map((warning, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-amber-600 dark:text-amber-400 mt-0.5">•</span>
|
||||
<span>{warning}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
})()}
|
||||
|
||||
{/* Code display with syntax highlighting */}
|
||||
<div className="rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
|
||||
<SyntaxHighlighter
|
||||
language="javascript"
|
||||
style={vscDarkPlus}
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
borderRadius: 0,
|
||||
fontSize: '0.875rem',
|
||||
maxHeight: '400px'
|
||||
}}
|
||||
showLineNumbers
|
||||
>
|
||||
{selectedPlugin.pluginCode}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
@@ -396,6 +546,7 @@ const PluginMarketplace: React.FC = () => {
|
||||
onClick={() => {
|
||||
setShowDetailsModal(false);
|
||||
setSelectedPlugin(null);
|
||||
setShowCode(false);
|
||||
}}
|
||||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors font-medium"
|
||||
>
|
||||
@@ -403,7 +554,7 @@ const PluginMarketplace: React.FC = () => {
|
||||
</button>
|
||||
<button
|
||||
onClick={confirmInstall}
|
||||
disabled={installMutation.isPending}
|
||||
disabled={installMutation.isPending || isLoadingDetails}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
{installMutation.isPending ? (
|
||||
|
||||
Reference in New Issue
Block a user