From e93b63794e1a2d60c60d96c68c143352ba844866 Mon Sep 17 00:00:00 2001
From: Sjoertjuh <63722509+Sjoertjuh@users.noreply.github.com>
Date: Wed, 30 Oct 2024 12:46:09 +0100
Subject: [PATCH] feat: add feedback to edit component form

---
 .../upload-file/components/UploadEditComponent.tsx        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/features/upload-file/components/UploadEditComponent.tsx b/src/features/upload-file/components/UploadEditComponent.tsx
index 8818cc2..bd85890 100644
--- a/src/features/upload-file/components/UploadEditComponent.tsx
+++ b/src/features/upload-file/components/UploadEditComponent.tsx
@@ -1,12 +1,13 @@
-import { DropZone, DropZoneItem, FormGroup, Label } from '@adminjs/design-system'
+import { DropZone, DropZoneItem, FormGroup, FormMessage, Label } from '@adminjs/design-system'
 import { EditPropertyProps, flat, useTranslation } from 'adminjs'
 import React, { FC, useEffect, useState } from 'react'
 import PropertyCustom from '../types/property-custom.type.js'
 
 const Edit: FC<EditPropertyProps> = ({ property, record, onChange }) => {
-  const { translateProperty } = useTranslation()
+  const { translateProperty, tm } = useTranslation()
   const { params } = record
   const { custom } = property as unknown as { custom: PropertyCustom }
+  const error = record.errors?.[property.path]
 
   const path = flat.get(params, custom.filePathProperty)
   const key = flat.get(params, custom.keyProperty)
@@ -63,7 +64,7 @@ const Edit: FC<EditPropertyProps> = ({ property, record, onChange }) => {
   }
 
   return (
-    <FormGroup>
+    <FormGroup error={Boolean(error)}>
       <Label>{translateProperty(property.label, property.resourceId)}</Label>
       <DropZone
         onChange={onUpload}
@@ -96,6 +97,7 @@ const Edit: FC<EditPropertyProps> = ({ property, record, onChange }) => {
           })}
         </>
       ) : ''}
+      <FormMessage>{error && tm(error.message, property.resourceId)}</FormMessage>
     </FormGroup>
   )
 }