Page Comparison

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

• OeX HTML implementation - https://github.com/openedx/edx-platform/blob/74e3bb9fd4f331159f442b00cffb5d14da8b6da1/cms/templates/container.html#L89

• API view - https://github.com/openedx/edx-platform/blob/14d2cc8f95f22e2a9f4ab59d3fe5d558af06fdfb/cms/djangoapps/contentstore/views/block.py#L323

Paragon Icons to use:

• EditOutline

• Settings

Https://Paragon-Openedx.Netlify.App/Components/Iconbutton/

Connect Action Alert component to the page (FE)

• Action alert is displayed with text from props at the bottom of the page

• Action alert is hidden automatically when action is done.

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/

• pass to router Course id, sequence Id and next unit ID (as in front-app-learning)

a11y standards according to what already exist in LMS (don’t add any new à11y tools, except tabulation)

https://github.com/raccoongang/frontend-app-learning/blob/oex_proctoring/src/courseware/course/sequence/Sequence.jsx

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:

  • Data Refetch is happening from backend.

  • a user is redirected to the new unit page via ReactRouter.

• 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

https://www.figma.com/file/YeKFwSpyLaJFDs3f3p3TSa/Studio-1%3A1-mock-ups?type=design&node-id=599-23595&mode=design&t=XxoG7OProVd7IIpp-0

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 https://www.figma.com/file/YeKFwSpyLaJFDs3f3p3TSa/Studio-1%3A1-mock-ups?type=design&node-id=599-23764&mode=design&t=7oGdwnA72iv4q3z9-4

• 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 buttonshttps://www.figma.com/file/YeKFwSpyLaJFDs3f3p3TSa/Studio-1%3A1-mock-ups?type=design&node-id=599-23763&mode=design&t=7oGdwnA72iv4q3z9-4

• 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"}

await fetch("https://cms-olive-dev.raccoongang.com/xblock/block-v1:aut+AUT02+2023Q4+type@vertical+block@1336cfd2fb3442c4b88df7636e67b1de", {
    "credentials": "include",
    "headers": {
        "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/118.0",
        "Accept": "application/json, text/javascript, */*; q=0.01",
        "Accept-Language": "en-US,en;q=0.5",
        "Content-Type": "application/json",
        "X-CSRFToken": "Iv3O4wsYTyfgilAi1VGykmQuclJPqjRla3046CmtZVCUMl3uXetBlgL36ZKZ17Di",
        "X-HTTP-Method-Override": "PATCH",
        "X-Requested-With": "XMLHttpRequest",
        "Sec-Fetch-Dest": "empty",
        "Sec-Fetch-Mode": "cors",
        "Sec-Fetch-Site": "same-origin",
        "Pragma": "no-cache",
        "Cache-Control": "no-cache"
    },
    "referrer": "https://cms-olive-dev.raccoongang.com/container/block-v1:aut+AUT02+2023Q4+type@vertical+block@1336cfd2fb3442c4b88df7636e67b1de",
    "body": "{\"publish\":\"make_public\"}",
    "method": "POST",
    "mode": "cors"
});

Current legacy view:

In design publish button should be hidden on 1 and last frames: https://www.figma.com/file/YeKFwSpyLaJFDs3f3p3TSa/Studio-1%3A1-mock-ups?type=design&node-id=599-23731&mode=design&t=rlLJOdFz4MW0mK5Z-4

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 - https://www.figma.com/file/YeKFwSpyLaJFDs3f3p3TSa/Studio-1%3A1-mock-ups?type=design&node-id=599-23597&mode=design&t=g1kfVHPA9Ai3sKTr-4

• 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 https://www.figma.com/file/YeKFwSpyLaJFDs3f3p3TSa/Studio-1%3A1-mock-ups?type=design&node-id=688-21615&mode=design&t=g1kfVHPA9Ai3sKTr-4

• 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 FC-0009 - Modular Learning MVP Implementation (Copy/Paste)

• 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)