feat: extend the profile fields with the already existing extended_profile_fields #1167

bra-i-am · 2025-02-17T13:59:51Z

Description

This PR aims to allow the extension of the default profile fields by using the extended_profile_fields feature with a custom form app like the example

Main changes

src/profile/forms/ExtendedProfileFields.jsx: New component to manage the fields added to the extended_profile_field settings attribute (it is only covered checkbox, text and select fields)
src/profile/data/services.js: Add a service to retrieve all the extended profile field properties (these are added with the custom form app and retrieved to the MFE with the mfe_context API)
src/profile/data/selectors.js: Add the fieldValues from the extended_profile account prop to the extended_profile_fields attributes since the data is fetched

How Has This Been Tested?

Init a Sumac environment
Git clone and mount this MFE with tutor mounts add /path/to/cloned/mfe
Git clone this custom form app which counts with checkbox, select and text fields
Mount the custom form app with tutor mounts add lms:/path/to/cloned/custom-form-app:/openedx/extra-deps/custom-form-app and install it using tutor dev exec lms pip install -e ../extra-deps/custom-form-app

Add the following env variables

# lms.env.yml
ADDL_INSTALLED_APPS:
  - "custom_reg_form"
ENABLE_COMBINED_LOGIN_REGISTRATION: true
REGISTRATION_EXTENSION_FORM: "custom_reg_form.forms.ExtraInfoForm"

# cms.env.yml
ENABLE_COMBINED_LOGIN_REGISTRATION: true

Add the following settings to the Site Configurations > local.openedx.io:8000:

{
    "ENABLE_PROFILE_MICROFRONTEND": "true",
    "ENABLE_DYNAMIC_REGISTRATION_FIELDS": "true",
    "MFE_CONFIG": {
        "ENABLE_DYNAMIC_REGISTRATION_FIELDS": "true"
    },
    "REGISTRATION_EXTRA_FIELDS": {
        "employment_situation": "required",
        "data_authorization": "required",
        "allow_newsletter": "required",
        "terms_of_service": "hidden",
        "honor_code": "hidden",
        "full_name": "required",
        "bio": "required",
        "wants_newsletter": "required",
        "favorite_language": "required",
        "password_hint": "required",
        "terms_accepted": "required"
    },
    "extended_profile_fields": [
        "data_authorization",
        "full_name",
        "bio",
        "wants_newsletter",
        "favorite_language",
        "password_hint",
        "terms_accepted"
    ]
}

Run tutor dev restart
When you go to your profile (Profile MFE), you'll interact with the extended fields added through the custom form app

Screenshots/sandbox (optional):

openedx-webhooks · 2025-02-17T13:59:56Z

Thanks for the pull request, @bra-i-am!

This repository is currently maintained by @openedx/2u-infinity.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

e0d · 2025-02-21T19:36:07Z

@bra-i-am looks like there are some failing tests, can you have a look?

Also, I've invited you to the triage team which will allow tests to run automatically. Please accept that invite.

codecov · 2025-02-24T19:54:26Z

Codecov Report

Attention: Patch coverage is 77.51479% with 38 lines in your changes missing coverage. Please review.

Project coverage is 68.85%. Comparing base (37feffc) to head (a1fbd64).

Files with missing lines	Patch %	Lines
src/profile/data/reducers.js	0.00%	9 Missing and 2 partials ⚠️
src/profile/data/services.js	0.00%	11 Missing ⚠️
src/profile/data/selectors.js	52.63%	8 Missing and 1 partial ⚠️
src/profile/forms/ExtendedProfileFields.jsx	92.85%	2 Missing ⚠️
src/profile/forms/elements/TextField.jsx	93.33%	2 Missing ⚠️
src/profile/data/sagas.js	88.88%	0 Missing and 1 partial ⚠️
src/profile/forms/elements/CheckboxField.jsx	95.00%	1 Missing ⚠️
src/profile/forms/elements/SelectField.jsx	95.23%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1167      +/-   ##
==========================================
+ Coverage   66.82%   68.85%   +2.03%     
==========================================
  Files          51       55       +4     
  Lines         856     1021     +165     
  Branches      176      224      +48     
==========================================
+ Hits          572      703     +131     
- Misses        273      304      +31     
- Partials       11       14       +3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

bra-i-am · 2025-02-26T20:09:19Z

(Same as in frontend-app-account comment)

@e0d, I tried to cover all the code lines required to achieve the codecov check; there are some more warnings, but many are in lines so specific that I didn't get them with my changes.

Please let me know if covering the whole code is required or if having the codecov check is enough.

Thank you so much! 🙏

mphilbrick211 · 2025-03-03T16:57:04Z

@openedx/2u-infinity this is ready for you. Thanks!

Copilot

PR Overview

This PR extends profile field functionality by integrating the existing extended_profile_fields into the profile forms and state. Key changes include:

Introducing a new ExtendedProfileFields component to dynamically render additional field types (checkbox, text, select).
Adding corresponding tests and updating services, actions, reducers, selectors, and sagas to handle extended profile fields.
Updating the ProfilePage to integrate and render the extended profile fields.

Reviewed Changes

File	Description
src/profile/forms/ExtendedProfileFields.jsx	New component to render additional profile fields based on type
src/profile/forms/elements/*.test.jsx	New tests covering CheckboxField, TextField, and SelectField components
src/profile/data/sagas.js	Added saga and tests for fetching extended profile fields
src/profile/data/services.js	Updated service to process visibility extended profile fields
src/profile/data/actions.js	New actions for extended profile fields
src/profile/utils.js	Exported utilities used by the new fields component
src/profile/data/reducers.js	Updated reducer to store extended profile fields
src/profile/data/selectors.js	Updated selectors to select extended profile fields from state
src/profile/ProfilePage.jsx	Integrated ExtendedProfileFields into the profile page
src/profile/forms/elements/FormControls.jsx	Minor update handling new prop for controlling visibility select

Copilot reviewed 21 out of 21 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

src/profile/forms/ExtendedProfileFields.jsx:86

Replace 'PropTypes.unknown' with 'PropTypes.any' as 'unknown' is not a standard PropType, ensuring compatibility with React PropTypes.

default: PropTypes.unknown,

Copilot · 2025-03-06T11:34:54Z

src/profile/data/services.js

+  return {
+    ...processedData,
+    visibilityExtendedProfile: visibilityExtendedProfile ? JSON.parse(data['visibility.extended_profile']) : {},


Wrap the JSON.parse call in a try/catch to gracefully handle potential parsing errors when 'data["visibility.extended_profile"]' contains invalid JSON data.

Suggested change

return {

...processedData,

visibilityExtendedProfile: visibilityExtendedProfile ? JSON.parse(data['visibility.extended_profile']) : {},

let parsedVisibilityExtendedProfile = {};

if (visibilityExtendedProfile) {

try {

parsedVisibilityExtendedProfile = JSON.parse(data['visibility.extended_profile']);

} catch (error) {

logError(error, 'Failed to parse visibility.extended_profile JSON');

}

}

return {

...processedData,

visibilityExtendedProfile: parsedVisibilityExtendedProfile,

Copilot · 2025-03-06T11:34:55Z

src/profile/data/selectors.js

@@ -31,10 +32,17 @@ export const editableFormModeSelector = createSelector(
  formIdSelector,
  currentlyEditingFieldSelector,
  (account, isAuthenticatedUserProfile, certificates, formId, currentlyEditingField) => {
+    const [parentPropKey, fieldName] = formId.split('/');


Add a conditional check to ensure that formId contains '/' before splitting to prevent runtime errors when the expected format is not met.

Suggested change

const [parentPropKey, fieldName] = formId.split('/');

let parentPropKey, fieldName;

if (formId.includes('/')) {

[parentPropKey, fieldName] = formId.split('/');

} else {

parentPropKey = formId;

fieldName = '';

}

bra-i-am · 2025-04-29T19:53:23Z

(Just a copy & paste from the comment at frontend-app-account :D ✨ )

@awais-ansari @sundasnoreen12, I hope you are doing great!

I've been considering that this merge request might encounter issues during the merge due to the incorporation of a new feature. However, I also believe it would serve as a good recovery from the features lost in the transition to the MFEs (I planted this solution motivated by https://discuss.openedx.org/t/custom-fields-in-profile-form/6116/2, indeed).

In any case, I'm waiting for your comments to plan how I could proceed. Beforehand, thank you so much for your time!

igobranco · 2025-05-07T18:05:29Z

Thanks @bra-i-am! We really need this for our NAU installation.

…management

…ofile components

…ctors and forms

…onent

…age management

…etchThirdPartyAuthContext

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Feb 17, 2025

bra-i-am force-pushed the bc/add-extended-profile-fields branch from 5503f7a to 177091e Compare February 17, 2025 16:27

bra-i-am changed the base branch from open-release/redwood.master to master February 17, 2025 16:28

bra-i-am marked this pull request as ready for review February 17, 2025 19:30

bra-i-am requested a review from a team as a code owner February 17, 2025 19:30

bra-i-am changed the title ~~[WIP] feat: allow to extend the profile fields with the extended_profile_fields~~ feat: extend the profile fields with the already existing extended_profile_fields Feb 17, 2025

mphilbrick211 added the needs test run Author's first PR to this repository, awaiting test authorization from Axim label Feb 19, 2025

e0d removed the needs test run Author's first PR to this repository, awaiting test authorization from Axim label Feb 21, 2025

mphilbrick211 moved this from Waiting on Author to Ready for Review in Contributions Mar 3, 2025

MaxFrank13 removed this from Aperture-Maintained Mar 4, 2025

awais-ansari requested review from sundasnoreen12, awais-ansari and Copilot March 6, 2025 11:31

Copilot AI reviewed Mar 6, 2025

View reviewed changes

openedx-webhooks added this to Aperture-Maintained Mar 6, 2025

deborahgu removed this from Aperture-Maintained Mar 11, 2025

openedx-webhooks added this to Aperture-Maintained Apr 9, 2025

bra-i-am force-pushed the bc/add-extended-profile-fields branch from dd27152 to eb5b126 Compare April 9, 2025 20:09

bra-i-am added 5 commits May 9, 2025 14:18

feat: add extended profile fields functionality to profile page

3eee945

feat: add visibility settings for extended profile fields in profile …

022034c

…management

feat: add extended profile fields handling and visibility logic in pr…

884b2c2

…ofile components

feat: enhance visibility handling for extended profile fields in sele…

29b9673

…ctors and forms

fix: solve visibility issues when user requiresParentalConsent

70c93e3

bra-i-am added 9 commits May 9, 2025 14:19

fix: solve tests & snapshot issues

695ac7e

test: improve coverage

4f0eb8a

test: improve coverage

932049f

fix: reorder entries in package-lock.json for consistency

f6efefc

fix: adjust formatting and add missing prop types in ProfilePage comp…

af575d7

…onent

fix: take the fields with the proper restrictions

e4229aa

fix: enhance error handling and validation in profile form fields

c2b8b27

fix: update error handling and restrictions in TextField component tests

0fb7996

fix: refactor extended profile fields handling and improve error mess…

e394cb2

…age management

bra-i-am force-pushed the bc/add-extended-profile-fields branch from 598e3c7 to e394cb2 Compare May 9, 2025 20:06

deborahgu removed this from Aperture-Maintained May 9, 2025

fix: update saga tests to use fetchExtendedProfileFields instead of f…

db7bb98

…etchThirdPartyAuthContext

openedx-webhooks added this to Aperture-Maintained May 9, 2025

fix: update options format in SelectField tests for consistency

a1fbd64

deborahgu removed this from Aperture-Maintained May 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: extend the profile fields with the already existing extended_profile_fields #1167

feat: extend the profile fields with the already existing extended_profile_fields #1167

Uh oh!

bra-i-am commented Feb 17, 2025 •

edited

Loading

Uh oh!

openedx-webhooks commented Feb 17, 2025 •

edited

Loading

Uh oh!

e0d commented Feb 21, 2025

Uh oh!

codecov bot commented Feb 24, 2025 •

edited

Loading

Uh oh!

bra-i-am commented Feb 26, 2025

Uh oh!

mphilbrick211 commented Mar 3, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 6, 2025

Uh oh!

Copilot AI Mar 6, 2025

Uh oh!

bra-i-am commented Apr 29, 2025

Uh oh!

igobranco commented May 7, 2025

Uh oh!

Uh oh!

-  return {
-    ...processedData,
-    visibilityExtendedProfile: visibilityExtendedProfile ? JSON.parse(data['visibility.extended_profile']) : {},
+  let parsedVisibilityExtendedProfile = {};
+  if (visibilityExtendedProfile) {
+    try {
+      parsedVisibilityExtendedProfile = JSON.parse(data['visibility.extended_profile']);
+    } catch (error) {
+      logError(error, 'Failed to parse visibility.extended_profile JSON');
+    }
+  }
+  return {
+    ...processedData,
+    visibilityExtendedProfile: parsedVisibilityExtendedProfile,

-    const [parentPropKey, fieldName] = formId.split('/');
+    let parentPropKey, fieldName;
+    if (formId.includes('/')) {
+      [parentPropKey, fieldName] = formId.split('/');
+    } else {
+      parentPropKey = formId;
+      fieldName = '';
+    }

feat: extend the profile fields with the already existing extended_profile_fields #1167

Are you sure you want to change the base?

feat: extend the profile fields with the already existing extended_profile_fields #1167

Uh oh!

Conversation

bra-i-am commented Feb 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Main changes

How Has This Been Tested?

Screenshots/sandbox (optional):

Uh oh!

openedx-webhooks commented Feb 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

e0d commented Feb 21, 2025

Uh oh!

codecov bot commented Feb 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

bra-i-am commented Feb 26, 2025

Uh oh!

mphilbrick211 commented Mar 3, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

PR Overview

Reviewed Changes

Uh oh!

Copilot AI Mar 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2025

Choose a reason for hiding this comment

Uh oh!

bra-i-am commented Apr 29, 2025

Uh oh!

igobranco commented May 7, 2025

Uh oh!

Uh oh!

bra-i-am commented Feb 17, 2025 •

edited

Loading

openedx-webhooks commented Feb 17, 2025 •

edited

Loading

codecov bot commented Feb 24, 2025 •

edited

Loading