tenantpilot/components/policy-explorer/PolicySearchContainer.tsx
Ahmed Darrazi f592e5f55b feat: Policy Explorer UX Upgrade (003)
Implemented MVP with all core features:
- Browse 50 newest policies on load with null filtering
- Click row to view details in slide-over sheet
- JSON detection and pretty formatting
- Search with real-time filtering
- Badge colors for policy types (Security=red, Compliance=blue, Config=gray, App=outline)
- Navigation consolidated to 'Policy Explorer'

New components:
- PolicyTable.tsx - table with badges and hover effects
- PolicySearchContainer.tsx - search state management
- PolicyDetailSheet.tsx - JSON detail view with formatting
- PolicyExplorerClient.tsx - client wrapper
- lib/utils/policyBadges.ts - badge color mapping

Updated:
- lib/actions/policySettings.ts - added getRecentPolicySettings() with null filtering
- app/(app)/search/page.tsx - converted to Server Component
- config/nav.ts - renamed Search to Policy Explorer, removed All Settings
- components/search/EmptyState.tsx - updated messaging

Tasks complete: 36/47 (MVP ready)
- Phase 1-7: All critical features implemented
- Phase 8: Core polish complete (T041), optional tasks remain

TypeScript:  No errors
Status: Production-ready MVP
2025-12-07 02:28:15 +01:00

82 lines
2.3 KiB
TypeScript

'use client';
import { useState, useTransition } from 'react';
import { PolicyTable } from './PolicyTable';
import { SearchInput } from '@/components/search/SearchInput';
import { EmptyState } from '@/components/search/EmptyState';
import type { PolicySettingSearchResult } from '@/lib/actions/policySettings';
import { searchPolicySettings } from '@/lib/actions/policySettings';
import { toast } from 'sonner';
interface PolicySearchContainerProps {
initialPolicies: PolicySettingSearchResult[];
onPolicyClick: (policy: PolicySettingSearchResult) => void;
}
export function PolicySearchContainer({
initialPolicies,
onPolicyClick,
}: PolicySearchContainerProps) {
const [policies, setPolicies] = useState<PolicySettingSearchResult[]>(initialPolicies);
const [searchTerm, setSearchTerm] = useState('');
const [hasSearched, setHasSearched] = useState(false);
const [isPending, startTransition] = useTransition();
const handleSearch = (query: string) => {
setSearchTerm(query);
if (query.length === 0) {
// Reset to initial policies when search is cleared
setPolicies(initialPolicies);
setHasSearched(false);
return;
}
if (query.length < 2) {
return;
}
startTransition(async () => {
try {
const result = await searchPolicySettings(query);
if (result.success) {
setPolicies(result.data ?? []);
setHasSearched(true);
} else {
toast.error(result.error ?? 'Search failed');
setPolicies([]);
setHasSearched(true);
}
} catch (error) {
toast.error('An unexpected error occurred');
setPolicies([]);
setHasSearched(true);
}
});
};
return (
<div className="space-y-4">
<SearchInput
onSearch={handleSearch}
isSearching={isPending}
/>
{policies.length === 0 && hasSearched && (
<EmptyState />
)}
{policies.length === 0 && !hasSearched && initialPolicies.length === 0 && (
<div className="text-center py-12 text-muted-foreground">
<p>Keine Policies gefunden - Starten Sie einen Sync</p>
</div>
)}
{policies.length > 0 && (
<PolicyTable policies={policies} onRowClick={onPolicyClick} />
)}
</div>
);
}