From ec88db09a81f9a5385a2d0e8d8a011a264d2f83f Mon Sep 17 00:00:00 2001
From: Rafal Dziegielewski <rafal.dzieg@gmail.com>
Date: Fri, 5 Jul 2024 17:43:07 +0200
Subject: [PATCH] fix: translate record property errors

---
 src/frontend/components/property-type/array/edit.tsx        | 4 +++-
 src/frontend/components/property-type/boolean/edit.tsx      | 4 +++-
 src/frontend/components/property-type/currency/edit.tsx     | 4 +++-
 src/frontend/components/property-type/datetime/edit.tsx     | 4 +++-
 src/frontend/components/property-type/default-type/edit.tsx | 3 ++-
 src/frontend/components/property-type/key-value/edit.tsx    | 4 ++--
 src/frontend/components/property-type/mixed/edit.tsx        | 5 ++++-
 src/frontend/components/property-type/password/edit.tsx     | 4 +++-
 src/frontend/components/property-type/phone/edit.tsx        | 4 +++-
 src/frontend/components/property-type/textarea/edit.tsx     | 4 +++-
 10 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/frontend/components/property-type/array/edit.tsx b/src/frontend/components/property-type/array/edit.tsx
index c37e32b13..9e49cb15a 100644
--- a/src/frontend/components/property-type/array/edit.tsx
+++ b/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>
   )
 }
diff --git a/src/frontend/components/property-type/boolean/edit.tsx b/src/frontend/components/property-type/boolean/edit.tsx
index a793523e3..7d1de026a 100644
--- a/src/frontend/components/property-type/boolean/edit.tsx
+++ b/src/frontend/components/property-type/boolean/edit.tsx
@@ -5,6 +5,7 @@ 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')
 
@@ -12,6 +13,7 @@ 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>
   )
 }
diff --git a/src/frontend/components/property-type/currency/edit.tsx b/src/frontend/components/property-type/currency/edit.tsx
index c8cd3ebc9..99deeabf2 100644
--- a/src/frontend/components/property-type/currency/edit.tsx
+++ b/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>
   )
 }
diff --git a/src/frontend/components/property-type/datetime/edit.tsx b/src/frontend/components/property-type/datetime/edit.tsx
index 65470f897..6249709c7 100644
--- a/src/frontend/components/property-type/datetime/edit.tsx
+++ b/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>
   )
 }
diff --git a/src/frontend/components/property-type/default-type/edit.tsx b/src/frontend/components/property-type/default-type/edit.tsx
index 2bffd10aa..d4c09edbb 100644
--- a/src/frontend/components/property-type/default-type/edit.tsx
+++ b/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>
   )
 }
diff --git a/src/frontend/components/property-type/key-value/edit.tsx b/src/frontend/components/property-type/key-value/edit.tsx
index 1ec6379b6..54b9d5a4c 100644
--- a/src/frontend/components/property-type/key-value/edit.tsx
+++ b/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>
   )
 }
diff --git a/src/frontend/components/property-type/mixed/edit.tsx b/src/frontend/components/property-type/mixed/edit.tsx
index 2b9bb46bc..5bb41cedc 100644
--- a/src/frontend/components/property-type/mixed/edit.tsx
+++ b/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>
   )
 }
diff --git a/src/frontend/components/property-type/password/edit.tsx b/src/frontend/components/property-type/password/edit.tsx
index 3427c69c9..011e2c879 100644
--- a/src/frontend/components/property-type/password/edit.tsx
+++ b/src/frontend/components/property-type/password/edit.tsx
@@ -6,6 +6,7 @@ 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
@@ -13,6 +14,7 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
   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>
   )
 }
diff --git a/src/frontend/components/property-type/phone/edit.tsx b/src/frontend/components/property-type/phone/edit.tsx
index e08b5dd52..db052dfdd 100644
--- a/src/frontend/components/property-type/phone/edit.tsx
+++ b/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>
   )
 }
diff --git a/src/frontend/components/property-type/textarea/edit.tsx b/src/frontend/components/property-type/textarea/edit.tsx
index b32165382..85bfec6b4 100644
--- a/src/frontend/components/property-type/textarea/edit.tsx
+++ b/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>
   )
 }