Fix: Resolved broken focus and filter generation in dynamic group management. Improved condition builder component for better user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/d81ff9b2-e4c8-4415-b4de-8f7c4be29888.jpg
This commit is contained in:
alphaeusmote
2025-04-11 01:23:20 +00:00
parent 51e0ba048f
commit e79b39cd22
3 changed files with 702 additions and 30 deletions
@@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef, useMemo } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
@@ -394,24 +394,13 @@ const ConditionBuilder: React.FC<ConditionBuilderProps> = ({
</Select>
{condition.attribute === 'custom' && (
<Input
<TextInput
className="mt-1"
placeholder="Enter custom attribute"
value={condition.customAttribute || ''}
onChange={(e) => {
// Create direct reference to prevent re-rendering that causes focus loss
const newConditions = [...conditions];
newConditions[index] = {
...newConditions[index],
customAttribute: e.target.value
};
// Use a stable reference - in React 18+ this helps maintain focus
requestAnimationFrame(() => {
onChange(newConditions);
});
onChange={(value) => {
updateCondition(index, 'customAttribute', value);
}}
// Add key to ensure input identity is stable
key={`custom-attr-input-${condition.id || index}`}
/>
)}
</div>
@@ -436,23 +425,12 @@ const ConditionBuilder: React.FC<ConditionBuilderProps> = ({
<div className="col-span-3">
{condition.operator !== 'present' && condition.operator !== 'notPresent' && (
<Input
<TextInput
placeholder="Value"
value={condition.value || ''}
onChange={(e) => {
// Create direct reference to prevent re-rendering that causes focus loss
const newConditions = [...conditions];
newConditions[index] = {
...newConditions[index],
value: e.target.value
};
// Use a stable reference - in React 18+ this helps maintain focus
requestAnimationFrame(() => {
onChange(newConditions);
});
onChange={(value) => {
updateCondition(index, 'value', value);
}}
// Add key to ensure input identity is stable
key={`value-input-${condition.id || index}`}
/>
)}
</div>
@@ -0,0 +1,694 @@
import React, { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Card, CardContent } from '@/components/ui/card';
import { useToast } from '@/hooks/use-toast';
import { useQuery } from '@tanstack/react-query';
import { Trash, Plus, Move, FolderPlus, ChevronDown, ChevronRight, Copy } from 'lucide-react';
import { Condition } from './rule-editor';
import { LdapAttribute } from '@shared/schema';
interface ConditionBuilderProps {
conditions: Condition[];
onChange: (conditions: Condition[]) => void;
connections: number[];
}
// Memoized component to maintain focus during renders
const ConditionValue = React.memo(({ value, onChange, placeholder }: {
value: string,
onChange: (value: string) => void,
placeholder?: string
}) => {
const [localValue, setLocalValue] = useState(value || '');
useEffect(() => {
if (value !== localValue) {
setLocalValue(value || '');
}
}, [value]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
setLocalValue(newValue);
onChange(newValue);
};
return (
<Input
value={localValue}
onChange={handleChange}
placeholder={placeholder}
/>
);
});
ConditionValue.displayName = 'ConditionValue';
// Memoized component for custom attribute input
const CustomAttributeInput = React.memo(({ value, onChange, placeholder }: {
value: string,
onChange: (value: string) => void,
placeholder?: string
}) => {
const [localValue, setLocalValue] = useState(value || '');
useEffect(() => {
if (value !== localValue) {
setLocalValue(value || '');
}
}, [value]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
setLocalValue(newValue);
onChange(newValue);
};
return (
<Input
className="mt-1"
value={localValue}
onChange={handleChange}
placeholder={placeholder}
/>
);
});
CustomAttributeInput.displayName = 'CustomAttributeInput';
const operators = [
{ value: '=', label: 'Equals' },
{ value: '!=', label: 'Not Equals' },
{ value: 'contains', label: 'Contains' },
{ value: 'startsWith', label: 'Starts With' },
{ value: 'endsWith', label: 'Ends With' },
{ value: 'present', label: 'Is Present' },
{ value: 'notPresent', label: 'Is Not Present' }
];
const logicalOperators = [
{ value: 'AND', label: 'AND' },
{ value: 'OR', label: 'OR' }
];
const defaultCondition: Condition = {
attribute: '',
operator: '=',
value: '',
logicalOperator: 'AND'
};
const defaultGroup: Condition = {
attribute: '',
operator: '',
value: '',
logicalOperator: 'AND',
isGroup: true
};
// Non-recursive function to generate LDAP filter syntax from conditions
const generateLdapFilter = (conditions: Condition[]): string => {
if (conditions.length === 0) return '(objectClass=*)';
// Helper function to generate filter for a regular condition (not a group)
const generateRegularFilter = (condition: Condition): string => {
// Get actual attribute name (custom or selected)
const attributeName = condition.attribute === 'custom' && condition.customAttribute
? condition.customAttribute
: condition.attribute;
if (!attributeName) return '';
// Regular condition
switch (condition.operator) {
case '=':
return `(${attributeName}=${condition.value})`;
case '!=':
return `(!(${attributeName}=${condition.value}))`;
case 'contains':
return `(${attributeName}=*${condition.value}*)`;
case 'startsWith':
return `(${attributeName}=${condition.value}*)`;
case 'endsWith':
return `(${attributeName}=*${condition.value})`;
case 'present':
return `(${attributeName}=*)`;
case 'notPresent':
return `(!(${attributeName}=*))`;
default:
return `(${attributeName}=${condition.value})`;
}
};
// Build a map of parent IDs to their child conditions
const childrenByParentId = new Map<number | null | undefined, Condition[]>();
// Organize conditions by their parent
for (const condition of conditions) {
const parentId = condition.parentId;
if (!childrenByParentId.has(parentId)) {
childrenByParentId.set(parentId, []);
}
childrenByParentId.get(parentId)!.push(condition);
}
// Generate filter for a group using an iterative approach
const generateGroupFilter = (parentId: number | null | undefined): string => {
const childConditions = childrenByParentId.get(parentId) || [];
if (childConditions.length === 0) return '(objectClass=*)';
// Find the logical operator for this group
const logicalOp = parentId === null || parentId === undefined
? 'AND' // Default for root level
: conditions.find(c => c.id === parentId)?.logicalOperator || 'AND';
const operator = logicalOp === 'AND' ? '&' : '|';
let groupFilter = `(${operator}`;
// Track if we've added any conditions to this group
let hasAddedCondition = false;
// Process regular conditions in this group
for (const condition of childConditions) {
if (!condition.isGroup) {
const filter = generateRegularFilter(condition);
if (filter) {
groupFilter += filter;
hasAddedCondition = true;
}
}
}
// Process subgroups in this group
for (const condition of childConditions) {
if (condition.isGroup && condition.id !== undefined) {
const subGroupFilter = generateGroupFilter(condition.id);
if (subGroupFilter !== '(objectClass=*)') {
groupFilter += subGroupFilter;
hasAddedCondition = true;
}
}
}
groupFilter += ')';
// If there are no actual conditions, return a default
if (!hasAddedCondition) {
return '(objectClass=*)';
}
return groupFilter;
};
// Start with the root level conditions
return generateGroupFilter(null);
};
// Main component (completely rewritten)
const FixedConditionBuilder: React.FC<ConditionBuilderProps> = ({
conditions,
onChange,
connections
}) => {
const { toast } = useToast();
const [expandedGroups, setExpandedGroups] = useState<Set<number>>(new Set());
const [ldapFilter, setLdapFilter] = useState('');
// Load LDAP attributes from connections
const { data: attributesData = [] } = useQuery<LdapAttribute[]>({
queryKey: ['/api/ldap-attributes', { connectionIds: connections }],
enabled: connections.length > 0,
staleTime: 60000,
});
const [availableAttributes, setAvailableAttributes] = useState<string[]>([
'cn', 'sAMAccountName', 'givenName', 'sn', 'mail', 'displayName',
'memberOf', 'distinguishedName', 'objectClass', 'objectCategory',
'userAccountControl', 'department', 'company', 'title', 'manager'
]);
// Update available attributes when data is loaded
useEffect(() => {
if (attributesData.length > 0) {
// Extract unique attribute names
const uniqueAttributes = Array.from(
new Set(attributesData.map(attr => attr.name))
);
setAvailableAttributes(uniqueAttributes);
}
}, [attributesData]);
// Update LDAP filter when conditions change
useEffect(() => {
setLdapFilter(generateLdapFilter(conditions));
}, [conditions]);
// Handle adding a new condition
const addCondition = (parentId?: number | null) => {
const newCondition: Condition = {
...defaultCondition,
id: Math.max(0, ...conditions.map(c => c.id || 0)) + 1, // Generate a new ID
parentId
};
// Find the appropriate insertion position
if (parentId === undefined) {
// Add to root level
onChange([...conditions, newCondition]);
} else {
// Find the last condition with the same parent to add it after
const sameParentConditions = conditions.filter(c => c.parentId === parentId);
const insertIndex = sameParentConditions.length > 0
? conditions.indexOf(sameParentConditions[sameParentConditions.length - 1]) + 1
: conditions.findIndex(c => c.id === parentId) + 1;
const newConditions = [...conditions];
newConditions.splice(insertIndex, 0, newCondition);
onChange(newConditions);
}
};
// Handle adding a new condition group
const addConditionGroup = (parentId?: number | null) => {
// Generate a new ID for the group
const newId = Math.max(0, ...conditions.map(c => c.id || 0)) + 1;
const newGroup: Condition = {
...defaultGroup,
id: newId, // Assign the new ID
parentId
};
// Similar insertion logic as addCondition
if (parentId === undefined) {
onChange([...conditions, newGroup]);
} else {
const sameParentConditions = conditions.filter(c => c.parentId === parentId);
const insertIndex = sameParentConditions.length > 0
? conditions.indexOf(sameParentConditions[sameParentConditions.length - 1]) + 1
: conditions.findIndex(c => c.id === parentId) + 1;
const newConditions = [...conditions];
newConditions.splice(insertIndex, 0, newGroup);
onChange(newConditions);
}
// Automatically expand the new group
setExpandedGroups(prev => {
const expanded = new Set(prev);
expanded.add(newId);
return expanded;
});
};
// Handle updating a condition
const updateCondition = (index: number, field: keyof Condition, value: any) => {
const newConditions = [...conditions];
newConditions[index] = { ...newConditions[index], [field]: value };
onChange(newConditions);
};
// Handle removing a condition or group
const removeCondition = (index: number) => {
const conditionToRemove = conditions[index];
// If it's a group, also check for child conditions
if (conditionToRemove.isGroup) {
const childConditions = conditions.filter(c => c.parentId === conditionToRemove.id);
if (childConditions.length > 0) {
const confirmDelete = window.confirm(
`This will also delete ${childConditions.length} child condition(s). Continue?`
);
if (!confirmDelete) {
return;
}
}
// Make sure we have a valid ID before proceeding
if (conditionToRemove.id !== undefined) {
// Find just this group's children (not all groups with the same parent)
const childrenToRemove = getAllDescendants(conditionToRemove.id);
// Create a list of IDs to remove (the group and all its descendants)
const idsToRemove = new Set<number | undefined>([
conditionToRemove.id,
...childrenToRemove.map(c => c.id).filter((id): id is number => id !== undefined)
]);
// Only remove this specific group and its descendants
const newConditions = conditions.filter(c => {
// Keep the condition if its ID is not in our removal list
// and its parent ID is not in our removal list
return !idsToRemove.has(c.id) &&
!(c.parentId !== null && idsToRemove.has(c.parentId));
});
onChange(newConditions);
} else {
// No valid ID, just remove the condition at this index
const newConditions = conditions.filter((c, i) => i !== index);
onChange(newConditions);
}
} else {
// Just remove the single condition
const newConditions = conditions.filter((c, i) => i !== index);
onChange(newConditions);
}
};
// Helper function to get all descendants of a condition group
const getAllDescendants = (parentId: number | undefined): Condition[] => {
if (parentId === undefined) return [];
const directChildren = conditions.filter(c => c.parentId === parentId);
// Get all children of groups within this group (recursively)
const groupChildren = directChildren
.filter(c => c.isGroup && c.id !== undefined)
.flatMap(group => getAllDescendants(group.id));
return [...directChildren, ...groupChildren];
};
// Toggle group expansion
const toggleGroupExpand = (groupId: number) => {
setExpandedGroups(prev => {
const newExpanded = new Set(prev);
if (newExpanded.has(groupId)) {
newExpanded.delete(groupId);
} else {
newExpanded.add(groupId);
}
return newExpanded;
});
};
// Render a single condition (regular or group)
const renderCondition = (condition: Condition, index: number, level = 0) => {
// If this is a group condition
if (condition.isGroup) {
// Get all direct children of this group
const childConditions = condition.id
? conditions.filter(c => c.parentId === condition.id)
: [];
const isExpanded = condition.id ? expandedGroups.has(condition.id) : false;
return (
<div className="mb-3" key={`group-${condition.id || index}`}>
<div
className={`border ${isExpanded ? 'bg-background/50' : 'bg-accent/10'} border-border rounded-md p-3`}
style={{ marginLeft: level > 0 ? `${level * 20}px` : '0' }}
>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center space-x-2">
<button
type="button"
onClick={() => condition.id && toggleGroupExpand(condition.id)}
className="p-1 hover:bg-accent rounded-sm"
>
{isExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</button>
<span className="text-sm font-medium">
Condition Group ({condition.logicalOperator})
</span>
</div>
<div className="flex items-center space-x-2">
<Select
value={condition.logicalOperator || 'AND'}
onValueChange={(value) => updateCondition(index, 'logicalOperator', value)}
>
<SelectTrigger className="w-20 h-8">
<SelectValue placeholder="Operator" />
</SelectTrigger>
<SelectContent>
{logicalOperators.map((op) => (
<SelectItem key={op.value} value={op.value}>
{op.label}
</SelectItem>
))}
</SelectContent>
</Select>
<Button
variant="ghost"
size="icon"
onClick={() => addCondition(condition.id)}
title="Add Condition"
>
<Plus className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => addConditionGroup(condition.id)}
title="Add Group"
>
<FolderPlus className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => removeCondition(index)}
title="Remove Group"
>
<Trash className="h-4 w-4" />
</Button>
</div>
</div>
{isExpanded && (
<div className="pl-2">
{childConditions.length > 0 ? (
<div>
{childConditions.map((childCondition, i) => {
const childIndex = conditions.indexOf(childCondition);
return renderCondition(childCondition, childIndex, level + 1);
})}
</div>
) : (
<div className="text-sm text-muted-foreground p-2">
No conditions in this group. Add one using the buttons above.
</div>
)}
</div>
)}
</div>
</div>
);
}
// Regular condition
return (
<div
key={`condition-${condition.id || index}`}
className="grid grid-cols-13 gap-2 items-center mb-2 border border-transparent hover:border-border p-2 rounded-md bg-background/50 hover:bg-background"
style={{ marginLeft: level > 0 ? `${level * 20}px` : '0' }}
>
<div className="col-span-1 flex items-center justify-center">
<Move className="h-4 w-4 text-muted-foreground" />
</div>
{index > 0 && !condition.isGroup &&
condition.parentId === conditions[index-1].parentId && (
<div className="col-span-1">
<Select
value={condition.logicalOperator || 'AND'}
onValueChange={(value) => updateCondition(index, 'logicalOperator', value)}
>
<SelectTrigger className="h-8">
<SelectValue placeholder="AND" />
</SelectTrigger>
<SelectContent>
{logicalOperators.map((op) => (
<SelectItem key={op.value} value={op.value}>
{op.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
{(index === 0 || condition.parentId !== conditions[index-1].parentId) && (
<div className="col-span-1"></div>
)}
<div className="col-span-4">
<Select
value={condition.attribute}
onValueChange={(value) => updateCondition(index, 'attribute', value)}
>
<SelectTrigger>
<SelectValue placeholder="Select attribute" />
</SelectTrigger>
<SelectContent>
{availableAttributes.map((attr) => (
<SelectItem key={attr} value={attr}>
{attr}
</SelectItem>
))}
<SelectItem value="custom">Custom Attribute</SelectItem>
</SelectContent>
</Select>
{condition.attribute === 'custom' && (
<CustomAttributeInput
placeholder="Enter custom attribute"
value={condition.customAttribute || ''}
onChange={(value) => {
updateCondition(index, 'customAttribute', value);
}}
/>
)}
</div>
<div className="col-span-3">
<Select
value={condition.operator}
onValueChange={(value) => updateCondition(index, 'operator', value)}
>
<SelectTrigger>
<SelectValue placeholder="Select operator" />
</SelectTrigger>
<SelectContent>
{operators.map((op) => (
<SelectItem key={op.value} value={op.value}>
{op.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="col-span-3">
{condition.operator !== 'present' && condition.operator !== 'notPresent' && (
<ConditionValue
placeholder="Value"
value={condition.value || ''}
onChange={(value) => {
updateCondition(index, 'value', value);
}}
/>
)}
</div>
<div className="col-span-1 flex justify-end">
<Button
variant="ghost"
size="icon"
onClick={() => removeCondition(index)}
title="Remove Condition"
>
<Trash className="h-4 w-4" />
</Button>
</div>
</div>
);
};
// Get top-level conditions
const rootConditions = conditions.filter(c =>
c.parentId === null || c.parentId === undefined
);
return (
<div className="space-y-4">
{conditions.length === 0 ? (
<Card>
<CardContent className="p-6 flex flex-col items-center justify-center">
<p className="text-muted-foreground mb-4">No conditions defined yet</p>
<div className="flex space-x-2">
<Button
variant="outline"
onClick={() => addCondition()}
className="flex items-center"
>
<Plus className="mr-2 h-4 w-4" />
Add Condition
</Button>
<Button
variant="outline"
onClick={() => addConditionGroup()}
className="flex items-center"
>
<FolderPlus className="mr-2 h-4 w-4" />
Add Condition Group
</Button>
</div>
</CardContent>
</Card>
) : (
<>
<div className="space-y-2">
{rootConditions.map((condition, i) => {
const index = conditions.indexOf(condition);
return renderCondition(condition, index);
})}
</div>
<div className="flex space-x-2">
<Button
variant="outline"
size="sm"
onClick={() => addCondition()}
className="flex items-center"
>
<Plus className="mr-2 h-4 w-4" />
Add Condition
</Button>
<Button
variant="outline"
size="sm"
onClick={() => addConditionGroup()}
className="flex items-center"
>
<FolderPlus className="mr-2 h-4 w-4" />
Add Condition Group
</Button>
</div>
<div className="mt-4 p-4 bg-muted rounded-md">
<div className="flex justify-between items-center mb-2">
<Label className="text-sm font-medium">Generated LDAP Filter:</Label>
<Button
variant="outline"
size="sm"
className="flex items-center"
onClick={() => {
navigator.clipboard.writeText(ldapFilter);
toast({
title: "LDAP Filter Copied!",
description: "The LDAP filter has been copied to your clipboard.",
duration: 2000,
});
}}
>
<Copy className="h-3.5 w-3.5 mr-1" />
Copy
</Button>
</div>
<div className="font-mono text-sm overflow-auto p-2 bg-background rounded border whitespace-pre-wrap">
{ldapFilter}
</div>
</div>
</>
)}
</div>
);
};
export default FixedConditionBuilder;
@@ -23,7 +23,7 @@ import {
import { DynamicGroupRule, LdapConnection } from '@shared/schema';
import CronJobBuilder, { ScheduleItem } from './cron-job-builder';
import ConditionBuilder from './condition-builder';
import FixedConditionBuilder from './fixed-condition-builder';
import VariableSelector from './variable-selector';
import { useToast } from '@/hooks/use-toast';
import { queryClient, apiRequest } from '@/lib/queryClient';