fix: harmonize support for additional props in all basic input components

Lack of additional props prevent integrators from adding custom data-cy properties
for Cypress selectors.

Author: csm-thu

src/inputs/BasicInputs/BasicDateInput/BasicDateInput.js

@@ -8,7 +8,7 @@ import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';
 
 export const BasicDateInput = (props) => {
-  const { id, label, format, value, dateProps, changeSelectedDate } = props;
+  const { id, label, format, value, dateProps, changeSelectedDate, ...otherProps } = props;
 
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
@@ -19,13 +19,13 @@ export const BasicDateInput = (props) => {
         format={format}
         label={label}
         id={id}
-        data-cy={id + '-date-input'}
         onChange={changeSelectedDate}
         KeyboardButtonProps={{
           'aria-label': 'change date',
         }}
         value={value}
         {...dateProps}
+        {...otherProps}
       />
     </MuiPickersUtilsProvider>
   );

src/inputs/BasicInputs/BasicEnumInput/BasicEnumInput.js

@@ -13,16 +13,17 @@ const useStyles = makeStyles((theme) => ({
 
 export const BasicEnumInput = (props) => {
   const classes = useStyles();
-  const { label, value, textFieldProps, enumValues, changeEnumField } = props;
-  const { containerProps, labelProps } = props;
+  const { label, value, textFieldProps, enumValues, changeEnumField, containerProps, labelProps, ...otherProps } =
+    props;
 
   return (
-    <Grid container className={classes.root} {...containerProps}>
+    <Grid container className={classes.root} {...containerProps} {...otherProps}>
       <Grid item>
         <Typography {...labelProps}>{label}</Typography>
       </Grid>
       <Grid item>
         <TextField
+          data-cy="text_field"
           select
           value={value}
           {...textFieldProps}

src/inputs/BasicInputs/BasicTextInput/BasicTextInput.js

@@ -13,10 +13,10 @@ const useStyles = makeStyles((theme) => ({
 
 export const BasicTextInput = (props) => {
   const classes = useStyles();
-  const { label, value, textFieldProps, changeTextField, containerProps, labelProps } = props;
+  const { label, value, textFieldProps, changeTextField, containerProps, labelProps, ...otherProps } = props;
 
   return (
-    <Grid container className={classes.root} {...containerProps}>
+    <Grid container className={classes.root} {...containerProps} {...otherProps}>
       <Grid item>
         <Typography {...labelProps}>{label}</Typography>
       </Grid>

src/inputs/BasicInputs/BasicToggleInput/BasicToggleInput.js

@@ -13,10 +13,10 @@ const useStyles = makeStyles((theme) => ({
 
 export const BasicToggleInput = (props) => {
   const classes = useStyles();
-  const { label, value, switchProps, changeSwitchType, containerProps, labelProps } = props;
+  const { label, value, switchProps, changeSwitchType, containerProps, labelProps, ...otherProps } = props;
 
   return (
-    <Grid container className={classes.root} {...containerProps}>
+    <Grid container className={classes.root} {...containerProps} {...otherProps}>
       <Grid item>
         <Typography {...labelProps}>{label}</Typography>
       </Grid>