Page Comparison

Course Outline [CO]

Top level page (BE)

• New REST endpoint to get initial data for the page using legacy functionality by URI https://cms-studio-mfe-dev.raccoongang.com/course/course-v1:2u_rerun+1+123, def course_index - contains all necessary data to render whole page

• Main Serializer with methods, which use ready utils to get appropriate data (course_structure, initial_state, lms_link etc.)

Volodymyr Bergman

see: Status Bar API (BE)

we need to investigate two endpoint when user enter to the page, and create ticket for creatingcourse/{course_id}

we need to figure out if we're going to rewrite them or union with with the previous one endpoint course_index

http://localhost:18010/api/courses/v1/quality/course-v1:edx+10101+1012/?exclude_graded=true&all=true

http://localhost:18010/api/courses/v1/validation/course-v1:edx+10101+1012/?graded_only=true&all=true

Because it give us additional variables for status bar

Delivered

https://github.com/openedx/edx-platform/pull/32856

Top level page (FE)

• Create a new page with path /course/:course_id/outline

• Display Sections A,B,D from the screen

• Section B:

  • use generic component for A + B

  • “New Section“ - not functional

  • “Reindex“ - not functional

  • “Collapse all sections“ - not functional

  • “View link“ - not functional

  • all action buttons must have appropriate tooltip (see legacy)

• Section D (aside)

  • extract aside info item into generic component

  • use global page state (docs links)

    • Links for the buttons are coming from the backend

  • fully functional

• All texts are wrapped to translations

• Internet connection issues alert

Delivered

Status Bar (FE)

• start date

• pacing type

• checklists

• course start date widget

  • uses global page state data

  • empty state

  • set state

  • on click navigates to Settings>>S&D

    • how do we positioning on the Schedule section?

    • we will add anchors attribute to S&D page

• course pacing type widget

  • uses global page state data

  • static (no actions)

• checklist widget

  • uses global page state data

  • on click navigates to the Checklists page

Current implementation

sfe stands for studiofrontend

• settings.STUDIO_FRONTEND_CONTAINER_URL

• see studiofrontend lib injection details

• see studio-frontend.CourseOutlineStatus for current React implementation details

Assumptions

• use Paragon Stack for the main layout

• required additional info: Volodymyr Bergman

  Status
  colour Green title resolved

  • which features are optional (can be disabled)

  • and how (which flags/settings)

Delivered

Status Bar: Course Highlight Emails (FE)

• course highlight emails

  • depends on: course.highlights_enabled_for_messaging

  • uses global page state data

    • activated

    • not activated

    • docs link

  • UI: docs navigation button

  • UI: activation button (relation: backend handler)

  • UI: modal confirmation dialog UI component

    • on YES click - POST API request

    • on NO click - modal closes

Assumptions

• course highlight emails

  • activation API: <CMS>/xblock/block-v1:edx+10101+1012+type@course+block@course

  • Code Block
    { "publish": "republish", "metadata": { "highlights_enabled_for_messaging": true } }

Porting: Video Sharing - blocker -

Status
colour Red title TBD

(legacy backport)

• backport fully featured “Video Sharing” feature to 2u-master branch

Status Bar: Video Sharing (FE) -

Status
colour Red title TBD

• depends on: waffle video_config.public_video_share

  • openedx.core.djangoapps.video_config.toggles.PUBLIC_VIDEO_SHARE

• optional feature (can be deactivated)

• how initial state is fulfilled?

  • there is no API.

  • extend initial data with video_sharing_options: course.video_sharing_options

• dropdown selector for sharing mode update

  • on option change POST API request is sent

    • there is no API Volodymyr Bergman clarify

    • create API view which updates course.video_sharing_options course field

• docs URL: help-tokens "social_sharing"

• course video sharing API handler + data payload

• Official docs

• backend is available in edx-platform#master

• BE app: openedx/core/djangoapps/video_config

• widget template (legacy, for reference): cms/templates/js/course-video-sharing-enable.underscore

  • video_sharing_doc_url

  • course.video_sharing_options

    • Code Block
      COURSE_VIDEO_SHARING_PER_VIDEO = 'per-video' COURSE_VIDEO_SHARING_ALL_VIDEOS = 'all-on' COURSE_VIDEO_SHARING_NONE = 'all-off'

BE utils:

• get_course_video_sharing_override

• is_public_sharing_enabled

• get_public_video_url

Status Bar: Video Sharing (BE) -

Status
colour Red title TBD

• (if needed) add additional data to course index data

  • extend initial data with video_sharing_options: course.video_sharing_options

  • depends on: waffle video_config.public_video_share

    • openedx.core.djangoapps.video_config.toggles.PUBLIC_VIDEO_SHARE

Assumptions

• there is already implemented API endpoint for course.video_sharing_options value update

Status Bar API (BE)

• use existing

• we use already present API handlers:

  • Course validation metrics API (see below)

    • fetch course validation data (API GET)

    • uses name='course_validation' modern API

  • Course quality metrics API (see below)

    • depends on: studio.enable_checklists_quality waffle.flag

    • fetch course quality data (API GET)

    • uses name='course_quality' modern API

Course validation metrics API

• upstream PR

• GET details

  Code Block

  # URL <CMS>/api/courses/v1/validation/course-v1:RG+DEV+TL0/?graded_only=true&all=true # params - graded_only: true - all: true # response { "is_self_paced": false, "dates": { "has_start_date": false, "has_end_date": false }, "assignments": { "total_number": 0, "total_visible": 0, "assignments_with_dates_before_start": [], "assignments_with_dates_after_end": [], "assignments_with_ora_dates_before_start": [], "assignments_with_ora_dates_after_end": [] }, "grades": { "has_grading_policy": false, "sum_of_weights": 1.0 }, "certificates": { "is_activated": false, "has_certificate": false, "is_enabled": true }, "updates": { "has_update": false }, "proctoring": { "needs_proctoring_escalation_email": false, "has_proctoring_escalation_email": false } }

Course quality metrics API

• upstream PR

• GET details

  Code Block

  # URL <CMS>/api/courses/v1/quality/course-v1:RG+DEV+TL0/?exclude_graded=true&all=true # params - exclude_graded: true - all: true # response { "is_self_paced": false, "sections": { "total_number": 0, "total_visible": 0, "number_with_highlights": 0, "highlights_active_for_course": false, "highlights_enabled": true }, "subsections": { "total_visible": 0, "num_with_one_block_type": 0, "num_block_types": { "min": null, "max": null, "mean": null, "median": null, "mode": null } }, "units": { "total_visible": 0, "num_blocks": { "min": null, "max": null, "mean": null, "median": null, "mode": null } }, "videos": { "total_number": 0, "num_mobile_encoded": 0, "num_with_val_id": 0, "durations": { "min": null, "max": null, "mean": null, "median": null, "mode": null } } }

Tool Bar: New Section (FE)

AC

• New Section button click allows a new course section creation;

• created section is placed on the last position;

Tech

• button component should be already implemented

• on New Section click:

  • create section (API POST)

  • on success

    • refetch course outline data (API GET)

• tooltip: Click to add a new section

• POST details

  Code Block
  # URL <CMS>/xblock/ # payload { "parent_locator":"block-v1:RG+DEV+TL0+type@course+block@course", "category":"chapter", "display_name":"Section" } # response { courseKey: "course-v1:RG+DEV+TL0" locator: "block-v1:RG+DEV+TL0+type@chapter+block@c11e7df2bd8449fa8c7782ef46ba77df" }

• GET details

  Code Block

  # URL <CMS>/xblock/outline/block-v1:RG+DEV+TL0+type@course+block@course # response { "id": "block-v1:RG+DEV+TL0+type@course+block@course", "display_name": "Course Outline", "category": "course", "has_children": true, "unit_level_discussions": false, "edited_on": "Jul 29, 2023 at 15:51 UTC", "published": true, "published_on": "Jul 29, 2023 at 15:51 UTC", "studio_url": "/course/course-v1:RG+DEV+TL0", "released_to_students": false, "release_date": null, "visibility_state": null, "has_explicit_staff_lock": false, "start": "2030-01-01T00:00:00Z", "graded": false, "due_date": "", "due": null, "relative_weeks_due": null, "format": null, "course_graders": [ "Homework", "Lab", "Midterm Exam", "Final Exam" ], "has_changes": false, "actions": { "deletable": true, "draggable": true, "childAddable": true, "duplicable": true }, "explanatory_message": null, "group_access": {}, "user_partitions": [ { "id": 50, "name": "Enrollment Track Groups", "scheme": "enrollment_track", "groups": [ { "id": 1, "name": "Audit", "selected": false, "deleted": false } ] } ], "show_correctness": "always", "highlights_enabled_for_messaging": false, "highlights_enabled": true, "highlights_preview_only": false, "highlights_doc_url": "http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-olive.master/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages", "enable_proctored_exams": false, "create_zendesk_tickets": true, "enable_timed_exams": true, "child_info": { "category": "chapter", "display_name": "Section", "children": [ { "id": "block-v1:RG+DEV+TL0+type@chapter+block@c11e7df2bd8449fa8c7782ef46ba77df", "display_name": "Section", "category": "chapter", "has_children": true, "edited_on": "Jul 29, 2023 at 15:51 UTC", "published": true, "published_on": "Jul 29, 2023 at 15:51 UTC", "studio_url": "/course/course-v1:RG+DEV+TL0?show=block-v1%3ARG%2BDEV%2BTL0%2Btype%40chapter%2Bblock%40c11e7df2bd8449fa8c7782ef46ba77df", "released_to_students": false, "release_date": null, "visibility_state": "unscheduled", "has_explicit_staff_lock": false, "start": "2030-01-01T00:00:00Z", "graded": false, "due_date": "", "due": null, "relative_weeks_due": null, "format": null, "course_graders": [ "Homework", "Lab", "Midterm Exam", "Final Exam" ], "has_changes": false, "actions": { "deletable": true, "draggable": true, "childAddable": true, "duplicable": true }, "explanatory_message": null, "group_access": {}, "user_partitions": [ { "id": 50, "name": "Enrollment Track Groups", "scheme": "enrollment_track", "groups": [ { "id": 1, "name": "Audit", "selected": false, "deleted": false } ] } ], "show_correctness": "always", "highlights": [], "highlights_enabled": true, "highlights_preview_only": false, "highlights_doc_url": "http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-olive.master/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages", "child_info": { "category": "sequential", "display_name": "Subsection", "children": [] }, "ancestor_has_staff_lock": false, "staff_only_message": false, "has_partition_group_components": false, "user_partition_info": { "selectable_partitions": [], "selected_partition_index": -1, "selected_groups_label": "" } } ] }, "ancestor_has_staff_lock": false, "staff_only_message": false, "has_partition_group_components": false, "user_partition_info": { "selectable_partitions": [], "selected_partition_index": -1, "selected_groups_label": "" } }

Tool Bar: New Section (BE)

• use existing API

• name='xblock_handler'

Tool Bar: Reindex (FE)

• uses global page state data

• optional feature (button renders conditionally)

• button is disabled while reindex

• depends on setting ‘reindex_link'

• uses legacy API endpoint

• implement Success Alert component (generic)

• use Success Alert when reindex has succeeded

• display error alert when reindex has failed (see legacy for text/title)

• Note: course re-run uses similar UI feedback component

• tooltip: Reindex current course

• feature flag: ENABLE_COURSEWARE_INDEX

• the must user role: Global Staff

Delivered

Tool Bar: Reindex (BE)

• Use existing API

Delivered

Tool Bar: View Live (FE)

• UI: view-live button

  

  • passive html anchor link

  • navigates to LMS course page

• uses global page state data

• tooltip: Click to open the courseware in the LMS in a new tab

• link example: <LMS>/courses/course-v1:RG+DEV+TL0/jump_to/block-v1:RG+DEV+TL0+type@course+block@course

Delivered

Generic: Processing Feedback (FE)

• generic UI component

  

  • used for different actions with different label

• should be dispatchable from different contexts:

  • show/hide actions

• behaviour: repeats legacy completely

  • hide on error alert

• use generic ProcessingNotification component

• update ProcessingNotification component

  • add needed actions (Adding, etc.)

  • make translatable (gettext)

  • ensure icon is there

Delivered

Content: Empty (FE)

• New Section

• uses global page state data

• UI component: empty course placeholder

  

  

  • conditional rendering: empty course content

• API interactions:

  • see: Tool Bar: New Section (above)

• on New Section button click

  • the first course Section is created

  • displays Adding Processing Feedback

• tooltip: Click to add a new section

• repeats Tool Bar: New Section behaviour

  • the same actions (POST + GET)

Delivered

Content: Not empty (FE)

• New Section

• uses global page state data

• UI component: full-width New Section button

  

• conditional rendering: not empty course content

• the button must be displayed in the end of course content

• API interactions:

  • see: Tool Bar: New Section (above)

• on New Section button click - another course Section is created (appears on the last position)

Assumptions

• API interactions are implemented in the Tool Bar: New Section task

Content: Sections list (FE)

• Section card

• renders course content (Section cards list)

  • actions menu items - non-functioning

  • edit mode - out of scope

  • content (subsections) - out of scope

  • highlights - out of scope

• uses global page state data

• UI component: Section card

  

  • colorized left border to discuss

  • zones:

    • 1. header

      • caret

      • title

        • truncated (elipsys) Paragon Truncate

      • status badge (new design)

      • options menu

      • tooltip: Collapse/Expand this section

      • on click - toggles card state

    • 2. status

      • empty for now

    • 3. content

      • empty for now

  • states:

    • expanded (default)

    • collapsed

      • displays card header

      • displays card status

  • cursor style:

    • on hover:

      • clickable elements - pointer style

      • other - move style

  • elements:

    • 1. caret - reflects card presentation state

    • 2. title - Section display name

    • 3. status badge - Section status (see new design)

      • non-interactive

      • UI component: badge/label with icon

      • values:

        • Live

          • "published": true

          • "released_to_students": true

        • Published not live

          • "published": true

          • "released_to_students": false

        • Staff only

          • visible_to_staff_only: true

          • visibility_state: "staff_only"

          • staff_only_message: true

        • Draft

          • "published": false

    • 4. options menu

      • all section actions are moved here

      • on hover: cursor pointer style

      • on click: toggles vertical items list

      • menu item includes (no design available):

        • action word (e.g. “Delete”)

        • no icon

      • items:

        • Edit

          Status
          colour Red title declined!

        • Publish

        • Configure

        • Duplicate

        • Delete

        • New Subection

          Status
          colour Red title declined!

          • full width buttons are kept

        • Move

          Status
          colour Yellow title in discussion

    • 5. highlights widget

      • out of scope (see Content: Section Highlights)

    • 6. card body

      • on hover: cursor move style

  • add non-functioning action buttons within this task

• Section card hover cursors

  

  

• Section card elements

  

• Section card zones

  

• New design

  

Partially delivered

Update Section card

• 330

• 348

AC

• Section card must be updated

  • remove Add New action item from actions menu

  • remove Edit action item from actions menu

• Add new elements

  • full-width New Subsection button (creates new subsection)

Tech

• Add New action item menu button’s action is now triggered by

Delivered

Content: Section Highlights (FE)

AC

• A new widget is added to a Section card;

• Section Highlights widget displays a number of highlights for the given Section;

• The whole widget is interactive - if clicked a modal window opens;

• Modal’s descriptions must include corresponding documentation link (a part of the help-tokens feature)

• Section highlights modal allows section highlights items editing;

Tech

• uses global page state data

• widget placement: Section card status zone (see: new design)

• UI component: highlights widget

  • displays a number of available highlight items

  • Section highlights label

  • on click:

    • opens modal Section highlights modal dialog

• UI component: Section highlights modal dialog

  

  • elements:

    • title

      • depends on Section’s title: Highlights for <section-title>;

    • description

      • static text

      • documentation link Kyrylo Kholodenko (Unlicensed)

    • form (see new design)

      • 5 text inputs (see new design)

      • input validation:

        • <= 250 chars

        • w/o validation error message

          • legacy implementation limits input w/o any feedback

    • actions:

      • Cancel button

        • closes dialog

        • resets form

      • Save highlights button

        • disabled until form is dirty and valid

        • closes dialog

        • updates section (API POST)

        • displays Saving Processing Feedback

Section highlights update:

# API details

POST <CMS>/xblock/<section-id> 

## payload 
{
"publish":"republish",
  "metadata": {
    "highlights":[
      "asdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdgg"
    ]
  }
}

## response example
{
  "id": "block-v1:RG+DEV+TL0+type@chapter+block@060085dc25e34eeb958d6cb6540d4f8c",
  "data": null,
  "metadata": {
    "display_name": "Section1",
    "highlights": [
      "asdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdfasdfasdfasdfasdfasdfasdfasdfasAPI detailsasdfasdgg"
    ]
  }
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Delivered

Content: Section Highlights (BE)

• use existing

  • <CMS>/xblock/<chapter-block-id>

  • <CMS>/xblock/outline/<section-block-id>

Content: Section Edit (FE)

AC

• Section card edit modeallows Section title editing;

• Section card enters edit mode:

  • on its options menu Edit item click

  • on card Edit (pencil icon) button click

  • Edit button becomes disabled

• Section card exits edit mode:

  • on Enter key

    • changes are saved

  • on elsewhere click (but not its editing zones)

    • changes are saved

  • on Esc key

    • changes are discarded

Tech

• editable Section elements

  • title:

    • inline editing - in edit mode title renders text input pre-filled with its current value

• on save event:

  • updates section (API POST)

  • displays Saving Processing Feedback

• affects New Section feature:

  • newly added section appears in edit mode with title input focused

Design

Section editing save:

# API details

POST <CMS>/xblock/<chapter-block-id>

## payload 
{
  metadata: {
    display_name: <new-value>
  }
}

## response example
{
  "id": "block-v1:RG+DEV+TL0+type@chapter+block@060085dc25e34eeb958d6cb6540d4f8c",
  "data": null,
  "metadata": {
    "display_name": <saved-value>
  }
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Delivered

Content: Section Edit (BE)

• use existing

  • <CMS>/xblock/<chapter-block-id>

  • <CMS>/xblock/outline/<section-block-id>

Content: Section Publish (FE)

AC

• Section content can be published

  • if Section has not yet published changes (e.g. has Draft status)

  • on its options menu Publish item click

• Publish action is confirmed via Publish Section modal dialog

Tech

• Section card options menu Publish item is disabled in

  • Live status

  • Published not live status

• on Publish action:

  • Publish Section modal is opened

• UI component: Publish Section modal dialog

  

  • title:

    • value - Publish <section-display-name>

    • depends on section’s display name

  • content:

    • visualizes content to be published (read-only)

  • actions:

    • Publish button

      • closes modal

      • updates section (API POST)

      • displays Saving Processing Feedback during publishing API request

    • Cancel button

      • closes modal

Section publishing:

# API details

POST <CMS>/xblock/<section-id> 

## payload 
{
  "publish":"make_public"
}

## response example
{
  "id": "block-v1:RG+DEV+TL0+type@chapter+block@060085dc25e34eeb958d6cb6540d4f8c",
  "data": null,
  "metadata": {
    "display_name": "Section1",
    "highlights": [
      ...
    ]
  }
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Delivered

Content: Section Publish (BE)

• use existing

  • POST <CMS>/xblock/<chapter-block-id>

  • GET <CMS>/xblock/outline/<section-block-id>

Content: Section Configure (FE)

AC

• Section settings can be updated

  • on its options menu Configure item click

• Settings are configured via Section Settings modal dialog

• Configurations available:

  • Section release date

  • Section release time (UTC)

  • Section visibility

Tech

• on Configure action:

  • Section Settings modal is opened

• UI component: Section Settings modal dialog

  

  

  • title:

    • value - <section-display-name> Settings

    • depends on section’s display name

  • content:

    • tabs

      • navigation between tabs doesn’t reset already filled data

      • Basic tab:

        • Release Date field (date widget)

          • default: 2030-01-01

        • Release Time in UTC field (time widget)

          • default: 00:00

      • Visibility tab:

        • Hide from learners checkbox field

          • default: unchecked

        • if checked: displays message (strange legacy behaviour: warning appears only on following renders only )

        • 

          

  • actions:

    • Save button

      • disabled if nothing changed

      • closes modal

      • updates section (API POST)

      • displays Saving Processing Feedback during configuration API request

    • Cancel button

      • closes modal

      • resets modal data

Section configuration:

# API details

POST <CMS>/xblock/<section-id> 

## payload 
{
  "publish":"republish",
  "metadata":{
    "visible_to_staff_only":true,
    "start":"2031-01-01T00:00:00.000Z"
  }
}

## response example
{
  "id": "block-v1:RG+DEV+TL0+type@chapter+block@060085dc25e34eeb958d6cb6540d4f8c",
  "data": null,
  "metadata": {
    "display_name": "Section1",
    "visible_to_staff_only": true,
    "start": "2031-01-01T00:00:00Z",
    "highlights": [
      ...
    ]
  }
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: Section Configure (BE)

• use existing

  • POST <CMS>/xblock/<chapter-block-id>

  • GET <CMS>/xblock/outline/<section-block-id>

Content: Section Duplicate (FE)

AC

• Section can be duplicated (cloned)

  • on its options menu Duplicate item click

• A new section (deep copy) is placed right after the origin section

Tech

• on Section’s options menu Duplicate item click:

  • duplicates section (API POST)

  • displays Duplicating Processing Feedback

  • on success:

    • refetches section outline data

• A new section (copy):

  • appears right after the origin section

  • duplicated item must appear in expanded state

  • edit mode is activated (title input focused)

  • content is duplicated as well

  • configuration is duplicated as well

  • highlights are duplicated as well

  • status is Draft

  • title is pre-filled with Duplicate of <origin-section-title>

  • newly created item must be positioned in screen’s center (scroll effect) - out of scope

Section duplication:

# API details

POST <CMS>/xblock/

## payload 
{
  "duplicate_source_locator":<section-block-id>,
  "parent_locator":<course-block-id>
}

## response example
{
  "locator": <new-section-block-id>,
  "courseKey": "course-v1:RG+DEV+TL0"
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Delivered

Duplicated Section scroll effect -

Status
colour Red title TBD

• implement generic component for all levels (section/subsection/unit)

Content: Section Duplicate (BE)

• use existing

  • POST <CMS>/xblock/

  • GET <CMS>/xblock/outline/<section-block-id>

Content: Section Delete (FE)

AC

• Section can be deleted (removed)

  • on its options menu Delete item click

• Section deletion action happens via confirmation modal dialog

• Once deleted Section disappears from sections list

Tech

• on Delete action:

  • Delete this section? modal dialog is opened

• UI component: Delete this section? modal dialog

  

  • modal style: danger | warning

  • title:

    • Delete this section?

  • description:

    • Deleting this section is permanent and cannot be undone.

  • actions:

    • Yes, delete this section button

      • closes modal dialog

      • removes section (API DELETE)

      • displays Deleting Processing Feedback

    • Cancel button

      • closes modal dialog

Section deletion:

# API details

DELETE <CMS>/xblock/<section-id> 

## response HTTP code
204

Delivered

Content: Section Delete (BE)

• use use existing

  • DELETE <CMS>/xblock/<section-block-id>

Content: Section Move (FE) -

Status
colour Red title TBD

How exactly moving action should work?

1. as it works in legacy (drag&drop section card; no action in menu)

2. new approach (e.g. on click in options menu Move button section card enters moving mode and can be moved by arrow keys + or entering a number key it is moved to that numeric position…)

3. hybrid (always draggable + moving mode for keyboard actions)

Only drag-n-drop is available.

Content: Subsections list (FE)

• Subsection card

AC

• Section card renders its children subsections in the content zone

• Subsections are expanded after initial page loading

• Nothing is rendered if there are no subsection in section

Tech

• renders section content (Subsection cards list)

  • actions menu items - non-functioning

  • edit mode - out of scope

  • status - out of scope

  • content (units) - out of scope

• uses global page state data

  • initial (API GET)

• UI component: Subsection card

  • zones:

    • 1. header

      • caret

      • title

      • status badge (assumption: yes)

      • options menu

    • 2. status

      • empty for now

    • 3. content

      • empty for now

  • states:

    • expanded (default)

    • collapsed

      • displays card (see card zones)

        • header

        • status

  • cursor style:

    • on hover:

      • clickable elements - pointer style

      • other - move style

  • elements:

    • 1. caret - reflects card presentation state

      • on click - toggles card state

    • 2. title - Subsection display name

      • on click - toggles card state

    • 3. status badge ✅

      Status
      colour Green title confirmed

      • non-interactive

      • UI component: badge/label with icon

      • values logic is the same as for a Section

    • 4. options menu

      • all subsection actions are moved here

      • on click: toggles vertical items list

      • menu item includes (no design available):

        • action word (e.g. “Delete”)

      • items:

        • Edit

          Status
          colour Red title declined!

        • Publish

        • Configure

        • Duplicate

        • Delete

        • Move

          Status
          colour Red title declined!

        • New Subsection

          Status
          colour Red title declined!

    • 6. card body

      • on hover: cursor move style

  • add non-functioning action buttons within this task

Subsection card hover cursors

Pointer

Move

Subsection card elements

• assumption: the same as for Section card

• no highlights

• Subsection card zones (legacy)

  

• new design

  

Content: New Subsection (FE)

AC

• Section’s content zone provides New subsection full-width button which allows new subsection creation

• Newly created subsection appears in the corresponding Section card’s content zone on the last position

Tech

• New subsection button is always displayed in section’s content

• the button must be displayed in the end of the section content

• UI component: full-width New Subsection button

• on New subsection button click:

  • create subsection (API POST)

  • displays Adding Processing Feedback

  • on success:

    • refetch chapter outline data (API GET)

• new section’s Subsection is created (appears on the last position)

UI:

Section editing save:

# API details

POST <CMS>/xblock/

## payload 
{
  "parent_locator":<chapter-block-id>,
  "category":"sequential",
  "display_name":"Subsection"
}

## response example
{
  "locator": <new-sequential-block-id>,
  "courseKey": "course-v1:RG+DEV+TL0"
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: New Subsection (BE)

• use use existing

  • POST <CMS>/xblock/

Content: Subsection Edit (FE)

AC

• Subsection card edit modeallows Subsection title editing;

• Subsection card enters edit mode:

  • on its options menu Edit item click

  • on card Edit (create icon) button click

  • Edit button becomes disabled

• Subsection card exits edit mode:

  • on Enter key

    • changes are saved

  • on elsewhere click (but not its editing zones)

    • changes are saved

  • on Esc key

    • changes are discarded

Tech

• editable Subsection elements

  • title:

    • inline editing - in edit mode title renders text input pre-filled with its current value

• on save event:

  • updates section (API POST)

  • displays Saving Processing Feedback

  • on success:

    • refetch Section outline data

• affects New Subsection feature:

  • newly added subsection appears in edit mode with title input focused

Subsection editing save:

# API details

POST <CMS>/xblock/<sequential-block-id>

## payload 
{
  metadata: {
    display_name: <new-value>
  }
}

## response example
{
  "id": <sequential-block-id>,
  "data": null,
  "metadata": {
    "display_name": <saved-value>
  }
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: Subsection Edit (BE)

• use existing

  • POST <CMS>/xblock/<sequential-block-id>

  • GET <CMS>/xblock/outline/<section-block-id>

Content: Subsection Publish (FE)

AC

• Subsection content can be published

  • if Subsection has not yet published changes (e.g. has Draft status)

  • on its options menu Publish item click

• Publish action is confirmed via Publish Subsection modal dialog

Tech

• Subsection card options menu Publish item is disabled in:

  • Live status

  • Published not live status

• on Publish action:

  • Publish Subsection modal is opened

• UI component: Publish Subsection modal dialog

  

  • title:

    • value - Publish <subsection-display-name>

    • depends on subsection’s display name

  • content:

    • visualizes content to be published

    • units list in draft status

      Status
      colour Green title property confirmed

      • Code Block
        "display_name": "Unit", "published": false,

  • actions:

    • Publish button

      • closes modal

      • updates subsection (API POST)

      • displays Saving Processing Feedback during publishing API request

    • Cancel button

      • closes modal

Subsection publishing:

# API details

POST <CMS>/xblock/<sequential-block-id> 

## payload 
{
  "publish":"make_public"
}

## response example
{
  "id": <sequential-block-id>,
  "data": null,
  "metadata": {
    "display_name": "Subsection1",
    "highlights": [
      ...
    ]
  }
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: Subsection Edit (BE)

• use existing

  • POST <CMS>/xblock/<sequential-block-id>

  • GET <CMS>/xblock/outline/<section-block-id>

Content: Subsection Configure (FE)

• basic

• visibility

AC

• Subsection settings can be updated

  • on its options menu Configure item click

• Settings are configured via Section Settings modal dialog

• Configurations available:

  • Subsection release date

  • Subsection release time (UTC)

  • Subsection grading

  • Subsection due date

  • Subsection due time (UTC)

  • Subsection Visibility

  • Subsection Assessment Results Visibility

Tech

• on Configure action:

  • Subsection Settings modal is opened

• UI component: Subsection Settings modal dialog

  

  

  • title:

    • value - <subsection-display-name> Settings

    • depends on subsection’s display name

  • content:

    • tabs (3)

      • navigation between tabs doesn’t reset already filled data

      • Basic tab:

        • Release Date field (date widget)

          • default: 2030-01-01

        • Release Time in UTC field (time widget)

          • default: 00:00

        • Grade as: dropdown field

          • assignment types (from BE)

        • Due Date field (date widget)

          • default: empty

        • Due Time in UTC field (time widget)

          • default: empty

      • Visibility tab:

        • Subsection Visibility (section)

          • Show entire subsection (default) radio field

          • Hide content after due date radio field

          • Hide entire subsectionradio field

        • Assessment Results Visibility (section)

          • Always show assessment results (default) radio field

          • Never show assessment results radio field

          • Show assessment results when subsection is past due radio field

    actions:

    • Save button

      • disabled if nothing changed

      • closes modal

      • updates section (API POST)

      • displays Saving Processing Feedback during publishing API request

    • Cancel button

      • closes modal

      • resets modal data

Section configuration:

# API details

POST <CMS>/xblock/<sequential-block-id> 

## payload example
{
"graderType":"notgraded",
"metadata":{
  "due":null,
  "visible_to_staff_only":null,
  "hide_after_due":true,
  "show_correctness":"never",
  "is_practice_exam":false,
  "is_time_limited":false,
  "exam_review_rules":"",
  "is_proctored_enabled":false,
  "default_time_limit_minutes":0,
  "is_onboarding_exam":false
},
"publish":"republish"
}

## response example
{
  "id": "block-v1:RG+DEV+TL0+type@sequential+block@6c953a45b291461a8648a1157ca6bdb8",
  "data": null,
  "metadata": {
    "display_name": "Subsection Name",
    "show_correctness": "never",
    "default_time_limit_minutes": 0,
    "exam_review_rules": "",
    "hide_after_due": true,
    "is_onboarding_exam": false,
    "is_practice_exam": false,
    "is_proctored_enabled": false,
    "is_time_limited": false
  },
  "graderType": "notgraded"
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: Subsection Configure (FE)

• advanced

Advanced tab:

• None (default) radio field

• Timed radio field

  • if checked: Time Allotted (HH:MM): time field is displayed (time widget)

    

• subsection prerequisites (advanced settings)

• …

Content: Subsection Configure (BE)

• use use existing

  • <CMS>/xblock/<chapter-block-id>

  • <CMS>/xblock/outline/<section-block-id>

Tool Bar: Collapse All Sections (FE)

AC

• Button toggles between 2 states:

  • Collapse All Sections button allows all course content sections collapse

  • Expand All Sections button allows all course content expansion:

    • sections

      • subsections

• Button isn’t displayed on empty course content

Tech

• does not track each section state updates (single direction effect)

• button shouldn’t be displayed on empty outline

• button has 2 states:

  • Expand All Sections (initial)

  • Collapse All Sections

• behaviour: repeats legacy completely

• No API interactions

• Demo depends on full course content implementation

Content: Subsection Duplicate (FE)

AC

• Subsection can be duplicated (cloned)

  • on its options menu Duplicate item click

• A new subsection (deep copy) is placed right after the origin subsection

Tech

• on Subsection’s options menu Duplicate item click:

  • updates section (API POST)

  • displays Duplicating Processing Feedback

• A new subsection (copy):

  • appears right after the origin subsection

  • duplicated item must appear in expanded state

  • edit mode is activated (title input focused)

  • content is duplicated as well

  • configuration is duplicated as well

  • status is Draft ✅

    Status
    colour Green title confirmed

    • asked in Slack

  • title is pre-filled with Duplicate of <origin-subsection-title>

  • newly created item must be positioned in screen’s center (scroll effect) - out of scope

Subsection duplication:

# API details

POST <CMS>/xblock/

## payload 
{
  "duplicate_source_locator":<subsection-block-id>,
  "parent_locator":<section-block-id>
}

## response example
{
  "locator": <new-subsection-block-id>,
  "courseKey": "course-v1:RG+DEV+TL0"
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: Subsection Duplicate (BE)

• use use existing

  • POST <CMS>/xblock/

  • GET <CMS>/xblock/outline/<section-block-id>

Content: Subsection Delete (FE)

AC

• Subsection can be deleted (removed)

  • on its options menu Delete item click

• Subsection deletion action happens via confirmation modal dialog

• Once deleted Subsection disappears from subsections list

Tech

• on Delete action:

  • Delete this subsection? modal dialog is opened

• UI component: Delete this subsection? modal dialog

  

  • style: danger | warning

  • title:

    • Delete this subsection?

  • description:

    • Deleting this subsection is permanent and cannot be undone.

  • actions:

    • Yes, delete this subsection button

      • closes modal dialog

      • removes subsection (API DELETE)

      • displays Deleting Processing Feedback

    • Cancel button

      • closes modal dialog

Subsection deletion:

# API details

DELETE <CMS>/xblock/<subsection-id> 

## response HTTP code
204

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-bl

Content: Subsection Delete (BE)

• use existing

  • DELETE <CMS>/xblock/<subsection-block-id>

Content: Subsection Move (FE) -

Status
colour Red title TBD

How exactly moving action should work?

1. as it works in legacy (drag&drop subsection card; no action in menu)

2. new approach (e.g. on click in options menu Move button section card enters moving mode and can be moved by arrow keys

3. hybrid (always draggable + moving mode for keyboard actions)

Only drag-n-drop is available.

Content: Subsection Units list (FE)

• unit card

• cards list

AC

• Subsection card renders its children units in the content zone

• Units are not collapsible

• Units are draggable (out of scope)

• Units are editable (out of scope)

• Nothing is rendered if there are no units in subsection

Tech

• renders subsection content (Unit items list)

  • actions menu items - non-functioning

  • edit mode - out of scope

  • status - out of scope

• uses global page state data

  • initial (API GET)

• UI component: Unit card

  • zones:

    • 1. header

      • title

      • status badge ✅

        • assumption: yes

          • asked here

            Status
            colour Green title confirmed

      • options menu

    • 2. status-zone (seems deprecated)

      Status
      colour Green title confirmed

      • Unpublished units will not be released

        • deprecated in favour of status badge

      • Contains staff only content

        • deprecated in favour of status badge

  • cursor style:

    • on hover:

      • clickable elements - pointer style

      • other - move style

  • elements:

    • 1. title - Unit display name

    • 2. status badge

      • non-interactive

      • UI component: badge/label with icon

      • values logic is the same as for a Subsection

    • 4. options menu

      • all subsection actions are moved here

      • on click: toggles vertical items list

      • menu item includes (no design available):

        • action word (e.g. “Delete”)

      • items:

        • Edit

          Status
          colour Red title declined!

          • new edit button introduced

        • Publish

        • Configure

        • Duplicate

        • Delete

        • Move

          Status
          colour Red title declined!

          • future releases

        • New Unit

          Status
          colour Red title declined!

          • full width buttons are kept instead

    • 6. card body

      • on hover: cursor move style

  • add non-functioning action buttons within this task

• Unit card hover cursors

• Subsection card elements

  • assumption: the same as for Section card

  • no highlights

• Unit card zones (legacy)

1. header

2. status

• New design

Content: New Unit (FE)

AC

• Subsection’s content zone provides New unit full-width button which allows new Unit creation

• Newly created Unit appears in the corresponding Subsection card’s content zone on the last position

Tech

• New unit button is always displayed in subsection’s content

• the button must be displayed in the end of the subsection content

• UI component: full-width New unit button

• on New unit button click:

  • create unit (API POST)

  • displays Adding Processing Feedback

  • on success:

    • backend redirect to the Unit page in edit mode

UI:

Section editing save:

# API details

POST <CMS>/xblock/

## payload 
{
  "parent_locator":<sequential-block-id>,
  "category":"vertical",
  "display_name":<unit-title>
}

• on success - redirects to Unit page

Content: New Unit (BE)

• use use existing

  • POST <CMS>/xblock/

Content: Unit Edit (FE)

AC

• Unit card edit modeallows Unit title editing;

• Unit card enters edit mode:

  • on its options menu Edit item click

  • on card Edit (pencil icon) button click

  • Edit button becomes disabled

• Unit card exits edit mode:

  • on Enter key

    • changes are saved

  • on elsewhere click (but not its editing zones)

    • changes are saved

  • on Esc key

    • changes are discarded

Tech

• editable Unit elements

  • title:

    • inline editing - in edit mode title renders text input pre-filled with its current value

• on save event:

  • updates section (API POST)

  • displays Saving Processing Feedback

  • on success:

    • refetch Section outline data

Design

Unit editing save:

# API details

POST <CMS>/xblock/<vertical-block-id>

## payload 
{
  metadata: {
    display_name: <new-value>
  }
}

## response example
{
  "id": <vertical-block-id>,
  "data": null,
  "metadata": {
    "display_name": <saved-value>
  }
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: Unit Edit (BE)

• use existing

  • POST <CMS>/xblock/<vertical-block-id>

  • GET <CMS>/xblock/outline/<section-block-id>

Content: Unit Publish (FE)

AC

• Unit can be published

  • only if it has Draft status

  • on its options menu Publish item click

• Publish action is confirmed via Publish Section modal dialog

Tech

• Unit card options menu Publish item is disabled in

  • Live status

  • Published not live status

• on Publish action:

  • Publish Unit modal is opened

• UI component: Publish Unit modal dialog

  • title:

    • value - Publish <unit-display-name>

    • depends on section’s display name

  • content:

    • static text: Publish all unpublished changes for this unit?

  • actions:

    • Publish button

      • closes modal

      • creates unit (API POST)

      • displays Saving Processing Feedback during publishing API request

      • on success:

        • refetch section outline

    • Cancel button

      • closes modal

Unit publishing:

# API details

POST <CMS>/xblock/<unit-id> 

## payload 
{
  "publish":"make_public"
}

## response example
{
  "id": "block-v1:RG+DEV+TL0+type@chapter+block@060085dc25e34eeb958d6cb6540d4f8c",
  "data": null,
  "metadata": {
    "display_name": <unit-title>,
    "highlights": [
      ...
    ]
  }
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: Unit Publish (BE)

• use existing

  • POST <CMS>/xblock/<unit-block-id>

  • GET <CMS>/xblock/outline/<section-block-id>

Content: Unit Configure (FE) -

Status
colour Red title TBD

AC

• Unit settings can be updated

  • on its options menu Configure item click

• Settings are configured via Unit Settings modal dialog

• Configurations available:

  • Unit visibility

Tech

• on Configure action:

  • Unit Settings modal is opened

• UI component: Unit Settings modal dialog

  • title:

    • value - <unit-display-name> Settings

    • depends on unit’s display name

  • content:

    • Hide from learners checkbox field

      • default: unchecked

    • if checked:

      • displays message: If the unit was previously published and released to learners, any changes you made to the unit when it was hidden will now be visible to learners.

• 

  • actions:

    • Save button

      • disabled if nothing changed

      • closes modal

      • updates unit (API POST)

      • displays Saving Processing Feedback during configuration API request

      • on success:

        • refetches section outline data

    • Cancel button

      • closes modal

      • resets modal data

Unit configuration:

# API details

POST <CMS>/xblock/<vertical-block-id> 

## payload 
{
  "publish":"republish",
  "metadata":{
    "visible_to_staff_only":true
  }
}

## response example
{
  "id": <vertical-block-id>,
  "data": null,
  "metadata": {
    "display_name": <unit-title>,
    "visible_to_staff_only": true
  }
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: Unit Configure (BE)

• use existing

  • <CMS>/xblock/<vertical-block-id>

  • <CMS>/xblock/outline/<section-block-id>

Content: Unit Duplicate (FE)

AC

• Unit can be duplicated (cloned)

  • on its options menu Duplicate item click

• A new unit (copy) is placed right after the origin unit

Tech

• on Unit’s options menu Duplicate item click:

  • duplicates unit (API POST)

  • displays Duplicating Processing Feedback

  • on success:

    • refetches section outline data

• A new Unit (copy):

  • appears right after the origin Unit

  • edit mode is activated (title input focused)

  • configuration is duplicated as well

  • status is Draft

  • title is pre-filled with Duplicate of <origin-unit-title>

  • newly created item must be positioned in screen’s center (scroll effect) - out of scope

Unit duplication:

# API details

POST <CMS>/xblock/

## payload 
{
  "duplicate_source_locator":<vertical-block-id>,
  "parent_locator":<sequential-block-id>
}

## response example
{
  "locator": <new-vertical-block-id>,
  "courseKey": "course-v1:RG+DEV+TL0"
}

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-block-id>

Content: Unit Duplicate (BE)

• use existing

  • POST <CMS>/xblock/

  • GET <CMS>/xblock/outline/<section-block-id>

Content: Unit Delete (FE)

AC

• Unit can be deleted (removed)

  • on its options menu Delete item click

• Unit deletion action happens via confirmation modal dialog

• Once deleted Unit disappears from units list

Tech

• on Delete action:

  • Delete this unit? modal dialog is opened

• UI component: Delete this unit? modal dialog

  

  • modal style: danger | warning

  • title:

    • Delete this unit?

  • description:

    • Deleting this unit is permanent and cannot be undone.

  • actions:

    • Yes, delete this unit button

      • closes modal dialog

      • removes section (API DELETE)

      • displays Deleting Processing Feedback

    • Cancel button

      • closes modal dialog

Unit deletion:

# API details

DELETE <CMS>/xblock/<vertical-block-id> 

## response HTTP code
204

• on success - refetch chapter outline data

  Code Block
  # URL GET <CMS>/xblock/outline/<section-bl

Content: Unit Delete (BE)

• use existing

  • DELETE <CMS>/xblock/<unit-block-id>

Content: Unit Move (FE) -

Status
colour Red title TBD

Only drag-n-drop is available.

Content: Entrance Exam (FE) -

Status
colour Red title TBD