[9.2] Disables "Update user" button until a change is made (#236005) (#241339)

# Backport

This will backport the following commits from `main` to `9.2`:
- [Disables "Update user" button until a change is made
(#236005)](#236005)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Jeramy
Soucy","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-30T17:12:06Z","message":"Disables
\"Update user\" button until a change is made (#236005)\n\nCloses
#152800\n\n## Summary\n\nThis PR makes 3 changes to the \"edit user\"
(user form) page:\n\n1. Disables the Submit button (\"Update/Create
user\") until a change has\nbeen made to one of the editable fields -
fill name, email, roles\n2. Disables the \"Change password\" button in
the password change modal\nuntil a minimum length value is entered into
the password field\n3. Removes the \"Cancel\" empty button on **edit**
user render in favor of\na \"Back to users\" button. Keeps the
\"Cancel\" button on **create** user\nrender.\n\nReference: [Guidelines
for
Update\nbuttons](https://github.com/elastic/platform-ux-team/issues/178)\n\n###
Screenshots\n<img width=\"1056\" height=\"476\" alt=\"Screenshot
2025-10-27 at 10 25
38\"\nsrc=\"https://github.com/user-attachments/assets/e6a01c45-e574-407a-a05a-efee6f66f618\"\n/>\n\n<img
width=\"1050\" height=\"568\" alt=\"Screenshot 2025-10-27 at 10 25
58\"\nsrc=\"https://github.com/user-attachments/assets/a5835a5c-1ec7-4074-ade0-66f47cdef34d\"\n/>\n\n<img
width=\"1050\" height=\"749\" alt=\"Screenshot 2025-10-27 at 10 26
25\"\nsrc=\"https://github.com/user-attachments/assets/e155a02b-b6cd-4c83-8338-e4acbf098b2e\"\n/>\n\n<img
width=\"1052\" height=\"975\" alt=\"Screenshot 2025-10-27 at 10 26
45\"\nsrc=\"https://github.com/user-attachments/assets/0e7af521-db47-4127-9882-79810952b855\"\n/>\n\n<img
width=\"1051\" height=\"984\" alt=\"Screenshot 2025-10-27 at 10 26
58\"\nsrc=\"https://github.com/user-attachments/assets/fb717b5e-997d-4b5f-aa91-79b781c88a6c\"\n/>\n\n<img
width=\"845\" height=\"710\" alt=\"Screenshot 2025-10-28 at 08 30
21\"\nsrc=\"https://github.com/user-attachments/assets/73bc8aa0-801a-4573-927a-1f983b4fe19e\"\n/>\n\n<img
width=\"415\" height=\"401\" alt=\"Screenshot 2025-10-27 at 15 56
35\"\nsrc=\"https://github.com/user-attachments/assets/60ec5eee-48ea-46b8-800e-fcb68af1954a\"\n/>\n\n<img
width=\"411\" height=\"404\" alt=\"Screenshot 2025-10-27 at 15 56
43\"\nsrc=\"https://github.com/user-attachments/assets/1feeac05-3d4d-482e-bb5a-3b8b774b73fe\"\n/>\n\n<img
width=\"412\" height=\"412\" alt=\"Screenshot 2025-10-27 at 15 57
48\"\nsrc=\"https://github.com/user-attachments/assets/9cb0d7d4-a358-4749-997a-5ea8a4eea665\"\n/>\n\n<img
width=\"412\" height=\"410\" alt=\"Screenshot 2025-10-27 at 15 58
00\"\nsrc=\"https://github.com/user-attachments/assets/d72dee97-1b4b-4407-8d1a-531a7bd0acde\"\n/>\n\n###
Tests\n\n-\nx-pack/platform/plugins/shared/security/public/management/users/edit_user/edit_user_page.test.tsx\n
- Adds check for back button in each render
case\n-\nx-pack/platform/plugins/shared/security/public/management/users/edit_user/user_form.test.tsx\n
- Adds check for disabled submit button until changes are made\n - Fixes
react \"not wrapped in act(...)\"
warning\n-\nx-pack/platform/plugins/shared/security/public/management/users/edit_user/change_password_model.test.tsx\n
- Adds rendering tests\n\n---------\n\nCo-authored-by: kibanamachine
<[email protected]>","sha":"3a42bf330ee54775e3b116d8ba934741a634d93e","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Security","release_note:skip","backport:version","v9.3.0","v8.19.7","v9.1.7","v9.2.1"],"title":"Disables
\"Update user\" button until a change is
made","number":236005,"url":"https://github.com/elastic/kibana/pull/236005","mergeCommit":{"message":"Disables
\"Update user\" button until a change is made (#236005)\n\nCloses
#152800\n\n## Summary\n\nThis PR makes 3 changes to the \"edit user\"
(user form) page:\n\n1. Disables the Submit button (\"Update/Create
user\") until a change has\nbeen made to one of the editable fields -
fill name, email, roles\n2. Disables the \"Change password\" button in
the password change modal\nuntil a minimum length value is entered into
the password field\n3. Removes the \"Cancel\" empty button on **edit**
user render in favor of\na \"Back to users\" button. Keeps the
\"Cancel\" button on **create** user\nrender.\n\nReference: [Guidelines
for
Update\nbuttons](https://github.com/elastic/platform-ux-team/issues/178)\n\n###
Screenshots\n<img width=\"1056\" height=\"476\" alt=\"Screenshot
2025-10-27 at 10 25
38\"\nsrc=\"https://github.com/user-attachments/assets/e6a01c45-e574-407a-a05a-efee6f66f618\"\n/>\n\n<img
width=\"1050\" height=\"568\" alt=\"Screenshot 2025-10-27 at 10 25
58\"\nsrc=\"https://github.com/user-attachments/assets/a5835a5c-1ec7-4074-ade0-66f47cdef34d\"\n/>\n\n<img
width=\"1050\" height=\"749\" alt=\"Screenshot 2025-10-27 at 10 26
25\"\nsrc=\"https://github.com/user-attachments/assets/e155a02b-b6cd-4c83-8338-e4acbf098b2e\"\n/>\n\n<img
width=\"1052\" height=\"975\" alt=\"Screenshot 2025-10-27 at 10 26
45\"\nsrc=\"https://github.com/user-attachments/assets/0e7af521-db47-4127-9882-79810952b855\"\n/>\n\n<img
width=\"1051\" height=\"984\" alt=\"Screenshot 2025-10-27 at 10 26
58\"\nsrc=\"https://github.com/user-attachments/assets/fb717b5e-997d-4b5f-aa91-79b781c88a6c\"\n/>\n\n<img
width=\"845\" height=\"710\" alt=\"Screenshot 2025-10-28 at 08 30
21\"\nsrc=\"https://github.com/user-attachments/assets/73bc8aa0-801a-4573-927a-1f983b4fe19e\"\n/>\n\n<img
width=\"415\" height=\"401\" alt=\"Screenshot 2025-10-27 at 15 56
35\"\nsrc=\"https://github.com/user-attachments/assets/60ec5eee-48ea-46b8-800e-fcb68af1954a\"\n/>\n\n<img
width=\"411\" height=\"404\" alt=\"Screenshot 2025-10-27 at 15 56
43\"\nsrc=\"https://github.com/user-attachments/assets/1feeac05-3d4d-482e-bb5a-3b8b774b73fe\"\n/>\n\n<img
width=\"412\" height=\"412\" alt=\"Screenshot 2025-10-27 at 15 57
48\"\nsrc=\"https://github.com/user-attachments/assets/9cb0d7d4-a358-4749-997a-5ea8a4eea665\"\n/>\n\n<img
width=\"412\" height=\"410\" alt=\"Screenshot 2025-10-27 at 15 58
00\"\nsrc=\"https://github.com/user-attachments/assets/d72dee97-1b4b-4407-8d1a-531a7bd0acde\"\n/>\n\n###
Tests\n\n-\nx-pack/platform/plugins/shared/security/public/management/users/edit_user/edit_user_page.test.tsx\n
- Adds check for back button in each render
case\n-\nx-pack/platform/plugins/shared/security/public/management/users/edit_user/user_form.test.tsx\n
- Adds check for disabled submit button until changes are made\n - Fixes
react \"not wrapped in act(...)\"
warning\n-\nx-pack/platform/plugins/shared/security/public/management/users/edit_user/change_password_model.test.tsx\n
- Adds rendering tests\n\n---------\n\nCo-authored-by: kibanamachine
<[email protected]>","sha":"3a42bf330ee54775e3b116d8ba934741a634d93e"}},"sourceBranch":"main","suggestedTargetBranches":["8.19","9.1","9.2"],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/236005","number":236005,"mergeCommit":{"message":"Disables
\"Update user\" button until a change is made (#236005)\n\nCloses
#152800\n\n## Summary\n\nThis PR makes 3 changes to the \"edit user\"
(user form) page:\n\n1. Disables the Submit button (\"Update/Create
user\") until a change has\nbeen made to one of the editable fields -
fill name, email, roles\n2. Disables the \"Change password\" button in
the password change modal\nuntil a minimum length value is entered into
the password field\n3. Removes the \"Cancel\" empty button on **edit**
user render in favor of\na \"Back to users\" button. Keeps the
\"Cancel\" button on **create** user\nrender.\n\nReference: [Guidelines
for
Update\nbuttons](https://github.com/elastic/platform-ux-team/issues/178)\n\n###
Screenshots\n<img width=\"1056\" height=\"476\" alt=\"Screenshot
2025-10-27 at 10 25
38\"\nsrc=\"https://github.com/user-attachments/assets/e6a01c45-e574-407a-a05a-efee6f66f618\"\n/>\n\n<img
width=\"1050\" height=\"568\" alt=\"Screenshot 2025-10-27 at 10 25
58\"\nsrc=\"https://github.com/user-attachments/assets/a5835a5c-1ec7-4074-ade0-66f47cdef34d\"\n/>\n\n<img
width=\"1050\" height=\"749\" alt=\"Screenshot 2025-10-27 at 10 26
25\"\nsrc=\"https://github.com/user-attachments/assets/e155a02b-b6cd-4c83-8338-e4acbf098b2e\"\n/>\n\n<img
width=\"1052\" height=\"975\" alt=\"Screenshot 2025-10-27 at 10 26
45\"\nsrc=\"https://github.com/user-attachments/assets/0e7af521-db47-4127-9882-79810952b855\"\n/>\n\n<img
width=\"1051\" height=\"984\" alt=\"Screenshot 2025-10-27 at 10 26
58\"\nsrc=\"https://github.com/user-attachments/assets/fb717b5e-997d-4b5f-aa91-79b781c88a6c\"\n/>\n\n<img
width=\"845\" height=\"710\" alt=\"Screenshot 2025-10-28 at 08 30
21\"\nsrc=\"https://github.com/user-attachments/assets/73bc8aa0-801a-4573-927a-1f983b4fe19e\"\n/>\n\n<img
width=\"415\" height=\"401\" alt=\"Screenshot 2025-10-27 at 15 56
35\"\nsrc=\"https://github.com/user-attachments/assets/60ec5eee-48ea-46b8-800e-fcb68af1954a\"\n/>\n\n<img
width=\"411\" height=\"404\" alt=\"Screenshot 2025-10-27 at 15 56
43\"\nsrc=\"https://github.com/user-attachments/assets/1feeac05-3d4d-482e-bb5a-3b8b774b73fe\"\n/>\n\n<img
width=\"412\" height=\"412\" alt=\"Screenshot 2025-10-27 at 15 57
48\"\nsrc=\"https://github.com/user-attachments/assets/9cb0d7d4-a358-4749-997a-5ea8a4eea665\"\n/>\n\n<img
width=\"412\" height=\"410\" alt=\"Screenshot 2025-10-27 at 15 58
00\"\nsrc=\"https://github.com/user-attachments/assets/d72dee97-1b4b-4407-8d1a-531a7bd0acde\"\n/>\n\n###
Tests\n\n-\nx-pack/platform/plugins/shared/security/public/management/users/edit_user/edit_user_page.test.tsx\n
- Adds check for back button in each render
case\n-\nx-pack/platform/plugins/shared/security/public/management/users/edit_user/user_form.test.tsx\n
- Adds check for disabled submit button until changes are made\n - Fixes
react \"not wrapped in act(...)\"
warning\n-\nx-pack/platform/plugins/shared/security/public/management/users/edit_user/change_password_model.test.tsx\n
- Adds rendering tests\n\n---------\n\nCo-authored-by: kibanamachine
<[email protected]>","sha":"3a42bf330ee54775e3b116d8ba934741a634d93e"}},{"branch":"8.19","label":"v8.19.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.1","label":"v9.1.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.2","label":"v9.2.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jeramy Soucy <[email protected]>

Author: kibanamachine

x-pack/platform/plugins/private/translations/translations/de-DE.json

@@ -33128,8 +33128,6 @@
     "xpack.security.management.users.changePasswordForm.currentPasswordLabel": "Aktuelles Passwort",
     "xpack.security.management.users.changePasswordForm.currentPasswordRequiredError": "Geben Sie Ihr aktuelles Passwort ein.",
     "xpack.security.management.users.changePasswordForm.errorMessage": "Das Passwort konnte nicht geändert werden",
-    "xpack.security.management.users.changePasswordForm.passwordHelpText": "Das Passwort muss mindestens 6 Zeichen umfassen.",
-    "xpack.security.management.users.changePasswordForm.passwordInvalidError": "Geben Sie mindestens 6 Zeichen ein.",
     "xpack.security.management.users.changePasswordForm.passwordLabel": "Neues Passwort",
     "xpack.security.management.users.changePasswordForm.passwordRequiredError": "Geben Sie ein neues Passwort ein.",
     "xpack.security.management.users.changePasswordForm.successMessage": "Passwort wurde erfolgreich geändert.",
@@ -33209,7 +33207,6 @@
     "xpack.security.management.users.statusColumnName": "Status",
     "xpack.security.management.users.tableCaption": "Nutzer",
     "xpack.security.management.users.userForm.backToUsersButton": "Zurück zu Nutzern",
-    "xpack.security.management.users.userForm.cancelButton": "Abbrechen",
     "xpack.security.management.users.userForm.changingUserNameAfterCreationDescription": "Der Benutzername kann nach der Kontoerstellung nicht mehr geändert werden.",
     "xpack.security.management.users.userForm.confirmPasswordInvalidError": "Die Passwörter stimmen nicht überein.",
     "xpack.security.management.users.userForm.confirmPasswordLabel": "Passwort bestätigen",

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -33314,8 +33314,6 @@
     "xpack.security.management.users.changePasswordForm.currentPasswordLabel": "Mot de passe actuel",
     "xpack.security.management.users.changePasswordForm.currentPasswordRequiredError": "Entrez votre mot de passe actuel.",
     "xpack.security.management.users.changePasswordForm.errorMessage": "Impossible de modifier le mot de passe",
-    "xpack.security.management.users.changePasswordForm.passwordHelpText": "Le mot de passe doit comporter au moins 6 caractères.",
-    "xpack.security.management.users.changePasswordForm.passwordInvalidError": "Entrez au moins 6 caractères.",
     "xpack.security.management.users.changePasswordForm.passwordLabel": "Nouveau mot de passe",
     "xpack.security.management.users.changePasswordForm.passwordRequiredError": "Entrez un nouveau mot de passe.",
     "xpack.security.management.users.changePasswordForm.successMessage": "Le mot de passe a bien été modifié",
@@ -33395,7 +33393,6 @@
     "xpack.security.management.users.statusColumnName": "Statut",
     "xpack.security.management.users.tableCaption": "Utilisateurs",
     "xpack.security.management.users.userForm.backToUsersButton": "Retour aux utilisateurs",
-    "xpack.security.management.users.userForm.cancelButton": "Annuler",
     "xpack.security.management.users.userForm.changingUserNameAfterCreationDescription": "Le nom de l'utilisateur ne peut pas être modifié après la création du compte.",
     "xpack.security.management.users.userForm.confirmPasswordInvalidError": "Les mots de passe ne correspondent pas.",
     "xpack.security.management.users.userForm.confirmPasswordLabel": "Confirmer le mot de passe",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -33352,8 +33352,6 @@
     "xpack.security.management.users.changePasswordForm.currentPasswordLabel": "現在のパスワード",
     "xpack.security.management.users.changePasswordForm.currentPasswordRequiredError": "現在のパスワードを入力してください。",
     "xpack.security.management.users.changePasswordForm.errorMessage": "パスワードを変更できませんでした",
-    "xpack.security.management.users.changePasswordForm.passwordHelpText": "パスワードは6文字以上でなければなりません。",
-    "xpack.security.management.users.changePasswordForm.passwordInvalidError": "6文字以上で入力してください。",
     "xpack.security.management.users.changePasswordForm.passwordLabel": "新しいパスワード",
     "xpack.security.management.users.changePasswordForm.passwordRequiredError": "新しいパスワードを入力してください。",
     "xpack.security.management.users.changePasswordForm.successMessage": "パスワードが正常に変更されました",
@@ -33431,7 +33429,6 @@
     "xpack.security.management.users.statusColumnName": "ステータス",
     "xpack.security.management.users.tableCaption": "ユーザー",
     "xpack.security.management.users.userForm.backToUsersButton": "ユーザーに戻る",
-    "xpack.security.management.users.userForm.cancelButton": "キャンセル",
     "xpack.security.management.users.userForm.changingUserNameAfterCreationDescription": "アカウントの作成後は、ユーザー名を変更できません。",
     "xpack.security.management.users.userForm.confirmPasswordInvalidError": "パスワードが一致していません。",
     "xpack.security.management.users.userForm.confirmPasswordLabel": "パスワードの確認",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -33337,8 +33337,6 @@
     "xpack.security.management.users.changePasswordForm.currentPasswordLabel": "当前密码",
     "xpack.security.management.users.changePasswordForm.currentPasswordRequiredError": "输入您的当前密码。",
     "xpack.security.management.users.changePasswordForm.errorMessage": "无法更改密码",
-    "xpack.security.management.users.changePasswordForm.passwordHelpText": "密码长度必须至少为 6 个字符。",
-    "xpack.security.management.users.changePasswordForm.passwordInvalidError": "至少输入 6 个字符。",
     "xpack.security.management.users.changePasswordForm.passwordLabel": "新密码",
     "xpack.security.management.users.changePasswordForm.passwordRequiredError": "输入新密码。",
     "xpack.security.management.users.changePasswordForm.successMessage": "已成功更改密码",
@@ -33418,7 +33416,6 @@
     "xpack.security.management.users.statusColumnName": "状态",
     "xpack.security.management.users.tableCaption": "用户",
     "xpack.security.management.users.userForm.backToUsersButton": "返回到用户",
-    "xpack.security.management.users.userForm.cancelButton": "取消",
     "xpack.security.management.users.userForm.changingUserNameAfterCreationDescription": "创建帐户后无法更改用户名。",
     "xpack.security.management.users.userForm.confirmPasswordInvalidError": "密码不匹配。",
     "xpack.security.management.users.userForm.confirmPasswordLabel": "确认密码",

x-pack/platform/plugins/shared/security/public/management/users/edit_user/change_password_modal.tsx

@@ -39,6 +39,8 @@ import { useForm } from '../../../components/use_form';
 import { useInitialFocus } from '../../../components/use_initial_focus';
 import { UserAPIClient } from '../user_api_client';
 
+const MIN_PASSWORD_LENGTH = 6;
+
 export interface ChangePasswordFormValues {
   current_password?: string;
   password: string;
@@ -72,10 +74,13 @@ export const validateChangePasswordForm = (
       'xpack.security.management.users.changePasswordForm.passwordRequiredError',
       { defaultMessage: 'Enter a new password.' }
     );
-  } else if (values.password.length < 6) {
+  } else if (values.password.length < MIN_PASSWORD_LENGTH) {
     errors.password = i18n.translate(
       'xpack.security.management.users.changePasswordForm.passwordInvalidError',
-      { defaultMessage: 'Enter at least 6 characters.' }
+      {
+        defaultMessage: 'Enter at least {minLength} characters.',
+        values: { minLength: MIN_PASSWORD_LENGTH },
+      }
     );
   } else if (values.password !== values.confirm_password) {
     errors.confirm_password = i18n.translate(
@@ -175,6 +180,7 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
             {isSystemUser ? (
               <>
                 <EuiCallOut
+                  announceOnMount
                   title={i18n.translate(
                     'xpack.security.management.users.changePasswordForm.systemUserTitle',
                     { defaultMessage: 'Kibana will lose connection to Elasticsearch' }
@@ -249,7 +255,10 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
               )}
               helpText={i18n.translate(
                 'xpack.security.management.users.changePasswordForm.passwordHelpText',
-                { defaultMessage: 'Password must be at least 6 characters.' }
+                {
+                  defaultMessage: 'Password must be at least {minLength} characters.',
+                  values: { minLength: MIN_PASSWORD_LENGTH },
+                }
               )}
               error={form.errors.password}
               isInvalid={form.touched.password && !!form.errors.password}
@@ -287,6 +296,12 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
       <EuiModalFooter>
         <EuiButtonEmpty
           data-test-subj="changePasswordFormCancelButton"
+          aria-label={i18n.translate(
+            'xpack.security.management.users.changePasswordForm.cancelButtonLabel',
+            {
+              defaultMessage: 'Cancel password change',
+            }
+          )}
           isDisabled={form.isSubmitting}
           onClick={onCancel}
         >
@@ -301,7 +316,13 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
           form={modalFormId}
           data-test-subj="changePasswordFormSubmitButton"
           isLoading={form.isSubmitting}
-          isDisabled={isLoading || (form.isSubmitted && form.isInvalid)}
+          isDisabled={
+            isLoading ||
+            form.isInvalid ||
+            !form.values.password ||
+            !form.values.confirm_password ||
+            (isCurrentUser && !form.values.current_password)
+          }
           color={isSystemUser ? 'danger' : undefined}
           fill
         >