Skip to content

refactor: course outline to remove redux#3073

Draft
navinkarkera wants to merge 85 commits into
openedx:masterfrom
open-craft:navin/fAL-3835/outline-refactor
Draft

refactor: course outline to remove redux#3073
navinkarkera wants to merge 85 commits into
openedx:masterfrom
open-craft:navin/fAL-3835/outline-refactor

Conversation

@navinkarkera
Copy link
Copy Markdown
Contributor

  • refactor: prepare helpers
  • refactor: extract selection state builder
  • refactor: Add CourseOutlineStateContext facade
  • refactor(course-outline): move outline reads to state context
  • fix(course-outline): decouple outline selection from menu state
  • refactor: move current-item and editability reads out of sidebar context
  • refactor: Remove course outline dependency from CourseAuthoringContext
  • refactor: runtime fetch swapped from thunk effect to React Query
  • refactor: visible tree ownership moved into CourseOutlineStateContext
  • refactor: get sections from state instead of context
  • refactor: move drag-drop to state
  • test: fix outline tests
  • refactor(course-outline): finish PR 8 — move visible tree ownership to context
  • fix(course-outline): keep reorder preview stable
  • refactor(course-outline): move index query sync to state seam
  • fix(course-outline): sync reorder cache after drag drop
  • refactor(course-outline): centralize mutation handlers
  • refactor(course-outline): move section reorder to query mutation
  • refactor(course-outline): move subsection reorder to query mutation
  • fix(course-outline): prevent stale outline data across course navigation
  • refactor(course-outline): remove delete redux facade sync
  • refactor(course-outline): flatten delete cache tree updates
  • test(course-outline): assert delete cache updates
  • refactor(course-outline): migrate tests off redux facade and prune dead state
  • fix(course-outline): pass explicit republish type for unit configure
  • refactor(course-outline): remove unused thunk seam file
  • refactor(course-outline): remove redux outline slice seam
  • fix(course-outline): surface reindex error alert on failure
  • refactor(course-outline): extract reorder hook and tighten types
  • refactor(course-outline): extract outline mutation hook
  • refactor(course-outline): extract outline status/query hook
  • refactor(course-outline): move action and modal state to seam
  • refactor(course-outline): rename state seam as primary context API
  • refactor(course-outline): consolidate to single outline context file
  • fix(course-outline): clean cache sync and configure target
  • refactor(course-outline): use React Query status for outline index
  • fix(course-outline): harden outline error and reorder flows
  • chore: remove unnecessary comments
  • fix(course-outline): harden delete and trim reorder state
  • refactor(course-outline): move mutations to api hooks and simplify context
  • fix: invalid course block api url
  • test(course-outline): add apiHooks coverage for mutations
  • fix(course-outline): harden add, delete, and reorder state
  • refactor(course-outline): centralize outline actions in context
  • refactor(course-outline): localize add and duplicate hooks
  • fix(course-outline): avoid delete self-refetch
  • fix: tests
  • chore: lint fix
  • test(course-outline): trim redundant test coverage
  • test(course-outline): trim reorder hook tests
  • refactor(course-outline): inline tiny state helpers
  • refactor(course-outline): inline page alert helper
  • refactor(course-outline): extract tree, modal, and action hooks
  • fix(course-outline): type modal action payloads
  • refactor(course-outline): trim modal and reorder helpers
  • fix(course-outline): pass courseId to reorder hooks
  • fix(course-outline): harden modal mutation flows
  • refactor(course-outline): dedupe reorder mutation flows
  • refactor(course-outline): move modal JSX to CourseOutline
  • refactor(course-outline): use query hooks for outline status
  • refactor(course-outline): expose module interfaces and trim reorder API

Description

Describe what this pull request changes, and why. Include implications for people using this change.
Design decisions and their rationales should be documented in the repo (docstring / ADR), per
OEP-19, and can be linked here.

Useful information to include:

  • Which user roles will this change impact? Common user roles are "Learner", "Course Author",
    "Developer", and "Operator".
  • Include screenshots for changes to the UI (ideally, both "before" and "after" screenshots, if applicable).

Supporting information

Link to other information about the change, such as GitHub issues, or Discourse discussions.
Be sure to check they are publicly readable, or if not, repeat the information here.

Testing instructions

Please provide detailed step-by-step instructions for manually testing this change.

Other information

Include anything else that will help reviewers and consumers understand the change.

  • Does this change depend on other changes elsewhere?
  • Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.

Best Practices Checklist

We're trying to move away from some deprecated patterns in this codebase. Please
check if your PR meets these recommendations before asking for a review:

  • Any new files are using TypeScript (.ts, .tsx).
  • Avoid propTypes and defaultProps in any new or modified code.
  • Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
  • Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
  • Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
  • All new i18n messages in messages.ts files have a description for translators to use.
  • Avoid using ../ in import paths. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

@openedx-webhooks openedx-webhooks added open-source-contribution PR author is not from Axim or 2U core contributor PR author is a Core Contributor (who may or may not have write access to this repo). labels Jun 2, 2026
@openedx-webhooks
Copy link
Copy Markdown

Thanks for the pull request, @navinkarkera!

This repository is currently maintained by @bradenmacdonald.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

  • If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
    • This process (including the steps you'll need to take) is documented here.
  • If it doesn't, simply proceed with the next step.
🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

  • Dependencies

    This PR must be merged before / after / at the same time as ...

  • Blockers

    This PR is waiting for OEP-1234 to be accepted.

  • Timeline information

    This PR must be merged by XX date because ...

  • Partner information

    This is for a course on edx.org.

  • Supporting documentation
  • Relevant Open edX discussion forum threads
🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Update the status of your PR

Your PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate.


Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

  • The size and impact of the changes that it introduces
  • The need for product review
  • Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

@github-project-automation github-project-automation Bot moved this to Needs Triage in Contributions Jun 2, 2026
@navinkarkera navinkarkera changed the title feat: refactor course outline to remove redux refactor: course outline to remove redux Jun 2, 2026
@mphilbrick211 mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Jun 2, 2026
@navinkarkera navinkarkera force-pushed the navin/fAL-3835/outline-refactor branch from f28d857 to b13cc19 Compare June 4, 2026 14:55
…o context

- Add intent-level drag handlers (previewSections, cancelReorderPreview,
  commitSectionReorder, commitSubsectionReorder, commitUnitReorder)
- Use preview/commit snapshot pattern with rollback on failure
- Await refreshed sections before clearing subsection/unit reorder preview
- Add optimistic section preview on drag drop
- Remove setSections/restoreSectionList from public API
- Remove duplicate useCourseOutlineIndex hook from apiHooks
After successful section/subsection/unit reorder, sync React Query outline index cache so committed tree does not snap back to pre-drop state.

CourseOutlineStateContext.tsx:
- Replace acceptReorderPreview with acceptReorderAndSyncSections /
  acceptReorderAndSyncSectionOrder helpers that update query cache on success.
- Use effectiveOutlineIndexData (prefer query cache) over outlineIndexData.
- Read sections from query-backed data with Redux fallback.

apiHooks.ts:
- Extract replaceSectionInOutlineIndex, appendSectionToOutlineIndex,
  insertDuplicatedSectionInOutlineIndex, invalidateParentQueriesAndSync helpers.
- Remove remaining Redux dispatch imports (addSection, updateSectionList,
  duplicateSection); write to query cache instead.

CourseOutline.test.tsx:
- Update courseId fixture to realistic format.
- await configure mutations and keep modal open on failure
- scope publish mutations by courseId for save-status tracking
hook now returns OutlineModals props object instead of rendered JSX
Route local course-outline imports through public state/data index files.
Move reorder preview math to callers so commit handlers own mutation
and cache-sync work.

Also remove stale hook deps and an unsafe outline data cast.
- Create src/course-outline/data/queryKeys.ts as single source of truth
  for all course-outline React Query keys, replacing three separate
  factories in apiHooks.ts, outlineIndexQuery.ts, and mutationKeys.ts.
- Extract updateCourseStructure helper in outlineIndexCacheUtils.ts
  to replace repeated 4-level immutable spread pattern.
- Fix useCourseItemData cache priming: replace nested forEach(async)
  with recursive primeChildCache using for...of for deterministic
  order and arbitrary depth support. Add guards for edge cases
  (undefined childInfo, missing children).
- Delete mutationKeys.ts; update all imports to use queryKeys.ts.
- Merge query key consolidation: courseOutlineQueryKeys, index, and
  mutations keys now live in one module and are consumed via
  courseOutlineQueryKeys.index(courseId) and
  courseOutlineQueryKeys.mutations.savingOperation(...).
- buildOutlineIndex typed wrapper around buildTestOutline
- Migrate CourseOutline.test.tsx off 3201-line static fixture
- Centralized jest.mock handles in testSetup.tsx with SetupCardTestMocksOptions
- CardHeader/SectionCard migrated to renderCard/setupCardTestMocks
- SubsectionCard/UnitCard deduplicated common mock blocks
- Delete src/course-outline/__mocks__/courseOutlineIndex.ts (static fixture)
- Remove courseOutlineIndexMock re-export from __mocks__/index.ts

142/142 targeted tests pass. No new TS/lint/format issues.
Extract 8 shared card tests into describeCard factory
(card-test-factory.tsx). Refactor SectionCard, SubsectionCard,
UnitCard test files to call factory, keeping only unique tests.

Extract 4 shared sidebar menu tests into describeSidebarMenus
helper in InfoSidebar.test.tsx.

70/70 tests pass. No new lint/format/typecheck issues.
Replace three card components (SectionCard/SubsectionCard/UnitCard)
with a single recursive OutlineNode component driven by depth prop.
Card files become thin wrappers preserving test imports.

OutlineTree uses a recursive renderNode function with RenderContext
for move-computation parameter passing.

Consolidate reorder helpers:
- applySubsectionReorderMove + applyUnitReorderMove → applyReorderMove
- moveSubsectionOver + moveUnitOver → moveItemOver
- moveSubsection + moveUnit → moveItem

174/174 tests pass. No new lint/format/type issues.
Extract useModalState<T> generic hook — refactor useConfigureDialog
and useHighlightsModal to delegate toggle+data state to it.

Extract useItemFieldSync hook — replace three didMountRef+useEffect
blocks in SubsectionSettings.

Extract useDefaultTab hook — replace identical default-tab effects
in SectionInfoSidebar, SubsectionInfoSidebar, UnitInfoSidebar.

43/43 affected tests pass. No new lint/format/type issues.
- Replace CourseOutlineState interface with OutlineLoadingStatus type
- Replace AccessManagedXBlockDataTypes with Pick<XBlockBase, ...>
- Remove cancelReorderPreview alias in useOutlineReorderState
- Fix useCreateBlockSidebar payload type (CreateCourseXBlockType & ParentIds)
- Simplify OutlineModals props (import hook output types directly)
- Pass highlights/configure hook objects directly in CourseOutline
- Multiple low-impact dedups: pickDefined, forEachDismissedKey,
  PageWrap layout, dead error fields, createBlock helper

143/143 affected tests + 3/3 CourseAuthoringRoutes pass.
@navinkarkera navinkarkera force-pushed the navin/fAL-3835/outline-refactor branch from 7114b80 to e0e5b00 Compare June 5, 2026 04:44
Add three-layer guard against phantom blur-after-Escape mutation:
- skipBlurSubmitRef flag set by Escape keydown, checked in handleEditSubmit
- pointerDownBeforeBlurRef to distinguish real user blur from programmatic
- Phantom blur guard: close without saving when blur has no pointerdown
  and no usable relatedTarget (preserves Tab-away save)
- Tests for Escape cancel, click-away blur save, phantom blur no-mutate,
  and Tab-relatedTarget save
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

core contributor PR author is a Core Contributor (who may or may not have write access to this repo). open-source-contribution PR author is not from Axim or 2U

Projects

Status: Waiting on Author

Development

Successfully merging this pull request may close these issues.

3 participants