Low-level WBS for Course Content Outline and Course Unit pages

High-level analysis of the page Course Content Outline

From legacy to MFE + API (w/o functional changes).

Following the example we’ll use frontend-driven-development here.

1 Low-level WBS for Course Content Outline and Course Unit pages
2 High-level analysis of the page Course Content Outline
- 2.1 Steps
- 2.2 STEP 1: Feature Set
  - 2.2.1 Page decomposition
    - 2.2.1.1 Page route
    - 2.2.1.2 Page layout
  - 2.2.2 Functions
  - 2.2.3 Features implementation description
- 2.3 STEP 2: Configuration
- 2.4 STEP 3: MFE extension
- 2.5 STEP 4: API Contract
- 2.6 STEP 5: API (Backend for Frontend)
- 2.7 STEP 6: Documentation

Steps

Understand (list) the feature set.
1. extract features - split legacy UI to functional pieces
2. discover optional implicit functions
Define additional configuration
1. waffle course flag(s) for feature(s) - rollout period
Extend MFE
1. feature/sub-features placement (codebase hierarchy, naming, etc.)
2. routing (we want to stick to legacy paths as close as possible - to keep user experience not affected: bookmarks, etc.)
3. state management (shape, UI, data, etc.)
4. data required (shape, potential API endpoints, etc.) - API contract
5. main UI building blocks (basic presentational components)
6. unit tests
Compose final API contract
1. endpoints list with shaped data set
Implement API (BFF)
1. create backend DRF wrappers around legacy utils to satisfy requested API contract
2. unit tests
Internatioanalization (I18N)
Update documentation
1. MFE README
2. CMS (Platform) documentation

STEP 1: Feature Set

Legacy context:
Feature context: course
Navigation: CMS > Content > Outline
Page path: <STUDIO-HOST>/course/course-v1:edX+DemoX+Demo_Course

Page decomposition

Page route

Dedicated route is already present.

Page layout

top bar (full width)
- heading (left)
- tool bar - page actions (right)
  - action-button1
  - … …
  - action-buttonN
content (full width)
- main section (left)
  - status bar
    - attributes
      - attr1
      - … …
      - attrN
    - highlights
  - outline
    - empty course
    - section1
      - …
    - … …
    - sectionN
- aside section (right)
  - info-item1
  - … …
  - info-itemN

Functions

Additional functions:
1. Heading (A)
2. Tool Bar (B)
  1. New section creation (“New Section” button) - duplicated action (see: 2.a.i.1)
  2. Course reindex initiation (“Reindex“ button)
  3. Expand/collapse all sections (corresponding wording button)
  4. Learning MFE initial unit link (“View Live“ button)
3. Status Bar (C)
  1. Course Schedule link (“Start Date“ clickable value)
  2. Pacing Type (passive course type)
  3. Checklists (out of scope?)
  4. Course Highlight Emails
    1. Activation “Enable Now“ button
    2. External documentation link (“Learn more“ link) - configurable?
4. Side Bar (D)
  1. “Creating your course organisation” static section
  2. “Reorganising your course” static section
    1. External documentation link (“Learn more about the course outline“ button) - configurable?
  3. “Setting release dates and grading policies” static section
    1. External documentation link (“Learn more about grading policy settings”) - configurable?
  4. “Changing the content learners see” static section
    1. External documentation link (“Learn more about content visibility settings“) - configurable?
5. Feedback Messages
  1. “Sav“
Course structure manipulation:
1. Outline (E)
  1. List sections
    1. Empty course (initial state)
      1. New Section - creation
    2. Sections list
    3. Loader
  2. Section actions (red)
    1. New Section - creation (j)
    2. Delete Section - removal (f)
    3. Duplicate Section - cloning (e)
    4. Configure Section - configuration (d)
    5. Reorder Section - movement (g)
    6. Expand/Collapse Section - appearance (a)
    7. Rename Section - edit (b, c)
    8. Section Highlights - description (i)
    9. Publish Section (h)
  3. Subsection actions (yellow)
    1. New Subsection - creation (h)
    2. Delete Subsection - removal (f)
    3. Duplicate Subsection - cloning (e)
    4. Configure Subsection - configuration (d)
    5. Reorder Subsection - movement (g)
    6. Expand/Collapse Subsection - appearance (a)
    7. Rename Subsection - edit (b, c)
    8. Publish Subsection (h)
  4. Unit actions (green)
    1. New Unit - creation (h)
    2. Delete Unit - removal (e)
    3. Duplicate Unit - cloning (d)
    4. Configure Unit - configuration (c)
    5. Reorder Unit - movement (f)
    6. Rename Unit - edit (a, b)
    7. Publish Unit (g)
2. Feedback (F)
  1. “Saving…“ | “Adding…“ | … (during any action processing)
  2. “Error“ (API errors, etc.)
  3. Page alerts (example: Course has been successfully reindexed.)
  4. …
Implicit functions
1. …

Features hierarchy (see ADR #2 for details)

Features implementation description

Feature	Responsibility	State	Data	Presentational components

Feature	Responsibility	State	Data	Presentational components
OUTLINE (top page level)	hosts sub-features implements page skeleton displays alerts? (example: course index succeeded)	State: `// "courseOutline" state slice // courseOutlineReducer "subroot" reducer ...` Actions: Selectors:	Template context (legacy) - `'course_outline.html'` cms/djangoapps/contentstore/views/course.py#course_handler cms/djangoapps/contentstore/views/course.py#course_index --- { 'language_code': request.LANGUAGE_CODE, 'context_course': course_module, 'lms_link': lms_link, 'sections': sections, 'course_structure': course_structure, 'initial_state': course_outline_initial_state(locator_to_show, course_structure) if locator_to_show else None, 'rerun_notification_id': current_action.id if current_action else None, 'course_release_date': course_release_date, 'settings_url': settings_url, 'reindex_link': reindex_link, 'deprecated_blocks_info': deprecated_blocks_info, 'notification_dismiss_url': reverse_course_url( 'course_notifications_handler', current_action.course_key, kwargs={ 'action_state_id': current_action.id, }, ) if current_action else None, 'frontend_app_publisher_url': frontend_app_publisher_url, 'mfe_proctored_exam_settings_url': get_proctored_exam_settings_url(course_module.id), 'advance_settings_url': reverse_course_url('advanced_settings_handler', course_module.id), 'proctoring_errors': proctoring_errors, } New API Is there any global non-feature-specific data?	main layout container (outline page)
course-details	displays course start date (if set) allows navigation to course start date configuration displays course pacing type	Shape: `{ "start_date": <course-start-date>, "pacing_type": <course-pacing-type>, }` Actions:
course-checklists	out-of-scope?	Shape: Actions:
course-highlights	allows section(s) highlights creation/editing displays section highlights number allows highlights emails scheduled sending allows external documentation link configuration See OeX documentation.	Shape: Actions: Selectors: TBD	Enable “Course Highlight Emails“ (legacy) Fetch block outline data (legacy) New API	section card widget/button displays highlights number opens modal editor section editor (modal) edit 5 text fields save data to API status-bar widget activates emails holds docs link
section-create	allows new section creation provides: toolbar action button empty content button content button dispatches footer feedback dispatches global error	Shape: Actions: Selectors: TBD	Create new block (legacy) Fetch course outline data (legacy) New API	new section button (toolbar) new section button (empty outline) new section button (outline bottom) footer alert (“Adding“) global error alert (“<text>“)
course-index	allows course search reindexing provides: action button (conditionally? permissions) hidden/deactivated? must respect `FEATURES['ENABLE_COURSEWARE_INDEX']` dispatches footer feedback dispatches success alert dispatches global error	Shape: Actions:	Recreate course search index (legacy) New API	toolbar action button
learning-link (in progress)	allows navigation to LMS (new tab) in different contexts: course specific section specific subsection specific unit provides toolbar action button	Shape: Actions:	Template context (legacy) New API	toolbar action button
TOOLBAR	implements section layout uses: section-create-feature course-index-feature content.collapse-all-toggle-feature possibly should be extracted	Shape: Actions: Selectors:	Template context (legacy) - `'course_outline.html'` New API Is there any global non-feature-specific data? LMS view live URL?	toolbar section
STATUSBAR	implements section layout uses: course-details-feature course-checklists-feature course-highlights-feature	Shape: Actions:	Template context (legacy) course start date course pacing type Fetch course attributes reuse course data (selectors)	main layout
ASIDE	hosts sub-features implements section layout	Shape: Actions:		main layout
FEEDBACK	displays some outline action is being processed (page bottom right)	Shape: Actions:	No API data.	? possibly it won’t be a 1:1 implementation
CONTENT	implements section layout hosts sub-features	Shape: Actions: Selectors:	Template context (legacy) - `'course_outline.html'` What is the initial data set? Fetch Quality data (legacy) ? - see what is it about Fetch Validation data (legacy) ? - see what is it about New API ?
collapse-all-toggle	allows course outline full expansion allows course outline full collapsing provides: toolbar action button (stateful)	Shape: Actions:	No API data. Possibly, tracking events.	toolbar action button(s)
empty-outline	renders course outline edge case (empty state) uses: `section-create` feature empty-content-section-create button	Shape: Actions:	No API data.	empty outline section uses: section-create button
section-list	lists/manages course sections uses: `section-create` feature content-section-create button	Shape: Actions:	Template context (legacy) - `'course_outline.html'` New API	content sections list
section-mode (expand/collapse)	allows specific course section presentation mode switching relates to: collapse-all-toggle-feature	Shape: Actions:	No API data. Possibly, tracking events.	section card toggle section card collapsed section card expanded
section-edit	allows specific course section editing display name update dispatches footer feedback (“Saving“) dispatches global error (if any)	Shape: Actions:	Delete section API (legacy) Side effects: refetch outline data New API	editing section card (heading controlled form) edit action button
section-settings	allows specific course section configuration: basic section set release date set release time visibility section set visibility for learners dispatches footer feedback (“Saving“) dispatches global error (if any)	Shape: Actions:	Initial state API (legacy) Template context? Section settings saving API (legacy) Side effects: refetch outline data New API	section settings modal tabs basic form release date (date) release time (time) visibility form hide from learners (bool) save action cancel action
section-clone	allows specific course section duplication (deep) dispatches footer feedback (“Duplicating“) dispatches global error (if any)	Shape: Actions:	Duplicate section API (legacy) Side effects: refetch outline data New API	duplicate section action button
section-delete	allows specific course section removal init section delete action cancel section delete action (modal confirmation) dispatches footer feedback (“Deleting“) dispatches global error (if any)	Shape: Actions:	Delete section API (legacy) Side effects: refetch outline data New API	remove section action button delete operation confirmation modal dialog
section-move	allows specific course section reordering (list position update) provides reordering action zone dispatches footer feedback (“Saving“) dispatches global error (if any)	Shape: Actions:	Reorder section API (legacy) Side effects: no New API	move section action button
section-publish (in progress)	allows specific course section publication (deep)
section	renders single section uses features: section-mode-feature section-edit-feature section-settings-feature section-clone-feature section-delete-feature section-move-feature highlights-feature … is controlled by: section-list-feature hosts sub-features: subsection-list-feature subsection-create-feature	Shape: Actions:	No API data. Is managed by the parent feature. API actions are managed by other features.	section card mode-toggle edit-form actions-bar basic-settings-section highlights-widget visibility-settings-section
subsection-list subsection-create subsection-mode subsection-edit subsection-settings subsection-clone subsection-delete subsection-move subsection-publish subsection unit-list unit-create unit-edit unit-settings unit-clone unit-delete unit-move unit-publish ?..

STEP 2: Configuration

There is already prepared feature flag exists:

process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE
- type: boolean
- default: true