[Backport 2.x] [MD] new UX changes for password fields and update password modal in data source management

CHANGELOG.md

@@ -51,6 +51,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Viz Builder] State validation before dispatching and loading ([#2351](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2351))
 * [Multi DataSource] UX enhacement on index pattern management stack ([#2505]https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2505))
 * [Multi DataSource] UX enhancement on Data source management stack ([#2521](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2521))
+* [Multi DataSource] UX enhancement on Update stored password modal for Data source management stack ([#2532](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2532))
 
 ### 🐛 Bug Fixes
 

src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx

@@ -9,6 +9,7 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiDescribedFormGroup,
+  EuiFieldPassword,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -459,8 +460,9 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         >
           <EuiFlexGroup>
             <EuiFlexItem>
-              <EuiFieldText
+              <EuiFieldPassword
                 placeholder={DATA_SOURCE_PASSWORD_PLACEHOLDER}
+                type={'dual'}
                 value={
                   this.props.existingDataSource.auth.type !== AuthType.NoAuth
                     ? '********'
@@ -470,6 +472,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
                 onChange={this.onChangePassword}
                 onBlur={this.validatePassword}
                 disabled={this.props.existingDataSource.auth.type !== AuthType.NoAuth}
+                data-test-subj="updateDataSourceFormPasswordField"
               />
             </EuiFlexItem>
             {this.props.existingDataSource.auth.type !== AuthType.NoAuth ? (

src/plugins/data_source_management/public/components/edit_data_source/components/update_password_modal/update_password_modal.tsx

@@ -15,9 +15,18 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
+  EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import { NEW_PASSWORD_TEXT, UPDATE_STORED_PASSWORD, USERNAME } from '../../../text_content';
+import {
+  CANCEL_TEXT,
+  CONFIRM_NEW_PASSWORD_TEXT,
+  NEW_PASSWORD_TEXT,
+  PASSWORD_NO_MATCH,
+  UPDATE_STORED_PASSWORD,
+  UPDATE_STORED_PASSWORD_DESCRIPTION,
+  USERNAME,
+} from '../../../text_content';
 
 export interface UpdatePasswordModalProps {
   username: string;
@@ -32,13 +41,34 @@ export const UpdatePasswordModal = ({
 }: UpdatePasswordModalProps) => {
   /* State Variables */
   const [newPassword, setNewPassword] = useState<string>('');
+  const [confirmNewPassword, setConfirmNewPassword] = useState<string>('');
+  const [isNewPasswordValid, setIsNewPasswordValid] = useState<boolean>(true);
+  const [isConfirmNewPasswordValid, setIsConfirmNewPasswordValid] = useState<string[]>([]);
 
   const onClickUpdatePassword = () => {
-    if (!!newPassword) {
+    if (isFormValid()) {
       handleUpdatePassword(newPassword);
     }
   };
 
+  const isFormValid = () => {
+    return !!(newPassword && confirmNewPassword && confirmNewPassword === newPassword);
+  };
+
+  const validateNewPassword = () => {
+    setIsNewPasswordValid(!!newPassword);
+  };
+
+  const validateConfirmNewPassword = () => {
+    const invalidReason: string[] = [];
+    if (!confirmNewPassword) {
+      invalidReason.push('');
+    } else if (confirmNewPassword !== newPassword) {
+      invalidReason.push(PASSWORD_NO_MATCH);
+    }
+    setIsConfirmNewPasswordValid(invalidReason);
+  };
+
   const renderUpdatePasswordModal = () => {
     return (
       <EuiModal onClose={closeUpdatePasswordModal}>
@@ -49,33 +79,59 @@ export const UpdatePasswordModal = ({
         </EuiModalHeader>
 
         <EuiModalBody>
+          <EuiFormRow>
+            <EuiText size="m" style={{ fontWeight: 300 }}>
+              {UPDATE_STORED_PASSWORD_DESCRIPTION}
+            </EuiText>
+          </EuiFormRow>
+          <EuiSpacer size="m" />
+
           <EuiForm data-test-subj="data-source-update-password">
             {/* Username */}
             <EuiFormRow label={USERNAME}>
               <EuiText size="s">{username}</EuiText>
             </EuiFormRow>
-            {/* Password */}
-            <EuiFormRow label={NEW_PASSWORD_TEXT}>
+            {/* updated Password */}
+            <EuiFormRow label={NEW_PASSWORD_TEXT} isInvalid={!isNewPasswordValid}>
               <EuiFieldPassword
+                name="updatedPassword"
                 placeholder={NEW_PASSWORD_TEXT}
                 type={'dual'}
                 value={newPassword}
+                isInvalid={!isNewPasswordValid}
                 onChange={(e) => setNewPassword(e.target.value)}
+                onBlur={validateNewPassword}
+              />
+            </EuiFormRow>
+            {/* Password */}
+            <EuiFormRow
+              label={CONFIRM_NEW_PASSWORD_TEXT}
+              isInvalid={!!isConfirmNewPasswordValid.length}
+              error={isConfirmNewPasswordValid}
+            >
+              <EuiFieldPassword
+                name="confirmUpdatedPassword"
+                placeholder={CONFIRM_NEW_PASSWORD_TEXT}
+                type={'dual'}
+                value={confirmNewPassword}
+                isInvalid={!!isConfirmNewPasswordValid.length}
+                onChange={(e) => setConfirmNewPassword(e.target.value)}
+                onBlur={validateConfirmNewPassword}
               />
             </EuiFormRow>
           </EuiForm>
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={closeUpdatePasswordModal}>Cancel</EuiButtonEmpty>
+          <EuiButtonEmpty onClick={closeUpdatePasswordModal}>{CANCEL_TEXT}</EuiButtonEmpty>
           <EuiButton
             type="submit"
             form="modalFormId"
             onClick={onClickUpdatePassword}
-            fill={!!newPassword}
-            disabled={!newPassword}
+            fill={isFormValid()}
+            disabled={!isFormValid()}
           >
-            Update
+            {UPDATE_STORED_PASSWORD}
           </EuiButton>
         </EuiModalFooter>
       </EuiModal>

src/plugins/data_source_management/public/components/text_content/text_content.ts

@@ -163,7 +163,19 @@ export const DELETE_THIS_DATA_SOURCE = i18n.translate(
 export const NEW_PASSWORD_TEXT = i18n.translate(
   'dataSourcesManagement.editDataSource.newPassword',
   {
-    defaultMessage: 'New password',
+    defaultMessage: 'Updated password',
+  }
+);
+export const CONFIRM_NEW_PASSWORD_TEXT = i18n.translate(
+  'dataSourcesManagement.editDataSource.confirmNewPassword',
+  {
+    defaultMessage: 'Confirm Updated password',
+  }
+);
+export const PASSWORD_NO_MATCH = i18n.translate(
+  'dataSourcesManagement.editDataSource.passwordNoMatch',
+  {
+    defaultMessage: 'Passwords do not match',
   }
 );
 export const UPDATE_STORED_PASSWORD = i18n.translate(
@@ -172,6 +184,13 @@ export const UPDATE_STORED_PASSWORD = i18n.translate(
     defaultMessage: 'Update stored password',
   }
 );
+export const UPDATE_STORED_PASSWORD_DESCRIPTION = i18n.translate(
+  'dataSourcesManagement.editDataSource.updateStoredPasswordDescription',
+  {
+    defaultMessage:
+      'Update credential password to reflect accurate password to gain access to the endpoint.',
+  }
+);
 export const CONNECTION_DETAILS_TITLE = i18n.translate(
   'dataSourcesManagement.editDataSource.connectionDetailsText',
   {