mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-14 02:42:04 +08:00
Add E2E tests for internationalization across multiple pages
- Implemented navigation.spec.ts to test language switching and translation of navigation elements. - Created sessions-page.spec.ts to verify translations on the sessions page, including headers, status badges, and date formatting. - Developed settings-page.spec.ts to ensure settings page content is translated and persists across sessions. - Added skills-page.spec.ts to validate translations for skill categories, action buttons, and empty states.
This commit is contained in:
catlog22
314
ccw/frontend/src/pages/HistoryPage.tsx
Normal file
314
ccw/frontend/src/pages/HistoryPage.tsx
Normal file
@@ -0,0 +1,314 @@
|
||||
// ========================================
|
||||
// HistoryPage Component
|
||||
// ========================================
|
||||
// CLI execution history page with filtering and bulk actions
|
||||
|
||||
import * as React from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import {
|
||||
Terminal,
|
||||
SearchX,
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
AlertTriangle,
|
||||
Search,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useHistory } from '@/hooks/useHistory';
|
||||
import { ConversationCard } from '@/components/shared/ConversationCard';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/Dialog';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuLabel,
|
||||
} from '@/components/ui/Dropdown';
|
||||
|
||||
/**
|
||||
* HistoryPage component - Display CLI execution history
|
||||
*/
|
||||
export function HistoryPage() {
|
||||
const { formatMessage } = useIntl();
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
const [toolFilter, setToolFilter] = React.useState<string | undefined>(undefined);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
|
||||
const [deleteType, setDeleteType] = React.useState<'single' | 'tool' | 'all' | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = React.useState<string | null>(null);
|
||||
|
||||
const {
|
||||
executions,
|
||||
isLoading,
|
||||
isFetching,
|
||||
error,
|
||||
refetch,
|
||||
deleteExecution,
|
||||
deleteByTool,
|
||||
deleteAll,
|
||||
isDeleting,
|
||||
} = useHistory({
|
||||
filter: { search: searchQuery || undefined, tool: toolFilter },
|
||||
});
|
||||
|
||||
const tools = React.useMemo(() => {
|
||||
const toolSet = new Set(executions.map((e) => e.tool));
|
||||
return Array.from(toolSet).sort();
|
||||
}, [executions]);
|
||||
|
||||
// Filter handlers
|
||||
const handleClearSearch = () => {
|
||||
setSearchQuery('');
|
||||
};
|
||||
|
||||
const handleClearFilters = () => {
|
||||
setSearchQuery('');
|
||||
setToolFilter(undefined);
|
||||
};
|
||||
|
||||
const hasActiveFilters = searchQuery.length > 0 || toolFilter !== undefined;
|
||||
|
||||
// Delete handlers
|
||||
const handleDeleteClick = (id: string) => {
|
||||
setDeleteType('single');
|
||||
setDeleteTarget(id);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteByTool = (tool: string) => {
|
||||
setDeleteType('tool');
|
||||
setDeleteTarget(tool);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteAll = () => {
|
||||
setDeleteType('all');
|
||||
setDeleteTarget(null);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
try {
|
||||
if (deleteType === 'single' && deleteTarget) {
|
||||
await deleteExecution(deleteTarget);
|
||||
} else if (deleteType === 'tool' && deleteTarget) {
|
||||
await deleteByTool(deleteTarget);
|
||||
} else if (deleteType === 'all') {
|
||||
await deleteAll();
|
||||
}
|
||||
setDeleteDialogOpen(false);
|
||||
setDeleteType(null);
|
||||
setDeleteTarget(null);
|
||||
} catch (err) {
|
||||
console.error('Failed to delete:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-foreground">
|
||||
{formatMessage({ id: 'history.title' })}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{formatMessage({ id: 'history.description' })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
>
|
||||
<RefreshCw className={cn('h-4 w-4 mr-2', isFetching && 'animate-spin')} />
|
||||
{formatMessage({ id: 'common.actions.refresh' })}
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
{formatMessage({ id: 'history.deleteOptions' })}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>{formatMessage({ id: 'history.deleteBy' })}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{tools.map((tool) => (
|
||||
<DropdownMenuItem key={tool} onClick={() => handleDeleteByTool(tool)}>
|
||||
{formatMessage({ id: 'history.deleteAllTool' }, { tool })}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={handleDeleteAll}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<AlertTriangle className="mr-2 h-4 w-4" />
|
||||
{formatMessage({ id: 'history.deleteAll' })}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error alert */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-4 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive">
|
||||
<Terminal className="h-5 w-5 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{formatMessage({ id: 'common.errors.loadFailed' })}</p>
|
||||
<p className="text-xs mt-0.5">{error.message}</p>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={() => refetch()}>
|
||||
{formatMessage({ id: 'common.actions.retry' })}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
{/* Search input */}
|
||||
<div className="flex-1 max-w-sm relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder={formatMessage({ id: 'history.searchPlaceholder' })}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 pr-9"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={handleClearSearch}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tool filter */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="gap-2 min-w-[160px] justify-between">
|
||||
{toolFilter || formatMessage({ id: 'history.filterAllTools' })}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-48">
|
||||
<DropdownMenuItem onClick={() => setToolFilter(undefined)}>
|
||||
{formatMessage({ id: 'history.filterAllTools' })}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
{tools.map((tool) => (
|
||||
<DropdownMenuItem
|
||||
key={tool}
|
||||
onClick={() => setToolFilter(tool)}
|
||||
className={toolFilter === tool ? 'bg-accent' : ''}
|
||||
>
|
||||
{tool}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Clear filters */}
|
||||
{hasActiveFilters && (
|
||||
<Button variant="ghost" size="sm" onClick={handleClearFilters}>
|
||||
{formatMessage({ id: 'common.actions.clearFilters' })}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Executions list */}
|
||||
{isLoading ? (
|
||||
<div className="grid gap-3">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-28 rounded-lg bg-muted animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : executions.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 px-4">
|
||||
<SearchX className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-medium text-foreground mb-2">
|
||||
{hasActiveFilters
|
||||
? formatMessage({ id: 'history.empty.filtered' })
|
||||
: formatMessage({ id: 'history.empty.title' })}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
{hasActiveFilters
|
||||
? formatMessage({ id: 'history.empty.filteredMessage' })
|
||||
: formatMessage({ id: 'history.empty.message' })}
|
||||
</p>
|
||||
{hasActiveFilters && (
|
||||
<Button variant="outline" onClick={handleClearFilters} className="mt-4">
|
||||
{formatMessage({ id: 'common.actions.clearFilters' })}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-3">
|
||||
{executions.map((execution) => (
|
||||
<ConversationCard
|
||||
key={execution.id}
|
||||
execution={execution}
|
||||
onDelete={handleDeleteClick}
|
||||
actionsDisabled={isDeleting}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{deleteType === 'all'
|
||||
? formatMessage({ id: 'history.dialog.deleteAllTitle' })
|
||||
: formatMessage({ id: 'history.dialog.deleteTitle' })}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{deleteType === 'all' && formatMessage({ id: 'history.dialog.deleteAllMessage' })}
|
||||
{deleteType === 'tool' &&
|
||||
formatMessage({ id: 'history.dialog.deleteToolMessage' }, { tool: deleteTarget })}
|
||||
{deleteType === 'single' &&
|
||||
formatMessage({ id: 'history.dialog.deleteMessage' })}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setDeleteDialogOpen(false)}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{formatMessage({ id: 'common.actions.cancel' })}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleConfirmDelete}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting
|
||||
? formatMessage({ id: 'common.status.deleting' })
|
||||
: formatMessage({ id: 'common.actions.delete' })}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HistoryPage;
|
||||
Reference in New Issue
Block a user