From 3eda651ebb945c935e0d3c5d2f4824d32bf5436c Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Wed, 9 Apr 2025 02:56:05 +0000
Subject: [PATCH] Enhance LDAP query builder with group conditions and display

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/7c09e00d-9224-4250-94a8-7eb880f1b264.jpg
---
 client/src/pages/ldap-query-builder-page.tsx | 236 ++++++++++++++++++-
 1 file changed, 228 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/ldap-query-builder-page.tsx b/client/src/pages/ldap-query-builder-page.tsx
index 444e848..6140b9c 100644
--- a/client/src/pages/ldap-query-builder-page.tsx
+++ b/client/src/pages/ldap-query-builder-page.tsx
@@ -75,7 +75,8 @@ const LdapQueryBuilderPage = () => {
   const [isActive, setIsActive] = useState(true);
   const [filterBuilder, setFilterBuilder] = useState<any>({
     operator: "and",
-    conditions: [{ attribute: "", operator: "equals", value: "" }]
+    conditions: [{ attribute: "", operator: "equals", value: "" }],
+    groups: []
   });
 
   // Query to get LDAP connections
@@ -239,7 +240,8 @@ const LdapQueryBuilderPage = () => {
     // Reset filter builder to default state
     setFilterBuilder({
       operator: "and",
-      conditions: [{ attribute: "", operator: "equals", value: "" }]
+      conditions: [{ attribute: "", operator: "equals", value: "" }],
+      groups: []
     });
   };
 
@@ -642,6 +644,7 @@ const LdapQueryBuilderPage = () => {
                           </div>
                         </div>
 
+                        {/* Main conditions section */}
                         <div className="border rounded-md p-4 space-y-4 bg-background">
                           {filterBuilder.conditions.map((condition: any, index: number) => (
                             <div key={index} className="grid grid-cols-12 gap-2 items-center">
@@ -732,19 +735,190 @@ const LdapQueryBuilderPage = () => {
                               });
                             }}
                           >
+                            <Plus className="h-4 w-4 mr-2" />
                             Add Condition
                           </Button>
                         </div>
 
+                        {/* Condition groups section */}
+                        <div className="mt-4">
+                          <div className="flex justify-between items-center mb-2">
+                            <Label>Condition Groups</Label>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => {
+                                setFilterBuilder({
+                                  ...filterBuilder,
+                                  groups: [
+                                    ...filterBuilder.groups,
+                                    {
+                                      operator: "and",
+                                      conditions: [
+                                        { attribute: "", operator: "equals", value: "" }
+                                      ]
+                                    }
+                                  ]
+                                });
+                              }}
+                            >
+                              <FolderPlus className="h-4 w-4 mr-2" />
+                              Add Group
+                            </Button>
+                          </div>
+
+                          {filterBuilder.groups && filterBuilder.groups.map((group: any, groupIndex: number) => (
+                            <div key={groupIndex} className="border rounded-md p-4 mb-4 bg-background">
+                              <div className="flex justify-between items-center mb-3">
+                                <div className="flex items-center">
+                                  <Label className="mr-2">Group Operator:</Label>
+                                  <Select 
+                                    value={group.operator} 
+                                    onValueChange={(value) => {
+                                      const updatedGroups = [...filterBuilder.groups];
+                                      updatedGroups[groupIndex].operator = value;
+                                      setFilterBuilder({
+                                        ...filterBuilder,
+                                        groups: updatedGroups
+                                      });
+                                    }}
+                                  >
+                                    <SelectTrigger className="w-24">
+                                      <SelectValue placeholder="Operator" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      <SelectItem value="and">AND</SelectItem>
+                                      <SelectItem value="or">OR</SelectItem>
+                                    </SelectContent>
+                                  </Select>
+                                </div>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={() => {
+                                    const updatedGroups = [...filterBuilder.groups];
+                                    updatedGroups.splice(groupIndex, 1);
+                                    setFilterBuilder({
+                                      ...filterBuilder,
+                                      groups: updatedGroups
+                                    });
+                                  }}
+                                >
+                                  <X className="h-4 w-4" />
+                                </Button>
+                              </div>
+
+                              <div className="space-y-3">
+                                {group.conditions.map((condition: any, condIndex: number) => (
+                                  <div key={condIndex} className="grid grid-cols-12 gap-2 items-center">
+                                    <div className="col-span-4">
+                                      <Input
+                                        placeholder="Attribute"
+                                        value={condition.attribute}
+                                        onChange={(e) => {
+                                          const updatedGroups = [...filterBuilder.groups];
+                                          updatedGroups[groupIndex].conditions[condIndex].attribute = e.target.value;
+                                          setFilterBuilder({
+                                            ...filterBuilder,
+                                            groups: updatedGroups
+                                          });
+                                        }}
+                                      />
+                                    </div>
+                                    <div className="col-span-3">
+                                      <Select
+                                        value={condition.operator}
+                                        onValueChange={(value) => {
+                                          const updatedGroups = [...filterBuilder.groups];
+                                          updatedGroups[groupIndex].conditions[condIndex].operator = value;
+                                          setFilterBuilder({
+                                            ...filterBuilder,
+                                            groups: updatedGroups
+                                          });
+                                        }}
+                                      >
+                                        <SelectTrigger>
+                                          <SelectValue placeholder="Operator" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                          <SelectItem value="equals">Equals</SelectItem>
+                                          <SelectItem value="contains">Contains</SelectItem>
+                                          <SelectItem value="startsWith">Starts With</SelectItem>
+                                          <SelectItem value="endsWith">Ends With</SelectItem>
+                                          <SelectItem value="present">Is Present</SelectItem>
+                                          <SelectItem value="notEquals">Not Equals</SelectItem>
+                                        </SelectContent>
+                                      </Select>
+                                    </div>
+                                    <div className="col-span-4">
+                                      <Input
+                                        placeholder="Value"
+                                        value={condition.value}
+                                        disabled={condition.operator === 'present'}
+                                        onChange={(e) => {
+                                          const updatedGroups = [...filterBuilder.groups];
+                                          updatedGroups[groupIndex].conditions[condIndex].value = e.target.value;
+                                          setFilterBuilder({
+                                            ...filterBuilder,
+                                            groups: updatedGroups
+                                          });
+                                        }}
+                                      />
+                                    </div>
+                                    <div className="col-span-1 flex justify-end">
+                                      <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={() => {
+                                          const updatedGroups = [...filterBuilder.groups];
+                                          updatedGroups[groupIndex].conditions.splice(condIndex, 1);
+                                          if (updatedGroups[groupIndex].conditions.length === 0) {
+                                            updatedGroups.splice(groupIndex, 1);
+                                          }
+                                          setFilterBuilder({
+                                            ...filterBuilder,
+                                            groups: updatedGroups
+                                          });
+                                        }}
+                                        disabled={group.conditions.length <= 1}
+                                      >
+                                        <Trash className="h-4 w-4" />
+                                      </Button>
+                                    </div>
+                                  </div>
+                                ))}
+
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={() => {
+                                    const updatedGroups = [...filterBuilder.groups];
+                                    updatedGroups[groupIndex].conditions.push(
+                                      { attribute: "", operator: "equals", value: "" }
+                                    );
+                                    setFilterBuilder({
+                                      ...filterBuilder,
+                                      groups: updatedGroups
+                                    });
+                                  }}
+                                >
+                                  <Plus className="h-4 w-4 mr-2" />
+                                  Add Condition to Group
+                                </Button>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+
                         <div className="mt-4">
                           <Button
                             variant="secondary"
                             size="sm"
                             onClick={() => {
                               // Generate LDAP filter from visual builder
-                              const operatorSymbol = filterBuilder.operator === 'and' ? '&' : '|';
+                              const mainOperatorSymbol = filterBuilder.operator === 'and' ? '&' : '|';
                               
-                              const conditions = filterBuilder.conditions
+                              const mainConditions = filterBuilder.conditions
                                 .filter((c: any) => c.attribute.trim() !== '')
                                 .map((c: any) => {
                                   switch (c.operator) {
@@ -764,13 +938,52 @@ const LdapQueryBuilderPage = () => {
                                       return `(${c.attribute}=${c.value})`;
                                   }
                                 });
+
+                              // Generate group conditions
+                              const groupsLdap = filterBuilder.groups
+                                .map((group: any) => {
+                                  const groupOperatorSymbol = group.operator === 'and' ? '&' : '|';
+                                  
+                                  const groupConditions = group.conditions
+                                    .filter((c: any) => c.attribute.trim() !== '')
+                                    .map((c: any) => {
+                                      switch (c.operator) {
+                                        case 'equals':
+                                          return `(${c.attribute}=${c.value})`;
+                                        case 'contains':
+                                          return `(${c.attribute}=*${c.value}*)`;
+                                        case 'startsWith':
+                                          return `(${c.attribute}=${c.value}*)`;
+                                        case 'endsWith':
+                                          return `(${c.attribute}=*${c.value})`;
+                                        case 'present':
+                                          return `(${c.attribute}=*)`;
+                                        case 'notEquals':
+                                          return `(!(${c.attribute}=${c.value}))`;
+                                        default:
+                                          return `(${c.attribute}=${c.value})`;
+                                      }
+                                    });
+                                  
+                                  if (groupConditions.length === 0) {
+                                    return '';
+                                  } else if (groupConditions.length === 1) {
+                                    return groupConditions[0];
+                                  } else {
+                                    return `(${groupOperatorSymbol}${groupConditions.join('')})`;
+                                  }
+                                })
+                                .filter((ldap: string) => ldap !== '');
                               
-                              if (conditions.length === 0) {
+                              // Combine main conditions and group conditions
+                              const allConditions = [...mainConditions, ...groupsLdap];
+                              
+                              if (allConditions.length === 0) {
                                 setFilterQuery('');
-                              } else if (conditions.length === 1) {
-                                setFilterQuery(conditions[0]);
+                              } else if (allConditions.length === 1) {
+                                setFilterQuery(allConditions[0]);
                               } else {
-                                setFilterQuery(`(${operatorSymbol}${conditions.join('')})`);
+                                setFilterQuery(`(${mainOperatorSymbol}${allConditions.join('')})`);
                               }
                             }}
                           >
@@ -778,6 +991,13 @@ const LdapQueryBuilderPage = () => {
                             Generate LDAP Filter
                           </Button>
                         </div>
+                        
+                        {filterQuery && (
+                          <div className="mt-4 p-3 border rounded-md bg-muted">
+                            <Label className="text-xs mb-1 block">Generated LDAP Filter:</Label>
+                            <code className="text-xs break-all">{filterQuery}</code>
+                          </div>
+                        )}
                       </div>
                     </TabsContent>
                   </Tabs>