From 3de78a549f913a083cbd31e8b7fea18ba0fc85ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82?= <pawel.tymczuk@gmail.com>
Date: Tue, 28 Jan 2025 12:43:43 +0100
Subject: [PATCH] fix(dashboard): step conditions allow duplicating max 10
 rules or groups

---
 .../conditions-editor/conditions-editor.tsx   |  5 +--
 .../conditions-editor/rule-actions.tsx        | 33 +++++++++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/dashboard/src/components/conditions-editor/conditions-editor.tsx b/apps/dashboard/src/components/conditions-editor/conditions-editor.tsx
index d1b91002bf7..bdcd421f35a 100644
--- a/apps/dashboard/src/components/conditions-editor/conditions-editor.tsx
+++ b/apps/dashboard/src/components/conditions-editor/conditions-editor.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { type Field, QueryBuilder, RuleGroupType } from 'react-querybuilder';
+import { type Field, QueryBuilder, RuleGroupType, Translations } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
 import { LiquidVariable } from '@/utils/parseStepVariablesToLiquidVariables';
@@ -23,7 +23,7 @@ const controlClassnames = {
   rule: ruleClassName,
 };
 
-const translations = {
+const translations: Partial<Translations> = {
   addRule: {
     label: 'Add condition',
     title: 'Add condition',
@@ -69,6 +69,7 @@ function InternalConditionsEditor({
       onQueryChange={onQueryChange}
       controlClassnames={controlClassnames}
       translations={translations}
+      accessibleDescriptionGenerator={() => ''}
     />
   );
 }
diff --git a/apps/dashboard/src/components/conditions-editor/rule-actions.tsx b/apps/dashboard/src/components/conditions-editor/rule-actions.tsx
index 4a09d3a8af0..6ce55a211dd 100644
--- a/apps/dashboard/src/components/conditions-editor/rule-actions.tsx
+++ b/apps/dashboard/src/components/conditions-editor/rule-actions.tsx
@@ -13,11 +13,12 @@ import { useConditionsEditorContext } from './conditions-editor-context';
 import { CompactButton } from '@/components/primitives/button-compact';
 import { Delete } from '@/components/icons/delete';
 import { SquareTwoStack } from '@/components/icons/square-two-stack';
+import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from '@/components/primitives/tooltip';
 
 export const RuleActions = React.memo(
   ({ path, ruleOrGroup }: ActionWithRulesProps) => {
     const { removeRuleOrGroup, cloneRuleOrGroup, getParentGroup } = useConditionsEditorContext();
-    const parentGroup = useMemo(() => getParentGroup(ruleOrGroup.id), [ruleOrGroup.id, getParentGroup]);
+    const parentGroup = useMemo(() => getParentGroup(ruleOrGroup.id), [ruleOrGroup, getParentGroup]);
     const isGroup = isRuleGroup(ruleOrGroup);
     const isDuplicateDisabled = !!(parentGroup && parentGroup.rules && parentGroup.rules.length >= 10);
 
@@ -34,15 +35,27 @@ export const RuleActions = React.memo(
         </DropdownMenuTrigger>
         <DropdownMenuContent side="bottom" align="end" withPortal={false}>
           <DropdownMenuGroup className="*:cursor-pointer">
-            <DropdownMenuItem
-              onClick={() => {
-                cloneRuleOrGroup(ruleOrGroup, getParentPath(path));
-              }}
-              className="text-foreground-600 text-label-xs h-7"
-              disabled={isDuplicateDisabled}
-            >
-              <SquareTwoStack className="[&&]:size-3.5" /> Duplicate {isGroup ? `group` : `condition`}
-            </DropdownMenuItem>
+            <Tooltip>
+              <TooltipTrigger>
+                <DropdownMenuItem
+                  onClick={() => {
+                    cloneRuleOrGroup(ruleOrGroup, getParentPath(path));
+                  }}
+                  className="text-foreground-600 text-label-xs h-7"
+                  disabled={isDuplicateDisabled}
+                >
+                  <SquareTwoStack className="[&&]:size-3.5" /> Duplicate {isGroup ? `group` : `condition`}
+                </DropdownMenuItem>
+              </TooltipTrigger>
+              <TooltipPortal>
+                {isDuplicateDisabled && (
+                  <TooltipContent className="max-w-52">
+                    You cannot duplicate more than 10 groups or conditions
+                  </TooltipContent>
+                )}
+              </TooltipPortal>
+            </Tooltip>
+
             <DropdownMenuItem onClick={() => removeRuleOrGroup(path)} className="text-error-base text-label-xs h-7">
               <Delete className="[&&]:size-3.5" />
               Delete {isGroup ? `group` : `condition`}