WBS for Course Content Outline page

WBS for Course Content Outline page

Unit = Vertical

Subsection = Sequential

Section = Chapter

 

Page

WBS

Acceptance Criteria

Comments

Status

Page

WBS

Acceptance Criteria

Comments

Status

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 investigated

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

 

feat: create DRF endpoint to get course index context by ruzniaievdm · Pull Request #32856 · openedx/edx-platform

 

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


Assumptions

  • use Paragon Stack for the main layout

  • required additional info: @Volodymyr Bergman 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

 

 

Porting: Video Sharing - blocker - TBD

(legacy backport)

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

 

 

 

Status Bar: Video Sharing (FE) - TBD

 

blocked

blocked by Video Sharing legacy backport

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

resolved

 

  • 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

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

blocked by Video Sharing legacy backport

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

    # 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

    # 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

    # 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

    # 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:

    • 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 declined!

          • Publish

          • Configure

          • Duplicate

          • Delete

          • New Subection declined!

            • full width buttons are kept

          • Move 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 update

  • 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