Rework multiple fields to have selects (#5208)

* External Layout, Animation, Effect and Effect Parameter

newIDE/app/src/EventsSheet/ParameterFields/ExternalLayoutNameField.js

@@ -7,11 +7,21 @@ import {
   type ParameterFieldInterface,
   type FieldFocusFunction,
 } from './ParameterFieldCommons';
-import { type ExpressionAutocompletion } from '../../ExpressionAutocompletion';
+import Functions from '@material-ui/icons/Functions';
+import SelectField, { type SelectFieldInterface } from '../../UI/SelectField';
+import SelectOption from '../../UI/SelectOption';
+import FlatButton from '../../UI/FlatButton';
+import TypeCursorSelect from '../../UI/CustomSvgIcons/TypeCursorSelect';
+import { Trans, t } from '@lingui/macro';
+import RaisedButton from '../../UI/RaisedButton';
+import { TextFieldWithButtonLayout } from '../../UI/Layout';
 
 export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
   function ExternalLayoutNameField(props: ParameterFieldProps, ref) {
-    const field = React.useRef<?GenericExpressionField>(null);
+    const field = React.useRef<?(
+      | GenericExpressionField
+      | SelectFieldInterface
+    )>(null);
     const focus: FieldFocusFunction = options => {
       if (field.current) field.current.focus(options);
     };
@@ -19,23 +29,105 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
       focus,
     }));
 
-    const externalLayoutNames: Array<ExpressionAutocompletion> = props.project
-      ? enumerateExternalLayouts(props.project).map(externalLayout => ({
-          kind: 'Text',
-          completion: `"${externalLayout.getName()}"`,
-        }))
+    const externalLayoutNames = props.project
+      ? enumerateExternalLayouts(props.project).map(externalLayout =>
+          externalLayout.getName()
+        )
       : [];
+    const isCurrentValueInLayoutsList = !!externalLayoutNames.find(
+      layoutName => `"${layoutName}"` === props.value
+    );
+
+    // If the current value is not in the list of layouts, display an expression field.
+    const [isExpressionField, setIsExpressionField] = React.useState(
+      !!props.value && !isCurrentValueInLayoutsList
+    );
+
+    const switchFieldType = () => {
+      setIsExpressionField(!isExpressionField);
+    };
+
+    const onChangeSelectValue = (event, value) => {
+      props.onChange(event.target.value);
+    };
+
+    const onChangeTextValue = (value: string) => {
+      props.onChange(value);
+    };
+
+    const fieldLabel = props.parameterMetadata
+      ? props.parameterMetadata.getDescription()
+      : undefined;
+
+    const selectOptions = externalLayoutNames.map(layoutName => (
+      <SelectOption
+        key={layoutName}
+        value={`"${layoutName}"`}
+        label={layoutName}
+        shouldNotTranslate
+      />
+    ));
 
     return (
-      <GenericExpressionField
-        expressionType="string"
-        onGetAdditionalAutocompletions={expression =>
-          externalLayoutNames.filter(
-            ({ completion }) => completion.indexOf(expression) === 0
+      <TextFieldWithButtonLayout
+        renderTextField={() =>
+          !isExpressionField ? (
+            <SelectField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-external-layout-field`
+                  : undefined
+              }
+              value={props.value}
+              onChange={onChangeSelectValue}
+              margin={props.isInline ? 'none' : 'dense'}
+              fullWidth
+              floatingLabelText={fieldLabel}
+              translatableHintText={t`Choose an external layout`}
+              helperMarkdownText={
+                (props.parameterMetadata &&
+                  props.parameterMetadata.getLongDescription()) ||
+                null
+              }
+            >
+              {selectOptions}
+            </SelectField>
+          ) : (
+            <GenericExpressionField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-external-layout-field`
+                  : undefined
+              }
+              expressionType="string"
+              {...props}
+              onChange={onChangeTextValue}
+            />
+          )
+        }
+        renderButton={style =>
+          isExpressionField ? (
+            <FlatButton
+              id="switch-expression-select"
+              leftIcon={<TypeCursorSelect />}
+              style={style}
+              primary
+              label={<Trans>Select an External Layout</Trans>}
+              onClick={switchFieldType}
+            />
+          ) : (
+            <RaisedButton
+              id="switch-expression-select"
+              icon={<Functions />}
+              style={style}
+              primary
+              label={<Trans>Use an Expression</Trans>}
+              onClick={switchFieldType}
+            />
           )
         }
-        ref={field}
-        {...props}
       />
     );
   }

newIDE/app/src/EventsSheet/ParameterFields/LayerEffectNameField.js

@@ -6,57 +6,152 @@ import {
   type ParameterFieldInterface,
   type FieldFocusFunction,
 } from './ParameterFieldCommons';
-import { type ExpressionAutocompletion } from '../../ExpressionAutocompletion';
 import {
   getPreviousParameterValue,
   tryExtractStringLiteralContent,
 } from './ParameterMetadataTools';
 import { enumerateEffectNames } from '../../EffectsList/EnumerateEffects';
+import SelectField, { type SelectFieldInterface } from '../../UI/SelectField';
+import SelectOption from '../../UI/SelectOption';
+import FlatButton from '../../UI/FlatButton';
+import RaisedButton from '../../UI/RaisedButton';
+import TypeCursorSelect from '../../UI/CustomSvgIcons/TypeCursorSelect';
+import Functions from '@material-ui/icons/Functions';
+import { Trans, t } from '@lingui/macro';
+import { TextFieldWithButtonLayout } from '../../UI/Layout';
 
 export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
   function LayerEffectNameField(props: ParameterFieldProps, ref) {
-    const field = React.useRef<?GenericExpressionField>(null);
+    const field = React.useRef<?(
+      | GenericExpressionField
+      | SelectFieldInterface
+    )>(null);
     const focus: FieldFocusFunction = options => {
       if (field.current) field.current.focus(options);
     };
     React.useImperativeHandle(ref, () => ({
       focus,
     }));
+    const { scope, instruction, expression, parameterIndex } = props;
 
-    const getEffectNames = (): Array<ExpressionAutocompletion> => {
-      const { scope, instruction, expression, parameterIndex } = props;
-
+    // We don't memo/callback this, as we want to recompute it every time something changes.
+    // Because of the function getPreviousParameterValue.
+    const getEffectNames = () => {
       const { layout } = scope;
       if (!layout) return [];
 
-      const layerName = tryExtractStringLiteralContent(
-        getPreviousParameterValue({
-          instruction,
-          expression,
-          parameterIndex,
-        })
-      );
-      if (layerName == null || !layout.hasLayerNamed(layerName)) return [];
+      const layerName =
+        tryExtractStringLiteralContent(
+          getPreviousParameterValue({
+            instruction,
+            expression,
+            parameterIndex,
+          })
+        ) || ''; // If no layer name is provided, this is the Base layer.
+      if (!layout.hasLayerNamed(layerName)) return [];
       const layer = layout.getLayer(layerName);
 
-      return enumerateEffectNames(layer.getEffects())
-        .sort()
-        .map(effectName => ({
-          kind: 'Text',
-          completion: `"${effectName}"`,
-        }));
+      return enumerateEffectNames(layer.getEffects()).sort();
     };
 
+    const effectNames = getEffectNames();
+
+    const isCurrentValueInEffectNamesList = !!effectNames.find(
+      effectName => `"${effectName}"` === props.value
+    );
+
+    // If the current value is not in the list of animation names, display an expression field.
+    const [isExpressionField, setIsExpressionField] = React.useState(
+      !!props.value && !isCurrentValueInEffectNamesList
+    );
+
+    const switchFieldType = () => {
+      setIsExpressionField(!isExpressionField);
+    };
+
+    const onChangeSelectValue = (event, value) => {
+      props.onChange(event.target.value);
+    };
+
+    const onChangeTextValue = (value: string) => {
+      props.onChange(value);
+    };
+
+    const fieldLabel = props.parameterMetadata
+      ? props.parameterMetadata.getDescription()
+      : undefined;
+
+    const selectOptions = effectNames.map(effectName => {
+      return (
+        <SelectOption
+          key={effectName}
+          value={`"${effectName}"`}
+          label={effectName}
+          shouldNotTranslate
+        />
+      );
+    });
+
     return (
-      <GenericExpressionField
-        expressionType="string"
-        onGetAdditionalAutocompletions={expression =>
-          getEffectNames().filter(
-            ({ completion }) => completion.indexOf(expression) === 0
+      <TextFieldWithButtonLayout
+        renderTextField={() =>
+          !isExpressionField ? (
+            <SelectField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-layer-effect-name-field`
+                  : undefined
+              }
+              value={props.value}
+              onChange={onChangeSelectValue}
+              margin={props.isInline ? 'none' : 'dense'}
+              fullWidth
+              floatingLabelText={fieldLabel}
+              translatableHintText={t`Choose an effect`}
+              helperMarkdownText={
+                (props.parameterMetadata &&
+                  props.parameterMetadata.getLongDescription()) ||
+                null
+              }
+            >
+              {selectOptions}
+            </SelectField>
+          ) : (
+            <GenericExpressionField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-layer-effect-name-field`
+                  : undefined
+              }
+              expressionType="string"
+              {...props}
+              onChange={onChangeTextValue}
+            />
+          )
+        }
+        renderButton={style =>
+          isExpressionField ? (
+            <FlatButton
+              id="switch-expression-select"
+              leftIcon={<TypeCursorSelect />}
+              style={style}
+              primary
+              label={<Trans>Select an Effect</Trans>}
+              onClick={switchFieldType}
+            />
+          ) : (
+            <RaisedButton
+              id="switch-expression-select"
+              icon={<Functions />}
+              style={style}
+              primary
+              label={<Trans>Use an Expression</Trans>}
+              onClick={switchFieldType}
+            />
           )
         }
-        ref={field}
-        {...props}
       />
     );
   }

newIDE/app/src/EventsSheet/ParameterFields/LayerEffectParameterNameField.js

@@ -6,17 +6,27 @@ import {
   type ParameterFieldInterface,
   type FieldFocusFunction,
 } from './ParameterFieldCommons';
-import { type ExpressionAutocompletion } from '../../ExpressionAutocompletion';
 import {
   getPreviousParameterValue,
   tryExtractStringLiteralContent,
 } from './ParameterMetadataTools';
+import SelectField, { type SelectFieldInterface } from '../../UI/SelectField';
+import SelectOption from '../../UI/SelectOption';
+import { TextFieldWithButtonLayout } from '../../UI/Layout';
+import { Trans, t } from '@lingui/macro';
+import FlatButton from '../../UI/FlatButton';
+import TypeCursorSelect from '../../UI/CustomSvgIcons/TypeCursorSelect';
+import RaisedButton from '../../UI/RaisedButton';
+import Functions from '@material-ui/icons/Functions';
 
 const gd: libGDevelop = global.gd;
 
 export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
   function LayerEffectParameterNameField(props: ParameterFieldProps, ref) {
-    const field = React.useRef<?GenericExpressionField>(null);
+    const field = React.useRef<?(
+      | GenericExpressionField
+      | SelectFieldInterface
+    )>(null);
     const focus: FieldFocusFunction = options => {
       if (field.current) field.current.focus(options);
     };
@@ -24,20 +34,23 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
       focus,
     }));
 
-    const getEffectParameterNames = (): Array<ExpressionAutocompletion> => {
-      const { project, scope, instruction, expression, parameterIndex } = props;
+    const { project, scope, instruction, expression, parameterIndex } = props;
 
+    // We don't memo/callback this, as we want to recompute it every time something changes.
+    // Because of the function getPreviousParameterValue.
+    const getEffectParameterNames = () => {
       const { layout } = scope;
       if (!layout || !project) return [];
 
-      const layerName = tryExtractStringLiteralContent(
-        getPreviousParameterValue({
-          instruction,
-          expression,
-          parameterIndex: parameterIndex ? parameterIndex - 1 : null,
-        })
-      );
-      if (layerName == null || !layout.hasLayerNamed(layerName)) return [];
+      const layerName =
+        tryExtractStringLiteralContent(
+          getPreviousParameterValue({
+            instruction,
+            expression,
+            parameterIndex: parameterIndex ? parameterIndex - 1 : null,
+          })
+        ) || ''; // If no layer name is provided, this is the Base layer.
+      if (!layout.hasLayerNamed(layerName)) return [];
       const layer = layout.getLayer(layerName);
 
       const effectName = tryExtractStringLiteralContent(
@@ -60,22 +73,111 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
       const properties = effectMetadata.getProperties();
       const parameterNames = properties.keys().toJSArray();
 
-      return parameterNames.sort().map(parameterName => ({
-        kind: 'Text',
-        completion: `"${parameterName}"`,
-      }));
+      return parameterNames.sort();
     };
 
+    const effectParameterNames = getEffectParameterNames();
+
+    const isCurrentValueInEffectParameterNamesList = !!effectParameterNames.find(
+      effectParameterName => `"${effectParameterName}"` === props.value
+    );
+
+    // If the current value is not in the list of animation names, display an expression field.
+    const [isExpressionField, setIsExpressionField] = React.useState(
+      !!props.value && !isCurrentValueInEffectParameterNamesList
+    );
+
+    const switchFieldType = () => {
+      setIsExpressionField(!isExpressionField);
+    };
+
+    const onChangeSelectValue = (event, value) => {
+      props.onChange(event.target.value);
+    };
+
+    const onChangeTextValue = (value: string) => {
+      props.onChange(value);
+    };
+
+    const fieldLabel = props.parameterMetadata
+      ? props.parameterMetadata.getDescription()
+      : undefined;
+
+    const selectOptions = effectParameterNames.map(effectParameterName => {
+      return (
+        <SelectOption
+          key={effectParameterName}
+          value={`"${effectParameterName}"`}
+          label={effectParameterName}
+          shouldNotTranslate
+        />
+      );
+    });
+
     return (
-      <GenericExpressionField
-        expressionType="string"
-        onGetAdditionalAutocompletions={expression =>
-          getEffectParameterNames().filter(
-            ({ completion }) => completion.indexOf(expression) === 0
+      <TextFieldWithButtonLayout
+        renderTextField={() =>
+          !isExpressionField ? (
+            <SelectField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${
+                      props.parameterIndex
+                    }-layer-effect-parameter-name-field`
+                  : undefined
+              }
+              value={props.value}
+              onChange={onChangeSelectValue}
+              margin={props.isInline ? 'none' : 'dense'}
+              fullWidth
+              floatingLabelText={fieldLabel}
+              translatableHintText={t`Choose a parameter`}
+              helperMarkdownText={
+                (props.parameterMetadata &&
+                  props.parameterMetadata.getLongDescription()) ||
+                null
+              }
+            >
+              {selectOptions}
+            </SelectField>
+          ) : (
+            <GenericExpressionField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${
+                      props.parameterIndex
+                    }-layer-effect-parameter-name-field`
+                  : undefined
+              }
+              expressionType="string"
+              {...props}
+              onChange={onChangeTextValue}
+            />
+          )
+        }
+        renderButton={style =>
+          isExpressionField ? (
+            <FlatButton
+              id="switch-expression-select"
+              leftIcon={<TypeCursorSelect />}
+              style={style}
+              primary
+              label={<Trans>Select an Effect Parameter</Trans>}
+              onClick={switchFieldType}
+            />
+          ) : (
+            <RaisedButton
+              id="switch-expression-select"
+              icon={<Functions />}
+              style={style}
+              primary
+              label={<Trans>Use an Expression</Trans>}
+              onClick={switchFieldType}
+            />
           )
         }
-        ref={field}
-        {...props}
       />
     );
   }

newIDE/app/src/EventsSheet/ParameterFields/LayerField.js

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
-import { t } from '@lingui/macro';
-import { I18n } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
 import { mapFor } from '../../Utils/MapFor';
 import {
   type ParameterFieldProps,
@@ -16,7 +15,7 @@ import { TextFieldWithButtonLayout } from '../../UI/Layout';
 import RaisedButton from '../../UI/RaisedButton';
 import Functions from '@material-ui/icons/Functions';
 import FlatButton from '../../UI/FlatButton';
-import Layers from '../../UI/CustomSvgIcons/Layers';
+import TypeCursorSelect from '../../UI/CustomSvgIcons/TypeCursorSelect';
 
 export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
   function LayerField(props, ref) {
@@ -81,72 +80,66 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
     });
 
     return (
-      <I18n>
-        {({ i18n }) => (
-          <>
-            <TextFieldWithButtonLayout
-              renderTextField={() =>
-                !isExpressionField ? (
-                  <SelectField
-                    ref={field}
-                    id={
-                      props.parameterIndex !== undefined
-                        ? `parameter-${props.parameterIndex}-layer-field`
-                        : undefined
-                    }
-                    value={props.value}
-                    onChange={onChangeSelectValue}
-                    margin={props.isInline ? 'none' : 'dense'}
-                    fullWidth
-                    floatingLabelText={fieldLabel}
-                    translatableHintText={t`Choose a layer`}
-                    helperMarkdownText={
-                      (props.parameterMetadata &&
-                        props.parameterMetadata.getLongDescription()) ||
-                      null
-                    }
-                  >
-                    {selectOptions}
-                  </SelectField>
-                ) : (
-                  <GenericExpressionField
-                    ref={field}
-                    id={
-                      props.parameterIndex !== undefined
-                        ? `parameter-${props.parameterIndex}-layer-field`
-                        : undefined
-                    }
-                    expressionType="string"
-                    {...props}
-                    onChange={onChangeTextValue}
-                  />
-                )
+      <TextFieldWithButtonLayout
+        renderTextField={() =>
+          !isExpressionField ? (
+            <SelectField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-layer-field`
+                  : undefined
               }
-              renderButton={style =>
-                isExpressionField ? (
-                  <FlatButton
-                    id="switch-expression-select"
-                    leftIcon={<Layers />}
-                    style={style}
-                    primary
-                    label={i18n._(t`Select a Layer`)}
-                    onClick={switchFieldType}
-                  />
-                ) : (
-                  <RaisedButton
-                    id="switch-expression-select"
-                    icon={<Functions />}
-                    style={style}
-                    primary
-                    label={i18n._(t`Use an Expression`)}
-                    onClick={switchFieldType}
-                  />
-                )
+              value={props.value}
+              onChange={onChangeSelectValue}
+              margin={props.isInline ? 'none' : 'dense'}
+              fullWidth
+              floatingLabelText={fieldLabel}
+              translatableHintText={t`Choose a layer`}
+              helperMarkdownText={
+                (props.parameterMetadata &&
+                  props.parameterMetadata.getLongDescription()) ||
+                null
               }
+            >
+              {selectOptions}
+            </SelectField>
+          ) : (
+            <GenericExpressionField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-layer-field`
+                  : undefined
+              }
+              expressionType="string"
+              {...props}
+              onChange={onChangeTextValue}
             />
-          </>
-        )}
-      </I18n>
+          )
+        }
+        renderButton={style =>
+          isExpressionField ? (
+            <FlatButton
+              id="switch-expression-select"
+              leftIcon={<TypeCursorSelect />}
+              style={style}
+              primary
+              label={<Trans>Select a Layer</Trans>}
+              onClick={switchFieldType}
+            />
+          ) : (
+            <RaisedButton
+              id="switch-expression-select"
+              icon={<Functions />}
+              style={style}
+              primary
+              label={<Trans>Use an Expression</Trans>}
+              onClick={switchFieldType}
+            />
+          )
+        }
+      />
     );
   }
 );

newIDE/app/src/EventsSheet/ParameterFields/ObjectAnimationNameField.js

@@ -1,21 +1,31 @@
 // @flow
 import * as React from 'react';
+import { Trans, t } from '@lingui/macro';
 import GenericExpressionField from './GenericExpressionField';
 import {
   type ParameterFieldProps,
   type ParameterFieldInterface,
   type FieldFocusFunction,
 } from './ParameterFieldCommons';
-import { type ExpressionAutocompletion } from '../../ExpressionAutocompletion';
 import getObjectByName from '../../Utils/GetObjectByName';
 import { getLastObjectParameterValue } from './ParameterMetadataTools';
 import { mapFor } from '../../Utils/MapFor';
+import SelectField, { type SelectFieldInterface } from '../../UI/SelectField';
+import SelectOption from '../../UI/SelectOption';
+import { TextFieldWithButtonLayout } from '../../UI/Layout';
+import FlatButton from '../../UI/FlatButton';
+import RaisedButton from '../../UI/RaisedButton';
+import Functions from '@material-ui/icons/Functions';
+import TypeCursorSelect from '../../UI/CustomSvgIcons/TypeCursorSelect';
 
 const gd: libGDevelop = global.gd;
 
 export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
   function ObjectAnimationNameField(props: ParameterFieldProps, ref) {
-    const field = React.useRef<?GenericExpressionField>(null);
+    const field = React.useRef<?(
+      | GenericExpressionField
+      | SelectFieldInterface
+    )>(null);
     const focus: FieldFocusFunction = options => {
       if (field.current) field.current.focus(options);
     };
@@ -23,17 +33,19 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
       focus,
     }));
 
-    const getAnimationNames = (): Array<ExpressionAutocompletion> => {
-      const {
-        project,
-        scope,
-        instructionMetadata,
-        instruction,
-        expressionMetadata,
-        expression,
-        parameterIndex,
-      } = props;
+    const {
+      project,
+      scope,
+      instructionMetadata,
+      instruction,
+      expressionMetadata,
+      expression,
+      parameterIndex,
+    } = props;
 
+    // We don't memo/callback this, as we want to recompute it every time something changes.
+    // Because of the function getLastObjectParameterValue.
+    const getAnimationNames = () => {
       const objectName = getLastObjectParameterValue({
         instructionMetadata,
         instruction,
@@ -41,6 +53,7 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
         expression,
         parameterIndex,
       });
+
       if (!objectName || !project) {
         return [];
       }
@@ -62,26 +75,110 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
           return animationName.length > 0 ? animationName : null;
         })
           .filter(Boolean)
-          .sort()
-          .map(animationName => ({
-            kind: 'Text',
-            completion: `"${animationName}"`,
-          }));
+          .sort();
       }
 
       return [];
     };
 
+    const animationNames = getAnimationNames();
+
+    const isCurrentValueInAnimationNamesList = !!animationNames.find(
+      animationName => `"${animationName}"` === props.value
+    );
+
+    // If the current value is not in the list of animation names, display an expression field.
+    const [isExpressionField, setIsExpressionField] = React.useState(
+      !!props.value && !isCurrentValueInAnimationNamesList
+    );
+
+    const switchFieldType = () => {
+      setIsExpressionField(!isExpressionField);
+    };
+
+    const onChangeSelectValue = (event, value) => {
+      props.onChange(event.target.value);
+    };
+
+    const onChangeTextValue = (value: string) => {
+      props.onChange(value);
+    };
+
+    const fieldLabel = props.parameterMetadata
+      ? props.parameterMetadata.getDescription()
+      : undefined;
+
+    const selectOptions = animationNames.map(animationName => {
+      return (
+        <SelectOption
+          key={animationName}
+          value={`"${animationName}"`}
+          label={animationName}
+          shouldNotTranslate
+        />
+      );
+    });
+
     return (
-      <GenericExpressionField
-        expressionType="string"
-        onGetAdditionalAutocompletions={expression =>
-          getAnimationNames().filter(
-            ({ completion }) => completion.indexOf(expression) === 0
+      <TextFieldWithButtonLayout
+        renderTextField={() =>
+          !isExpressionField ? (
+            <SelectField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-animation-name-field`
+                  : undefined
+              }
+              value={props.value}
+              onChange={onChangeSelectValue}
+              margin={props.isInline ? 'none' : 'dense'}
+              fullWidth
+              floatingLabelText={fieldLabel}
+              translatableHintText={t`Choose an animation`}
+              helperMarkdownText={
+                (props.parameterMetadata &&
+                  props.parameterMetadata.getLongDescription()) ||
+                null
+              }
+            >
+              {selectOptions}
+            </SelectField>
+          ) : (
+            <GenericExpressionField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-animation-name-field`
+                  : undefined
+              }
+              expressionType="string"
+              {...props}
+              onChange={onChangeTextValue}
+            />
+          )
+        }
+        renderButton={style =>
+          isExpressionField ? (
+            <FlatButton
+              id="switch-expression-select"
+              leftIcon={<TypeCursorSelect />}
+              style={style}
+              primary
+              label={<Trans>Select an Animation</Trans>}
+              onClick={switchFieldType}
+            />
+          ) : (
+            <RaisedButton
+              id="switch-expression-select"
+              icon={<Functions />}
+              style={style}
+              primary
+              label={<Trans>Use an Expression</Trans>}
+              onClick={switchFieldType}
+            />
           )
         }
-        ref={field}
-        {...props}
       />
     );
   }

newIDE/app/src/EventsSheet/ParameterFields/SceneNameField.js

@@ -8,7 +8,7 @@ import {
   type FieldFocusFunction,
 } from './ParameterFieldCommons';
 import FlatButton from '../../UI/FlatButton';
-import Scene from '../../UI/CustomSvgIcons/Scene';
+import TypeCursorSelect from '../../UI/CustomSvgIcons/TypeCursorSelect';
 import { t, Trans } from '@lingui/macro';
 import Functions from '@material-ui/icons/Functions';
 import RaisedButton from '../../UI/RaisedButton';
@@ -68,68 +68,66 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
     ));
 
     return (
-      <>
-        <TextFieldWithButtonLayout
-          renderTextField={() =>
-            !isExpressionField ? (
-              <SelectField
-                ref={field}
-                id={
-                  props.parameterIndex !== undefined
-                    ? `parameter-${props.parameterIndex}-scene-field`
-                    : undefined
-                }
-                value={props.value}
-                onChange={onChangeSelectValue}
-                margin={props.isInline ? 'none' : 'dense'}
-                fullWidth
-                floatingLabelText={fieldLabel}
-                translatableHintText={t`Choose a scene`}
-                helperMarkdownText={
-                  (props.parameterMetadata &&
-                    props.parameterMetadata.getLongDescription()) ||
-                  null
-                }
-              >
-                {selectOptions}
-              </SelectField>
-            ) : (
-              <GenericExpressionField
-                ref={field}
-                id={
-                  props.parameterIndex !== undefined
-                    ? `parameter-${props.parameterIndex}-scene-field`
-                    : undefined
-                }
-                expressionType="string"
-                {...props}
-                onChange={onChangeTextValue}
-              />
-            )
-          }
-          renderButton={style =>
-            isExpressionField ? (
-              <FlatButton
-                id="switch-expression-select"
-                leftIcon={<Scene />}
-                style={style}
-                primary
-                label={<Trans>Select a Scene</Trans>}
-                onClick={switchFieldType}
-              />
-            ) : (
-              <RaisedButton
-                id="switch-expression-select"
-                icon={<Functions />}
-                style={style}
-                primary
-                label={<Trans>Use an Expression</Trans>}
-                onClick={switchFieldType}
-              />
-            )
-          }
-        />
-      </>
+      <TextFieldWithButtonLayout
+        renderTextField={() =>
+          !isExpressionField ? (
+            <SelectField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-scene-field`
+                  : undefined
+              }
+              value={props.value}
+              onChange={onChangeSelectValue}
+              margin={props.isInline ? 'none' : 'dense'}
+              fullWidth
+              floatingLabelText={fieldLabel}
+              translatableHintText={t`Choose a scene`}
+              helperMarkdownText={
+                (props.parameterMetadata &&
+                  props.parameterMetadata.getLongDescription()) ||
+                null
+              }
+            >
+              {selectOptions}
+            </SelectField>
+          ) : (
+            <GenericExpressionField
+              ref={field}
+              id={
+                props.parameterIndex !== undefined
+                  ? `parameter-${props.parameterIndex}-scene-field`
+                  : undefined
+              }
+              expressionType="string"
+              {...props}
+              onChange={onChangeTextValue}
+            />
+          )
+        }
+        renderButton={style =>
+          isExpressionField ? (
+            <FlatButton
+              id="switch-expression-select"
+              leftIcon={<TypeCursorSelect />}
+              style={style}
+              primary
+              label={<Trans>Select a Scene</Trans>}
+              onClick={switchFieldType}
+            />
+          ) : (
+            <RaisedButton
+              id="switch-expression-select"
+              icon={<Functions />}
+              style={style}
+              primary
+              label={<Trans>Use an Expression</Trans>}
+              onClick={switchFieldType}
+            />
+          )
+        }
+      />
     );
   }
 );

newIDE/app/src/UI/CustomSvgIcons/TypeCursorSelect.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon width="17" height="16" viewBox="0 0 17 16" fill="none" {...props}>
+    <path
+      d="M2.70396 4.03697C3.04778 3.69315 3.5141 3.5 4.00033 3.5H13.3337C13.8199 3.5 14.2862 3.69315 14.63 4.03697C14.9738 4.38079 15.167 4.8471 15.167 5.33333V8.66667C15.167 8.94281 14.9431 9.16667 14.667 9.16667C14.3909 9.16667 14.167 8.94281 14.167 8.66667V5.33333C14.167 5.11232 14.0792 4.90036 13.9229 4.74408C13.7666 4.5878 13.5547 4.5 13.3337 4.5H4.00033C3.77931 4.5 3.56735 4.5878 3.41107 4.74408C3.25479 4.90036 3.16699 5.11232 3.16699 5.33333V9.33333C3.16699 9.55435 3.25479 9.76631 3.41107 9.92259C3.56735 10.0789 3.77931 10.1667 4.00033 10.1667H8.66699C8.94313 10.1667 9.16699 10.3905 9.16699 10.6667C9.16699 10.9428 8.94313 11.1667 8.66699 11.1667H4.00033C3.5141 11.1667 3.04778 10.9735 2.70396 10.6297C2.36015 10.2859 2.16699 9.81956 2.16699 9.33333V5.33333C2.16699 4.8471 2.36015 4.38079 2.70396 4.03697Z"
+      fill="currentColor"
+    />
+    <path
+      d="M6.34333 6.96269C6.54766 7.14844 6.56272 7.46466 6.37697 7.669L6.3703 7.67633C6.18455 7.88066 5.86833 7.89573 5.664 7.70998C5.45967 7.52423 5.4446 7.208 5.63035 7.00367L5.63702 6.99634C5.82277 6.792 6.13899 6.77694 6.34333 6.96269Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.00999 6.96269C9.21433 7.14844 9.22939 7.46466 9.04364 7.669L9.03697 7.67633C8.85122 7.88066 8.535 7.89573 8.33067 7.70998C8.12633 7.52423 8.11127 7.208 8.29702 7.00367L8.30369 6.99634C8.48944 6.792 8.80566 6.77694 9.00999 6.96269Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.6767 6.96269C11.881 7.14844 11.8961 7.46466 11.7103 7.669L11.7036 7.67633C11.5179 7.88066 11.2017 7.89573 10.9973 7.70998C10.793 7.52423 10.7779 7.208 10.9637 7.00367L10.9704 6.99634C11.1561 6.792 11.4723 6.77694 11.6767 6.96269Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.9266 8.8887C11.7927 8.81037 11.6396 8.77063 11.4842 8.7742C11.3288 8.77777 11.1781 8.82444 11.0483 8.90799C10.9185 8.99148 10.8146 9.10851 10.7465 9.24564C10.6785 9.38273 10.6484 9.53559 10.6593 9.68809L10.6617 9.72044L11.5142 13.9045C11.6008 14.6744 12.6114 14.9468 13.0556 14.2738L13.8563 13.0609L15.2702 12.8494C16.0593 12.7315 16.2578 11.6868 15.5859 11.2793L11.9373 8.89497L11.9266 8.8887ZM14.7357 11.9183L11.7298 9.95395L12.4324 13.4026L13.2674 12.1378L14.7357 11.9183Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));