From 54e30e2e717b2fd243fa846c9780ebf0681ab815 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Thu, 11 Jun 2026 18:03:19 +0530
Subject: [PATCH] feat: disable 'Add group' in filter builder at the backend
 group cap

---
 .../main/src/components/filter/FilterGroupBuilder.vue  | 10 +++++++++-
 frontend/apps/main/src/constants/filterConfig.js       |  3 +++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/apps/main/src/components/filter/FilterGroupBuilder.vue b/frontend/apps/main/src/components/filter/FilterGroupBuilder.vue
index fde2b34c..b0129771 100644
--- a/frontend/apps/main/src/components/filter/FilterGroupBuilder.vue
+++ b/frontend/apps/main/src/components/filter/FilterGroupBuilder.vue
@@ -13,7 +13,13 @@
       />
     </template>
 
-    <Button type="button" variant="outline" size="sm" @click.stop="addGroup">
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      :disabled="modelValue.rules.length >= MAX_FILTER_GROUPS"
+      @click.stop="addGroup"
+    >
       <Plus class="w-3 h-3 mr-1" />
       {{ t('filter.addGroup') }}
     </Button>
@@ -33,6 +39,7 @@ import {
   normalizeToTwoLevel,
   isStrictTwoLevel
 } from '@/components/filter/filterTree'
+import { MAX_FILTER_GROUPS } from '@/constants/filterConfig'
 
 // vee-validate's componentField carries onInput/onChange listeners; without this they fall
 // through to the root div and bubbled keystrokes overwrite the whole filters value.
@@ -63,6 +70,7 @@ const updateGroup = (index, group) => {
 }
 
 const addGroup = () => {
+  if (modelValue.value.rules.length >= MAX_FILTER_GROUPS) return
   modelValue.value = { ...modelValue.value, rules: [...modelValue.value.rules, createGroup()] }
 }
 
diff --git a/frontend/apps/main/src/constants/filterConfig.js b/frontend/apps/main/src/constants/filterConfig.js
index 3f924707..428cde51 100644
--- a/frontend/apps/main/src/constants/filterConfig.js
+++ b/frontend/apps/main/src/constants/filterConfig.js
@@ -3,6 +3,9 @@ export const LOGIC = {
     OR: 'OR'
 }
 
+// Mirrors dbutil.MaxFilterGroups on the backend.
+export const MAX_FILTER_GROUPS = 10
+
 export const FIELD_TYPE = {
     SELECT: 'select',
     TAG: 'tag',