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
@@ -52,8 +52,10 @@ const MyPlugins: React.FC = () => {
|
||||
const [selectedPlugin, setSelectedPlugin] = useState<PluginInstallation | null>(null);
|
||||
const [showUninstallModal, setShowUninstallModal] = useState(false);
|
||||
const [showRatingModal, setShowRatingModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [rating, setRating] = useState(0);
|
||||
const [review, setReview] = useState('');
|
||||
const [configValues, setConfigValues] = useState<Record<string, any>>({});
|
||||
|
||||
// Fetch installed plugins
|
||||
const { data: plugins = [], isLoading, error } = useQuery<PluginInstallation[]>({
|
||||
@@ -67,6 +69,10 @@ const MyPlugins: React.FC = () => {
|
||||
templateDescription: p.template_description || p.templateDescription,
|
||||
category: p.category,
|
||||
version: p.version,
|
||||
authorName: p.author_name || p.authorName,
|
||||
logoUrl: p.logo_url || p.logoUrl,
|
||||
templateVariables: p.template_variables || p.templateVariables || {},
|
||||
configValues: p.config_values || p.configValues || {},
|
||||
isActive: p.is_active !== undefined ? p.is_active : p.isActive,
|
||||
installedAt: p.installed_at || p.installedAt,
|
||||
hasUpdate: p.has_update !== undefined ? p.has_update : p.hasUpdate || false,
|
||||
@@ -117,6 +123,22 @@ const MyPlugins: React.FC = () => {
|
||||
},
|
||||
});
|
||||
|
||||
// Edit config mutation
|
||||
const editConfigMutation = useMutation({
|
||||
mutationFn: async ({ pluginId, configValues }: { pluginId: string; configValues: Record<string, any> }) => {
|
||||
const { data } = await api.patch(`/api/plugin-installations/${pluginId}/`, {
|
||||
config_values: configValues,
|
||||
});
|
||||
return data;
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['plugin-installations'] });
|
||||
setShowEditModal(false);
|
||||
setSelectedPlugin(null);
|
||||
setConfigValues({});
|
||||
},
|
||||
});
|
||||
|
||||
const handleUninstall = (plugin: PluginInstallation) => {
|
||||
setSelectedPlugin(plugin);
|
||||
setShowUninstallModal(true);
|
||||
@@ -149,6 +171,59 @@ const MyPlugins: React.FC = () => {
|
||||
updateMutation.mutate(plugin.id);
|
||||
};
|
||||
|
||||
const unescapeString = (str: string): string => {
|
||||
return str
|
||||
.replace(/\\n/g, '\n')
|
||||
.replace(/\\r/g, '\r')
|
||||
.replace(/\\t/g, '\t')
|
||||
.replace(/\\'/g, "'")
|
||||
.replace(/\\"/g, '"')
|
||||
.replace(/\\\\/g, '\\');
|
||||
};
|
||||
|
||||
const handleEdit = (plugin: PluginInstallation) => {
|
||||
setSelectedPlugin(plugin);
|
||||
// Convert escape sequences to actual characters for display
|
||||
const displayValues = { ...plugin.configValues || {} };
|
||||
if (plugin.templateVariables) {
|
||||
Object.entries(plugin.templateVariables).forEach(([key, variable]: [string, any]) => {
|
||||
if (displayValues[key]) {
|
||||
displayValues[key] = unescapeString(displayValues[key]);
|
||||
}
|
||||
});
|
||||
}
|
||||
setConfigValues(displayValues);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const escapeString = (str: string): string => {
|
||||
return str
|
||||
.replace(/\\/g, '\\\\') // Escape backslashes first
|
||||
.replace(/\n/g, '\\n')
|
||||
.replace(/\r/g, '\\r')
|
||||
.replace(/\t/g, '\\t')
|
||||
.replace(/'/g, "\\'")
|
||||
.replace(/"/g, '\\"');
|
||||
};
|
||||
|
||||
const submitConfigEdit = () => {
|
||||
if (selectedPlugin) {
|
||||
// Convert actual characters back to escape sequences for storage
|
||||
const storageValues = { ...configValues };
|
||||
if (selectedPlugin.templateVariables) {
|
||||
Object.entries(selectedPlugin.templateVariables).forEach(([key, variable]: [string, any]) => {
|
||||
if (storageValues[key]) {
|
||||
storageValues[key] = escapeString(storageValues[key]);
|
||||
}
|
||||
});
|
||||
}
|
||||
editConfigMutation.mutate({
|
||||
pluginId: selectedPlugin.id,
|
||||
configValues: storageValues,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-8">
|
||||
@@ -213,13 +288,25 @@ const MyPlugins: React.FC = () => {
|
||||
{plugins.map((plugin) => (
|
||||
<div
|
||||
key={plugin.id}
|
||||
className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow overflow-hidden"
|
||||
className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
|
||||
onClick={() => handleEdit(plugin)}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
{/* Plugin Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
{plugin.logoUrl && (
|
||||
<img
|
||||
src={plugin.logoUrl}
|
||||
alt={`${plugin.templateName} logo`}
|
||||
className="w-10 h-10 rounded-lg object-cover flex-shrink-0"
|
||||
onError={(e) => {
|
||||
// Hide image if it fails to load
|
||||
e.currentTarget.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{plugin.templateName}
|
||||
</h3>
|
||||
@@ -240,6 +327,14 @@ const MyPlugins: React.FC = () => {
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
|
||||
{plugin.authorName && (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="font-medium">
|
||||
{t('plugins.author', 'Author')}:
|
||||
</span>
|
||||
<span>{plugin.authorName}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="font-medium">
|
||||
{t('plugins.version', 'Version')}:
|
||||
@@ -284,7 +379,10 @@ const MyPlugins: React.FC = () => {
|
||||
<div className="flex items-center gap-2 ml-4">
|
||||
{plugin.hasUpdate && (
|
||||
<button
|
||||
onClick={() => handleUpdate(plugin)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleUpdate(plugin);
|
||||
}}
|
||||
disabled={updateMutation.isPending}
|
||||
className="flex items-center gap-2 px-3 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm font-medium"
|
||||
title={t('plugins.update', 'Update')}
|
||||
@@ -298,7 +396,10 @@ const MyPlugins: React.FC = () => {
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleRating(plugin)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRating(plugin);
|
||||
}}
|
||||
className="flex items-center gap-2 px-3 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 text-sm font-medium"
|
||||
title={plugin.rating ? t('plugins.editRating', 'Edit Rating') : t('plugins.rate', 'Rate')}
|
||||
>
|
||||
@@ -306,7 +407,10 @@ const MyPlugins: React.FC = () => {
|
||||
{plugin.rating ? t('plugins.editRating', 'Edit Rating') : t('plugins.rate', 'Rate')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleUninstall(plugin)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleUninstall(plugin);
|
||||
}}
|
||||
className="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
||||
title={t('plugins.uninstall', 'Uninstall')}
|
||||
>
|
||||
@@ -519,6 +623,115 @@ const MyPlugins: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Config Modal */}
|
||||
{showEditModal && selectedPlugin && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-2xl w-full overflow-hidden max-h-[80vh] flex flex-col">
|
||||
{/* Modal Header */}
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{t('plugins.editConfig', 'Edit Plugin Configuration')}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowEditModal(false);
|
||||
setSelectedPlugin(null);
|
||||
setConfigValues({});
|
||||
}}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="p-6 overflow-y-auto flex-1">
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white mb-2">
|
||||
{selectedPlugin.templateName}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{selectedPlugin.templateDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Config Fields */}
|
||||
{selectedPlugin.templateVariables && Object.keys(selectedPlugin.templateVariables).length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{Object.entries(selectedPlugin.templateVariables).map(([key, variable]: [string, any]) => (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{variable.description || key}
|
||||
{variable.required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
|
||||
{variable.type === 'textarea' ? (
|
||||
<textarea
|
||||
value={configValues[key] !== undefined ? configValues[key] : (variable.default ? unescapeString(variable.default) : '')}
|
||||
onChange={(e) => setConfigValues({ ...configValues, [key]: e.target.value })}
|
||||
rows={6}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 resize-none font-mono text-sm"
|
||||
placeholder={variable.default ? unescapeString(variable.default) : ''}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
value={configValues[key] || variable.default || ''}
|
||||
onChange={(e) => setConfigValues({ ...configValues, [key]: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
placeholder={variable.default || ''}
|
||||
/>
|
||||
)}
|
||||
|
||||
{variable.help_text && (
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{variable.help_text}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
{t('plugins.noConfigOptions', 'This plugin has no configuration options')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowEditModal(false);
|
||||
setSelectedPlugin(null);
|
||||
setConfigValues({});
|
||||
}}
|
||||
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"
|
||||
>
|
||||
{t('common.cancel', 'Cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={submitConfigEdit}
|
||||
disabled={editConfigMutation.isPending}
|
||||
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"
|
||||
>
|
||||
{editConfigMutation.isPending ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
||||
{t('plugins.saving', 'Saving...')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
{t('common.save', 'Save')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user