By clicking on the button Problem the full screen editor for Problem is openned
The page is openned natively in course authoring by pushing react router path with params to history
The user can create a new problem in a course following steps in the editor
If user clicks cancel on the first page, no xblock is added to the unit
If user clicks save on the second page, xblock is added to the unit
The behavior for adding a new problem is similar to the flow on legacy unit page
Already implemented editor functionality will be out-of-scope for development, but we should provide analysis for any related bugs.
path for problem editor:
/course/:courseId/editor/:blockType/:blockId
Make Video buttons functional (FE)
By clicking on the button Video a new xblock with type video is created
Upon successful xblock creation user is redirected to full screed editor for Video xblock
The page for editors is openned natively in course authoring by pushing react router path with params to history
Upon clicking on Save, Cancel or close buttons the user is returned to unit page
Already implemented video editor functionality will be out-of-scope for development, but we should provide analysis for any related bugs.
In case of network problems, alert window with error is displayed
Upon clicking on button and until POST request is done “action alert” with text “Adding” is displayed
Video link: course-authoring/course/course-v1:authn+authn+authn/editor/video/block-v1:authn+authn+authn+type@video+block@9ce04f04c7944a7eab9a3091fe7ba315
By clicking on the button Advanced a standard modal window is rendered with radio buttons
Every radio button should represent the valid option from advanced module list (all options are populated on initial page load)
Upon clicking on Select button in modal a new POST request to add xblock with selected type is triggered
List of Unit components is refetched from backend after a new component is created (POST 200)(generic utility should be used)
if number of component bigger than height the scrollbar is displayed
In case of network problems, alert window with error is displayed
Upon clicking on button Select “action alert” with text “Adding” is displayed
It is possible to close modal window by clicking outside of it
Tags in the modal window as provissional support can be ommited as for now
Add Randomized content block modal window (FE)
Upon clicking on Library Content button button a new xblock is created with a POST request
List of Unit components is refetched from backend after a new component is created
Upon successful creation of the xblock a modal window opens automatically
Use select component for dropdowns (confirm with the client that search doesn’t required, screenshot will be send by Peter)
Get the Library field dropdown values from backend endpoint - libraries list (TBD specify a link)
Problem Type - Is hardcoded field with the same type as in legacy
Fields should be validated only for input types - Str and Integer
Tooltips as in Figma are displayed above the label
borders should be added only on top of the window as for editing access modal
Help text should be discussed (currently paragon doesn’t support tooltips in modals) ввечорі обговорити
Z-index for tooltips should be changed
Make Open Response button functional (FE)
By clicking on the button Open Response a standard modal window is rendered with options for xblock templates as radio buttons
Options for ORA should be taken from legacy
By selecting one of the radio buttons and clicking select, ORA xblock with selected template is added to the unit using POST request (/xblock endpoint)
Use “boilerplate” value to uniquely identify options
List of Unit components is refetched from backend after a new component is created (POST 200)(generic utility should be used)
It is possible to close modal window by clicking outside of it
In case of network problems, alert window with error is displayed
Upon clicking on “Select” button and until POST request is done “action alert” with text “Adding” is displayed
Sidebar with unit info (FE)
When user loads a page, user can see a sidebar as on design
The data about unit is taken from the endpoint xblock/container/<unit-id>
When unit is in Unpublished changes state, user should see Draft saved on date and Last published date. (discuss with the client where to show last published)
Icons should be changed according to state from backend as on design in figma
Discard Changes should be added below publish button, as in legacy design. It should be represented as button, but look like a link (not presented in figma)
Publish and Discard changes buttons become hidden if publish / discard action not possible (there is no draft changes in a unit)
Unit location is displayed as in figma with static unit ID.
Static text should be identical to legacy interface
Release or Scheduled parameter should be always displayed.
Unit State changes can be done through the legacy interface.
{"publish":"discard_changes"}
Current legacy view:
In design publish button should be hidden on 1 and last frames:
Make Sidebar buttons functional (FE)
Hide from learners checkbox should act as a functional button, upon clicking on it a request to backend should be sent with visible_to_staff_only metadata field
After clicking on discard changes an alert with Discard Changes and Cancel options is displayed.
If user selects Discard changes an action alert with text “Discarding Changes” is displayed
If user clicks on Publish button an action alert with text “Publishing” is displayed
After clicking “Hide from Learners” button, action alert is displayed with texts “Hiding from Students”/“Making visible to Students”
After unchecking checkbox “Hide from Learners” an alert with options as in legacy is displayed (alert doesn’t appear when you check checkbox.)
Refetch problems after discarding changes.
Refetch unit data after making a POST request to refresh dates.
In case of network problems, alert window with error is displayed
Alert notification about unpublished changes (FE)
If unit is visible to learners, Published at least once and in released course (start date in the past), the static alert notification is displayed above course xblocks (in other cases, alert shouldn’t be displayed)
Alert has static content only -
Icon used from paragon
API endpoint to return components in unit (BE)
Serialize list of all xblocks in the unit
Every xblock should include Name, and block ID, state (published/draft).
Use as reference legacy view for rendering components: reorderable_container_child_preview
Place view in the contentstore app
Display xblock components (FE)
Use paragon Icons for edit buttons
Display list of xblocks in the unit
xblock consists of Xblock Title, Edit button, additional functions dropdown and iframe to display student view.
iframe link - /api/xblock/v2/xblocks/{xblock_id}/view/student_view/
Data about list of xblocks that should be rendered in the unit should be received from the new BE endpoint.
A new utility to refetch list of xblocks that should be rendered is created (it should be used when changing unit state).
By clicking on 3 dots menu a dropdown with the options as on design opens
Dropdown Options and Edit button are not functional yet.
frontend-app-library-authoring has iframes for xblocks implemented, please refer to the implementation there.
Create Modal for editing advanced xblocks (FE)
By clicking on edit button for xblocks:ORA, Drag&Drop, Discussions, Advanced xblocks - a new custom modal window opens displaying Studio Editing interface through iframe .
Iframe loader is enabled
Styles in iframe should be legacy (we don’t need to interact with styles from the course-authoring app)
Iframe link - /api/xblock/v2/xblocks/{block_id}/view/studio_view/
Modal window should be closed after user is clicked on Save or Cancel buttons
Horizontal scroll shouldn’t be displayed
Vertical Scroll in modal should be displayed
This modal window with studio edit iframe should be enabled for all the Advanced Xblocks, ORA, and Drag And Drop
After clicking on Save button in modal window an Action Alert with title “Saving” should be displayed
After saving refetching of all unit content should be triggered
Edit xblock button (FE)
by clicking on edit button:
for video, text, problem blocks, the new full-screen editor opens directly in course-authoring MFE.
For random content xblock - a custom modal window opened (from the task Add Randomized content block modal window (FE)).
Three dots menu functionality for Xblock (FE)
By clicking on three dots menu the menu with items opens (Should exist by this time)
Three dots menu includes functional:
Manage access - opens modal for managing access (reuse from CO)
Duplicate - Send Post request with duplication parameters
Show Action alert “Duplicating”
Delete - Show delete alert and upon clicking Yes, delete this component - Send DELETE request to xblock endpoint
Show Action alert “Deleting”
Move and Copy are not functional
Refetch xblocks in unit after each operation.
Drag And Drop For Xblocks (FE) (CO reuse)
Every component in the list of xblocks can be drag&dropped
The cursor is changed to move icon
By grabbing element the cursor is changed to grab
After dropping a component a POST request with new ordering should be sent to backend
Action alert with title “Saving” is displayed
No refetch from backend is necessary after the operation.
In case backend returns not success, the alert with error message is displayed.
Move Modal window Option (FE)
Modal access changes(FE) reuse CO
Reuse modal window for access management from course outline
It should be used on Unit level (complete copy of the CO functionality).
Also it should be used on the Xblock level by providing xblock ID to POST request.
After saving modal the xblocks in the unit are refetched
'Saving' action alert is displayed during sending POST request to backend
Restriction messages are added under unit title (received from general unit info xblock/container/{unit_ID})
Copy/paste functionality (FE)
Recently developed feature in FC-0009
Consists of Several FE changes in the backbone / JS code, that should be partially re-implemented in React almost from scratch
Display render errors (FE)
In cases 500 error is get from backend, Error Alert is displayed with the following text (from legacy error)
Draft notes
Tech notes
#reactvideoplayer
CLI solution
/api/xblock/v2/xblocks/lb:edX:abc:problem:530066e4-4889-4204-949b-bec033eae967/view/student_view/ Blockstore iframe for each content header in div, content iframe in siblings div
Does it possible to do the same implementation without blockstore?
How to get to unit page: from course outline, via direct link, from LMS (feature flag: - contentstore.new_studio_mfe.use_new_unit_page/ENABLE_NEW_UNIT_PAGE) redirect -
Container handler copypast + refactoring to create backend with unit data? { 'language_code': request.LANGUAGE_CODE, 'context_course': course, # Needed only for display of menus at top of page. 'action': action, 'xblock': xblock, 'xblock_locator': xblock.location, 'unit': unit, 'is_unit_page': is_unit_page, 'subsection': subsection, 'section': section, 'position': index, 'prev_url': prev_url, 'next_url': next_url, 'new_unit_category': 'vertical', 'outline_url': '{url}?format=concise'.format(url=reverse_course_url('course_handler', )), 'ancestor_xblocks': ancestor_xblocks, 'component_templates': component_templates, 'xblock_info': xblock_info, 'draft_preview_link': preview_lms_link, 'published_preview_link': lms_link, 'templates': CONTAINER_TEMPLATES, # Status of the user's clipboard, exactly as would be returned from the "GET clipboard" REST API. 'user_clipboard': user_clipboard, })
Refactor (create a new endpoint) view to return JSON with all units in one subsection xblock/block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions/author_view?position=2
Response consists of list of unit, Block locator for Next and Previous.
Every unit includes Unit Name, Unit type (Text, video, assessment), unit locator ID. (anything else that exist in current context)
