feat: Add inline editing and manual script entry functionality (#39)
* feat: improve button layout and UI organization (#35) - Reorganize control buttons into a structured container with proper spacing - Add responsive design for mobile and desktop layouts - Improve SettingsButton and ResyncButton component structure - Enhance visual hierarchy with better typography and spacing - Add background container with shadow and border for better grouping - Make layout responsive with proper flexbox arrangements * Add category sidebar and filtering to scripts grid (#36) * Add category sidebar and filtering to scripts grid Introduces a CategorySidebar component with icon mapping and category selection. Updates metadata.json to include icons for each category. Enhances ScriptsGrid to support category-based filtering and integrates the sidebar, improving script navigation and discoverability. Also refines ScriptDetailModal layout for better modal presentation. * Add category metadata to scripts and improve filtering Introduces category metadata loading and exposes it via new API endpoints. Script cards are now enhanced with category information, allowing for accurate category-based filtering and counting in the ScriptsGrid component. Removes hardcoded category logic and replaces it with dynamic data from metadata.json. * Add reusable Badge component and refactor badge usage (#37) Introduces a new Badge component with variants for type, updateable, privileged, status, execution mode, and note. Refactors ScriptCard, ScriptDetailModal, and InstalledScriptsTab to use the new Badge components, improving consistency and maintainability. Also updates DarkModeProvider and layout.tsx for better dark mode handling and fallback. * Add advanced filtering and sorting to ScriptsGrid (#38) Introduces a new FilterBar component for ScriptsGrid, enabling filtering by search query, updatable status, script types, and sorting by name or creation date. Updates scripts API to include creation date in card data, improves deduplication and category counting logic, and adds error handling for missing script directories. * feat: Add inline editing and manual script entry functionality - Add inline editing for script names and container IDs in installed scripts table - Add manual script entry form for pre-installed containers - Update database and API to support script_name editing - Improve dark mode hover effects for table rows - Add form validation and error handling - Support both local and SSH execution modes for manual entries * feat: implement installed scripts functionality and clean up test files - Add installed scripts tab with filtering and execution capabilities - Update scripts grid with better type safety and error handling - Remove outdated test files and update test configuration - Fix TypeScript and ESLint issues in components - Update .gitattributes for proper line ending handling * fix: resolve TypeScript error with categoryNames type mismatch - Fixed categoryNames type from (string | undefined)[] to string[] in scripts router - Added proper type filtering and assertion in getScriptCardsWithCategories - Added missing ScriptCard import in scripts router - Ensures type safety for categoryNames property throughout the application --------- Co-authored-by: CanbiZ <47820557+MickLesk@users.noreply.github.com>
This commit is contained in:
Michel Roegl-Brunner
committed by
GitHub
GitHub
parent
7fd1351579
commit
a410aeacf7
@@ -3,6 +3,7 @@
|
||||
import { useState } from 'react';
|
||||
import { api } from '~/trpc/react';
|
||||
import { Terminal } from './Terminal';
|
||||
import { StatusBadge, ExecutionModeBadge } from './Badge';
|
||||
|
||||
interface InstalledScript {
|
||||
id: number;
|
||||
@@ -25,10 +26,15 @@ export function InstalledScriptsTab() {
|
||||
const [statusFilter, setStatusFilter] = useState<'all' | 'success' | 'failed' | 'in_progress'>('all');
|
||||
const [serverFilter, setServerFilter] = useState<string>('all');
|
||||
const [updatingScript, setUpdatingScript] = useState<{ id: number; containerId: string; server?: any; mode: 'local' | 'ssh' } | null>(null);
|
||||
const [editingScriptId, setEditingScriptId] = useState<number | null>(null);
|
||||
const [editFormData, setEditFormData] = useState<{ script_name: string; container_id: string }>({ script_name: '', container_id: '' });
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [addFormData, setAddFormData] = useState<{ script_name: string; container_id: string; server_id: string }>({ script_name: '', container_id: '', server_id: 'local' });
|
||||
|
||||
// Fetch installed scripts
|
||||
const { data: scriptsData, refetch: refetchScripts, isLoading } = api.installedScripts.getAllInstalledScripts.useQuery();
|
||||
const { data: statsData } = api.installedScripts.getInstallationStats.useQuery();
|
||||
const { data: serversData } = api.servers.getAllServers.useQuery();
|
||||
|
||||
// Delete script mutation
|
||||
const deleteScriptMutation = api.installedScripts.deleteInstalledScript.useMutation({
|
||||
@@ -37,6 +43,30 @@ export function InstalledScriptsTab() {
|
||||
}
|
||||
});
|
||||
|
||||
// Update script mutation
|
||||
const updateScriptMutation = api.installedScripts.updateInstalledScript.useMutation({
|
||||
onSuccess: () => {
|
||||
void refetchScripts();
|
||||
setEditingScriptId(null);
|
||||
setEditFormData({ script_name: '', container_id: '' });
|
||||
},
|
||||
onError: (error) => {
|
||||
alert(`Error updating script: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Create script mutation
|
||||
const createScriptMutation = api.installedScripts.createInstalledScript.useMutation({
|
||||
onSuccess: () => {
|
||||
void refetchScripts();
|
||||
setShowAddForm(false);
|
||||
setAddFormData({ script_name: '', container_id: '', server_id: 'local' });
|
||||
},
|
||||
onError: (error) => {
|
||||
alert(`Error creating script: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const scripts: InstalledScript[] = (scriptsData?.scripts as InstalledScript[]) ?? [];
|
||||
const stats = statsData?.stats;
|
||||
@@ -104,37 +134,74 @@ export function InstalledScriptsTab() {
|
||||
setUpdatingScript(null);
|
||||
};
|
||||
|
||||
const handleEditScript = (script: InstalledScript) => {
|
||||
setEditingScriptId(script.id);
|
||||
setEditFormData({
|
||||
script_name: script.script_name,
|
||||
container_id: script.container_id ?? ''
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setEditingScriptId(null);
|
||||
setEditFormData({ script_name: '', container_id: '' });
|
||||
};
|
||||
|
||||
const handleSaveEdit = () => {
|
||||
if (!editFormData.script_name.trim()) {
|
||||
alert('Script name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
if (editingScriptId) {
|
||||
updateScriptMutation.mutate({
|
||||
id: editingScriptId,
|
||||
script_name: editFormData.script_name.trim(),
|
||||
container_id: editFormData.container_id.trim() || undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (field: 'script_name' | 'container_id', value: string) => {
|
||||
setEditFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleAddFormChange = (field: 'script_name' | 'container_id' | 'server_id', value: string) => {
|
||||
setAddFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleAddScript = () => {
|
||||
if (!addFormData.script_name.trim()) {
|
||||
alert('Script name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
createScriptMutation.mutate({
|
||||
script_name: addFormData.script_name.trim(),
|
||||
script_path: `manual/${addFormData.script_name.trim()}`,
|
||||
container_id: addFormData.container_id.trim() || undefined,
|
||||
server_id: addFormData.server_id === 'local' ? undefined : Number(addFormData.server_id),
|
||||
execution_mode: addFormData.server_id === 'local' ? 'local' : 'ssh',
|
||||
status: 'success'
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancelAdd = () => {
|
||||
setShowAddForm(false);
|
||||
setAddFormData({ script_name: '', container_id: '', server_id: 'local' });
|
||||
};
|
||||
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string): string => {
|
||||
const baseClasses = 'px-2 py-1 text-xs font-medium rounded-full';
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return `${baseClasses} bg-green-100 text-green-800`;
|
||||
case 'failed':
|
||||
return `${baseClasses} bg-red-100 text-red-800`;
|
||||
case 'in_progress':
|
||||
return `${baseClasses} bg-yellow-100 text-yellow-800`;
|
||||
default:
|
||||
return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200`;
|
||||
}
|
||||
};
|
||||
|
||||
const getModeBadge = (mode: string): string => {
|
||||
const baseClasses = 'px-2 py-1 text-xs font-medium rounded-full';
|
||||
switch (mode) {
|
||||
case 'local':
|
||||
return `${baseClasses} bg-blue-100 text-blue-800`;
|
||||
case 'ssh':
|
||||
return `${baseClasses} bg-purple-100 text-purple-800`;
|
||||
default:
|
||||
return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200`;
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
@@ -184,6 +251,81 @@ export function InstalledScriptsTab() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Script Button */}
|
||||
<div className="mb-4">
|
||||
<button
|
||||
onClick={() => setShowAddForm(!showAddForm)}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
|
||||
>
|
||||
{showAddForm ? 'Cancel Add Script' : '+ Add Manual Script Entry'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Add Script Form */}
|
||||
{showAddForm && (
|
||||
<div className="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Add Manual Script Entry</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Script Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={addFormData.script_name}
|
||||
onChange={(e) => handleAddFormChange('script_name', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
|
||||
placeholder="Enter script name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Container ID
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={addFormData.container_id}
|
||||
onChange={(e) => handleAddFormChange('container_id', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
|
||||
placeholder="Enter container ID"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Server
|
||||
</label>
|
||||
<select
|
||||
value={addFormData.server_id}
|
||||
onChange={(e) => handleAddFormChange('server_id', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
|
||||
>
|
||||
<option value="local">Select Server (Local if none)</option>
|
||||
{serversData?.servers?.map((server: any) => (
|
||||
<option key={server.id} value={server.id}>
|
||||
{server.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-3 mt-4">
|
||||
<button
|
||||
onClick={handleCancelAdd}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAddScript}
|
||||
disabled={createScriptMutation.isPending}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{createScriptMutation.isPending ? 'Adding...' : 'Add Script'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex-1 min-w-64">
|
||||
@@ -232,7 +374,7 @@ export function InstalledScriptsTab() {
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Script Name
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
@@ -241,6 +383,9 @@ export function InstalledScriptsTab() {
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Server
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Mode
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Status
|
||||
</th>
|
||||
@@ -254,16 +399,41 @@ export function InstalledScriptsTab() {
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{filteredScripts.map((script) => (
|
||||
<tr key={script.id} className="hover:bg-gray-50">
|
||||
<tr key={script.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">{script.script_name}</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">{script.script_path}</div>
|
||||
{editingScriptId === script.id ? (
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
type="text"
|
||||
value={editFormData.script_name}
|
||||
onChange={(e) => handleInputChange('script_name', e.target.value)}
|
||||
className="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Script name"
|
||||
/>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{script.script_path}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">{script.script_name}</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">{script.script_path}</div>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{script.container_id ? (
|
||||
<span className="text-sm font-mono text-gray-900 dark:text-gray-100">{String(script.container_id)}</span>
|
||||
{editingScriptId === script.id ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editFormData.container_id}
|
||||
onChange={(e) => handleInputChange('container_id', e.target.value)}
|
||||
className="w-full px-2 py-1 text-sm font-mono border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Container ID"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-sm text-gray-400 dark:text-gray-500">-</span>
|
||||
script.container_id ? (
|
||||
<span className="text-sm font-mono text-gray-900 dark:text-gray-100">{String(script.container_id)}</span>
|
||||
) : (
|
||||
<span className="text-sm text-gray-400 dark:text-gray-500">-</span>
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
@@ -277,35 +447,61 @@ export function InstalledScriptsTab() {
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={getModeBadge(String(script.execution_mode))}>
|
||||
{String(script.execution_mode).toUpperCase()}
|
||||
</span>
|
||||
<ExecutionModeBadge mode={script.execution_mode}>
|
||||
{script.execution_mode.toUpperCase()}
|
||||
</ExecutionModeBadge>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={getStatusBadge(String(script.status))}>
|
||||
{String(script.status).replace('_', ' ').toUpperCase()}
|
||||
</span>
|
||||
<StatusBadge status={script.status}>
|
||||
{script.status.replace('_', ' ').toUpperCase()}
|
||||
</StatusBadge>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{formatDate(String(script.installation_date))}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<div className="flex space-x-2">
|
||||
{script.container_id && (
|
||||
<button
|
||||
onClick={() => handleUpdateScript(script)}
|
||||
className="text-blue-600 hover:text-blue-900"
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
{editingScriptId === script.id ? (
|
||||
<>
|
||||
<button
|
||||
onClick={handleSaveEdit}
|
||||
disabled={updateScriptMutation.isPending}
|
||||
className="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
{updateScriptMutation.isPending ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancelEdit}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={() => handleEditScript(script)}
|
||||
className="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm font-medium"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
{script.container_id && (
|
||||
<button
|
||||
onClick={() => handleUpdateScript(script)}
|
||||
className="text-blue-600 hover:text-blue-900"
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleDeleteScript(Number(script.id))}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
disabled={deleteScriptMutation.isPending}
|
||||
>
|
||||
{deleteScriptMutation.isPending ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleDeleteScript(Number(script.id))}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
disabled={deleteScriptMutation.isPending}
|
||||
>
|
||||
{deleteScriptMutation.isPending ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -315,7 +511,6 @@ export function InstalledScriptsTab() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user