diff --git a/packages/web/src/components/ControlledAutocomplete/index.tsx b/packages/web/src/components/ControlledAutocomplete/index.tsx index 198ff396..c209afa7 100644 --- a/packages/web/src/components/ControlledAutocomplete/index.tsx +++ b/packages/web/src/components/ControlledAutocomplete/index.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import FormHelperText from '@mui/material/FormHelperText'; import { Controller, useFormContext } from 'react-hook-form'; +import FormHelperText from '@mui/material/FormHelperText'; import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete'; +import Typography from '@mui/material/Typography'; import type { IFieldDropdownOption } from '@automatisch/types'; interface ControlledAutocompleteProps @@ -9,6 +10,7 @@ interface ControlledAutocompleteProps shouldUnregister?: boolean; name: string; required?: boolean; + showOptionValue?: boolean; description?: string; dependsOn?: string[]; } @@ -31,6 +33,7 @@ function ControlledAutocomplete( description, options = [], dependsOn = [], + showOptionValue, ...autocompleteProps } = props; @@ -97,8 +100,16 @@ function ControlledAutocomplete( ref={ref} data-test={`${name}-autocomplete`} renderOption={(optionProps, option) => ( -
  • - {option.label} +
  • + {option.label} + + {showOptionValue && ( + {option.value} + )}
  • )} /> diff --git a/packages/web/src/components/FlowSubstep/index.tsx b/packages/web/src/components/FlowSubstep/index.tsx index c0aa1c23..cd9c0c28 100644 --- a/packages/web/src/components/FlowSubstep/index.tsx +++ b/packages/web/src/components/FlowSubstep/index.tsx @@ -94,6 +94,7 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement { namePrefix="parameters" stepId={step.id} disabled={editorContext.readOnly} + showOptionValue={true} /> ))} diff --git a/packages/web/src/components/InputCreator/index.tsx b/packages/web/src/components/InputCreator/index.tsx index 0115816a..f54d331f 100644 --- a/packages/web/src/components/InputCreator/index.tsx +++ b/packages/web/src/components/InputCreator/index.tsx @@ -14,6 +14,7 @@ type InputCreatorProps = { namePrefix?: string; stepId?: string; disabled?: boolean; + showOptionValue?: boolean; }; type RawOption = { @@ -27,7 +28,15 @@ const optionGenerator = (options: RawOption[]): IFieldDropdownOption[] => export default function InputCreator( props: InputCreatorProps ): React.ReactElement { - const { onChange, onBlur, schema, namePrefix, stepId, disabled } = props; + const { + onChange, + onBlur, + schema, + namePrefix, + stepId, + disabled, + showOptionValue, + } = props; const { key: name, @@ -62,6 +71,7 @@ export default function InputCreator( description={description} loading={loading} disabled={disabled} + showOptionValue={showOptionValue} /> ); }