From 4220f554dbc0a401875439942ca60d09c61cba7a Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 10 Apr 2023 11:20:49 +0800
Subject: [PATCH] refactor(console): remove redundant `hasError` prop from text
 input (#3672)

---
 .../src/components/MultiTextInput/index.tsx   |  4 +---
 .../src/components/TextInput/index.tsx        | 21 ++++++-------------
 .../mdx-components/UriInputField/index.tsx    |  2 +-
 .../pages/SignInExperience/index.tsx          |  3 +--
 .../CreatePermissionModal/index.tsx           |  5 ++---
 .../ApiResourceSettings/index.tsx             |  4 ++--
 .../components/Settings.tsx                   |  2 +-
 .../components/CreateForm/index.tsx           |  2 +-
 .../components/SenderTester/index.tsx         |  2 +-
 .../components/ConfigForm/index.tsx           |  2 +-
 .../components/ConnectorForm/BasicForm.tsx    | 10 ++++-----
 .../BasicUserInfoUpdateModal/index.tsx        |  2 +-
 .../containers/ChangePasswordModal/index.tsx  |  4 ++--
 .../containers/LinkEmailModal/index.tsx       |  2 +-
 .../containers/VerifyPasswordModal/index.tsx  |  2 +-
 .../pages/RoleDetails/RoleSettings/index.tsx  |  4 ++--
 .../Roles/components/CreateRoleForm/index.tsx |  4 ++--
 .../tabs/Branding/BrandingForm.tsx            |  9 +++-----
 .../tabs/Others/TermsForm.tsx                 |  6 ++----
 .../pages/UserDetails/UserSettings/index.tsx  |  3 +--
 .../Users/components/CreateForm/index.tsx     |  9 ++------
 21 files changed, 38 insertions(+), 64 deletions(-)

diff --git a/packages/console/src/components/MultiTextInput/index.tsx b/packages/console/src/components/MultiTextInput/index.tsx
index d19637bb8..0f1c47250 100644
--- a/packages/console/src/components/MultiTextInput/index.tsx
+++ b/packages/console/src/components/MultiTextInput/index.tsx
@@ -71,9 +71,7 @@ function MultiTextInput({
         >
           <div className={styles.deletableInput}>
             <TextInput
-              hasError={Boolean(
-                error?.inputs?.[fieldIndex] ?? (fieldIndex === 0 && error?.required)
-              )}
+              error={Boolean(error?.inputs?.[fieldIndex] ?? (fieldIndex === 0 && error?.required))}
               value={fieldValue}
               placeholder={placeholder}
               onChange={({ currentTarget: { value } }) => {
diff --git a/packages/console/src/components/TextInput/index.tsx b/packages/console/src/components/TextInput/index.tsx
index 34e3d736e..3d5833cb1 100644
--- a/packages/console/src/components/TextInput/index.tsx
+++ b/packages/console/src/components/TextInput/index.tsx
@@ -14,24 +14,13 @@ import {
 import * as styles from './index.module.scss';
 
 type Props = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
-  hasError?: boolean;
-  errorMessage?: string;
+  error?: string | boolean;
   icon?: ReactElement;
   suffix?: ReactElement;
 };
 
 function TextInput(
-  {
-    errorMessage,
-    hasError = Boolean(errorMessage),
-    icon,
-    suffix,
-    disabled,
-    className,
-    readOnly,
-    type = 'text',
-    ...rest
-  }: Props,
+  { error, icon, suffix, disabled, className, readOnly, type = 'text', ...rest }: Props,
   reference: Ref<Nullable<HTMLInputElement>>
 ) {
   const innerRef = useRef<HTMLInputElement>(null);
@@ -64,7 +53,7 @@ function TextInput(
       <div
         className={classNames(
           styles.container,
-          hasError && styles.error,
+          error && styles.error,
           icon && styles.withIcon,
           disabled && styles.disabled,
           readOnly && styles.readOnly
@@ -77,7 +66,9 @@ function TextInput(
             className: classNames([suffix.props.className, styles.suffix]),
           })}
       </div>
-      {hasError && errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
+      {Boolean(error) && typeof error === 'string' && (
+        <div className={styles.errorMessage}>{error}</div>
+      )}
     </div>
   );
 }
diff --git a/packages/console/src/mdx-components/UriInputField/index.tsx b/packages/console/src/mdx-components/UriInputField/index.tsx
index 54c471eaf..f43c9e148 100644
--- a/packages/console/src/mdx-components/UriInputField/index.tsx
+++ b/packages/console/src/mdx-components/UriInputField/index.tsx
@@ -99,7 +99,7 @@ function UriInputField({ appId, name, title, isSingle = false }: Props) {
                     <TextInput
                       className={styles.field}
                       value={value[0]}
-                      errorMessage={errorObject?.required ?? errorObject?.inputs?.[0]}
+                      error={errorObject?.required ?? errorObject?.inputs?.[0]}
                       onChange={({ currentTarget: { value } }) => {
                         onChange([value]);
                       }}
diff --git a/packages/console/src/onboarding/pages/SignInExperience/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/index.tsx
index db23b01bb..59ca6acb9 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/index.tsx
@@ -137,8 +137,7 @@ function SignInExperience() {
                     validate: (value) =>
                       !value || uriValidator(value) || t('errors.invalid_uri_format'),
                   })}
-                  hasError={Boolean(errors.logo)}
-                  errorMessage={errors.logo?.message}
+                  error={errors.logo?.message}
                 />
               )}
             </FormField>
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 f8497595a..d0e9a4977 100644
--- a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
@@ -79,15 +79,14 @@ function CreatePermissionModal({ resourceId, onClose }: Props) {
                   message: t('api_resource_details.permission.forbidden_space_in_name'),
                 },
               })}
-              hasError={Boolean(errors.name)}
-              errorMessage={errors.name?.message}
+              error={errors.name?.message}
             />
           </FormField>
           <FormField isRequired title="api_resource_details.permission.description">
             <TextInput
               placeholder={t('api_resource_details.permission.description_placeholder')}
               {...register('description', { required: true })}
-              hasError={Boolean(errors.description)}
+              error={Boolean(errors.description)}
             />
           </FormField>
         </form>
diff --git a/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx b/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx
index 51dacae51..16afba068 100644
--- a/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx
@@ -61,7 +61,7 @@ function ApiResourceSettings() {
           <FormField isRequired title="api_resources.api_name">
             <TextInput
               {...register('name', { required: true })}
-              hasError={Boolean(errors.name)}
+              error={Boolean(errors.name)}
               readOnly={isLogtoManagementApiResource}
               placeholder={t('api_resources.api_name_placeholder')}
             />
@@ -73,7 +73,7 @@ function ApiResourceSettings() {
                 valueAsNumber: true,
               })}
               type="number"
-              hasError={Boolean(errors.accessTokenTtl)}
+              error={Boolean(errors.accessTokenTtl)}
               placeholder={t('api_resource_details.token_expiration_time_in_seconds_placeholder')}
             />
           </FormField>
diff --git a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
index 154579d52..092320f7e 100644
--- a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
@@ -48,7 +48,7 @@ function Settings({ data }: Props) {
       <FormField isRequired title="application_details.application_name">
         <TextInput
           {...register('name', { required: true })}
-          hasError={Boolean(errors.name)}
+          error={Boolean(errors.name)}
           placeholder={t('application_details.application_name_placeholder')}
         />
       </FormField>
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
index 7261aa5da..e822b5dce 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@@ -118,7 +118,7 @@ function CreateForm({ isOpen, onClose }: Props) {
             <TextInput
               {...register('name', { required: true })}
               placeholder={t('applications.application_name_placeholder')}
-              hasError={Boolean(errors.name)}
+              error={Boolean(errors.name)}
             />
           </FormField>
           <FormField title="applications.application_description">
diff --git a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx
index 856fda226..8f3111910 100644
--- a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx
@@ -77,7 +77,7 @@ function SenderTester({ connectorFactoryId, connectorType, className, parse }: P
           className={styles.textField}
         >
           <TextInput
-            hasError={Boolean(inputError)}
+            error={Boolean(inputError)}
             type={isSms ? 'tel' : 'email'}
             placeholder={
               isSms
diff --git a/packages/console/src/pages/Connectors/components/ConfigForm/index.tsx b/packages/console/src/pages/Connectors/components/ConfigForm/index.tsx
index 87487764f..e0698743b 100644
--- a/packages/console/src/pages/Connectors/components/ConfigForm/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConfigForm/index.tsx
@@ -125,7 +125,7 @@ function ConfigForm({ formItems }: Props) {
           // This will happen when connector's version is ahead of AC
           return (
             <TextInput
-              hasError={hasError}
+              error={hasError}
               value={typeof value === 'string' ? value : ''}
               onChange={onChange}
             />
diff --git a/packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.tsx b/packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.tsx
index 615708281..830d578c3 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.tsx
@@ -69,15 +69,14 @@ function BasicForm({
           <FormField isRequired title="connectors.guide.name" tip={t('connectors.guide.name_tip')}>
             <TextInput
               placeholder={t('connectors.guide.name_placeholder')}
-              hasError={Boolean(errors.name)}
+              error={Boolean(errors.name)}
               {...register('name', { required: true })}
             />
           </FormField>
           <FormField title="connectors.guide.logo" tip={t('connectors.guide.logo_tip')}>
             <TextInput
               placeholder={t('connectors.guide.logo_placeholder')}
-              hasError={Boolean(errors.logo)}
-              errorMessage={errors.logo?.message}
+              error={errors.logo?.message}
               {...register('logo', {
                 validate: (value) =>
                   !value || uriValidator(value) || t('errors.invalid_uri_format'),
@@ -88,8 +87,7 @@ function BasicForm({
             <FormField title="connectors.guide.logo_dark" tip={t('connectors.guide.logo_dark_tip')}>
               <TextInput
                 placeholder={t('connectors.guide.logo_dark_placeholder')}
-                hasError={Boolean(errors.logoDark)}
-                errorMessage={errors.logoDark?.message}
+                error={errors.logoDark?.message}
                 {...register('logoDark', {
                   validate: (value) =>
                     !value || uriValidator(value) || t('errors.invalid_uri_format'),
@@ -129,7 +127,7 @@ function BasicForm({
       >
         <TextInput
           placeholder={t('connectors.guide.target_placeholder')}
-          hasError={Boolean(errors.target)}
+          error={Boolean(errors.target)}
           disabled={!isAllowEditTarget}
           {...register('target', { required: true })}
         />
diff --git a/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx b/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
index 58bfe3497..c9a7229e5 100644
--- a/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
@@ -144,7 +144,7 @@ function BasicUserInfoUpdateModal({ field, value: initialValue, isOpen, onClose
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             placeholder={getInputPlaceholder()}
-            errorMessage={errors[field]?.message}
+            error={errors[field]?.message}
             onKeyDown={(event) => {
               if (event.key === 'Enter') {
                 void onSubmit();
diff --git a/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx b/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
index ab7ab8511..872718136 100644
--- a/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
@@ -106,7 +106,7 @@ function ChangePasswordModal() {
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
         type={showPassword ? 'text' : 'password'}
-        errorMessage={errors.newPassword?.message}
+        error={errors.newPassword?.message}
         suffix={
           <IconButton
             onMouseDown={(event) => {
@@ -125,7 +125,7 @@ function ChangePasswordModal() {
           validate: (value) => value === watch('newPassword') || t('profile.password.do_not_match'),
         })}
         type={showPassword ? 'text' : 'password'}
-        errorMessage={errors.confirmPassword?.message}
+        error={errors.confirmPassword?.message}
         suffix={
           <IconButton
             onMouseDown={(event) => {
diff --git a/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx b/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
index f367d02b3..f9921cae3 100644
--- a/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
@@ -63,7 +63,7 @@ function LinkEmailModal() {
         })}
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
-        errorMessage={errors.email?.message}
+        error={errors.email?.message}
         onKeyDown={(event) => {
           if (event.key === 'Enter') {
             onSubmit();
diff --git a/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx b/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
index cbccf6396..74972f248 100644
--- a/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
@@ -79,7 +79,7 @@ function VerifyPasswordModal() {
         {...register('password', { required: t('profile.password.required') })}
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
-        errorMessage={errors.password?.message}
+        error={errors.password?.message}
         type={showPassword ? 'text' : 'password'}
         suffix={
           <IconButton
diff --git a/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx b/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx
index aa6364549..c83e57c95 100644
--- a/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx
+++ b/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx
@@ -52,12 +52,12 @@ function RoleSettings() {
           learnMoreLink="https://docs.logto.io/docs/recipes/rbac/manage-permissions-and-roles#manage-roles"
         >
           <FormField isRequired title="role_details.field_name">
-            <TextInput {...register('name', { required: true })} hasError={Boolean(errors.name)} />
+            <TextInput {...register('name', { required: true })} error={Boolean(errors.name)} />
           </FormField>
           <FormField isRequired title="role_details.field_description">
             <TextInput
               {...register('description', { required: true })}
-              hasError={Boolean(errors.description)}
+              error={Boolean(errors.description)}
             />
           </FormField>
         </FormCard>
diff --git a/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
index ec67b80ba..f83b132f3 100644
--- a/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
+++ b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
@@ -83,14 +83,14 @@ function CreateRoleForm({ onClose }: Props) {
                   : true,
             })}
             placeholder={t('roles.role_name_placeholder')}
-            errorMessage={errors.name?.message}
+            error={errors.name?.message}
           />
         </FormField>
         <FormField isRequired title="roles.role_description">
           <TextInput
             {...register('description', { required: true })}
             placeholder={t('roles.role_description_placeholder')}
-            hasError={Boolean(errors.description)}
+            error={Boolean(errors.description)}
           />
         </FormField>
         <FormField title="roles.assign_permissions">
diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
index c7e5048c5..cb42768ab 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
@@ -86,8 +86,7 @@ function BrandingForm() {
                 validate: (value) =>
                   !value || uriValidator(value) || t('errors.invalid_uri_format'),
               })}
-              hasError={Boolean(errors.branding?.logoUrl)}
-              errorMessage={errors.branding?.logoUrl?.message}
+              error={errors.branding?.logoUrl?.message}
               placeholder={t('sign_in_exp.branding.logo_image_url_placeholder')}
             />
           </FormField>
@@ -97,8 +96,7 @@ function BrandingForm() {
                 validate: (value) =>
                   !value || uriValidator(value) || t('errors.invalid_uri_format'),
               })}
-              hasError={Boolean(errors.branding?.favicon)}
-              errorMessage={errors.branding?.favicon?.message}
+              error={errors.branding?.favicon?.message}
               placeholder={t('sign_in_exp.branding.favicon')}
             />
           </FormField>
@@ -157,8 +155,7 @@ function BrandingForm() {
                   validate: (value) =>
                     !value || uriValidator(value) || t('errors.invalid_uri_format'),
                 })}
-                hasError={Boolean(errors.branding?.darkLogoUrl)}
-                errorMessage={errors.branding?.darkLogoUrl?.message}
+                error={errors.branding?.darkLogoUrl?.message}
                 placeholder={t('sign_in_exp.branding.dark_logo_image_url_placeholder')}
               />
             </FormField>
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
index 5a0fa2e6f..ac5f25624 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
@@ -24,8 +24,7 @@ function TermsForm() {
           {...register('termsOfUseUrl', {
             validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
           })}
-          hasError={Boolean(errors.termsOfUseUrl)}
-          errorMessage={errors.termsOfUseUrl?.message}
+          error={errors.termsOfUseUrl?.message}
           placeholder={t('sign_in_exp.others.terms_of_use.terms_of_use_placeholder')}
         />
       </FormField>
@@ -34,8 +33,7 @@ function TermsForm() {
           {...register('privacyPolicyUrl', {
             validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
           })}
-          hasError={Boolean(errors.termsOfUseUrl)}
-          errorMessage={errors.termsOfUseUrl?.message}
+          error={errors.termsOfUseUrl?.message}
           placeholder={t('sign_in_exp.others.terms_of_use.privacy_policy_placeholder')}
         />
       </FormField>
diff --git a/packages/console/src/pages/UserDetails/UserSettings/index.tsx b/packages/console/src/pages/UserDetails/UserSettings/index.tsx
index 555fa835e..b332997a0 100644
--- a/packages/console/src/pages/UserDetails/UserSettings/index.tsx
+++ b/packages/console/src/pages/UserDetails/UserSettings/index.tsx
@@ -116,8 +116,7 @@ function UserSettings() {
                 validate: (value) =>
                   !value || uriValidator(value) || t('errors.invalid_uri_format'),
               })}
-              hasError={Boolean(errors.avatar)}
-              errorMessage={errors.avatar?.message}
+              error={errors.avatar?.message}
               placeholder={t('user_details.field_avatar_placeholder')}
             />
           </FormField>
diff --git a/packages/console/src/pages/Users/components/CreateForm/index.tsx b/packages/console/src/pages/Users/components/CreateForm/index.tsx
index 81359facc..efbf376a2 100644
--- a/packages/console/src/pages/Users/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Users/components/CreateForm/index.tsx
@@ -109,16 +109,11 @@ function CreateForm({ onClose, onCreate }: Props) {
                   message: t('errors.username_pattern_error'),
                 },
               })}
-              hasError={Boolean(errors.username)}
-              errorMessage={errors.username?.message}
+              error={errors.username?.message}
             />
           </FormField>
           <FormField title="users.create_form_name">
-            <TextInput
-              {...register('name')}
-              hasError={Boolean(errors.name)}
-              errorMessage={errors.name?.message}
-            />
+            <TextInput {...register('name')} error={errors.name?.message} />
           </FormField>
         </form>
       </ModalLayout>