Merge remote-tracking branch 'origin/v3.4' into dev

interface/src/components/inputs/ValidatedTextField.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { ValidateFieldsError } from 'async-validator';
+
+import { FormHelperText, TextField, TextFieldProps } from '@mui/material';
+
+interface ValidatedFieldProps {
+  fieldErrors?: ValidateFieldsError;
+  name: string;
+}
+
+export type ValidatedTextFieldProps = ValidatedFieldProps & TextFieldProps;
+
+const ValidatedTextField: FC<ValidatedTextFieldProps> = ({ fieldErrors, ...rest }) => {
+  const errors = fieldErrors && fieldErrors[rest.name];
+  const renderErrors = () => errors && errors.map((e, i) => <FormHelperText key={i}>{e.message}</FormHelperText>);
+  return (
+    <>
+      <TextField error={!!errors} {...rest} />
+      {renderErrors()}
+    </>
+  );
+};
+
+export default ValidatedTextField;