feat: [FC-0044] Unit page - add new component section #828

ihor-romaniuk · 2024-02-08T10:54:04Z

Settings

EDX_PLATFORM_REPOSITORY: https://github.com/openedx/edx-platform.git
EDX_PLATFORM_VERSION: master

TUTOR_GROVE_WAFFLE_FLAGS:
  - name: contentstore.new_studio_mfe.use_new_unit_page
    everyone: true

TUTOR_GROVE_MFE_LMS_COMMON_SETTINGS:
  MFE_CONFIG:
    ENABLE_UNIT_PAGE: true

Description

This pull request introduces a new section that allow adding the addition of various xblock components to the page. The main features of this update include a block with pre-prepared buttons for different types of components.

The primary features were implemented:

New component selection block: Included a dedicated block with pre-prepared buttons for different types of components, making it intuitive for users to choose and add components to their pages.
Components: Introduced the ability to add Discussion/Drag-and-Drop/Problem/Video components to the page.

Issue: openedx/platform-roadmap#321

Developer notes

The first three commits in this pull request are temporary. Once the #809 is merged, the fourth and next commits of this pull request will become the main commits.

Design

https://www.figma.com/file/YeKFwSpyLaJFDs3f3p3TSa/Studio-1%3A1-mock-ups?node-id=599%3A23595

Testing instructions

Run master devstack.
Start platform make dev.up.lms+cms+frontend-app-course-authoring and make checkout on this branch.
Enable new Unit page by adding a waffle flad contentstore.new_studio_mfe.use_new_unit_page in CMS admin panel.
Go to Course Unit page from the Course Outline page.

openedx-webhooks · 2024-02-08T10:54:09Z

Thanks for the pull request, @ihor-romaniuk! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

supporting documentation
Open edX discussion forum threads
timeline information ("this must be merged by XX date", and why that is)
partner information ("this is a course on edx.org")
any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

codecov · 2024-02-08T11:03:10Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (b234344) 89.02% compared to head (48001a4) 89.13%.
Report is 2 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #828      +/-   ##
==========================================
+ Coverage   89.02%   89.13%   +0.11%     
==========================================
  Files         545      548       +3     
  Lines        9585     9647      +62     
  Branches     2054     2067      +13     
==========================================
+ Hits         8533     8599      +66     
+ Misses       1005     1001       -4     
  Partials       47       47

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

open-craft-grove · 2024-02-08T20:19:54Z

Sandbox deployment successful.

Sandbox LMS is available at https://pr-828-ba9a65.sandboxes.opencraft.hosting
Sandbox Studio is available at https://studio.pr-828-ba9a65.sandboxes.opencraft.hosting

Instance Tutor config : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6130867327-tutor-config.yml
Instance Grove config : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6130867327-grove-config.yml
Instance Python requirements : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6130867327-tutor-requirements.txt

KristinAoki · 2024-02-08T20:23:22Z

src/course-unit/add-component/AddComponent.test.jsx

Can you add a test for when adding a component fails?

Tests have been added for all uncovered places.

open-craft-grove · 2024-02-08T20:54:31Z

Sandbox deployment successful.

Sandbox LMS is available at https://pr-828-ba9a65.sandboxes.opencraft.hosting
Sandbox Studio is available at https://studio.pr-828-ba9a65.sandboxes.opencraft.hosting

Instance Tutor config : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6131255999-tutor-config.yml
Instance Grove config : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6131255999-grove-config.yml
Instance Python requirements : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6131255999-tutor-requirements.txt

open-craft-grove · 2024-02-08T21:26:21Z

Sandbox deployment successful.

Sandbox LMS is available at https://pr-828-ba9a65.sandboxes.opencraft.hosting
Sandbox Studio is available at https://studio.pr-828-ba9a65.sandboxes.opencraft.hosting

Instance Tutor config : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6131511023-tutor-config.yml
Instance Grove config : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6131511023-grove-config.yml
Instance Python requirements : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6131511023-tutor-requirements.txt

open-craft-grove · 2024-02-09T15:24:03Z

Sandbox deployment successful.

Sandbox LMS is available at https://pr-828-ba9a65.sandboxes.opencraft.hosting
Sandbox Studio is available at https://studio.pr-828-ba9a65.sandboxes.opencraft.hosting

Instance Tutor config : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6138234772-tutor-config.yml
Instance Grove config : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6138234772-grove-config.yml
Instance Python requirements : https://axim-sandbox-build-logs-4626178240.nyc3.digitaloceanspaces.com/pr-828-ba9a65-51564656-6138234772-tutor-requirements.txt

arbrandes

One optional nit and a couple of questions, but otherwise approved.

Oh, and it Runs In Tutor ™️ ✅ . ;)

arbrandes · 2024-02-09T17:32:11Z

src/course-unit/CourseUnit.test.jsx

@@ -146,4 +158,57 @@ describe('<CourseUnit />', () => {
    expect(titleEditField).not.toBeInTheDocument();
    expect(await findByText(newDisplayName)).toBeInTheDocument();
  });
+
+  it('doesn\'t handle creating xblock and displays an error message', async () => {


Suggested change

it('doesn\'t handle creating xblock and displays an error message', async () => {

it('doesn\'t handle creating video xblock and displays an error message', async () => {

Maybe this was made to be generic intentionally. In which case, ignore the comment.

Yes, you are right. It might be as a generic and can be reverted in next MR.

arbrandes · 2024-02-09T17:34:54Z

src/course-unit/add-component/AddComponent.jsx

+        navigate(`/course/${courseKey}/editor/${type}/${locator}`);
+      });
+      break;
+    default:


[Non-blocking] Do we have a plan to handle "advanced" (i.e, custom) XBlocks?

Yes, these are just the xblocks that do not require a modal to specify the exact block. (see mock-up)

arbrandes · 2024-02-09T17:44:44Z

src/utils.js

+ * @param {string} checkPath - the internal route path that is validated
+ * @returns {string} - the correct internal route path
+ */
+export const createCorrectInternalRoute = (checkPath) => {


[Non-blocking] Thank you for handling PUBLIC_PATH and the trailing slash! 👍🏼

This came up a lot after the react-router-v6 upgrade, during Quince testing. It should be standardized in frontend-platform, eventually.

openedx-webhooks · 2024-02-09T19:27:03Z

@ihor-romaniuk 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

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

ihor-romaniuk requested review from KristinAoki and arbrandes February 8, 2024 10:54

ihor-romaniuk and others added 3 commits February 8, 2024 17:26

feat: Course unit - add new component section

75e1840

feat: Course unit - make Discussion and Drag-and-Drop button functional

5e2d93b

feat: Course unit - make Problem button functional

f07a7a9

ihor-romaniuk force-pushed the romaniuk/feat/unit-page/add-new-component-section branch from 84be573 to a4959b2 Compare February 8, 2024 16:26

arbrandes added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Feb 8, 2024

KristinAoki reviewed Feb 8, 2024

View reviewed changes

feat: Unit page - make Video button functional

48001a4

ihor-romaniuk force-pushed the romaniuk/feat/unit-page/add-new-component-section branch from a4959b2 to 48001a4 Compare February 9, 2024 14:31

KristinAoki approved these changes Feb 9, 2024

View reviewed changes

arbrandes approved these changes Feb 9, 2024

View reviewed changes

KristinAoki merged commit 1555e9f into openedx:master Feb 9, 2024
6 checks passed

ihor-romaniuk deleted the romaniuk/feat/unit-page/add-new-component-section branch February 12, 2024 08:48

arbrandes mentioned this pull request Mar 19, 2024

New Unit Page (Studio MFE conversion) openedx/platform-roadmap#321

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [FC-0044] Unit page - add new component section #828

feat: [FC-0044] Unit page - add new component section #828

ihor-romaniuk commented Feb 8, 2024 •

edited

Loading

openedx-webhooks commented Feb 8, 2024

codecov bot commented Feb 8, 2024 •

edited

Loading

open-craft-grove commented Feb 8, 2024

KristinAoki Feb 8, 2024

ihor-romaniuk Feb 9, 2024

open-craft-grove commented Feb 8, 2024

open-craft-grove commented Feb 8, 2024

open-craft-grove commented Feb 9, 2024

arbrandes left a comment

arbrandes Feb 9, 2024

arbrandes Feb 9, 2024 •

edited

Loading

ihor-romaniuk Feb 12, 2024

arbrandes Feb 9, 2024

KristinAoki Feb 9, 2024

arbrandes Feb 9, 2024

openedx-webhooks commented Feb 9, 2024

	it('doesn\'t handle creating xblock and displays an error message', async () => {
	it('doesn\'t handle creating video xblock and displays an error message', async () => {

feat: [FC-0044] Unit page - add new component section #828

feat: [FC-0044] Unit page - add new component section #828

Conversation

ihor-romaniuk commented Feb 8, 2024 • edited Loading

Description

Developer notes

Design

Testing instructions

openedx-webhooks commented Feb 8, 2024

codecov bot commented Feb 8, 2024 • edited Loading

Codecov Report

open-craft-grove commented Feb 8, 2024

KristinAoki Feb 8, 2024

Choose a reason for hiding this comment

ihor-romaniuk Feb 9, 2024

Choose a reason for hiding this comment

open-craft-grove commented Feb 8, 2024

open-craft-grove commented Feb 8, 2024

open-craft-grove commented Feb 9, 2024

arbrandes left a comment

Choose a reason for hiding this comment

arbrandes Feb 9, 2024

Choose a reason for hiding this comment

arbrandes Feb 9, 2024 • edited Loading

Choose a reason for hiding this comment

ihor-romaniuk Feb 12, 2024

Choose a reason for hiding this comment

arbrandes Feb 9, 2024

Choose a reason for hiding this comment

KristinAoki Feb 9, 2024

Choose a reason for hiding this comment

arbrandes Feb 9, 2024

Choose a reason for hiding this comment

openedx-webhooks commented Feb 9, 2024

ihor-romaniuk commented Feb 8, 2024 •

edited

Loading

codecov bot commented Feb 8, 2024 •

edited

Loading

arbrandes Feb 9, 2024 •

edited

Loading