[Portal] Fix disabled-user warning and reword account lockout text #5723

ref DEV-3591, DEV-3592

Author: tung2744

portal/src/graphql/adminapi/UserDetailsAccountStatus.tsx

@@ -22,6 +22,7 @@ import OutlinedActionButton from "../../components/common/OutlinedActionButton";
 import PrimaryButton from "../../PrimaryButton";
 import DefaultButton from "../../DefaultButton";
 import TextField from "../../TextField";
+import ExternalLink from "../../ExternalLink";
 import ErrorDialog from "../../error/ErrorDialog";
 import { useSetDisabledStatusMutation } from "./mutations/setDisabledStatusMutation";
 import { useSetAccountValidPeriodMutation } from "./mutations/setAccountValidPeriodMutation";
@@ -829,6 +830,19 @@ const AccountLockoutCell: React.VFC<AccountLockoutCellProps> =
               <FormattedMessage id="UserDetailsAccountStatus.account-lockout.body--unlocked" />
             )}
           </Text>
+          <Text variant="small" style={{ marginTop: "8px", display: "block" }}>
+            <FormattedMessage
+              id="UserDetailsAccountStatus.account-lockout.learn-more"
+              values={{
+                // eslint-disable-next-line react/no-unstable-nested-components
+                docLink: (chunks: React.ReactNode) => (
+                  <ExternalLink href="https://docs.authgear.com/reference/rate-limits/account-lockout">
+                    {chunks}
+                  </ExternalLink>
+                ),
+              }}
+            />
+          </Text>
         </div>
         {lockout.isLocked ? (
           <OutlinedActionButton
@@ -1944,8 +1958,13 @@ export function AccountStatusMessageBar(
     return null;
   }
 
+  // delayedRender={false} avoids FluentUI's DelayedRender wrapper, which
+  // intermittently renders an empty bar when the parent form updates state
+  // during mount (e.g. when navigating back to a disabled user's detail page).
   return (
-    <MessageBar messageBarType={MessageBarType.warning}>{message}</MessageBar>
+    <MessageBar messageBarType={MessageBarType.warning} delayedRender={false}>
+      {message}
+    </MessageBar>
   );
 }
 

portal/src/locale-data/en.json

@@ -404,11 +404,12 @@
   "UserDetailsAccountStatus.remove-user.action.remove-now": "Remove now",
   "UserDetailsAccountStatus.remove-user.action.cancel": "Cancel removal",
   "UserDetailsAccountStatus.account-lockout.title": "Account Lockout",
-  "UserDetailsAccountStatus.account-lockout.body--unlocked": "The user's account is not locked and can log in normally.",
-  "UserDetailsAccountStatus.account-lockout.body--locked-per-user": "The user's account is locked.",
-  "UserDetailsAccountStatus.account-lockout.body--locked-per-ip": "The user's account is locked from specific IP addresses.",
+  "UserDetailsAccountStatus.account-lockout.body--unlocked": "This user is not locked out due to failed sign-in attempts.",
+  "UserDetailsAccountStatus.account-lockout.body--locked-per-user": "This user is locked out due to failed sign-in attempts.",
+  "UserDetailsAccountStatus.account-lockout.body--locked-per-ip": "This user is locked out from specific IP addresses due to failed sign-in attempts.",
   "UserDetailsAccountStatus.account-lockout.locked-until": "Locked until {until}",
   "UserDetailsAccountStatus.account-lockout.locked-ips": "Locked IP Addresses",
+  "UserDetailsAccountStatus.account-lockout.learn-more": "<docLink>Learn more about Account Lockout</docLink>",
   "UserDetailsAccountStatus.account-lockout.action.reset": "Reset account lockout",
   "UserDetailsAccountStatus.account-lockout.confirm-dialog.title": "Reset Account Lockout",
   "UserDetailsAccountStatus.account-lockout.confirm-dialog.description": "Are you sure you want to reset the account lockout for <strong>{username}</strong>? The user will be able to log in again.",