fix: translate record property errors

src/frontend/components/property-type/array/edit.tsx

@@ -10,6 +10,7 @@ import { convertToSubProperty } from './convert-to-sub-property.js'
 import { PropertyJSON } from '../../../interfaces/index.js'
 import { removeSubProperty } from './remove-sub-property.js'
 import allowOverride from '../../../hoc/allow-override.js'
+import { useTranslation } from '../../../hooks/index.js'
 
 type EditProps = Required<EditPropertyPropsInArray>
 
@@ -132,13 +133,14 @@ const InputsInSection: React.FC<EditProps> = (props) => {
 
 const Edit: React.FC<EditProps> = (props) => {
   const { property, record, testId } = props
+  const { tm } = useTranslation()
   const error = record.errors && record.errors[property.propertyPath]
 
   return (
     <FormGroup error={!!error} data-testid={testId}>
       <PropertyLabel property={property} />
       <InputsInSection {...props} />
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }

src/frontend/components/property-type/boolean/edit.tsx

@@ -5,13 +5,15 @@ import { EditPropertyProps } from '../base-property-props.js'
 import { recordPropertyIsEqual } from '../record-property-is-equal.js'
 import { PropertyLabel } from '../utils/property-label/index.js'
 import allowOverride from '../../../hoc/allow-override.js'
+import { useTranslation } from '../../../hooks/index.js'
 
 const parseValue = (value): boolean => !(!value || value === 'false')
 
 const Edit: React.FC<EditPropertyProps> = (props) => {
   const { property, onChange, record } = props
   const value = parseValue(record.params && record.params[property.path])
   const error = record.errors && record.errors[property.path]
+  const { tm } = useTranslation()
 
   const handleChange = (): void => {
     if (!property.isDisabled) {
@@ -30,7 +32,7 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
         {...property.props}
       />
       <PropertyLabel property={property} props={{ inline: true }} />
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }

src/frontend/components/property-type/currency/edit.tsx

@@ -6,11 +6,13 @@ import { recordPropertyIsEqual } from '../record-property-is-equal.js'
 import { PropertyLabel } from '../utils/property-label/index.js'
 import allowOverride from '../../../hoc/allow-override.js'
 import { CurrencyInputWrapper } from './currency-input-wrapper.js'
+import { useTranslation } from '../../../hooks/index.js'
 
 const Edit: FC<EditPropertyProps> = (props) => {
   const { onChange, property, record } = props
   const propValue = record.params?.[property.path] ?? ''
   const error = record.errors?.[property.path]
+  const { tm } = useTranslation()
 
   return (
     <FormGroup error={Boolean(error)}>
@@ -21,7 +23,7 @@ const Edit: FC<EditPropertyProps> = (props) => {
         options={property.props as CurrencyInputProps}
         onChange={(value) => onChange(property.path, value)}
       />
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }

src/frontend/components/property-type/datetime/edit.tsx

@@ -5,11 +5,13 @@ import { EditPropertyProps } from '../base-property-props.js'
 import { recordPropertyIsEqual } from '../record-property-is-equal.js'
 import { PropertyLabel } from '../utils/property-label/index.js'
 import allowOverride from '../../../hoc/allow-override.js'
+import { useTranslation } from '../../../hooks/index.js'
 
 const Edit: React.FC<EditPropertyProps> = (props) => {
   const { property, onChange, record } = props
   const value = (record.params && record.params[property.path]) || ''
   const error = record.errors && record.errors[property.path]
+  const { tm } = useTranslation()
 
   return (
     <FormGroup error={!!error}>
@@ -21,7 +23,7 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
         propertyType={property.type}
         {...property.props}
       />
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }

src/frontend/components/property-type/default-type/edit.tsx

@@ -13,12 +13,13 @@ type CombinedProps = EditPropertyProps
 const Edit: FC<CombinedProps> = (props) => {
   const { property, record } = props
   const error = record.errors?.[property.path]
+  const { tm } = useTranslation()
 
   return (
     <FormGroup error={Boolean(error)}>
       <PropertyLabel property={property} />
       {property.availableValues ? <SelectEdit {...props} /> : <TextEdit {...props} />}
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }

src/frontend/components/property-type/key-value/edit.tsx

@@ -44,7 +44,7 @@ const EditKeyValuePair: React.FC<EditKeyValuePairProps> = (props) => {
             value={currentKey}
             {...(property.props?.keyInputProps ?? {})}
           />
-          {error && <FormMessage>{error.message}</FormMessage>}
+          {error && <FormMessage>{tm(error.message, property.resourceId)}</FormMessage>}
         </FormGroup>
         <FormGroup mb="0px">
           <Input
@@ -171,7 +171,7 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
           {tb('addNewItem', resource.id)}
         </Button>
       </Section>
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }

src/frontend/components/property-type/mixed/edit.tsx

@@ -5,6 +5,7 @@ import { EditPropertyProps } from '../base-property-props.js'
 import { PropertyLabel } from '../utils/property-label/index.js'
 import { convertToSubProperty } from './convert-to-sub-property.js'
 import allowOverride from '../../../hoc/allow-override.js'
+import { useTranslation } from '../../../hooks/index.js'
 
 type Props = {
   ItemComponent: typeof React.Component;
@@ -13,6 +14,8 @@ type Props = {
 const Edit: React.FC<Props & EditPropertyProps> = (props) => {
   const { property, record, ItemComponent } = props
   const error = record.errors && record.errors[property.path]
+  const { tm } = useTranslation()
+
   return (
     <FormGroup error={!!error}>
       <PropertyLabel property={property} />
@@ -28,7 +31,7 @@ const Edit: React.FC<Props & EditPropertyProps> = (props) => {
           )
         })}
       </Section>
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }

src/frontend/components/property-type/password/edit.tsx

@@ -6,13 +6,15 @@ import { EditPropertyProps } from '../base-property-props.js'
 import { recordPropertyIsEqual } from '../record-property-is-equal.js'
 import { PropertyLabel } from '../utils/property-label/index.js'
 import allowOverride from '../../../hoc/allow-override.js'
+import { useTranslation } from '../../../hooks/index.js'
 
 const Edit: React.FC<EditPropertyProps> = (props) => {
   const { property, record, onChange } = props
   const propValue = record.params[property.path]
   const [value, setValue] = useState(propValue)
   const error = record.errors && record.errors[property.path]
   const [isInput, setIsInput] = useState(false)
+  const { tm } = useTranslation()
 
   useEffect(() => {
     if (value !== propValue) {
@@ -44,7 +46,7 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
           <Icon icon="Eye" />
         </Button>
       </InputGroup>
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }

src/frontend/components/property-type/phone/edit.tsx

@@ -5,12 +5,14 @@ import { EditPropertyProps } from '../base-property-props.js'
 import { recordPropertyIsEqual } from '../record-property-is-equal.js'
 import { PropertyLabel } from '../utils/property-label/index.js'
 import allowOverride from '../../../hoc/allow-override.js'
+import { useTranslation } from '../../../hooks/index.js'
 
 const Edit: FC<EditPropertyProps> = (props) => {
   const { onChange, property, record } = props
   const propValue = record.params?.[property.path] ?? ''
   const [value, setValue] = useState(propValue)
   const error = record.errors?.[property.path]
+  const { tm } = useTranslation()
 
   useEffect(() => {
     if (value !== propValue) {
@@ -32,7 +34,7 @@ const Edit: FC<EditPropertyProps> = (props) => {
         value={value}
         {...property.props as PhoneInputProps}
       />
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }

src/frontend/components/property-type/textarea/edit.tsx

@@ -6,12 +6,14 @@ import { EditPropertyProps } from '../base-property-props.js'
 import { recordPropertyIsEqual } from '../record-property-is-equal.js'
 import { PropertyLabel } from '../utils/property-label/index.js'
 import allowOverride from '../../../hoc/allow-override.js'
+import { useTranslation } from '../../../hooks/index.js'
 
 const Edit: FC<EditPropertyProps> = (props) => {
   const { onChange, property, record } = props
   const propValue = record.params?.[property.path] ?? ''
   const [value, setValue] = useState(propValue)
   const error = record.errors?.[property.path]
+  const { tm } = useTranslation()
 
   useEffect(() => {
     if (value !== propValue) {
@@ -33,7 +35,7 @@ const Edit: FC<EditPropertyProps> = (props) => {
         disabled={property.isDisabled}
         {...property.props}
       />
-      <FormMessage>{error && error.message}</FormMessage>
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }