| | | |
|---|
Unit page | Refactor Unit page view as DRF (BE) | A new DRF view and data serializer are created The common code is reused special attention for `component_templates` population For most of the fields we can skip additional serialization and provide them in a DictField type In template there might be some additional python utils that should be transfered to serializer (e.g. xblock_studio_url)
| current view: https://github.com/openedx/edx-platform/blob/14d2cc8f95f22e2a9f4ab59d3fe5d558af06fdfb/cms/djangoapps/contentstore/views/component.py#L205 |
Create Unit Page Header with Unit Name, BreadCrumbs and unit buttons (FE) | Use vertical block endpoint to get unit data: xblock/container/block-v1:edX+DemoX+
Demo_Course+type@vertical+block
@vertical_0270f6de40fc All components marked in orange are displayed as readonly There’s a unique ID for each unit page, top menu:
breadcrumbs - in the form of <Section Name> > <Subsection Name> Use paragon Select Menu (Linked variant) as a base of a custom breadcrumbs component Display editing Icon Button and Settings Icon Button after Unit Name Use Paragon Icons for edit and settings icons Buttons view live and preview are Outline Primary
| Paragon Icons to use: Https://Paragon-Openedx.Netlify.App/Components/Iconbutton/ |
Connect Action Alert component to the page (FE) | | |
Section and Subsection dropdown (FE) | Populate breadcrumbs dropdown with ancestors data from the view user is redirected to unit if user clicks on the unit user is redirected to course outline with specific marker (tag) to scroll down on the page to subsection, if user clicks on subsection
| |
Create units switch widget with create new unit button (FE) | Use paragon Icons for Unit type buttons Use: api/courseware/sequence/ Use data structure from endpoint Every button (except new unit) has a unique link recieved from backend endpoint Use paragon icon as in frontend-app-learning Use next and previous parameters from backend No completions implementation in studio; active button is primary not active butons - Outline primary (on hover became primary) New Unit button is always disabled If previous or next parameters are empty, Next or Previous button should be disabled + icon is used from paragon library Tabulation should work as in frontend-app-learning (a11y) On unit hover HTML tooltip with unit Title is displayed In case of network problems, alert window with error is displayed
| api/courseware/sequence/ a11y standards according to what already exist in LMS (don’t add any new à11y tools, except tabulation) frontend-app-learning/src/courseware/course/sequence/Sequence.jsx at oex_proctoring · raccoongang/frontend-app-learning |
New unit button (FE) | Upon clicking on New Unit button a request to create a new unit is triggered Params for new unit creation: display_name “Unit”, type: “Vertical”, parent_locator: “{}“ After a new unit has successfully created: If error happened during creation, alert window with error is displayed In case of network problems, alert window with error is displayed Upon clicking on button “action alert” with text Adding is displayed
| Create New unit request example: fetch("https://cms-studio-mfe-stage.raccoongang.com/xblock/", {
"referrer": "https://cms-studio-mfe-stage.raccoongang.com/container/block-v1:test2+1+2+type@vertical+block@33e2ed48e3dc4275bccee23ef80bb45a?action=new",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": "{\"parent_locator\":\"block-v1:test2+1+2+type@sequential+block@def5fd3cebfb49869b78debb9cbcce0d\",\"category\":\"vertical\",\"display_name\":\"Unit\"}",
"method": "POST",
"mode": "cors",
"credentials": "include"
}); |
Add new component section (FE) | On the bottom of the page up to 8 buttons are displayed Advanced button is hidden if course has no items in advanced module list (Get from backend response when loading unit / course info) Use Paragon icons for buttons if exist in paragon library, else should be exported from figma (in case icons look different, consult with the client) buttons are not functional Section is called “Add new component” All button names as in figma design tabulation selector should work on buttons Button variant primary outline, with custom border radius and box shadow as in figma On hover button bg become primary (similar to outline primary button) components should be placed fluidly as on gif
| Studio 1:1 mock ups |
Make Discussion and Drag and drop functional (FE) | Upon clicking on Drag and drop button a new POST request to add discussion type is triggered Upon clicking on Discussions button a new POST request to add discussion type is triggered List of components is refetched from backend after a new component is created (generic) In case of network problems, alert window with error is displayed Upon clicking on button “action alert” with text “Adding” is displayed
| Create new component example fetch("https://cms-studio-mfe-stage.raccoongang.com/xblock/", {
"referrer": "https://cms-studio-mfe-stage.raccoongang.com/container/block-v1:test2+1+2+type@vertical+block@69353af21a1940db96a1bb65f78ef285",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": "{\"boilerplate\":\"iframe.yaml\",\"category\":\"html\",\"parent_locator\":\"block-v1:test2+1+2+type@vertical+block@69353af21a1940db96a1bb65f78ef285\"}",
"method": "POST",
"mode": "cors",
"credentials": "include"
}); |
Make Problem button functional (FE) | 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 |
Make Text button functional (FE) | By clicking on the button Text a standard modal window is rendered with options for xblock templates as radio buttons Studio 1:1 mock ups By selecting one of the radio buttons and clicking select, html/text xblock with selected template is added to the unit using POST request Use “boilerplate” value to uniquelly identify options Upon successful xblock creation user is redirected to full screen editor Text xblock The page for editors is openned natively in course authoring by pushing react router path with params to history It is possible to close modal window by clicking outside of it Already implemented 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
| example for text component: await fetch("https://cms-olive-dev.raccoongang.com/xblock/", {
"credentials": "include",
"referrer": "https://cms-olive-dev.raccoongang.com/container/block-v1:authn+authn+authn+type@vertical+block@f19db174535a4be9b7ff95eba210d5b6",
"body": "{\"category\":\"html\",\"parent_locator\":\"block-v1:authn+authn+authn+type@vertical+block@f19db174535a4be9b7ff95eba210d5b6\"}",
"method": "POST",
"mode": "cors"
}); |
Add Advanced component list modal window (FE) | By clicking on the button Advanced a standard modal window is rendered with radio buttonsStudio 1:1 mock ups 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
| |
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: Studio 1:1 mock ups |
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 - Studio 1:1 mock ups 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 Studio 1:1 mock ups 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) | | |
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 Delete - Show delete alert and upon clicking Yes, delete this component - Send DELETE request to xblock endpoint
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) | | |
Display render errors (FE) | In cases 500 error is get from backend, Error Alert is displayed with the following text (from legacy error) | |
