From 1de53e433f6690f6c611f27fba34d46faf327342 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 29 Oct 2025 16:09:10 -0400 Subject: [PATCH 1/3] feat: put account settings into cards --- src/account-settings/EditableField.jsx | 169 +++++++++--------- src/account-settings/EditableSelectField.jsx | 163 +++++++++-------- src/account-settings/EmailField.jsx | 168 +++++++++-------- .../reset-password/ResetPassword.jsx | 80 +++++---- 4 files changed, 311 insertions(+), 269 deletions(-) diff --git a/src/account-settings/EditableField.jsx b/src/account-settings/EditableField.jsx index 725f7ad2a..fa1bf32fa 100644 --- a/src/account-settings/EditableField.jsx +++ b/src/account-settings/EditableField.jsx @@ -3,10 +3,9 @@ import { connect } from 'react-redux'; import classNames from 'classnames'; import { useIntl } from '@edx/frontend-platform/i18n'; import { - Button, Form, StatefulButton, + ActionRow, Button, Card, Form, StatefulButton, } from '@openedx/paragon'; -import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { EditOutline } from '@openedx/paragon/icons'; import SwitchContent from './SwitchContent'; import messages from './AccountSettingsPage.messages'; @@ -94,83 +93,93 @@ const EditableField = (props) => { }; return ( - -
- - {label} - - {!!helpText && {helpText}} - {error != null && {error}} - {others.children} - -

- { - // Swallow clicks if the state is pending. - // We do this instead of disabling the button to prevent - // it from losing focus (disabled elements cannot have focus). - // Disabling it would causes upstream issues in focus management. - // Swallowing the onSubmit event on the form would be better, but - // we would have to add that logic for every field given our - // current structure of the application. - if (saveState === 'pending') { e.preventDefault(); } - }} - disabledStates={[]} - data-testid="editable-field-save" - /> - -

-
- {['name', 'verified_name'].includes(name) && ( - - )} - - ), - default: ( -
-
-
{label}
- {isEditable ? ( - - ) : null} -
-

{renderValue(value)}

-

{renderConfirmationMessage() || helpText}

-
- ), - }} - /> + + + +
+ + {label} + + {!!helpText && {helpText}} + {error != null && {error}} + {others.children} + +

+ { + // Swallow clicks if the state is pending. + // We do this instead of disabling the button to prevent + // it from losing focus (disabled elements cannot have focus). + // Disabling it would causes upstream issues in focus management. + // Swallowing the onSubmit event on the form would be better, but + // we would have to add that logic for every field given our + // current structure of the application. + if (saveState === 'pending') { e.preventDefault(); } + }} + disabledStates={[]} + data-testid="editable-field-save" + /> + +

+
+ {['name', 'verified_name'].includes(name) && ( + + )} + + + ), + default: ( + <> + {renderValue(value)}

} + actions={isEditable && ( + + + + )} + /> + + +

{renderConfirmationMessage() || helpText}

+ + + + ), + }} + /> + ); }; diff --git a/src/account-settings/EditableSelectField.jsx b/src/account-settings/EditableSelectField.jsx index 1044c272a..f83d0f199 100644 --- a/src/account-settings/EditableSelectField.jsx +++ b/src/account-settings/EditableSelectField.jsx @@ -2,10 +2,9 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { useIntl } from '@edx/frontend-platform/i18n'; import { - Button, Form, StatefulButton, + ActionRow, Button, Card, Form, StatefulButton, } from '@openedx/paragon'; -import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { EditOutline } from '@openedx/paragon/icons'; import SwitchContent from './SwitchContent'; import messages from './AccountSettingsPage.messages'; @@ -122,80 +121,90 @@ const EditableSelectField = (props) => { }); return ( - -
- - {label} - - {options.length > 0 && selectOptions} - - {!!helpText && {helpText}} - {error != null && {error}} - {others.children} - -

- { - // Swallow clicks if the state is pending. - // We do this instead of disabling the button to prevent - // it from losing focus (disabled elements cannot have focus). - // Disabling it would causes upstream issues in focus management. - // Swallowing the onSubmit event on the form would be better, but - // we would have to add that logic for every field given our - // current structure of the application. - if (saveState === 'pending') { e.preventDefault(); } - }} - disabledStates={[]} - /> - -

-
- {['name', 'verified_name'].includes(name) && } - - ), - default: ( -
-
-
{label}
- {isEditable ? ( - - ) : null} -
-

{renderValue(value)}

-

{renderConfirmationMessage() || helpText}

-
- ), - }} - /> + + + +
+ + {label} + + {options.length > 0 && selectOptions} + + {!!helpText && {helpText}} + {error != null && {error}} + {others.children} + +

+ { + // Swallow clicks if the state is pending. + // We do this instead of disabling the button to prevent + // it from losing focus (disabled elements cannot have focus). + // Disabling it would causes upstream issues in focus management. + // Swallowing the onSubmit event on the form would be better, but + // we would have to add that logic for every field given our + // current structure of the application. + if (saveState === 'pending') { e.preventDefault(); } + }} + disabledStates={[]} + /> + +

+
+ {['name', 'verified_name'].includes(name) && } + + + ), + default: ( + <> + {renderValue(value)}

} + actions={isEditable && ( + + + + )} + /> + + +

{renderConfirmationMessage() || helpText}

+ + + + ), + }} + /> + ); }; diff --git a/src/account-settings/EmailField.jsx b/src/account-settings/EmailField.jsx index c2402701c..dbe9fdede 100644 --- a/src/account-settings/EmailField.jsx +++ b/src/account-settings/EmailField.jsx @@ -2,10 +2,11 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import { - Button, StatefulButton, Form, Tooltip, OverlayTrigger, + ActionRow, Button, Card, StatefulButton, Form, Tooltip, OverlayTrigger, } from '@openedx/paragon'; +import { EditOutline } from '@openedx/paragon/icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faExclamationTriangle, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; +import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; import Alert from './Alert'; import SwitchContent from './SwitchContent'; @@ -100,82 +101,95 @@ const EmailField = (props) => { }; return ( - - - {label} - - {!!helpText && {helpText}} - {error != null && {error}} - -

- { - // Swallow clicks if the state is pending. - // We do this instead of disabling the button to prevent - // it from losing focus (disabled elements cannot have focus). - // Disabling it would causes upstream issues in focus management. - // Swallowing the onSubmit event on the form would be better, but - // we would have to add that logic for every field given our - // current structure of the application. - if (saveState === 'pending') { e.preventDefault(); } - }} - disabledStates={[]} - /> - -

- - ), - default: ( -
-
-
{label}
- {isEditable ? ( - - ) : null} -
- - {renderValue()} - + + + +
+ + {label} + + {!!helpText && {helpText}} + {error != null && {error}} + +

+ { + // Swallow clicks if the state is pending. + // We do this instead of disabling the button to prevent + // it from losing focus (disabled elements cannot have focus). + // Disabling it would causes upstream issues in focus management. + // Swallowing the onSubmit event on the form would be better, but + // we would have to add that logic for every field given our + // current structure of the application. + if (saveState === 'pending') { e.preventDefault(); } + }} + disabledStates={[]} + /> + +

+
+ + + ), + default: ( + <> + + {renderValue()} + + )} + > +

{renderValue()}

+ )} - > -

{renderValue()}

- - {renderConfirmationMessage() ||

{helpText}

} -
- ), - }} - /> + actions={isEditable && ( + + + + )} + /> + + +

{renderConfirmationMessage() || helpText}

+ + + + ), + }} + /> + ); }; diff --git a/src/account-settings/reset-password/ResetPassword.jsx b/src/account-settings/reset-password/ResetPassword.jsx index ea0a75f52..255fdac2c 100644 --- a/src/account-settings/reset-password/ResetPassword.jsx +++ b/src/account-settings/reset-password/ResetPassword.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; -import { StatefulButton } from '@openedx/paragon'; +import { Card, StatefulButton } from '@openedx/paragon'; import { resetPassword } from './data/actions'; import messages from './messages'; @@ -13,40 +13,50 @@ const ResetPassword = (props) => { const intl = useIntl(); return ( -
-
- -
-

- { - // Swallow clicks if the state is pending. - // We do this instead of disabling the button to prevent - // it from losing focus (disabled elements cannot have focus). - // Disabling it would causes upstream issues in focus management. - // Swallowing the onSubmit event on the form would be better, but - // we would have to add that logic for every field given our - // current structure of the application. - if (status === 'pending') { - e.preventDefault(); - } - props.resetPassword(email); - }} - disabledStates={[]} - labels={{ - default: intl.formatMessage(messages['account.settings.editable.field.password.reset.button']), - }} - /> -

- {status === 'complete' ? : null} - {status === 'forbidden' ? : null} -
+ + + )} + /> + + +

+ { + // Swallow clicks if the state is pending. + // We do this instead of disabling the button to prevent + // it from losing focus (disabled elements cannot have focus). + // Disabling it would causes upstream issues in focus management. + // Swallowing the onSubmit event on the form would be better, but + // we would have to add that logic for every field given our + // current structure of the application. + if (status === 'pending') { + e.preventDefault(); + } + props.resetPassword(email); + }} + disabledStates={[]} + labels={{ + default: intl.formatMessage(messages['account.settings.editable.field.password.reset.button']), + }} + /> +

+ + {status && ( + + {status === 'complete' ? : null} + {status === 'forbidden' ? : null} + + )} + + ); }; From 9fe53384cdee71979a465ddaf48c9a1b4566ecf7 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 29 Oct 2025 16:20:42 -0400 Subject: [PATCH 2/3] chore: update snapshots --- .../EditableSelectField.test.jsx.snap | 843 +++++++++++------- 1 file changed, 501 insertions(+), 342 deletions(-) diff --git a/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap b/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap index dc26695a0..28853054d 100644 --- a/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap +++ b/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap @@ -2,68 +2,97 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing disabled 1`] = `
-
- Main Label -
-
+
+

+ Test Field +

+
+
+
- - Edit - + +
+
-

- Test Field -

-

- Default Confirmation Message -

+
+

+ Default Confirmation Message +

+
+ @@ -71,205 +100,248 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing exports[`EditableSelectField renders EditableSelectField correctly with editing enabled 1`] = `
-
-
- - - - - - -
-

- - -

- +
`; exports[`EditableSelectField renders EditableSelectField with an error 1`] = `
-
- Main Label -
-
+
+

+ Test Field +

+
+
+
- - Edit - + +
+
-

- Test Field -

-

- Default Confirmation Message -

+
+

+ Default Confirmation Message +

+
+ @@ -277,68 +349,97 @@ exports[`EditableSelectField renders EditableSelectField with an error 1`] = ` exports[`EditableSelectField renders selectOptions when option does not have a group 1`] = `
-
- Main Label -
-
+
+

+ Test Field +

+
+
+
- - Edit - + +
+
-

- Test Field -

-

- Default Confirmation Message -

+
+

+ Default Confirmation Message +

+
+ @@ -346,68 +447,97 @@ exports[`EditableSelectField renders selectOptions when option does not have a g exports[`EditableSelectField renders selectOptions when option has a group 1`] = `
-
- Main Label -
-
+
+

+ Test Field +

+
+
+
- - Edit - + +
+
-

- Test Field -

-

- Default Confirmation Message -

+
+

+ Default Confirmation Message +

+
+ @@ -415,68 +545,97 @@ exports[`EditableSelectField renders selectOptions when option has a group 1`] = exports[`EditableSelectField renders selectOptions with multiple groups 1`] = `
-
- Main Label -
-
+
+

+ Test Field +

+
+
+
- - Edit - + +
+
-

- Test Field -

-

- Default Confirmation Message -

+
+

+ Default Confirmation Message +

+
+ From a50e72acce1a8619400000cb7be2a9915b458a2a Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 29 Oct 2025 16:52:40 -0400 Subject: [PATCH 3/3] fix: reduce padding --- src/account-settings/EditableField.jsx | 12 ++--- src/account-settings/EditableSelectField.jsx | 12 ++--- src/account-settings/EmailField.jsx | 12 ++--- .../reset-password/ResetPassword.jsx | 44 +++++++++---------- 4 files changed, 42 insertions(+), 38 deletions(-) diff --git a/src/account-settings/EditableField.jsx b/src/account-settings/EditableField.jsx index fa1bf32fa..fac1fe85d 100644 --- a/src/account-settings/EditableField.jsx +++ b/src/account-settings/EditableField.jsx @@ -170,11 +170,13 @@ const EditableField = (props) => { )} /> - - -

{renderConfirmationMessage() || helpText}

- - + {(renderConfirmationMessage() || helpText) && ( + + +

{renderConfirmationMessage() || helpText}

+ + + )} ), }} diff --git a/src/account-settings/EditableSelectField.jsx b/src/account-settings/EditableSelectField.jsx index f83d0f199..eb4043288 100644 --- a/src/account-settings/EditableSelectField.jsx +++ b/src/account-settings/EditableSelectField.jsx @@ -195,11 +195,13 @@ const EditableSelectField = (props) => { )} /> - - -

{renderConfirmationMessage() || helpText}

- - + {(renderConfirmationMessage() || helpText) && ( + + +

{renderConfirmationMessage() || helpText}

+ + + )} ), }} diff --git a/src/account-settings/EmailField.jsx b/src/account-settings/EmailField.jsx index dbe9fdede..f0afe907f 100644 --- a/src/account-settings/EmailField.jsx +++ b/src/account-settings/EmailField.jsx @@ -180,11 +180,13 @@ const EmailField = (props) => { )} /> - - -

{renderConfirmationMessage() || helpText}

- - + {(renderConfirmationMessage() || helpText) && ( + + +

{renderConfirmationMessage() || helpText}

+ + + )} ), }} diff --git a/src/account-settings/reset-password/ResetPassword.jsx b/src/account-settings/reset-password/ResetPassword.jsx index 255fdac2c..1cca33804 100644 --- a/src/account-settings/reset-password/ResetPassword.jsx +++ b/src/account-settings/reset-password/ResetPassword.jsx @@ -25,29 +25,27 @@ const ResetPassword = (props) => { /> -

- { - // Swallow clicks if the state is pending. - // We do this instead of disabling the button to prevent - // it from losing focus (disabled elements cannot have focus). - // Disabling it would causes upstream issues in focus management. - // Swallowing the onSubmit event on the form would be better, but - // we would have to add that logic for every field given our - // current structure of the application. - if (status === 'pending') { - e.preventDefault(); - } - props.resetPassword(email); - }} - disabledStates={[]} - labels={{ - default: intl.formatMessage(messages['account.settings.editable.field.password.reset.button']), - }} - /> -

+ { + // Swallow clicks if the state is pending. + // We do this instead of disabling the button to prevent + // it from losing focus (disabled elements cannot have focus). + // Disabling it would causes upstream issues in focus management. + // Swallowing the onSubmit event on the form would be better, but + // we would have to add that logic for every field given our + // current structure of the application. + if (status === 'pending') { + e.preventDefault(); + } + props.resetPassword(email); + }} + disabledStates={[]} + labels={{ + default: intl.formatMessage(messages['account.settings.editable.field.password.reset.button']), + }} + /> {status && (