lula2 0.3.1 → 0.3.2-nightly.0

package/src/lib/components/ui/FilterBuilder.svelte

@@ -0,0 +1,415 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import {
+		complianceStore,
+		type FilterOperator,
+		type FilterCondition,
+		type FilterValue,
+		activeFilters,
+		FILTER_OPERATORS,
+		getOperatorLabel
+	} from '$stores/compliance';
+	import { appState } from '$lib/websocket';
+	import { Filter, Add, TrashCan, ChevronDown, ChevronUp } from 'carbon-icons-svelte';
+	import { clickOutside } from '$lib/actions/clickOutside';
+	import { slide, fade } from 'svelte/transition';
+	import { derived } from 'svelte/store';
+	import { twMerge } from 'tailwind-merge';
+	import CustomDropdown from './CustomDropdown.svelte';
+
+	// Local state
+	let showFilterPanel = false;
+	let showFieldDropdown = false;
+	let newFilterField = '';
+	let newFilterOperator: FilterOperator = 'equals';
+	let newFilterValue = '';
+
+	// Get field schema and families from app state
+	const fieldSchema = derived(appState, ($state) => $state.fieldSchema?.fields || {});
+
+	// Get available fields from the store
+	$: availableFields = complianceStore.getAvailableFields();
+
+	// Get the active filters from the store
+	$: activeFiltersList = $activeFilters;
+
+	// Get field type for the selected field
+	$: selectedFieldSchema = $fieldSchema[newFilterField] || null;
+	$: selectedFieldType = selectedFieldSchema?.type || 'string';
+	$: selectedFieldUiType = selectedFieldSchema?.ui_type || 'short_text';
+	$: isSelectField = selectedFieldUiType === 'select';
+	$: fieldOptions = isSelectField ? selectedFieldSchema?.options || [] : [];
+
+	// Force equals operator for select fields
+	$: if (isSelectField) {
+		newFilterOperator = 'equals';
+	}
+
+	// Group fields by tab
+	$: fieldsByTab = {
+		overview: [] as string[],
+		implementation: [] as string[],
+		custom: [] as string[]
+	};
+
+	$: {
+		// Reset arrays before populating
+		fieldsByTab.overview = [];
+		fieldsByTab.implementation = [];
+		fieldsByTab.custom = [];
+
+		// Group fields by tab
+		availableFields.forEach((field) => {
+			const schema = $fieldSchema[field];
+			if (schema) {
+				const tab = schema.tab || getDefaultTabForCategory(schema.category);
+				if (tab === 'overview') fieldsByTab.overview.push(field);
+				else if (tab === 'implementation') fieldsByTab.implementation.push(field);
+				else fieldsByTab.custom.push(field);
+			} else {
+				// If no schema, default to custom
+				fieldsByTab.custom.push(field);
+			}
+		});
+	}
+
+	// Determine if value input should be shown based on operator
+	$: showValueInput = newFilterOperator !== 'exists' && newFilterOperator !== 'not_exists';
+
+	// Create a new array from the readonly constant to make it mutable for Svelte
+	const operatorOptions = FILTER_OPERATORS.map((op) => ({ value: op.value, label: op.label }));
+
+	// Add a new filter
+	function addFilter() {
+		if (!newFilterField) return;
+
+		let value = newFilterValue;
+
+		// Convert value based on field type
+		let processedValue: FilterValue = value;
+		if (selectedFieldType === 'boolean' && typeof value === 'string') {
+			processedValue = value.toLowerCase() === 'true';
+		} else if (selectedFieldType === 'number' && typeof value === 'string') {
+			const parsedValue = parseFloat(value);
+			processedValue = isNaN(parsedValue) ? value : parsedValue; // Fallback to string if parsing fails
+		}
+
+		// Add the filter
+		complianceStore.addFilter(newFilterField, newFilterOperator, processedValue);
+
+		// Reset the form
+		newFilterField = '';
+		newFilterOperator = 'equals';
+		newFilterValue = '';
+		showFilterPanel = false;
+	}
+
+	// Toggle filter panel
+	function toggleFilterPanel() {
+		showFilterPanel = !showFilterPanel;
+	}
+
+	// Helper function to map category to tab (same logic as ControlDetailsPanel)
+	function getDefaultTabForCategory(category: string): 'overview' | 'implementation' | 'custom' {
+		switch (category) {
+			case 'core':
+			case 'metadata':
+				return 'overview';
+			case 'compliance':
+			case 'content':
+				return 'implementation';
+			default:
+				return 'custom';
+		}
+	}
+
+	// Get display name for a field
+	function getFieldDisplayName(fieldName: string): string {
+		const schema = $fieldSchema[fieldName];
+
+		// Use schema names if available
+		if (schema?.original_name || schema?.display_name) {
+			return schema.original_name || schema.display_name;
+		}
+
+		// Otherwise use the field name with hyphens replaced by spaces and first letter capitalized
+		let displayName = fieldName.replace(/-/g, ' ');
+		return displayName.charAt(0).toUpperCase() + displayName.slice(1);
+	}
+
+	// Get display value for a filter
+	function getFilterDisplayValue(filter: FilterCondition): string {
+		// Special cases for exists/not_exists that don't need to show a value
+		if (filter.operator === 'exists') return 'exists';
+		if (filter.operator === 'not_exists') return 'does not exist';
+
+		// Use the shared getOperatorLabel function
+		const operatorText = getOperatorLabel(filter.operator).toLowerCase();
+		return `${operatorText} "${filter.value}"`;
+	}
+
+	// Handle click outside to close the panel
+	function handleClickOutside() {
+		showFilterPanel = false;
+	}
+</script>
+
+<div class="relative" use:clickOutside={handleClickOutside}>
+	<!-- Filter Button -->
+	<button
+		onclick={toggleFilterPanel}
+		class="flex items-center px-3 py-2 text-sm font-medium rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+		aria-expanded={showFilterPanel}
+		aria-controls="filter-panel"
+	>
+		<Filter class="w-4 h-4 mr-2" />
+		<span>Filters</span>
+		{#if activeFiltersList.length > 0}
+			<span
+				class="ml-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-300 text-xs font-medium px-2 py-0.5 rounded-full"
+			>
+				{activeFiltersList.length}
+			</span>
+		{/if}
+		<ChevronDown class="w-4 h-4 ml-2" />
+	</button>
+
+	<!-- Filter Panel -->
+	{#if showFilterPanel}
+		<div
+			id="filter-panel"
+			class="absolute z-10 mt-2 w-96 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700"
+			transition:slide={{ duration: 200 }}
+		>
+			<!-- Active Filters -->
+			<div class="p-4 border-b border-gray-200 dark:border-gray-700">
+				<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Active Filters</h3>
+
+				{#if $activeFilters.length === 0}
+					<p class="text-sm text-gray-500 dark:text-gray-400">No filters</p>
+				{:else}
+					<div class="space-y-2">
+						{#each $activeFilters as filter, index}
+							<div
+								class="flex items-center justify-between bg-gray-50 dark:bg-gray-700 p-2 rounded-md"
+							>
+								<div class="flex items-center">
+									<span class="text-sm text-gray-700 dark:text-gray-300">
+										<span class="font-medium">{getFieldDisplayName(filter.fieldName)}</span>
+										<span class="mx-1 text-gray-500 dark:text-gray-400"
+											>{getFilterDisplayValue(filter)}</span
+										>
+									</span>
+								</div>
+								<button
+									onclick={() => complianceStore.removeFilter(index)}
+									class="text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400"
+									aria-label="Remove filter"
+								>
+									<TrashCan class="w-4 h-4" />
+								</button>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Add New Filter -->
+			<div class="p-4">
+				<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Add Filter</h3>
+
+				<div class="space-y-3">
+					<!-- Field Selection with Custom Dropdown -->
+					<div>
+						<label for="filter-field" class="block text-xs text-gray-600 dark:text-gray-400 mb-1"
+							>Field</label
+						>
+
+						<!-- Custom Field Dropdown -->
+						<div class="relative" use:clickOutside={() => (showFieldDropdown = false)}>
+							<!-- Dropdown Trigger -->
+							<button
+								onclick={() => (showFieldDropdown = !showFieldDropdown)}
+								class={twMerge(
+									'w-full flex items-center justify-between px-3 py-2 text-sm rounded-md border transition-colors',
+									showFieldDropdown
+										? 'border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-900'
+										: 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500',
+									'bg-white dark:bg-gray-700 text-gray-900 dark:text-white'
+								)}
+							>
+								<span class="truncate">
+									{newFilterField ? getFieldDisplayName(newFilterField) : 'Select a field'}
+								</span>
+								{#if showFieldDropdown}
+									<ChevronUp class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+								{:else}
+									<ChevronDown class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+								{/if}
+							</button>
+
+							<!-- Dropdown Menu -->
+							{#if showFieldDropdown}
+								<div
+									class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg max-h-60 overflow-y-auto"
+									transition:fade={{ duration: 100 }}
+								>
+									<!-- Overview fields -->
+									<div
+										class="px-3 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/80"
+									>
+										Overview Fields
+									</div>
+									{#each fieldsByTab.overview as field}
+										<button
+											class={twMerge(
+												'w-full text-left px-3 py-2 text-sm',
+												newFilterField === field
+													? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
+													: 'hover:bg-gray-100 dark:hover:bg-gray-700/50'
+											)}
+											onclick={() => {
+												newFilterField = field;
+												showFieldDropdown = false;
+											}}
+										>
+											{getFieldDisplayName(field)}
+										</button>
+									{/each}
+
+									<!-- Implementation fields -->
+									{#if fieldsByTab.implementation.length > 0}
+										<!-- Divider -->
+										<div class="border-t border-gray-200 dark:border-gray-700 my-1"></div>
+										<div
+											class="px-3 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/80"
+										>
+											Implementation Fields
+										</div>
+										{#each fieldsByTab.implementation as field}
+											<button
+												class={twMerge(
+													'w-full text-left px-3 py-2 text-sm',
+													newFilterField === field
+														? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
+														: 'hover:bg-gray-100 dark:hover:bg-gray-700/50'
+												)}
+												onclick={() => {
+													newFilterField = field;
+													showFieldDropdown = false;
+												}}
+											>
+												{getFieldDisplayName(field)}
+											</button>
+										{/each}
+									{/if}
+
+									<!-- Custom fields -->
+									{#if fieldsByTab.custom.length > 0}
+										<!-- Divider -->
+										<div class="border-t border-gray-200 dark:border-gray-700 my-1"></div>
+										<div
+											class="px-3 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/80"
+										>
+											Custom Fields
+										</div>
+										{#each fieldsByTab.custom as field}
+											<button
+												class={twMerge(
+													'w-full text-left px-3 py-2 text-sm',
+													newFilterField === field
+														? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
+														: 'hover:bg-gray-100 dark:hover:bg-gray-700/50'
+												)}
+												onclick={() => {
+													newFilterField = field;
+													showFieldDropdown = false;
+												}}
+											>
+												{getFieldDisplayName(field)}
+											</button>
+										{/each}
+									{/if}
+								</div>
+							{/if}
+						</div>
+					</div>
+
+					<!-- Operator Selection -->
+					<div>
+						<label for="filter-operator" class="block text-xs text-gray-600 dark:text-gray-400 mb-1"
+							>Operator</label
+						>
+
+						{#if isSelectField}
+							<!-- Disabled dropdown for select fields (always equals) -->
+							<div
+								class="px-3 py-2 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
+							>
+								Equals
+							</div>
+						{:else}
+							<!-- Custom Operator Dropdown -->
+							<CustomDropdown
+								bind:value={newFilterOperator}
+								options={operatorOptions}
+								getDisplayValue={getOperatorLabel}
+								labelId="filter-operator"
+							/>
+						{/if}
+					</div>
+
+					<!-- Value Input (conditional) -->
+					{#if showValueInput}
+						<div>
+							<label for="filter-value" class="block text-xs text-gray-600 dark:text-gray-400 mb-1"
+								>Value</label
+							>
+							{#if isSelectField}
+								<!-- Custom dropdown for select fields -->
+								<CustomDropdown
+									bind:value={newFilterValue}
+									options={fieldOptions.map((option: string) => ({ value: option, label: option }))}
+									placeholder="Select a value"
+									labelId="filter-value"
+								/>
+							{:else if selectedFieldType === 'boolean'}
+								<!-- Boolean field with CustomDropdown -->
+								<CustomDropdown
+									bind:value={newFilterValue}
+									options={[
+										{ value: 'true', label: 'Yes' },
+										{ value: 'false', label: 'No' }
+									]}
+									placeholder="Select yes/no"
+									labelId="filter-value"
+								/>
+							{:else}
+								<!-- Text input for other fields -->
+								<input
+									id="filter-value"
+									type={selectedFieldType === 'number' ? 'number' : 'text'}
+									bind:value={newFilterValue}
+									placeholder="Enter value"
+									class="w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm"
+								/>
+							{/if}
+						</div>
+					{/if}
+
+					<!-- Add Button -->
+					<button
+						onclick={addFilter}
+						disabled={!newFilterField}
+						class="flex items-center px-3 py-2 text-sm font-medium rounded-lg bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						<Add class="w-4 h-4 mr-2" />
+						<span>Add Filter</span>
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/src/stores/compliance.ts

@@ -2,7 +2,51 @@
 // SPDX-FileCopyrightText: 2023-Present The Lula Authors
 
 import type { Control, ControlWithMappings, Mapping } from '$lib/types';
-import { derived, writable } from 'svelte/store';
+import { appState } from '$lib/websocket';
+import { derived, get, writable } from 'svelte/store';
+
+/**
+ * Shared filter operator options used across the application
+ */
+export const FILTER_OPERATORS = [
+	{ value: 'equals' as const, label: 'Equals' },
+	{ value: 'not_equals' as const, label: 'Not equals' },
+	{ value: 'includes' as const, label: 'Contains' },
+	{ value: 'not_includes' as const, label: 'Does not contain' },
+	{ value: 'exists' as const, label: 'Exists' },
+	{ value: 'not_exists' as const, label: 'Not exists' }
+] as const;
+
+// Extract the filter operator type from the constant
+export type FilterOperator = (typeof FILTER_OPERATORS)[number]['value'];
+
+/**
+ * Filter operator option with display label
+ */
+export interface FilterOperatorOption {
+	value: FilterOperator;
+	label: string;
+}
+
+/**
+ * Helper function to get the display label for a filter operator
+ */
+export function getOperatorLabel(operator: FilterOperator): string {
+	const option = FILTER_OPERATORS.find((op) => op.value === operator);
+	return option?.label || operator;
+}
+
+/**
+ * Type for filter values - intentionally flexible to handle any value type
+ * that might be found in control objects loaded from YAML files.
+ */
+export type FilterValue = unknown;
+
+export interface FilterCondition {
+	fieldName: string;
+	operator: FilterOperator;
+	value?: FilterValue;
+}
 
 // Base stores
 export const controls = writable<Control[]>([]);
@@ -10,49 +54,62 @@ export const mappings = writable<Mapping[]>([]);
 export const loading = writable(true);
 export const saveStatus = writable<'saved' | 'saving' | 'error'>('saved');
 export const searchTerm = writable('');
-export const selectedFamily = writable<string | null>(null);
 export const selectedControl = writable<Control | null>(null);
-
-// Derived stores
-export const families = derived(controls, ($controls) => {
-	const familySet = new Set(
-		$controls.map((c) => {
-			// Enhanced controls have family in _metadata.family, fallback to extracting from control-acronym
-			return (
-				(c as any)?._metadata?.family ||
-				(c as any)?.family ||
-				(c as any)?.['control-acronym']?.split('-')[0] ||
-				''
-			);
-		})
-	);
-	return Array.from(familySet)
-		.filter((f) => f)
-		.sort();
-});
+export const activeFilters = writable<FilterCondition[]>([]);
 
 export const filteredControls = derived(
-	[controls, selectedFamily, searchTerm],
-	([$controls, $selectedFamily, $searchTerm]) => {
+	[controls, searchTerm, activeFilters],
+	([$controls, $searchTerm, $activeFilters]) => {
 		let results = $controls;
 
-		if ($selectedFamily) {
-			results = results.filter((c) => {
-				// Enhanced controls have family in _metadata.family, fallback to extracting from control-acronym
-				const family =
-					(c as any)?._metadata?.family ||
-					(c as any)?.family ||
-					(c as any)?.['control-acronym']?.split('-')[0] ||
-					'';
-				return family === $selectedFamily;
-			});
-		}
-
+		// Apply search term
 		if ($searchTerm) {
 			const term = $searchTerm.toLowerCase();
 			results = results.filter((c) => JSON.stringify(c).toLowerCase().includes(term));
 		}
 
+		// Apply advanced filters
+		if ($activeFilters.length > 0) {
+			results = results.filter((control) => {
+				// Cast to ControlWithDynamicFields for dynamic field access
+				const dynamicControl = control as Record<string, unknown>;
+
+				// Control must match all filters
+				return $activeFilters.every((filter) => {
+					const fieldValue = dynamicControl[filter.fieldName];
+
+					// For exists/not_exists operators, we just need to check if the field has a value
+					if (filter.operator === 'exists') {
+						return fieldValue !== undefined && fieldValue !== null && fieldValue !== '';
+					} else if (filter.operator === 'not_exists') {
+						return fieldValue === undefined || fieldValue === null || fieldValue === '';
+					}
+
+					// For other operators, convert values to strings for comparison
+					const fieldValueStr = String(fieldValue).toLowerCase();
+					const filterValueStr =
+						filter.value !== undefined ? String(filter.value).toLowerCase() : '';
+
+					switch (filter.operator) {
+						case 'equals':
+							return fieldValueStr === filterValueStr;
+
+						case 'not_equals':
+							return fieldValueStr !== filterValueStr;
+
+						case 'includes':
+							return fieldValueStr.includes(filterValueStr);
+
+						case 'not_includes':
+							return !fieldValueStr.includes(filterValueStr);
+
+						default:
+							return true;
+					}
+				});
+			});
+		}
+
 		return results;
 	}
 );
@@ -74,13 +131,10 @@ export const complianceStore = {
 		searchTerm.set(term);
 	},
 
-	setSelectedFamily(family: string | null) {
-		selectedFamily.set(family);
-	},
-
 	setSelectedControl(control: Control | null) {
 		// Strip mappings property if it exists to prevent it from being saved to control files
 		if (control && 'mappings' in control) {
+			// eslint-disable-next-line  @typescript-eslint/no-explicit-any
 			const { mappings: _mappings, ...controlWithoutMappings } = control as any;
 			selectedControl.set(controlWithoutMappings);
 		} else {
@@ -90,6 +144,62 @@ export const complianceStore = {
 
 	clearFilters() {
 		searchTerm.set('');
-		selectedFamily.set(null);
+		activeFilters.set([]);
+	},
+
+	// Advanced filter methods
+	addFilter(fieldName: string, operator: FilterOperator, value?: FilterValue) {
+		const filters = get(activeFilters);
+		const newFilter: FilterCondition = {
+			fieldName,
+			operator,
+			value
+		};
+		activeFilters.set([...filters, newFilter]);
+		return newFilter;
+	},
+
+	updateFilter(index: number, updates: Partial<FilterCondition>) {
+		const filters = get(activeFilters);
+		if (index >= 0 && index < filters.length) {
+			const updatedFilters = [...filters];
+			updatedFilters[index] = { ...updatedFilters[index], ...updates };
+			activeFilters.set(updatedFilters);
+		}
+	},
+
+	removeFilter(index: number) {
+		const filters = get(activeFilters);
+		if (index >= 0 && index < filters.length) {
+			const updatedFilters = filters.filter((_, i) => i !== index);
+			activeFilters.set(updatedFilters);
+		}
+	},
+
+	getAvailableFields() {
+		// Get all unique field names from all controls and field schema
+		const allControls = get(controls);
+		const fieldSet = new Set<string>();
+
+		// Extract fields from controls
+		allControls.forEach((control) => {
+			Object.keys(control).forEach((key) => {
+				// Skip internal fields that start with underscore
+				if (!key.startsWith('_')) {
+					fieldSet.add(key);
+				}
+			});
+		});
+
+		// Get fields from the app state field schema if available
+		const state = get(appState);
+		const schema = state?.fieldSchema || state?.field_schema;
+		if (schema?.fields) {
+			Object.keys(schema.fields).forEach((key) => {
+				fieldSet.add(key);
+			});
+		}
+
+		return Array.from(fieldSet).sort();
 	}
 };