Function ValueInput

frontend/src/react/components/ExprEditor.tsx:992–1218

({
  expr,
  groupPath,
  operandIndex,
}: {
  expr: ConditionExpr;
  groupPath: Path;
  operandIndex: number;
})

// ============================================================

function ValueInput({
  expr,
  groupPath,
  operandIndex,
}: {
  expr: ConditionExpr;
  groupPath: Path;
  operandIndex: number;
}) {
  const { t } = useTranslation();
  const { readonly, optionConfigMap } = useExprEditorCtx();
  const doUpdate = useImmutableUpdate(groupPath);
  const factor = expr.args[0] as Factor;
  const operator = expr.operator;

  const optionConfig = useMemo(
    () => optionConfigMap.get(factor) ?? { options: [] },
    [optionConfigMap, factor]
  );

  const isEnvironment = factor === CEL_ATTRIBUTE_RESOURCE_ENVIRONMENT_ID;
  const renderOptionValue = (value: string, fallbackLabel?: string) => {
    if (isEnvironment) {
      return (
        <EnvironmentLabel
          environmentName={`${environmentNamePrefix}${value}`}
        />
      );
    }
    return fallbackLabel ?? value;
  };

  const hasOption = optionConfig.options.length > 0 || !!optionConfig.search;
  const hasMultiOption = hasOption && optionConfig.supportMultiple !== false;

  type InputType = "INPUT" | "SINGLE-SELECT" | "MULTI-SELECT" | "MULTI-INPUT";

  const isArrayValue = isCollectionOperator(operator);

  let inputType: InputType;
  if (isArrayValue) {
    inputType = hasMultiOption ? "MULTI-SELECT" : "MULTI-INPUT";
  } else if (isStringOperator(operator)) {
    inputType = "INPUT";
  } else if (hasOption) {
    inputType = "SINGLE-SELECT";
  } else {
    inputType = "INPUT";
  }

  const isNumberValue = isNumberFactor(factor);
  const isBooleanValue = isBooleanFactor(factor);

  const getBooleanValue = (): boolean =>
    typeof expr.args[1] === "boolean" ? (expr.args[1] as boolean) : true;
  const setBooleanValue = (v: boolean) => {
    doUpdate((group) => {
      const cond = group.args[operandIndex] as ConditionExpr;