From 3f1faf4784f94613e994b8c7c3f5e9fdec89dd7a Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Wed, 18 Jan 2023 11:52:18 +0800
Subject: [PATCH] refactor(console): add error state to create role and
 permission form (#2978)

---
 .../components/CreatePermissionModal/index.tsx                | 1 +
 .../src/pages/Roles/components/CreateRoleForm/index.tsx       | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
index 4a0a09632..891d452e8 100644
--- a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
@@ -86,6 +86,7 @@ const CreatePermissionModal = ({ resourceId, onClose }: Props) => {
             <TextInput
               placeholder={t('api_resource_details.permission.description_placeholder')}
               {...register('description', { required: true })}
+              hasError={Boolean(errors.description)}
             />
           </FormField>
         </form>
diff --git a/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
index 5737b199b..2375b87fc 100644
--- a/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
+++ b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
@@ -28,7 +28,7 @@ const CreateRoleForm = ({ onClose }: Props) => {
     control,
     handleSubmit,
     register,
-    formState: { isSubmitting },
+    formState: { isSubmitting, errors },
   } = useForm<CreateRoleFormData>();
 
   const api = useApi();
@@ -72,12 +72,14 @@ const CreateRoleForm = ({ onClose }: Props) => {
             autoFocus
             {...register('name', { required: true })}
             placeholder={t('roles.role_name_placeholder')}
+            hasError={Boolean(errors.name)}
           />
         </FormField>
         <FormField isRequired title="roles.role_description">
           <TextInput
             {...register('description', { required: true })}
             placeholder={t('roles.role_description_placeholder')}
+            hasError={Boolean(errors.description)}
           />
         </FormField>
         <FormField title="roles.assign_permissions">