feat: [FC-0044] Unit page - display xblock components by ihor-romaniuk · Pull Request #857 · openedx/frontend-app-authoring

ihor-romaniuk · 2024-02-28T16:13:31Z

Settings

EDX_PLATFORM_REPOSITORY: https://github.com/raccoongang/edx-platform.git
EDX_PLATFORM_VERSION: ruzniaievdm/feat/unit-children

TUTOR_GROVE_WAFFLE_FLAGS:
  - name: contentstore.new_studio_mfe.use_new_unit_page
    everyone: true
  - name: new_core_editors.use_new_problem_editor
    everyone: true
  - name: new_core_editors.use_new_video_editor
    everyone: true
  - name: new_core_editors.use_new_text_editor
    everyone: true

TUTOR_GROVE_MFE_LMS_COMMON_SETTINGS:
  MFE_CONFIG:
    ENABLE_UNIT_PAGE: true
    ENABLE_NEW_EDITOR_PAGES: true

Description

This merge request introduces a new feature that enhances page rendering by incorporating dynamic components. The key components include:

Component Header:

Title: Displays the title of the xblock.
Edit Button: Allows users to edit the xblock.
Dropdown Menu: Provides a dropdown menu with various actions for additional functionalities like copy, duplicate, move, manage access and delete.

Component Content:
As a first iteration, xblock content is displayed as a placeholder block. The next iteration will change the rendering of the content by displaying HTML and resources received from the legacy endpoint (not using an iframe).

Issue: openedx/platform-roadmap#321

Depends on:

feat: [FC-0044] XBlock's children API as DRF openedx-platform#34055

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.
Make sure the course you are viewing is not outdated.
Publish all sections on the Course Outline page.

openedx-webhooks · 2024-02-28T16:13:36Z

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-28T17:17:39Z

Codecov Report

Attention: Patch coverage is 0% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 90.64%. Comparing base (17b1360) to head (c8c8cad).

Files	Patch %	Lines
src/course-unit/header-title/HeaderTitle.jsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #857   +/-   ##
=======================================
  Coverage   90.64%   90.64%           
=======================================
  Files         578      578           
  Lines       10037    10037           
  Branches     2142     2142           
=======================================
  Hits         9098     9098           
  Misses        899      899           
  Partials       40       40

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

open-craft-grove · 2024-02-28T17:22:31Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2024-02-28T17:55:17Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

arbrandes

Just nitpicking, as usual. :) Haven't tested the functionality yet.

arbrandes · 2024-02-28T16:23:06Z

    "@edx/frontend-platform": "7.0.1",
    "@edx/openedx-atlas": "^0.6.0",
    "@openedx/paragon": "^21.5.7",
+    "@edx/react-unit-test-utils": "^1.7.0",


I'd rather we stuck to vanilla react-testling-library, if at all possible. I'm not sure if react-unit-test-utils is maintained anymore. Does it make our lives much easier?

This part of the code has been removed for this MR.
In the future, this functionality will be added to further MPs with appropriate changes.

arbrandes · 2024-02-28T17:04:10Z

+  .unit-iframe-wrapper .alert-danger {
+    margin-bottom: 0;
+  }
+}


Can we rename this file to CourseXBlock.scss, please?

arbrandes · 2024-02-28T18:26:50Z

Got an error in testing in the sandbox.

open-craft-grove · 2024-02-28T18:28:03Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2024-02-28T18:58:37Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2024-02-28T19:54:09Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

KristinAoki · 2024-02-28T17:28:14Z

+const messages = defineMessages({
+  blockAltButtonEdit: {
+    id: 'course-authoring.course-unit.xblock.button.edit.alt',
+    defaultMessage: 'Edit Item',


Suggested change

defaultMessage: 'Edit Item',

defaultMessage: 'Edit',

KristinAoki · 2024-02-28T17:29:22Z

+                alt={intl.formatMessage(messages.blockAltButtonEdit)}
+                iconAs={EditIcon}
+                size="md"
+                onClick={() => {}}


Is this being handled in another PR?

Yes, it will be realized in the future iteration of making Edit button functional

KristinAoki · 2024-02-28T20:46:22Z

+                size="md"
+                onClick={() => {}}
+              />
+              <Dropdown>


The functionality of the dropdown is great, but the text color should not be colored like it is a link. Additionally the hover state for the dropdown item should not be blue. Currently it creates a contrast error which is an accessibility concern.

It causes because to override custom styles which were added to this instance edx-simple-theme/common/_overrides.scss and it affects the all dropdowns on the page. I think, we need to make changes in the _overrides.scss file instead of adding new extra styles of this page.

KristinAoki · 2024-02-28T20:49:08Z

+                  <Dropdown.Item>
+                    {intl.formatMessage(messages.blockLabelButtonMove)}
+                  </Dropdown.Item>
+                  <Dropdown.Item>


Confirming that this functionality will be addressed in another PR

You are right, it will be done in next iterations.

KristinAoki · 2024-02-28T20:50:07Z

+                  <Dropdown.Item onClick={() => unitXBlockActions.handleDuplicate(id)}>
+                    {intl.formatMessage(messages.blockLabelButtonDuplicate)}
+                  </Dropdown.Item>
+                  <Dropdown.Item>


Confirming that this functionality will be addressed in another PR

Requested mocks for Jon Fay for the move modal because there are none in th current Figma

Yes, it will be done in next iterations.

KristinAoki · 2024-02-28T20:51:28Z

+  return (
+    <div ref={courseXBlockElementRef} {...props}>
+      <Card className="mb-1">
+        <Card.Header


Missing drag handle. Is that in scope for this ticket?

No, the Drag&Drop functionality will be done in next iterations.

arbrandes · 2024-02-29T12:50:53Z

This is now working in the sandbox! A couple of initial observations:

When I add a Text, Problem, or Video block, I get taken to a blank page. If I press back, I can see the blocks were added, though.
When I add a Dropdown or ORA block, they appear immediately (as one would expect).
When I add a Problem block, I can't choose between the different types: I just get a blank one.

Let me know if any of these are out of scope to be addressed or implemented here.

open-craft-grove · 2024-02-29T13:54:21Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

KristinAoki · 2024-02-29T14:36:29Z

This is now working in the sandbox! A couple of initial observations:

When I add a Text, Problem, or Video block, I get taken to a blank page. If I press back, I can see the blocks were added, though.

When I add a Dropdown or ORA block, they appear immediately (as one would expect).

When I add a Problem block, I can't choose between the different types: I just get a blank one.

Let me know if any of these are out of scope to be addressed or implemented here.

Text, Video, and Problem blocks automatically open their new editors (removing the uneccessary extra edit click). The new problem editor contains the ability to chose the different problem types.

open-craft-grove · 2024-02-29T16:59:38Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

arbrandes · 2024-02-29T18:12:28Z

@KristinAoki

Text, Video, and Problem blocks automatically open their new editors

That makes sense. Should they be working, then, though?

ihor-romaniuk · 2024-02-29T18:36:29Z

@arbrandes It should work.
I tried to add required settings to display new_core_editors but sandbox deployment failed.
Could you take a look at this problem, please?

TUTOR_GROVE_WAFFLE_FLAGS:
  - name: contentstore.new_studio_mfe.use_new_unit_page
    everyone: true
  - name: new_core_editors.use_new_problem_editor
    everyone: true
  - name: new_core_editors.use_new_video_editor
    everyone: true
  - name: new_core_editors.use_new_text_editor
    everyone: true

open-craft-grove · 2024-03-06T18:50:04Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

ihor-romaniuk · 2024-03-11T08:12:09Z

Hi @arbrandes @KristinAoki
We may have accidentally accepted this feature in another PR #832.
I solved all conflicts and we can merge fixes for this feature.

open-craft-grove · 2024-03-11T11:36:17Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

openedx-webhooks · 2024-03-12T15:48:15Z

@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.

ihor-romaniuk requested a review from a team February 28, 2024 16:13

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

arbrandes self-requested a review February 28, 2024 16:15

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

ihor-romaniuk requested a review from KristinAoki February 28, 2024 16:18

ihor-romaniuk force-pushed the romaniuk/unit-page/display-xblock-components branch 3 times, most recently from ce76609 to e1c89b0 Compare February 28, 2024 17:11

ihor-romaniuk force-pushed the romaniuk/unit-page/display-xblock-components branch from e1c89b0 to 62ae4b5 Compare February 28, 2024 17:30

ihor-romaniuk added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels Feb 28, 2024

arbrandes requested changes Feb 28, 2024

View reviewed changes

KristinAoki reviewed Feb 28, 2024

View reviewed changes

peterkulko mentioned this pull request Feb 29, 2024

feat: [FC-0044] Course unit page - Display sidebar component #832

Merged

ihor-romaniuk force-pushed the romaniuk/unit-page/display-xblock-components branch from 1cb7f79 to 32cfc78 Compare February 29, 2024 15:22

ihor-romaniuk added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels Feb 29, 2024

ihor-romaniuk added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels Mar 1, 2024

GlugovGrGlib added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels Mar 6, 2024

ihor-romaniuk added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels Mar 6, 2024

KristinAoki approved these changes Mar 7, 2024

View reviewed changes

arbrandes approved these changes Mar 8, 2024

View reviewed changes

ihor-romaniuk force-pushed the romaniuk/unit-page/display-xblock-components branch from 32cfc78 to 93e0c27 Compare March 11, 2024 10:49

feat: [FC-0044] Unit page - display xblock components

c8c8cad

ihor-romaniuk force-pushed the romaniuk/unit-page/display-xblock-components branch from 93e0c27 to c8c8cad Compare March 11, 2024 10:51

KristinAoki merged commit bec59e5 into openedx:master Mar 12, 2024

ihor-romaniuk deleted the romaniuk/unit-page/display-xblock-components branch March 13, 2024 11:39

arbrandes mentioned this pull request Mar 19, 2024

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

Closed

1 task

Uh oh!

Conversation

ihor-romaniuk commented Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Depends on:

Design

Testing instructions

Uh oh!

openedx-webhooks commented Feb 28, 2024

Uh oh!

codecov Bot commented Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

open-craft-grove commented Feb 28, 2024

Uh oh!

open-craft-grove commented Feb 28, 2024

Uh oh!

arbrandes left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arbrandes commented Feb 28, 2024

Uh oh!

open-craft-grove commented Feb 28, 2024

Uh oh!

open-craft-grove commented Feb 28, 2024

Uh oh!

open-craft-grove commented Feb 28, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arbrandes commented Feb 29, 2024

Uh oh!

open-craft-grove commented Feb 29, 2024

Uh oh!

KristinAoki commented Feb 29, 2024

Uh oh!

open-craft-grove commented Feb 29, 2024

Uh oh!

arbrandes commented Feb 29, 2024

Uh oh!

ihor-romaniuk commented Feb 29, 2024

Uh oh!

open-craft-grove commented Mar 6, 2024

Uh oh!

ihor-romaniuk commented Mar 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ihor-romaniuk commented Feb 28, 2024 •

edited

Loading

codecov Bot commented Feb 28, 2024 •

edited

Loading

ihor-romaniuk commented Mar 11, 2024 •

edited

Loading