Skip to content

Conversation

hinakhadim
Copy link
Contributor

@hinakhadim hinakhadim commented Mar 4, 2025

Description

This PR introduces a new feature implementing the Multi-Problem Editor UI.

Previously, course authors had to add questions one by one, which was a time-consuming process. Each time an author wanted to add a question, they had to:

  • Click on the question tile (green tile in Studio).
  • Get redirected to the Authoring MFE, which involved significant loading time.
  • Add and save the question.
  • Repeat the entire process for each new question.

With this new UI, the author will only need to click on the problem tile once. A new window will open where they can add multiple questions within the same interface and save them, significantly improving the authoring experience.

  • JIRA Link

  • Figma Link

  • Which edX user roles will this change impact? Common user roles are "Course Author".

What's Next or TODOs:

  • Create messges.js for translation and add FormattedMessage Component
  • Handle State Management properly
  • Add TestCases
  • Remove Unused variables (added to build UI)

How to setup on local devstack

  • Make sure that you have setup edx.org theme for MFEs (If not, steps are mentioned here for setting up)
  • Checkout this PR
  • run npm start

Screenshot

Before

image image

After

Screenshot 2025-03-04 at 12 56 50 PM Screenshot 2025-03-03 at 5 33 35 PM

Other information

Include anything else that will help reviewers and consumers understand the change.

  • Does this change depend on other changes elsewhere? Yes, It might affect Library Components.

@hinakhadim hinakhadim marked this pull request as draft March 4, 2025 08:18
@hinakhadim hinakhadim self-assigned this Mar 4, 2025
};

export const ShuffleCardInternal = ShuffleCard; // For testing only
export default injectIntl(ShuffleCard);
Copy link
Contributor

@bradenmacdonald bradenmacdonald Mar 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you are adding entirely new files, please follow the current best practices:

  • Use TypeScript .TSX instead of .JSX
  • Use TypeScript instead of propTypes
  • Use useIntl instead of injectIntl
    • Just have ShuffleCard, no need for ShuffleCardInternal

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for sharing. I'll update the code.


QuestionItem.propTypes = {
};
QuestionItem.defaultProps = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment here about following newer practices in new files.

Also, defaultProps is deprecated; please avoid it entirely.

@hinakhadim hinakhadim force-pushed the TNL-11898/implement-multi-problem-editor-ui branch from 16bbcf9 to 314c219 Compare March 5, 2025 11:41
@bradenmacdonald
Copy link
Contributor

It looks like this is very similar to #1805 and most of the concerns mentioned in this PR have been resolved, so I'm going to close this. Let me know if we need to re-open.

@bradenmacdonald bradenmacdonald deleted the TNL-11898/implement-multi-problem-editor-ui branch August 26, 2025 18:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants