From d4fcccce741c6f6cd93cfd423d5e691fbfa940c4 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <1219739+SteRiccio@users.noreply.github.com>
Date: Tue, 10 Dec 2024 12:11:13 +0100
Subject: [PATCH] expression editor binary operator type: layout adjustments
 (#3680)

* Expression editor / binary operator type: show it as a button group

* expression editor placeholder: hide apply if item

---------

Co-authored-by: Stefano Ricci <SteRiccio@users.noreply.github.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
---
 .../expression/expressionEditorPopup.scss     | 21 +++------
 .../expression/nodes/binaryOperand.js         | 43 ++++++-------------
 .../ExpressionsProp/ExpressionProp.js         |  2 +-
 3 files changed, 19 insertions(+), 47 deletions(-)

diff --git a/webapp/components/expression/expressionEditorPopup.scss b/webapp/components/expression/expressionEditorPopup.scss
index c1da8d50ef..069ddb6bac 100644
--- a/webapp/components/expression/expressionEditorPopup.scss
+++ b/webapp/components/expression/expressionEditorPopup.scss
@@ -106,21 +106,12 @@
       width: 160px;
     }
 
-    .btn-switch-operand {
-      font-size: 0.75rem;
-      margin: 0 0.1rem;
-      height: 32px;
-      align-self: flex-end;
-      text-wrap: nowrap;
-
-      &.btn-switch-operand-const {
-        width: 7rem;
-      }
-      &.btn-switch-operand-var {
-        width: 5rem;
-      }
-      &.btn-switch-operand-call {
-        width: 5rem;
+    .binary-operand-type-btn-group {
+      height: 2rem;
+      margin: 0 0.2rem;
+
+      button {
+        white-space: nowrap;
       }
     }
 
diff --git a/webapp/components/expression/nodes/binaryOperand.js b/webapp/components/expression/nodes/binaryOperand.js
index e42dff76da..ec57d1e2f1 100644
--- a/webapp/components/expression/nodes/binaryOperand.js
+++ b/webapp/components/expression/nodes/binaryOperand.js
@@ -5,7 +5,7 @@ import * as A from '@core/arena'
 import * as Expression from '@core/expressionParser/expression'
 import * as NodeDef from '@core/survey/nodeDef'
 
-import { Button } from '@webapp/components/buttons'
+import { ButtonGroup } from '@webapp/components/form'
 
 const { types } = Expression
 
@@ -23,27 +23,6 @@ const expressionGeneratorByType = {
   [types.Literal]: () => Expression.newLiteral(),
 }
 
-const BinaryOperandExpressionTypeButton = (props) => {
-  const { active, expressionType, onClick } = props
-  const acronym = expressionTypeAcronymByType[expressionType]
-  return (
-    <Button
-      active={active}
-      className={`btn-switch-operand btn-switch-operand-${acronym}`}
-      label={`expressionEditor.${acronym}`}
-      onClick={onClick}
-      size="small"
-      variant="outlined"
-    />
-  )
-}
-
-BinaryOperandExpressionTypeButton.propTypes = {
-  active: PropTypes.bool.isRequired,
-  expressionType: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-}
-
 export const BinaryOperandType = {
   left: 'left',
   right: 'right',
@@ -98,7 +77,7 @@ const BinaryOperand = (props) => {
     [canOperandExpressionBeOfType]
   )
 
-  const onOperandTypeClick = (newType) => () => {
+  const onOperandTypeChange = (newType) => {
     const newOperatorExpression = expressionGeneratorByType[newType]()
     let nodeUpdated = { ...node, [type]: newOperatorExpression }
     if (isLeft && !isBoolean) {
@@ -113,14 +92,16 @@ const BinaryOperand = (props) => {
 
   return (
     <div className={`binary-${type}`}>
-      {applicableOperandExpressionTypes.map((expressionType) => (
-        <BinaryOperandExpressionTypeButton
-          key={expressionType}
-          active={operandExpressionType === expressionType}
-          expressionType={expressionType}
-          onClick={onOperandTypeClick(expressionType)}
-        />
-      ))}
+      <ButtonGroup
+        className="binary-operand-type-btn-group"
+        selectedItemKey={operandExpressionType}
+        onChange={onOperandTypeChange}
+        items={applicableOperandExpressionTypes.map((expressionType) => {
+          const acronym = expressionTypeAcronymByType[expressionType]
+          const label = `expressionEditor.${acronym}`
+          return { key: expressionType, label }
+        })}
+      />
       {React.createElement(renderNode, {
         canDelete,
         isBoolean,
diff --git a/webapp/components/survey/NodeDefDetails/ExpressionsProp/ExpressionProp.js b/webapp/components/survey/NodeDefDetails/ExpressionsProp/ExpressionProp.js
index 5d8d6c7e52..dac2c953f7 100644
--- a/webapp/components/survey/NodeDefDetails/ExpressionsProp/ExpressionProp.js
+++ b/webapp/components/survey/NodeDefDetails/ExpressionsProp/ExpressionProp.js
@@ -82,7 +82,7 @@ const ExpressionProp = (props) => {
           />
         </div>
 
-        {applyIf && (
+        {applyIf && !isPlaceholder && (
           <div className="expression-item">
             <div className="label">{i18n.t('nodeDefEdit.expressionsProp.applyIf')}</div>