From 7c37ee90d637fe0132a51001d08345e4ff206d60 Mon Sep 17 00:00:00 2001 From: Amal K Joy Date: Tue, 4 Feb 2025 15:53:13 +0530 Subject: [PATCH 1/3] feat: add tests --- .../ConditionBuilder/ConditionBuilder.test.js | 35 +++++++++++++++++++ .../ConditionBuilder/assets/SampleData.js | 2 +- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js index d13da506f1..3ebd029fcd 100644 --- 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( + + ); + + // 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/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js b/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js index d6ef81524c..712c1435fa 100644 --- 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: [ { From b0864387ce8a2b691d221775998c2488812d4ac6 Mon Sep 17 00:00:00 2001 From: Amal K Joy Date: Tue, 4 Feb 2025 16:10:54 +0530 Subject: [PATCH 2/3] feat: move checkForMultiSelectOperator to util --- .../ConditionBuilderItem.tsx | 19 ++++++------------- .../ItemOptionForValueField.tsx | 15 ++------------- .../components/ConditionBuilder/utils/util.js | 11 +++++++++++ 3 files changed, 19 insertions(+), 26 deletions(-) diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx index 90b8470b95..0f484814f3 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx @@ -30,7 +30,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 { @@ -130,17 +134,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 @@ -155,7 +148,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/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx index 2eb5e73277..fdbd2b5509 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx +++ b/packages/ibm-products/src/components/ConditionBuilder/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 diff --git a/packages/ibm-products/src/components/ConditionBuilder/utils/util.js b/packages/ibm-products/src/components/ConditionBuilder/utils/util.js index ee709e236c..5b3991e3af 100644 --- 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 + ) + ); +}; From ae2613abfc365c4e917be019abd7184aa06ab225 Mon Sep 17 00:00:00 2001 From: Amal K Joy Date: Tue, 4 Feb 2025 16:13:07 +0530 Subject: [PATCH 3/3] feat: clean up --- .../ConditionBuilder/ConditionBlock/ConditionBlock.tsx | 1 - .../ConditionBuilderItemOption/ItemOptionForValueField.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx index f6a15c0f98..df12054731 100644 --- 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} /> {manageActionButtons(conditionIndex, group.conditions) && ( diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx index fdbd2b5509..f83c7c71e5 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx @@ -135,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);