[RuleBuilderEditor] - Dynamic input type based on selected operand for rule value input

[bogy0]

What package is this for?

• React
• Angular

We think it's an overall improvement, but React is our target package.

Summary

Currently, the RuleBuilderEditor component allows users to define rules by selecting a column or an operand and setting a rule value. However, the component only supports a single input type for each column, which limits its flexibility.

This feature request proposes to enhance the Rule Builder component by allowing dynamic input types based on the selected operand. This would enable users to have different input types for a single column, depending on the chosen operand.

For example, when a user selects the "Created at" column and the "Before" operand, the component should display a single Date Input for the rule value. However, if the user chooses the "In Between" operand for the "Created at" column, the component should display a Date Range input instead. This added flexibility would improve the user experience and enable more complex rule configurations.

We acknowledge that the Rule Builder columns can be overridden, but we have not found a way to make the renderField() function, which is responsible for rendering the Rule Value input, dynamic and dependent on the selected operands. Implementing this feature would allow the renderField() function to adapt to the chosen operand and offer a more tailored input type for the rule value, further enhancing the component's usability.

Specific timeline issues/requests

We want to use the RuleBuilderEditor component in a project that will start in Q2 2023, so we need a solution for this soon. We would appreciate it if you could help with it.

Available extra resources

You can contact me on IBM Slack for details or any other information.

[bogy0]

I like to create something like this inside my columns config:

{
    id: "column3",
    name: "Modified On",
    operands: [
      { id: "is", name: "Is" },
      { id: "is_before", name: "Before" },
      { id: "is_after", name: "After" },
      { id: "in_between", name: "In Between" },
    ],
    renderField: ({ value, onChange, selectedOperands }) => {
      if (selectedOperands?.id === "in_between") {
        return (
          <DatePicker datePickerType="range">
            <DatePickerInput
              id="date-picker-input-id-start"
              placeholder="mm/dd/yyyy"
              labelText="Start date"
            />
            <DatePickerInput
              id="date-picker-input-id-finish"
              placeholder="mm/dd/yyyy"
              labelText="End date"
            />
          </DatePicker>
        );
      }
      return (
        <DatePicker
          light
          onChange={onChange}
          defaultValue={value}
          dateFormat='m/d/Y'
          datePickerType='single'>
          <DatePickerInput
            id='date-picker-default-id'
            placeholder='mm/dd/yyyy'
            labelText=''
            light
            value={value}
          />
        </DatePicker>
      );
    },
  },

but we will also need to modify the part of the carbon-addons-iot-react source-code that calls the renderField function to pass the selected operand value as a parameter, which can be found here:

carbon-addons-iot-react/packages/react/src/components/RuleBuilder/RuleValueField.jsx

Lines 25 to 32 in 6b0a857

	const RuleValueField = ({ rule, onChange, renderColumnField, renderOperandField, i18n }) => {
	if (renderOperandField) {
	return renderOperandField({ value: rule.value, onChange });
	}
	if (renderColumnField) {
	return renderColumnField({ value: rule.value, onChange });
	}

I believe this can be an optional parameter and this way we can define more flexible column configs for the RuleBuilder.