Merge branch 'conditionBuilder6422' of github.com:amal-k-joy/ibm-prod…

…ucts into conditionBuilder6422
carbon-design-system · Feb 7, 2025 · c83a56a · c83a56a
2 parents 3254d3f + 5f2ac89
commit c83a56a
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 29 deletions.
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx
@@ -345,7 +345,6 @@ const ConditionBlock = (props: ConditionBlockProps) => {
           className={`${blockClass}__close-condition`}
           data-name="closeCondition"
           wrapperClassName={`${blockClass}__close-condition-wrapper`}
-          //disabled={true}
         />
       </span>
       {manageActionButtons(conditionIndex, group.conditions) && (

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js
@@ -22,6 +22,7 @@ import {
 } from './assets/SampleData';
 import { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT } from './utils/util';
 import CustomInput from './assets/CustomInput';
+import { inputDataForCustomOperator } from './assets/sampleInput';
 
 const blockClass = `${pkg.prefix}--condition-builder`;
 const componentName = ConditionBuilder.displayName;
@@ -1688,6 +1689,40 @@ describe(componentName, () => {
     expect(screen.getByRole('button', { name: 'excl. if' }));
   });
 
+  it('check with custom operator configuration ', async () => {
+    render(
+      <ConditionBuilder
+        {...defaultProps}
+        inputConfig={inputDataForCustomOperator}
+      />
+    );
+
+    // add one condition
+    await act(() => userEvent.click(screen.getByText('Add condition')));
+
+    expect(screen.getByRole('option', { name: 'Continent' }));
+
+    await act(() =>
+      userEvent.click(screen.getByRole('option', { name: 'Continent' }))
+    );
+
+    expect(screen.getByRole('option', { name: 'has value' }));
+
+    await act(() =>
+      userEvent.click(screen.getByRole('option', { name: 'has value' }))
+    );
+
+    expect(screen.getByRole('option', { name: 'Africa' }));
+
+    await act(() =>
+      userEvent.click(screen.getByRole('option', { name: 'Africa' }))
+    );
+
+    const selectedItem = screen.getByRole('button', { name: 'Africa' });
+
+    expect(selectedItem);
+  });
+
   it('check description tooltip for property', async () => {
     const inputConfig_ = JSON.parse(JSON.stringify(inputData));
     inputConfig_.properties[0].description = 'This is a tooltip';

diff --git a/...bm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx b/...bm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx
@@ -29,7 +29,11 @@ import {
   Option,
   ConfigType,
 } from '../ConditionBuilder.types';
-import { blockClass, getValue } from '../utils/util';
+import {
+  blockClass,
+  checkForMultiSelectOperator,
+  getValue,
+} from '../utils/util';
 import { translationsObject } from '../ConditionBuilderContext/translationObject';
 
 interface ConditionBuilderItemProps extends PropsWithChildren {
@@ -129,17 +133,6 @@ export const ConditionBuilderItem = ({
   };
   const { propertyLabel, isInvalid } = getPropertyDetails();
 
-  //check if the operator is configured as multiSelect in the input configuration
-  const checkForMultiSelectOperator = () => {
-    return (
-      condition?.operator === 'oneOf' ||
-      config?.operators?.find(
-        (operator) =>
-          condition?.operator === operator.id && operator.isMultiSelect
-      )
-    );
-  };
-
   useEffect(() => {
     /**
      * rest['data-name'] holds the current field name
@@ -154,7 +147,7 @@ export const ConditionBuilderItem = ({
       } else if (
         currentField == 'valueField' &&
         type === 'option' &&
-        !checkForMultiSelectOperator()
+        !checkForMultiSelectOperator(condition, config)
       ) {
         //close the current popover if the field is valueField and  is a single select dropdown. For all other inputs ,popover need to be open on value changes.
         closePopover();

diff --git a/...ditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx b/...ditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx
@@ -26,7 +26,7 @@ import {
   Option,
   PropertyConfigOption,
 } from '../../ConditionBuilder.types';
-import { blockClass } from '../../utils/util';
+import { blockClass, checkForMultiSelectOperator } from '../../utils/util';
 
 interface ItemOptionForValueFieldProps {
   conditionState: Condition & { label?: string };
@@ -38,18 +38,7 @@ export const ItemOptionForValueField = ({
   config = {},
   onChange,
 }: ItemOptionForValueFieldProps) => {
-  const checkForMultiselect = () => {
-    //move this to utils
-    const operator = conditionState.operator;
-    const currentCustomOperator = config?.operators?.find(
-      (op) => op.id === operator
-    );
-    return currentCustomOperator?.isMultiSelect;
-  };
-
-  const multiSelectable =
-    conditionState.operator === 'oneOf' ||
-    (config.operators && checkForMultiselect());
+  const multiSelectable = checkForMultiSelectOperator(conditionState, config);
 
   const { popOverSearchThreshold, getOptions, rootState } = useContext(
     ConditionBuilderContext
@@ -146,7 +135,6 @@ export const ItemOptionForValueField = ({
     const updatedSelections = selection.filter(
       (item) => item !== 'INVALID'
     ) as Option[];
-    // return;
     if (multiSelectable) {
       if (isSelected) {
         const items = updatedSelections.filter((v) => v.id !== option.id);

diff --git a/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js b/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js
@@ -184,7 +184,7 @@ export const sampleDataStructure_nonHierarchical = {
   operator: 'or',
 };
 
-export const intialStateWithCustomOperators = {
+export const initialStateWithCustomOperators = {
   operator: 'or',
   groups: [
     {

diff --git a/packages/ibm-products/src/components/ConditionBuilder/utils/util.js b/packages/ibm-products/src/components/ConditionBuilder/utils/util.js
@@ -151,3 +151,14 @@ export const getValue = (type, value, config) => {
     return formatters[type](value, config);
   }
 };
+
+//check if the operator is configured as multiSelect in the input configuration or operator is on of
+export const checkForMultiSelectOperator = (condition, config) => {
+  return (
+    condition?.operator === 'oneOf' ||
+    config?.operators?.find(
+      (operator) =>
+        condition?.operator === operator.id && operator.isMultiSelect
+    )
+  );
+};